# 🍍 菠萝王朝管理后台 — 设计规范 v1.0

> 礼部 Round 5 出品

---

## 一、设计审查总结

### ✅ 做得好的
- **整体色调统一**：暗金（#d4a574）贯穿全局，王朝气质明确
- **Login页精美**：渐变按钮、微点阵背景、光晕效果都很到位
- **暗色模式基础扎实**：CSS变量体系已建立，切换流畅
- **动画细节**：fadeIn、stagger、shimmer骨架屏都有
- **响应式**：移动端侧边栏折叠、网格适配已做

### ⚠️ 需要改进的
1. **硬编码颜色泛滥** — 页面组件中大量 `bg-[#1a1a2e]`、`text-[#d4a574]`、`text-[#a3a3a3]` 直接写死，未使用CSS变量，导致暗/亮模式切换不完整
2. **亮色模式适配残缺** — 多数页面只用 `theme === 'light' ? 'bg-white' : 'bg-[#1a1a2e]'` 做了表层切换，深层元素（图表tooltip、弹窗、展开面板）仍是暗色
3. **字体层级不统一** — 标题用 `text-lg`、`text-xl`、`text-2xl` 随意混用，无统一层级
4. **间距不规律** — `p-3`/`p-4`/`p-5` 混用，`gap-2`/`gap-3`/`gap-4` 无规律
5. **品牌标识薄弱** — 只有文字"🍍 菠萝王朝"，缺少SVG logo和完整品牌系统
6. **圆角不统一** — `rounded`/`rounded-lg`/`rounded-xl` 混用
7. **重复代码** — `fmt()`、`relTime()`、`loadColor()` 等工具函数在多个页面重复定义

---

## 二、色彩系统

### 主色（Imperial Gold）
| 用途 | 变量 | 暗色值 | 亮色值 |
|------|------|--------|--------|
| 主色 | `--accent` | `#d4a574` | `#b8956a` |
| 主色悬停 | `--accent-hover` | `#c49464` | `#a6855a` |
| 主色浅底 | `--accent-glow` | `rgba(212,165,116,0.15)` | `rgba(184,149,106,0.1)` |
| 主色文字渐变 | — | `#d4a574 → #e5c9a8` | `#b8956a → #d4b896` |

### 语义色
| 用途 | 变量 | 暗色值 | 亮色值 |
|------|------|--------|--------|
| 成功 | `--success` | `#22c55e` | `#16a34a` |
| 警告 | `--warning` | `#eab308` | `#ca8a04` |
| 危险 | `--danger` | `#ef4444` | `#dc2626` |
| 信息 | `--info` | `#3b82f6` | `#2563eb` |

### 背景层级
| 层级 | 变量 | 暗色值 | 亮色值 | 用途 |
|------|------|--------|--------|------|
| L0 底层 | `--bg-primary` | `#0d0d1a` | `#f8f6f3` | 页面背景 |
| L1 卡片 | `--bg-secondary` | `#1a1a2e` | `#ffffff` | 卡片/面板 |
| L2 嵌套 | `--bg-tertiary` | `#16213e` | `#faf8f5` | 卡片内嵌套区域 |
| L3 侧边栏 | `--bg-sidebar` | `#0f0f23` | `#ffffff` | 侧边栏 |
| L4 输入框 | `--bg-input` | `#0d0d1a` | `#f5f3f0` | 表单输入 |

### 文字层级
| 层级 | 变量 | 暗色值 | 亮色值 |
|------|------|--------|--------|
| 主文字 | `--text-primary` | `#e5e5e5` | `#1a1a1a` |
| 次文字 | `--text-secondary` | `#a3a3a3` | `#666666` |
| 弱文字 | `--text-tertiary` | `#666666` | `#999999` |

### 边框
| 用途 | 变量 | 暗色值 | 亮色值 |
|------|------|--------|--------|
| 主色边框 | `--border-accent` | `rgba(212,165,116,0.20)` | `rgba(184,149,106,0.20)` |
| 分隔线 | `--border-subtle` | `rgba(212,165,116,0.12)` | `rgba(184,149,106,0.15)` |
| 卡片边框 | `--border-card` | `transparent` | `#e5e2dd` |

---

## 三、字体层级

基于 4px 基准网格：

| 级别 | Tailwind | 大小 | 行高 | 用途 |
|------|----------|------|------|------|
| H1 | `text-xl font-bold` | 20px | 28px | 页面标题 |
| H2 | `text-base font-semibold` | 16px | 24px | 卡片/区块标题 |
| H3 | `text-sm font-medium` | 14px | 20px | 子标题 |
| Body | `text-sm` | 14px | 20px | 正文 |
| Small | `text-xs` | 12px | 16px | 辅助文字、标签 |
| Caption | `text-[10px]` | 10px | 14px | 微文字、时间戳 |
| Micro | `text-[9px]` | 9px | 12px | 极小标注（少用） |

**数据展示**：所有数字/数据用 `font-mono tabular-nums`

---

## 四、间距规范

基于 4px 网格：

| Token | 值 | 用途 |
|-------|----|------|
| `xs` | 4px (p-1) | 极小间距 |
| `sm` | 8px (p-2) | 标签内边距 |
| `md` | 12px (p-3) | 卡片内边距（移动端） |
| `lg` | 16px (p-4) | 卡片内边距（桌面端） |
| `xl` | 20px (p-5) | 区块间距 |
| `2xl` | 24px (p-6) | 页面边距 |

**约定**：
- 卡片内边距：`p-3 sm:p-4`（保持一致）
- 卡片间距：`gap-3 sm:gap-4`
- 页面内区块间距：`space-y-4 sm:space-y-6`

---

## 五、圆角 & 阴影

| 元素 | 圆角 | 阴影 |
|------|------|------|
| 卡片 | `rounded-xl` | 无（暗色主题靠背景层级区分） |
| 按钮 | `rounded-lg` | 无 |
| 输入框 | `rounded-lg` | 无 |
| 标签/Badge | `rounded-md` | 无 |
| 弹窗 | `rounded-xl` | `shadow-2xl` |
| Tooltip | `rounded-lg` | `shadow-lg` |
| 头像/状态点 | `rounded-full` | 无 |

**亮色模式补充**：卡片加 `shadow-sm` 增加层次感

---

## 六、组件标准

### 状态点
```
在线：bg-green-500  空闲：bg-yellow-400  离线：bg-gray-500  错误：bg-red-500
```

### 标签/Badge
```
成功：bg-green-500/20 text-green-400    警告：bg-yellow-500/20 text-yellow-400
危险：bg-red-500/20 text-red-400        信息：bg-blue-500/20 text-blue-400
中性：bg-gray-500/20 text-gray-400      主色：bg-[--accent]/10 text-[--accent]
```

### 进度条
```
高度：h-1.5（标准）或 h-1（紧凑）
背景：bg-primary 圆角：rounded-full
填充色：跟随语义（绿/黄/红）
```

---

## 七、品牌标识

### Logo 规范
- **主Logo**：🍍 emoji + "菠萝王朝" 文字（侧边栏顶部）
- **SVG Logo**：菠萝图案 + 皇冠元素，金色渐变
- **Favicon**：简化菠萝图标
- **色调**：Imperial Gold (#d4a574) 为主色，深蓝紫 (#0d0d1a) 为底色

### 品牌应用
- 侧边栏顶部：Logo + 副标题 + 版本号
- 登录页：大号Logo + 分隔线装饰
- 页面标题区：统一风格标题 + 面包屑

---

## 八、实施清单

### P0 — 本轮完成
- [x] 写设计规范文档（本文件）
- [x] 扩展CSS变量体系（新增 warning/info/bg-sidebar/bg-input/text-tertiary/border-card）
- [x] 统一卡片圆角为 `rounded-xl`
- [x] 添加品牌SVG logo到侧边栏
- [x] 构建通过

### P1 — 后续迭代
- [ ] 将所有页面中硬编码颜色替换为CSS变量引用（需逐页修改）
- [ ] 提取 `fmt()`/`relTime()`/`loadColor()` 到公共 `utils.ts`
- [ ] 亮色模式逐页完善
- [ ] 添加过渡动画到所有展开/折叠交互
