From 2a56a0d8893f2c068692a85a797cd57dec2b8aec Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 10 Nov 2025 15:42:36 +0800
Subject: [PATCH] style(usage-script): unify form input styles with shadcn/ui
 components

Replace native HTML input elements with shadcn/ui Input and FormLabel
components to ensure consistent styling across the application.

Changes:
- Import Input, FormLabel, Eye, and EyeOff components
- Replace all credential input fields with Input component
- Add show/hide toggle buttons for password fields (API Key, Access Token)
- Replace label/span elements with FormLabel component
- Update timeout and auto-query interval inputs to use Input component
- Improve spacing consistency (space-y-4 for credential config)
- Add proper id attributes for accessibility
- Use muted-foreground for hint text

The form now matches the styling of provider configuration forms
throughout the application.
---
 src/components/UsageScriptModal.tsx | 173 +++++++++++++++++-----------
 1 file changed, 104 insertions(+), 69 deletions(-)

diff --git a/src/components/UsageScriptModal.tsx b/src/components/UsageScriptModal.tsx
index ce4ed5b..899b5ba 100644
--- a/src/components/UsageScriptModal.tsx
+++ b/src/components/UsageScriptModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Play, Wand2 } from "lucide-react";
+import { Play, Wand2, Eye, EyeOff } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { Provider, UsageScript } from "@/types";
@@ -16,6 +16,8 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FormLabel } from "@/components/ui/form";
 
 interface UsageScriptModalProps {
   provider: Provider;
@@ -140,6 +142,10 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
     },
   );
 
+  // 控制 API Key 的显示/隐藏
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [showAccessToken, setShowAccessToken] = useState(false);
+
   const handleSave = () => {
     // 验证脚本格式
     if (script.enabled && !script.code.trim()) {
@@ -292,9 +298,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
             <>
               {/* 预设模板选择 */}
               <div>
-                <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-gray-100">
+                <FormLabel className="mb-2">
                   {t("usageScript.presetTemplate")}
-                </label>
+                </FormLabel>
                 <div className="flex gap-2">
                   {Object.keys(PRESET_TEMPLATES).map((name) => {
                     const isSelected = selectedTemplate === name;
@@ -317,93 +323,122 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
               {/* 凭证配置区域：通用和 NewAPI 模板显示 */}
               {shouldShowCredentialsConfig && (
-                <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                <div className="space-y-4 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
+                  <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
                     {t("usageScript.credentialsConfig")}
                   </h4>
 
                   {/* 通用模板：显示 apiKey + baseUrl */}
                   {selectedTemplate === TEMPLATE_KEYS.GENERAL && (
                     <>
-                      <label className="block">
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                      <div className="space-y-2">
+                        <FormLabel htmlFor="usage-api-key">
                           API Key
-                        </span>
-                        <input
-                          type="password"
-                          value={script.apiKey || ""}
-                          onChange={(e) =>
-                            setScript({ ...script, apiKey: e.target.value })
-                          }
-                          placeholder="sk-xxxxx"
-                          className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
-                        />
-                      </label>
+                        </FormLabel>
+                        <div className="relative">
+                          <Input
+                            id="usage-api-key"
+                            type={showApiKey ? "text" : "password"}
+                            value={script.apiKey || ""}
+                            onChange={(e) =>
+                              setScript({ ...script, apiKey: e.target.value })
+                            }
+                            placeholder="sk-xxxxx"
+                            autoComplete="off"
+                          />
+                          {script.apiKey && (
+                            <button
+                              type="button"
+                              onClick={() => setShowApiKey(!showApiKey)}
+                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                              aria-label={showApiKey ? t("apiKeyInput.hide") : t("apiKeyInput.show")}
+                            >
+                              {showApiKey ? <EyeOff size={16} /> : <Eye size={16} />}
+                            </button>
+                          )}
+                        </div>
+                      </div>
 
-                      <label className="block">
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                      <div className="space-y-2">
+                        <FormLabel htmlFor="usage-base-url">
                           Base URL
-                        </span>
-                        <input
+                        </FormLabel>
+                        <Input
+                          id="usage-base-url"
                           type="text"
                           value={script.baseUrl || ""}
                           onChange={(e) =>
                             setScript({ ...script, baseUrl: e.target.value })
                           }
                           placeholder="https://api.example.com"
-                          className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
+                          autoComplete="off"
                         />
-                      </label>
+                      </div>
                     </>
                   )}
 
                   {/* NewAPI 模板：显示 baseUrl + accessToken + userId */}
                   {selectedTemplate === TEMPLATE_KEYS.NEW_API && (
                     <>
-                      <label className="block">
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                      <div className="space-y-2">
+                        <FormLabel htmlFor="usage-newapi-base-url">
                           Base URL
-                        </span>
-                        <input
+                        </FormLabel>
+                        <Input
+                          id="usage-newapi-base-url"
                           type="text"
                           value={script.baseUrl || ""}
                           onChange={(e) =>
                             setScript({ ...script, baseUrl: e.target.value })
                           }
                           placeholder="https://api.newapi.com"
-                          className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
+                          autoComplete="off"
                         />
-                      </label>
+                      </div>
 
-                      <label className="block">
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                      <div className="space-y-2">
+                        <FormLabel htmlFor="usage-access-token">
                           {t("usageScript.accessToken")}
-                        </span>
-                        <input
-                          type="text"
-                          value={script.accessToken || ""}
-                          onChange={(e) =>
-                            setScript({ ...script, accessToken: e.target.value })
-                          }
-                          placeholder={t("usageScript.accessTokenPlaceholder")}
-                          className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
-                        />
-                      </label>
+                        </FormLabel>
+                        <div className="relative">
+                          <Input
+                            id="usage-access-token"
+                            type={showAccessToken ? "text" : "password"}
+                            value={script.accessToken || ""}
+                            onChange={(e) =>
+                              setScript({ ...script, accessToken: e.target.value })
+                            }
+                            placeholder={t("usageScript.accessTokenPlaceholder")}
+                            autoComplete="off"
+                          />
+                          {script.accessToken && (
+                            <button
+                              type="button"
+                              onClick={() => setShowAccessToken(!showAccessToken)}
+                              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                              aria-label={showAccessToken ? t("apiKeyInput.hide") : t("apiKeyInput.show")}
+                            >
+                              {showAccessToken ? <EyeOff size={16} /> : <Eye size={16} />}
+                            </button>
+                          )}
+                        </div>
+                      </div>
 
-                      <label className="block">
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                      <div className="space-y-2">
+                        <FormLabel htmlFor="usage-user-id">
                           {t("usageScript.userId")}
-                        </span>
-                        <input
+                        </FormLabel>
+                        <Input
+                          id="usage-user-id"
                           type="text"
                           value={script.userId || ""}
                           onChange={(e) =>
                             setScript({ ...script, userId: e.target.value })
                           }
                           placeholder={t("usageScript.userIdPlaceholder")}
-                          className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
+                          autoComplete="off"
                         />
-                      </label>
+                      </div>
                     </>
                   )}
                 </div>
@@ -411,9 +446,9 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
               {/* 脚本编辑器 */}
               <div>
-                <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-gray-100">
+                <FormLabel className="mb-2">
                   {t("usageScript.queryScript")}
-                </label>
+                </FormLabel>
                 <JsonEditor
                   value={script.code}
                   onChange={(code) => setScript({ ...script, code })}
@@ -430,14 +465,15 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
               {/* 配置选项 */}
               <div className="grid grid-cols-2 gap-4">
-                <label className="block">
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                <div className="space-y-2">
+                  <FormLabel htmlFor="usage-timeout">
                     {t("usageScript.timeoutSeconds")}
-                  </span>
-                  <input
+                  </FormLabel>
+                  <Input
+                    id="usage-timeout"
                     type="number"
-                    min="2"
-                    max="30"
+                    min={2}
+                    max={30}
                     value={script.timeout || 10}
                     onChange={(e) =>
                       setScript({
@@ -445,20 +481,20 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                         timeout: parseInt(e.target.value),
                       })
                     }
-                    className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                   />
-                </label>
+                </div>
 
                 {/* 🆕 自动查询间隔 */}
-                <label className="block">
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                <div className="space-y-2">
+                  <FormLabel htmlFor="usage-auto-interval">
                     {t("usageScript.autoQueryInterval")}
-                  </span>
-                  <input
+                  </FormLabel>
+                  <Input
+                    id="usage-auto-interval"
                     type="number"
-                    min="0"
-                    max="1440"
-                    step="1"
+                    min={0}
+                    max={1440}
+                    step={1}
                     value={script.autoQueryInterval || 0}
                     onChange={(e) =>
                       setScript({
@@ -466,12 +502,11 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                         autoQueryInterval: parseInt(e.target.value) || 0,
                       })
                     }
-                    className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                   />
-                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  <p className="text-xs text-muted-foreground">
                     {t("usageScript.autoQueryIntervalHint")}
                   </p>
-                </label>
+                </div>
               </div>
 
               {/* 脚本说明 */}