feat: 本次提交更新内容如下

场景获客列表搞定

Cunkebao/app/components-docs/loading.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export default function ComponentsDocsLoading() {
+  return (
+    <div className="container mx-auto py-8 space-y-8">
+      <div className="space-y-4">
+        <div className="h-8 bg-gray-200 rounded animate-pulse" />
+        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
+      </div>
+
+      <div className="space-y-6">
+        <div className="flex space-x-1">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="h-10 bg-gray-200 rounded animate-pulse flex-1" />
+          ))}
+        </div>
+
+        <Card>
+          <CardHeader>
+            <div className="h-6 bg-gray-200 rounded animate-pulse" />
+            <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="h-4 bg-gray-200 rounded animate-pulse" />
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

Cunkebao/app/components-docs/page.tsx

@@ -0,0 +1,375 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Separator } from "@/components/ui/separator"
+
+/**
+ * 组件文档页面
+ * 提供详细的组件使用文档和API说明
+ */
+export default function ComponentsDocs() {
+  return (
+    <div className="container mx-auto py-8 space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold">组件文档</h1>
+        <p className="text-gray-600">详细的组件使用指南、API文档和最佳实践</p>
+      </div>
+
+      <Tabs defaultValue="getting-started" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-5">
+          <TabsTrigger value="getting-started">快速开始</TabsTrigger>
+          <TabsTrigger value="basic-components">基础组件</TabsTrigger>
+          <TabsTrigger value="custom-components">自定义组件</TabsTrigger>
+          <TabsTrigger value="best-practices">最佳实践</TabsTrigger>
+          <TabsTrigger value="changelog">更新日志</TabsTrigger>
+        </TabsList>
+
+        {/* 快速开始 */}
+        <TabsContent value="getting-started" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>快速开始</CardTitle>
+              <CardDescription>了解如何在项目中使用组件库</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-3">安装和导入</h3>
+                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
+                  <pre>{`// 导入基础UI组件
+import { Button, Card, Input } from "@/components/ui"
+
+// 导入自定义组件
+import { PageHeader, StatCard } from "@/app/components/common"
+
+// 使用组件
+function MyComponent() {
+  return (
+    <Card>
+      <PageHeader title="标题" description="描述" />
+      <Button>点击我</Button>
+    </Card>
+  )
+}`}</pre>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-semibold mb-3">项目结构</h3>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <pre>{`app/
+├── components/
+│   ├── ui/              # 基础UI组件
+│   │   ├── button.tsx
+│   │   ├── card.tsx
+│   │   └── ...
+│   └── common/          # 自定义业务组件
+│       ├── PageHeader.tsx
+│       ├── StatCard.tsx
+│       └── ...
+├── lib/
+│   └── utils.ts         # 工具函数
+└── types/               # 类型定义`}</pre>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-semibold mb-3">主题配置</h3>
+                <p className="text-gray-600 mb-3">组件库使用 Tailwind CSS 进行样式管理，支持自定义主题配置。</p>
+                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
+                  <pre>{`// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          900: '#1e3a8a',
+        }
+      }
+    }
+  }
+}`}</pre>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 基础组件文档 */}
+        <TabsContent value="basic-components" className="space-y-6">
+          <ComponentDoc
+            name="Button"
+            description="按钮组件，支持多种样式和状态"
+            props={[
+              {
+                name: "variant",
+                type: "'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'",
+                default: "'default'",
+                description: "按钮样式变体",
+              },
+              { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "按钮大小" },
+              { name: "disabled", type: "boolean", default: "false", description: "是否禁用" },
+              { name: "onClick", type: "() => void", default: "-", description: "点击事件处理函数" },
+            ]}
+            example={`<Button variant="primary" size="lg" onClick={() => alert('clicked')}>
+  点击我
+</Button>`}
+          />
+
+          <ComponentDoc
+            name="Card"
+            description="卡片容器组件，用于包装内容"
+            props={[
+              { name: "className", type: "string", default: "-", description: "自定义CSS类名" },
+              { name: "children", type: "ReactNode", default: "-", description: "卡片内容" },
+            ]}
+            example={`<Card>
+  <CardHeader>
+    <CardTitle>标题</CardTitle>
+    <CardDescription>描述</CardDescription>
+  </CardHeader>
+  <CardContent>
+    内容区域
+  </CardContent>
+</Card>`}
+          />
+
+          <ComponentDoc
+            name="Input"
+            description="输入框组件，支持多种类型"
+            props={[
+              {
+                name: "type",
+                type: "'text' | 'email' | 'password' | 'number'",
+                default: "'text'",
+                description: "输入类型",
+              },
+              { name: "placeholder", type: "string", default: "-", description: "占位符文本" },
+              { name: "disabled", type: "boolean", default: "false", description: "是否禁用" },
+              { name: "value", type: "string", default: "-", description: "输入值" },
+              { name: "onChange", type: "(e: ChangeEvent) => void", default: "-", description: "值变化回调" },
+            ]}
+            example={`<Input
+  type="email"
+  placeholder="请输入邮箱"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>`}
+          />
+        </TabsContent>
+
+        {/* 自定义组件文档 */}
+        <TabsContent value="custom-components" className="space-y-6">
+          <ComponentDoc
+            name="PageHeader"
+            description="页面头部组件，提供统一的页面标题和描述布局"
+            props={[
+              { name: "title", type: "string", default: "-", description: "页面标题" },
+              { name: "description", type: "string", default: "-", description: "页面描述" },
+              { name: "actions", type: "ReactNode", default: "-", description: "操作按钮区域" },
+              { name: "breadcrumb", type: "ReactNode", default: "-", description: "面包屑导航" },
+            ]}
+            example={`<PageHeader
+  title="设备管理"
+  description="管理所有连接的设备"
+  actions={<Button>添加设备</Button>}
+/>`}
+          />
+
+          <ComponentDoc
+            name="StatCard"
+            description="统计卡片组件，用于展示关键指标"
+            props={[
+              { name: "title", type: "string", default: "-", description: "统计标题" },
+              { name: "value", type: "string | number", default: "-", description: "统计值" },
+              { name: "icon", type: "ReactNode", default: "-", description: "图标" },
+              { name: "trend", type: "{ value: number; isPositive: boolean }", default: "-", description: "趋势信息" },
+              { name: "description", type: "string", default: "-", description: "描述信息" },
+            ]}
+            example={`<StatCard
+  title="总设备数"
+  value="1,234"
+  icon={<Smartphone className="h-6 w-6" />}
+  trend={{ value: 12, isPositive: true }}
+/>`}
+          />
+        </TabsContent>
+
+        {/* 最佳实践 */}
+        <TabsContent value="best-practices" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>最佳实践</CardTitle>
+              <CardDescription>使用组件库的推荐做法</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-3">组件使用原则</h3>
+                <ul className="space-y-2 text-gray-600">
+                  <li>• 优先使用现有组件，避免重复造轮子</li>
+                  <li>• 保持组件的单一职责原则</li>
+                  <li>• 使用TypeScript确保类型安全</li>
+                  <li>• 遵循统一的命名规范</li>
+                  <li>• 添加适当的注释和文档</li>
+                </ul>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-semibold mb-3">性能优化</h3>
+                <ul className="space-y-2 text-gray-600">
+                  <li>• 使用React.memo优化组件渲染</li>
+                  <li>• 合理使用useCallback和useMemo</li>
+                  <li>• 避免在render中创建新对象</li>
+                  <li>• 使用懒加载减少初始包大小</li>
+                  <li>• 实现虚拟滚动处理大数据</li>
+                </ul>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-semibold mb-3">可访问性</h3>
+                <ul className="space-y-2 text-gray-600">
+                  <li>• 为所有交互元素添加适当的ARIA标签</li>
+                  <li>• 确保键盘导航的可用性</li>
+                  <li>• 提供足够的颜色对比度</li>
+                  <li>• 为图片添加alt属性</li>
+                  <li>• 使用语义化的HTML标签</li>
+                </ul>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 更新日志 */}
+        <TabsContent value="changelog" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>更新日志</CardTitle>
+              <CardDescription>组件库的版本更新记录</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Badge>v1.2.0</Badge>
+                    <span className="text-sm text-gray-500">2024-01-15</span>
+                  </div>
+                  <h4 className="font-medium mb-2">新增功能</h4>
+                  <ul className="text-sm text-gray-600 space-y-1">
+                    <li>• 新增 FileUploader 组件</li>
+                    <li>• 新增 Wizard 向导组件</li>
+                    <li>• 新增 NotificationSystem 通知系统</li>
+                    <li>• 新增图表组件库</li>
+                  </ul>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Badge variant="secondary">v1.1.0</Badge>
+                    <span className="text-sm text-gray-500">2024-01-10</span>
+                  </div>
+                  <h4 className="font-medium mb-2">改进优化</h4>
+                  <ul className="text-sm text-gray-600 space-y-1">
+                    <li>• 优化 DeviceSelector 组件性能</li>
+                    <li>• 改进 DataTable 组件的响应式设计</li>
+                    <li>• 统一组件的样式规范</li>
+                  </ul>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Badge variant="outline">v1.0.0</Badge>
+                    <span className="text-sm text-gray-500">2024-01-01</span>
+                  </div>
+                  <h4 className="font-medium mb-2">初始版本</h4>
+                  <ul className="text-sm text-gray-600 space-y-1">
+                    <li>• 基础UI组件库</li>
+                    <li>• 核心业务组件</li>
+                    <li>• 组件文档系统</li>
+                  </ul>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// 组件文档展示组件
+function ComponentDoc({
+  name,
+  description,
+  props,
+  example,
+}: {
+  name: string
+  description: string
+  props: Array<{
+    name: string
+    type: string
+    default: string
+    description: string
+  }>
+  example: string
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {name}
+          <Badge variant="outline">组件</Badge>
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div>
+          <h4 className="font-medium mb-3">属性 (Props)</h4>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>属性名</TableHead>
+                <TableHead>类型</TableHead>
+                <TableHead>默认值</TableHead>
+                <TableHead>描述</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {props.map((prop) => (
+                <TableRow key={prop.name}>
+                  <TableCell className="font-mono text-sm">{prop.name}</TableCell>
+                  <TableCell className="font-mono text-sm text-blue-600">{prop.type}</TableCell>
+                  <TableCell className="font-mono text-sm">{prop.default}</TableCell>
+                  <TableCell>{prop.description}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div>
+          <h4 className="font-medium mb-3">使用示例</h4>
+          <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+            <pre className="text-sm">{example}</pre>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}