From 3653474355a32f7c7dd354a0a018fad002a5f1fc Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Fri, 10 Jul 2026 20:58:45 +0800
Subject: [PATCH] refactor(ui): add size variants to Switch and consolidate
 styles

Introduce sm/md/lg sizes on the Switch component driven by CSS custom
properties, move switch styling into a dedicated switch.css, and remove
the duplicated overrides from styles.css and ToolbarCustomizeDialog.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/ui/switch.css         | 64 +++++++++++++++++++
 frontend/src/components/ui/switch.tsx         | 11 +++-
 .../ToolbarCustomizeDialog/index.css          | 20 ------
 .../ToolbarCustomizeDialog/index.tsx          |  2 +-
 frontend/src/ui/styles.css                    | 27 --------
 5 files changed, 74 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/ui/switch.css

diff --git a/frontend/src/components/ui/switch.css b/frontend/src/components/ui/switch.css
new file mode 100644
index 0000000..729e659
--- /dev/null
+++ b/frontend/src/components/ui/switch.css
@@ -0,0 +1,64 @@
+.ui-switch {
+  --ui-switch-width: 46px;
+  --ui-switch-height: 26px;
+  --ui-switch-thumb-size: 18px;
+  --ui-switch-inset: 4px;
+  position: relative;
+  width: var(--ui-switch-width);
+  min-width: var(--ui-switch-width);
+  height: var(--ui-switch-height);
+  display: inline-flex;
+  flex: 0 0 var(--ui-switch-width);
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  outline: none;
+  appearance: none;
+  color: inherit;
+  background: #d8dde5;
+  vertical-align: middle;
+  transition: background-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.ui-switch[data-size="sm"] {
+  --ui-switch-width: 32px;
+  --ui-switch-height: 18px;
+  --ui-switch-thumb-size: 14px;
+  --ui-switch-inset: 2px;
+}
+
+.ui-switch[data-size="md"] {
+  --ui-switch-width: 36px;
+  --ui-switch-height: 20px;
+  --ui-switch-thumb-size: 14px;
+  --ui-switch-inset: 3px;
+}
+
+.ui-switch[data-state="checked"] {
+  background: #30343a;
+}
+
+.ui-switch:focus-visible {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b95a5;
+}
+
+.ui-switch-thumb {
+  width: var(--ui-switch-thumb-size);
+  height: var(--ui-switch-thumb-size);
+  display: block;
+  flex: 0 0 var(--ui-switch-thumb-size);
+  margin: 0;
+  transform: translateX(var(--ui-switch-inset));
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2);
+  pointer-events: none;
+  transition: transform 0.18s ease;
+}
+
+.ui-switch[data-state="checked"] .ui-switch-thumb {
+  transform: translateX(calc(var(--ui-switch-width) - var(--ui-switch-thumb-size) - var(--ui-switch-inset)));
+}
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index cafa507..dcc424d 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -2,10 +2,17 @@
 
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type { ComponentProps } from "react";
+import "./switch.css";
 
-export function Switch({ className = "", ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+export type SwitchSize = "sm" | "md" | "lg";
+
+type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: SwitchSize;
+};
+
+export function Switch({ className = "", size = "lg", ...props }: SwitchProps) {
   return (
-    <SwitchPrimitive.Root className={["ui-switch", className].filter(Boolean).join(" ")} {...props}>
+    <SwitchPrimitive.Root className={["ui-switch", className].filter(Boolean).join(" ")} data-size={size} {...props}>
       <SwitchPrimitive.Thumb className="ui-switch-thumb" />
     </SwitchPrimitive.Root>
   );
diff --git a/frontend/src/ui/components/ToolbarCustomizeDialog/index.css b/frontend/src/ui/components/ToolbarCustomizeDialog/index.css
index 0c37968..08bff18 100644
--- a/frontend/src/ui/components/ToolbarCustomizeDialog/index.css
+++ b/frontend/src/ui/components/ToolbarCustomizeDialog/index.css
@@ -424,26 +424,6 @@
   cursor: pointer;
 }
 
-.toolbar-customize-switch .ui-switch {
-  width: 32px;
-  height: 18px;
-  background: #d8dde5;
-}
-
-.toolbar-customize-switch .ui-switch[data-state="checked"] {
-  background: #303030;
-}
-
-.toolbar-customize-switch .ui-switch-thumb {
-  width: 14px;
-  height: 14px;
-  transform: translateX(2px);
-}
-
-.toolbar-customize-switch .ui-switch[data-state="checked"] .ui-switch-thumb {
-  transform: translateX(16px);
-}
-
 .toolbar-customize-footer-actions {
   display: inline-flex;
   align-items: center;
diff --git a/frontend/src/ui/components/ToolbarCustomizeDialog/index.tsx b/frontend/src/ui/components/ToolbarCustomizeDialog/index.tsx
index b218306..07d193f 100644
--- a/frontend/src/ui/components/ToolbarCustomizeDialog/index.tsx
+++ b/frontend/src/ui/components/ToolbarCustomizeDialog/index.tsx
@@ -254,7 +254,7 @@ export function ToolbarCustomizeDialog<TId extends string>({
 
         <footer className="toolbar-customize-footer">
           <label className="toolbar-customize-switch">
-            <Switch checked={draftShowToolNames} onCheckedChange={setDraftShowToolNames} />
+            <Switch size="sm" checked={draftShowToolNames} onCheckedChange={setDraftShowToolNames} />
             <span>{t("showToolNames")}</span>
           </label>
           <div className="toolbar-customize-footer-actions">
diff --git a/frontend/src/ui/styles.css b/frontend/src/ui/styles.css
index 0e8dd96..ea6a1b3 100644
--- a/frontend/src/ui/styles.css
+++ b/frontend/src/ui/styles.css
@@ -292,33 +292,6 @@ button:disabled {
   cursor: pointer;
 }
 
-.ui-switch {
-  position: relative;
-  width: 46px;
-  height: 26px;
-  border: 0;
-  border-radius: 999px;
-  background: #d7dce4;
-}
-
-.ui-switch[data-state="checked"] {
-  background: #303846;
-}
-
-.ui-switch-thumb {
-  display: block;
-  width: 18px;
-  height: 18px;
-  transform: translateX(4px);
-  border-radius: 999px;
-  background: #fff;
-  transition: transform 0.18s ease;
-}
-
-.ui-switch[data-state="checked"] .ui-switch-thumb {
-  transform: translateX(24px);
-}
-
 .model-tabs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);