📝 docs(ui): 更新UI开发规范，整合Tailwind CSS v4与组件设计

- 添加@egoist/tailwindcss-icons和clsx到前端技术栈
- 重构小程序UI规范，采用Tailwind CSS v4原子化样式系统
- 引入Heroicons图标库使用规范及示例代码
- 定义基于shadcn/ui模式的组件开发标准
- 添加UI组件目录结构和样式最佳实践指南
- 提供按钮、卡片、输入框等核心组件实现示例
- 完善响应式布局、主题配置和状态管理方案

.roo/rules/01-general.md

@@ -57,6 +57,8 @@ mini/
 - **React 18** - 前端框架
 - **TypeScript** (严格模式) - 类型系统
 - **Tailwind CSS 4** - 样式框架
+- **@egoist/tailwindcss-icons** - 图标样式
+- **clsx** - class样式
 - **React Query (TanStack) 5** - 数据获取和缓存
 
 ### 后端

.roo/rules/16-mini-program-ui.md

@@ -1,366 +1,369 @@
-# 小程序 UI 设计规范
-
-## 1. 设计原则
-
-### 1.1 核心原则
-- **简洁直观**：界面简洁，操作路径短，减少用户认知负担
-- **一致性**：保持视觉和操作逻辑的一致性
-- **响应迅速**：页面加载和交互反馈及时
-- **易用性**：符合微信小程序设计规范，降低学习成本
-
-### 1.2 适配原则
-- 支持 iOS 和 Android 双平台
-- 适配不同屏幕尺寸（iPhone SE 到 iPad）
-- 考虑深色模式适配
-
-## 2. 视觉规范
-
-### 2.1 色彩系统
-
-#### 主色调
-- **品牌主色**：#1890ff（蓝色）
-- **辅助色**：
-  - 成功：#52c41a（绿色）
-  - 警告：#faad14（黄色）
-  - 错误：#ff4d4f（红色）
-  - 信息：#1890ff（蓝色）
-
-#### 中性色
-- **文字色**：
-  - 主要文字：#262626
-  - 次要文字：#595959
-  - 置灰文字：#8c8c8c
-  - 辅助文字：#bfbfbf
-- **背景色**：
-  - 页面背景：#f5f5f5
-  - 卡片背景：#ffffff
-  - 分割線：#e8e8e8
-
-### 2.2 占位图规范
-
-#### Unsplash 占位图使用
-- **默认占位图**：使用 Unsplash 提供的免费高质量图片
-- **图片尺寸**：根据组件需求选择合适的尺寸
-
-### 2.3 字体规范
-
-#### 字体家族
-- iOS：-apple-system-font, Helvetica Neue
-- Android：Roboto, Helvetica Neue
-
-#### 字体大小
-- 标题：18px（`font-size: 36rpx`）
-- 正文：16px（`font-size: 32rpx`）
-- 辅助文字：14px（`font-size: 28rpx`）
-- 说明文字：12px（`font-size: 24rpx`）
-
-#### 字重
-- 标题：600（中等）
-- 正文：400（常规）
-- 强调：500（中等）
-
-### 2.4 间距规范
-
-#### 基础间距
-- 8rpx（4px）
-- 16rpx（8px）
-- 24rpx（12px）
-- 32rpx（16px）
-- 48rpx（24px）
-- 64rpx（32px）
-
-#### 组件间距
-- 卡片内边距：32rpx
-- 列表项间距：24rpx
-- 按钮间距：32rpx
-- 表单间距：48rpx
-
-## 3. 组件规范
-
-### 3.1 按钮规范
-
-#### 主要按钮
-```css
-.button-primary {
-  background-color: #1890ff;
-  color: #ffffff;
-  border-radius: 8rpx;
-  padding: 24rpx 48rpx;
-  font-size: 32rpx;
-  font-weight: 500;
-}
-```
-
-#### 次要按钮
-```css
-.button-secondary {
-  background-color: #ffffff;
-  color: #1890ff;
-  border: 2rpx solid #1890ff;
-  border-radius: 8rpx;
-  padding: 24rpx 48rpx;
-  font-size: 32rpx;
-}
-```
+# 小程序UI开发规范 (Tailwind CSS v4)
 
-#### 禁用状态
-```css
-.button-disabled {
-  background-color: #f5f5f5;
-  color: #bfbfbf;
-  border: none;
-}
-```
+## 概述
 
-### 3.2 输入框规范
+本规范定义了基于Taro框架的小程序UI开发标准，采用Tailwind CSS v4原子化样式和Heroicons图标库，遵循shadcn/ui组件设计模式。
 
-#### 基础样式
-```css
-.input-base {
-  background-color: #ffffff;
-  border: 2rpx solid #d9d9d9;
-  border-radius: 8rpx;
-  padding: 24rpx;
-  font-size: 32rpx;
-  color: #262626;
-}
-```
+## 技术栈
 
-#### 输入框状态
-- 默认：border-color: #d9d9d9
-- 聚焦：border-color: #1890ff
-- 错误：border-color: #ff4d4f
-- 禁用：background-color: #f5f5f5
+- **Taro 4** - 跨端小程序框架
+- **React 18** - 前端框架
+- **Tailwind CSS v4** - 原子化CSS框架
+- **@egoist/tailwindcss-icons** - 图标库集成
+- **clsx** - 条件样式类名管理
 
-### 3.3 卡片规范
+## 目录结构
 
-#### 基础卡片
-```css
-.card-base {
-  background-color: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  padding: 32rpx;
-}
 ```
-
-#### 卡片类型
-- 信息卡片：白色背景，16rpx圆角
-- 操作卡片：带边框，8rpx圆角
-- 统计卡片：带图标和数字展示
-
-### 3.4 列表规范
-
-#### 列表项样式
-```css
-.list-item {
-  background-color: #ffffff;
-  padding: 32rpx;
-  border-bottom: 2rpx solid #f0f0f0;
-}
+mini/
+├── src/
+│   ├── components/
+│   │   └── ui/           # UI组件库
+│   │       ├── button.tsx
+│   │       ├── input.tsx
+│   │       ├── card.tsx
+│   │       └── ...
+│   ├── pages/
+│   ├── utils/
+│   └── app.css           # Tailwind样式入口
+├── tailwind.config.js    # Tailwind配置
+└── postcss.config.js     # PostCSS配置
 ```
 
-#### 列表状态
-- 正常状态：白色背景
-- 点击状态：#f5f5f5背景
-- 加载状态：骨架屏占位
-
-## 4. 页面布局
-
-### 4.1 页面结构
-
-#### 导航栏
-- 高度：88rpx
-- 背景色：#ffffff
-- 标题：居中对齐，18px字体
-- 返回按钮：左侧44x44rpx
-
-#### 内容区域
-- 安全区域：左右各32rpx
-- 顶部间距：32rpx
-- 底部间距：32rpx
-
-### 4.2 栅格系统
-
-#### 响应式布局
-- 小屏幕（≤375px）：单列布局
-- 中屏幕（376-414px）：双列布局
-- 大屏幕（≥415px）：三列布局
-
-#### 间距规范
-- 组件间距：32rpx
-- 段落间距：48rpx
-- 页面间距：64rpx
-
-## 5. 交互规范
-
-### 5.1 触摸反馈
-
-#### 按钮反馈
-- 触摸时：透明度降低至0.7
-- 松开后：恢复透明度
-- 动画时长：200ms
-
-#### 列表反馈
-- 触摸时：背景色变为#f5f5f5
-- 松开后：恢复原色或跳转页面
-
-### 5.2 加载状态
+## 样式规范
 
-#### 骨架屏
-- 使用灰色占位块模拟内容
-- 动画：脉冲效果
-- 时长：1.5s循环
+### 1. Tailwind CSS v4 使用规范
 
-#### 加载更多
-- 底部显示"加载中..."提示
-- 失败后显示"点击重试"
-- 无更多数据时显示"没有更多了"
+#### 1.1 基础类名使用
+```typescript
+// ✅ 正确使用原子类
+<View className="flex items-center justify-between p-4 bg-white rounded-lg shadow-sm">
+  <Text className="text-lg font-semibold text-gray-900">标题</Text>
+</View>
 
-### 5.3 空状态
-
-#### 空数据
-- 居中显示图标和文字
-- 图标：系统默认空状态图标
-- 文字：14px，#8c8c8c颜色
-
-#### 错误状态
-- 显示错误图标
-- 提供重试按钮
-- 错误信息清晰易懂
-
-## 6. 图标规范
-
-### 6.1 图标尺寸
-
-#### 功能图标
-- 小图标：48rpx × 48rpx
-- 中图标：64rpx × 64rpx
-- 大图标：96rpx × 96rpx
-
-#### 头像图标
-- 小头像：96rpx × 96rpx
-- 中头像：128rpx × 128rpx
-- 大头像：160rpx × 160rpx
-
-### 6.2 图标风格
-
-#### 线性图标
-- 线条粗细：4rpx
-- 颜色：#262626（主要）、#8c8c8c（次要）
-
-#### 面性图标
-- 填充颜色：#1890ff（主色）
-- 背景色：rgba(24, 144, 255, 0.1)
+// ❌ 避免使用内联样式
+<View style={{ display: 'flex', alignItems: 'center', padding: 16 }}>
+  <Text style={{ fontSize: 18, fontWeight: '600' }}>标题</Text>
+</View>
+```
 
-## 7. 动效规范
+#### 1.2 响应式设计
+```typescript
+// 使用Tailwind的响应式前缀
+<View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <View className="w-full sm:w-1/2 md:w-1/3" />
+</View>
+```
 
-### 7.1 过渡动画
+#### 1.3 状态样式
+```typescript
+// 悬停和焦点状态
+<Button className="bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+  点击按钮
+</Button>
+
+// 禁用状态
+<Button className="disabled:opacity-50 disabled:cursor-not-allowed">
+  禁用按钮
+</Button>
+```
 
-#### 页面切换
-- 类型：滑动过渡
-- 时长：300ms
-- 缓动函数：ease-out
+### 2. 图标使用规范
+
+#### 2.1 Heroicons图标
+使用`@egoist/tailwindcss-icons`提供的图标类名：
+
+```typescript
+// 基础用法
+<View className="i-heroicons-user-20-solid text-gray-600" />
+<Button className="flex items-center gap-2">
+  <View className="i-heroicons-plus-20-solid" />
+  <Text>添加</Text>
+</Button>
+
+// 图标大小和颜色
+<View className="i-heroicons-home-16-solid w-6 h-6 text-blue-500" />
+<View className="i-heroicons-cog-8-tooth-20-solid w-8 h-8 text-gray-400" />
+
+// 图标变体
+// solid - 实心图标
+// outline - 轮廓图标
+// mini - 迷你图标 (20x20)
+// micro - 微型图标 (16x16)
+<View className="i-heroicons-heart-20-solid text-red-500" />
+<View className="i-heroicons-heart-20-outline text-red-500" />
+```
 
-#### 元素出现
-- 类型：淡入+缩放
-- 时长：200ms
-- 延迟：50ms
+#### 2.2 图标命名规则
+```
+i-heroicons-[图标名]-[大小]-[变体]
+```
+- 大小: 16 | 20 | 24
+- 变体: solid | outline
+
+### 3. UI组件规范
+
+#### 3.1 组件文件结构
+每个UI组件应包含：
+```typescript
+// mini/src/components/ui/button.tsx
+import { Button as TaroButton, ButtonProps } from '@tarojs/components'
+import { cn } from '@/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'underline-offset-4 hover:underline text-primary',
+      },
+      size: {
+        default: 'h-10 py-2 px-4',
+        sm: 'h-9 px-3 rounded-md',
+        lg: 'h-11 px-8 rounded-md',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+interface ButtonProps extends ButtonProps, VariantProps<typeof buttonVariants> {}
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TaroButton
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+```
 
-### 7.2 微交互
+#### 3.2 常用组件示例
 
-#### 按钮点击
-- 缩放：0.95
-- 时长：150ms
-- 缓动函数：ease-in-out
+**按钮组件 (Button)**
+```typescript
+// 使用示例
+<Button variant="primary" size="lg" onClick={handleClick}>
+  <View className="i-heroicons-plus-20-solid mr-2" />
+  创建用户
+</Button>
 
-#### 列表滑动
-- 阻尼系数：0.8
-- 回弹距离：32rpx
-- 时长：400ms
+<Button variant="outline" size="sm" disabled={loading}>
+  {loading && <View className="i-heroicons-arrow-path-20-solid animate-spin mr-2" />}
+  加载中...
+</Button>
+```
 
-## 8. 适配规范
+**卡片组件 (Card)**
+```typescript
+<Card className="p-6 bg-white rounded-lg shadow-sm">
+  <CardHeader>
+    <View className="flex items-center justify-between">
+      <Text className="text-lg font-semibold">用户信息</Text>
+      <View className="i-heroicons-user-circle-20-solid text-gray-400" />
+    </View>
+  </CardHeader>
+  <CardContent>
+    <Text className="text-gray-600">用户详情内容</Text>
+  </CardContent>
+</Card>
+```
 
-### 8.1 屏幕适配
+**输入框组件 (Input)**
+```typescript
+<View className="space-y-2">
+  <Label htmlFor="username">用户名</Label>
+  <View className="relative">
+    <View className="absolute left-3 top-1/2 -translate-y-1/2">
+      <View className="i-heroicons-user-20-solid text-gray-400 w-5 h-5" />
+    </View>
+    <Input
+      id="username"
+      className="pl-10"
+      placeholder="请输入用户名"
+      value={username}
+      onInput={handleInput}
+    />
+  </View>
+</View>
+```
 
-#### 安全区域
-- iPhone X及以上：底部留空88rpx
-- Android全面屏：底部留空64rpx
-- 普通屏幕：底部留空48rpx
+### 4. 页面布局规范
+
+#### 4.1 页面容器
+```typescript
+// 主容器
+<View className="min-h-screen bg-gray-50">
+  <View className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    {/* 页面内容 */}
+  </View>
+</View>
+
+// 卡片布局
+<View className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+  {/* 卡片内容 */}
+</View>
+```
 
-#### 字体适配
-- 小屏幕：字体大小-2rpx
-- 大屏幕：字体大小+2rpx
-- 超大屏幕：字体大小+4rpx
+#### 4.2 响应式断点
+- `sm`: 640px
+- `md`: 768px  
+- `lg`: 1024px
+- `xl`: 1280px
+- `2xl`: 1536px
 
-### 8.2 深色模式
+### 5. 主题配置
 
-#### 色彩映射
-- 背景色：#ffffff → #1a1a1a
-- 文字色：#262626 → #e6e6e6
-- 卡片背景：#ffffff → #2a2a2a
-- 分割线：#e8e8e8 → #3a3a3a
+#### 5.1 颜色系统
+```css
+/* 在 app.css 中定义 */
+:root {
+  --primary: 59 130 246;
+  --primary-foreground: 255 255 255;
+  --secondary: 107 114 128;
+  --secondary-foreground: 255 255 255;
+  --accent: 243 244 246;
+  --accent-foreground: 17 24 39;
+  --destructive: 239 68 68;
+  --destructive-foreground: 255 255 255;
+  --muted: 249 250 251;
+  --muted-foreground: 107 114 128;
+  --border: 229 231 235;
+  --input: 255 255 255;
+  --ring: 59 130 246;
+  --background: 255 255 255;
+  --foreground: 17 24 39;
+}
+```
 
-#### 图片适配
-- 图标：使用系统图标自动适配
-- 图片：提供深色模式专用版本
+#### 5.2 Tailwind配置
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'rgb(var(--primary))',
+        'primary-foreground': 'rgb(var(--primary-foreground))',
+        secondary: 'rgb(var(--secondary))',
+        'secondary-foreground': 'rgb(var(--secondary-foreground))',
+        accent: 'rgb(var(--accent))',
+        'accent-foreground': 'rgb(var(--accent-foreground))',
+        destructive: 'rgb(var(--destructive))',
+        'destructive-foreground': 'rgb(var(--destructive-foreground))',
+        muted: 'rgb(var(--muted))',
+        'muted-foreground': 'rgb(var(--muted-foreground))',
+        border: 'rgb(var(--border))',
+        input: 'rgb(var(--input))',
+        ring: 'rgb(var(--ring))',
+        background: 'rgb(var(--background))',
+        foreground: 'rgb(var(--foreground))',
+      },
+    },
+  },
+  plugins: [
+    require('@egoist/tailwindcss-icons')({
+      // 配置Heroicons
+      collections: {
+        heroicons: {
+          solid: true,
+          outline: true,
+          mini: true,
+        },
+      },
+    }),
+  ],
+}
+```
 
-## 9. 代码规范
+### 6. 工具函数
 
-### 9.1 CSS命名规范
+#### 6.1 类名合并工具
+```typescript
+// mini/src/utils/cn.ts
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
-#### BEM命名法
-```css
-.block__element--modifier
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
 ```
 
-#### 示例
-```css
-.button--primary {}
-.card__header {}
-.list-item--active {}
+### 7. 最佳实践
+
+#### 7.1 状态管理
+```typescript
+// 使用React Hook进行状态管理
+const [loading, setLoading] = useState(false)
+const [data, setData] = useState<User[]>([])
+
+// 加载状态显示
+{loading ? (
+  <View className="flex justify-center py-8">
+    <View className="i-heroicons-arrow-path-20-solid animate-spin w-8 h-8 text-blue-500" />
+  </View>
+) : (
+  <View className="grid grid-cols-1 gap-4">
+    {data.map(item => <Card key={item.id} {...item} />)}
+  </View>
+)}
 ```
 
-### 9.2 样式组织
-
-#### 文件结构
-```
-styles/
-├── base/          # 基础样式
-├── components/    # 组件样式
-├── layouts/       # 布局样式
-├── themes/        # 主题样式
-└── utils/         # 工具样式
+#### 7.2 错误处理
+```typescript
+// 错误状态展示
+<View className="text-center py-8">
+  <View className="i-heroicons-exclamation-triangle-20-solid w-12 h-12 text-red-500 mx-auto mb-4" />
+  <Text className="text-gray-600">加载失败，请稍后重试</Text>
+  <Button variant="outline" size="sm" onClick={retry} className="mt-4">
+    重新加载
+  </Button>
+</View>
 ```
 
-#### 样式优先级
-1. 内联样式（谨慎使用）
-2. 页面样式
-3. 组件样式
-4. 全局样式
+### 8. 性能优化
 
-## 10. 最佳实践
+#### 8.1 样式优化
+- 使用Tailwind的JIT模式，只生成用到的类名
+- 避免内联样式，全部使用类名
+- 合理使用`@apply`提取重复样式
 
-### 10.1 性能优化
+#### 8.2 图标优化
+- 使用CSS图标而非图片图标
+- 图标按需加载，不使用的图标不会被打包
+- 合理使用图标大小，避免过大图标
 
-#### 图片优化
-- 使用webp格式
-- 按需加载
-- 压缩至合适尺寸
+### 9. 调试工具
 
-#### 样式优化
-- 避免深层嵌套
-- 使用transform代替position
-- 减少重排重绘
+#### 9.1 开发调试
+```typescript
+// 添加调试样式类
+<View className="border border-red-500 debug">
+  <Text>调试内容</Text>
+</View>
 
-### 10.2 可访问性
+// 使用Tailwind的调试工具
+// 在开发环境中添加
+// <View className="outline outline-1 outline-red-500" />
+```
 
-#### 文字可读性
-- 最小字号：24rpx
-- 行高：1.5倍
-- 对比度：WCAG 2.1 AA标准
+## 注意事项
 
-#### 触摸目标
-- 最小尺寸：88rpx × 88rpx
-- 间距：至少16rpx
-- 反馈：视觉+触觉
+1. **兼容性**：确保所有类名在小程序环境中有效
+2. **性能**：避免过度嵌套和复杂选择器
+3. **可维护性**：保持组件结构清晰，样式统一
+4. **可读性**：合理使用空格和换行，提高代码可读性