wavelet init

2026-10-11 09:46:37 +08:00 · 2026-06-18 15:24:48 +08:00
parent d6a7011885
commit 99738bbc17
714 changed files with 139987 additions and 0 deletions
@@ -0,0 +1,150 @@
+// Copyright 2026 Arctel.net
+// SPDX-License-Identifier: Apache-2.0
+
+"use client"
+
+import * as React from "react"
+import {Code} from "lucide-react"
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
+import {Label} from "@/components/ui/label"
+import {Input} from "@/components/ui/input"
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
+import {Checkbox} from "@/components/ui/checkbox"
+import {Button} from "@/components/ui/button"
+
+export function ControlsTab() {
+  const [formData, setFormData] = React.useState({
+    name: "",
+    category: "database",
+    allowNotify: true,
+    channel: "all",
+  })
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* 控件展示 */}
+      <Card className="border-dashed shadow-none">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-semibold">表单与输入框交互演示</CardTitle>
+          <CardDescription>包含按钮变体、下拉选择、多选框及基础输入框的标准样式</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* 输入框 */}
+          <div className="space-y-1.5">
+            <Label htmlFor="task-name" className="text-xs font-medium text-foreground">任务名称</Label>
+            <Input
+              id="task-name"
+              value={formData.name}
+              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="输入要创建的任务描述..."
+              className="h-8 text-xs shadow-none bg-background focus-visible:ring-1"
+            />
+            <p className="text-[10px] text-muted-foreground">任务名称将用于后台执行记录的可读性显示</p>
+          </div>
+
+          {/* 下拉框 */}
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium text-foreground">任务分类</Label>
+            <Select
+              value={formData.category}
+              onValueChange={(val) => setFormData(prev => ({ ...prev, category: val }))}
+            >
+              <SelectTrigger className="h-8 text-xs shadow-none bg-background focus:ring-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="database">数据库运维</SelectItem>
+                <SelectItem value="sync">数据批量同步</SelectItem>
+                <SelectItem value="cleanup">过期磁盘清理</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 多选框 Checkbox */}
+          <div className="flex items-start gap-2.5 p-3 bg-muted/30 border border-dashed rounded-lg">
+            <Checkbox
+              id="allow-notify"
+              checked={formData.allowNotify}
+              onCheckedChange={(checked) => setFormData(prev => ({ ...prev, allowNotify: checked === true }))}
+              className="mt-0.5"
+            />
+            <div className="grid gap-1">
+              <label
+                htmlFor="allow-notify"
+                className="text-xs font-medium text-foreground cursor-pointer select-none leading-none"
+              >
+                允许触发异步通知推送
+              </label>
+              <p className="text-[10px] text-muted-foreground leading-normal">
+                勾选后，在当前后台任务顺利执行结束时，会关联派发多渠道通知推送。
+              </p>
+            </div>
+          </div>
+
+          {/* 按钮变体 */}
+          <div className="pt-2">
+            <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">按钮样式对齐：</div>
+            <div className="flex flex-wrap items-center gap-2">
+              <Button size="sm" className="h-8 text-xs shadow-none">
+                主要操作 (Primary)
+              </Button>
+              <Button variant="secondary" size="sm" className="h-8 text-xs shadow-none">
+                次要操作 (Secondary)
+              </Button>
+              <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
+                辅助线框 (Outline)
+              </Button>
+              <Button variant="ghost" size="sm" className="h-8 text-xs hover:bg-muted">
+                幽灵按钮 (Ghost)
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 控件设计规范说明 */}
+      <Card className="border-dashed shadow-none bg-muted/20">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
+            <Code className="size-4 text-primary" />
+            表单设计规范
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 text-xs text-muted-foreground">
+          <div className="space-y-2 leading-relaxed">
+            <p className="font-semibold text-foreground text-[11px]">1. 统一控件高度与投影：</p>
+            <p>
+              输入框 (<code className="bg-muted px-1 py-0.5 rounded font-mono">Input</code>) 与下拉选择器 (<code className="bg-muted px-1 py-0.5 rounded font-mono">SelectTrigger</code>) 的高度应统一限制为小号高度 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8</code>，字体大小使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs</code>，并使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">shadow-none</code> 去除原生的重叠阴影。
+            </p>
+
+            <p className="font-semibold text-foreground text-[11px] pt-1">2. Checkbox 与文本的对齐：</p>
+            <p>
+              Checkbox 应在左侧垂直偏上对齐，使用容器 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex items-start gap-2.5</code> 排列。Checkbox 组件本身添加 <code className="bg-muted px-1 py-0.5 rounded font-mono">mt-0.5</code>，从而在多行描述文本的情况下依然保持良好的顶对齐，避免出现居中对齐导致的凌乱感。
+            </p>
+
+            <p className="font-semibold text-foreground text-[11px] pt-1">3. 按钮使用策略：</p>
+            <p>
+              普通主表单及新增/保存按钮，一律使用默认 Primary 按钮或次要 <code className="bg-muted px-1 py-0.5 rounded font-mono">{'variant="secondary"'}</code> 按钮，小号高度统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8 text-xs</code>。线框按钮必须带有 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 类。
+            </p>
+          </div>
+
+          <div className="bg-background/80 p-3 rounded border border-border/40 font-mono text-[10px] space-y-2 overflow-x-auto">
+            <div>{`// 1. Label 与 Input 对齐`}</div>
+            <div>{`<div className="space-y-1.5">
+  <Label htmlFor="id" className="text-xs font-medium text-foreground">标题</Label>
+  <Input id="id" className="h-8 text-xs shadow-none" />
+</div>`}</div>
+            <div className="pt-2">{`// 2. Checkbox 顶对齐`}</div>
+            <div>{`<div className="flex items-start gap-2.5">
+  <Checkbox id="c" className="mt-0.5" />
+  <div className="grid gap-1">
+    <label htmlFor="c" className="text-xs font-medium leading-none">标题</label>
+    <p className="text-[10px] text-muted-foreground">多行说明内容</p>
+  </div>
+</div>`}</div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,98 @@
+// Copyright 2026 Arctel.net
+// SPDX-License-Identifier: Apache-2.0
+
+"use client"
+
+import * as React from "react"
+import {Code, Cpu, Database, HardDrive} from "lucide-react"
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
+import {Progress} from "@/components/ui/progress"
+
+export function DashboardTab() {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* CPU */}
+        <Card className="border-dashed shadow-none">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <span className="text-xs font-medium text-muted-foreground">容器 CPU 使用率</span>
+            <Cpu className="size-4 text-primary" />
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="text-2xl font-semibold tracking-tight">42.8 %</div>
+            <Progress value={42.8} className="h-1.5" />
+            <p className="text-[10px] text-muted-foreground flex items-center gap-1">
+              <span className="size-1.5 rounded-full bg-emerald-500 inline-block animate-pulse" />
+              容器运行正常，负载平稳
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Storage */}
+        <Card className="border-dashed shadow-none">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <span className="text-xs font-medium text-muted-foreground">存储已用容量</span>
+            <HardDrive className="size-4 text-primary" />
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="text-2xl font-semibold tracking-tight">72.4 GB <span className="text-xs text-muted-foreground">/ 100 GB</span></div>
+            <Progress value={72.4} className="h-1.5" />
+            <p className="text-[10px] text-muted-foreground">
+              数据已同步远端 S3 存储桶，支持自动过期
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* DB Overview */}
+        <Card className="border-dashed shadow-none">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <span className="text-xs font-medium text-muted-foreground">物理数据库</span>
+            <Database className="size-4 text-primary" />
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="text-2xl font-semibold tracking-tight">PostgreSQL <span className="text-xs font-normal text-muted-foreground">(v16.2)</span></div>
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <div>活跃连接: <span className="font-semibold text-foreground">12</span></div>
+              <div>总表数量: <span className="font-semibold text-foreground">34</span></div>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              链接池自动维护中，最大连接限制为 100
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 指标卡片规范与代码 */}
+      <Card className="border-dashed shadow-none bg-muted/20">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
+            <Code className="size-4 text-primary" />
+            指标卡片 & 仪表盘设计规范
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
+            <li>指标卡片统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 作为边框和投影。</li>
+            <li>头部使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex flex-row items-center justify-between pb-2</code> 布局，左侧为标题小字，右侧为直接呈现的 Lucide 图标。</li>
+            <li>数值强调使用且仅使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-2xl font-semibold tracking-tight</code> 展示。</li>
+            <li>进度条使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-1.5</code> 细条高度，不喧宾夺主。</li>
+            <li>底部的次要说明信息必须统一使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-[10px] text-muted-foreground</code> 等辅助类。</li>
+          </ul>
+          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
+{`<Card className="border-dashed shadow-none">
+  <CardHeader className="flex flex-row items-center justify-between pb-2">
+    <span className="text-xs font-medium text-muted-foreground">指标标题</span>
+    <Cpu className="size-4 text-primary" />
+  </CardHeader>
+  <CardContent className="space-y-2">
+    <div className="text-2xl font-semibold tracking-tight">42.8 %</div>
+    <Progress value={42.8} className="h-1.5" />
+    <p className="text-[10px] text-muted-foreground">状态说明小字</p>
+  </CardContent>
+</Card>`}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
@@ -0,0 +1,142 @@
+// Copyright 2026 Arctel.net
+// SPDX-License-Identifier: Apache-2.0
+
+"use client"
+
+import * as React from "react"
+import {Code, Edit, ListFilter, Plus, Search, Trash2} from "lucide-react"
+import {Button} from "@/components/ui/button"
+import {Input} from "@/components/ui/input"
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
+import {Badge} from "@/components/ui/badge"
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
+
+export function TableTab() {
+  const mockTableData = [
+    { id: "TX-1002", name: "用户信息批量同步导出", type: "数据同步", status: "success", duration: "1.2s", time: "2026-06-15 14:22" },
+    { id: "TX-1003", name: "系统数据库每周自动备份归档", type: "数据库运维", status: "running", duration: "在执行中", time: "2026-06-15 15:00" },
+    { id: "TX-1004", name: "远端S3过期缓存对象自动清理任务", type: "磁盘清理", status: "failed", duration: "0.4s", time: "2026-06-15 10:05" },
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* 表格控制工具栏 */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <div className="relative w-64">
+            <Search className="absolute left-2.5 top-2.5 size-3 text-muted-foreground" />
+            <Input placeholder="输入任务名称搜索..." className="h-8 pl-8 text-xs w-full shadow-none border-dashed bg-background" />
+          </div>
+          <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
+            <ListFilter className="size-3 mr-1" />
+            过滤
+          </Button>
+        </div>
+        <Button size="sm" className="h-8 text-xs shadow-none">
+          <Plus className="size-3.5 mr-1" />
+          新建任务
+        </Button>
+      </div>
+
+      {/* 数据表格本身 */}
+      <div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
+        <Table className="w-full caption-bottom text-sm min-w-full">
+          <TableHeader className="bg-muted/40">
+            <TableRow className="border-dashed hover:bg-transparent">
+              <TableHead className="w-[100px] text-xs font-semibold">任务编号</TableHead>
+              <TableHead className="text-xs font-semibold">执行任务名称</TableHead>
+              <TableHead className="w-[120px] text-xs font-semibold">任务类型</TableHead>
+              <TableHead className="w-[100px] text-xs font-semibold">状态</TableHead>
+              <TableHead className="w-[100px] text-xs font-semibold">执行耗时</TableHead>
+              <TableHead className="w-[150px] text-xs font-semibold">触发时间</TableHead>
+              <TableHead className="w-[80px] text-xs font-semibold text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {mockTableData.map((row) => (
+              <TableRow key={row.id} className="border-dashed hover:bg-muted/10 transition-colors">
+                <TableCell className="font-mono text-xs font-semibold">{row.id}</TableCell>
+                <TableCell className="text-xs font-medium text-foreground">{row.name}</TableCell>
+                <TableCell className="text-xs text-muted-foreground">{row.type}</TableCell>
+                <TableCell>
+                  {row.status === "success" && (
+                    <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2 font-medium">
+                      <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
+                      成功
+                    </Badge>
+                  )}
+                  {row.status === "running" && (
+                    <Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/20 text-blue-600 rounded-full py-0 px-2 font-medium">
+                      <span className="size-1 bg-blue-500 rounded-full mr-1.5 shrink-0 animate-pulse" />
+                      运行中
+                    </Badge>
+                  )}
+                  {row.status === "failed" && (
+                    <Badge variant="outline" className="text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2 font-medium">
+                      <span className="size-1 bg-destructive rounded-full mr-1.5 shrink-0" />
+                      失败
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground font-mono">{row.duration}</TableCell>
+                <TableCell className="text-xs text-muted-foreground">{row.time}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex items-center justify-end gap-1.5">
+                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-muted text-muted-foreground">
+                      <Edit className="size-3" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-destructive/10 text-destructive">
+                      <Trash2 className="size-3" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 表格规范指引 */}
+      <Card className="border-dashed shadow-none bg-muted/20">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
+            <Code className="size-4 text-primary" />
+            表格设计规范与代码模板
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
+            <li>表格容器必须统一使用带有虚线边框的容器，即类名：<code className="bg-muted px-1 py-0.5 rounded font-mono">border border-dashed shadow-none rounded-lg overflow-hidden bg-background</code>。</li>
+            <li>表头背景设为 <code className="bg-muted px-1 py-0.5 rounded font-mono">bg-muted/40</code>。表头表项字号统一为小字粗体 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs font-semibold</code>。</li>
+            <li>单元格行与列之间使用虚线分割（<code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed</code>）。表格行悬浮交互采用温和过渡色 <code className="bg-muted px-1 py-0.5 rounded font-mono">hover:bg-muted/10 transition-colors</code>。</li>
+            <li>编码、主键或唯一 ID 类字段一律采用等宽字体呈现：<code className="bg-muted px-1 py-0.5 rounded font-mono">font-mono text-xs</code>。</li>
+            <li>状态标签（Badge）尽量圆角化（<code className="bg-muted px-1 py-0.5 rounded font-mono">rounded-full py-0 px-2</code>），并以浅背景配以各自对应的图标圆点，以实现现代、高对比度的视觉质感。</li>
+          </ul>
+          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
+{`<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
+  <Table>
+    <TableHeader className="bg-muted/40">
+      <TableRow className="border-dashed hover:bg-transparent">
+        <TableHead className="text-xs font-semibold">编号</TableHead>
+        <TableHead className="text-xs font-semibold">状态</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow className="border-dashed hover:bg-muted/10 transition-colors">
+        <TableCell className="font-mono text-xs">ID-1001</TableCell>
+        <TableCell>
+          <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2">
+            <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
+            成功
+          </Badge>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</div>`}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}