From 2b5913ce0b5b775f86f3900e9f68d80a9358f3e9 Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Thu, 26 Feb 2026 17:05:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E8=80=85=E6=A8=A1=E5=BC=8F=E7=BC=96=E8=BE=91=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/api-tokens/index.tsx | 64 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/web/src/pages/api-tokens/index.tsx b/web/src/pages/api-tokens/index.tsx
index cfc47da..9409875 100644
--- a/web/src/pages/api-tokens/index.tsx
+++ b/web/src/pages/api-tokens/index.tsx
@@ -79,6 +79,7 @@ export function APITokensPage() {
   const [description, setDescription] = useState('');
   const [projectID, setProjectID] = useState<string>('0');
   const [expiresAt, setExpiresAt] = useState('');
+  const [devMode, setDevMode] = useState(false);
   const [showProjectPicker, setShowProjectPicker] = useState(false);
 
   const resetForm = () => {
@@ -86,6 +87,7 @@ export function APITokensPage() {
     setDescription('');
     setProjectID('0');
     setExpiresAt('');
+    setDevMode(false);
     setShowProjectPicker(false);
   };
 
@@ -121,6 +123,7 @@ export function APITokensPage() {
           description,
           projectID: parseInt(projectID) || 0,
           expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
+          devMode,
         },
       },
       {
@@ -139,13 +142,6 @@ export function APITokensPage() {
     });
   };
 
-  const handleToggleDevMode = (token: APIToken) => {
-    updateToken.mutate({
-      id: token.id,
-      data: { devMode: !token.devMode },
-    });
-  };
-
   const handleDelete = () => {
     if (!deletingToken) return;
     deleteToken.mutate(deletingToken.id, {
@@ -159,6 +155,7 @@ export function APITokensPage() {
     setDescription(token.description);
     setProjectID(token.projectID.toString());
     setExpiresAt(token.expiresAt ? token.expiresAt.split('T')[0] : '');
+    setDevMode(!!token.devMode);
   };
 
   const handleCopyToken = async () => {
@@ -268,7 +265,6 @@ export function APITokensPage() {
                       <TableHead>{t('apiTokens.tokenPrefix')}</TableHead>
                       <TableHead>{t('apiTokens.project')}</TableHead>
                       <TableHead>{t('common.status')}</TableHead>
-                      <TableHead>{t('apiTokens.devMode')}</TableHead>
                       <TableHead>{t('apiTokens.usage')}</TableHead>
                       <TableHead>{t('apiTokens.lastUsed')}</TableHead>
                       <TableHead className="text-right">{t('common.actions')}</TableHead>
@@ -332,27 +328,6 @@ export function APITokensPage() {
                             )}
                           </div>
                         </TableCell>
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            <Switch
-                              checked={!!token.devMode}
-                              onCheckedChange={() => handleToggleDevMode(token)}
-                              disabled={updateToken.isPending}
-                            />
-                            {token.devMode ? (
-                              <Badge
-                                variant="default"
-                                className="text-xs bg-blue-500/10 text-blue-500 border-blue-500/20"
-                              >
-                                {t('apiTokens.devModeEnabled')}
-                              </Badge>
-                            ) : (
-                              <Badge variant="secondary" className="text-xs">
-                                {t('apiTokens.devModeDisabled')}
-                              </Badge>
-                            )}
-                          </div>
-                        </TableCell>
                         <TableCell>
                           <div className="flex items-center gap-1 text-sm text-text-secondary">
                             <Hash className="h-3 w-3" />
@@ -503,7 +478,12 @@ export function APITokensPage() {
       {/* Edit Dialog */}
       <Dialog
         open={!!editingToken}
-        onOpenChange={(open: boolean) => !open && setEditingToken(null)}
+        onOpenChange={(open: boolean) => {
+          if (!open) {
+            setEditingToken(null);
+            resetForm();
+          }
+        }}
       >
         <DialogContent>
           <DialogHeader>
@@ -567,8 +547,30 @@ export function APITokensPage() {
                 min={new Date().toISOString().split('T')[0]}
               />
             </div>
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-medium text-text-secondary uppercase tracking-wider">
+                {t('apiTokens.devMode')}
+              </label>
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={devMode}
+                  onCheckedChange={setDevMode}
+                  disabled={updateToken.isPending}
+                />
+                <span className="text-xs text-text-muted">
+                  {devMode ? t('apiTokens.devModeEnabled') : t('apiTokens.devModeDisabled')}
+                </span>
+              </div>
+            </div>
             <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setEditingToken(null)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setEditingToken(null);
+                  resetForm();
+                }}
+              >
                 {t('common.cancel')}
               </Button>
               <Button type="submit" disabled={updateToken.isPending || !name}>

From 0775a27f64e3fa2337229a4a17859a9ee91ae8fc Mon Sep 17 00:00:00 2001
From: ymkiux <3255284101@qq.com>
Date: Thu, 26 Feb 2026 17:43:29 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=8F=AF=E8=AE=BF=E9=97=AE=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/api-tokens/index.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/api-tokens/index.tsx b/web/src/pages/api-tokens/index.tsx
index 9409875..ae6a139 100644
--- a/web/src/pages/api-tokens/index.tsx
+++ b/web/src/pages/api-tokens/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -73,6 +73,7 @@ export function APITokensPage() {
     name: string;
   } | null>(null);
   const [copied, setCopied] = useState(false);
+  const devModeSwitchId = useId();
 
   // Form state
   const [name, setName] = useState('');
@@ -91,6 +92,11 @@ export function APITokensPage() {
     setShowProjectPicker(false);
   };
 
+  const closeEditDialog = () => {
+    setEditingToken(null);
+    resetForm();
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     createToken.mutate(
@@ -127,10 +133,7 @@ export function APITokensPage() {
         },
       },
       {
-        onSuccess: () => {
-          setEditingToken(null);
-          resetForm();
-        },
+        onSuccess: () => closeEditDialog(),
       },
     );
   };
@@ -480,8 +483,7 @@ export function APITokensPage() {
         open={!!editingToken}
         onOpenChange={(open: boolean) => {
           if (!open) {
-            setEditingToken(null);
-            resetForm();
+            closeEditDialog();
           }
         }}
       >
@@ -548,11 +550,15 @@ export function APITokensPage() {
               />
             </div>
             <div className="flex items-center justify-between">
-              <label className="text-xs font-medium text-text-secondary uppercase tracking-wider">
+              <label
+                htmlFor={devModeSwitchId}
+                className="text-xs font-medium text-text-secondary uppercase tracking-wider"
+              >
                 {t('apiTokens.devMode')}
               </label>
               <div className="flex items-center gap-2">
                 <Switch
+                  id={devModeSwitchId}
                   checked={devMode}
                   onCheckedChange={setDevMode}
                   disabled={updateToken.isPending}
@@ -566,10 +572,7 @@ export function APITokensPage() {
               <Button
                 type="button"
                 variant="outline"
-                onClick={() => {
-                  setEditingToken(null);
-                  resetForm();
-                }}
+                onClick={closeEditDialog}
               >
                 {t('common.cancel')}
               </Button>