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

web/src/components/layout/user-oss-settings-form.tsx

@@ -1,10 +1,12 @@
-import { App, Button, Form, Input, Select, Switch, Tag } from "antd";
+import { App, Button, Form, Input, Select, Tag } from "antd";
+import { Switch } from "@/components/ui/base/switch";
 import { Cloud, ShieldCheck } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { changesRequireOSSRetest, DEFAULT_OSS_PATH_PREFIX, getS3PresetHints, S3_PRESET_OPTIONS, type OSSConnectionTestResult, type OSSProvider, type S3Preset } from "@/lib/oss-settings";
 import { getUserOSSSetting, testUserOSSConnection, updateUserOSSSetting, type UserOSSSetting } from "@/services/api/resources";
 import { useUserStore } from "@/stores/use-user-store";
+import { StatusBadge } from "@/components/ui/base/badges";
 
 type OSSFormValues = {
     enabled?: boolean;
@@ -121,7 +123,7 @@ export function UserOSSSettingsForm() {
                     <p className="mt-1 max-w-3xl text-xs leading-5 text-foreground/55">启用后，新上传和新生成的媒体优先写入你的存储桶；停用时回退到平台存储。</p>
                 </div>
                 <div className="flex shrink-0 gap-2">
-                    <Tag color={setting?.enabled ? "success" : "default"}>{setting?.enabled ? "已启用" : "未启用"}</Tag>
+                    <StatusBadge tone={setting?.enabled ? "success" : "neutral"} label={setting?.enabled ? "已启用" : "未启用"} />
                     <Tag color={setting?.hasAccessKeySecret ? "processing" : "warning"} icon={<ShieldCheck className="size-3" />}>
                         {setting?.hasAccessKeySecret ? "密钥已加密" : "未保存密钥"}
                     </Tag>
@@ -237,7 +239,7 @@ function connectionInput(values: OSSFormValues) {
 }
 
 function ConnectionTestStatus({ result, stale }: { result: OSSConnectionTestResult | null; stale: boolean }) {
-    if (stale) return <Tag color="warning">需重新测试</Tag>;
+    if (stale) return <StatusBadge tone="warning" label="需重新测试" />;
     if (!result) return null;
-    return <Tag color={result.ok ? "success" : "error"}>{result.ok ? `测试通过${result.testedAt ? ` · ${formatSavedAt(result.testedAt)}` : ""}` : result.message || "测试失败"}</Tag>;
+    return <StatusBadge tone={result.ok ? "success" : "error"} label={result.ok ? `测试通过${result.testedAt ? ` · ${formatSavedAt(result.testedAt)}` : ""}` : result.message || "测试失败"} />;
 }

web/src/components/layout/workspace-account-menu.tsx

@@ -1,4 +1,5 @@
-import { Popover, Switch } from "antd";
+import { Popover } from "antd";
+import { Switch } from "@/components/ui/base/switch";
 import { CircleUserRound, LogIn, Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router";
@@ -52,7 +53,7 @@ export function WorkspaceAccountMenu() {
                     <div className="flex h-10 items-center px-2">
                         {theme === "dark" ? <Moon className="size-3.5 text-foreground/45" /> : <Sun className="size-3.5 text-foreground/45" />}
                         <span className="ml-2 flex-1 text-xs text-foreground/65">深色模式</span>
-                        <Switch size="small" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
+                        <Switch size="sm" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
                     </div>
                 </div>
             )}

web/src/components/layout/workspace-command-palette.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState, type ComponentType } from "react"
 import { useNavigate } from "react-router";
 
 import { navigationTools } from "@/constant/navigation-tools";
+import { Kbd } from "@/components/ui/base/kbd";
 import { cn } from "@/lib/utils";
 import { useUserStore } from "@/stores/use-user-store";
 
@@ -100,12 +101,9 @@ toolEntry("projects", "/projects"),
                             className="min-w-0 flex-1 bg-transparent text-[var(--fs-body)] outline-none placeholder:text-foreground/45"
                             placeholder="搜索页面或操作…"
                         />
-                        <kbd
-                            onClick={onClose}
-                            className="hidden h-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-[var(--workspace-border)] bg-background/60 px-1.5 font-mono text-[var(--fs-tiny)] font-medium text-foreground/60 transition-colors hover:bg-surface-hover hover:text-foreground sm:inline-flex"
-                        >
+                        <Kbd onClick={onClose} className="hidden shrink-0 cursor-pointer transition-colors hover:bg-surface-hover hover:text-foreground sm:inline-flex">
                             ⌘K
-                        </kbd>
+                        </Kbd>
                         <button
                             type="button"
                             onClick={onClose}

web/src/components/layout/workspace-sidebar-footer.tsx

@@ -1,4 +1,5 @@
-import { App, Popover, Switch } from "antd";
+import { App, Popover } from "antd";
+import { Switch } from "@/components/ui/base/switch";
 import { ChevronRight, CircleUserRound, LogIn, LogOut, Moon, ShieldCheck, Sun } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
@@ -88,7 +89,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                             <div className="flex h-10 items-center px-2">
                                 {theme === "dark" ? <Moon className="size-3.5 text-foreground/45" /> : <Sun className="size-3.5 text-foreground/45" />}
                                 <span className="ml-2 flex-1 text-xs text-foreground/65">深色模式</span>
-                                <Switch size="small" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
+                                <Switch size="sm" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
                             </div>
                             <button type="button" className="flex h-9 w-full items-center gap-2 rounded px-2 text-xs text-foreground/55 hover:bg-surface-hover hover:text-foreground" onClick={() => void handleLogout()}><LogOut className="size-3.5" />退出登录</button>
                         </div>

web/src/components/layout/workspace-sidebar-nav.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState, type ComponentType, type CSSPrope
 import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
 
 import { BrandLogoFrame } from "@/components/brand/brand-logo";
+import { Kbd } from "@/components/ui/base/kbd";
 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
 import { useWalletBalance } from "@/hooks/use-wallet-balance";
 import { useWorkspaceLogout } from "@/hooks/use-workspace-logout";
@@ -186,9 +187,7 @@ function NavItem({
             </span>
             <span className="app-workspace-nav-meta flex shrink-0 items-center gap-2">
                 {item.shortcut ? (
-                    <kbd className="hidden h-5 items-center justify-center rounded-sm border border-[var(--workspace-border)] bg-background/50 px-1.5 font-mono text-[var(--fs-tiny)] font-medium text-foreground/55 group-hover:inline-flex">
-                        {item.shortcut}
-                    </kbd>
+                    <Kbd className="hidden group-hover:inline-flex">{item.shortcut}</Kbd>
                 ) : null}
                 {item.badge !== undefined ? <span className="flex min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 py-0.5 text-[var(--fs-tiny)] font-medium tabular-nums text-primary">{item.badge}</span> : null}
                 {hasChildren ? <ChevronRight className={cn("size-3.5 shrink-0 text-foreground/40 transition-transform duration-200", isOpen && "rotate-90")} strokeWidth={2} /> : null}
@@ -338,9 +337,7 @@ export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExp
                 >
                     <Search className="size-4 shrink-0 text-muted-foreground group-hover:text-foreground/70" strokeWidth={1.6} />
                     <span className="app-workspace-sidebar-search-label flex-1 truncate">快速搜索</span>
-                    <kbd className="app-workspace-sidebar-search-shortcut flex h-5 shrink-0 items-center justify-center rounded-sm border border-[var(--workspace-border)] bg-background/50 px-1.5 font-mono text-[var(--fs-tiny)] font-medium text-foreground/55">
-                        ⌘K
-                    </kbd>
+                    <Kbd className="app-workspace-sidebar-search-shortcut">⌘K</Kbd>
                 </button>
             </div>