158 lines
4.0 KiB
Markdown
158 lines
4.0 KiB
Markdown
# 🎨 UI 规范 — 用户端（Case-Database-Frontend-user）
|
||
|
||
> 用户端设计规范。AI 在 `Case-Database-Frontend-user/` 中还原设计稿或新建页面时参考本文档。
|
||
> 核心原则：**移动优先、性能优先、品牌一致**
|
||
|
||
---
|
||
|
||
## 1. 设计系统
|
||
|
||
| 项目 | 选型 |
|
||
|---|---|
|
||
| CSS 方案 | Tailwind CSS v3 |
|
||
| 图标 | Lucide Icons（`lucide-vue-next`） |
|
||
| 字体 | 系统字体栈（中文优先）|
|
||
| 动效 | CSS Transition（避免 JS 动画影响性能） |
|
||
|
||
---
|
||
|
||
## 2. 色彩系统
|
||
|
||
```css
|
||
:root {
|
||
/* 品牌主色 — 根据实际品牌替换 */
|
||
--color-primary: #3B82F6; /* blue-500 */
|
||
--color-primary-dark: #1D4ED8; /* blue-700（hover） */
|
||
--color-primary-light: #EFF6FF; /* blue-50（背景） */
|
||
|
||
/* 功能色 */
|
||
--color-success: #10B981; /* green-500 */
|
||
--color-warning: #F59E0B; /* amber-500 */
|
||
--color-danger: #EF4444; /* red-500 */
|
||
--color-info: #6B7280; /* gray-500 */
|
||
|
||
/* 文本层级 */
|
||
--color-text-primary: #111827; /* gray-900 */
|
||
--color-text-secondary: #6B7280; /* gray-500 */
|
||
--color-text-disabled: #D1D5DB; /* gray-300 */
|
||
|
||
/* 背景 */
|
||
--color-bg-page: #F9FAFB; /* gray-50 */
|
||
--color-bg-card: #FFFFFF;
|
||
--color-border: #E5E7EB; /* gray-200 */
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 字体规范
|
||
|
||
| 用途 | 大小 | 字重 | Tailwind 类 |
|
||
|---|---|---|---|
|
||
| 页面大标题 | 24px / 1.5rem | 700 | `text-2xl font-bold` |
|
||
| 卡片标题 | 18px / 1.125rem | 600 | `text-lg font-semibold` |
|
||
| 正文 | 14px / 0.875rem | 400 | `text-sm` |
|
||
| 辅助/标签 | 12px / 0.75rem | 400 | `text-xs` |
|
||
| 按钮文字 | 14px / 0.875rem | 500 | `text-sm font-medium` |
|
||
|
||
---
|
||
|
||
## 4. 间距系统（4px 基准）
|
||
|
||
| 场景 | 间距 | Tailwind 类 |
|
||
|---|---|---|
|
||
| 行内元素间距 | 8px | `gap-2` / `space-x-2` |
|
||
| 卡片内边距 | 16px | `p-4` |
|
||
| 区块间间距 | 24px | `gap-6` / `mb-6` |
|
||
| 页面两侧边距 | 16px（移动）/ 24px（桌面） | `px-4 md:px-6` |
|
||
| 页面顶部安全区 | 16px | `pt-4` |
|
||
|
||
---
|
||
|
||
## 5. 响应式断点（移动优先）
|
||
|
||
| 断点 | 最小宽度 | 典型设备 | 设计优先级 |
|
||
|---|---|---|---|
|
||
| `默认` | 375px | 手机（主力） | ⭐⭐⭐⭐⭐ |
|
||
| `sm` | 640px | 大屏手机 | ⭐⭐⭐⭐ |
|
||
| `md` | 768px | 平板竖屏 | ⭐⭐⭐ |
|
||
| `lg` | 1024px | 平板横屏/小桌面 | ⭐⭐ |
|
||
| `xl` | 1280px | 桌面 | ⭐ |
|
||
|
||
**断点使用顺序**（必须从小写起）：
|
||
```html
|
||
<!-- ✅ 正确：移动端默认，再扩展 -->
|
||
<div class="w-full md:w-1/2 lg:w-1/3">
|
||
|
||
<!-- ❌ 错误：桌面优先写法 -->
|
||
<div class="w-1/3 lg:w-full">
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 组件规范
|
||
|
||
### 按钮
|
||
|
||
```html
|
||
<!-- 主要操作 -->
|
||
<button class="w-full rounded-lg bg-primary py-3 text-sm font-medium text-white active:opacity-80">
|
||
立即购买
|
||
</button>
|
||
|
||
<!-- 次要操作 -->
|
||
<button class="w-full rounded-lg border border-gray-300 py-3 text-sm font-medium text-gray-700">
|
||
加入购物车
|
||
</button>
|
||
```
|
||
|
||
规则：
|
||
- 移动端主操作按钮通常 `w-full`，高度 ≥ 44px
|
||
- 按钮文字简短（≤ 6 字）
|
||
- 加载中禁用按钮并显示 Spinner
|
||
|
||
### 卡片
|
||
|
||
```html
|
||
<div class="rounded-xl bg-white p-4 shadow-sm">
|
||
<!-- 内容 -->
|
||
</div>
|
||
```
|
||
|
||
### 空状态 / 错误状态（必须实现）
|
||
|
||
```html
|
||
<!-- 空状态 -->
|
||
<div class="flex flex-col items-center py-16 text-gray-400">
|
||
<LucidePackageOpen class="mb-3 h-12 w-12" />
|
||
<p class="text-sm">暂无数据</p>
|
||
</div>
|
||
|
||
<!-- 骨架屏（优先于 Loading Spinner） -->
|
||
<div class="animate-pulse rounded-xl bg-gray-100 h-24 w-full" />
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 触摸交互规范
|
||
|
||
- 所有可点击元素最小尺寸：**44 × 44px**
|
||
- 相邻可点击元素间距 ≥ **8px**
|
||
- 列表项点击区域铺满整行
|
||
- 避免 hover 专属交互（移动端无 hover）
|
||
|
||
---
|
||
|
||
## 8. 视觉还原流程
|
||
|
||
1. 识别所属前端（用户端 = 本文档）
|
||
2. 分析设计稿的色彩、间距（对齐上方规范）
|
||
3. 移动端布局先行，再添加 md/lg 断点适配
|
||
4. 使用 Tailwind 语义类（避免任意值 `w-[123px]`）
|
||
5. 实现空状态、加载状态、错误状态
|
||
6. 验证触摸目标尺寸
|
||
|
||
---
|
||
|
||
*最后更新: 2026-02-26*
|