# 🎨 UI Specifications

> 通用 UI 设计规范。具体以 `ui-specs-user.md`（用户端）和 `ui-specs-admin.md`（管理端）为准。

---

## 设计系统

| 维度 | 用户端 (Case-Database-Frontend-user/) | 管理端 (Case-Database-Frontend-admin/) |
|---|---|---|
| **组件方案** | Tailwind CSS + 自定义组件 | Element Plus + Tailwind CSS |
| **图标** | Lucide Icons | @element-plus/icons-vue |
| **字体** | 系统字体栈 (system-ui) | 系统字体栈 (system-ui) |
| **设计风格** | 品牌化、轻量、视觉吸引力 | 专业、实用、信息密度高 |
| **响应式** | 移动优先 (xs → xl) | 桌面优先 (≥ 1280px) |

## 间距

使用 Tailwind 默认间距 (4px 基准):
- 紧凑: `gap-2` (8px)
- 标准: `gap-4` (16px)
- 宽松: `gap-6` (24px)
- 区块: `gap-8` (32px)

## 响应式断点

| 断点 | 宽度 | 说明 |
|------|------|------|
| sm | 640px | 大手机 |
| md | 768px | 平板 |
| lg | 1024px | 小桌面 |
| xl | 1280px | 桌面 |
| 2xl | 1536px | 大屏 |

## 视觉还原流程

当提供设计稿截图时:
1. 确认目标前端（用户端 or 管理端）
2. 分析颜色、间距、字体
3. 识别组件层级
4. 用户端：使用 Tailwind CSS 还原；管理端：优先使用 Element Plus 组件
5. 注意细节: 阴影、圆角、边框
6. 如不确定，列出选项询问

---

*最后更新: 2026-02-26*