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

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

View File

@@ -290,6 +290,9 @@ const app = createApp({
mounted() { mounted() {
console.log('Vue app mounted, authToken:', !!this.authToken, 'activeTab:', this.activeTab); console.log('Vue app mounted, authToken:', !!this.authToken, 'activeTab:', this.activeTab);
// 从URL参数中读取tab信息
this.initializeTabFromUrl();
// 初始化防抖函数 // 初始化防抖函数
this.setTrendPeriod = this.debounce(this._setTrendPeriod, 300); this.setTrendPeriod = this.debounce(this._setTrendPeriod, 300);
@@ -303,6 +306,11 @@ const app = createApp({
} }
}); });
// 监听浏览器前进后退按钮事件
window.addEventListener('popstate', () => {
this.initializeTabFromUrl();
});
if (this.authToken) { if (this.authToken) {
this.isLoggedIn = true; this.isLoggedIn = true;
@@ -368,6 +376,40 @@ const app = createApp({
}, },
methods: { 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过期等错误 // 统一的API请求方法处理token过期等错误
async apiRequest(url, options = {}) { async apiRequest(url, options = {}) {
try { try {

View File

@@ -208,7 +208,7 @@
<button <button
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.key" :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', :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']" activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900']"
> >