初始化

2026-03-05 21:27:11 +08:00
commit 130de0fd5d
140 changed files with 21972 additions and 0 deletions
--- a/.cursor/rules/012-tailwind.mdc
+++ b/.cursor/rules/012-tailwind.mdc
@@ -0,0 +1,185 @@
+---
+description: "Tailwind CSS 样式规范 — 类名顺序/响应式/暗色模式/主题桥接。管理端与 Element Plus 共存，用户端纯 Tailwind + Headless UI（禁止 Element Plus）"
+globs:
+  - "**/*.vue"
+  - "**/*.css"
+  - "**/*.scss"
+alwaysApply: false
+---
+
+# 🎨 Tailwind CSS Standards
+
+> **⚠️ 双前端区分**：
+> - **管理端** (`Case-Database-Frontend-admin/`)：Tailwind + Element Plus 共存，下方「管理端专属」章节适用
+> - **用户端** (`Case-Database-Frontend-user/`)：纯 Tailwind + Headless UI，**禁止 Element Plus**
+
+## 职责划分（管理端 — Tailwind + Element Plus 共存）
+
+| 层级 | 使用 Tailwind | 使用 Element Plus（仅管理端） |
+|------|--------------|------------------|
+| 页面布局 | `flex`, `grid`, `container`, spacing | - |
+| 间距/定位 | `p-*`, `m-*`, `absolute`, `relative` | - |
+| 表单控件 | - | `el-form`, `el-input`, `el-select` |
+| 数据展示 | - | `el-table`, `el-pagination`, `el-tag` |
+| 反馈组件 | - | `el-dialog`, `el-message`, `el-notification` |
+| 自定义 UI | 背景、边框、阴影、圆角 | - |
+| 文字排版 | `text-*`, `font-*`, `leading-*` | - |
+
+**管理端原则**: Element Plus 组件优先使用其 `size`/`type`/`effect` 等内置 props 控制样式；
+Tailwind 负责组件之间的布局、间距和非组件区域的装饰。
+
+**用户端原则**: 使用 Headless UI (`@headlessui/vue`) 处理交互逻辑（Dialog、Menu、Listbox 等），
+Tailwind 负责全部视觉样式，Lucide Icons 提供图标。
+
+## 类名顺序
+
+布局 → 定位 → 尺寸 → 间距 → 背景 → 边框 → 文字 → 效果 → 交互 → 动画
+
+```html
+class="flex items-center justify-between relative w-full h-10 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 transition-colors"
+```
+
+## 响应式断点（移动优先）
+
+| 断点 | 前缀 | 最小宽度 | 典型设备 |
+|------|------|---------|---------|
+| xs (默认) | 无 | 0px | 手机竖屏 |
+| sm | `sm:` | 640px | 手机横屏 |
+| md | `md:` | 768px | 平板 |
+| lg | `lg:` | 1024px | 小屏桌面 |
+| xl | `xl:` | 1280px | 桌面 |
+| 2xl | `2xl:` | 1536px | 大屏桌面 |
+
+```html
+<!-- 列数：手机1 → 平板2 → 桌面3 → 大屏4 -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
+  ...
+</div>
+
+<!-- 内边距：手机小 → 桌面大 -->
+<main class="p-4 md:p-6 xl:p-8 max-w-screen-2xl mx-auto">...</main>
+
+<!-- 隐藏/显示 -->
+<nav class="hidden lg:flex"><!-- 桌面导航 --></nav>
+<button class="lg:hidden"><!-- 移动端汉堡菜单 --></button>
+```
+
+> **规则**：禁止使用 `max-*` 断点前缀（如 `max-md:hidden`），始终从小屏写起向上覆盖。
+
+## 暗色模式（统一方案）
+
+通过 CSS 变量实现 Tailwind 暗色主题（管理端同时同步 Element Plus）：
+
+```scss
+// src/assets/styles/variables.scss
+:root {
+  --el-color-primary: theme('colors.blue.500');
+  --app-bg: theme('colors.white');
+  --app-text: theme('colors.gray.900');
+}
+
+html.dark {
+  --el-color-primary: theme('colors.blue.400');
+  --app-bg: theme('colors.gray.900');
+  --app-text: theme('colors.gray.100');
+}
+```
+
+```html
+class="bg-[var(--app-bg)] text-[var(--app-text)] dark:bg-gray-900 dark:text-gray-100"
+```
+
+切换入口统一使用 `useDark()` (from `@vueuse/core`) 同步 `html.dark` 类。
+
+## 主题变量桥接
+
+```typescript
+// tailwind.config.ts
+export default {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--el-color-primary)',
+        success: 'var(--el-color-success)',
+        warning: 'var(--el-color-warning)',
+        danger: 'var(--el-color-danger)',
+        info: 'var(--el-color-info)',
+      },
+    },
+  },
+}
+```
+
+## Element Plus 主题定制（仅管理端）
+
+```scss
+// src/assets/styles/element-override.scss
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': ('base': #409eff),
+    'success': ('base': #67c23a),
+    'warning': ('base': #e6a23c),
+    'danger':  ('base': #f56c6c),
+  ),
+);
+```
+
+## 移动端专属工具类
+
+```html
+<!-- 触摸目标最小尺寸（WCAG 2.5.5 要求 44×44px）-->
+<button class="min-w-[44px] min-h-[44px] flex items-center justify-center">
+  <!-- 管理端：<el-icon><Menu /></el-icon> -->
+  <!-- 用户端：<MenuIcon class="w-5 h-5" />（Lucide Icons） -->
+</button>
+
+<!-- 禁止 hover-only 交互（移动端无 hover）-->
+<!-- ❌ -->
+<div class="opacity-0 hover:opacity-100">提示文字</div>
+<!-- ✅ -->
+<div class="opacity-0 hover:opacity-100 focus-within:opacity-100 active:opacity-100">提示文字</div>
+
+<!-- 安全区域（刘海屏、Home Bar）-->
+<nav class="pb-[env(safe-area-inset-bottom,16px)]">...</nav>
+
+<!-- 防止移动端双击缩放 -->
+<button class="touch-manipulation">点击</button>
+
+<!-- 平滑滚动（iOS 惯性）-->
+<div class="overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch]">
+  ...
+</div>
+```
+
+## 规则
+
+- 使用 `cn()` 工具合并条件类名 (from `@/utils/cn`)
+- 超过 5 个类使用换行
+- 必要时使用 `[value]` 自定义值
+- 管理端：禁止用 Tailwind 覆盖 Element Plus 组件内部样式（使用 SCSS 变量定制）
+- 复杂样式抽取为 `@apply` 指令或组件
+- 管理端：Element Plus 组件不加 Tailwind 尺寸类（用 `size` prop）
+- 用户端：禁止引入 Element Plus，使用 Headless UI + Tailwind 组合
+
+## 反模式
+
+```vue
+<!-- ❌ 管理端：用 Tailwind 强改 Element Plus 内部样式 -->
+<el-button class="!bg-red-500 !text-white !border-0">Bad</el-button>
+
+<!-- ✅ 管理端：用 Element Plus props -->
+<el-button type="danger">Good</el-button>
+
+<!-- ❌ 用 Element Plus 做布局（两端均禁止） -->
+<el-row :gutter="20"><el-col :span="12">...</el-col></el-row>
+
+<!-- ✅ 用 Tailwind 做布局 -->
+<div class="grid grid-cols-2 gap-5">...</div>
+
+<!-- ❌ 用户端：引入 Element Plus 组件 -->
+<el-button type="primary">禁止</el-button>
+
+<!-- ✅ 用户端：使用 Headless UI + Tailwind -->
+<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">正确</button>
+```