🚀 Vichi博客-Sakura
📋 一、项目概要
1.1 项目名称
Vichi博客 - 基于AI辅助开发的现代化全栈博客平台
1.2 项目愿景
构建一个技术领先、用户体验卓越的博客系统，整合AI能力提升内容创作和管理效率。采用最新的 Next.js 全栈技术架构，结合 Sakura (樱花) 视觉主题，打造一个既有极客感又不失美感的个人知识管理与展示平台。
1.3 技术栈
| 层级 | 技术 | 版本 | 选择理由 |
|---|---|---|---|
| 核心框架 | Next.js (App Router) | 15.1.4 | 服务端组件(RSC)、SEO优化、全栈一体化 |
| 语言 | TypeScript | 5.x | 强类型约束、开发体验好 |
| UI库 | React | 19.0.0 | 最新的 React 特性支持 |
| 样式 | Tailwind CSS v4 | v4.0.0 | 最新的 CSS-based 配置，极致的性能与开发体验 |
| 组件库 | Shadcn UI (Radix UI) | - | 高度可定制、无障碍支持的 UI 组件 |
| 动画 | Framer Motion | 11.x | 强大的交互动画能力，实现樱花飘落等动效 |
| 数据库 | PostgreSQL / SQLite | - | 稳定可靠的关系型数据库 |
| ORM | Drizzle ORM | 0.38.x | 类型安全、SQL-like 语法、轻量高效 |
| 认证 | NextAuth.js | 4.x | 灵活的身份验证解决方案 |
| 存储 | Aliyun OSS | 6.x | 稳定廉价的对象存储服务 |
| 加密 | Bcrypt | - | 安全的密码哈希存储 |
🎯 二、核心功能需求
2.1 用户角色体系
| 角色 | 权限 | 功能 |
|---|---|---|
| 访客 | 只读 | 浏览文章、查看分类标签、阅读/发布评论、查看说说、友链 |
| 管理员 | 全部 | 文章发布/编辑/删除、分类标签管理、评论审核、友链管理、说说发布、系统配置 |
2.2 博客前台功能 (Sakura 樱花风格)
2.2.1 视觉与交互
- 樱花动效：全局或首页支持
SakuraPetals动态樱花飘落效果。 - 沉浸式导航栏：随页面滚动实现从透明到模糊毛玻璃效果的平滑切换。
- Hero 视觉增强：
- 全屏海报：支持大图背景，底部带有波浪形 (Wave) 视觉平滑过渡。
- 打字机效果：首页 Slogan 动态展示。
- 主题切换：支持浅色/深色/系统模式，深色模式采用深紫色调，契合科技风格。
2.2.2 内容展示
- 文章系统：
- 交互式卡片：文章列表采用阴影卡片设计，支持悬浮缩放。
- 详情页：支持目录导航 (TOC)、字数统计、阅读时间估算。
- Markdown 渲染：支持代码高亮、数学公式、图片灯箱效果。
- 说说 (Talks)：类似朋友圈的动态展示，支持多图预览。
- 友链 (Friends)：精美的卡片式友链展示。
- 搜索系统：全站实时搜索，支持标题、内容、摘要匹配。
2.2.3 互动体验
- 评论系统：支持多级回复、表情包（待增强）、邮件提醒（待开发）。
- 个性化：支持用户修改昵称、头像等基本资料。
2.3 管理后台功能 (/admin)
- 仪表盘：全站数据统计看板。
- 内容管理：
- 文章管理：Markdown 编辑器、图片拖拽上传、分类标签关联。
- 分类/标签管理：支持树状或列表式的 CRUD。
- 评论管理：查看、删除、批量审核。
- 媒体库：基于 OSS 的文件管理系统，支持查看、删除、外链获取。
- 系统维护：说说管理、友链管理、关于我（About）内容编辑。
🏗️ 三、系统架构设计
3.1 目录结构
vichi-blog/
├── app/ # Next.js App Router
│ ├── (blog)/ # 前台展示路由组
│ │ ├── articles/ # 文章详情与列表
│ │ ├── talks/ # 说说页面
│ │ ├── archives/ # 归档页面
│ │ └── layout.tsx # 前台公共布局 (Navbar, Footer, Petals)
│ ├── admin/ # 后台管理路由组 (需 Admin 权限)
│ │ ├── dashboard/ # 数据统计
│ │ ├── articles/ # 内容管理
│ │ └── layout.tsx # 后台侧边栏布局
│ ├── api/ # API 路由
│ │ ├── vichi/ # 前台公开接口
│ │ ├── admin/ # 后台管理接口 (严格权限校验)
│ │ └── auth/ # 认证相关接口
│ └── globals.css # 全局样式 (Tailwind v4 配置)
├── components/ # 组件库
│ ├── blog/ # Sakura 风格前台组件
│ ├── admin/ # 后台管理组件
│ └── ui/ # shadcn/ui 基础原子组件
├── lib/ # 核心库
│ ├── db/ # Drizzle Schema 与数据库连接
│ ├── oss.ts # 阿里云 OSS 封装
│ └── auth.ts # NextAuth 配置
└── drizzle/ # 数据库迁移文件
3.2 数据库设计 (Drizzle Schema)
- t_article: 存储文章核心内容、统计信息、封面、状态等。
- t_user_auth: 存储登录账号、加密密码。
- t_user_info: 存储用户昵称、头像、简介等元数据。
- t_category / t_tag: 分类与标签体系。
- t_comment: 存储评论及回复关系。
- t_talk / t_friend: 存储说说和友链数据。
🔒 四、安全架构实现
- 密码安全：前端 HTTPS 传输 + 后端 Bcrypt 强哈希存储。
- 访问控制：基于 NextAuth 的 Session 校验，结合 Middleware 实现
/admin路由的 Role-Based Access Control (RBAC)。 - 注入防护：Drizzle ORM 原生支持参数化查询。
- 敏感配置：所有密钥通过
.env.local管理。
🚀 五、部署与优化
- 性能优化：
- 图片通过阿里云 OSS CDN 加速。
- 关键页面采用静态生成 (SSG) 或 增量静态再生 (ISR)。
- 组件级懒加载，减少首屏 JS 体积。
- 响应式适配：完美适配 2K/4K 超大屏及移动端。
📅 六、开发进度追踪
详见 进度文档。