github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 00:53:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化移动端响应式设计

Browse Source 
- 优化所有页面的移动端适配（手机、平板、PC）
- 修复AccountsView移动端状态显示和按钮功能问题
- 修复ApiKeysView移动端详情展开显示问题
- 移除ApiKeysView不必要的查看按钮
- 修复Dashboard页面PC版时间筛选按钮布局
- 改进所有组件的响应式设计
- 删除dist目录避免构建文件冲突

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-03 01:09:26 +08:00
parent f22c8cbfcc
commit ecfc1050d3
23 changed files with 2775 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/admin-spa/src/components/accounts/AccountForm.vue
View File

@@ -2,50 +2,50 @@
<Teleport to="body">
<div
v-if="show"
class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4"
>
<div class="modal-content w-full max-w-2xl p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
<i class="fas fa-user-circle text-white" />
<div class="modal-content w-full max-w-2xl p-4 sm:p-6 md:p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
<div class="flex items-center justify-between mb-4 sm:mb-6">
<div class="flex items-center gap-2 sm:gap-3">
<div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg sm:rounded-xl flex items-center justify-center">
<i class="fas fa-user-circle text-white text-sm sm:text-base" />
</div>
<h3 class="text-xl font-bold text-gray-900">
<h3 class="text-lg sm:text-xl font-bold text-gray-900">
{{ isEdit ? '编辑账户' : '添加账户' }}
</h3>
</div>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
class="text-gray-400 hover:text-gray-600 transition-colors p-1"
@click="$emit('close')"
>
<i class="fas fa-times text-xl" />
<i class="fas fa-times text-lg sm:text-xl" />
</button>
</div>
<!-- 步骤指示器 -->
<div
v-if="!isEdit && form.addType === 'oauth'"
class="flex items-center justify-center mb-8"
class="flex items-center justify-center mb-4 sm:mb-8"
>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2 sm:space-x-4">
<div class="flex items-center">
<div
:class="['w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold',
:class="['w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold',
oauthStep >= 1 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500']"
>
1
</div>
<span class="ml-2 text-sm font-medium text-gray-700">基本信息</span>
<span class="ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium text-gray-700">基本信息</span>
</div>
<div class="w-8 h-0.5 bg-gray-300" />
<div class="w-4 sm:w-8 h-0.5 bg-gray-300" />
<div class="flex items-center">
<div
:class="['w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold',
:class="['w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold',
oauthStep >= 2 ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500']"
>
2
</div>
<span class="ml-2 text-sm font-medium text-gray-700">授权认证</span>
<span class="ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium text-gray-700">授权认证</span>
</div>
</div>
</div>

324
web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<Teleport to="body">
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-2xl p-8 mx-auto max-h-[90vh] overflow-y-auto custom-scrollbar">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
<i class="fas fa-layer-group text-white text-lg" />
</div>
<div>
<h3 class="text-xl font-bold text-gray-900">
批量创建成功
</h3>
<p class="text-sm text-gray-600">
成功创建 {{ apiKeys.length }} 个 API Key
</p>
</div>
</div>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
title="直接关闭（不推荐）"
@click="handleDirectClose"
>
<i class="fas fa-times text-xl" />
</button>
</div>
<!-- 警告提示 -->
<div class="bg-amber-50 border-l-4 border-amber-400 p-4 mb-6">
<div class="flex items-start">
<div class="w-6 h-6 bg-amber-400 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<i class="fas fa-exclamation-triangle text-white text-sm" />
</div>
<div class="ml-3">
<h5 class="font-semibold text-amber-900 mb-1">
重要提醒
</h5>
<p class="text-sm text-amber-800">
这是您唯一能看到所有 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API Key。请立即下载并妥善保存。
</p>
</div>
</div>
</div>
<!-- 统计信息 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-blue-600 font-medium">
创建数量
</p>
<p class="text-2xl font-bold text-blue-900 mt-1">
{{ apiKeys.length }}
</p>
</div>
<div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center">
<i class="fas fa-key text-blue-600" />
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-green-600 font-medium">
基础名称
</p>
<p class="text-lg font-bold text-green-900 mt-1 truncate">
{{ baseName }}
</p>
</div>
<div class="w-10 h-10 bg-green-500 bg-opacity-20 rounded-lg flex items-center justify-center">
<i class="fas fa-tag text-green-600" />
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-purple-600 font-medium">
权限范围
</p>
<p class="text-lg font-bold text-purple-900 mt-1">
{{ getPermissionText() }}
</p>
</div>
<div class="w-10 h-10 bg-purple-500 bg-opacity-20 rounded-lg flex items-center justify-center">
<i class="fas fa-shield-alt text-purple-600" />
</div>
</div>
</div>
<div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-orange-600 font-medium">
过期时间
</p>
<p class="text-lg font-bold text-orange-900 mt-1">
{{ getExpiryText() }}
</p>
</div>
<div class="w-10 h-10 bg-orange-500 bg-opacity-20 rounded-lg flex items-center justify-center">
<i class="fas fa-clock text-orange-600" />
</div>
</div>
</div>
</div>
<!-- API Keys 预览 -->
<div class="mb-6">
<div class="flex items-center justify-between mb-3">
<label class="text-sm font-semibold text-gray-700">API Keys 预览</label>
<div class="flex items-center gap-2">
<button
type="button"
class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1"
@click="togglePreview"
>
<i :class="['fas', showPreview ? 'fa-eye-slash' : 'fa-eye']" />
{{ showPreview ? '隐藏' : '显示' }}预览
</button>
<span class="text-xs text-gray-500">（最多显示前10个）</span>
</div>
</div>
<div
v-if="showPreview"
class="bg-gray-900 rounded-lg p-4 max-h-48 overflow-y-auto custom-scrollbar"
>
<pre class="text-xs text-gray-300 font-mono">{{ getPreviewText() }}</pre>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex gap-3">
<button
class="flex-1 btn btn-primary py-3 px-6 font-semibold flex items-center justify-center gap-2"
@click="downloadApiKeys"
>
<i class="fas fa-download" />
下载所有 API Keys
</button>
<button
class="px-6 py-3 bg-gray-200 text-gray-800 rounded-xl font-semibold hover:bg-gray-300 transition-colors border border-gray-300"
@click="handleClose"
>
我已保存
</button>
</div>
<!-- 额外提示 -->
<div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
<p class="text-xs text-blue-700 flex items-start">
<i class="fas fa-info-circle mr-2 mt-0.5 flex-shrink-0" />
<span>
下载的文件格式为文本文件（.txt），每行包含一个 API Key。
请将文件保存在安全的位置，避免泄露。
</span>
</p>
</div>
</div>
</div>
</Teleport>
</template>
<script setup>
import { ref, computed } from 'vue'
import { showToast } from '@/utils/toast'
const props = defineProps({
apiKeys: {
type: Array,
required: true
}
})
const emit = defineEmits(['close'])
const showPreview = ref(false)
// 获取基础名称
const baseName = computed(() => {
if (props.apiKeys.length > 0) {
const firstKey = props.apiKeys[0]
// 提取基础名称（去掉 _1, _2 等后缀）
const match = firstKey.name.match(/^(.+)_\d+$/)
return match ? match[1] : firstKey.name
}
return ''
})
// 获取权限文本
const getPermissionText = () => {
if (props.apiKeys.length === 0) return '未知'
const permissions = props.apiKeys[0].permissions
const permissionMap = {
'all': '全部服务',
'claude': '仅 Claude',
'gemini': '仅 Gemini'
}
return permissionMap[permissions] || permissions
}
// 获取过期时间文本
const getExpiryText = () => {
if (props.apiKeys.length === 0) return '未知'
const expiresAt = props.apiKeys[0].expiresAt
if (!expiresAt) return '永不过期'
const expiryDate = new Date(expiresAt)
const now = new Date()
const diffDays = Math.ceil((expiryDate - now) / (1000 * 60 * 60 * 24))
if (diffDays <= 7) return `${diffDays}天`
if (diffDays <= 30) return `${Math.ceil(diffDays / 7)}周`
if (diffDays <= 365) return `${Math.ceil(diffDays / 30)}个月`
return `${Math.ceil(diffDays / 365)}年`
}
// 切换预览显示
const togglePreview = () => {
showPreview.value = !showPreview.value
}
// 获取预览文本
const getPreviewText = () => {
const previewKeys = props.apiKeys.slice(0, 10)
const lines = previewKeys.map((key, index) => {
return `${key.name}: ${key.apiKey || key.key || ''}`
})
if (props.apiKeys.length > 10) {
lines.push(`... 还有 ${props.apiKeys.length - 10} 个 API Key`)
}
return lines.join('\n')
}
// 下载 API Keys
const downloadApiKeys = () => {
// 生成文件内容
const content = props.apiKeys.map(key => {
return `${key.name}: ${key.apiKey || key.key || ''}`
}).join('\n')
// 创建 Blob 对象
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
// 创建下载链接
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
// 生成文件名（包含时间戳）
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
link.download = `api-keys-${baseName.value}-${timestamp}.txt`
// 触发下载
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 释放 URL 对象
URL.revokeObjectURL(url)
showToast('API Keys 文件已下载', 'success')
}
// 关闭弹窗（带确认）
const handleClose = async () => {
if (window.showConfirm) {
const confirmed = await window.showConfirm(
'关闭提醒',
'关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？',
'确定关闭',
'返回下载'
)
if (confirmed) {
emit('close')
}
} else {
// 降级方案
const confirmed = confirm(
'关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？'
)
if (confirmed) {
emit('close')
}
}
}
// 直接关闭（不带确认）
const handleDirectClose = async () => {
if (window.showConfirm) {
const confirmed = await window.showConfirm(
'确定要关闭吗？',
'您还没有下载 API Keys，关闭后将无法再次查看。\n\n强烈建议您先下载保存。',
'仍然关闭',
'返回下载'
)
if (confirmed) {
emit('close')
}
} else {
// 降级方案
const confirmed = confirm(
'您还没有下载 API Keys，关闭后将无法再次查看。\n\n确定要关闭吗？'
)
if (confirmed) {
emit('close')
}
}
}
</script>
<style scoped>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>

258
web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
View File

@@ -1,21 +1,21 @@
<template>
<Teleport to="body">
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-4xl p-6 mx-auto max-h-[90vh] flex flex-col">
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4">
<div class="modal-content w-full max-w-4xl p-4 sm:p-6 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
<i class="fas fa-key text-white" />
<div class="flex items-center gap-2 sm:gap-3">
<div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center">
<i class="fas fa-key text-white text-sm sm:text-base" />
</div>
<h3 class="text-xl font-bold text-gray-900">
<h3 class="text-lg sm:text-xl font-bold text-gray-900">
创建新的 API Key
</h3>
</div>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
class="text-gray-400 hover:text-gray-600 transition-colors p-1"
@click="$emit('close')"
>
<i class="fas fa-times text-xl" />
<i class="fas fa-times text-lg sm:text-xl" />
</button>
</div>
@@ -23,15 +23,78 @@
class="space-y-4 modal-scroll-content custom-scrollbar flex-1"
@submit.prevent="createApiKey"
>
<!-- 创建类型选择 -->
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-3 sm:p-4 border border-blue-200">
<div :class="['flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3', form.createType === 'batch' ? 'mb-3' : '']">
<label class="text-xs sm:text-sm font-semibold text-gray-700 flex items-center h-full">创建类型</label>
<div class="flex gap-3 sm:gap-4 items-center">
<label class="flex items-center cursor-pointer">
<input
v-model="form.createType"
type="radio"
value="single"
class="mr-1.5 sm:mr-2 text-blue-600"
>
<span class="text-xs sm:text-sm text-gray-700 flex items-center">
<i class="fas fa-key mr-1 text-xs" />
单个创建
</span>
</label>
<label class="flex items-center cursor-pointer">
<input
v-model="form.createType"
type="radio"
value="batch"
class="mr-1.5 sm:mr-2 text-blue-600"
>
<span class="text-xs sm:text-sm text-gray-700 flex items-center">
<i class="fas fa-layer-group mr-1 text-xs" />
批量创建
</span>
</label>
</div>
</div>
<!-- 批量创建数量输入 -->
<div
v-if="form.createType === 'batch'"
class="mt-3"
>
<div class="flex items-center gap-4">
<div class="flex-1">
<label class="block text-xs font-medium text-gray-600 mb-1">创建数量</label>
<div class="flex items-center gap-2">
<input
v-model.number="form.batchCount"
type="number"
min="2"
max="500"
required
class="form-input w-full text-sm"
placeholder="输入数量 (2-500)"
>
<div class="text-xs text-gray-500 whitespace-nowrap">
最大支持 500 个
</div>
</div>
</div>
</div>
<p class="text-xs text-amber-600 mt-2 flex items-start">
<i class="fas fa-info-circle mr-1 mt-0.5 flex-shrink-0" />
<span>批量创建时，每个 Key 的名称会自动添加序号后缀，例如：{{ form.name || 'MyKey' }}_1, {{ form.name || 'MyKey' }}_2 ...</span>
</p>
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">名称 <span class="text-red-500">*</span></label>
<label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">名称 <span class="text-red-500">*</span></label>
<input
v-model="form.name"
type="text"
required
class="form-input w-full"
class="form-input w-full text-sm"
:class="{ 'border-red-500': errors.name }"
placeholder="为您的 API Key 取一个名称"
:placeholder="form.createType === 'batch' ? '输入基础名称（将自动添加序号）' : '为您的 API Key 取一个名称'"
@input="errors.name = ''"
>
<p
@@ -346,7 +409,19 @@
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">专属账号绑定 (可选)</label>
<div class="flex items-center justify-between mb-2">
<label class="text-sm font-semibold text-gray-700">专属账号绑定 (可选)</label>
<button
type="button"
class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="刷新账号列表"
:disabled="accountsLoading"
@click="refreshAccounts"
>
<i :class="['fas', accountsLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt', 'text-xs']" />
<span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
</button>
</div>
<div class="grid grid-cols-1 gap-3">
<div>
<label class="block text-sm font-medium text-gray-600 mb-1">Claude 专属账号</label>
@@ -358,24 +433,40 @@
<option value="">
使用共享账号池
</option>
<optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0" label="Claude OAuth 账号">
<<<<<<< Updated upstream
<option
v-for="account in accounts.claude.filter(a => a.isDedicated)"
:key="account.id"
:value="account.id"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
=======
<optgroup
v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
label="Claude OAuth 账号"
>
<option
v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')"
v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')"
:key="account.id"
:value="account.id"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
</optgroup>
<optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0" label="Claude Console 账号">
<optgroup
v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0"
label="Claude Console 账号"
>
<option
v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')"
v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')"
:key="account.id"
:value="`console:${account.id}`"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
</optgroup>
>>>>>>> Stashed changes
</select>
</div>
<div>
@@ -389,7 +480,7 @@
使用共享账号池
</option>
<option
v-for="account in accounts.gemini.filter(a => a.isDedicated)"
v-for="account in localAccounts.gemini.filter(a => a.isDedicated)"
:key="account.id"
:value="account.id"
>
@@ -552,7 +643,6 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { showToast } from '@/utils/toast'
import { useAuthStore } from '@/stores/auth'
import { useClientsStore } from '@/stores/clients'
import { useApiKeysStore } from '@/stores/apiKeys'
import { apiClient } from '@/config/api'
@@ -564,12 +654,13 @@ const props = defineProps({
}
})
const emit = defineEmits(['close', 'success'])
const emit = defineEmits(['close', 'success', 'batch-success'])
const authStore = useAuthStore()
const clientsStore = useClientsStore()
const apiKeysStore = useApiKeysStore()
const loading = ref(false)
const accountsLoading = ref(false)
const localAccounts = ref({ claude: [], gemini: [] })
// 表单验证状态
const errors = ref({
@@ -590,6 +681,8 @@ const supportedClients = ref([])
// 表单数据
const form = reactive({
createType: 'single',
batchCount: 10,
name: '',
description: '',
tokenLimit: '',
@@ -615,8 +708,60 @@ const form = reactive({
onMounted(async () => {
supportedClients.value = await clientsStore.loadSupportedClients()
availableTags.value = await apiKeysStore.fetchTags()
// 初始化账号数据
localAccounts.value = props.accounts
})
// 刷新账号列表
const refreshAccounts = async () => {
accountsLoading.value = true
try {
const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
apiClient.get('/admin/claude-accounts'),
apiClient.get('/admin/claude-console-accounts'),
apiClient.get('/admin/gemini-accounts')
])
// 合并Claude OAuth账户和Claude Console账户
const claudeAccounts = []
if (claudeData.success) {
claudeData.data?.forEach(account => {
claudeAccounts.push({
...account,
platform: 'claude-oauth',
isDedicated: account.accountType === 'dedicated'
})
})
}
if (claudeConsoleData.success) {
claudeConsoleData.data?.forEach(account => {
claudeAccounts.push({
...account,
platform: 'claude-console',
isDedicated: account.accountType === 'dedicated'
})
})
}
localAccounts.value.claude = claudeAccounts
if (geminiData.success) {
localAccounts.value.gemini = (geminiData.data || []).map(account => ({
...account,
isDedicated: account.accountType === 'dedicated'
}))
}
showToast('账号列表已刷新', 'success')
} catch (error) {
showToast('刷新账号列表失败', 'error')
} finally {
accountsLoading.value = false
}
}
// 计算最小日期时间
const minDateTime = computed(() => {
const now = new Date()
@@ -725,12 +870,19 @@ const createApiKey = async () => {
return
}
// 批量创建时验证数量
if (form.createType === 'batch') {
if (!form.batchCount || form.batchCount < 2 || form.batchCount > 500) {
showToast('批量创建数量必须在 2-500 之间', 'error')
return
}
}
loading.value = true
try {
// 准备提交的数据
const data = {
name: form.name,
const baseData = {
description: form.description || undefined,
tokenLimit: form.tokenLimit !== '' && form.tokenLimit !== null ? parseInt(form.tokenLimit) : null,
rateLimitWindow: form.rateLimitWindow !== '' && form.rateLimitWindow !== null ? parseInt(form.rateLimitWindow) : null,
@@ -739,6 +891,9 @@ const createApiKey = async () => {
dailyCostLimit: form.dailyCostLimit !== '' && form.dailyCostLimit !== null ? parseFloat(form.dailyCostLimit) : 0,
expiresAt: form.expiresAt || undefined,
permissions: form.permissions,
<<<<<<< Updated upstream
claudeAccountId: form.claudeAccountId || undefined,
geminiAccountId: form.geminiAccountId || undefined,
tags: form.tags.length > 0 ? form.tags : undefined
}
@@ -772,8 +927,65 @@ const createApiKey = async () => {
showToast('API Key 创建成功', 'success')
emit('success', result.data)
emit('close')
=======
tags: form.tags.length > 0 ? form.tags : undefined,
enableModelRestriction: form.enableModelRestriction,
restrictedModels: form.restrictedModels,
enableClientRestriction: form.enableClientRestriction,
allowedClients: form.allowedClients
}
// 处理Claude账户绑定（区分OAuth和Console）
if (form.claudeAccountId) {
if (form.claudeAccountId.startsWith('console:')) {
// Claude Console账户
baseData.claudeConsoleAccountId = form.claudeAccountId.substring(8);
} else {
// Claude OAuth账户
baseData.claudeAccountId = form.claudeAccountId;
}
}
// Gemini账户绑定
if (form.geminiAccountId) {
baseData.geminiAccountId = form.geminiAccountId;
}
if (form.createType === 'single') {
// 单个创建
const data = {
...baseData,
name: form.name
}
const result = await apiClient.post('/admin/api-keys', data)
if (result.success) {
showToast('API Key 创建成功', 'success')
emit('success', result.data)
emit('close')
} else {
showToast(result.message || '创建失败', 'error')
}
>>>>>>> Stashed changes
} else {
showToast(result.message || '创建失败', 'error')
// 批量创建
const data = {
...baseData,
createType: 'batch',
baseName: form.name,
count: form.batchCount
}
const result = await apiClient.post('/admin/api-keys/batch', data)
if (result.success) {
showToast(`成功创建 ${result.data.length} 个 API Key`, 'success')
emit('batch-success', result.data)
emit('close')
} else {
showToast(result.message || '批量创建失败', 'error')
}
}
} catch (error) {
showToast('创建失败', 'error')

123
web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
View File

@@ -1,44 +1,44 @@
<template>
<Teleport to="body">
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
<div class="modal-content w-full max-w-4xl p-8 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
<i class="fas fa-edit text-white" />
<div class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4">
<div class="modal-content w-full max-w-4xl p-4 sm:p-6 md:p-8 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-4 sm:mb-6">
<div class="flex items-center gap-2 sm:gap-3">
<div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center">
<i class="fas fa-edit text-white text-sm sm:text-base" />
</div>
<h3 class="text-xl font-bold text-gray-900">
<h3 class="text-lg sm:text-xl font-bold text-gray-900">
编辑 API Key
</h3>
</div>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
class="text-gray-400 hover:text-gray-600 transition-colors p-1"
@click="$emit('close')"
>
<i class="fas fa-times text-xl" />
<i class="fas fa-times text-lg sm:text-xl" />
</button>
</div>
<form
class="space-y-6 modal-scroll-content custom-scrollbar flex-1"
class="space-y-4 sm:space-y-6 modal-scroll-content custom-scrollbar flex-1"
@submit.prevent="updateApiKey"
>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">名称</label>
<label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-3">名称</label>
<input
:value="form.name"
type="text"
disabled
class="form-input w-full bg-gray-100 cursor-not-allowed"
class="form-input w-full bg-gray-100 cursor-not-allowed text-sm"
>
<p class="text-xs text-gray-500 mt-2">
<p class="text-xs text-gray-500 mt-1 sm:mt-2">
名称不可修改
</p>
</div>
<!-- 标签 -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">标签</label>
<label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-3">标签</label>
<div class="space-y-4">
<!-- 已选择的标签 -->
<div v-if="form.tags.length > 0">
@@ -278,7 +278,19 @@
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">专属账号绑定</label>
<div class="flex items-center justify-between mb-3">
<label class="text-sm font-semibold text-gray-700">专属账号绑定</label>
<button
type="button"
class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="刷新账号列表"
:disabled="accountsLoading"
@click="refreshAccounts"
>
<i :class="['fas', accountsLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt', 'text-xs']" />
<span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
</button>
</div>
<div class="grid grid-cols-1 gap-3">
<div>
<label class="block text-sm font-medium text-gray-600 mb-1">Claude 专属账号</label>
@@ -290,24 +302,40 @@
<option value="">
使用共享账号池
</option>
<optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0" label="Claude OAuth 账号">
<<<<<<< Updated upstream
<option
v-for="account in accounts.claude"
:key="account.id"
:value="account.id"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
=======
<optgroup
v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth').length > 0"
label="Claude OAuth 账号"
>
<option
v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')"
v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-oauth')"
:key="account.id"
:value="account.id"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
</optgroup>
<optgroup v-if="accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0" label="Claude Console 账号">
<optgroup
v-if="localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console').length > 0"
label="Claude Console 账号"
>
<option
v-for="account in accounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')"
v-for="account in localAccounts.claude.filter(a => a.isDedicated && a.platform === 'claude-console')"
:key="account.id"
:value="`console:${account.id}`"
>
{{ account.name }} ({{ account.status === 'active' ? '正常' : '异常' }})
</option>
</optgroup>
>>>>>>> Stashed changes
</select>
</div>
<div>
@@ -321,7 +349,7 @@
使用共享账号池
</option>
<option
v-for="account in accounts.gemini"
v-for="account in localAccounts.gemini.filter(a => a.isDedicated)"
:key="account.id"
:value="account.id"
>
@@ -507,6 +535,8 @@ const emit = defineEmits(['close', 'success'])
const clientsStore = useClientsStore()
const apiKeysStore = useApiKeysStore()
const loading = ref(false)
const accountsLoading = ref(false)
const localAccounts = ref({ claude: [], gemini: [] })
// 支持的客户端列表
const supportedClients = ref([])
@@ -632,12 +662,65 @@ const updateApiKey = async () => {
}
}
// 刷新账号列表
const refreshAccounts = async () => {
accountsLoading.value = true
try {
const [claudeData, claudeConsoleData, geminiData] = await Promise.all([
apiClient.get('/admin/claude-accounts'),
apiClient.get('/admin/claude-console-accounts'),
apiClient.get('/admin/gemini-accounts')
])
// 合并Claude OAuth账户和Claude Console账户
const claudeAccounts = []
if (claudeData.success) {
claudeData.data?.forEach(account => {
claudeAccounts.push({
...account,
platform: 'claude-oauth',
isDedicated: account.accountType === 'dedicated'
})
})
}
if (claudeConsoleData.success) {
claudeConsoleData.data?.forEach(account => {
claudeAccounts.push({
...account,
platform: 'claude-console',
isDedicated: account.accountType === 'dedicated'
})
})
}
localAccounts.value.claude = claudeAccounts
if (geminiData.success) {
localAccounts.value.gemini = (geminiData.data || []).map(account => ({
...account,
isDedicated: account.accountType === 'dedicated'
}))
}
showToast('账号列表已刷新', 'success')
} catch (error) {
showToast('刷新账号列表失败', 'error')
} finally {
accountsLoading.value = false
}
}
// 初始化表单数据
onMounted(async () => {
// 加载支持的客户端和已存在的标签
supportedClients.value = await clientsStore.loadSupportedClients()
availableTags.value = await apiKeysStore.fetchTags()
// 初始化账号数据
localAccounts.value = props.accounts
form.name = props.apiKey.name
form.tokenLimit = props.apiKey.tokenLimit || ''
form.rateLimitWindow = props.apiKey.rateLimitWindow || ''

402
web/admin-spa/src/components/apikeys/ExpiryEditModal.vue Normal file
View File

@@ -0,0 +1,402 @@
<template>
<Teleport to="body">
<div
v-if="show"
class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
>
<!-- 模态框内容 -->
<div class="modal-content w-full max-w-lg p-8 mx-auto">
<!-- 头部 -->
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center">
<i class="fas fa-clock text-white" />
</div>
<div>
<h3 class="text-xl font-bold text-gray-900">
修改过期时间
</h3>
<p class="text-sm text-gray-600">
为 "{{ apiKey.name || 'API Key' }}" 设置新的过期时间
</p>
</div>
</div>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
@click="$emit('close')"
>
<i class="fas fa-times text-xl" />
</button>
</div>
<div class="space-y-6">
<!-- 当前状态显示 -->
<div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4 border border-gray-200">
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-gray-600 font-medium mb-1">
当前过期时间
</p>
<p class="text-sm font-semibold text-gray-800">
<template v-if="apiKey.expiresAt">
{{ formatExpireDate(apiKey.expiresAt) }}
<span
v-if="getExpiryStatus(apiKey.expiresAt)"
class="ml-2 text-xs font-normal"
:class="getExpiryStatus(apiKey.expiresAt).class"
>
({{ getExpiryStatus(apiKey.expiresAt).text }})
</span>
</template>
<template v-else>
<i class="fas fa-infinity mr-1 text-gray-500" />
永不过期
</template>
</p>
</div>
<div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-sm">
<i
:class="[
'fas fa-hourglass-half text-lg',
apiKey.expiresAt && isExpired(apiKey.expiresAt) ? 'text-red-500' : 'text-gray-400'
]"
/>
</div>
</div>
</div>
<!-- 快捷选项 -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-3">选择新的期限</label>
<div class="grid grid-cols-3 gap-2 mb-3">
<button
v-for="option in quickOptions"
:key="option.value"
:class="[
'px-3 py-2 rounded-lg text-sm font-medium transition-all',
localForm.expireDuration === option.value
? 'bg-blue-500 text-white shadow-md'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
@click="selectQuickOption(option.value)"
>
{{ option.label }}
</button>
<button
:class="[
'px-3 py-2 rounded-lg text-sm font-medium transition-all',
localForm.expireDuration === 'custom'
? 'bg-blue-500 text-white shadow-md'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
@click="selectQuickOption('custom')"
>
<i class="fas fa-calendar-alt mr-1" />
自定义
</button>
</div>
</div>
<!-- 自定义日期选择 -->
<div
v-if="localForm.expireDuration === 'custom'"
class="animate-fadeIn"
>
<label class="block text-sm font-semibold text-gray-700 mb-2">选择日期和时间</label>
<input
v-model="localForm.customExpireDate"
type="datetime-local"
class="form-input w-full"
:min="minDateTime"
@change="updateCustomExpiryPreview"
>
<p class="text-xs text-gray-500 mt-2">
选择一个未来的日期和时间作为过期时间
</p>
</div>
<!-- 预览新的过期时间 -->
<div
v-if="localForm.expiresAt !== apiKey.expiresAt"
class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200"
>
<div class="flex items-center justify-between">
<div>
<p class="text-xs text-blue-700 font-medium mb-1">
<i class="fas fa-arrow-right mr-1" />
新的过期时间
</p>
<p class="text-sm font-semibold text-blue-900">
<template v-if="localForm.expiresAt">
{{ formatExpireDate(localForm.expiresAt) }}
<span
v-if="getExpiryStatus(localForm.expiresAt)"
class="ml-2 text-xs font-normal"
:class="getExpiryStatus(localForm.expiresAt).class"
>
({{ getExpiryStatus(localForm.expiresAt).text }})
</span>
</template>
<template v-else>
<i class="fas fa-infinity mr-1" />
永不过期
</template>
</p>
</div>
<div class="w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-sm">
<i class="fas fa-check text-lg text-green-500" />
</div>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex gap-3 pt-2">
<button
class="flex-1 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition-colors"
@click="$emit('close')"
>
取消
</button>
<button
class="flex-1 btn btn-primary py-2.5 px-4 font-semibold"
:disabled="saving || localForm.expiresAt === apiKey.expiresAt"
@click="handleSave"
>
<div
v-if="saving"
class="loading-spinner mr-2"
/>
<i
v-else
class="fas fa-save mr-2"
/>
{{ saving ? '保存中...' : '保存更改' }}
</button>
</div>
</div>
</div>
</div>
</Teleport>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue'
const props = defineProps({
show: {
type: Boolean,
required: true
},
apiKey: {
type: Object,
required: true
}
})
const emit = defineEmits(['close', 'save'])
const saving = ref(false)
// 表单数据
const localForm = reactive({
expireDuration: '',
customExpireDate: '',
expiresAt: null
})
// 快捷选项
const quickOptions = [
{ value: '', label: '永不过期' },
{ value: '1d', label: '1 天' },
{ value: '7d', label: '7 天' },
{ value: '30d', label: '30 天' },
{ value: '90d', label: '90 天' },
{ value: '180d', label: '180 天' },
{ value: '365d', label: '1 年' },
{ value: '730d', label: '2 年' }
]
// 计算最小日期时间
const minDateTime = computed(() => {
const now = new Date()
now.setMinutes(now.getMinutes() + 1)
return now.toISOString().slice(0, 16)
})
// 监听显示状态，初始化表单
watch(() => props.show, (newVal) => {
if (newVal) {
initializeForm()
}
})
// 监听 apiKey 变化，重新初始化
watch(() => props.apiKey?.id, (newId) => {
if (newId && props.show) {
initializeForm()
}
})
// 初始化表单
const initializeForm = () => {
saving.value = false
if (props.apiKey.expiresAt) {
localForm.expireDuration = 'custom'
localForm.customExpireDate = new Date(props.apiKey.expiresAt).toISOString().slice(0, 16)
localForm.expiresAt = props.apiKey.expiresAt
} else {
localForm.expireDuration = ''
localForm.customExpireDate = ''
localForm.expiresAt = null
}
}
// 选择快捷选项
const selectQuickOption = (value) => {
localForm.expireDuration = value
if (!value) {
localForm.expiresAt = null
return
}
if (value === 'custom') {
return
}
const now = new Date()
const match = value.match(/(\d+)([dhmy])/)
if (match) {
const [, num, unit] = match
const amount = parseInt(num)
switch (unit) {
case 'd':
now.setDate(now.getDate() + amount)
break
case 'h':
now.setHours(now.getHours() + amount)
break
case 'm':
now.setMonth(now.getMonth() + amount)
break
case 'y':
now.setFullYear(now.getFullYear() + amount)
break
}
localForm.expiresAt = now.toISOString()
}
}
// 更新自定义过期时间
const updateCustomExpiryPreview = () => {
if (localForm.customExpireDate) {
localForm.expiresAt = new Date(localForm.customExpireDate).toISOString()
}
}
// 格式化过期日期
const formatExpireDate = (dateString) => {
if (!dateString) return ''
const date = new Date(dateString)
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
}
// 检查是否已过期
const isExpired = (dateString) => {
if (!dateString) return false
return new Date(dateString) < new Date()
}
// 获取过期状态
const getExpiryStatus = (expiresAt) => {
if (!expiresAt) return null
const now = new Date()
const expiryDate = new Date(expiresAt)
const diffMs = expiryDate - now
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
if (diffMs < 0) {
return {
text: '已过期',
class: 'text-red-600'
}
} else if (diffDays <= 7) {
return {
text: `${diffDays} 天后过期`,
class: 'text-orange-600'
}
} else if (diffDays <= 30) {
return {
text: `${diffDays} 天后过期`,
class: 'text-yellow-600'
}
} else {
return {
text: `${Math.ceil(diffDays / 30)} 个月后过期`,
class: 'text-green-600'
}
}
}
// 保存
const handleSave = () => {
saving.value = true
emit('save', {
keyId: props.apiKey.id,
expiresAt: localForm.expiresAt
})
}
// 重置保存状态
const resetSaving = () => {
saving.value = false
}
// 暴露方法给父组件
defineExpose({
resetSaving
})
</script>
<style scoped>
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.2s ease-out;
}
.loading-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

80
web/admin-spa/src/components/apistats/LimitConfig.vue
View File

@@ -1,66 +1,66 @@
<template>
<div>
<!-- 限制配置 -->
<div class="card p-6">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-shield-alt mr-3 text-red-500" />
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-shield-alt mr-2 md:mr-3 text-red-500 text-sm md:text-base" />
限制配置
</h3>
<div class="space-y-3">
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600">Token 限制</span>
<span class="font-medium text-gray-900">{{ statsData.limits.tokenLimit > 0 ? formatNumber(statsData.limits.tokenLimit) : '无限制' }}</span>
<span class="text-gray-600 text-sm md:text-base">Token 限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.tokenLimit > 0 ? formatNumber(statsData.limits.tokenLimit) : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">并发限制</span>
<span class="font-medium text-gray-900">{{ statsData.limits.concurrencyLimit > 0 ? statsData.limits.concurrencyLimit : '无限制' }}</span>
<span class="text-gray-600 text-sm md:text-base">并发限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.concurrencyLimit > 0 ? statsData.limits.concurrencyLimit : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">速率限制</span>
<span class="font-medium text-gray-900">
<span class="text-gray-600 text-sm md:text-base">速率限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
{{ statsData.limits.rateLimitRequests > 0 && statsData.limits.rateLimitWindow > 0
? `${statsData.limits.rateLimitRequests}次/${statsData.limits.rateLimitWindow}分钟`
: '无限制' }}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">每日费用限制</span>
<span class="font-medium text-gray-900">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
<span class="text-gray-600 text-sm md:text-base">每日费用限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">模型限制</span>
<span class="font-medium text-gray-900">
<span class="text-gray-600 text-sm md:text-base">模型限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<span
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1" />
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
</span>
<span
v-else
class="text-green-600"
>
<i class="fas fa-check-circle mr-1" />
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有模型
</span>
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">客户端限制</span>
<span class="font-medium text-gray-900">
<span class="text-gray-600 text-sm md:text-base">客户端限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<span
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1" />
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
</span>
<span
v-else
class="text-green-600"
>
<i class="fas fa-check-circle mr-1" />
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有客户端
</span>
</span>
@@ -72,34 +72,34 @@
<div
v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) ||
(statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)"
class="card p-6 mt-6"
class="card p-4 md:p-6 mt-4 md:mt-6"
>
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-3 text-amber-500" />
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-2 md:mr-3 text-amber-500 text-sm md:text-base" />
详细限制信息
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
<!-- 模型限制详情 -->
<div
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="bg-amber-50 border border-amber-200 rounded-lg p-4"
class="bg-amber-50 border border-amber-200 rounded-lg p-3 md:p-4"
>
<h4 class="font-bold text-amber-800 mb-3 flex items-center">
<i class="fas fa-robot mr-2" />
<h4 class="font-bold text-amber-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-robot mr-1 md:mr-2 text-xs md:text-sm" />
受限模型列表
</h4>
<div class="space-y-2">
<div class="space-y-1 md:space-y-2">
<div
v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="bg-white rounded px-3 py-2 text-sm border border-amber-200"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-amber-200"
>
<i class="fas fa-ban mr-2 text-red-500" />
<span class="text-gray-800">{{ model }}</span>
<i class="fas fa-ban mr-1 md:mr-2 text-red-500 text-xs" />
<span class="text-gray-800 break-all">{{ model }}</span>
</div>
</div>
<p class="text-xs text-amber-700 mt-3">
<p class="text-xs text-amber-700 mt-2 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 不能访问以上列出的模型
</p>
@@ -108,23 +108,23 @@
<!-- 客户端限制详情 -->
<div
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="bg-blue-50 border border-blue-200 rounded-lg p-4"
class="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4"
>
<h4 class="font-bold text-blue-800 mb-3 flex items-center">
<i class="fas fa-desktop mr-2" />
<h4 class="font-bold text-blue-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-desktop mr-1 md:mr-2 text-xs md:text-sm" />
允许的客户端
</h4>
<div class="space-y-2">
<div class="space-y-1 md:space-y-2">
<div
v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="bg-white rounded px-3 py-2 text-sm border border-blue-200"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-blue-200"
>
<i class="fas fa-check mr-2 text-green-500" />
<span class="text-gray-800">{{ client }}</span>
<i class="fas fa-check mr-1 md:mr-2 text-green-500 text-xs" />
<span class="text-gray-800 break-all">{{ client }}</span>
</div>
</div>
<p class="text-xs text-blue-700 mt-3">
<p class="text-xs text-blue-700 mt-2 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 只能被以上列出的客户端使用
</p>

58
web/admin-spa/src/components/apistats/ModelUsageStats.vue
View File

@@ -1,19 +1,22 @@
<template>
<div class="card p-6">
<div class="mb-6">
<h3 class="text-xl font-bold flex items-center text-gray-900">
<i class="fas fa-robot mr-3 text-indigo-500" />
模型使用统计 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<div class="mb-4 md:mb-6">
<h3 class="text-lg md:text-xl font-bold flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-robot mr-2 md:mr-3 text-indigo-500 text-sm md:text-base" />
模型使用统计
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
</div>
<!-- 模型统计加载状态 -->
<div
v-if="modelStatsLoading"
class="text-center py-8"
class="text-center py-6 md:py-8"
>
<i class="fas fa-spinner loading-spinner text-2xl mb-2 text-gray-600" />
<p class="text-gray-600">
<i class="fas fa-spinner loading-spinner text-xl md:text-2xl mb-2 text-gray-600" />
<p class="text-gray-600 text-sm md:text-base">
加载模型统计数据中...
</p>
</div>
@@ -21,33 +24,33 @@
<!-- 模型统计数据 -->
<div
v-else-if="modelStats.length > 0"
class="space-y-4"
class="space-y-3 md:space-y-4"
>
<div
v-for="(model, index) in modelStats"
:key="index"
class="model-usage-item"
>
<div class="flex justify-between items-start mb-3">
<div>
<h4 class="font-bold text-lg text-gray-900">
<div class="flex justify-between items-start mb-2 md:mb-3">
<div class="flex-1 min-w-0">
<h4 class="font-bold text-base md:text-lg text-gray-900 break-all">
{{ model.model }}
</h4>
<p class="text-gray-600 text-sm">
<p class="text-gray-600 text-xs md:text-sm">
{{ model.requests }} 次请求
</p>
</div>
<div class="text-right">
<div class="text-lg font-bold text-green-600">
<div class="text-right flex-shrink-0 ml-3">
<div class="text-base md:text-lg font-bold text-green-600">
{{ model.formatted?.total || '$0.000000' }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
总费用
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 text-xs md:text-sm">
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
输入 Token
@@ -87,10 +90,12 @@
<!-- 无模型数据 -->
<div
v-else
class="text-center py-8 text-gray-500"
class="text-center py-6 md:py-8 text-gray-500"
>
<i class="fas fa-chart-pie text-3xl mb-3" />
<p>暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据</p>
<i class="fas fa-chart-pie text-2xl md:text-3xl mb-3" />
<p class="text-sm md:text-base">
暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
</p>
</div>
</div>
</template>
@@ -157,12 +162,18 @@ const formatNumber = (num) => {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 16px;
padding: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.model-usage-item {
padding: 16px;
}
}
.model-usage-item::before {
content: '';
position: absolute;
@@ -196,11 +207,14 @@ const formatNumber = (num) => {
@media (max-width: 768px) {
.model-usage-item .grid {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.model-usage-item {
padding: 10px;
}
.model-usage-item .grid {
grid-template-columns: 1fr;
}

113
web/admin-spa/src/components/apistats/StatsOverview.vue
View File

@@ -1,66 +1,69 @@
<template>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
<!-- API Key 基本信息 -->
<div class="card p-6">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-info-circle mr-3 text-blue-500" />
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-info-circle mr-2 md:mr-3 text-blue-500 text-sm md:text-base" />
API Key 信息
</h3>
<div class="space-y-3">
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600">名称</span>
<span class="font-medium text-gray-900">{{ statsData.name }}</span>
<span class="text-gray-600 text-sm md:text-base">名称</span>
<span class="font-medium text-gray-900 text-sm md:text-base break-all">{{ statsData.name }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">状态</span>
<span class="text-gray-600 text-sm md:text-base">状态</span>
<span
:class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
class="font-medium"
class="font-medium text-sm md:text-base"
>
<i
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
class="mr-1"
class="mr-1 text-xs md:text-sm"
/>
{{ statsData.isActive ? '活跃' : '已停用' }}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">权限</span>
<span class="font-medium text-gray-900">{{ formatPermissions(statsData.permissions) }}</span>
<span class="text-gray-600 text-sm md:text-base">权限</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatPermissions(statsData.permissions) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">创建时间</span>
<span class="font-medium text-gray-900">{{ formatDate(statsData.createdAt) }}</span>
<span class="text-gray-600 text-sm md:text-base">创建时间</span>
<span class="font-medium text-gray-900 text-xs md:text-base break-all">{{ formatDate(statsData.createdAt) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">过期时间</span>
<div v-if="statsData.expiresAt">
<div class="flex justify-between items-start">
<span class="text-gray-600 text-sm md:text-base flex-shrink-0 mt-1">过期时间</span>
<div
v-if="statsData.expiresAt"
class="text-right"
>
<div
v-if="isApiKeyExpired(statsData.expiresAt)"
class="text-red-600 font-medium"
class="text-red-600 font-medium text-sm md:text-base"
>
<i class="fas fa-exclamation-circle mr-1" />
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
已过期
</div>
<div
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
class="text-orange-600 font-medium"
class="text-orange-600 font-medium text-xs md:text-base break-all"
>
<i class="fas fa-clock mr-1" />
<i class="fas fa-clock mr-1 text-xs md:text-sm" />
{{ formatExpireDate(statsData.expiresAt) }}
</div>
<div
v-else
class="text-gray-900 font-medium"
class="text-gray-900 font-medium text-xs md:text-base break-all"
>
{{ formatExpireDate(statsData.expiresAt) }}
</div>
</div>
<div
v-else
class="text-gray-400 font-medium"
class="text-gray-400 font-medium text-sm md:text-base"
>
<i class="fas fa-infinity mr-1" />
<i class="fas fa-infinity mr-1 text-xs md:text-sm" />
永不过期
</div>
</div>
@@ -68,41 +71,44 @@
</div>
<!-- 使用统计概览 -->
<div class="card p-6">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-chart-bar mr-3 text-green-500" />
使用统计概览 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-chart-bar mr-2 md:mr-3 text-green-500 text-sm md:text-base" />
使用统计概览
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-3 md:gap-4">
<div class="stat-card text-center">
<div class="text-3xl font-bold text-green-600">
<div class="text-lg md:text-3xl font-bold text-green-600">
{{ formatNumber(currentPeriodData.requests) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-blue-600">
<div class="text-lg md:text-3xl font-bold text-blue-600">
{{ formatNumber(currentPeriodData.allTokens) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-purple-600">
<div class="text-lg md:text-3xl font-bold text-purple-600">
{{ currentPeriodData.formattedCost || '$0.000000' }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-yellow-600">
<div class="text-lg md:text-3xl font-bold text-yellow-600">
{{ formatNumber(currentPeriodData.inputTokens) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
</div>
</div>
@@ -223,14 +229,21 @@ const formatPermissions = (permissions) => {
/* 统计卡片样式 */
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
border-radius: 20px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 24px;
padding: 16px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.stat-card {
border-radius: 20px;
padding: 24px;
}
}
.stat-card::before {
content: '';
position: absolute;
@@ -259,31 +272,11 @@ const formatPermissions = (permissions) => {
.card {
margin-bottom: 1rem;
}
.stat-card {
padding: 0.75rem;
}
.stat-card .text-3xl {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.card {
padding: 1rem;
}
.stat-card {
padding: 0.5rem;
}
.stat-card .text-3xl {
font-size: 1.25rem;
}
.stat-card .text-sm {
font-size: 0.75rem;
padding: 12px;
}
}
</style>

43
web/admin-spa/src/components/apistats/TokenDistribution.vue
View File

@@ -1,43 +1,46 @@
<template>
<div class="card p-6">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-coins mr-3 text-yellow-500" />
Token 使用分布 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-coins mr-2 md:mr-3 text-yellow-500 text-sm md:text-base" />
Token 使用分布
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="space-y-3">
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-arrow-right mr-2 text-green-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-right mr-1 md:mr-2 text-green-500 text-xs md:text-sm" />
输入 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-arrow-left mr-2 text-blue-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-left mr-1 md:mr-2 text-blue-500 text-xs md:text-sm" />
输出 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-save mr-2 text-purple-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-save mr-1 md:mr-2 text-purple-500 text-xs md:text-sm" />
缓存创建 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-download mr-2 text-orange-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-download mr-1 md:mr-2 text-orange-500 text-xs md:text-sm" />
缓存读取 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-200">
<div class="mt-3 md:mt-4 pt-3 md:pt-4 border-t border-gray-200">
<div class="flex justify-between items-center font-bold text-gray-900">
<span>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
<span class="text-sm md:text-base">{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
</div>

10
web/admin-spa/src/components/common/StatCard.vue
View File

@@ -2,21 +2,21 @@
<div class="stat-card">
<div class="flex items-start justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-gray-600 mb-1">
<p class="text-xs sm:text-sm font-medium text-gray-600 mb-1">
{{ title }}
</p>
<p class="text-3xl font-bold text-gray-800">
<p class="text-2xl sm:text-3xl font-bold text-gray-800">
{{ value }}
</p>
<p
v-if="subtitle"
class="text-sm text-gray-500 mt-2"
class="text-xs sm:text-sm text-gray-500 mt-1.5 sm:mt-2"
>
{{ subtitle }}
</p>
</div>
<div :class="['stat-icon', iconBgClass]">
<i :class="icon" />
<div :class="['stat-icon flex-shrink-0', iconBgClass]">
<i :class="[icon, 'text-sm sm:text-base']" />
</div>
</div>
</div>

20
web/admin-spa/src/components/layout/AppHeader.vue
View File

@@ -1,11 +1,11 @@
<template>
<!-- 顶部导航 -->
<div
class="glass-strong rounded-3xl p-6 mb-8 shadow-xl"
class="glass-strong rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 mb-4 sm:mb-6 md:mb-8 shadow-xl"
style="z-index: 10; position: relative;"
>
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-4">
<div class="flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4">
<div class="flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center sm:justify-start">
<LogoTitle
:loading="oemLoading"
:title="oemSettings.siteName"
@@ -15,8 +15,8 @@
>
<template #after-title>
<!-- 版本信息 -->
<div class="flex items-center gap-2">
<span class="text-sm text-gray-400 font-mono">v{{ versionInfo.current || '...' }}</span>
<div class="flex items-center gap-1 sm:gap-2">
<span class="text-xs sm:text-sm text-gray-400 font-mono">v{{ versionInfo.current || '...' }}</span>
<!-- 更新提示 -->
<a
v-if="versionInfo.hasUpdate"
@@ -35,11 +35,11 @@
<!-- 用户菜单 -->
<div class="relative user-menu-container">
<button
class="btn btn-primary px-4 py-3 flex items-center gap-2 relative"
class="btn btn-primary px-3 sm:px-4 py-2 sm:py-3 flex items-center gap-1 sm:gap-2 relative text-sm sm:text-base"
@click="userMenuOpen = !userMenuOpen"
>
<i class="fas fa-user-circle" />
<span>{{ currentUser.username || 'Admin' }}</span>
<span class="hidden sm:inline">{{ currentUser.username || 'Admin' }}</span>
<i
class="fas fa-chevron-down text-xs transition-transform duration-200"
:class="{ 'rotate-180': userMenuOpen }"
@@ -49,7 +49,7 @@
<!-- 悬浮菜单 -->
<div
v-if="userMenuOpen"
class="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
class="absolute right-0 top-full mt-2 w-48 sm:w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
style="z-index: 999999;"
@click.stop
>
@@ -138,9 +138,9 @@
<!-- 修改账户信息模态框 -->
<div
v-if="showChangePasswordModal"
class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
class="fixed inset-0 modal z-50 flex items-center justify-center p-3 sm:p-4"
>
<div class="modal-content w-full max-w-md p-8 mx-auto max-h-[90vh] flex flex-col">
<div class="modal-content w-full max-w-md p-4 sm:p-6 md:p-8 mx-auto max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">

6
web/admin-spa/src/components/layout/MainLayout.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="min-h-screen p-6">
<div class="min-h-screen p-3 sm:p-4 md:p-6">
<!-- 顶部导航 -->
<AppHeader />
<!-- 主内容区域 -->
<div
class="glass-strong rounded-3xl p-6 shadow-xl"
style="z-index: 1; min-height: calc(100vh - 240px);"
class="glass-strong rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 shadow-xl"
style="z-index: 1; min-height: calc(100vh - 120px);"
>
<!-- 标签栏 -->
<TabBar

56
web/admin-spa/src/components/layout/TabBar.vue
View File

@@ -1,16 +1,38 @@
<template>
<div class="flex flex-wrap gap-2 mb-6 bg-white/10 rounded-2xl p-2 backdrop-blur-sm">
<button
v-for="tab in tabs"
:key="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'
]"
@click="$emit('tab-change', tab.key)"
>
<i :class="tab.icon + ' mr-2'" />{{ tab.name }}
</button>
<div class="mb-4 sm:mb-6">
<!-- 移动端下拉选择器 -->
<div class="block sm:hidden bg-white/10 rounded-xl p-2 backdrop-blur-sm">
<select
:value="activeTab"
class="w-full px-4 py-3 bg-white/90 rounded-lg text-gray-700 font-semibold focus:outline-none focus:ring-2 focus:ring-primary-color"
@change="$emit('tab-change', $event.target.value)"
>
<option
v-for="tab in tabs"
:key="tab.key"
:value="tab.key"
>
{{ tab.name }}
</option>
</select>
</div>
<!-- 桌面端标签栏 -->
<div class="hidden sm:flex flex-wrap gap-2 bg-white/10 rounded-2xl p-2 backdrop-blur-sm">
<button
v-for="tab in tabs"
:key="tab.key"
:class="[
'tab-btn flex-1 py-2 sm:py-3 px-3 sm:px-4 md:px-6 text-xs sm:text-sm font-semibold transition-all duration-300',
activeTab === tab.key ? 'active' : 'text-gray-700 hover:bg-white/10 hover:text-gray-900'
]"
@click="$emit('tab-change', tab.key)"
>
<i :class="tab.icon + ' mr-1 sm:mr-2'" />
<span class="hidden md:inline">{{ tab.name }}</span>
<span class="md:hidden">{{ tab.shortName || tab.name }}</span>
</button>
</div>
</div>
</template>
@@ -25,11 +47,11 @@ defineProps({
defineEmits(['tab-change'])
const tabs = [
{ key: 'dashboard', name: '仪表板', icon: 'fas fa-tachometer-alt' },
{ key: 'apiKeys', name: 'API Keys', icon: 'fas fa-key' },
{ key: 'accounts', name: '账户管理', icon: 'fas fa-user-circle' },
{ key: 'tutorial', name: '使用教程', icon: 'fas fa-graduation-cap' },
{ key: 'settings', name: '其他设置', icon: 'fas fa-cogs' }
{ 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: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
{ key: 'settings', name: '其他设置', shortName: '设置', icon: 'fas fa-cogs' }
]
</script>