From 37d4c9b48d67cc39b1e7de0b1e445b2f6f29b21c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 5 Sep 2025 21:26:01 +0800
Subject: [PATCH] style: format frontend code and improve component structure

---
 src/App.tsx                     |  5 +----
 src/components/AppSwitcher.css  | 15 +++++++++----
 src/components/AppSwitcher.tsx  |  2 +-
 src/components/ProviderForm.tsx | 38 ++++++++++++++++++++++-----------
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 335fa23..1010920 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -179,10 +179,7 @@ function App() {
       <header className="app-header">
         <h1>CC Switch</h1>
         <div className="app-tabs">
-          <AppSwitcher
-            activeApp={activeApp}
-            onSwitch={setActiveApp}
-          />
+          <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
         </div>
         <div className="header-actions">
           <button className="add-btn" onClick={() => setIsAddModalOpen(true)}>
diff --git a/src/components/AppSwitcher.css b/src/components/AppSwitcher.css
index 4b4bc79..8dc9906 100644
--- a/src/components/AppSwitcher.css
+++ b/src/components/AppSwitcher.css
@@ -34,7 +34,7 @@
 .switcher-pill.active {
   background: rgba(255, 255, 255, 0.15);
   color: white;
-  box-shadow: 
+  box-shadow:
     inset 0 1px 3px rgba(0, 0, 0, 0.1),
     0 1px 0 rgba(255, 255, 255, 0.1);
 }
@@ -61,6 +61,13 @@
 }
 
 @keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.2); opacity: 0.8; }
-}
\ No newline at end of file
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 38b94aa..e70b3cf 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -33,4 +33,4 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index 1288f86..6c188d0 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -74,7 +74,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   const [disableCoAuthored, setDisableCoAuthored] = useState(false);
   // -1 表示自定义，null 表示未选择，>= 0 表示预设索引
   const [selectedPreset, setSelectedPreset] = useState<number | null>(
-    showPresets ? -1 : null
+    showPresets ? -1 : null,
   );
   const [apiKey, setApiKey] = useState("");
 
@@ -302,7 +302,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   // 根据当前配置决定是否展示 API Key 输入框
   // 自定义模式(-1)不显示独立的 API Key 输入框
   const showApiKey =
-    (selectedPreset !== null && selectedPreset !== -1) || 
+    (selectedPreset !== null && selectedPreset !== -1) ||
     (!showPresets && hasApiKeyField(formData.settingsConfig));
 
   // 判断当前选中的预设是否是官方
@@ -322,7 +322,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   };
   // 自定义模式(-1)不显示独立的 API Key 输入框
   const showCodexApiKey =
-    (selectedCodexPreset !== null && selectedCodexPreset !== -1) || 
+    (selectedCodexPreset !== null && selectedCodexPreset !== -1) ||
     (!showPresets && getCodexAuthApiKey(codexAuth) !== "");
   const isCodexOfficialPreset =
     selectedCodexPreset !== null &&
@@ -409,14 +409,20 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   })}
                 </div>
                 {selectedPreset === -1 && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     手动配置供应商，需要填写完整的配置信息
                   </small>
                 )}
                 {selectedPreset !== -1 && selectedPreset !== null && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
-                    {isOfficialPreset 
-                      ? "Claude 官方登录，不需要填写 API Key" 
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
+                    {isOfficialPreset
+                      ? "Claude 官方登录，不需要填写 API Key"
                       : "使用预设配置，只需填写 API Key"}
                   </small>
                 )}
@@ -450,14 +456,20 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   ))}
                 </div>
                 {selectedCodexPreset === -1 && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     手动配置供应商，需要填写完整的配置信息
                   </small>
                 )}
                 {selectedCodexPreset !== -1 && selectedCodexPreset !== null && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
-                    {isCodexOfficialPreset 
-                      ? "Codex 官方登录，不需要填写 API Key" 
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
+                    {isCodexOfficialPreset
+                      ? "Codex 官方登录，不需要填写 API Key"
                       : "使用预设配置，只需填写 API Key"}
                   </small>
                 )}
@@ -525,7 +537,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   }
                   disabled={isCodexOfficialPreset}
                   required={
-                    selectedCodexPreset !== null && selectedCodexPreset >= 0 && !isCodexOfficialPreset
+                    selectedCodexPreset !== null &&
+                    selectedCodexPreset >= 0 &&
+                    !isCodexOfficialPreset
                   }
                   autoComplete="off"
                   style={