From be155c857e9fa7f2b0872739b9485241a3b1355c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 10 Nov 2025 16:01:28 +0800
Subject: [PATCH] refactor(usage-script): replace native checkbox with Switch
 component

Upgrade the enable toggle from native checkbox to shadcn/ui Switch component
for better UX and UI consistency with settings page.

**Improvements**:
1. Use modern toggle UI (Switch) instead of traditional checkbox
2. Adopt the same layout pattern as settings page (ToggleRow style)
3. Add bordered container with proper spacing for better visual hierarchy
4. Maintain full accessibility support (aria-label)

**Layout changes**:
- Before: Simple label + checkbox horizontal layout
- After: Bordered container, label on left, Switch on right, vertically centered
---
 src/components/UsageScriptModal.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/UsageScriptModal.tsx b/src/components/UsageScriptModal.tsx
index 4e37dd2..c22a7ad 100644
--- a/src/components/UsageScriptModal.tsx
+++ b/src/components/UsageScriptModal.tsx
@@ -18,6 +18,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 
 interface UsageScriptModalProps {
   provider: Provider;
@@ -280,19 +281,20 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
         {/* Content - Scrollable */}
         <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
           {/* 启用开关 */}
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
+          <div className="flex items-center justify-between gap-4 rounded-lg border border-border-default p-4">
+            <div className="space-y-1">
+              <p className="text-sm font-medium leading-none">
+                {t("usageScript.enableUsageQuery")}
+              </p>
+            </div>
+            <Switch
               checked={script.enabled}
-              onChange={(e) =>
-                setScript({ ...script, enabled: e.target.checked })
+              onCheckedChange={(checked) =>
+                setScript({ ...script, enabled: checked })
               }
-              className="w-4 h-4"
+              aria-label={t("usageScript.enableUsageQuery")}
             />
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-              {t("usageScript.enableUsageQuery")}
-            </span>
-          </label>
+          </div>
 
           {script.enabled && (
             <>