From 3da49bd0da1f7b0de527e38ee3cca43dd9442c02 Mon Sep 17 00:00:00 2001
From: maomaochong-ai <nuwa.sky@outlook.com>
Date: Sun, 6 Sep 2026 20:28:52 +0800
Subject: [PATCH] =?UTF-8?q?style(web):=20UI=20kit=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8E=E7=94=BB=E5=B8=83/=E5=90=8E=E5=8F=B0=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=20Prettier=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=B8=8E=20m?=
 =?UTF-8?q?igrations.go=20gofmt=20=E6=B8=85=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../art-critique/ai-art-critique-modal.tsx    | 24 ++++++--
 .../canvas/canvas-history-drawer.tsx          |  6 +-
 .../canvas/canvas-prompt-optimizer-drawer.tsx |  6 +-
 .../canvas/director/director-view-toolbar.tsx |  1 -
 web/src/components/ui/README.md               | 12 ++--
 .../ui/base/badges/status-badge.tsx           | 14 +----
 .../ui/base/buttons/icon-button.tsx           | 31 +++--------
 .../ui/base/buttons/tool-button.tsx           | 22 +-------
 .../ui/base/checkbox/checkbox-group.tsx       | 16 +-----
 .../components/ui/base/checkbox/checkbox.tsx  | 55 +++----------------
 web/src/components/ui/base/kbd/kbd.tsx        |  7 +--
 .../segmented-control/segmented-control.tsx   | 43 +++------------
 web/src/components/ui/base/select/select.tsx  | 44 ++-------------
 web/src/components/ui/base/switch/switch.tsx  | 45 ++-------------
 .../components/ui/base/tooltip/tooltip.tsx    | 10 +---
 .../components/ui/product/callout/callout.tsx | 24 +-------
 .../ui/product/empty-state/empty-state.tsx    | 10 +---
 .../workflow-field-mapping-editor.tsx         |  8 +--
 web/src/pages/admin/components/admin-ui.tsx   | 11 +---
 .../model-routing-capabilities.tsx            |  6 +-
 .../pages/admin/payments/payments-page.tsx    | 16 +++++-
 .../settings/comfyui-bridge-settings-pane.tsx | 10 ++--
 web/src/pages/settings/diagnostics-panel.tsx  | 13 ++++-
 web/src/pages/settings/local-cli-settings.tsx |  7 ++-
 .../settings/runninghub-settings-pane.tsx     |  4 +-
 25 files changed, 123 insertions(+), 322 deletions(-)

diff --git a/web/src/components/canvas/art-critique/ai-art-critique-modal.tsx b/web/src/components/canvas/art-critique/ai-art-critique-modal.tsx
index 1ff3cbf8e..dd0e09d59 100644
--- a/web/src/components/canvas/art-critique/ai-art-critique-modal.tsx
+++ b/web/src/components/canvas/art-critique/ai-art-critique-modal.tsx
@@ -336,10 +336,26 @@ export function AiArtCritiqueModal({ node, upstreamNodes, open, onClose, onUpdat
                     <aside className="min-h-0 flex-1 overflow-y-auto" data-canvas-wheel-scroll>
                         <div className="flex min-h-full flex-col gap-4 p-4">
                             {running || visibleState.status === "running" ? <ArtCritiqueProgress stage={progressStage} theme={theme} /> : null}
-                            {draftReportVisible && visibleState.status === "running" && visibleState.report ? <Callout tone="info" title="报告初稿已生成">问题和建议已先展示，正在精确定位并复核矩形标注。</Callout> : null}
-                            {!enabled && !visibleState.report ? <Callout tone="warning" title="插件尚未启用">请先到插件管理中开启 AI 审美批改，再运行分析。</Callout> : null}
-                            {visibleState.status === "stale" ? <Callout tone="warning" title="输入图片已经变化">当前报告针对旧图片生成，请重新批改。</Callout> : null}
-                            {localError || visibleState.errorMessage ? <Callout tone="error" title="批改失败">{localError || visibleState.errorMessage}</Callout> : null}
+                            {draftReportVisible && visibleState.status === "running" && visibleState.report ? (
+                                <Callout tone="info" title="报告初稿已生成">
+                                    问题和建议已先展示，正在精确定位并复核矩形标注。
+                                </Callout>
+                            ) : null}
+                            {!enabled && !visibleState.report ? (
+                                <Callout tone="warning" title="插件尚未启用">
+                                    请先到插件管理中开启 AI 审美批改，再运行分析。
+                                </Callout>
+                            ) : null}
+                            {visibleState.status === "stale" ? (
+                                <Callout tone="warning" title="输入图片已经变化">
+                                    当前报告针对旧图片生成，请重新批改。
+                                </Callout>
+                            ) : null}
+                            {localError || visibleState.errorMessage ? (
+                                <Callout tone="error" title="批改失败">
+                                    {localError || visibleState.errorMessage}
+                                </Callout>
+                            ) : null}
 
                             {view === "detail" && detailIssue ? (
                                 <IssueDetailView
diff --git a/web/src/components/canvas/canvas-history-drawer.tsx b/web/src/components/canvas/canvas-history-drawer.tsx
index a1898826b..79bab9201 100644
--- a/web/src/components/canvas/canvas-history-drawer.tsx
+++ b/web/src/components/canvas/canvas-history-drawer.tsx
@@ -180,11 +180,7 @@ export function CanvasHistoryDrawer({ open, onClose }: { open: boolean; onClose:
                                                             {item.title}
                                                         </button>
                                                     )}
-                                                    {isDeleted ? (
-                                                        <StatusBadge tone="error" size="sm" label="已删除" className="m-0" />
-                                                    ) : (
-                                                        <StatusBadge tone="success" size="sm" label="活跃中" className="m-0" />
-                                                    )}
+                                                    {isDeleted ? <StatusBadge tone="error" size="sm" label="已删除" className="m-0" /> : <StatusBadge tone="success" size="sm" label="活跃中" className="m-0" />}
                                                 </div>
 
                                                 <div className="space-y-1 text-xs text-stone-600 dark:text-stone-300">
diff --git a/web/src/components/canvas/canvas-prompt-optimizer-drawer.tsx b/web/src/components/canvas/canvas-prompt-optimizer-drawer.tsx
index b4da3623f..f7ef31abc 100644
--- a/web/src/components/canvas/canvas-prompt-optimizer-drawer.tsx
+++ b/web/src/components/canvas/canvas-prompt-optimizer-drawer.tsx
@@ -544,7 +544,11 @@ export function CanvasPromptOptimizerDrawer({ open, children, prompt, generation
         bubbleItems.push({
             key: "error",
             role: "system",
-            content: <Callout className="canvas-prompt-optimizer-alert" tone="error" title="优化失败">{error}</Callout>,
+            content: (
+                <Callout className="canvas-prompt-optimizer-alert" tone="error" title="优化失败">
+                    {error}
+                </Callout>
+            ),
         });
     }
 
diff --git a/web/src/components/canvas/director/director-view-toolbar.tsx b/web/src/components/canvas/director/director-view-toolbar.tsx
index c7c2e3fd1..1ceda0cb2 100644
--- a/web/src/components/canvas/director/director-view-toolbar.tsx
+++ b/web/src/components/canvas/director/director-view-toolbar.tsx
@@ -1,6 +1,5 @@
 import { Tooltip } from "@/components/ui/base/tooltip";
 
-
 import { releaseDirectorFocusAfterPointer } from "@/lib/canvas/director/director-shortcuts";
 import { DIRECTOR_VIEW_MODES, type DirectorViewMode } from "@/lib/canvas/director/director-view-modes";
 
diff --git a/web/src/components/ui/README.md b/web/src/components/ui/README.md
index 240dffd10..695f3b0df 100644
--- a/web/src/components/ui/README.md
+++ b/web/src/components/ui/README.md
@@ -4,12 +4,12 @@
 
 ## 分层
 
-| 层 | 目录 | 内容 |
-| --- | --- | --- |
-| base | `ui/base/` | 原语 + 基础件：`buttons/`、`badges/`、`kbd/`、`segmented-control/` 等 |
-| product | `ui/product/` | 跨页面模式件：`empty-state/`、`callout/`、`loading-state/`、`section-card/`、`property-row/` |
-| fx | `ui/fx/` | 特效件（原 `aceternity/*` 归位至此命名空间，引用随用随迁，不重写） |
-| application | `ui/application/` | 产品块（P3 起）：agent-chat、notification-center、app-shell 等 |
+| 层          | 目录              | 内容                                                                                         |
+| ----------- | ----------------- | -------------------------------------------------------------------------------------------- |
+| base        | `ui/base/`        | 原语 + 基础件：`buttons/`、`badges/`、`kbd/`、`segmented-control/` 等                        |
+| product     | `ui/product/`     | 跨页面模式件：`empty-state/`、`callout/`、`loading-state/`、`section-card/`、`property-row/` |
+| fx          | `ui/fx/`          | 特效件（原 `aceternity/*` 归位至此命名空间，引用随用随迁，不重写）                           |
+| application | `ui/application/` | 产品块（P3 起）：agent-chat、notification-center、app-shell 等                               |
 
 > 视觉数值唯一权威源：`composio-brand-package`（仓库根同级兄弟目录），消费规则见实施计划 §2.4。
 
diff --git a/web/src/components/ui/base/badges/status-badge.tsx b/web/src/components/ui/base/badges/status-badge.tsx
index a1aea9d77..7b0ccf452 100644
--- a/web/src/components/ui/base/badges/status-badge.tsx
+++ b/web/src/components/ui/base/badges/status-badge.tsx
@@ -78,17 +78,9 @@ export type StatusBadgeProps = HTMLAttributes<HTMLSpanElement> &
 export function StatusBadge({ tone, variant = "outline", size, label, className, children, ...props }: StatusBadgeProps) {
     const resolvedTone = tone ?? "neutral";
     return (
-        <span
-            data-slot="status-badge"
-            className={cn(statusBadgeVariants({ variant, size }), variant === "filled" && filledTintClass[resolvedTone], className)}
-            {...props}
-        >
-            {variant === "outline" ? (
-                <span aria-hidden className={cn(statusBadgeTone({ tone }), "size-1.5", tone === "loading" && "motion-safe:animate-pulse")} />
-            ) : null}
-            {label != null ? (
-                <span className={cn("text-muted-foreground", variant === "filled" && filledInkClass[resolvedTone])}>{label}</span>
-            ) : null}
+        <span data-slot="status-badge" className={cn(statusBadgeVariants({ variant, size }), variant === "filled" && filledTintClass[resolvedTone], className)} {...props}>
+            {variant === "outline" ? <span aria-hidden className={cn(statusBadgeTone({ tone }), "size-1.5", tone === "loading" && "motion-safe:animate-pulse")} /> : null}
+            {label != null ? <span className={cn("text-muted-foreground", variant === "filled" && filledInkClass[resolvedTone])}>{label}</span> : null}
             {children}
         </span>
     );
diff --git a/web/src/components/ui/base/buttons/icon-button.tsx b/web/src/components/ui/base/buttons/icon-button.tsx
index 9c1a101ea..4e44ea77d 100644
--- a/web/src/components/ui/base/buttons/icon-button.tsx
+++ b/web/src/components/ui/base/buttons/icon-button.tsx
@@ -19,25 +19,20 @@ import { cn } from "@/lib/utils";
  * 明暗：全部颜色走 token；active 按压底用 bg-surface-active，明暗自动适配。
  */
 export const iconButtonVariants = cva(
-    [
-		"inline-flex shrink-0 items-center justify-center rounded-md",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-45",
-        "motion-safe:active:scale-[0.96]",
-    ],
+    ["inline-flex shrink-0 items-center justify-center rounded-md", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-45", "motion-safe:active:scale-[0.96]"],
     {
         variants: {
             variant: {
-				// 纯透明 + hover 浮底（最常用：面板/工具条）
-				ghost: "text-muted-foreground hover:bg-surface-hover hover:text-foreground active:bg-surface-active",
+                // 纯透明 + hover 浮底（最常用：面板/工具条）
+                ghost: "text-muted-foreground hover:bg-surface-hover hover:text-foreground active:bg-surface-active",
                 // 常驻浅底
-				default: "bg-surface-secondary text-muted-foreground hover:bg-surface-hover hover:text-foreground active:bg-surface-active",
+                default: "bg-surface-secondary text-muted-foreground hover:bg-surface-hover hover:text-foreground active:bg-surface-active",
                 // 描边
-				outline: "border border-border bg-transparent text-muted-foreground hover:bg-surface-hover hover:text-foreground",
+                outline: "border border-border bg-transparent text-muted-foreground hover:bg-surface-hover hover:text-foreground",
                 // 危险（文本色常驻红）
-				danger: "text-status-error hover:bg-surface-hover active:bg-surface-active",
-				// 实心（中性黑底白图标，主操作；active 反转成白底黑字 + 内描边，供选中态使用）
-				solid: "bg-foreground text-background hover:opacity-85 active:opacity-75 data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:ring-1 data-[active=true]:ring-inset data-[active=true]:ring-border",
+                danger: "text-status-error hover:bg-surface-hover active:bg-surface-active",
+                // 实心（中性黑底白图标，主操作；active 反转成白底黑字 + 内描边，供选中态使用）
+                solid: "bg-foreground text-background hover:opacity-85 active:opacity-75 data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:ring-1 data-[active=true]:ring-inset data-[active=true]:ring-border",
             },
             size: {
                 xs: "size-6 [&_svg]:size-3.5",
@@ -65,15 +60,7 @@ export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
 
 export function IconButton({ variant, size, icon: Icon, loading = false, active = false, className, type = "button", disabled, ...props }: IconButtonProps) {
     return (
-        <button
-            data-slot="icon-button"
-            type={type}
-            disabled={disabled || loading}
-            aria-busy={loading || undefined}
-            data-active={active || undefined}
-            className={cn(iconButtonVariants({ variant, size }), className)}
-            {...props}
-        >
+        <button data-slot="icon-button" type={type} disabled={disabled || loading} aria-busy={loading || undefined} data-active={active || undefined} className={cn(iconButtonVariants({ variant, size }), className)} {...props}>
             {loading ? <Loader2 aria-hidden className="animate-spin" /> : <Icon aria-hidden />}
         </button>
     );
diff --git a/web/src/components/ui/base/buttons/tool-button.tsx b/web/src/components/ui/base/buttons/tool-button.tsx
index f27271b8f..e7cc8f1fe 100644
--- a/web/src/components/ui/base/buttons/tool-button.tsx
+++ b/web/src/components/ui/base/buttons/tool-button.tsx
@@ -21,12 +21,7 @@ import { cn } from "@/lib/utils";
  * 明暗：全部颜色走 token；active 用按压底语义 token，明暗自动适配。
  */
 export const toolButtonVariants = cva(
-    [
-        "inline-flex select-none items-center justify-center gap-1.5 rounded-md",
-        "font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-45",
-    ],
+    ["inline-flex select-none items-center justify-center gap-1.5 rounded-md", "font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-45"],
     {
         variants: {
             variant: {
@@ -79,20 +74,7 @@ export type ToolButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
         label?: ReactNode;
     };
 
-export function ToolButton({
-    variant,
-    size,
-    tone,
-    icon,
-    active = false,
-    expands = false,
-    loading = false,
-    label,
-    className,
-    type = "button",
-    disabled,
-    ...props
-}: ToolButtonProps) {
+export function ToolButton({ variant, size, tone, icon, active = false, expands = false, loading = false, label, className, type = "button", disabled, ...props }: ToolButtonProps) {
     const pressed = !expands && active;
     const expanded = expands && active;
     return (
diff --git a/web/src/components/ui/base/checkbox/checkbox-group.tsx b/web/src/components/ui/base/checkbox/checkbox-group.tsx
index 58a016b85..fc8f84f69 100644
--- a/web/src/components/ui/base/checkbox/checkbox-group.tsx
+++ b/web/src/components/ui/base/checkbox/checkbox-group.tsx
@@ -30,14 +30,7 @@ export interface CheckboxGroupProps<V extends string = string> {
     className?: string;
 }
 
-export function CheckboxGroup<V extends string = string>({
-    value = [],
-    onChange,
-    options,
-    disabled = false,
-    ariaLabel,
-    className,
-}: CheckboxGroupProps<V>) {
+export function CheckboxGroup<V extends string = string>({ value = [], onChange, options, disabled = false, ariaLabel, className }: CheckboxGroupProps<V>) {
     const toggle = (optionValue: V, checked: boolean) => {
         if (disabled) return;
         const next = checked ? [...value, optionValue] : value.filter((item) => item !== optionValue);
@@ -47,12 +40,7 @@ export function CheckboxGroup<V extends string = string>({
     return (
         <div data-slot="checkbox-group" role="group" aria-label={ariaLabel} className={className}>
             {options.map((option) => (
-                <Checkbox
-                    key={option.value}
-                    checked={value.includes(option.value)}
-                    disabled={disabled || option.disabled}
-                    onChange={(event) => toggle(option.value, event.target.checked)}
-                >
+                <Checkbox key={option.value} checked={value.includes(option.value)} disabled={disabled || option.disabled} onChange={(event) => toggle(option.value, event.target.checked)}>
                     {option.label}
                 </Checkbox>
             ))}
diff --git a/web/src/components/ui/base/checkbox/checkbox.tsx b/web/src/components/ui/base/checkbox/checkbox.tsx
index 71f24b149..c355929a1 100644
--- a/web/src/components/ui/base/checkbox/checkbox.tsx
+++ b/web/src/components/ui/base/checkbox/checkbox.tsx
@@ -35,16 +35,7 @@ const BOX_SIZE: Record<"sm" | "md", string> = {
     md: "size-4 rounded",
 };
 
-export function Checkbox({
-    size = "md",
-    indeterminate = false,
-    children,
-    bare = false,
-    className,
-    disabled,
-    checked,
-    ...props
-}: CheckboxProps) {
+export function Checkbox({ size = "md", indeterminate = false, children, bare = false, className, disabled, checked, ...props }: CheckboxProps) {
     const inputRef = useRef<HTMLInputElement | null>(null);
 
     useLayoutEffect(() => {
@@ -55,14 +46,7 @@ export function Checkbox({
 
     const inner = (
         <>
-            <input
-                ref={inputRef}
-                type="checkbox"
-                disabled={disabled}
-                checked={checked}
-                className="peer sr-only"
-                {...props}
-            />
+            <input ref={inputRef} type="checkbox" disabled={disabled} checked={checked} className="peer sr-only" {...props} />
             <span
                 aria-hidden="true"
                 data-indeterminate={indeterminate || undefined}
@@ -77,17 +61,11 @@ export function Checkbox({
                 )}
             >
                 {/* checked 勾（indeterminate 时隐藏，改显短横线） */}
-                <svg
-                    viewBox="0 0 12 12"
-                    className={cn("size-3 stroke-current stroke-[2.2]", indeterminate ? "hidden" : "block")}
-                >
+                <svg viewBox="0 0 12 12" className={cn("size-3 stroke-current stroke-[2.2]", indeterminate ? "hidden" : "block")}>
                     <path d="M2.5 6.5 L5 9 L9.5 3.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
                 {/* indeterminate 短横线 */}
-                <svg
-                    viewBox="0 0 12 12"
-                    className={cn("size-3 stroke-current stroke-[2]", indeterminate ? "block" : "hidden")}
-                >
+                <svg viewBox="0 0 12 12" className={cn("size-3 stroke-current stroke-[2]", indeterminate ? "block" : "hidden")}>
                     <path d="M2.8 6 H9.2" fill="none" strokeLinecap="round" />
                 </svg>
             </span>
@@ -95,32 +73,13 @@ export function Checkbox({
     );
 
     if (bare) {
-        return (
-            <span
-                className={cn(
-                    "group/checkbox inline-flex items-center",
-                    disabled && "cursor-not-allowed",
-                    className,
-                )}
-            >
-                {inner}
-            </span>
-        );
+        return <span className={cn("group/checkbox inline-flex items-center", disabled && "cursor-not-allowed", className)}>{inner}</span>;
     }
 
     return (
-        <label
-            data-slot="checkbox"
-            className={cn(
-                "group/checkbox inline-flex cursor-pointer select-none items-center gap-2 align-middle",
-                disabled && "cursor-not-allowed",
-                className,
-            )}
-        >
+        <label data-slot="checkbox" className={cn("group/checkbox inline-flex cursor-pointer select-none items-center gap-2 align-middle", disabled && "cursor-not-allowed", className)}>
             {inner}
-            {children !== undefined && (
-                <span className={cn("text-sm leading-none text-foreground", disabled && "opacity-60")}>{children}</span>
-            )}
+            {children !== undefined && <span className={cn("text-sm leading-none text-foreground", disabled && "opacity-60")}>{children}</span>}
         </label>
     );
 }
diff --git a/web/src/components/ui/base/kbd/kbd.tsx b/web/src/components/ui/base/kbd/kbd.tsx
index 801ff04be..fc9897b2f 100644
--- a/web/src/components/ui/base/kbd/kbd.tsx
+++ b/web/src/components/ui/base/kbd/kbd.tsx
@@ -18,12 +18,7 @@ export function Kbd({ className, children, ...props }: KbdProps) {
     return (
         <kbd
             data-slot="kbd"
-            className={cn(
-                "inline-flex h-5 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm",
-                "border border-[color:var(--workspace-border)] bg-background/60 px-1.5",
-                "font-mono text-tiny font-medium text-foreground/60",
-                className,
-            )}
+            className={cn("inline-flex h-5 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm", "border border-[color:var(--workspace-border)] bg-background/60 px-1.5", "font-mono text-tiny font-medium text-foreground/60", className)}
             {...props}
         >
             {children}
diff --git a/web/src/components/ui/base/segmented-control/segmented-control.tsx b/web/src/components/ui/base/segmented-control/segmented-control.tsx
index 1fbf22b84..c42e38937 100644
--- a/web/src/components/ui/base/segmented-control/segmented-control.tsx
+++ b/web/src/components/ui/base/segmented-control/segmented-control.tsx
@@ -53,16 +53,7 @@ const SIZE_CLASS: Record<SegmentedSize, { track: string; thumb: string; item: st
     },
 };
 
-export function SegmentedControl<V extends string = string>({
-    value,
-    onChange,
-    options,
-    size = "md",
-    block = false,
-    disabled = false,
-    ariaLabel,
-    className = "",
-}: SegmentedControlProps<V>) {
+export function SegmentedControl<V extends string = string>({ value, onChange, options, size = "md", block = false, disabled = false, ariaLabel, className = "" }: SegmentedControlProps<V>) {
     const trackRef = useRef<HTMLDivElement | null>(null);
     const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
     const [thumb, setThumb] = useState<{ left: number; width: number } | null>(null);
@@ -70,8 +61,7 @@ export function SegmentedControl<V extends string = string>({
     const selectedIndex = options.findIndex((option) => option.value === value);
 
     /** 无选中项时兜底首个可用项，保证 roving tabindex 下键盘始终可达 */
-    const focusableIndex =
-        selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled);
+    const focusableIndex = selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled);
 
     useLayoutEffect(() => {
         const track = trackRef.current;
@@ -123,29 +113,14 @@ export function SegmentedControl<V extends string = string>({
     };
 
     const itemBase =
-        "relative z-10 inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-colors motion-reduce:transition-none " +
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 ";
+        "relative z-10 inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-colors motion-reduce:transition-none " + "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 ";
 
     return (
-        <div
-            ref={trackRef}
-            role="radiogroup"
-            aria-label={ariaLabel}
-            className={[
-                "relative inline-flex bg-surface-tertiary",
-                SIZE_CLASS[size].track,
-                block ? "flex w-full" : "",
-                disabled ? "opacity-60" : "",
-                className,
-            ].join(" ")}
-        >
+        <div ref={trackRef} role="radiogroup" aria-label={ariaLabel} className={["relative inline-flex bg-surface-tertiary", SIZE_CLASS[size].track, block ? "flex w-full" : "", disabled ? "opacity-60" : "", className].join(" ")}>
             {thumb !== null && !disabled && (
                 <span
                     aria-hidden="true"
-                    className={[
-                        "pointer-events-none absolute inset-y-0.5 z-0 bg-surface-strong transition-[left,width] duration-200 ease-out motion-reduce:transition-none",
-                        SIZE_CLASS[size].thumb,
-                    ].join(" ")}
+                    className={["pointer-events-none absolute inset-y-0.5 z-0 bg-surface-strong transition-[left,width] duration-200 ease-out motion-reduce:transition-none", SIZE_CLASS[size].thumb].join(" ")}
                     style={{ left: thumb.left, width: thumb.width }}
                 />
             )}
@@ -160,7 +135,7 @@ export function SegmentedControl<V extends string = string>({
                         type="button"
                         role="radio"
                         aria-checked={selected}
-                        aria-label={option.label ? undefined : option.title ?? option.value}
+                        aria-label={option.label ? undefined : (option.title ?? option.value)}
                         title={option.title}
                         disabled={disabled || option.disabled}
                         tabIndex={index === focusableIndex ? 0 : -1}
@@ -174,11 +149,7 @@ export function SegmentedControl<V extends string = string>({
                             SIZE_CLASS[size].item,
                             SIZE_CLASS[size].thumb,
                             block ? "flex-1" : "",
-                            option.disabled
-                                ? "cursor-not-allowed text-muted-foreground/40"
-                                : selected
-                                  ? "cursor-default text-foreground"
-                                  : "text-muted-foreground hover:bg-surface-hover hover:text-foreground",
+                            option.disabled ? "cursor-not-allowed text-muted-foreground/40" : selected ? "cursor-default text-foreground" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground",
                         ].join(" ")}
                     >
                         {option.icon}
diff --git a/web/src/components/ui/base/select/select.tsx b/web/src/components/ui/base/select/select.tsx
index cfdf98fa8..bc6c06590 100644
--- a/web/src/components/ui/base/select/select.tsx
+++ b/web/src/components/ui/base/select/select.tsx
@@ -1,11 +1,5 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
-import {
-    Button as AriaButton,
-    ListBox as AriaListBox,
-    ListBoxItem as AriaListBoxItem,
-    Popover as AriaPopover,
-    Select as AriaSelect,
-} from "react-aria-components";
+import { Button as AriaButton, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, Popover as AriaPopover, Select as AriaSelect } from "react-aria-components";
 import { Check, ChevronDown, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -52,17 +46,7 @@ const TRIGGER_CLASS: Record<SelectSize, string> = {
     md: "h-8 text-sm",
 };
 
-export function Select<V extends string = string>({
-    value,
-    onChange,
-    options = [],
-    placeholder,
-    disabled = false,
-    allowClear = false,
-    size = "md",
-    ariaLabel,
-    className,
-}: SelectProps<V>) {
+export function Select<V extends string = string>({ value, onChange, options = [], placeholder, disabled = false, allowClear = false, size = "md", ariaLabel, className }: SelectProps<V>) {
     const triggerRef = useRef<HTMLButtonElement | null>(null);
     const popoverRef = useRef<HTMLDivElement | null>(null);
     const [open, setOpen] = useState(false);
@@ -122,9 +106,7 @@ export function Select<V extends string = string>({
                     TRIGGER_CLASS[size],
                 )}
             >
-                <span className={cn("min-w-0 flex-1 truncate text-left", displayLabel === undefined && "text-muted-foreground")}>
-                    {displayLabel === undefined ? placeholder : displayLabel}
-                </span>
+                <span className={cn("min-w-0 flex-1 truncate text-left", displayLabel === undefined && "text-muted-foreground")}>{displayLabel === undefined ? placeholder : displayLabel}</span>
                 {allowClear && value !== undefined && !disabled && (
                     <span
                         role="button"
@@ -140,25 +122,9 @@ export function Select<V extends string = string>({
                         <X className="size-3.5" />
                     </span>
                 )}
-                <ChevronDown
-                    aria-hidden="true"
-                    className={cn(
-                        "size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none",
-                        open && "rotate-180",
-                    )}
-                />
+                <ChevronDown aria-hidden="true" className={cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none", open && "rotate-180")} />
             </AriaButton>
-            <AriaPopover
-                ref={popoverRef}
-                isNonModal
-                placement="bottom"
-                offset={4}
-                style={popoverWidth ? { width: popoverWidth } : undefined}
-                className={cn(
-                    "z-50 rounded-lg border border-border bg-surface-strong p-1 shadow-lg",
-                    "ra-pop-in",
-                )}
-            >
+            <AriaPopover ref={popoverRef} isNonModal placement="bottom" offset={4} style={popoverWidth ? { width: popoverWidth } : undefined} className={cn("z-50 rounded-lg border border-border bg-surface-strong p-1 shadow-lg", "ra-pop-in")}>
                 <AriaListBox aria-label={ariaLabel ?? placeholder ?? "选项"} className="max-h-60 overflow-auto outline-none">
                     {options.map((option) => (
                         <AriaListBoxItem
diff --git a/web/src/components/ui/base/switch/switch.tsx b/web/src/components/ui/base/switch/switch.tsx
index 7f81962fb..5da612cc1 100644
--- a/web/src/components/ui/base/switch/switch.tsx
+++ b/web/src/components/ui/base/switch/switch.tsx
@@ -36,10 +36,7 @@ export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
 }
 
 /** 几何档：轨道尺寸与 thumb 行程（thumb 用 left-0.5 起始 + translate-x 档位） */
-const SWITCH_SIZE: Record<
-    "sm" | "md",
-    { root: string; thumbPlain: string; thumbText: string; hasTextRoot: string }
-> = {
+const SWITCH_SIZE: Record<"sm" | "md", { root: string; thumbPlain: string; thumbText: string; hasTextRoot: string }> = {
     sm: {
         root: "h-5 w-8 rounded-full",
         thumbPlain: "size-3.5 data-[state=on]:translate-x-3.5",
@@ -54,19 +51,7 @@ const SWITCH_SIZE: Record<
     },
 };
 
-export function Switch({
-    size = "md",
-    checked: checkedProp,
-    defaultChecked = false,
-    loading = false,
-    checkedChildren,
-    unCheckedChildren,
-    onChange,
-    disabled,
-    className,
-    "aria-label": ariaLabel,
-    ...props
-}: SwitchProps) {
+export function Switch({ size = "md", checked: checkedProp, defaultChecked = false, loading = false, checkedChildren, unCheckedChildren, onChange, disabled, className, "aria-label": ariaLabel, ...props }: SwitchProps) {
     const [innerChecked, setInnerChecked] = useState(defaultChecked);
     const controlled = checkedProp !== undefined;
     const checked = controlled ? checkedProp : innerChecked;
@@ -113,42 +98,24 @@ export function Switch({
             {unCheckedChildren !== undefined ? (
                 <span
                     aria-hidden="true"
-                    className={cn(
-                        "absolute top-1/2 right-1.5 -translate-y-1/2 text-xs leading-none font-medium transition-opacity motion-reduce:transition-none",
-                        checked ? "text-foreground/55 opacity-0" : "text-foreground/55 opacity-100",
-                    )}
+                    className={cn("absolute top-1/2 right-1.5 -translate-y-1/2 text-xs leading-none font-medium transition-opacity motion-reduce:transition-none", checked ? "text-foreground/55 opacity-0" : "text-foreground/55 opacity-100")}
                 >
                     {unCheckedChildren}
                 </span>
             ) : null}
             {/* 开态文案（左侧，反色） */}
             {checkedChildren !== undefined ? (
-                <span
-                    aria-hidden="true"
-                    className={cn(
-                        "absolute top-1/2 left-1.5 -translate-y-1/2 text-xs leading-none font-medium transition-opacity motion-reduce:transition-none",
-                        checked ? "text-background opacity-100" : "text-background opacity-0",
-                    )}
-                >
+                <span aria-hidden="true" className={cn("absolute top-1/2 left-1.5 -translate-y-1/2 text-xs leading-none font-medium transition-opacity motion-reduce:transition-none", checked ? "text-background opacity-100" : "text-background opacity-0")}>
                     {checkedChildren}
                 </span>
             ) : null}
             {/* thumb / loading 转圈 */}
             {loading ? (
-                <span
-                    aria-hidden="true"
-                    className={cn(
-                        "absolute inset-0 m-auto size-3.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent",
-                        checked ? "text-background" : "text-foreground/60",
-                    )}
-                />
+                <span aria-hidden="true" className={cn("absolute inset-0 m-auto size-3.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent", checked ? "text-background" : "text-foreground/60")} />
             ) : (
                 <span
                     aria-hidden="true"
-                    className={cn(
-                        "sc-switch-thumb absolute left-0.5 top-1/2 -translate-y-1/2 rounded-full bg-surface-strong border border-border/80 transition-transform duration-200 ease-out motion-reduce:transition-none",
-                        thumbClass,
-                    )}
+                    className={cn("sc-switch-thumb absolute left-0.5 top-1/2 -translate-y-1/2 rounded-full bg-surface-strong border border-border/80 transition-transform duration-200 ease-out motion-reduce:transition-none", thumbClass)}
                 />
             )}
         </button>
diff --git a/web/src/components/ui/base/tooltip/tooltip.tsx b/web/src/components/ui/base/tooltip/tooltip.tsx
index 9cf66087d..892d94698 100644
--- a/web/src/components/ui/base/tooltip/tooltip.tsx
+++ b/web/src/components/ui/base/tooltip/tooltip.tsx
@@ -43,15 +43,7 @@ export function Tooltip({ title, placement = "top", delay = 350, className, chil
     return (
         <TooltipTrigger delay={delay}>
             <span className="inline-flex">{children}</span>
-            <RACTooltip
-                placement={PLACEMENT_MAP[placement]}
-                offset={6}
-                className={cn(
-                    "z-50 max-w-64 rounded-md border border-border bg-surface-strong px-2 py-1 text-xs leading-relaxed text-foreground shadow-md",
-                    "ra-pop-in",
-                    className,
-                )}
-            >
+            <RACTooltip placement={PLACEMENT_MAP[placement]} offset={6} className={cn("z-50 max-w-64 rounded-md border border-border bg-surface-strong px-2 py-1 text-xs leading-relaxed text-foreground shadow-md", "ra-pop-in", className)}>
                 {title}
             </RACTooltip>
         </TooltipTrigger>
diff --git a/web/src/components/ui/product/callout/callout.tsx b/web/src/components/ui/product/callout/callout.tsx
index fb9601f9f..3c1ac0d22 100644
--- a/web/src/components/ui/product/callout/callout.tsx
+++ b/web/src/components/ui/product/callout/callout.tsx
@@ -42,33 +42,15 @@ export function Callout({ tone = "default", title, icon, action, onClose, closeL
     const resolved = tone === "default" ? "info" : tone;
     const Icon = icon ?? calloutIconByTone[resolved];
     return (
-        <div
-            data-slot="callout"
-            data-tone={resolved}
-            className={cn(
-                "flex items-start gap-2.5 rounded-lg border border-border bg-surface-secondary px-3.5 py-2.5",
-                className,
-            )}
-            {...props}
-        >
+        <div data-slot="callout" data-tone={resolved} className={cn("flex items-start gap-2.5 rounded-lg border border-border bg-surface-secondary px-3.5 py-2.5", className)} {...props}>
             <Icon
                 aria-hidden
                 strokeWidth={1.75}
-                className={cn(
-                    "mt-px size-4 shrink-0",
-                    resolved === "success" && "text-status-success",
-                    resolved === "warning" && "text-status-warning",
-                    resolved === "error" && "text-status-error",
-                    resolved === "info" && "text-muted-foreground",
-                )}
+                className={cn("mt-px size-4 shrink-0", resolved === "success" && "text-status-success", resolved === "warning" && "text-status-warning", resolved === "error" && "text-status-error", resolved === "info" && "text-muted-foreground")}
             />
             <div className="min-w-0 flex-1">
                 {title != null ? <p className="text-caption font-medium text-foreground">{title}</p> : null}
-                {children != null ? (
-                    <div className={cn("text-caption leading-relaxed text-muted-foreground", title != null && "mt-0.5")}>
-                        {children}
-                    </div>
-                ) : null}
+                {children != null ? <div className={cn("text-caption leading-relaxed text-muted-foreground", title != null && "mt-0.5")}>{children}</div> : null}
             </div>
             {action != null || onClose != null ? (
                 <div className="flex shrink-0 items-start gap-1">
diff --git a/web/src/components/ui/product/empty-state/empty-state.tsx b/web/src/components/ui/product/empty-state/empty-state.tsx
index 2280ef667..5b3139f16 100644
--- a/web/src/components/ui/product/empty-state/empty-state.tsx
+++ b/web/src/components/ui/product/empty-state/empty-state.tsx
@@ -38,15 +38,7 @@ export type EmptyStateProps = HTMLAttributes<HTMLDivElement> &
         action?: ReactNode;
     };
 
-export function EmptyState({
-    size,
-    icon: Icon = Inbox,
-    title,
-    description,
-    action,
-    className,
-    ...props
-}: EmptyStateProps) {
+export function EmptyState({ size, icon: Icon = Inbox, title, description, action, className, ...props }: EmptyStateProps) {
     return (
         <div data-slot="empty-state" className={cn(emptyStateVariants({ size }), className)} {...props}>
             <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-secondary/60">
diff --git a/web/src/components/workflow-field-mapping-editor.tsx b/web/src/components/workflow-field-mapping-editor.tsx
index c6404ef1b..7e7e28840 100644
--- a/web/src/components/workflow-field-mapping-editor.tsx
+++ b/web/src/components/workflow-field-mapping-editor.tsx
@@ -82,13 +82,7 @@ export function WorkflowFieldMappingEditor({ fields, onChange, disabled = false
                     <Button type="text" size="small" danger icon={<PowerOff className="size-3.5" />} disabled={disabled || enabledControllableCount === 0} onClick={() => updateAllFields(false)}>
                         关闭全部
                     </Button>
-                    <ToolButton
-                        size="sm"
-                        icon={<ListFilter />}
-                        active={showOnlyEnabled}
-                        label={showOnlyEnabled ? "显示全部" : "仅显示已开启"}
-                        onClick={() => setShowOnlyEnabled((current) => !current)}
-                    />
+                    <ToolButton size="sm" icon={<ListFilter />} active={showOnlyEnabled} label={showOnlyEnabled ? "显示全部" : "仅显示已开启"} onClick={() => setShowOnlyEnabled((current) => !current)} />
                 </div>
             </div>
             <Collapse
diff --git a/web/src/pages/admin/components/admin-ui.tsx b/web/src/pages/admin/components/admin-ui.tsx
index c9cf3afdb..aeeeb7f4b 100644
--- a/web/src/pages/admin/components/admin-ui.tsx
+++ b/web/src/pages/admin/components/admin-ui.tsx
@@ -140,16 +140,7 @@ export function AdminExportButton({
 }
 
 export function AdminTableEmpty({ filtered = false, title, description, action }: { filtered?: boolean; title?: string; description?: string; action?: ReactNode }) {
-    return (
-        <EmptyState
-            size="compact"
-            icon={SearchX}
-            title={title || (filtered ? "没有符合筛选条件的数据" : "暂无数据")}
-            description={description}
-            action={action}
-            className="min-h-40 w-full justify-center"
-        />
-    );
+    return <EmptyState size="compact" icon={SearchX} title={title || (filtered ? "没有符合筛选条件的数据" : "暂无数据")} description={description} action={action} className="min-h-40 w-full justify-center" />;
 }
 
 export function AdminFilterChip({ label, onRemove }: { label: ReactNode; onRemove: () => void }) {
diff --git a/web/src/pages/admin/logical-models/model-routing-capabilities.tsx b/web/src/pages/admin/logical-models/model-routing-capabilities.tsx
index 85c4e991f..7bf75ff18 100644
--- a/web/src/pages/admin/logical-models/model-routing-capabilities.tsx
+++ b/web/src/pages/admin/logical-models/model-routing-capabilities.tsx
@@ -312,7 +312,11 @@ export function CapabilityScopeEditor({ capability, sourceSpecs, value, onChange
                 </CapabilityBlock>
             ) : null}
 
-            {!sourceInputs.length && !sourceOptions.length && !source.operations?.length ? <Callout tone="info" title="该类型暂无额外能力参数">线路仍可按优先级和权重参与路由。</Callout> : null}
+            {!sourceInputs.length && !sourceOptions.length && !source.operations?.length ? (
+                <Callout tone="info" title="该类型暂无额外能力参数">
+                    线路仍可按优先级和权重参与路由。
+                </Callout>
+            ) : null}
         </div>
     );
 }
diff --git a/web/src/pages/admin/payments/payments-page.tsx b/web/src/pages/admin/payments/payments-page.tsx
index 103d75cd4..ba6b0cede 100644
--- a/web/src/pages/admin/payments/payments-page.tsx
+++ b/web/src/pages/admin/payments/payments-page.tsx
@@ -499,7 +499,9 @@ export default function AdminPaymentsPage() {
             }
             scroll
         >
-            <Callout className="my-4" tone="info" title="平台不提供支付退款">管理端仅提供查单、关单和对账。关单前始终先向渠道查单；对账发现已支付未入账订单时会幂等补发积分。</Callout>
+            <Callout className="my-4" tone="info" title="平台不提供支付退款">
+                管理端仅提供查单、关单和对账。关单前始终先向渠道查单；对账发现已支付未入账订单时会幂等补发积分。
+            </Callout>
             <Tabs
                 activeKey={activeTab}
                 onChange={setActiveTab}
@@ -612,7 +614,11 @@ export default function AdminPaymentsPage() {
             >
                 {providerDrawer ? (
                     <Form form={providerForm} layout="vertical" requiredMark="optional">
-                        <Callout className="mb-4" tone={providerDrawer.pluginEnabled ? "info" : "warning"} title={providerDrawer.pluginEnabled ? "密钥会加密保存，历史订单固定使用创建时的配置版本。" : "该宿主插件当前已在插件管理中停用；保存配置后仍需开放插件才能接受新订单。"} />
+                        <Callout
+                            className="mb-4"
+                            tone={providerDrawer.pluginEnabled ? "info" : "warning"}
+                            title={providerDrawer.pluginEnabled ? "密钥会加密保存，历史订单固定使用创建时的配置版本。" : "该宿主插件当前已在插件管理中停用；保存配置后仍需开放插件才能接受新订单。"}
+                        />
                         <Form.Item name="enabled" label="渠道配置启用" valuePropName="checked">
                             <Switch />
                         </Form.Item>
@@ -700,7 +706,11 @@ export default function AdminPaymentsPage() {
                     setDetailItems([]);
                 }}
             >
-                {detailRun?.error ? <Callout className="mb-4" tone="error" title="对账执行失败">{detailRun.error}</Callout> : null}
+                {detailRun?.error ? (
+                    <Callout className="mb-4" tone="error" title="对账执行失败">
+                        {detailRun.error}
+                    </Callout>
+                ) : null}
                 <AdminDataTable
                     toolbar={
                         <Select
diff --git a/web/src/pages/settings/comfyui-bridge-settings-pane.tsx b/web/src/pages/settings/comfyui-bridge-settings-pane.tsx
index 6d71ead9c..359308bd3 100644
--- a/web/src/pages/settings/comfyui-bridge-settings-pane.tsx
+++ b/web/src/pages/settings/comfyui-bridge-settings-pane.tsx
@@ -239,8 +239,8 @@ export function ComfyUIBridgeSettingsPane() {
                                     <h4 className="text-sm font-semibold">安装 Bridge</h4>
                                     <p className="mt-1 text-xs text-foreground/60">在能访问 ComfyUI 的机器上运行；Windows 使用独立程序，Linux 使用对应架构的原生程序，不需要安装 Node.js、npm 或项目源码。</p>
                                 </div>
-<SegmentedControl
-size="sm"
+                                <SegmentedControl
+                                    size="sm"
                                     value={bridgePlatform}
                                     options={[
                                         { label: "Windows", value: "windows" },
@@ -252,8 +252,8 @@ size="sm"
                             {bridgePlatform === "linux" ? (
                                 <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-foreground/65">
                                     <span>Linux 架构：</span>
-<SegmentedControl
-size="sm"
+                                    <SegmentedControl
+                                        size="sm"
                                         value={linuxArchitecture}
                                         options={[
                                             { label: "x64", value: "amd64" },
@@ -372,7 +372,7 @@ size="sm"
                                 <Input value={config.workflowId} placeholder="workflow.json" onChange={(event) => update({ workflowId: event.target.value })} onBlur={(event) => selectWorkflow(event.target.value.trim())} />
                             </Form.Item>
                             <div className="workflow-workspace-tabs lg:col-span-12">
-<SegmentedControl
+                                <SegmentedControl
                                     block
                                     value={workspaceMode}
                                     options={[
diff --git a/web/src/pages/settings/diagnostics-panel.tsx b/web/src/pages/settings/diagnostics-panel.tsx
index 7ca43f2a3..edcc0d72c 100644
--- a/web/src/pages/settings/diagnostics-panel.tsx
+++ b/web/src/pages/settings/diagnostics-panel.tsx
@@ -99,9 +99,18 @@ export default function DiagnosticsPanel({ taskId, projectId }: DiagnosticsPanel
                             <span className="rounded-full bg-foreground/[.045] px-2.5 py-1 text-[var(--fs-tiny)] font-medium text-foreground/48">最长 24 小时</span>
                         </div>
                         <div className="mt-4 grid gap-4 md:grid-cols-[minmax(0,230px)_minmax(0,1fr)] md:items-end">
-                             <label className="block">
+                            <label className="block">
                                 <span className="mb-2 block text-xs font-semibold text-foreground/65">时间范围</span>
-                                 <Select ariaLabel="时间范围" className="w-full" value={range} options={rangeOptions} onChange={(value) => { const next = rangeOptions.find((option) => option.value === value)?.value; if (next) setRange(next); }} />
+                                <Select
+                                    ariaLabel="时间范围"
+                                    className="w-full"
+                                    value={range}
+                                    options={rangeOptions}
+                                    onChange={(value) => {
+                                        const next = rangeOptions.find((option) => option.value === value)?.value;
+                                        if (next) setRange(next);
+                                    }}
+                                />
                             </label>
                             <div className="rounded-lg border border-border/55 bg-foreground/[.025] px-3.5 py-3" aria-live="polite">
                                 <div className="flex items-center gap-2 text-sm font-medium text-foreground/78">
diff --git a/web/src/pages/settings/local-cli-settings.tsx b/web/src/pages/settings/local-cli-settings.tsx
index fadaeba22..30d91c667 100644
--- a/web/src/pages/settings/local-cli-settings.tsx
+++ b/web/src/pages/settings/local-cli-settings.tsx
@@ -194,7 +194,12 @@ export function LocalCliSettings() {
                                 <h2 id="dreamina-cli-title" className="text-base font-semibold">
                                     Dreamina CLI
                                 </h2>
-                                <StatusBadge variant="filled" className="m-0" tone={presentation.dreamina.tone === "processing" ? "loading" : presentation.dreamina.tone === "default" ? "neutral" : presentation.dreamina.tone} label={presentation.dreamina.label} />
+                                <StatusBadge
+                                    variant="filled"
+                                    className="m-0"
+                                    tone={presentation.dreamina.tone === "processing" ? "loading" : presentation.dreamina.tone === "default" ? "neutral" : presentation.dreamina.tone}
+                                    label={presentation.dreamina.label}
+                                />
                                 {status?.version ? <Tag className="m-0">v{status.version}</Tag> : null}
                                 {presentation.dreamina.creditLabel ? (
                                     <Tag color="blue" className="m-0">
diff --git a/web/src/pages/settings/runninghub-settings-pane.tsx b/web/src/pages/settings/runninghub-settings-pane.tsx
index fd2b866f1..c272efc83 100644
--- a/web/src/pages/settings/runninghub-settings-pane.tsx
+++ b/web/src/pages/settings/runninghub-settings-pane.tsx
@@ -261,7 +261,7 @@ export function RunningHubSettingsPane() {
                     />
                 </Form.Item>
                 <Form.Item label="类型" className="mb-0 lg:col-span-3">
-<SegmentedControl
+                    <SegmentedControl
                         block
                         value={kind}
                         options={[
@@ -296,7 +296,7 @@ export function RunningHubSettingsPane() {
                     </div>
                 </Form.Item>
                 <div className="workflow-workspace-tabs lg:col-span-12">
-<SegmentedControl
+                    <SegmentedControl
                         block
                         value={workspaceMode}
                         options={[