# 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