feat: 支持通过URL参数切换管理界面标签页

- 添加URL参数解析功能,支持 ?tab=apiKeys 等参数直接跳转到指定标签页
- 切换标签页时自动更新URL,方便分享和书签
- 支持浏览器前进后退按钮,保持标签页状态同步
- 默认dashboard标签页不显示URL参数,保持简洁
This commit is contained in:
breaker
2025-07-25 01:25:33 +08:00
committed by KevinLiao
parent f614d54ab5
commit 6a22163d83
2 changed files with 43 additions and 1 deletions

View File

@@ -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 {