48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
# 🎨 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*
|