feat: adopt kumo green ui system

modules/shared/components/CmsModuleClient.tsx

@@ -7,6 +7,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Table } from "@/components/ui/table";
 
 export type CmsRecordTone = "success" | "warning" | "danger" | "secondary";
 
@@ -92,71 +94,67 @@ export function CmsModuleClient({ records }: CmsModuleClientProps): React.ReactE
               value={query}
             />
           </label>
-          <label className="relative block">
+          <div className="relative block">
             <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <select
-              className="h-11 w-full rounded-md border bg-background px-9 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-              onChange={(event) => updateStatus(event.target.value)}
+            <Select
+              aria-label="按状态筛选"
+              className="w-full pl-9"
+              onValueChange={updateStatus}
+              options={statusOptions.map((option) => ({ value: option, label: option }))}
               value={status}
-            >
-              {statusOptions.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
-          </label>
+            />
+          </div>
         </div>
       </div>
 
       <div className="overflow-x-auto">
-        <table className="w-full min-w-[860px] text-sm">
-          <thead className="bg-secondary text-left text-xs text-muted-foreground">
-            <tr>
-              <th className="px-4 py-3 font-medium">记录</th>
-              <th className="px-4 py-3 font-medium">分类</th>
-              <th className="px-4 py-3 font-medium">负责人</th>
-              <th className="px-4 py-3 font-medium">状态</th>
-              <th className="px-4 py-3 font-medium">标记</th>
-              <th className="px-4 py-3 text-right font-medium">操作</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y bg-card">
+        <Table className="w-full min-w-[860px] text-sm">
+          <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
+            <Table.Row>
+              <Table.Head className="px-4 py-3 font-medium">记录</Table.Head>
+              <Table.Head className="px-4 py-3 font-medium">分类</Table.Head>
+              <Table.Head className="px-4 py-3 font-medium">负责人</Table.Head>
+              <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
+              <Table.Head className="px-4 py-3 font-medium">标记</Table.Head>
+              <Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body className="divide-y bg-card">
             {visibleRecords.map((record) => (
-              <tr key={record.id}>
-                <td className="px-4 py-3">
+              <Table.Row key={record.id}>
+                <Table.Cell className="px-4 py-3">
                   <p className="font-medium">{record.title}</p>
                   <p className="mt-1 max-w-md truncate text-xs text-muted-foreground">{record.summary}</p>
-                </td>
-                <td className="px-4 py-3 text-muted-foreground">{record.category}</td>
-                <td className="px-4 py-3">{record.owner}</td>
-                <td className="px-4 py-3">
+                </Table.Cell>
+                <Table.Cell className="px-4 py-3 text-muted-foreground">{record.category}</Table.Cell>
+                <Table.Cell className="px-4 py-3">{record.owner}</Table.Cell>
+                <Table.Cell className="px-4 py-3">
                   <Badge variant={record.statusTone}>{record.status}</Badge>
-                </td>
-                <td className="px-4 py-3">
+                </Table.Cell>
+                <Table.Cell className="px-4 py-3">
                   <Badge variant={record.priority === "高" ? "danger" : record.priority === "中" ? "warning" : "secondary"}>
                     {record.priority}优先级
                   </Badge>
-                </td>
-                <td className="px-4 py-3">
+                </Table.Cell>
+                <Table.Cell className="px-4 py-3">
                   <div className="flex justify-end">
                     <Button onClick={() => setSelectedRecord(record)} size="sm" type="button" variant="outline">
                       <Eye className="size-4" aria-hidden="true" />
                       详情
                     </Button>
                   </div>
-                </td>
-              </tr>
+                </Table.Cell>
+              </Table.Row>
             ))}
             {visibleRecords.length === 0 ? (
-              <tr>
-                <td className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
+              <Table.Row>
+                <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
                   暂无匹配记录
-                </td>
-              </tr>
+                </Table.Cell>
+              </Table.Row>
             ) : null}
-          </tbody>
-        </table>
+          </Table.Body>
+        </Table>
       </div>
 
       <div className="flex flex-col gap-3 border-t p-4 sm:flex-row sm:items-center sm:justify-between">