# 🎨 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*