feat(ui): 自研 Celadon 组件族入库与 AntD 消费全量替换 - base(Kbd/StatusBadge/IconButton/ToolButton)+product(EmptyState/Callout/SegmentedControl/Checkbox/Select/Tooltip/Switch), composio 视觉基底, globals.css 覆盖清理 (ADR-0008)

web/src/pages/tasks/index.tsx

@@ -1,4 +1,6 @@
-import { App, Button, Drawer, Form, Input, Modal, Select, Switch, Tooltip, Typography } from "antd";
+import { App, Button, Drawer, Form, Input, Modal, Select, Typography } from "antd";
+import { Switch } from "@/components/ui/base/switch";
+import { SegmentedControl } from "@/components/ui/base/segmented-control";
 import { Bug, LayoutGrid, List, Plus, RefreshCw, Search, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
@@ -436,17 +438,21 @@ export default function TasksPage() {
                             <div className="flex flex-wrap items-center gap-2.5">
                                 {viewMode === "list" ? (
                                     <label className="inline-flex cursor-pointer items-center gap-2 text-xs text-foreground/55">
-                                        <Switch size="small" checked={groupEnabled} onChange={changeGroupEnabled} />
+                                        <Switch size="sm" checked={groupEnabled} onChange={changeGroupEnabled} />
                                         <span>按画布分组</span>
                                     </label>
                                 ) : null}
-                                <div className="task-view-switch" role="group" aria-label="任务视图">
-                                    <Tooltip title="列表视图">
-                                        <Button type={viewMode === "list" ? "primary" : "text"} size="small" aria-label="列表视图" aria-pressed={viewMode === "list"} icon={<List className="size-3.5" />} onClick={() => changeViewMode("list")} />
-                                    </Tooltip>
-                                    <Tooltip title="网格视图">
-                                        <Button type={viewMode === "grid" ? "primary" : "text"} size="small" aria-label="网格视图" aria-pressed={viewMode === "grid"} icon={<LayoutGrid className="size-3.5" />} onClick={() => changeViewMode("grid")} />
-                                    </Tooltip>
+                                <div className="task-view-switch">
+                                    <SegmentedControl<TaskViewMode>
+                                        ariaLabel="任务视图"
+                                        size="sm"
+                                        value={viewMode}
+                                        options={[
+                                            { value: "list", icon: <List className="size-3.5" />, title: "列表视图" },
+                                            { value: "grid", icon: <LayoutGrid className="size-3.5" />, title: "网格视图" },
+                                        ]}
+                                        onChange={changeViewMode}
+                                    />
                                 </div>
                             </div>
                         )}

web/src/pages/tasks/task-grid-card.tsx

@@ -1,4 +1,6 @@
-import { Button, Tooltip } from "antd";
+import { Button } from "antd";
+import { IconButton } from "@/components/ui/base/buttons";
+import { Tooltip } from "@/components/ui/base/tooltip";
 import { Eye, FileText, Image as ImageIcon, RotateCcw, Video } from "lucide-react";
 
 import { MediaPreview } from "@/components/media-preview";
@@ -26,7 +28,7 @@ export function TaskGridCard({ task, actingId, onOpen, onRetry }: { task: Genera
                 )}
                 <div className="task-grid-overlay">
                     <Tooltip title="查看详情">
-                        <Button type="text" size="small" icon={<Eye className="size-3.5" />} aria-label="查看详情" onClick={onOpen} />
+                        <IconButton size="sm" variant="ghost" icon={Eye} aria-label="查看详情" onClick={onOpen} />
                     </Tooltip>
                     {isFailed ? (
                         <Tooltip title="重试任务">

web/src/pages/tasks/task-list-row.tsx

@@ -1,4 +1,6 @@
-import { Button, Tooltip } from "antd";
+import { Button } from "antd";
+import { IconButton } from "@/components/ui/base/buttons";
+import { Tooltip } from "@/components/ui/base/tooltip";
 import { Eye, FileText, FolderKanban, Image as ImageIcon, Play, RotateCcw, Video } from "lucide-react";
 import { useState } from "react";
 
@@ -77,7 +79,7 @@ export function TaskListRow({
             {creditsEnabled ? <TaskBilling billing={task.billing} /> : <span className="task-record-billing-empty" aria-hidden="true" />}
             <div className="task-record-actions">
                 <Tooltip title="查看详情">
-                    <Button type="text" size="small" icon={<Eye className="size-3.5" />} aria-label="查看详情" onClick={onOpen} />
+                    <IconButton size="sm" variant="ghost" icon={Eye} aria-label="查看详情" onClick={onOpen} />
                 </Tooltip>
                 {isFailed ? (
                     <Tooltip title="重试任务">

web/src/pages/tasks/task-status-filter.tsx

@@ -1,4 +1,4 @@
-import { Segmented } from "antd";
+import { SegmentedControl } from "@/components/ui/base/segmented-control";
 
 export type TaskStatusFilter = "all" | "failed" | "active" | "succeeded";
 
@@ -15,12 +15,17 @@ export function TaskStatusFilterBar({ stats, value, onChange }: { stats: TaskSta
     return (
         <div className="task-status-filter">
             <span className="task-status-today">今日生成 <strong>{stats.today}</strong></span>
-            <Segmented<TaskStatusFilter>
-                size="small"
+            <SegmentedControl<TaskStatusFilter>
+                size="sm"
                 value={value}
                 options={options.map((option) => ({
                     value: option.value,
-                    label: <span>{option.label}<b>{option.count}</b></span>,
+                    label: (
+                        <span>
+                            {option.label}
+                            <b>{option.count}</b>
+                        </span>
+                    ),
                 }))}
                 onChange={onChange}
             />