📝 docs(mini-shadui): 完善小程序shadui组件文档

- 添加当前可用组件列表，分为基础组件、交互组件、导航组件和布局组件四大类
- 增加Button、Input、Form、Card、Navbar和Carousel等核心组件的使用示例代码
- 更新TabBar页面和非TabBar页面的模板示例，集成Card和Button组件
- 移除重复的组件使用规范章节，内容整合到组件列表和示例中

.roo/commands/mini-shadui-page.md

@@ -10,6 +10,186 @@ description: "小程序shadui页面的开发指令"
 ## 小程序Shadui路径
 mini/src/components/ui
 
+## 当前可用的Shadui组件
+基于项目实际文件，当前小程序可用的shadui组件如下：
+
+### 基础组件
+- **Button** - 按钮组件 (`button.tsx`)
+- **Card** - 卡片组件 (`card.tsx`)
+- **Input** - 输入框组件 (`input.tsx`)
+- **Label** - 标签组件 (`label.tsx`)
+- **Form** - 表单组件 (`form.tsx`)
+
+### 交互组件
+- **AvatarUpload** - 头像上传组件 (`avatar-upload.tsx`)
+- **Carousel** - 轮播图组件 (`carousel.tsx`)
+- **Image** - 图片组件 (`image.tsx`)
+
+### 导航组件
+- **Navbar** - 顶部导航栏组件 (`navbar.tsx`)
+- **TabBar** - 底部标签栏组件 (`tab-bar.tsx`)
+
+### 布局组件
+- **TabBarLayout**: 用于tabbar页面，包含底部导航
+
+- 根据需求可扩展更多业务组件
+
+## 组件使用示例
+
+### Button 组件
+```typescript
+import { Button } from '@/components/ui/button'
+
+// 基础用法
+<Button onClick={handleClick}>主要按钮</Button>
+
+// 不同尺寸
+<Button size="sm">小按钮</Button>
+<Button size="md">中按钮</Button>
+<Button size="lg">大按钮</Button>
+
+// 不同样式
+<Button variant="primary">主要按钮</Button>
+<Button variant="secondary">次要按钮</Button>
+<Button variant="outline">边框按钮</Button>
+<Button variant="ghost">幽灵按钮</Button>
+```
+
+### Input 组件
+```typescript
+import { Input } from '@/components/ui/input'
+
+// 基础用法
+<Input placeholder="请输入内容" />
+
+// 受控组件
+<Input value={value} onChange={handleChange} />
+
+// 不同类型
+<Input type="text" placeholder="文本输入" />
+<Input type="number" placeholder="数字输入" />
+<Input type="password" placeholder="密码输入" />
+```
+
+### Form 组件
+```typescript
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+const formSchema = z.object({
+  username: z.string().min(2, '用户名至少2个字符'),
+  email: z.string().email('请输入有效的邮箱地址')
+})
+
+const form = useForm({
+  resolver: zodResolver(formSchema),
+  defaultValues: { username: '', email: '' }
+})
+
+<Form {...form}>
+  <FormField
+    name="username"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel>用户名</FormLabel>
+        <FormControl>
+          <Input placeholder="请输入用户名" {...field} />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+</Form>
+```
+
+### Card 组件
+```typescript
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+<Card>
+  <CardHeader>
+    <CardTitle>卡片标题</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <Text>卡片内容</Text>
+  </CardContent>
+</Card>
+```
+
+### Navbar 组件
+```typescript
+import { Navbar } from '@/components/ui/navbar'
+
+// 基础用法
+<Navbar title="页面标题" />
+
+// 带返回按钮
+<Navbar 
+  title="页面标题" 
+  leftIcon="i-heroicons-chevron-left-20-solid"
+  onClickLeft={() => Taro.navigateBack()}
+/>
+
+// 带右侧操作
+<Navbar 
+  title="页面标题"
+  rightIcon="i-heroicons-share-20-solid"
+  onClickRight={handleShare}
+/>
+```
+
+### Carousel 组件
+```typescript
+// 实际页面使用示例
+export function HomeCarousel() {
+  const bannerItems: CarouselItem[] = [
+    {
+      src: 'https://via.placeholder.com/750x400/3B82F6/FFFFFF?text=Banner+1',
+      title: '新品上市',
+      description: '最新款式，限时优惠',
+      link: '/pages/goods/new-arrival'
+    },
+    {
+      src: 'https://via.placeholder.com/750x400/EF4444/FFFFFF?text=Banner+2',
+      title: '限时秒杀',
+      description: '每日特价，不容错过',
+      link: '/pages/goods/flash-sale'
+    },
+    {
+      src: 'https://via.placeholder.com/750x400/10B981/FFFFFF?text=Banner+3',
+      title: '会员专享',
+      description: '会员专享折扣和福利',
+      link: '/pages/member/benefits'
+    }
+  ]
+
+  const handleBannerClick = (item: CarouselItem, index: number) => {
+    if (item.link) {
+      // 使用Taro跳转
+      Taro.navigateTo({
+        url: item.link
+      })
+    }
+  }
+
+  return (
+    <View className="w-full">
+      <Carousel
+        items={bannerItems}
+        height={400}
+        autoplay={true}
+        interval={4000}
+        circular={true}
+        rounded="none"
+        onItemClick={handleBannerClick}
+      />
+    </View>
+  )
+}
+```
+
 ## 页面类型分类
 
 ### 1. TabBar页面（底部导航页）
@@ -47,6 +227,8 @@ import React from 'react'
 import { View, Text } from '@tarojs/components'
 import { TabBarLayout } from '@/layouts/tab-bar-layout'
 import { Navbar } from '@/components/ui/navbar'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 import './index.css'
 
 const [页面名称]Page: React.FC = () => {
@@ -59,7 +241,15 @@ const [页面名称]Page: React.FC = () => {
         leftIcon=""
       />
       <View className="px-4 py-4">
-        {/* 页面内容 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>欢迎使用</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text>这是一个使用shadui组件的TabBar页面</Text>
+            <Button className="mt-4">开始使用</Button>
+          </CardContent>
+        </Card>
       </View>
     </TabBarLayout>
   )
@@ -75,6 +265,8 @@ import { View } from '@tarojs/components'
 import { useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { Navbar } from '@/components/ui/navbar'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
 import './index.css'
 
 export default function [页面名称]() {
@@ -93,7 +285,12 @@ export default function [页面名称]() {
         border={false}
       />
       <View className="px-6 py-4">
-        {/* 页面内容 */}
+        <Card>
+          <CardContent>
+            <Text>这是一个使用shadui组件的非TabBar页面</Text>
+            <Button className="mt-4">返回</Button>
+          </CardContent>
+        </Card>
       </View>
     </View>
   )
@@ -132,6 +329,7 @@ import { useEffect } from 'react'
 import { useAuth } from '@/utils/auth'
 import Taro from '@tarojs/taro'
 import { Navbar } from '@/components/ui/navbar'
+import { Card } from '@/components/ui/card'
 
 export default function ProtectedPage() {
   const { user, isLoading, isLoggedIn } = useAuth()
@@ -652,20 +850,6 @@ export default function Login() {
 }
 ```
 
-## 组件使用规范
-
-### 1. 布局组件
-- **TabBarLayout**: 用于tabbar页面，包含底部导航
-- **Navbar**: 顶部导航栏组件
-
-### 2. 表单组件
-- **Input**: 输入框组件
-- **Button**: 按钮组件
-- **Form**: 表单组件（基于react-hook-form）
-
-### 3. 业务组件
-- **AvatarUpload**: 头像上传组件
-- 根据需求可扩展更多业务组件
 
 ## 路由配置