1.3 KiB
1.3 KiB
🎨 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 | 大屏 |
视觉还原流程
当提供设计稿截图时:
- 确认目标前端（用户端 or 管理端）
- 分析颜色、间距、字体
- 识别组件层级
- 用户端：使用 Tailwind CSS 还原；管理端：优先使用 Element Plus 组件
- 注意细节: 阴影、圆角、边框
- 如不确定，列出选项询问
最后更新: 2026-02-26