@szc-ft/mcp-szcd-client 0.35.0 → 0.38.0

package/opencode-extension/skills/shadcn-design-to-code/examples/1.1-overview-page.tsx

@@ -0,0 +1,382 @@
+// 1.1-概览页-目录概览 - shadcn/ui 端到端生成代码骨架
+// 设计稿来源：/scity/zengzhijie/mcp/1.1-概览页-目录概览(2).sketch
+// 布局：L01 sidebar-main + L03 dashboard-grid
+// shadcn 组件来源：npx shadcn@latest add 一次性安装（见 audit-checklist）
+
+"use client"
+
+import * as React from "react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Bell, ChevronDown, Database, FileText, Folder, Home, LayoutDashboard, ListChecks, Search, Settings, User } from "lucide-react"
+import { Line, LineChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Bar, BarChart, PieChart, Pie, Cell, Legend } from "recharts"
+
+// === 设计 token（从 sketch 提取，HSL 通道） ===
+// globals.css
+// :root {
+//   --background: 0 0% 100%;
+//   --foreground: 222 47% 11%;     /* #0f172a 主文字 */
+//   --card: 0 0% 100%;
+//   --card-foreground: 222 47% 11%;
+//   --primary: 217 91% 60%;        /* #3b82f6 品牌主色 */
+//   --primary-foreground: 0 0% 100%;
+//   --secondary: 210 40% 96%;      /* #f1f5f9 */
+//   --muted: 210 40% 96%;
+//   --muted-foreground: 215 16% 47%; /* #64748b */
+//   --border: 214 32% 91%;         /* #e2e8f0 */
+//   --radius: 0.5rem;
+// }
+// .dark { ... }
+// bg-sketch: #f5f7fa （用 bg-[#f5f7fa] arbitrary value）
+
+// === 侧边栏导航数据（从 sketch "编目配置" "知识" "编目" 等节点反查）===
+const navMain = [
+  {
+    title: "总览",
+    items: [
+      { title: "目录概览", url: "/", icon: LayoutDashboard, isActive: true },
+      { title: "数据集目录", url: "/datasets", icon: Database },
+      { title: "库表目录", url: "/tables", icon: FileText },
+    ],
+  },
+  {
+    title: "编目管理",
+    items: [
+      { title: "编目配置", url: "/config", icon: Settings },
+      { title: "编目任务", url: "/tasks", icon: ListChecks },
+    ],
+  },
+  {
+    title: "知识中心",
+    items: [
+      { title: "知识库", url: "/knowledge", icon: Folder },
+    ],
+  },
+]
+
+// === 4 个 Stat 卡片数据（从 sketch "已上线目录 2999 个" 等反查）===
+const stats = [
+  {
+    title: "已上线数据集",
+    value: 2999,
+    unit: "个",
+    trend: { value: 2, label: "近 7 天", up: true },
+    icon: Database,
+  },
+  {
+    title: "已上线库表目录",
+    value: 1999,
+    unit: "个",
+    trend: { value: 2, label: "近 7 天", up: true },
+    icon: FileText,
+  },
+  {
+    title: "已上线语料",
+    value: 1820,
+    unit: "个",
+    trend: { value: 5, label: "近 7 天", up: true },
+    icon: Folder,
+  },
+  {
+    title: "待编目资源",
+    value: 423,
+    unit: "个",
+    trend: { value: 12, label: "较昨日", up: false },
+    icon: ListChecks,
+  },
+]
+
+// === 折线图数据（模拟）===
+const lineChartData = [
+  { date: "02-15", dataset: 2800, table: 1900, corpus: 1700 },
+  { date: "02-16", dataset: 2850, table: 1920, corpus: 1720 },
+  { date: "02-17", dataset: 2900, table: 1940, corpus: 1740 },
+  { date: "02-18", dataset: 2920, table: 1960, corpus: 1760 },
+  { date: "02-19", dataset: 2950, table: 1970, corpus: 1780 },
+  { date: "02-20", dataset: 2970, table: 1980, corpus: 1800 },
+  { date: "02-21", dataset: 2999, table: 1999, corpus: 1820 },
+]
+
+const lineChartConfig = {
+  dataset: { label: "数据集", color: "hsl(217 91% 60%)" },
+  table: { label: "库表", color: "hsl(160 84% 39%)" },
+  corpus: { label: "语料", color: "hsl(38 92% 50%)" },
+} satisfies ChartConfig
+
+// === 饼图数据（数据类型分布）===
+const pieChartData = [
+  { name: "图片", value: 1234, color: "hsl(217 91% 60%)" },
+  { name: "文本", value: 856, color: "hsl(160 84% 39%)" },
+  { name: "音频", value: 432, color: "hsl(38 92% 50%)" },
+  { name: "视频", value: 287, color: "hsl(280 70% 60%)" },
+  { name: "其他", value: 190, color: "hsl(215 16% 47%)" },
+]
+
+// === 最近编目任务（从 sketch 推测）===
+const recentTasks = [
+  { id: "1", name: "电商评论数据集 v2.1", status: "success", time: "2 分钟前", count: 12340 },
+  { id: "2", name: "客服对话语料 2024Q1", status: "running", time: "进行中", count: 8920 },
+  { id: "3", name: "商品图片库 春季", status: "success", time: "1 小时前", count: 5612 },
+  { id: "4", name: "用户行为日志 D-7", status: "failed", time: "3 小时前", count: 0 },
+  { id: "5", name: "新闻资讯聚合 W-1", status: "success", time: "昨天", count: 23500 },
+]
+
+// === Stat 卡片组件 ===
+function StatCard({ stat }: { stat: typeof stats[number] }) {
+  const Icon = stat.icon
+  return (
+    <Card className="relative overflow-hidden border-0 shadow-sm bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-950">
+      <CardContent className="p-6">
+        <div className="flex items-start justify-between">
+          <div className="space-y-2">
+            <p className="text-sm text-muted-foreground">{stat.title}</p>
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-semibold tracking-tight">
+                {stat.value.toLocaleString()}
+              </span>
+              <span className="text-sm text-muted-foreground">{stat.unit}</span>
+            </div>
+            <div className="flex items-center gap-1 text-xs">
+              {stat.trend.up ? (
+                <span className="inline-flex items-center text-emerald-600 dark:text-emerald-400">
+                  <ChevronDown className="h-3 w-3 -rotate-180" />
+                  {stat.trend.value}
+                </span>
+              ) : (
+                <span className="inline-flex items-center text-rose-600 dark:text-rose-400">
+                  <ChevronDown className="h-3 w-3" />
+                  {stat.trend.value}
+                </span>
+              )}
+              <span className="text-muted-foreground">{stat.trend.label}</span>
+            </div>
+          </div>
+          <div className="rounded-lg bg-primary/10 p-3">
+            <Icon className="h-5 w-5 text-primary" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// === 主页面 ===
+export default function OverviewPage() {
+  return (
+    <TooltipProvider>
+      <SidebarProvider>
+        {/* ===== 侧边栏（L01 sidebar-main 模式） ===== */}
+        <Sidebar>
+          <SidebarHeader>
+            <div className="flex items-center gap-2 px-4 py-3">
+              <div className="h-8 w-8 rounded-md bg-primary flex items-center justify-center">
+                <Database className="h-5 w-5 text-primary-foreground" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold">AI 数据集目录</p>
+                <p className="text-xs text-muted-foreground">管理平台</p>
+              </div>
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            {navMain.map((group) => (
+              <SidebarGroup key={group.title}>
+                <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {group.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild isActive={item.isActive}>
+                          <a href={item.url}>
+                            <item.icon />
+                            <span>{item.title}</span>
+                          </a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            ))}
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <SidebarMenuButton>
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage src="/avatars/user.png" />
+                        <AvatarFallback>U</AvatarFallback>
+                      </Avatar>
+                      <span>用户</span>
+                      <ChevronDown className="ml-auto" />
+                    </SidebarMenuButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="top" className="w-[--radix-popper-anchor-width]">
+                    <DropdownMenuLabel>账户</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem><User className="mr-2 h-4 w-4" />个人中心</DropdownMenuItem>
+                    <DropdownMenuItem><Settings className="mr-2 h-4 w-4" />设置</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+
+        {/* ===== 主内容区 ===== */}
+        <SidebarInset>
+          {/* 顶部固定导航（从 sketch "顶部-固定" group 反查） */}
+          <header className="sticky top-0 z-10 flex h-12 items-center gap-4 border-b bg-background px-6">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="/"><Home className="h-4 w-4" /></BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>目录概览</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <div className="ml-auto flex items-center gap-2">
+              <div className="text-xs text-muted-foreground">
+                数据更新截至：2024-02-21 18:00
+              </div>
+              <Button variant="ghost" size="icon"><Bell className="h-4 w-4" /></Button>
+            </div>
+          </header>
+
+          {/* 主内容（背景色从 sketch 提取 #f5f7fa） */}
+          <main className="flex-1 space-y-6 bg-[#f5f7fa] dark:bg-slate-950 p-6">
+            {/* 4 个 Stat 卡片（grid-cols-1 md:grid-cols-2 lg:grid-cols-4） */}
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+              {stats.map((stat) => <StatCard key={stat.title} stat={stat} />)}
+            </div>
+
+            {/* 中部 2 列：左侧 7 列表格 + 右侧 5 列饼图 */}
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
+              {/* 折线图（占 4 列） */}
+              <Card className="lg:col-span-4">
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>资源增长趋势</CardTitle>
+                      <CardDescription>近 7 天各类目录数量变化</CardDescription>
+                    </div>
+                    <Tabs defaultValue="7d">
+                      <TabsList>
+                        <TabsTrigger value="7d">7 天</TabsTrigger>
+                        <TabsTrigger value="30d">30 天</TabsTrigger>
+                        <TabsTrigger value="90d">90 天</TabsTrigger>
+                      </TabsList>
+                    </Tabs>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <ChartContainer config={lineChartConfig} className="h-[280px]">
+                    <LineChart data={lineChartData}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="date" />
+                      <YAxis />
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <Line type="monotone" dataKey="dataset" stroke="var(--color-dataset)" strokeWidth={2} />
+                      <Line type="monotone" dataKey="table" stroke="var(--color-table)" strokeWidth={2} />
+                      <Line type="monotone" dataKey="corpus" stroke="var(--color-corpus)" strokeWidth={2} />
+                    </LineChart>
+                  </ChartContainer>
+                </CardContent>
+              </Card>
+
+              {/* 饼图（占 3 列） */}
+              <Card className="lg:col-span-3">
+                <CardHeader>
+                  <CardTitle>数据类型分布</CardTitle>
+                  <CardDescription>已编目资源按类型</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ChartContainer config={{}} className="h-[280px]">
+                    <PieChart>
+                      <Pie data={pieChartData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label>
+                        {pieChartData.map((entry, i) => (
+                          <Cell key={i} fill={entry.color} />
+                        ))}
+                      </Pie>
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <Legend />
+                    </PieChart>
+                  </ChartContainer>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* 底部：最近编目任务列表 */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle>最近编目任务</CardTitle>
+                    <CardDescription>展示最近 5 个编目任务的状态</CardDescription>
+                  </div>
+                  <Button variant="ghost" size="sm">查看全部</Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {recentTasks.map((task) => (
+                    <div key={task.id} className="flex items-center gap-4 rounded-lg border p-3 hover:bg-muted/50">
+                      <div className="h-10 w-10 rounded-md bg-muted flex items-center justify-center">
+                        <FileText className="h-5 w-5 text-muted-foreground" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{task.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {task.count > 0 && `${task.count.toLocaleString()} 条 · `}{task.time}
+                        </p>
+                      </div>
+                      <Badge variant={
+                        task.status === "success" ? "default" :
+                        task.status === "running" ? "secondary" : "destructive"
+                      }>
+                        {task.status === "success" ? "完成" : task.status === "running" ? "进行中" : "失败"}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </main>
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
+  )
+}