mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 09:38:02 +00:00
feat: 支持通过URL参数切换管理界面标签页
- 添加URL参数解析功能,支持 ?tab=apiKeys 等参数直接跳转到指定标签页 - 切换标签页时自动更新URL,方便分享和书签 - 支持浏览器前进后退按钮,保持标签页状态同步 - 默认dashboard标签页不显示URL参数,保持简洁
This commit is contained in:
@@ -290,6 +290,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);
|
||||
|
||||
@@ -303,6 +306,11 @@ const app = createApp({
|
||||
}
|
||||
});
|
||||
|
||||
// 监听浏览器前进后退按钮事件
|
||||
window.addEventListener('popstate', () => {
|
||||
this.initializeTabFromUrl();
|
||||
});
|
||||
|
||||
if (this.authToken) {
|
||||
this.isLoggedIn = true;
|
||||
|
||||
@@ -368,6 +376,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 {
|
||||
|
||||
@@ -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']"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user