docs: 补全 README.md 项目文档

2026-06-24 08:49:09 +08:00
parent dce8fe62ea
commit 3707eddfd4
1 changed files with 104 additions and 0 deletions
@@ -1 +1,105 @@
 # sui_blog
+
+个人博客 — 水墨纸质杂志风格。
+
+技术栈：Next.js 16 + React 19 + Tailwind CSS 4 + GSAP ScrollTrigger。
+
+## 页面
+
+| 路由 | 说明 |
+|---|---|
+| `/` | 首页 — Hero 逐字揭示 + 精选文章 + 最新文章 |
+| `/blog` | 文章列表 — 按时间倒序，分类/标签筛选 |
+| `/posts/[slug]` | 文章详情 — 宋式排版，上下篇导航 |
+| `/categories` | 分类浏览 — 卡片网格，悬停动效 |
+| `/tags` | 标签云 |
+| `/about` | 关于页 — 个人介绍 + 时间轴 + 技术栈 |
+
+## 后台管理
+
+| 路由 | 说明 |
+|---|---|
+| `/admin/login` | 登录（密码认证，cookie session） |
+| `/admin` | 仪表盘 — 统计概览 + 最近文章 |
+| `/admin/posts` | 文章管理 — 列表筛选、新建、编辑、删除 |
+| `/admin/categories` | 分类管理 — 增删改 |
+| `/admin/tags` | 标签管理 — 云式展示，hover 删除 |
+
+数据存储在 `src/data/storage/*.json`，已加入 `.gitignore`。
+
+## 快速开始
+
+```bash
+pnpm install
+pnpm dev          # http://localhost:3000
+pnpm build        # 生产构建
+```
+
+初始化种子数据（首次运行）：
+
+```bash
+npx tsx src/lib/seed.ts
+```
+
+## 项目结构
+
+```
+src/
+├── app/
+│   ├── page.tsx              # 首页
+│   ├── layout.tsx            # 根布局
+│   ├── globals.css           # 全局样式 + Tailwind v4 设计令牌
+│   ├── about/                # 关于页
+│   ├── admin/                # 后台管理
+│   │   ├── layout.tsx        # 侧栏 + 鉴权
+│   │   ├── login/            # 登录页
+│   │   ├── posts/            # 文章 CRUD
+│   │   ├── categories/       # 分类管理
+│   │   └── tags/             # 标签管理
+│   ├── api/                  # Route Handlers
+│   │   ├── auth/             # 登录/登出/鉴权
+│   │   ├── posts/            # 文章 CRUD
+│   │   ├── categories/       # 分类 CRUD
+│   │   └── tags/             # 标签 CRUD
+│   ├── blog/                 # 文章列表
+│   ├── categories/           # 分类浏览
+│   ├── posts/[slug]/         # 文章详情
+│   └── tags/                 # 标签云
+├── components/
+│   ├── Header.tsx            # 顶部导航
+│   ├── Footer.tsx            # 页脚
+│   ├── HeroSection.tsx       # 首页 Hero
+│   ├── BlogList.tsx          # 文章列表组件
+│   ├── PostContent.tsx       # 文章正文排版
+│   ├── PostSections.tsx      # 精选/最近文章卡片
+│   └── GsapReveal.tsx        # GSAP 滚动动画组件
+├── data/
+│   ├── posts.ts              # Mock 数据
+│   └── storage/              # JSON 数据文件（gitignored）
+└── lib/
+    ├── store.ts              # 数据存储层（posts/categories/tags CRUD）
+    └── seed.ts               # 种子数据脚本
+```
+
+## 设计系统
+
+详见 [UI.md](./UI.md)。
+
+核心色彩：parchment（纸张底色）+ ink（墨色文字）+ terracotta（赭石强调）+ sage（成功/发布状态）。
+
+字体三层：`font-display`（宋体标题）→ `font-body`（宋体正文）→ `font-sans`（无衬线 UI 文字）。
+
+动画：GSAP ScrollTrigger 驱动页面滚动揭示，逐字 blur 动画用于标题，CSS transition 处理微交互。
+
+## 部署
+
+```bash
+pnpm build
+pnpm start
+```
+
+或部署到 Vercel / 任意 Node.js 主机。
+
+## License
+
+MIT