胡旭
dce8fe62ea
- 重新设计全站 UI：parchment/ink/terracotta 水墨纸质色系，宋式 serif 排版 - 新增页面：文章列表、文章详情、分类、标签、关于 - GSAP ScrollTrigger 滚动动画 + 逐字揭示效果 - 后台管理系统 /admin：文章/分类/标签 CRUD，JSON 文件存储 - 登录认证（cookie session） - 设计系统文档 UI.md
184 lines
7.2 KiB
Markdown
184 lines
7.2 KiB
Markdown
## Design System — sui_blog
|
||
|
||
水墨纸质杂志风格。暖色纸张底色、近黑墨色文字、赭石色点缀，整体营造宋式文人审美。
|
||
|
||
### 色彩
|
||
|
||
| Token | Hex | 用途 |
|
||
|---|---|---|
|
||
| `parchment` | `#FDFCFA` | 页面背景 |
|
||
| `parchment-deep` | `#F5F2EE` | 深底（代码块、时间轴圆点、标签底色） |
|
||
| `ink` | `#050404` | 主文字、标题 |
|
||
| `ink-light` | `#121010` | 略浅的墨色（about 正文） |
|
||
| `ink-muted` | `#2A2624` | 辅助文字、meta、标签 |
|
||
| `terracotta` | `#A63D2F` | 强调色（链接、CTA、active 状态） |
|
||
| `terracotta-light` | `#C46B5E` | 链接下划线装饰 |
|
||
| `sage` | `#6E8264` | 语义色——已发布/成功状态 |
|
||
| `sage-light` | `#A3B59B` | 预留 |
|
||
| `warm-gray` | `#C5BDB4` | 边框、分隔线、meta 点 |
|
||
| `cream` | `#FAF9F7` | 卡片背景、侧栏、深色按钮文字 |
|
||
|
||
辅助色：`red-600`（删除/错误）、`red-50`（删除 hover 背景）、`white`（内联编辑输入框）。
|
||
|
||
透明度层级：`/80`、`/50`、`/30`、`/20`、`/15`、`/10`、`/5`，用于边框和文字色微调。
|
||
|
||
选中文字：`bg-terracotta` + `text-cream`。
|
||
|
||
### 字体
|
||
|
||
| Class | 字体栈 | 场景 |
|
||
|---|---|---|
|
||
| `font-display` | Noto Serif SC → Cormorant Garamond → Source Han Serif SC → Songti SC, serif | 标题、logo、页面名、时间轴年份、分类名 |
|
||
| `font-body` | Noto Serif SC → Source Serif 4 → Source Han Serif SC → Songti SC, serif | 正文段落、摘要、prose 内容 |
|
||
| `font-sans` | Noto Sans SC → DM Sans → system-ui, sans-serif | 标签、meta、导航、按钮、表单、badge |
|
||
| `font-mono` | JetBrains Mono → Fira Code, monospace | prose 中的代码、admin HTML textarea |
|
||
|
||
正文基础样式：`line-height: 1.9`、`letter-spacing: 0.02em`、开启 antialiased。
|
||
|
||
### 圆角
|
||
|
||
| Class | 用途 |
|
||
|---|---|
|
||
| `rounded-full` | 标签 pill、status badge、CTA 按钮、导航圆点、时间轴圆点 |
|
||
| `rounded-2xl` | 精选卡片、分类卡片、about 信息框 |
|
||
| `rounded-xl` | 标准卡片、表单输入框、admin 列表项、登录框 |
|
||
| `rounded-lg` | 侧栏导航项、操作按钮（保存/取消）、hover 背景 |
|
||
|
||
不使用 `rounded-sm`、`rounded-md`、`rounded-3xl`。层级关系：full（pill）> 2xl（大卡片）> xl（标准卡片/输入框）> lg（小元素）。
|
||
|
||
### 间距
|
||
|
||
页面水平内边距：`px-page`（`clamp(1.5rem, 5vw, 6rem)`）。
|
||
|
||
内容宽度层级：`max-w-5xl`（页面）→ `max-w-3xl`（标签云）→ `max-w-2xl`（文章正文）→ `max-w-lg`（描述文字）→ `max-w-xs`（页脚/短输入）。
|
||
|
||
页面垂直间距：`pt-16 pb-24`（标准区块）、`pt-20 pb-24`（hero 区）、`mt-20`（大段落分隔）。
|
||
|
||
常用 gap：`gap-2`（标签 pill）、`gap-4`（网格卡片）、`gap-5`（精选/分类网格）。
|
||
|
||
卡片内边距：`p-7 md:p-10`（精选大卡片）、`p-7`（分类卡片）、`p-5`（列表项）、`p-4`（统计卡片）。
|
||
|
||
### 卡片
|
||
|
||
所有卡片共享基础样式：
|
||
|
||
```
|
||
bg-cream border border-warm-gray/10
|
||
```
|
||
|
||
Hover 提升：
|
||
|
||
```
|
||
hover:border-terracotta/20
|
||
```
|
||
|
||
大卡片额外加阴影：
|
||
|
||
```
|
||
hover:shadow-lg hover:shadow-terracotta/5
|
||
```
|
||
|
||
精选卡片 / 分类卡片完整样式：
|
||
|
||
```
|
||
relative p-7 md:p-10 rounded-2xl bg-cream border border-warm-gray/10
|
||
hover:border-terracotta/20 hover:shadow-lg hover:shadow-terracotta/5
|
||
transition-all duration-500
|
||
```
|
||
|
||
不使用静态阴影。阴影仅出现在 hover 状态，且仅用于最大的两种卡片。
|
||
|
||
### 按钮
|
||
|
||
**主要 CTA（圆角胶囊）：**
|
||
|
||
```
|
||
px-6 py-3 rounded-full bg-ink text-cream font-sans text-sm tracking-wide
|
||
hover:bg-terracotta transition-colors duration-300
|
||
```
|
||
|
||
**次要 CTA（描边胶囊）：**
|
||
|
||
```
|
||
px-6 py-3 rounded-full border border-warm-gray/30 text-ink-muted font-sans text-sm tracking-wide
|
||
hover:border-terracotta/40 hover:text-terracotta transition-colors duration-300
|
||
```
|
||
|
||
**Admin 主按钮（直角）：**
|
||
|
||
```
|
||
px-4 py-2 rounded-lg bg-ink text-cream font-sans text-sm hover:bg-terracotta transition-colors
|
||
```
|
||
|
||
**Admin 次要按钮：**
|
||
|
||
```
|
||
px-6 py-2.5 rounded-lg border border-warm-gray/20 font-sans text-sm text-ink-muted
|
||
hover:text-ink transition-colors
|
||
```
|
||
|
||
**联系链接（描边胶囊）：**
|
||
|
||
```
|
||
inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-warm-gray/20
|
||
font-sans text-sm text-ink-muted
|
||
hover:border-terracotta hover:text-terracotta transition-all duration-300
|
||
```
|
||
|
||
### 过渡与动画
|
||
|
||
**CSS 过渡（微交互）：**
|
||
- `transition-colors duration-300` — 最常用，所有链接和按钮
|
||
- `transition-all duration-300` — 标签、联系按钮、列表项
|
||
- `transition-all duration-500` — 精选/分类大卡片（更缓的动效）
|
||
- `transition-opacity duration-300` — 箭头 hover 渐显
|
||
|
||
**自定义缓动：** `--ease-literary: cubic-bezier(0.25, 0.1, 0.25, 1)`
|
||
|
||
**CSS 关键帧动画：**
|
||
- `animate-fade-up` — translateY(20px) → 0，0.7s
|
||
- `animate-fade-in` — opacity 0 → 1，0.5s
|
||
|
||
**GSAP（主要动画引擎）：**
|
||
- 缓动函数：`power3.out`（标准）、`power2.inOut`（分隔线）、`back.out(2)`（弹跳缩放）
|
||
- 逐字动画：拆分 `<span>` + stagger `y`/`opacity`/`blur`，stagger 0.035s
|
||
- ScrollTrigger：`start: "top 85%"` ~ `"top 92%"`
|
||
- GsapReveal 组件变体：`fade-up`(y:40)、`fade-in`(opacity:0)、`slide-left`(x:-40)、`slide-right`(x:40)、`scale`(0.92)
|
||
- Stagger 值：0.035（逐字）、0.04~0.15（卡片）、0.08~0.12（列表）
|
||
|
||
### 悬停效果
|
||
|
||
**文字：** `hover:text-terracotta`（主要）、`hover:text-ink`（次要）、`hover:text-red-600`（删除）
|
||
|
||
**背景：** `hover:bg-terracotta`（按钮）、`hover:bg-cream`（列表行高亮）、`hover:bg-warm-gray/10`（侧栏导航）
|
||
|
||
**边框：** `hover:border-terracotta/20`（卡片）、`hover:border-terracotta`（联系按钮）、`hover:border-terracotta/40`（次要 CTA）
|
||
|
||
**Group hover：** `group-hover:text-terracotta`（卡片标题）、`group-hover:opacity-100`（箭头/删除按钮渐显）、`group-hover:translate-x-0`（箭头滑入）
|
||
|
||
**表单聚焦：** `focus:border-terracotta/40 focus:outline-none`，复选框/单选框 `accent-terracotta`
|
||
|
||
### 布局
|
||
|
||
**根布局：** `min-h-full flex flex-col` + `<main className="flex-1">`（sticky footer）
|
||
|
||
**页面容器：** `px-page max-w-5xl mx-auto`
|
||
|
||
**Admin 布局：** `min-h-screen bg-parchment flex` → `aside w-56 shrink-0` + `flex-1 overflow-auto p-8 max-w-5xl`
|
||
|
||
**网格：**
|
||
- `grid md:grid-cols-2 gap-5` — 精选文章
|
||
- `grid sm:grid-cols-2 lg:grid-cols-3 gap-5` — 分类
|
||
- `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4` — Admin 统计
|
||
- `grid grid-cols-2 gap-4` — Admin 表单双列行
|
||
|
||
### Prose 排版
|
||
|
||
文章正文使用 `.prose-literary` 类：字号 1.0625rem、行高 2、字距 0.04em。段落首行缩进 2em（首段不缩进），段间距 1.5em。h2 使用 `font-display` 1.75rem，h3 为 1.35rem。引用块左侧 3px terracotta 色竖线。代码使用 `font-mono` + `bg-parchment-deep`。链接使用 terracotta 色 + 下划线，hover 时下划线加深。
|
||
|
||
### 全局细节
|
||
|
||
- 滚动条：6px 宽，track 为 `parchment-deep`，thumb 为 `warm-gray`，hover 变 `ink-muted`
|
||
- 纸质纹理：`body::before` 叠加 SVG fractalNoise，opacity 0.03
|
||
- 分隔线装饰：`.divider-ornament` 使用两端渐变线 + 中间符号
|