mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 17:39:16 +00:00
feat: 支持通过URL参数切换管理界面标签页
- 添加URL参数解析功能,支持 ?tab=apiKeys 等参数直接跳转到指定标签页 - 切换标签页时自动更新URL,方便分享和书签 - 支持浏览器前进后退按钮,保持标签页状态同步 - 默认dashboard标签页不显示URL参数,保持简洁
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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']"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user