From 6a22163d83288033980cf13b1ae7973db48dc538 Mon Sep 17 00:00:00 2001
From: breaker <breakerr@qq.com>
Date: Fri, 25 Jul 2025 01:25:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87URL?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=88=87=E6=8D=A2=E7=AE=A1=E7=90=86=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=87=E7=AD=BE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加URL参数解析功能，支持 ?tab=apiKeys 等参数直接跳转到指定标签页
- 切换标签页时自动更新URL，方便分享和书签
- 支持浏览器前进后退按钮，保持标签页状态同步
- 默认dashboard标签页不显示URL参数，保持简洁
---
 web/admin/app.js     | 42 ++++++++++++++++++++++++++++++++++++++++++
 web/admin/index.html |  2 +-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/web/admin/app.js b/web/admin/app.js
index 9ccc7039..36166565 100644
--- a/web/admin/app.js
+++ b/web/admin/app.js
@@ -312,6 +312,9 @@ const app = createApp({
     mounted() {
         console.log('Vue app mounted, authToken:', !!this.authToken, 'activeTab:', this.activeTab);
         
+        // 从URL参数中读取tab信息
+        this.initializeTabFromUrl();
+        
         // 初始化防抖函数
         this.setTrendPeriod = this.debounce(this._setTrendPeriod, 300);
         
@@ -325,6 +328,11 @@ const app = createApp({
             }
         });
         
+        // 监听浏览器前进后退按钮事件
+        window.addEventListener('popstate', () => {
+            this.initializeTabFromUrl();
+        });
+        
         if (this.authToken) {
             this.isLoggedIn = true;
             
@@ -390,6 +398,40 @@ const app = createApp({
     },
     
     methods: {
+        // 从URL读取tab参数并设置activeTab
+        initializeTabFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const tabParam = urlParams.get('tab');
+            
+            // 检查tab参数是否有效
+            const validTabs = this.tabs.map(tab => tab.key);
+            if (tabParam && validTabs.includes(tabParam)) {
+                this.activeTab = tabParam;
+            }
+        },
+        
+        // 切换tab并更新URL
+        switchTab(tabKey) {
+            if (this.activeTab !== tabKey) {
+                this.activeTab = tabKey;
+                this.updateUrlTab(tabKey);
+            }
+        },
+        
+        // 更新URL中的tab参数
+        updateUrlTab(tabKey) {
+            const url = new URL(window.location.href);
+            if (tabKey === 'dashboard') {
+                // 如果是默认的dashboard标签，移除tab参数
+                url.searchParams.delete('tab');
+            } else {
+                url.searchParams.set('tab', tabKey);
+            }
+            
+            // 使用pushState更新URL但不刷新页面
+            window.history.pushState({}, '', url.toString());
+        },
+        
         // 统一的API请求方法，处理token过期等错误
         async apiRequest(url, options = {}) {
             try {
diff --git a/web/admin/index.html b/web/admin/index.html
index faf49691..dd79b742 100644
--- a/web/admin/index.html
+++ b/web/admin/index.html
@@ -208,7 +208,7 @@
                     <button 
                         v-for="tab in tabs" 
                         :key="tab.key"
-                        @click="activeTab = tab.key"
+                        @click="switchTab(tab.key)"
                         :class="['tab-btn flex-1 py-3 px-6 text-sm font-semibold transition-all duration-300', 
                                 activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900']"
                     >