refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps

- Merge all files inside openflare-server to the repository root directory.
- Relocate agent, relay, and flared subprojects from internal/ to internal/apps/.
- Combine docker-compose files and update build context paths to root.
- Update GitHub workflows and Dockerfiles to refer to new directories and package names.
- Rewrite Go package imports across all files.
- Resolve database renew test race condition and clean up docs.

frontend/app/(main)/admin/demo/page.tsx

@@ -0,0 +1,82 @@
+// 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 {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
+
+// 引入模块化拆分后的 Tab 子组件
+import {DashboardTab} from "./tabs/dashboard-tab"
+import {TableTab} from "./tabs/table-tab"
+import {ControlsTab} from "./tabs/controls-tab"
+
+export default function HeaderDemoPage() {
+  const [activeTab, setActiveTab] = React.useState("dashboard")
+
+  return (
+    <div className="py-6 px-1 space-y-6">
+      {/* 1. 标准页面标题 */}
+      <div className="flex items-center gap-2">
+        <Code className="size-5 text-primary" />
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">开发规范示例</h1>
+        </div>
+      </div>
+
+      {/* 说明区域 */}
+      <Card className="border-dashed shadow-none">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <Code className="size-4 text-primary" />
+            <CardTitle className="text-base font-semibold">规范说明</CardTitle>
+          </div>
+          <CardDescription>
+            此页面展示了后台 Sidebar 关联页面的标准标题栏布局，供开发参考。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">核心规范细节与编写原则：</h3>
+            <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
+              <li><strong>结构专注</strong>：页面标题区必须保持绝对干净。请不要在标题下方放置任何描述段落或小字副标题，让页面在视线进入时保持极简与信息纯粹。</li>
+              <li><strong>容器与上边距对齐</strong>：使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex items-center gap-2</code> 作为标题行基础容器（不含下边框），外层统一使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">py-6 px-1</code> (或 <code className="bg-muted px-1 py-0.5 rounded font-mono">py-6</code>) 进行上边距的视觉对齐，确保切换菜单时顶部高度感一致。</li>
+              <li><strong>图标呈现</strong>：直接将 Lucide 图标组件嵌套于标题容器中，应用 <code className="bg-muted px-1 py-0.5 rounded font-mono">size-5 text-primary</code> 样式。禁止为图标包裹任何背景色小卡片、圆角或装饰性边框。</li>
+              <li><strong>文本样式标准</strong>：文本使用且仅使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">{'h1 className="text-2xl font-semibold tracking-tight"'}</code>，禁用字重加粗（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">font-bold</code>）或任何渐变色，保证全站字体一致性。</li>
+              <li><strong>Tabs 模块化拆分</strong>：凡是带有多个 Tab 页切换的页面，**禁止**将所有 Tab 的渲染代码堆积在同一个物理页面主文件内。每个 Tab 页对应的 Content 必须单独拆分为独立组件文件（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">tabs/events-tab.tsx</code> 或就近放在 <code className="bg-muted px-1 py-0.5 rounded font-mono">components/</code> 下），主页面文件只负责维护当前 Tab 的激活状态及外层骨架布局。</li>
+              <li><strong>复杂度驱动的区块拆分</strong>：不仅是 Tabs 切换，当一个页面代码行数超过 600 行时，必须将高密度区块拆分为子组件。路由专属、不复用的子组件应放在对应路由的特征目录中（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">app/(main)/admin/database/components/</code>），只有真正跨页面复用的组件才进入全局 <code className="bg-muted px-1 py-0.5 rounded font-mono">components/common/</code>。典型标杆案例参考“数据管理” (<code className="bg-muted px-1 py-0.5 rounded font-mono">/admin/database</code>) 的 <code className="bg-muted px-1 py-0.5 rounded font-mono">table-browser.tsx</code>、<code className="bg-muted px-1 py-0.5 rounded font-mono">cache-manager.tsx</code> 与 <code className="bg-muted px-1 py-0.5 rounded font-mono">sql-console.tsx</code>。</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabs 切换 */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
+          <TabsTrigger value="dashboard" className="px-0 pb-2 text-xs font-semibold">
+            仪表盘与指标卡片
+          </TabsTrigger>
+          <TabsTrigger value="table" className="px-0 pb-2 text-xs font-semibold">
+            数据表格规范
+          </TabsTrigger>
+          <TabsTrigger value="controls" className="px-0 pb-2 text-xs font-semibold">
+            输入控件与表单
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="dashboard" className="focus-visible:outline-none">
+          <DashboardTab />
+        </TabsContent>
+        <TabsContent value="table" className="focus-visible:outline-none">
+          <TableTab />
+        </TabsContent>
+        <TabsContent value="controls" className="focus-visible:outline-none">
+          <ControlsTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

frontend/app/(main)/admin/demo/tabs/controls-tab.tsx

@@ -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>
+  )
+}

frontend/app/(main)/admin/demo/tabs/dashboard-tab.tsx

@@ -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>
+  )
+}

frontend/app/(main)/admin/demo/tabs/table-tab.tsx

@@ -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>
+  )
+}