🗑️ chore(config): 删除过时的UI开发规范文档

- 移除13-ui-style.md管理后台界面开发规范
- 移除16-mini-program-ui.md小程序UI开发规范
- 移除17-mini-program-forms.md小程序表单开发规范

.roo/rules/13-ui-style.md

@@ -1,169 +0,0 @@
-# 管理后台界面开发规范
-
-## 1. 布局规范
-
-### 1.1 整体布局结构
-- 采用三栏布局：侧边导航栏 + 顶部操作栏 + 主内容区
-- 侧边栏固定宽度240px，支持折叠功能
-- 顶部导航栏高度固定为64px
-- 主内容区边距统一为24px
-
-### 1.2 响应式设计
-- 桌面端：完整三栏布局
-- 平板端：可折叠侧边栏
-- 移动端：侧边栏转为抽屉式导航
-
-### 1.3 容器样式
-- 卡片容器使用白色背景(#ffffff)
-- 卡片阴影使用 `shadow-sm transition-all duration-300 hover:shadow-md`
-- 卡片边框使用 `border: none`
-- 卡片圆角统一为 `border-radius: 6px`
-
-## 2. 色彩规范
-
-### 2.1 主色调
-- 主色：蓝色(#1890ff)，用于主要按钮、选中状态和关键交互元素
-- 辅助色：绿色(#52c41a)用于成功状态，红色(#ff4d4f)用于错误状态，黄色(#faad14)用于警告状态
-
-### 2.2 中性色
-- 背景色：浅灰(#f5f5f5)用于页面背景，白色(#ffffff)用于卡片背景
-- 文本色：深灰(#1f2937)用于主要文本，中灰(#6b7280)用于次要文本，浅灰(#9ca3af)用于提示文本
-
-## 3. 组件样式规范
-
-### 3.1 按钮样式
-- 主要按钮：使用主色调背景，白色文字
-- 按钮高度统一为40px，大型按钮使用48px
-- 按钮圆角统一为4px
-- 按钮文本使用14px字体
-- 按钮添加悬停效果：`hover:shadow-lg transition-all duration-200`
-
-### 3.2 表单元素
-- 输入框高度统一为40px
-- 输入框前缀图标颜色使用主色调
-- 表单标签宽度统一为80px
-- 表单布局使用垂直布局，标签在上，输入框在下
-- 输入框聚焦状态：`focus:border-primary focus:ring-1 focus:ring-primary`
-
-### 3.5 日期表单组件
-- 日期选择器使用 `DatePicker` 组件，时间选择使用 `TimePicker` 组件
-- 日期选择器大小与输入框保持一致：`size="middle"`
-- 日期格式统一为 `YYYY-MM-DD`，时间格式为 `HH:mm:ss`
-- 日期范围选择使用 `RangePicker` 组件，格式为 `[YYYY-MM-DD, YYYY-MM-DD]`
-- 日期选择器添加清除按钮：`allowClear`
-- 日期选择器添加占位提示：`placeholder="请选择日期"`
-- 日期选择器禁用未来日期：`disabledDate={(current) => current && current > dayjs().endOf('day')}`（根据业务需求调整）
-- 日期对象规范：始终使用dayjs对象而非原生Date对象，避免出现"isValid is not a function"错误
-  ```typescript
-  // 错误示例 - 使用原生Date对象
-  form.setFieldsValue({
-    noteDate: new Date(record.noteDate) // 导致验证失败
-  });
-  
-  // 正确示例 - 使用dayjs对象
-  form.setFieldsValue({
-    noteDate: dayjs(record.noteDate) // 正常支持验证方法
-  });
-  ```
-- 日期时间转换规范：
-  ```typescript
-  // 日期对象转字符串（提交给后端）
-  const formatDate = (date: Dayjs | null) => {
-    return date ? date.format('YYYY-MM-DD') : '';
-  };
-  
-  // 字符串转日期对象（从后端接收）
-  const parseDate = (str: string) => {
-    return str ? dayjs(str) : null;
-  };
-  
-  // 日期时间对象转字符串
-  const formatDateTime = (date: Dayjs | null) => {
-    return date ? date.format('YYYY-MM-DD HH:mm:ss') : '';
-  };
-  
-  // 日期范围转换
-  const formatDateRange = (range: [Dayjs | null, Dayjs | null]) => {
-    return range && range[0] && range[1]
-      ? [range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD')]
-      : [];
-  };
-  ```
-
-### 3.3 表格样式
-- 表格添加边框：`bordered`
-- 表头背景色使用浅灰(#f9fafb)
-- 表格行添加交替背景色：`rowClassName={(record, index) => index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`
-- 支持横向滚动：`scroll={{ x: 'max-content' }}`
-
-### 3.4 卡片组件
-- 卡片标题区使用 `flex items-center justify-between` 布局
-- 统计数字使用28px字体大小
-- 添加卡片图标时使用24px大小，颜色与统计项主题匹配
-- 卡片底部添加辅助信息，使用12px浅灰色字体
-
-## 4. 页面规范
-
-### 4.1 页面标题
-- 页面标题使用 `Title level={2}` 组件
-- 标题区添加 `mb-6 flex justify-between items-center` 样式
-- 标题右侧可放置操作按钮组
-
-### 4.2 登录页面
-- 使用渐变背景：`bg-gradient-to-br from-blue-50 to-indigo-100`
-- 登录卡片居中显示，添加阴影效果：`shadow-lg`
-- 登录表单添加图标前缀增强可读性
-- 底部添加版权信息和测试账号提示
-
-### 4.3 数据展示页面
-- 数据卡片使用响应式布局，在不同屏幕尺寸下自动调整列数
-- 关键数据使用 `Statistic` 组件展示
-- 添加数据趋势指示和环比增长信息
-- 数据加载状态使用 `loading` 属性
-
-## 5. 交互规范
-
-### 5.1 悬停效果
-- 可交互元素添加悬停效果
-- 卡片悬停效果：`hover:shadow-md transition-all duration-300`
-- 按钮悬停效果：`hover:shadow-lg transition-all duration-200`
-
-### 5.2 模态框
-- 模态框使用 `destroyOnClose` 属性确保每次打开都是新实例
-- 模态框居中显示：`centered`
-- 禁止点击遮罩关闭：`maskClosable={false}`
-- 表单模态框使用垂直布局
-
-### 5.3 反馈机制
-- 操作成功/失败使用 `message` 组件提供反馈
-- 加载状态使用 `loading` 属性显示加载指示器
-- 删除等危险操作使用 `Popconfirm` 组件二次确认
-
-## 5.4 消息提示规范
-- 统一使用App.useApp()获取message实例
-  ```typescript
-  import { App } from 'antd';
-  const { message } = App.useApp();
-  ```
-- 消息提示使用明确的类型区分：
-  ```typescript
-  message.success('操作成功');
-  message.error('操作失败');
-  message.warning('警告信息');
-  message.info('提示信息');
-  ```
-- 消息显示时长统一使用默认值，重要操作可适当延长：`message.success('操作成功', 3);`
-
-## 6. 图标规范
-
-### 6.1 图标选择
-- 用户相关：UserOutlined
-- 密码相关：LockOutlined
-- 搜索相关：SearchOutlined
-- 消息相关：BellOutlined
-- 眼睛相关：EyeOutlined/EyeInvisibleOutlined
-
-### 6.2 图标样式
-- 功能图标大小统一为24px
-- 前缀图标颜色与主题匹配
-- 操作图标使用 `Button type="link"` 样式

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

@@ -1,484 +0,0 @@
-# 小程序UI开发规范 (Tailwind CSS v4)
-
-## 概述
-
-本规范定义了基于Taro框架的小程序UI开发标准，采用Tailwind CSS v4原子化样式和Heroicons图标库，遵循shadcn/ui组件设计模式。
-
-## 技术栈
-
-- **Taro 4** - 跨端小程序框架
-- **React 18** - 前端框架
-- **Tailwind CSS v4** - 原子化CSS框架
-- **@egoist/tailwindcss-icons** - 图标库集成
-- **@weapp-tailwindcss/merge** - Tailwind类名合并工具（小程序版tailwind-merge）
-- **clsx** - 条件样式类名管理
-
-## 目录结构
-
-```
-mini/
-├── src/
-│   ├── components/
-│   │   └── ui/           # UI组件库
-│   │       ├── button.tsx
-│   │       ├── input.tsx
-│   │       ├── card.tsx
-│   │       └── ...
-│   ├── pages/
-│   ├── utils/
-│   └── app.css           # Tailwind样式入口
-├── tailwind.config.js    # Tailwind配置
-└── postcss.config.js     # PostCSS配置
-```
-
-## 样式规范
-
-### 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>
-
-// ❌ 避免使用内联样式
-<View style={{ display: 'flex', alignItems: 'center', padding: 16 }}>
-  <Text style={{ fontSize: 18, fontWeight: '600' }}>标题</Text>
-</View>
-```
-
-#### 1.2 类名合并规范
-```typescript
-// ✅ 使用twMerge处理动态类名冲突
-import { twMerge } from '@weapp-tailwindcss/merge'
-
-// 处理静态和动态类名的冲突
-<View className={twMerge('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-200')}>
-  <Text>按钮</Text>
-</View>
-
-// 处理多个条件类名的合并
-<View className={twMerge(
-  'flex items-center',
-  isActive && 'bg-blue-500 text-white',
-  isDisabled && 'opacity-50 cursor-not-allowed',
-  customClassName
-)}>
-  <Text>复杂组件</Text>
-</View>
-
-// ❌ 避免手动拼接类名导致冲突
-<View className={`px-4 py-2 ${isActive ? 'bg-blue-500' : 'bg-gray-200'} ${customClassName}`}>
-  <Text>按钮</Text>
-</View>
-```
-
-#### 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>
-```
-
-#### 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>
-```
-
-### 2. 图标使用规范
-
-#### 2.1 图标
-使用`@egoist/tailwindcss-icons`提供的图标类名：
-"mdi", "lucide", "heroicons", "heroicons-outline", "heroicons-solid"
-
-```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" />
-```
-
-#### 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}
-    />
-  )
-}
-```
-
-#### 3.2 常用组件示例
-
-**按钮组件 (Button)**
-```typescript
-// 使用示例
-<Button variant="primary" size="lg" onClick={handleClick}>
-  <View className="i-heroicons-plus-20-solid mr-2" />
-  创建用户
-</Button>
-
-<Button variant="outline" size="sm" disabled={loading}>
-  {loading && <View className="i-heroicons-arrow-path-20-solid animate-spin mr-2" />}
-  加载中...
-</Button>
-```
-
-**卡片组件 (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>
-```
-
-**输入框组件 (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>
-```
-
-### 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>
-```
-
-#### 4.2 响应式断点
-- `sm`: 640px
-- `md`: 768px  
-- `lg`: 1024px
-- `xl`: 1280px
-- `2xl`: 1536px
-
-### 5. 主题配置
-
-#### 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,
-        },
-      },
-    }),
-  ],
-}
-```
-
-### 6. 工具函数
-
-#### 6.1 类名合并工具
-```typescript
-// mini/src/utils/cn.ts
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from '@weapp-tailwindcss/merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-```
-
-#### 6.2 小程序专用类名处理
-```typescript
-// 小程序环境下的类名合并
-import { twMerge } from '@weapp-tailwindcss/merge'
-
-// 标准用法（自动处理小程序转义）
-const classes = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
-// → 'hovercbg-dark-red p-3 bg-_hB91C1C_'
-
-// 手动指定版本（如果需要）
-import { twMerge as twMergeV4 } from '@weapp-tailwindcss/merge/v4'
-import { twMerge as twMergeV3 } from '@weapp-tailwindcss/merge/v3'
-
-// 使用cva进行组件变体管理
-import { cva } from 'class-variance-authority'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium',
-  {
-    variants: {
-      variant: {
-        default: 'bg-blue-500 text-white hover:bg-blue-600',
-        destructive: 'bg-red-500 text-white hover:bg-red-600',
-      },
-      size: {
-        sm: 'h-8 px-3 text-xs',
-        lg: 'h-12 px-6 text-base',
-      },
-    },
-  }
-)
-```
-
-### 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>
-)}
-```
-
-#### 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>
-```
-
-### 8. 性能优化
-
-#### 8.1 样式优化
-- 使用Tailwind的JIT模式，只生成用到的类名
-- 避免内联样式，全部使用类名
-- 合理使用`@apply`提取重复样式
-
-#### 8.2 图标优化
-- 使用CSS图标而非图片图标
-- 图标按需加载，不使用的图标不会被打包
-- 合理使用图标大小，避免过大图标
-
-### 9. 调试工具
-
-#### 9.1 开发调试
-```typescript
-// 添加调试样式类
-<View className="border border-red-500 debug">
-  <Text>调试内容</Text>
-</View>
-
-// 使用Tailwind的调试工具
-// 在开发环境中添加
-// <View className="outline outline-1 outline-red-500" />
-```
-
-### 10. tailwind-merge使用规范
-
-#### 10.1 基本用法
-```typescript
-// 单类名合并
-const result = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
-// → 'hovercbg-dark-red p-3 bg-_hB91C1C_'
-
-// 处理冲突类名
-twMerge('px-4', 'px-2') // → 'px-2'
-twMerge('text-red-500', 'text-blue-500') // → 'text-blue-500'
-```
-
-#### 10.2 条件类名处理
-```typescript
-// 使用cn工具函数处理条件类名
-import { cn } from '@/utils/cn'
-
-const Button = ({ variant, size, disabled, className }) => {
-  return (
-    <Button
-      className={cn(
-        'inline-flex items-center justify-center rounded-md',
-        variant === 'primary' && 'bg-blue-500 text-white',
-        variant === 'secondary' && 'bg-gray-200 text-gray-800',
-        size === 'sm' && 'px-3 py-1 text-sm',
-        size === 'lg' && 'px-6 py-3 text-lg',
-        disabled && 'opacity-50 cursor-not-allowed',
-        className // 允许外部覆盖
-      )}
-    >
-      按钮
-    </Button>
-  )
-}
-```
-
-#### 10.3 小程序特殊处理
-```typescript
-// 跨端使用
-import { create } from '@weapp-tailwindcss/merge'
-
-const { twMerge } = create({
-  // 在当前环境为小程序时启用转义
-  disableEscape: true
-})
-
-// 版本选择
-import { twMerge as twMergeV4 } from '@weapp-tailwindcss/merge/v4' // Tailwind v4
-import { twMerge as twMergeV3 } from '@weapp-tailwindcss/merge/v3' // Tailwind v3
-```
-
-## 注意事项
-
-1. **兼容性**：确保所有类名在小程序环境中有效
-2. **性能**：避免过度嵌套和复杂选择器
-3. **可维护性**：保持组件结构清晰，样式统一
-4. **可读性**：合理使用空格和换行，提高代码可读性
-5. **tailwind-merge**：始终使用twMerge或cn工具函数处理动态类名，避免类名冲突
-6. **版本兼容**：根据Tailwind CSS版本选择正确的tailwind-merge版本

.roo/rules/17-mini-program-forms.md

@@ -1,619 +0,0 @@
-# 小程序表单开发规范 (Tailwind CSS版)
-
-## 概述
-
-本规范定义了基于Taro框架的小程序表单开发标准，采用react-hook-form进行状态管理，zod进行表单验证，Tailwind CSS v4进行样式设计。
-
-## 技术栈
-
-- **Taro 4** - 跨端小程序框架
-- **React 18** - 前端框架
-- **React Hook Form 7** - 表单状态管理
-- **Zod 4** - 模式验证
-- **@hookform/resolvers** - 验证器集成
-- **Tailwind CSS v4** - 原子化CSS框架
-
-## 目录结构
-
-### 推荐结构（大型/复用表单）
-```
-mini/
-├── src/
-│   ├── components/
-│   │   └── ui/
-│   │       ├── form.tsx        # 表单核心组件
-│   │       ├── input.tsx       # 输入框组件
-│   │       ├── label.tsx       # 标签组件
-│   │       └── button.tsx      # 按钮组件
-│   ├── utils/
-│   │   ├── cn.ts               # 类名合并工具
-│   │   └── validators.ts       # 验证规则（可选）
-│   └── schemas/
-│       └── user.schema.ts      # 表单验证模式（可选）
-```
-
-### 简化结构（小型/单次使用表单）
-```
-mini/
-├── src/
-│   ├── components/
-│   │   └── ui/
-│   │       ├── form.tsx        # 表单核心组件
-│   │       ├── input.tsx       # 输入框组件
-│   │       └── button.tsx      # 按钮组件
-└── src/pages/
-    └── your-page/
-        └── index.tsx           # 验证规则直接定义在页面中
-```
-
-## 核心组件
-
-### 1. 表单组件系统
-
-#### 1.1 Form 组件
-```typescript
-// mini/src/components/ui/form.tsx
-import { createContext, useContext, forwardRef } from 'react'
-import { useFormContext } from 'react-hook-form'
-import { cn } from '@/utils/cn'
-
-const Form = forwardRef<
-  React.ElementRef<typeof TaroForm>,
-  React.ComponentPropsWithoutRef<typeof TaroForm>
->(({ className, ...props }, ref) => {
-  return (
-    <TaroForm
-      ref={ref}
-      className={cn('space-y-6', className)}
-      {...props}
-    />
-  )
-})
-Form.displayName = 'Form'
-```
-
-#### 1.2 FormField 组件
-```typescript
-const FormField = forwardRef<
-  React.ElementRef<typeof Controller>,
-  React.ComponentPropsWithoutRef<typeof Controller>
->(({ render, ...props }, ref) => {
-  return (
-    <Controller
-      ref={ref}
-      render={({ field, fieldState, formState }) => (
-        <FormItemContext.Provider value={{ name: props.name, fieldState, formState }}>
-          {render({ field, fieldState, formState })}
-        </FormItemContext.Provider>
-      )}
-      {...props}
-    />
-  )
-})
-```
-
-#### 1.3 FormItem 组件布局
-```typescript
-const FormItem = forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentPropsWithoutRef<typeof View>
->(({ className, ...props }, ref) => {
-  const id = useId()
-  
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <View
-        ref={ref}
-        className={cn('space-y-2', className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-})
-```
-
-#### 1.4 FormLabel 组件
-```typescript
-const FormLabel = forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-  
-  return (
-    <Label
-      ref={ref}
-      className={cn(
-        error && 'text-destructive',
-        className
-      )}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-```
-
-#### 1.5 FormControl 组件
-```typescript
-const FormControl = forwardRef<
-  React.ElementRef<typeof View>,
-  React.ComponentPropsWithoutRef<typeof View>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-  
-  return (
-    <View
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-```
-
-#### 1.6 FormMessage 组件
-```typescript
-const FormMessage = forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <Text
-      ref={ref}
-      id={formMessageId}
-      className={cn('text-sm font-medium text-destructive', className)}
-      {...props}
-    >
-      {body}
-    </Text>
-  )
-})
-```
-
-### 2. 表单验证集成
-
-#### 2.1 验证模式定义
-
-##### 方式1：大型/复用表单（推荐结构）
-```typescript
-// mini/src/schemas/user.schema.ts
-import { z } from 'zod'
-
-export const userSchema = z.object({
-  username: z.string()
-    .min(2, '用户名至少2个字符')
-    .max(20, '用户名最多20个字符')
-    .regex(/^[a-zA-Z0-9_]+$/, '用户名只能包含字母、数字和下划线'),
-  
-  phone: z.string()
-    .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码'),
-  
-  email: z.string()
-    .email('请输入正确的邮箱地址'),
-  
-  password: z.string()
-    .min(6, '密码至少6个字符')
-    .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, '密码必须包含大小写字母和数字'),
-  
-  confirmPassword: z.string()
-}).refine((data) => data.password === data.confirmPassword, {
-  message: '两次输入的密码不一致',
-  path: ['confirmPassword']
-})
-
-export type UserFormData = z.infer<typeof userSchema>
-```
-
-##### 方式2：小型/单次使用表单（简化结构）
-```typescript
-// 直接在页面文件中定义
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-const loginSchema = z.object({
-  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码'),
-  password: z.string().min(1, '请输入密码')
-})
-
-type LoginFormData = z.infer<typeof loginSchema>
-
-// 使用方式
-const form = useForm<LoginFormData>({
-  resolver: zodResolver(loginSchema),
-  defaultValues: {
-    phone: '',
-    password: ''
-  }
-})
-```
-
-#### 2.2 验证器配置（可选）
-```typescript
-// 对于复用验证规则，可以创建 utils/validators.ts
-// 小型表单可直接在页面中定义，无需单独文件
-
-// 常用验证规则（可选）
-export const phoneSchema = z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
-export const emailSchema = z.string().email('请输入正确的邮箱地址')
-```
-
-### 3. 表单组件使用示例
-
-#### 3.1 完整表单示例
-```typescript
-// mini/src/pages/register/index.tsx
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { userSchema, UserFormData } from '@/schemas/user.schema'
-import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-
-export default function RegisterPage() {
-  const form = useForm<UserFormData>({
-    resolver: zodResolver(userSchema),
-    defaultValues: {
-      username: '',
-      phone: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
-    }
-  })
-
-  const onSubmit = async (data: UserFormData) => {
-    try {
-      // 提交表单逻辑
-      console.log('表单数据:', data)
-    } catch (error) {
-      console.error('提交失败:', error)
-    }
-  }
-
-  return (
-    <View className="min-h-screen bg-gray-50 p-4">
-      <View className="max-w-md mx-auto">
-        <Text className="text-2xl font-bold text-center mb-6">用户注册</Text>
-        
-        <Form {...form}>
-          <TaroForm onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="username"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>用户名</FormLabel>
-                  <FormControl>
-                    <Input 
-                      placeholder="请输入用户名" 
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="phone"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>手机号</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="tel"
-                      placeholder="请输入手机号" 
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>邮箱</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="email"
-                      placeholder="请输入邮箱" 
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>密码</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="password"
-                      placeholder="请输入密码" 
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>确认密码</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="password"
-                      placeholder="请再次输入密码" 
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button 
-              type="submit" 
-              className="w-full h-10 bg-blue-500 text-white"
-              loading={form.formState.isSubmitting}
-            >
-              注册
-            </Button>
-          </TaroForm>
-        </Form>
-      </View>
-    </View>
-  )
-}
-```
-
-#### 3.2 登录表单示例
-```typescript
-// mini/src/pages/login/index.tsx
-const loginSchema = z.object({
-  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码'),
-  password: z.string().min(1, '请输入密码')
-})
-
-export default function LoginPage() {
-  const form = useForm({
-    resolver: zodResolver(loginSchema),
-    defaultValues: {
-      phone: '',
-      password: ''
-    }
-  })
-
-  return (
-    <View className="min-h-screen bg-gray-50 p-4">
-      <View className="max-w-md mx-auto">
-        <Text className="text-2xl font-bold text-center mb-6">用户登录</Text>
-        
-        <Form {...form}>
-          <TaroForm onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="phone"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>手机号</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="tel"
-                      placeholder="请输入手机号"
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>密码</FormLabel>
-                  <FormControl>
-                    <Input 
-                      type="password"
-                      placeholder="请输入密码"
-                      {...field}
-                      className="h-10"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button type="submit" className="w-full h-10 bg-blue-500 text-white">
-              登录
-            </Button>
-          </TaroForm>
-        </Form>
-      </View>
-    </View>
-  )
-}
-```
-
-### 4. 表单验证最佳实践
-
-#### 4.1 实时验证
-```typescript
-const form = useForm({
-  resolver: zodResolver(userSchema),
-  mode: 'onChange', // 实时验证
-  reValidateMode: 'onChange',
-  defaultValues: {
-    username: '',
-    phone: ''
-  }
-})
-```
-
-#### 4.2 异步验证
-```typescript
-const asyncUsernameSchema = z.object({
-  username: z.string()
-    .min(2, '用户名至少2个字符')
-    .max(20, '用户名最多20个字符')
-    .refine(async (username) => {
-      const response = await checkUsernameAvailability(username)
-      return response.available
-    }, '用户名已被占用')
-})
-```
-
-#### 4.3 错误处理
-```typescript
-const onSubmit = async (data: UserFormData) => {
-  try {
-    await registerUser(data)
-    Taro.showToast({ title: '注册成功' })
-    Taro.navigateBack()
-  } catch (error) {
-    if (error.response?.data?.errors) {
-      Object.keys(error.response.data.errors).forEach(field => {
-        form.setError(field as any, {
-          message: error.response.data.errors[field][0]
-        })
-      })
-    }
-  }
-}
-```
-
-### 5. 样式规范
-
-#### 5.1 表单布局
-```typescript
-// 标准间距
-const formSpacing = {
-  item: 'space-y-2',      // 表单项内部间距
-  section: 'space-y-6',   // 表单区域间距
-  group: 'space-y-4'      // 表单组间距
-}
-
-// 输入框样式
-const inputStyles = {
-  base: 'h-10 px-3 bg-white border border-gray-300 rounded-md',
-  focus: 'focus:border-blue-500 focus:ring-1 focus:ring-blue-500',
-  error: 'border-red-500 focus:border-red-500 focus:ring-red-500'
-}
-```
-
-#### 5.2 响应式设计
-```typescript
-<View className="max-w-md mx-auto p-4 sm:p-6 md:p-8">
-  <Form className="space-y-4 sm:space-y-6">
-    <FormItem className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <FormControl>
-        <Input className="w-full" />
-      </FormControl>
-    </FormItem>
-  </Form>
-</View>
-```
-
-### 6. 性能优化
-
-#### 6.1 表单防抖
-```typescript
-import { debounce } from 'lodash'
-
-const debouncedValidate = debounce((value) => {
-  form.trigger('username')
-}, 300)
-
-const handleUsernameChange = (value: string) => {
-  form.setValue('username', value)
-  debouncedValidate(value)
-}
-```
-
-#### 6.2 条件渲染
-```typescript
-// 避免不必要的重渲染
-const FormFieldMemo = React.memo(({ name, control, render }) => (
-  <FormField
-    name={name}
-    control={control}
-    render={render}
-  />
-))
-```
-
-### 7. 无障碍支持
-
-#### 7.1 语义化标签
-```typescript
-<FormItem>
-  <FormLabel>
-    <Text className="sr-only">用户名</Text>
-  </FormLabel>
-  <FormControl>
-    <Input 
-      aria-label="用户名"
-      aria-required="true"
-      aria-invalid={!!form.formState.errors.username}
-    />
-  </FormControl>
-</FormItem>
-```
-
-#### 7.2 键盘导航
-```typescript
-// 支持Tab键导航
-const handleKeyPress = (e) => {
-  if (e.key === 'Enter') {
-    form.handleSubmit(onSubmit)()
-  }
-}
-```
-
-## 注意事项
-
-1. **类型安全**：始终使用TypeScript定义表单数据类型
-2. **验证时机**：根据业务需求选择合适的验证时机（onChange/onBlur/onSubmit）
-3. **错误处理**：提供清晰的用户友好的错误消息
-4. **性能考虑**：避免在大型表单中使用实时验证
-5. **无障碍**：确保表单对所有用户可访问
-6. **移动端适配**：测试在小屏幕设备上的显示效果
-7. **状态管理**：合理使用React Hook Form的API管理复杂表单状态