初始化

docs/guides/ui-specs-user.md

@@ -0,0 +1,157 @@
+# 🎨 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*