From 5b20ebb7b0854a06c0a673a9b9b7e4e2ce3f1e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E7=91=BE?= <shijinn520@gmail.com>
Date: Fri, 30 Jan 2026 18:51:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20webui=20=E9=9A=8F=E6=9C=BAtoken=E4=BB=85?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E4=B8=8D=E4=BC=9A=E8=A2=ABurl=E7=BC=96?=
 =?UTF-8?q?=E7=A0=81=E7=9A=84=E9=9A=8F=E6=9C=BA=E5=AD=97=E7=AC=A6=20(#1565?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: webui 随机token仅生成不会被url编码的随机字符

* fix: 移除调试模块中的encodeURIComponent
---
 .../components/network_edit/generic_form.tsx  |   2 +-
 .../src/pages/dashboard/extension.tsx         | 114 +++++++++---------
 2 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx b/packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx
index bcc70a0a..33840659 100644
--- a/packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx
+++ b/packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx
@@ -180,7 +180,7 @@ const GenericForm = <T extends keyof NetworkConfigType> ({
 export default GenericForm;
 export function random_token (length: number) {
   const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?';
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_.~';
   let result = '';
   for (let i = 0; i < length; i++) {
     result += chars.charAt(Math.floor(Math.random() * chars.length));
diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/extension.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/extension.tsx
index 9b3dbe99..6d3d4d21 100644
--- a/packages/napcat-webui-frontend/src/pages/dashboard/extension.tsx
+++ b/packages/napcat-webui-frontend/src/pages/dashboard/extension.tsx
@@ -58,7 +58,7 @@ export default function ExtensionPage () {
       pluginName: page.pluginName,
       path: page.path,
       icon: page.icon,
-      description: page.description
+      description: page.description,
     }));
   }, [extensionPages]);
 
@@ -69,7 +69,7 @@ export default function ExtensionPage () {
     const path = pathParts.join(':').replace(/^\//, '');
     // 获取认证 token
     const token = localStorage.getItem('token') || '';
-    return `/api/Plugin/page/${pluginId}/${path}?webui_token=${encodeURIComponent(token)}`;
+    return `/api/Plugin/page/${pluginId}/${path}?webui_token=${token}`;
   }, [selectedTab]);
 
   useEffect(() => {
@@ -89,73 +89,75 @@ export default function ExtensionPage () {
   return (
     <>
       <title>扩展页面 - NapCat WebUI</title>
-      <div className="p-2 md:p-4 relative h-full flex flex-col">
+      <div className='p-2 md:p-4 relative h-full flex flex-col'>
         <PageLoading loading={loading} />
 
-        <div className="flex mb-4 items-center gap-4">
-          <div className="flex items-center gap-2 text-default-600">
+        <div className='flex mb-4 items-center gap-4'>
+          <div className='flex items-center gap-2 text-default-600'>
             <MdExtension size={24} />
-            <span className="text-lg font-medium">插件扩展页面</span>
+            <span className='text-lg font-medium'>插件扩展页面</span>
           </div>
           <Button
             isIconOnly
-            className="bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md"
-            radius="full"
+            className='bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md'
+            radius='full'
             onPress={refresh}
           >
             <IoMdRefresh size={24} />
           </Button>
         </div>
 
-        {extensionPages.length === 0 && !loading ? (
-          <div className="flex-1 flex flex-col items-center justify-center text-default-400">
-            <MdExtension size={64} className="mb-4 opacity-50" />
-            <p className="text-lg">暂无插件扩展页面</p>
-            <p className="text-sm mt-2">插件可以通过注册页面来扩展 WebUI 功能</p>
-          </div>
-        ) : (
-          <div className="flex-1 flex flex-col min-h-0">
-            <Tabs
-              aria-label="Extension Pages"
-              className="max-w-full"
-              selectedKey={selectedTab}
-              onSelectionChange={(key) => setSelectedTab(key as string)}
-              classNames={{
-                tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md flex-wrap',
-                cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
-                panel: 'flex-1 min-h-0 p-0'
-              }}
-            >
-              {tabs.map((tab) => (
-                <Tab
-                  key={tab.key}
-                  title={
-                    <div className="flex items-center gap-2">
-                      {tab.icon && <span>{tab.icon}</span>}
-                      <span>{tab.title}</span>
-                      <span className="text-xs text-default-400">({tab.pluginName})</span>
-                    </div>
-                  }
-                >
-                  <div className="relative w-full h-[calc(100vh-220px)] bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden">
-                    {iframeLoading && (
-                      <div className="absolute inset-0 flex items-center justify-center bg-default-100/50 z-10">
-                        <Spinner size="lg" />
+        {extensionPages.length === 0 && !loading
+          ? (
+            <div className='flex-1 flex flex-col items-center justify-center text-default-400'>
+              <MdExtension size={64} className='mb-4 opacity-50' />
+              <p className='text-lg'>暂无插件扩展页面</p>
+              <p className='text-sm mt-2'>插件可以通过注册页面来扩展 WebUI 功能</p>
+            </div>
+          )
+          : (
+            <div className='flex-1 flex flex-col min-h-0'>
+              <Tabs
+                aria-label='Extension Pages'
+                className='max-w-full'
+                selectedKey={selectedTab}
+                onSelectionChange={(key) => setSelectedTab(key as string)}
+                classNames={{
+                  tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md flex-wrap',
+                  cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
+                  panel: 'flex-1 min-h-0 p-0',
+                }}
+              >
+                {tabs.map((tab) => (
+                  <Tab
+                    key={tab.key}
+                    title={
+                      <div className='flex items-center gap-2'>
+                        {tab.icon && <span>{tab.icon}</span>}
+                        <span>{tab.title}</span>
+                        <span className='text-xs text-default-400'>({tab.pluginName})</span>
                       </div>
-                    )}
-                    <iframe
-                      src={currentPageUrl}
-                      className="w-full h-full border-0"
-                      onLoad={handleIframeLoad}
-                      title={tab.title}
-                      sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-                    />
-                  </div>
-                </Tab>
-              ))}
-            </Tabs>
-          </div>
-        )}
+                    }
+                  >
+                    <div className='relative w-full h-[calc(100vh-220px)] bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden'>
+                      {iframeLoading && (
+                        <div className='absolute inset-0 flex items-center justify-center bg-default-100/50 z-10'>
+                          <Spinner size='lg' />
+                        </div>
+                      )}
+                      <iframe
+                        src={currentPageUrl}
+                        className='w-full h-full border-0'
+                        onLoad={handleIframeLoad}
+                        title={tab.title}
+                        sandbox='allow-scripts allow-same-origin allow-forms allow-popups'
+                      />
+                    </div>
+                  </Tab>
+                ))}
+              </Tabs>
+            </div>
+          )}
       </div>
     </>
   );