现代化博客系统

一个基于 React 19 + TypeScript + Tailwind CSS + shadcn/ui 构建的现代化博客系统。

✨ 特性

🎨 现代化设计

响应式布局: 完美适配桌面端、平板和移动端
暗色/亮色主题: 支持系统主题自动切换
优雅的UI组件: 基于 shadcn/ui 组件库
流畅的动画: 精心设计的过渡效果

📝 博客功能

文章展示: 支持精选文章、普通文章列表
分类管理: 按技术分类组织文章
标签系统: 灵活的标签云和标签筛选
搜索功能: 全文搜索和高级筛选
文章归档: 按时间归档浏览历史文章
评论系统: 支持文章评论和回复

🛠 技术特性

TypeScript: 完整的类型安全
状态管理: 使用 Zustand 进行轻量级状态管理
路由系统: React Router v7 支持
组件化: 高度模块化的组件设计
性能优化: 懒加载和代码分割

🚀 快速开始

环境要求

Node.js 18+
pnpm 8+

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建项目

pnpm build

代码检查

pnpm lint

📁 项目结构

src/
├── components/          # 组件目录
│   ├── blog/           # 博客相关组件
│   │   ├── article-card.tsx      # 文章卡片
│   │   ├── blog-header.tsx       # 博客头部
│   │   └── blog-sidebar.tsx      # 博客侧边栏
│   ├── layout/         # 布局组件
│   └── ui/             # UI基础组件
├── pages/              # 页面组件
│   ├── BlogHome.tsx    # 博客首页
│   ├── ArticleDetail.tsx # 文章详情页
│   ├── Categories.tsx  # 分类页面
│   ├── Tags.tsx        # 标签页面
│   ├── Search.tsx      # 搜索页面
│   ├── Archive.tsx     # 归档页面
│   └── About.tsx       # 关于页面
├── routes/             # 路由配置
│   └── blog-routes.tsx # 博客路由
├── store/              # 状态管理
│   └── blog-store.ts   # 博客状态
├── types/              # 类型定义
│   └── blog.ts         # 博客类型
└── styles/             # 样式文件

🎯 页面功能

首页 (/)

精选文章展示
最新文章列表
网格/列表视图切换
文章筛选和排序

文章详情 (/article/:id)

完整文章内容
作者信息展示
文章操作（点赞、收藏、分享）
评论系统
相关文章推荐

分类页面 (/categories)

所有分类展示
分类统计信息
分类文章数量

标签页面 (/tags)

标签云展示
列表视图切换
标签统计信息

搜索页面 (/search)

全文搜索功能
搜索结果展示
高级筛选选项
热门搜索推荐

归档页面 (/archive)

按月份归档
可折叠的月份列表
归档统计信息

关于页面 (/about)

个人介绍
技能展示
联系方式
博客介绍

🎨 设计系统

颜色主题

支持亮色/暗色主题
基于 CSS 变量的主题系统
自动跟随系统主题

组件规范

基于 shadcn/ui 组件库
统一的设计语言
可复用的组件设计

响应式设计

移动优先的设计理念
断点：sm(640px), md(768px), lg(1024px), xl(1280px)
灵活的网格布局

📱 响应式特性

桌面端 (1024px+)

三栏布局（主内容 + 侧边栏）
完整的导航菜单
网格视图文章列表

平板端 (768px - 1023px)

两栏布局
折叠式侧边栏
适配的组件尺寸

移动端 (< 768px)

单栏布局
汉堡菜单
触摸友好的交互

🔧 自定义配置

主题定制

在 src/styles/index.css 中修改 CSS 变量来定制主题颜色。

组件扩展

所有组件都支持通过 className 属性进行样式扩展。

数据接口

在实际项目中，需要将模拟数据替换为真实的 API 接口。

📝 开发规范

代码风格

使用 TypeScript 进行类型检查
遵循 ESLint 规则
组件使用 PascalCase 命名
文件使用 kebab-case 命名

组件开发

单一职责原则
Props 类型定义
适当的注释说明
可复用性考虑

状态管理

使用 Zustand 管理全局状态
本地状态使用 useState
避免过度使用全局状态

🚀 部署

构建优化

pnpm build

静态部署

构建后的文件在 dist 目录，可以部署到任何静态文件服务器。

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

技术栈: React 19 + TypeScript + Vite + Tailwind CSS + shadcn/ui + Zustand + React Router v7

README.md 4.8 KB 永久链接 文件历史 原始文件