Spaces:
Running
Running
| <script setup> | |
| import { useDashboardStore } from '../../../stores/dashboard' | |
| import { computed, ref } from 'vue' | |
| import ApiCallsChart from './ApiCallsChart.vue' | |
| const dashboardStore = useDashboardStore() | |
| const apiKeyStatsVisible = ref(false) | |
| // 存储每个API密钥的模型折叠状态 | |
| const modelFoldState = ref({}) | |
| // 新增API密钥输入相关变量 | |
| const showApiKeyInput = ref(false) | |
| const newApiKeys = ref('') | |
| const apiKeyPassword = ref('') | |
| const apiKeyError = ref('') | |
| const apiKeySuccess = ref('') | |
| const isSubmitting = ref(false) | |
| // 检测API密钥相关状态 | |
| const showApiKeyTestDialog = ref(false) | |
| const apiKeyTestPassword = ref('') | |
| const apiKeyTestError = ref('') | |
| const apiKeyTestSuccess = ref('') | |
| const isTestingKeys = ref(false) | |
| const testingProgress = ref(0) | |
| const testingTotal = ref(0) | |
| // 清除失效API密钥相关状态 | |
| const showClearInvalidKeysDialog = ref(false) | |
| const clearInvalidKeysPassword = ref('') | |
| const clearInvalidKeysError = ref('') | |
| const clearInvalidKeysSuccess = ref('') | |
| const isClearingKeys = ref(false) | |
| // 输出有效API密钥相关状态 | |
| const showExportValidKeysDialog = ref(false) | |
| const exportValidKeysPassword = ref('') | |
| const exportValidKeysError = ref('') | |
| const exportValidKeysSuccess = ref('') | |
| const isExportingKeys = ref(false) | |
| const exportedKeys = ref([]) | |
| // 分页相关 | |
| const currentPage = ref(1) | |
| const itemsPerPage = 20 | |
| // 切换API密钥统计显示/隐藏 | |
| function toggleApiKeyStats() { | |
| apiKeyStatsVisible.value = !apiKeyStatsVisible.value | |
| } | |
| // 切换API密钥测试对话框显示/隐藏 | |
| function toggleApiKeyTestDialog() { | |
| showApiKeyTestDialog.value = !showApiKeyTestDialog.value | |
| if (!showApiKeyTestDialog.value) { | |
| // 重置表单 | |
| apiKeyTestPassword.value = '' | |
| apiKeyTestError.value = '' | |
| apiKeyTestSuccess.value = '' | |
| } | |
| } | |
| // 切换API密钥输入表单显示/隐藏 | |
| function toggleApiKeyInput() { | |
| showApiKeyInput.value = !showApiKeyInput.value | |
| if (!showApiKeyInput.value) { | |
| // 重置表单 | |
| newApiKeys.value = '' | |
| apiKeyPassword.value = '' | |
| apiKeyError.value = '' | |
| apiKeySuccess.value = '' | |
| } | |
| } | |
| // 提交新的API密钥 | |
| async function submitApiKeys() { | |
| // 重置消息 | |
| apiKeyError.value = '' | |
| apiKeySuccess.value = '' | |
| // 表单验证 | |
| if (!newApiKeys.value.trim()) { | |
| apiKeyError.value = '请输入API密钥' | |
| return | |
| } | |
| if (!apiKeyPassword.value.trim()) { | |
| apiKeyError.value = '请输入密码' | |
| return | |
| } | |
| // 验证API密钥格式 | |
| const keys = newApiKeys.value.split(',').map(key => key.trim()).filter(key => key) | |
| if (keys.length === 0) { | |
| apiKeyError.value = '请输入至少一个有效的API密钥' | |
| return | |
| } | |
| // 验证是否有无效的密钥格式 | |
| for (const key of keys) { | |
| if (key.length < 10) { // 简单验证，实际可能需要更复杂的验证 | |
| apiKeyError.value = `API密钥格式不正确: ${key}` | |
| return | |
| } | |
| } | |
| isSubmitting.value = true | |
| try { | |
| // 调用API添加密钥 | |
| await dashboardStore.updateConfig( | |
| 'geminiApiKeys', | |
| newApiKeys.value, | |
| apiKeyPassword.value | |
| ) | |
| // 成功提示 | |
| apiKeySuccess.value = `成功添加 ${keys.length} 个API密钥` | |
| // 清空输入框 | |
| newApiKeys.value = '' | |
| apiKeyPassword.value = '' | |
| // 刷新数据 | |
| await dashboardStore.fetchDashboardData() | |
| } catch (error) { | |
| apiKeyError.value = error.message || '添加API密钥失败' | |
| } finally { | |
| isSubmitting.value = false | |
| } | |
| } | |
| // 提交API密钥检测 | |
| async function submitApiKeyTest() { | |
| // 重置消息 | |
| apiKeyTestError.value = '' | |
| apiKeyTestSuccess.value = '' | |
| // 表单验证 | |
| if (!apiKeyTestPassword.value.trim()) { | |
| apiKeyTestError.value = '请输入密码' | |
| return | |
| } | |
| isTestingKeys.value = true | |
| testingProgress.value = 0 | |
| try { | |
| // 调用API进行密钥检测 | |
| const response = await fetch('/api/test-api-keys', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| password: apiKeyTestPassword.value | |
| }) | |
| }) | |
| if (!response.ok) { | |
| const errorData = await response.json() | |
| throw new Error(errorData.detail || '测试API密钥失败') | |
| } | |
| // 开始轮询检测进度 | |
| const pollInterval = setInterval(async () => { | |
| try { | |
| const progressResponse = await fetch('/api/test-api-keys/progress') | |
| const progressData = await progressResponse.json() | |
| testingProgress.value = progressData.completed | |
| testingTotal.value = progressData.total | |
| if (progressData.is_completed) { | |
| clearInterval(pollInterval) | |
| apiKeyTestSuccess.value = `检测完成！有效密钥: ${progressData.valid} 个，无效密钥: ${progressData.invalid} 个` | |
| // 刷新数据 | |
| await dashboardStore.fetchDashboardData() | |
| isTestingKeys.value = false | |
| // 如果成功，5秒后自动关闭对话框 | |
| setTimeout(() => { | |
| if (showApiKeyTestDialog.value) { | |
| showApiKeyTestDialog.value = false | |
| } | |
| }, 5000) | |
| } | |
| } catch (error) { | |
| console.error('轮询进度时出错:', error) | |
| } | |
| }, 1000) | |
| } catch (error) { | |
| apiKeyTestError.value = error.message || '测试API密钥失败' | |
| isTestingKeys.value = false | |
| } | |
| } | |
| // 切换清除失效API密钥对话框显示/隐藏 | |
| function toggleClearInvalidKeysDialog() { | |
| showClearInvalidKeysDialog.value = !showClearInvalidKeysDialog.value | |
| if (!showClearInvalidKeysDialog.value) { | |
| // 重置表单 | |
| clearInvalidKeysPassword.value = '' | |
| clearInvalidKeysError.value = '' | |
| clearInvalidKeysSuccess.value = '' | |
| } | |
| } | |
| // 提交清除失效API密钥 | |
| async function submitClearInvalidKeys() { | |
| // 重置消息 | |
| clearInvalidKeysError.value = '' | |
| clearInvalidKeysSuccess.value = '' | |
| // 表单验证 | |
| if (!clearInvalidKeysPassword.value.trim()) { | |
| clearInvalidKeysError.value = '请输入密码' | |
| return | |
| } | |
| isClearingKeys.value = true | |
| try { | |
| // 调用API清除失效密钥 | |
| const response = await fetch('/api/clear-invalid-api-keys', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| password: clearInvalidKeysPassword.value | |
| }) | |
| }) | |
| if (!response.ok) { | |
| const errorData = await response.json() | |
| throw new Error(errorData.detail || '清除失效API密钥失败') | |
| } | |
| const data = await response.json() | |
| clearInvalidKeysSuccess.value = data.message || '清除失效API密钥成功' | |
| // 清空密码输入框 | |
| clearInvalidKeysPassword.value = '' | |
| // 刷新数据 | |
| await dashboardStore.fetchDashboardData() | |
| // 如果成功，3秒后自动关闭对话框 | |
| setTimeout(() => { | |
| if (showClearInvalidKeysDialog.value) { | |
| showClearInvalidKeysDialog.value = false | |
| } | |
| }, 3000) | |
| } catch (error) { | |
| clearInvalidKeysError.value = error.message || '清除失效API密钥失败' | |
| } finally { | |
| isClearingKeys.value = false | |
| } | |
| } | |
| // 切换输出有效API密钥对话框显示/隐藏 | |
| function toggleExportValidKeysDialog() { | |
| showExportValidKeysDialog.value = !showExportValidKeysDialog.value | |
| if (!showExportValidKeysDialog.value) { | |
| // 重置表单 | |
| exportValidKeysPassword.value = '' | |
| exportValidKeysError.value = '' | |
| exportValidKeysSuccess.value = '' | |
| exportedKeys.value = [] | |
| } | |
| } | |
| // 提交输出有效API密钥 | |
| async function submitExportValidKeys() { | |
| // 重置消息 | |
| exportValidKeysError.value = '' | |
| exportValidKeysSuccess.value = '' | |
| exportedKeys.value = [] | |
| // 表单验证 | |
| if (!exportValidKeysPassword.value.trim()) { | |
| exportValidKeysError.value = '请输入密码' | |
| return | |
| } | |
| isExportingKeys.value = true | |
| try { | |
| // 调用API获取有效密钥 | |
| const response = await fetch('/api/export-valid-api-keys', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| password: exportValidKeysPassword.value | |
| }) | |
| }) | |
| if (!response.ok) { | |
| const errorData = await response.json() | |
| throw new Error(errorData.detail || '获取有效API密钥失败') | |
| } | |
| const data = await response.json() | |
| exportValidKeysSuccess.value = data.message || '获取有效API密钥成功' | |
| exportedKeys.value = data.keys || [] | |
| // 清空密码输入框 | |
| exportValidKeysPassword.value = '' | |
| } catch (error) { | |
| exportValidKeysError.value = error.message || '获取有效API密钥失败' | |
| } finally { | |
| isExportingKeys.value = false | |
| } | |
| } | |
| // 复制密钥到剪贴板 | |
| async function copyKeyToClipboard(key) { | |
| try { | |
| await navigator.clipboard.writeText(key) | |
| // 可以添加一个临时的成功提示 | |
| console.log('密钥已复制到剪贴板') | |
| } catch (error) { | |
| console.error('复制失败:', error) | |
| } | |
| } | |
| // 复制所有密钥到剪贴板 | |
| async function copyAllKeysToClipboard() { | |
| if (exportedKeys.value.length === 0) return | |
| try { | |
| const allKeys = exportedKeys.value.join('\n') | |
| await navigator.clipboard.writeText(allKeys) | |
| console.log('所有密钥已复制到剪贴板') | |
| } catch (error) { | |
| console.error('复制失败:', error) | |
| } | |
| } | |
| // 切换模型详情的折叠状态 | |
| function toggleModelFold(apiKeyId) { | |
| if (!modelFoldState.value[apiKeyId]) { | |
| modelFoldState.value[apiKeyId] = true | |
| } else { | |
| modelFoldState.value[apiKeyId] = !modelFoldState.value[apiKeyId] | |
| } | |
| } | |
| // 获取折叠图标类 | |
| const getFoldIconClass = (isVisible) => { | |
| return isVisible ? 'fold-icon rotated' : 'fold-icon' | |
| } | |
| // 计算进度条颜色类 | |
| const getProgressBarClass = (usagePercent) => { | |
| if (usagePercent > 75) return 'high' | |
| if (usagePercent > 50) return 'medium' | |
| return 'low' | |
| } | |
| // 获取模型列表并按使用次数排序 | |
| const getModelStats = (modelStats) => { | |
| if (!modelStats) return [] | |
| return Object.entries(modelStats) | |
| .map(([model, data]) => ({ | |
| model, | |
| calls: data.calls, | |
| tokens: data.tokens | |
| })) | |
| .sort((a, b) => b.calls - a.calls) | |
| } | |
| // 判断是否需要折叠 | |
| const shouldFoldModels = (modelStats) => { | |
| return modelStats && Object.keys(modelStats).length > 3 | |
| } | |
| // 计算总页数 | |
| const totalPages = computed(() => { | |
| if (!dashboardStore.apiKeyStats.length) return 0 | |
| return Math.ceil(dashboardStore.apiKeyStats.length / itemsPerPage) | |
| }) | |
| // 获取当前页的API密钥 | |
| const paginatedApiKeys = computed(() => { | |
| if (!dashboardStore.apiKeyStats.length) return [] | |
| const startIndex = (currentPage.value - 1) * itemsPerPage | |
| const endIndex = startIndex + itemsPerPage | |
| return dashboardStore.apiKeyStats.slice(startIndex, endIndex) | |
| }) | |
| // 切换到下一页 | |
| function nextPage() { | |
| if (currentPage.value < totalPages.value) { | |
| currentPage.value++ | |
| } | |
| } | |
| // 切换到上一页 | |
| function prevPage() { | |
| if (currentPage.value > 1) { | |
| currentPage.value-- | |
| } | |
| } | |
| // 计算总调用次数 | |
| const totalCalls = computed(() => { | |
| return dashboardStore.apiKeyStats.reduce((sum, key) => sum + key.calls_24h, 0) | |
| }) | |
| // 计算总Token使用量 | |
| const totalTokens = computed(() => { | |
| return dashboardStore.apiKeyStats.reduce((sum, key) => sum + key.total_tokens, 0) | |
| }) | |
| </script> | |
| <template> | |
| <div class="api-key-stats-container" v-if="!dashboardStore.status.enableVertex"> | |
| <div class="header-section"> | |
| <h3 class="section-title fold-header" @click="toggleApiKeyStats"> | |
| API调用统计 | |
| <span :class="getFoldIconClass(apiKeyStatsVisible)"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </span> | |
| </h3> | |
| <div class="header-buttons"> | |
| <!-- 添加API密钥按钮 --> | |
| <button class="add-api-key-button" @click="toggleApiKeyInput"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="12" y1="5" x2="12" y2="19"></line> | |
| <line x1="5" y1="12" x2="19" y2="12"></line> | |
| </svg> | |
| 添加API密钥 | |
| </button> | |
| <!-- 添加检测API密钥按钮 --> | |
| <button class="test-api-key-button" @click="toggleApiKeyTestDialog"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path> | |
| <line x1="16" y1="8" x2="2" y2="22"></line> | |
| <line x1="17.5" y1="15" x2="9" y2="15"></line> | |
| </svg> | |
| 检测API密钥 | |
| </button> | |
| <!-- 添加清除失效API密钥按钮 --> | |
| <button class="clear-invalid-keys-button" @click="toggleClearInvalidKeysDialog"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M3 6h18"></path> | |
| <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path> | |
| <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path> | |
| <line x1="10" y1="11" x2="10" y2="17"></line> | |
| <line x1="14" y1="11" x2="14" y2="17"></line> | |
| </svg> | |
| 清除失效密钥 | |
| </button> | |
| <!-- 添加输出有效API密钥按钮 --> | |
| <button class="export-valid-keys-button" @click="toggleExportValidKeysDialog"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7,10 12,15 17,10"></polyline> | |
| <line x1="12" y1="15" x2="12" y2="3"></line> | |
| </svg> | |
| 输出有效密钥 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- API密钥输入表单 --> | |
| <transition name="slide"> | |
| <div v-if="showApiKeyInput" class="api-key-input-form"> | |
| <div class="form-group"> | |
| <label for="newApiKeys">API密钥 (以逗号分隔)</label> | |
| <textarea | |
| id="newApiKeys" | |
| v-model="newApiKeys" | |
| placeholder="在此输入API密钥，多个密钥请用逗号分隔（注意：如果您使用的是云部署方案或您没有配置持久化，在此处配置的api密钥在重启后会丢失）" | |
| :disabled="isSubmitting" | |
| rows="3" | |
| class="api-key-textarea" | |
| ></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="apiKeyPassword">密码</label> | |
| <input | |
| id="apiKeyPassword" | |
| v-model="apiKeyPassword" | |
| type="password" | |
| placeholder="请输入管理密码" | |
| :disabled="isSubmitting" | |
| class="api-key-password" | |
| /> | |
| </div> | |
| <div v-if="apiKeyError" class="api-key-error"> | |
| {{ apiKeyError }} | |
| </div> | |
| <div v-if="apiKeySuccess" class="api-key-success"> | |
| {{ apiKeySuccess }} | |
| </div> | |
| <div class="form-actions"> | |
| <button | |
| class="submit-api-key" | |
| @click="submitApiKeys" | |
| :disabled="isSubmitting" | |
| > | |
| <span v-if="isSubmitting">提交中...</span> | |
| <span v-else>提交</span> | |
| </button> | |
| <button | |
| class="cancel-api-key" | |
| @click="toggleApiKeyInput" | |
| :disabled="isSubmitting" | |
| > | |
| 取消 | |
| </button> | |
| </div> | |
| </div> | |
| </transition> | |
| <!-- API密钥测试对话框 --> | |
| <transition name="slide"> | |
| <div v-if="showApiKeyTestDialog" class="api-key-test-form"> | |
| <div class="form-title"> | |
| <h4>API密钥检测</h4> | |
| <p class="form-description"> | |
| 此操作将同时检测所有有效和无效API密钥的状态，有效密钥将保存在GEMINI_API_KEYS中， | |
| 而无效密钥将移至INVALID_API_KEYS。该过程在后台异步进行，不会阻塞服务运行。 | |
| </p> | |
| </div> | |
| <div v-if="isTestingKeys" class="testing-progress"> | |
| <div class="progress-bar-container"> | |
| <div | |
| class="progress-bar-fill" | |
| :style="{ width: testingTotal ? `${(testingProgress / testingTotal) * 100}%` : '0%' }" | |
| ></div> | |
| </div> | |
| <div class="progress-text"> | |
| 正在检测: {{ testingProgress }} / {{ testingTotal }} ({{ Math.round((testingProgress / (testingTotal || 1)) * 100) }}%) | |
| </div> | |
| </div> | |
| <div v-else class="form-group"> | |
| <label for="apiKeyTestPassword">管理密码</label> | |
| <input | |
| id="apiKeyTestPassword" | |
| v-model="apiKeyTestPassword" | |
| type="password" | |
| placeholder="请输入管理密码以确认操作" | |
| class="api-key-password" | |
| /> | |
| </div> | |
| <div v-if="apiKeyTestError" class="api-key-error"> | |
| {{ apiKeyTestError }} | |
| </div> | |
| <div v-if="apiKeyTestSuccess" class="api-key-success"> | |
| {{ apiKeyTestSuccess }} | |
| </div> | |
| <div class="form-actions"> | |
| <button | |
| v-if="!isTestingKeys" | |
| class="submit-api-key" | |
| @click="submitApiKeyTest" | |
| > | |
| 开始检测 | |
| </button> | |
| <button | |
| class="cancel-api-key" | |
| @click="toggleApiKeyTestDialog" | |
| :disabled="isTestingKeys" | |
| > | |
| {{ isTestingKeys ? '检测中...' : '取消' }} | |
| </button> | |
| </div> | |
| </div> | |
| </transition> | |
| <!-- 清除失效API密钥对话框 --> | |
| <transition name="slide"> | |
| <div v-if="showClearInvalidKeysDialog" class="clear-invalid-keys-form"> | |
| <div class="form-title"> | |
| <h4>清除失效API密钥</h4> | |
| <p class="form-description"> | |
| 此操作将永久清除所有存储在INVALID_API_KEYS中的失效API密钥。 | |
| 清除后，这些密钥将无法恢复，请确认操作。 | |
| </p> | |
| </div> | |
| <div class="form-group"> | |
| <label for="clearInvalidKeysPassword">管理密码</label> | |
| <input | |
| id="clearInvalidKeysPassword" | |
| v-model="clearInvalidKeysPassword" | |
| type="password" | |
| placeholder="请输入管理密码以确认操作" | |
| class="api-key-password" | |
| :disabled="isClearingKeys" | |
| /> | |
| </div> | |
| <div v-if="clearInvalidKeysError" class="api-key-error"> | |
| {{ clearInvalidKeysError }} | |
| </div> | |
| <div v-if="clearInvalidKeysSuccess" class="api-key-success"> | |
| {{ clearInvalidKeysSuccess }} | |
| </div> | |
| <div class="form-actions"> | |
| <button | |
| class="submit-api-key" | |
| @click="submitClearInvalidKeys" | |
| :disabled="isClearingKeys" | |
| > | |
| <span v-if="isClearingKeys">清除中...</span> | |
| <span v-else>确认清除</span> | |
| </button> | |
| <button | |
| class="cancel-api-key" | |
| @click="toggleClearInvalidKeysDialog" | |
| :disabled="isClearingKeys" | |
| > | |
| 取消 | |
| </button> | |
| </div> | |
| </div> | |
| </transition> | |
| <!-- 输出有效API密钥对话框 --> | |
| <transition name="slide"> | |
| <div v-if="showExportValidKeysDialog" class="export-valid-keys-form"> | |
| <div class="form-title"> | |
| <h4>输出有效API密钥</h4> | |
| <p class="form-description"> | |
| 此操作将显示当前所有有效的API密钥。请注意保护您的密钥安全。 | |
| </p> | |
| </div> | |
| <div v-if="exportedKeys.length === 0" class="form-group"> | |
| <label for="exportValidKeysPassword">管理密码</label> | |
| <input | |
| id="exportValidKeysPassword" | |
| v-model="exportValidKeysPassword" | |
| type="password" | |
| placeholder="请输入管理密码以确认操作" | |
| class="api-key-password" | |
| :disabled="isExportingKeys" | |
| /> | |
| </div> | |
| <div v-if="exportValidKeysError" class="api-key-error"> | |
| {{ exportValidKeysError }} | |
| </div> | |
| <div v-if="exportValidKeysSuccess" class="api-key-success"> | |
| {{ exportValidKeysSuccess }} | |
| </div> | |
| <!-- 显示导出的密钥列表 --> | |
| <div v-if="exportedKeys.length > 0" class="exported-keys-container"> | |
| <div class="exported-keys-header"> | |
| <h5>有效API密钥列表 ({{ exportedKeys.length }} 个)</h5> | |
| <button class="copy-all-button" @click="copyAllKeysToClipboard"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> | |
| </svg> | |
| 复制全部 | |
| </button> | |
| </div> | |
| <div class="exported-keys-list"> | |
| <div v-for="(key, index) in exportedKeys" :key="index" class="exported-key-item"> | |
| <div class="key-text">{{ key }}</div> | |
| <button class="copy-key-button" @click="copyKeyToClipboard(key)" title="复制密钥"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button | |
| v-if="exportedKeys.length === 0" | |
| class="submit-api-key" | |
| @click="submitExportValidKeys" | |
| :disabled="isExportingKeys" | |
| > | |
| <span v-if="isExportingKeys">获取中...</span> | |
| <span v-else>获取密钥</span> | |
| </button> | |
| <button | |
| class="cancel-api-key" | |
| @click="toggleExportValidKeysDialog" | |
| :disabled="isExportingKeys" | |
| > | |
| 关闭 | |
| </button> | |
| </div> | |
| </div> | |
| </transition> | |
| <!-- 收起时显示的总计信息 --> | |
| <div v-if="!apiKeyStatsVisible" class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">{{ dashboardStore.status.last24hCalls }}</div> | |
| <div class="stat-label">24小时调用次数</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">{{ dashboardStore.status.hourlyCalls }}</div> | |
| <div class="stat-label">小时调用次数</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">{{ dashboardStore.status.minuteCalls }}</div> | |
| <div class="stat-label">分钟调用次数</div> | |
| </div> | |
| </div> | |
| <!-- 添加实时API调用图表 --> | |
| <ApiCallsChart v-if="!apiKeyStatsVisible" /> | |
| <!-- 展开时显示的详细API密钥信息 --> | |
| <transition name="fold"> | |
| <div v-if="apiKeyStatsVisible" class="fold-content"> | |
| <!-- 总计信息 --> | |
| <div class="stats-summary"> | |
| <div class="summary-item"> | |
| <div class="summary-label">总调用次数</div> | |
| <div class="summary-value">{{ totalCalls.toLocaleString() }}</div> | |
| </div> | |
| <div class="summary-item"> | |
| <div class="summary-label">总Token使用量</div> | |
| <div class="summary-value">{{ totalTokens.toLocaleString() }}</div> | |
| </div> | |
| <div class="summary-item"> | |
| <div class="summary-label">API密钥数量</div> | |
| <div class="summary-value">{{ dashboardStore.apiKeyStats.length }}</div> | |
| </div> | |
| </div> | |
| <!-- 添加实时API调用图表 --> | |
| <ApiCallsChart /> | |
| <div class="api-key-stats-list"> | |
| <div v-if="!dashboardStore.apiKeyStats.length" class="api-key-item"> | |
| 没有API密钥使用数据 | |
| </div> | |
| <div v-for="(stat, index) in paginatedApiKeys" :key="index" class="api-key-item"> | |
| <div class="api-key-header"> | |
| <div class="api-key-name">API密钥: {{ stat.api_key }}</div> | |
| <div class="api-key-usage"> | |
| <span class="api-key-count">{{ stat.calls_24h }}</span> / | |
| <span class="api-key-limit">{{ stat.limit }}</span> | |
| <span class="api-key-percent">({{ stat.usage_percent }}%)</span> | |
| </div> | |
| </div> | |
| <div class="progress-container"> | |
| <div | |
| class="progress-bar" | |
| :class="getProgressBarClass(stat.usage_percent)" | |
| :style="{ width: Math.min(stat.usage_percent, 100) + '%' }" | |
| ></div> | |
| </div> | |
| <!-- 显示总token使用量 --> | |
| <div class="total-tokens"> | |
| <span class="total-tokens-label">总Token使用量:</span> | |
| <span class="total-tokens-value">{{ stat.total_tokens.toLocaleString() }}</span> | |
| </div> | |
| <!-- 模型使用统计 --> | |
| <div v-if="stat.model_stats && Object.keys(stat.model_stats).length > 0" class="model-stats-container"> | |
| <div class="model-stats-header" @click="toggleModelFold(stat.api_key)"> | |
| <span class="model-stats-title">模型使用统计</span> | |
| <span :class="getFoldIconClass(modelFoldState[stat.api_key])"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| </span> | |
| </div> | |
| <transition name="fold"> | |
| <div v-if="modelFoldState[stat.api_key]" class="model-stats-list fold-content"> | |
| <!-- 显示所有模型或前三个模型 --> | |
| <div v-for="(modelStat, mIndex) in getModelStats(stat.model_stats).slice(0, shouldFoldModels(stat.model_stats) && !modelFoldState[stat.api_key] ? 3 : undefined)" :key="mIndex" class="model-stat-item"> | |
| <div class="model-info"> | |
| <div class="model-name">{{ modelStat.model }}</div> | |
| <div class="model-count"> | |
| <span>{{ modelStat.calls }}</span> | |
| <span class="model-usage-text">次调用</span> | |
| </div> | |
| <div class="model-tokens">{{ modelStat.tokens.toLocaleString() }} tokens</div> | |
| </div> | |
| </div> | |
| <!-- 显示"查看更多"按钮，如果模型数量超过3个且未展开全部 --> | |
| <div | |
| v-if="shouldFoldModels(stat.model_stats) && getModelStats(stat.model_stats).length > 3" | |
| class="view-more-models" | |
| @click="toggleModelFold(stat.api_key)" | |
| > | |
| {{ modelFoldState[stat.api_key] ? '收起' : '查看更多模型' }} | |
| </div> | |
| </div> | |
| </transition> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 分页控件 --> | |
| <div v-if="dashboardStore.apiKeyStats.length > itemsPerPage" class="pagination"> | |
| <button | |
| class="pagination-button" | |
| :disabled="currentPage === 1" | |
| @click="prevPage" | |
| > | |
| 上一页 | |
| </button> | |
| <div class="pagination-info"> | |
| 第 {{ currentPage }} 页 / 共 {{ totalPages }} 页 | |
| </div> | |
| <button | |
| class="pagination-button" | |
| :disabled="currentPage === totalPages" | |
| @click="nextPage" | |
| > | |
| 下一页 | |
| </button> | |
| </div> | |
| </div> | |
| </transition> | |
| </div> | |
| </template> | |
| <style scoped> | |
| .api-key-stats-container { | |
| margin-top: 20px; | |
| } | |
| /* 添加头部区域样式 */ | |
| .header-section { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| /* 头部按钮容器样式 */ | |
| .header-buttons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| /* API密钥添加按钮样式 */ | |
| .add-api-key-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--button-primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .add-api-key-button svg { | |
| transition: transform 0.3s ease; | |
| stroke: white; | |
| } | |
| .add-api-key-button:hover { | |
| background-color: var(--button-primary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .add-api-key-button:hover svg { | |
| transform: rotate(90deg); | |
| stroke: white; | |
| } | |
| /* API密钥检测按钮样式 */ | |
| .test-api-key-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--button-secondary); | |
| color: var(--button-secondary-text); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .test-api-key-button svg { | |
| transition: transform 0.3s ease; | |
| stroke: var(--button-secondary-text); | |
| } | |
| .test-api-key-button:hover { | |
| background-color: var(--button-secondary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .test-api-key-button:hover svg { | |
| transform: rotate(15deg); | |
| } | |
| /* 清除失效API密钥按钮样式 */ | |
| .clear-invalid-keys-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--button-danger, #dc3545); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .clear-invalid-keys-button svg { | |
| transition: transform 0.3s ease; | |
| stroke: white; | |
| } | |
| .clear-invalid-keys-button:hover { | |
| background-color: var(--button-danger-hover, #c82333); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .clear-invalid-keys-button:hover svg { | |
| transform: scale(1.1); | |
| } | |
| /* 输出有效API密钥按钮样式 */ | |
| .export-valid-keys-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--button-success, #28a745); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .export-valid-keys-button svg { | |
| transition: transform 0.3s ease; | |
| stroke: white; | |
| } | |
| .export-valid-keys-button:hover { | |
| background-color: var(--button-success-hover, #218838); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .export-valid-keys-button:hover svg { | |
| transform: translateY(-1px); | |
| } | |
| /* API密钥测试表单样式 */ | |
| .api-key-test-form { | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--card-border); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* 清除失效API密钥表单样式 */ | |
| .clear-invalid-keys-form { | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--card-border); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* 输出有效API密钥表单样式 */ | |
| .export-valid-keys-form { | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--card-border); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* 导出的密钥容器样式 */ | |
| .exported-keys-container { | |
| margin-top: 15px; | |
| } | |
| .exported-keys-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .exported-keys-header h5 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--color-heading); | |
| margin: 0; | |
| } | |
| .copy-all-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background-color: var(--button-primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .copy-all-button:hover { | |
| background-color: var(--button-primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .copy-all-button svg { | |
| stroke: white; | |
| } | |
| .exported-keys-list { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| background-color: var(--color-background); | |
| } | |
| .exported-key-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 12px; | |
| border-bottom: 1px solid var(--color-border); | |
| transition: background-color 0.2s ease; | |
| } | |
| .exported-key-item:last-child { | |
| border-bottom: none; | |
| } | |
| .exported-key-item:hover { | |
| background-color: var(--color-background-mute); | |
| } | |
| .key-text { | |
| font-family: 'Courier New', monospace; | |
| font-size: 13px; | |
| color: var(--color-text); | |
| word-break: break-all; | |
| flex: 1; | |
| margin-right: 10px; | |
| } | |
| .copy-key-button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: transparent; | |
| color: var(--color-text-muted); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| padding: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| min-width: 28px; | |
| height: 28px; | |
| } | |
| .copy-key-button:hover { | |
| background-color: var(--button-primary); | |
| color: white; | |
| border-color: var(--button-primary); | |
| } | |
| .copy-key-button svg { | |
| stroke: currentColor; | |
| } | |
| .form-title { | |
| margin-bottom: 15px; | |
| } | |
| .form-title h4 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--color-heading); | |
| margin-bottom: 8px; | |
| } | |
| .form-description { | |
| font-size: 14px; | |
| color: var(--color-text); | |
| line-height: 1.5; | |
| opacity: 0.8; | |
| } | |
| /* 进度条样式 */ | |
| .testing-progress { | |
| margin: 15px 0; | |
| } | |
| .progress-bar-container { | |
| height: 10px; | |
| background-color: var(--color-background-soft); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| margin-bottom: 10px; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-full); | |
| transition: width 0.3s ease; | |
| position: relative; | |
| } | |
| .progress-bar-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transform: translateX(-100%); | |
| animation: progressShine 2s infinite; | |
| } | |
| .progress-text { | |
| font-size: 14px; | |
| text-align: center; | |
| color: var(--color-heading); | |
| } | |
| /* 滑动动画 */ | |
| .slide-enter-active, | |
| .slide-leave-active { | |
| transition: all 0.3s ease; | |
| max-height: 500px; | |
| opacity: 1; | |
| overflow: hidden; | |
| } | |
| .slide-enter-from, | |
| .slide-leave-to { | |
| max-height: 0; | |
| opacity: 0; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| margin-top: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background-color: var(--stats-item-bg); | |
| padding: 15px; | |
| border-radius: var(--radius-lg); | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1px solid var(--card-border); | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient-secondary); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-md); | |
| border-color: var(--button-primary); | |
| } | |
| .stat-value { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: var(--button-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| transition: all 0.3s ease; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: var(--color-text); | |
| margin-top: 5px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| transition: all 0.3s ease; | |
| opacity: 0.8; | |
| } | |
| /* 总计信息样式 */ | |
| .stats-summary { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-lg); | |
| padding: 15px; | |
| border: 1px solid var(--card-border); | |
| } | |
| .summary-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| flex: 1; | |
| } | |
| .summary-label { | |
| font-size: 12px; | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| margin-bottom: 5px; | |
| } | |
| .summary-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--button-primary); | |
| } | |
| .api-key-stats-list { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); /* 电脑上显示为三列 */ | |
| gap: 15px; | |
| margin-top: 15px; | |
| } | |
| .api-key-item { | |
| background-color: var(--stats-item-bg); | |
| border-radius: var(--radius-lg); | |
| padding: 15px; | |
| box-shadow: var(--shadow-sm); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1px solid var(--card-border); | |
| } | |
| .api-key-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient-info); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .api-key-item:hover::before { | |
| opacity: 1; | |
| } | |
| .api-key-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-md); | |
| border-color: var(--button-primary); | |
| } | |
| .api-key-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .api-key-name { | |
| font-weight: bold; | |
| color: var(--color-heading); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 50%; | |
| transition: all 0.3s ease; | |
| } | |
| .api-key-usage { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| white-space: nowrap; | |
| } | |
| .api-key-count { | |
| font-weight: bold; | |
| color: var(--button-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| height: 10px; | |
| background-color: var(--color-background-soft); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| margin: 10px 0; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: var(--radius-full); | |
| transition: width 0.5s ease, background-color 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transform: translateX(-100%); | |
| animation: progressShine 2s infinite; | |
| } | |
| @keyframes progressShine { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| .progress-bar.low { | |
| background: var(--gradient-success); | |
| } | |
| .progress-bar.medium { | |
| background: var(--gradient-warning); | |
| } | |
| .progress-bar.high { | |
| background: var(--gradient-danger); | |
| } | |
| /* 模型统计样式 */ | |
| .model-stats-container { | |
| margin-top: 10px; | |
| border-top: 1px dashed var(--color-border); | |
| padding-top: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .model-stats-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| user-select: none; | |
| margin-bottom: 8px; | |
| color: var(--color-heading); | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| padding: 5px 8px; | |
| border-radius: var(--radius-md); | |
| } | |
| .model-stats-header:hover { | |
| background-color: var(--color-background-mute); | |
| } | |
| .model-stats-title { | |
| font-weight: 600; | |
| } | |
| .model-stats-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .model-stat-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| padding: 10px; | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-md); | |
| font-size: 13px; | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .model-stat-item:hover { | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-sm); | |
| border-color: var(--button-primary); | |
| } | |
| .model-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| width: 100%; | |
| } | |
| .model-name { | |
| font-weight: 500; | |
| color: var(--color-heading); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 100%; | |
| transition: all 0.3s ease; | |
| } | |
| .model-count { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--button-primary); | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .model-usage-text { | |
| color: var(--color-text); | |
| font-weight: normal; | |
| font-size: 12px; | |
| transition: all 0.3s ease; | |
| opacity: 0.8; | |
| } | |
| .model-tokens { | |
| font-size: 12px; | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| transition: all 0.3s ease; | |
| } | |
| .view-more-models { | |
| text-align: center; | |
| color: var(--button-primary); | |
| font-size: 12px; | |
| cursor: pointer; | |
| padding: 8px; | |
| margin-top: 5px; | |
| border-radius: var(--radius-md); | |
| background-color: rgba(79, 70, 229, 0.05); | |
| transition: all 0.3s ease; | |
| border: 1px dashed var(--button-primary); | |
| } | |
| .view-more-models:hover { | |
| background-color: rgba(79, 70, 229, 0.1); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* 折叠动画和UI优化 */ | |
| .section-title { | |
| color: var(--color-heading); | |
| border-bottom: 1px solid var(--color-border); | |
| padding-bottom: 10px; | |
| margin-bottom: 20px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 50px; | |
| height: 2px; | |
| background: var(--gradient-primary); | |
| } | |
| .fold-header { | |
| cursor: pointer; | |
| user-select: none; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: all 0.3s ease; | |
| border-radius: var(--radius-md); | |
| padding: 8px 12px; | |
| background-color: var(--color-background-mute); | |
| margin-bottom: 0; | |
| margin-right: 10px; | |
| flex: 1; | |
| } | |
| .fold-header:hover { | |
| background-color: var(--color-background-soft); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .fold-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: transform 0.3s ease; | |
| } | |
| .fold-icon.rotated { | |
| transform: rotate(180deg); | |
| } | |
| .fold-content { | |
| overflow: hidden; | |
| } | |
| /* 折叠动画 */ | |
| .fold-enter-active, | |
| .fold-leave-active { | |
| transition: all 0.3s ease; | |
| max-height: 1000px; | |
| opacity: 1; | |
| overflow: hidden; | |
| } | |
| .fold-enter-from, | |
| .fold-leave-to { | |
| max-height: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| } | |
| /* 修改总token使用量样式 */ | |
| .total-tokens { | |
| margin-top: 6px; | |
| padding: 8px 12px; | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--card-border); | |
| } | |
| .total-tokens:hover { | |
| background-color: var(--color-background-soft); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| border-color: var(--button-primary); | |
| } | |
| .total-tokens-label { | |
| font-size: 11px; | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| white-space: nowrap; | |
| transition: all 0.3s ease; | |
| } | |
| .total-tokens-value { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--button-primary); | |
| transition: all 0.3s ease; | |
| } | |
| /* 分页控件样式 */ | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 20px; | |
| gap: 15px; | |
| } | |
| .pagination-button { | |
| background-color: var(--button-secondary); | |
| color: var(--button-secondary-text); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| padding: 8px 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .pagination-button:hover:not(:disabled) { | |
| background-color: var(--button-secondary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .pagination-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .pagination-info { | |
| font-size: 14px; | |
| color: var(--color-text); | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| .header-section { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .header-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 8px; | |
| width: 100%; | |
| } | |
| .add-api-key-button, | |
| .test-api-key-button, | |
| .clear-invalid-keys-button, | |
| .export-valid-keys-button { | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| justify-content: center; | |
| min-height: 36px; | |
| gap: 6px; | |
| } | |
| .add-api-key-button svg, | |
| .test-api-key-button svg, | |
| .clear-invalid-keys-button svg, | |
| .export-valid-keys-button svg { | |
| width: 14px; | |
| height: 14px; | |
| flex-shrink: 0; | |
| } | |
| .api-key-stats-list { | |
| grid-template-columns: 1fr; | |
| } | |
| .api-key-item { | |
| padding: 10px; | |
| } | |
| .api-key-name { | |
| font-size: 13px; | |
| max-width: 100%; | |
| color: var(--button-primary); | |
| } | |
| .api-key-usage { | |
| font-size: 12px; | |
| gap: 5px; | |
| } | |
| .model-stats-container { | |
| margin-top: 10px; | |
| } | |
| .model-info { | |
| gap: 3px; | |
| } | |
| .total-tokens-label { | |
| color: var(--color-heading); | |
| opacity: 0.9; | |
| } | |
| .api-key-test-form, | |
| .clear-invalid-keys-form, | |
| .export-valid-keys-form { | |
| padding: 15px; | |
| } | |
| .form-title h4 { | |
| font-size: 14px; | |
| } | |
| .form-description { | |
| font-size: 12px; | |
| } | |
| .progress-text { | |
| font-size: 12px; | |
| } | |
| .exported-keys-list { | |
| max-height: 250px; | |
| } | |
| .exported-key-item { | |
| padding: 8px 10px; | |
| } | |
| .key-text { | |
| font-size: 12px; | |
| } | |
| .copy-key-button { | |
| min-width: 24px; | |
| height: 24px; | |
| padding: 3px; | |
| } | |
| .copy-all-button { | |
| padding: 5px 10px; | |
| font-size: 11px; | |
| } | |
| } | |
| /* 超小屏幕优化 */ | |
| @media (max-width: 480px) { | |
| .header-buttons { | |
| grid-template-columns: 1fr; | |
| gap: 6px; | |
| } | |
| .add-api-key-button, | |
| .test-api-key-button, | |
| .clear-invalid-keys-button, | |
| .export-valid-keys-button { | |
| padding: 10px 12px; | |
| font-size: 13px; | |
| min-height: 40px; | |
| gap: 8px; | |
| } | |
| .add-api-key-button svg, | |
| .test-api-key-button svg, | |
| .clear-invalid-keys-button svg, | |
| .export-valid-keys-button svg { | |
| width: 16px; | |
| height: 16px; | |
| flex-shrink: 0; | |
| } | |
| .api-key-test-form, | |
| .clear-invalid-keys-form, | |
| .export-valid-keys-form { | |
| padding: 12px; | |
| margin-bottom: 15px; | |
| } | |
| .form-title h4 { | |
| font-size: 15px; | |
| } | |
| .form-description { | |
| font-size: 13px; | |
| } | |
| .form-actions { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .submit-api-key, | |
| .cancel-api-key { | |
| width: 100%; | |
| padding: 10px; | |
| font-size: 14px; | |
| } | |
| .exported-keys-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| .copy-all-button { | |
| align-self: flex-end; | |
| } | |
| } | |
| /* 极小屏幕优化 */ | |
| @media (max-width: 360px) { | |
| .header-buttons { | |
| gap: 4px; | |
| } | |
| .add-api-key-button, | |
| .test-api-key-button, | |
| .clear-invalid-keys-button, | |
| .export-valid-keys-button { | |
| padding: 8px 10px; | |
| font-size: 12px; | |
| min-height: 36px; | |
| gap: 6px; | |
| } | |
| .add-api-key-button svg, | |
| .test-api-key-button svg, | |
| .clear-invalid-keys-button svg, | |
| .export-valid-keys-button svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .api-key-test-form, | |
| .clear-invalid-keys-form, | |
| .export-valid-keys-form { | |
| padding: 10px; | |
| } | |
| .form-title h4 { | |
| font-size: 14px; | |
| } | |
| .form-description { | |
| font-size: 12px; | |
| } | |
| .submit-api-key, | |
| .cancel-api-key { | |
| padding: 8px; | |
| font-size: 13px; | |
| } | |
| } | |
| /* 在中等屏幕上显示为两列 */ | |
| @media (max-width: 992px) { | |
| .api-key-stats-list { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* 在小屏幕上显示为一列 */ | |
| @media (max-width: 576px) { | |
| .api-key-stats-list { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* API密钥输入表单样式 */ | |
| .api-key-input-form { | |
| background-color: var(--color-background-mute); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--card-border); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-heading); | |
| } | |
| .api-key-textarea { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| background-color: var(--color-background); | |
| color: var(--color-text); | |
| font-family: inherit; | |
| font-size: 14px; | |
| resize: vertical; | |
| transition: all 0.3s ease; | |
| } | |
| .api-key-textarea:focus { | |
| outline: none; | |
| border-color: var(--button-primary); | |
| box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); | |
| } | |
| .api-key-password { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| background-color: var(--color-background); | |
| color: var(--color-text); | |
| font-family: inherit; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| } | |
| .api-key-password:focus { | |
| outline: none; | |
| border-color: var(--button-primary); | |
| box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); | |
| } | |
| .api-key-error { | |
| color: var(--color-danger); | |
| font-size: 14px; | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| background-color: rgba(239, 68, 68, 0.1); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-danger); | |
| } | |
| .api-key-success { | |
| color: var(--color-success); | |
| font-size: 14px; | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| background-color: rgba(34, 197, 94, 0.1); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-success); | |
| } | |
| .form-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .submit-api-key { | |
| padding: 8px 20px; | |
| background-color: var(--button-primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-api-key:hover:not(:disabled) { | |
| background-color: var(--button-primary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .submit-api-key:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .cancel-api-key { | |
| padding: 8px 20px; | |
| background-color: var(--button-secondary); | |
| color: var(--button-secondary-text); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .cancel-api-key:hover:not(:disabled) { | |
| background-color: var(--button-secondary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .cancel-api-key:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| </style> |