@@ -1821,16 +1934,16 @@ const form = ref({
priority: props.account?.priority || 50,
supportedModels: (() => {
const models = props.account?.supportedModels
- if (!models) return ''
+ if (!models) return []
// 处理对象格式（Claude Console 的新格式）
if (typeof models === 'object' && !Array.isArray(models)) {
- return Object.keys(models).join('\n')
+ return Object.keys(models)
}
// 处理数组格式（向后兼容）
if (Array.isArray(models)) {
- return models.join('\n')
+ return models
}
- return ''
+ return []
})(),
userAgent: props.account?.userAgent || '',
enableRateLimit: props.account ? props.account.rateLimitDuration > 0 : true,
@@ -1841,7 +1954,11 @@ const form = ref({
region: props.account?.region || '',
sessionToken: props.account?.sessionToken || '',
defaultModel: props.account?.defaultModel || '',
- smallFastModel: props.account?.smallFastModel || ''
+ smallFastModel: props.account?.smallFastModel || '',
+ // Azure OpenAI 特定字段
+ azureEndpoint: props.account?.azureEndpoint || '',
+ apiVersion: props.account?.apiVersion || '',
+ deploymentName: props.account?.deploymentName || ''
})
// 模型映射表数据
@@ -1878,7 +1995,9 @@ const errors = ref({
apiKey: '',
accessKeyId: '',
secretAccessKey: '',
- region: ''
+ region: '',
+ azureEndpoint: '',
+ deploymentName: ''
})
// 计算是否可以进入下一步
@@ -2146,6 +2265,20 @@ const createAccount = async () => {
errors.value.region = '请选择 AWS 区域'
hasError = true
}
+ } else if (form.value.platform === 'azure_openai') {
+ // Azure OpenAI 验证
+ if (!form.value.azureEndpoint || form.value.azureEndpoint.trim() === '') {
+ errors.value.azureEndpoint = '请填写 Azure Endpoint'
+ hasError = true
+ }
+ if (!form.value.deploymentName || form.value.deploymentName.trim() === '') {
+ errors.value.deploymentName = '请填写部署名称'
+ hasError = true
+ }
+ if (!form.value.apiKey || form.value.apiKey.trim() === '') {
+ errors.value.apiKey = '请填写 API Key'
+ hasError = true
+ }
} else if (form.value.addType === 'manual') {
// 手动模式验证
if (!form.value.accessToken || form.value.accessToken.trim() === '') {
@@ -2307,6 +2440,16 @@ const createAccount = async () => {
data.priority = form.value.priority || 50
// 如果不启用限流，传递 0 表示不限流
data.rateLimitDuration = form.value.enableRateLimit ? form.value.rateLimitDuration || 60 : 0
+ } else if (form.value.platform === 'azure_openai') {
+ // Azure OpenAI 账户特定数据
+ data.azureEndpoint = form.value.azureEndpoint
+ data.apiKey = form.value.apiKey
+ data.apiVersion = form.value.apiVersion || '2024-02-01'
+ data.deploymentName = form.value.deploymentName
+ data.supportedModels = Array.isArray(form.value.supportedModels)
+ ? form.value.supportedModels
+ : []
+ data.priority = form.value.priority || 50
}
let result
@@ -2318,6 +2461,8 @@ const createAccount = async () => {
result = await accountsStore.createBedrockAccount(data)
} else if (form.value.platform === 'openai') {
result = await accountsStore.createOpenAIAccount(data)
+ } else if (form.value.platform === 'azure_openai') {
+ result = await accountsStore.createAzureOpenAIAccount(data)
} else {
result = await accountsStore.createGeminiAccount(data)
}
@@ -2492,6 +2637,21 @@ const updateAccount = async () => {
data.rateLimitDuration = form.value.enableRateLimit ? form.value.rateLimitDuration || 60 : 0
}
+ // Azure OpenAI 特定更新
+ if (props.account.platform === 'azure_openai') {
+ data.azureEndpoint = form.value.azureEndpoint
+ data.apiVersion = form.value.apiVersion || '2024-02-01'
+ data.deploymentName = form.value.deploymentName
+ data.supportedModels = Array.isArray(form.value.supportedModels)
+ ? form.value.supportedModels
+ : []
+ data.priority = form.value.priority || 50
+ // 只有当有新的 API Key 时才更新
+ if (form.value.apiKey && form.value.apiKey.trim()) {
+ data.apiKey = form.value.apiKey
+ }
+ }
+
if (props.account.platform === 'claude') {
await accountsStore.updateClaudeAccount(props.account.id, data)
} else if (props.account.platform === 'claude-console') {
@@ -2500,6 +2660,8 @@ const updateAccount = async () => {
await accountsStore.updateBedrockAccount(props.account.id, data)
} else if (props.account.platform === 'openai') {
await accountsStore.updateOpenAIAccount(props.account.id, data)
+ } else if (props.account.platform === 'azure_openai') {
+ await accountsStore.updateAzureOpenAIAccount(props.account.id, data)
} else {
await accountsStore.updateGeminiAccount(props.account.id, data)
}
@@ -2552,6 +2714,26 @@ watch(
}
)
+// 监听Azure Endpoint变化，清除错误
+watch(
+ () => form.value.azureEndpoint,
+ () => {
+ if (errors.value.azureEndpoint && form.value.azureEndpoint?.trim()) {
+ errors.value.azureEndpoint = ''
+ }
+ }
+)
+
+// 监听Deployment Name变化，清除错误
+watch(
+ () => form.value.deploymentName,
+ () => {
+ if (errors.value.deploymentName && form.value.deploymentName?.trim()) {
+ errors.value.deploymentName = ''
+ }
+ }
+)
+
// 分组相关数据
const groups = ref([])
const loadingGroups = ref(false)
@@ -2784,16 +2966,16 @@ watch(
priority: newAccount.priority || 50,
supportedModels: (() => {
const models = newAccount.supportedModels
- if (!models) return ''
+ if (!models) return []
// 处理对象格式（Claude Console 的新格式）
if (typeof models === 'object' && !Array.isArray(models)) {
- return Object.keys(models).join('\n')
+ return Object.keys(models)
}
// 处理数组格式（向后兼容）
if (Array.isArray(models)) {
- return models.join('\n')
+ return models
}
- return ''
+ return []
})(),
userAgent: newAccount.userAgent || '',
enableRateLimit:
@@ -2805,7 +2987,11 @@ watch(
region: newAccount.region || '',
sessionToken: '', // 编辑模式不显示现有的会话令牌
defaultModel: newAccount.defaultModel || '',
- smallFastModel: newAccount.smallFastModel || ''
+ smallFastModel: newAccount.smallFastModel || '',
+ // Azure OpenAI 特定字段
+ azureEndpoint: newAccount.azureEndpoint || '',
+ apiVersion: newAccount.apiVersion || '',
+ deploymentName: newAccount.deploymentName || ''
}
// 如果是分组类型，加载分组ID
diff --git a/web/admin-spa/src/components/admin/ChangeRoleModal.vue b/web/admin-spa/src/components/admin/ChangeRoleModal.vue
new file mode 100644
index 00000000..10b0757e
--- /dev/null
+++ b/web/admin-spa/src/components/admin/ChangeRoleModal.vue
@@ -0,0 +1,254 @@
+
+
+
+
+
+
Change User Role
+
+
+
+
+
+
+
+
+
+
+ {{ user.displayName || user.username }}
+
+
@{{ user.username }}
+
+
+ Current: {{ user.role }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/components/admin/UserUsageStatsModal.vue b/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
new file mode 100644
index 00000000..97f933cf
--- /dev/null
+++ b/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
@@ -0,0 +1,428 @@
+
+
+
+
+
+
+
+ Usage Statistics - {{ user?.displayName || user?.username }}
+
+
@{{ user?.username }} • {{ user?.role }}
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading usage statistics...
+
+
+
+
+
+
+
+
+
+
+
+
+ - Requests
+ -
+ {{ formatNumber(usageStats?.totalRequests || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Input Tokens
+ -
+ {{ formatNumber(usageStats?.totalInputTokens || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Output Tokens
+ -
+ {{ formatNumber(usageStats?.totalOutputTokens || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Total Cost
+ -
+ ${{ (usageStats?.totalCost || 0).toFixed(4) }}
+
+
+
+
+
+
+
+
+
+
+
+
API Keys Usage
+
+
+
+
+
+ |
+ API Key
+ |
+
+ Status
+ |
+
+ Requests
+ |
+
+ Tokens
+ |
+
+ Cost
+ |
+
+ Last Used
+ |
+
+
+
+
+ |
+ {{ apiKey.name }}
+ {{ apiKey.keyPreview }}
+ |
+
+
+ {{ apiKey.isActive ? 'Active' : 'Disabled' }}
+
+ |
+
+ {{ formatNumber(apiKey.usage?.requests || 0) }}
+ |
+
+ In: {{ formatNumber(apiKey.usage?.inputTokens || 0) }}
+ Out: {{ formatNumber(apiKey.usage?.outputTokens || 0) }}
+ |
+
+ ${{ (apiKey.usage?.totalCost || 0).toFixed(4) }}
+ |
+
+ {{ apiKey.lastUsedAt ? formatDate(apiKey.lastUsedAt) : 'Never' }}
+ |
+
+
+
+
+
+
+
+
+
+
Usage Trend
+
+
+
+
+
+
Usage Chart
+
+ Daily usage trends for {{ selectedPeriod }} period
+
+
+ (Chart integration can be added with Chart.js, D3.js, or similar library)
+
+
+
+
+
+
+
+
+
+
No usage data
+
+ This user hasn't made any API requests in the selected period.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/components/layout/MainLayout.vue b/web/admin-spa/src/components/layout/MainLayout.vue
index df4d4d20..61e7a353 100644
--- a/web/admin-spa/src/components/layout/MainLayout.vue
+++ b/web/admin-spa/src/components/layout/MainLayout.vue
@@ -35,6 +35,7 @@ const tabRouteMap = {
dashboard: '/dashboard',
apiKeys: '/api-keys',
accounts: '/accounts',
+ userManagement: '/user-management',
tutorial: '/tutorial',
settings: '/settings'
}
diff --git a/web/admin-spa/src/components/layout/TabBar.vue b/web/admin-spa/src/components/layout/TabBar.vue
index 55196957..87c6dcc8 100644
--- a/web/admin-spa/src/components/layout/TabBar.vue
+++ b/web/admin-spa/src/components/layout/TabBar.vue
@@ -50,6 +50,7 @@ const tabs = [
{ key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
{ key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
{ key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' },
+ { key: 'userManagement', name: '用户管理', shortName: '用户', icon: 'fas fa-users' },
{ key: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
{ key: 'settings', name: '系统设置', shortName: '设置', icon: 'fas fa-cogs' }
]
diff --git a/web/admin-spa/src/components/user/CreateApiKeyModal.vue b/web/admin-spa/src/components/user/CreateApiKeyModal.vue
new file mode 100644
index 00000000..a752d7c6
--- /dev/null
+++ b/web/admin-spa/src/components/user/CreateApiKeyModal.vue
@@ -0,0 +1,265 @@
+
+
+
+
+
+
Create New API Key
+
+
+
+
+
+
+
+
+
+
+
API Key Created Successfully!
+
+
+ Important: Copy your API key now. You won't be able to see it
+ again!
+
+
+
+
{{
+ newApiKey.key
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/components/user/UserApiKeysManager.vue b/web/admin-spa/src/components/user/UserApiKeysManager.vue
new file mode 100644
index 00000000..8100cd88
--- /dev/null
+++ b/web/admin-spa/src/components/user/UserApiKeysManager.vue
@@ -0,0 +1,349 @@
+
+
+
+
+
My API Keys
+
+ Manage your API keys to access Claude Relay services
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You have reached the maximum number of API keys ({{ maxApiKeys }}). Please delete an
+ existing key to create a new one.
+
+
+
+
+
+
+
+
+
Loading API keys...
+
+
+
+
+
+ -
+
+
+
+
+
+
{{ apiKey.name }}
+
+ Deleted
+
+
+ Deleted
+
+
+
+
{{ apiKey.description || 'No description' }}
+
+ Created: {{ formatDate(apiKey.createdAt) }}
+ Deleted: {{ formatDate(apiKey.deletedAt) }}
+ Last used: {{ formatDate(apiKey.lastUsedAt) }}
+ Never used
+ Expires: {{ formatDate(apiKey.expiresAt) }}
+
+
+
+
+
+
+
+
{{ formatNumber(apiKey.usage?.requests || 0) }} requests
+
${{ apiKey.usage.totalCost.toFixed(4) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No API keys
+
Get started by creating your first API key.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/components/user/UserUsageStats.vue b/web/admin-spa/src/components/user/UserUsageStats.vue
new file mode 100644
index 00000000..0cf885d4
--- /dev/null
+++ b/web/admin-spa/src/components/user/UserUsageStats.vue
@@ -0,0 +1,397 @@
+
+
+
+
+
Usage Statistics
+
View your API usage statistics and costs
+
+
+
+
+
+
+
+
+
+
Loading usage statistics...
+
+
+
+
+
+
+
+
+
+
+ - Total Requests
+ -
+ {{ formatNumber(usageStats?.totalRequests || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Input Tokens
+ -
+ {{ formatNumber(usageStats?.totalInputTokens || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Output Tokens
+ -
+ {{ formatNumber(usageStats?.totalOutputTokens || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Total Cost
+ -
+ ${{ (usageStats?.totalCost || 0).toFixed(4) }}
+
+
+
+
+
+
+
+
+
+
+
+
Daily Usage Trend
+
+
+
+
+
+
Usage Chart
+
Daily usage trends would be displayed here
+
+ (Chart integration can be added with Chart.js, D3.js, or similar library)
+
+
+
+
+
+
+
+
+
+
Usage by Model
+
+
+
+
+
{{ formatNumber(model.requests) }} requests
+
${{ model.cost.toFixed(4) }}
+
+
+
+
+
+
+
+
+
+
Usage by API Key
+
+
+
+
+ |
+ API Key
+ |
+
+ Requests
+ |
+
+ Input Tokens
+ |
+
+ Output Tokens
+ |
+
+ Cost
+ |
+
+ Status
+ |
+
+
+
+
+ |
+ {{ apiKey.name }}
+ {{ apiKey.keyPreview }}
+ |
+
+ {{ formatNumber(apiKey.usage?.requests || 0) }}
+ |
+
+ {{ formatNumber(apiKey.usage?.inputTokens || 0) }}
+ |
+
+ {{ formatNumber(apiKey.usage?.outputTokens || 0) }}
+ |
+
+ ${{ (apiKey.usage?.totalCost || 0).toFixed(4) }}
+ |
+
+
+ {{
+ apiKey.isDeleted === 'true' || apiKey.deletedAt
+ ? 'Deleted'
+ : apiKey.isActive
+ ? 'Active'
+ : 'Disabled'
+ }}
+
+ |
+
+
+
+
+
+
+
+
+
+
+
No usage data
+
+ You haven't made any API requests yet. Create an API key and start using the service to see
+ usage statistics.
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/components/user/ViewApiKeyModal.vue b/web/admin-spa/src/components/user/ViewApiKeyModal.vue
new file mode 100644
index 00000000..99ea1738
--- /dev/null
+++ b/web/admin-spa/src/components/user/ViewApiKeyModal.vue
@@ -0,0 +1,250 @@
+
+
+
+
+
+
API Key Details
+
+
+
+
+
+
+
+
{{ apiKey.name }}
+
+
+
+
+
+
{{ apiKey.description }}
+
+
+
+
+
+
+
+
+ {{
+ apiKey.key || 'Not available'
+ }}
+
+
+ {{
+ apiKey.keyPreview || 'cr_****'
+ }}
+
+
+
+
+
+
+
+
+ Full API key is only shown when first created or regenerated
+
+
+
+
+
+
+
+
+ {{ apiKey.isActive ? 'Active' : 'Disabled' }}
+
+
+
+
+
+
+
+
+
+ Requests:
+ {{ formatNumber(apiKey.usage.requests || 0) }}
+
+
+ Input Tokens:
+ {{
+ formatNumber(apiKey.usage.inputTokens || 0)
+ }}
+
+
+ Output Tokens:
+ {{
+ formatNumber(apiKey.usage.outputTokens || 0)
+ }}
+
+
+ Total Cost:
+ ${{ (apiKey.usage.totalCost || 0).toFixed(4) }}
+
+
+
+
+
+
+
+ Created:
+ {{ formatDate(apiKey.createdAt) }}
+
+
+ Last Used:
+ {{ formatDate(apiKey.lastUsedAt) }}
+
+
+ Expires:
+
+ {{ formatDate(apiKey.expiresAt) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/admin-spa/src/config/api.js b/web/admin-spa/src/config/api.js
index 155d8bcf..27aaee55 100644
--- a/web/admin-spa/src/config/api.js
+++ b/web/admin-spa/src/config/api.js
@@ -149,6 +149,24 @@ class ApiClient {
}
}
+ // PATCH 请求
+ async patch(url, data = null, options = {}) {
+ const fullUrl = createApiUrl(url)
+ const config = this.buildConfig({
+ ...options,
+ method: 'PATCH',
+ body: data ? JSON.stringify(data) : undefined
+ })
+
+ try {
+ const response = await fetch(fullUrl, config)
+ return await this.handleResponse(response)
+ } catch (error) {
+ console.error('API PATCH Error:', error)
+ throw error
+ }
+ }
+
// DELETE 请求
async delete(url, options = {}) {
const fullUrl = createApiUrl(url)
diff --git a/web/admin-spa/src/main.js b/web/admin-spa/src/main.js
index 6213f3eb..79181b6b 100644
--- a/web/admin-spa/src/main.js
+++ b/web/admin-spa/src/main.js
@@ -6,6 +6,7 @@ import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import App from './App.vue'
import router from './router'
+import { useUserStore } from './stores/user'
import './assets/styles/main.css'
import './assets/styles/global.css'
@@ -24,5 +25,9 @@ app.use(ElementPlus, {
locale: zhCn
})
+// 设置axios拦截器
+const userStore = useUserStore()
+userStore.setupAxiosInterceptors()
+
// 挂载应用
app.mount('#app')
diff --git a/web/admin-spa/src/router/index.js b/web/admin-spa/src/router/index.js
index 47680c7d..16a2b50a 100644
--- a/web/admin-spa/src/router/index.js
+++ b/web/admin-spa/src/router/index.js
@@ -1,9 +1,13 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
+import { useUserStore } from '@/stores/user'
import { APP_CONFIG } from '@/config/app'
// 路由懒加载
const LoginView = () => import('@/views/LoginView.vue')
+const UserLoginView = () => import('@/views/UserLoginView.vue')
+const UserDashboardView = () => import('@/views/UserDashboardView.vue')
+const UserManagementView = () => import('@/views/UserManagementView.vue')
const MainLayout = () => import('@/components/layout/MainLayout.vue')
const DashboardView = () => import('@/views/DashboardView.vue')
const ApiKeysView = () => import('@/views/ApiKeysView.vue')
@@ -35,6 +39,22 @@ const routes = [
component: LoginView,
meta: { requiresAuth: false }
},
+ {
+ path: '/admin-login',
+ redirect: '/login'
+ },
+ {
+ path: '/user-login',
+ name: 'UserLogin',
+ component: UserLoginView,
+ meta: { requiresAuth: false, userAuth: true }
+ },
+ {
+ path: '/user-dashboard',
+ name: 'UserDashboard',
+ component: UserDashboardView,
+ meta: { requiresUserAuth: true }
+ },
{
path: '/api-stats',
name: 'ApiStats',
@@ -101,6 +121,18 @@ const routes = [
}
]
},
+ {
+ path: '/user-management',
+ component: MainLayout,
+ meta: { requiresAuth: true },
+ children: [
+ {
+ path: '',
+ name: 'UserManagement',
+ component: UserManagementView
+ }
+ ]
+ },
// 捕获所有未匹配的路由
{
path: '/:pathMatch(.*)*',
@@ -114,15 +146,18 @@ const router = createRouter({
})
// 路由守卫
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
const authStore = useAuthStore()
+ const userStore = useUserStore()
console.log('路由导航:', {
to: to.path,
from: from.path,
fullPath: to.fullPath,
requiresAuth: to.meta.requiresAuth,
- isAuthenticated: authStore.isAuthenticated
+ requiresUserAuth: to.meta.requiresUserAuth,
+ isAuthenticated: authStore.isAuthenticated,
+ isUserAuthenticated: userStore.isAuthenticated
})
// 防止重定向循环：如果已经在目标路径，直接放行
@@ -130,9 +165,38 @@ router.beforeEach((to, from, next) => {
return next()
}
+ // 检查用户认证状态
+ if (to.meta.requiresUserAuth) {
+ if (!userStore.isAuthenticated) {
+ // 尝试检查本地存储的认证信息
+ try {
+ const isUserLoggedIn = await userStore.checkAuth()
+ if (!isUserLoggedIn) {
+ return next('/user-login')
+ }
+ } catch (error) {
+ // If the error is about disabled account, redirect to login with error
+ if (error.message && error.message.includes('disabled')) {
+ // Import showToast to display the error
+ const { showToast } = await import('@/utils/toast')
+ showToast(error.message, 'error')
+ }
+ return next('/user-login')
+ }
+ }
+ return next()
+ }
+
// API Stats 页面不需要认证，直接放行
if (to.path === '/api-stats' || to.path.startsWith('/api-stats')) {
next()
+ } else if (to.path === '/user-login') {
+ // 如果已经是用户登录状态，重定向到用户仪表板
+ if (userStore.isAuthenticated) {
+ next('/user-dashboard')
+ } else {
+ next()
+ }
} else if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next('/login')
} else if (to.path === '/login' && authStore.isAuthenticated) {
diff --git a/web/admin-spa/src/stores/user.js b/web/admin-spa/src/stores/user.js
new file mode 100644
index 00000000..db6a4dfc
--- /dev/null
+++ b/web/admin-spa/src/stores/user.js
@@ -0,0 +1,217 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import { showToast } from '@/utils/toast'
+
+const API_BASE = '/users'
+
+export const useUserStore = defineStore('user', {
+ state: () => ({
+ user: null,
+ isAuthenticated: false,
+ sessionToken: null,
+ loading: false,
+ config: null
+ }),
+
+ getters: {
+ isLoggedIn: (state) => state.isAuthenticated && state.user,
+ userName: (state) => state.user?.displayName || state.user?.username,
+ userRole: (state) => state.user?.role
+ },
+
+ actions: {
+ // 🔐 用户登录
+ async login(credentials) {
+ this.loading = true
+ try {
+ const response = await axios.post(`${API_BASE}/login`, credentials)
+
+ if (response.data.success) {
+ this.user = response.data.user
+ this.sessionToken = response.data.sessionToken
+ this.isAuthenticated = true
+
+ // 保存到 localStorage
+ localStorage.setItem('userToken', this.sessionToken)
+ localStorage.setItem('userData', JSON.stringify(this.user))
+
+ // 设置 axios 默认头部
+ this.setAuthHeader()
+
+ return response.data
+ } else {
+ throw new Error(response.data.message || 'Login failed')
+ }
+ } catch (error) {
+ this.clearAuth()
+ throw error
+ } finally {
+ this.loading = false
+ }
+ },
+
+ // 🚪 用户登出
+ async logout() {
+ try {
+ if (this.sessionToken) {
+ await axios.post(
+ `${API_BASE}/logout`,
+ {},
+ {
+ headers: { 'x-user-token': this.sessionToken }
+ }
+ )
+ }
+ } catch (error) {
+ console.error('Logout request failed:', error)
+ } finally {
+ this.clearAuth()
+ }
+ },
+
+ // 🔄 检查认证状态
+ async checkAuth() {
+ const token = localStorage.getItem('userToken')
+ const userData = localStorage.getItem('userData')
+ const userConfig = localStorage.getItem('userConfig')
+
+ if (!token || !userData) {
+ this.clearAuth()
+ return false
+ }
+
+ try {
+ this.sessionToken = token
+ this.user = JSON.parse(userData)
+ this.config = userConfig ? JSON.parse(userConfig) : null
+ this.isAuthenticated = true
+ this.setAuthHeader()
+
+ // 验证 token 是否仍然有效
+ await this.getUserProfile()
+ return true
+ } catch (error) {
+ console.error('Auth check failed:', error)
+ this.clearAuth()
+ return false
+ }
+ },
+
+ // 👤 获取用户资料
+ async getUserProfile() {
+ try {
+ const response = await axios.get(`${API_BASE}/profile`)
+
+ if (response.data.success) {
+ this.user = response.data.user
+ this.config = response.data.config
+ localStorage.setItem('userData', JSON.stringify(this.user))
+ localStorage.setItem('userConfig', JSON.stringify(this.config))
+ return response.data.user
+ }
+ } catch (error) {
+ if (error.response?.status === 401 || error.response?.status === 403) {
+ // 401: Invalid/expired session, 403: Account disabled
+ this.clearAuth()
+ // If it's a disabled account error, throw a specific error
+ if (error.response?.status === 403) {
+ throw new Error(error.response.data?.message || 'Your account has been disabled')
+ }
+ }
+ throw error
+ }
+ },
+
+ // 🔑 获取用户API Keys
+ async getUserApiKeys(includeDeleted = false) {
+ try {
+ const params = {}
+ if (includeDeleted) {
+ params.includeDeleted = 'true'
+ }
+ const response = await axios.get(`${API_BASE}/api-keys`, { params })
+ return response.data.success ? response.data.apiKeys : []
+ } catch (error) {
+ console.error('Failed to fetch API keys:', error)
+ throw error
+ }
+ },
+
+ // 🔑 创建API Key
+ async createApiKey(keyData) {
+ try {
+ const response = await axios.post(`${API_BASE}/api-keys`, keyData)
+ return response.data
+ } catch (error) {
+ console.error('Failed to create API key:', error)
+ throw error
+ }
+ },
+
+ // 🗑️ 删除API Key
+ async deleteApiKey(keyId) {
+ try {
+ const response = await axios.delete(`${API_BASE}/api-keys/${keyId}`)
+ return response.data
+ } catch (error) {
+ console.error('Failed to delete API key:', error)
+ throw error
+ }
+ },
+
+ // 📊 获取使用统计
+ async getUserUsageStats(params = {}) {
+ try {
+ const response = await axios.get(`${API_BASE}/usage-stats`, { params })
+ return response.data.success ? response.data.stats : null
+ } catch (error) {
+ console.error('Failed to fetch usage stats:', error)
+ throw error
+ }
+ },
+
+ // 🧹 清除认证信息
+ clearAuth() {
+ this.user = null
+ this.sessionToken = null
+ this.isAuthenticated = false
+ this.config = null
+
+ localStorage.removeItem('userToken')
+ localStorage.removeItem('userData')
+ localStorage.removeItem('userConfig')
+
+ // 清除 axios 默认头部
+ delete axios.defaults.headers.common['x-user-token']
+ },
+
+ // 🔧 设置认证头部
+ setAuthHeader() {
+ if (this.sessionToken) {
+ axios.defaults.headers.common['x-user-token'] = this.sessionToken
+ }
+ },
+
+ // 🔧 设置axios拦截器
+ setupAxiosInterceptors() {
+ // Response interceptor to handle disabled user responses globally
+ axios.interceptors.response.use(
+ (response) => response,
+ (error) => {
+ if (error.response?.status === 403) {
+ const message = error.response.data?.message
+ if (message && (message.includes('disabled') || message.includes('Account disabled'))) {
+ this.clearAuth()
+ showToast(message, 'error')
+ // Redirect to login page
+ if (window.location.pathname !== '/user-login') {
+ window.location.href = '/user-login'
+ }
+ }
+ }
+ return Promise.reject(error)
+ }
+ )
+ }
+ }
+})
diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index a9e49d05..947a36b9 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -1431,7 +1431,8 @@ const resetAccountStatus = async (account) => {
if (data.success) {
showToast('账户状态已重置', 'success')
- loadAccounts()
+ // 强制刷新，绕过前端缓存，确保最终一致性
+ loadAccounts(true)
} else {
showToast(data.message || '状态重置失败', 'error')
}
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 9f5a183c..54a5b350 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -10,506 +10,1112 @@
管理和监控您的 API 密钥