fork-it/gpt-load
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 秘钥管理 web v1

Browse Source
This commit is contained in:
tbphp
2025-07-04 16:48:58 +08:00
parent e504fb98d7
commit 8159ea52c9
9 changed files with 2520 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/eslint.config.js
View File

@@ -39,7 +39,7 @@ export default [
"warn",
{
html: {
void: "never",
void: "always",
normal: "always",
component: "always",
},
@@ -51,7 +51,15 @@ export default [
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/html-indent": ["error", 2],
"vue/script-indent": ["error", 2],
"vue/script-indent": [
"error",
2,
{
baseIndent: 0,
switchCase: 1,
ignores: [],
},
],
"vue/component-tags-order": ["error", { order: ["script", "template", "style"] }],
// Vue 3 Composition API 规则

4
web/src/App.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import GlobalProviders from "@/components/GlobalProviders.vue";
import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
import Layout from "@/components/Layout.vue";
import { useAuthKey } from "@/services/auth";
import { computed } from "vue";
@@ -15,6 +16,9 @@ const isLoggedIn = computed(() => !!authKey.value);
<layout v-if="isLoggedIn" key="layout" />
<router-view v-else key="auth" />
</transition>
<!-- 全局任务进度条 -->
<global-task-progress-bar />
</div>
</global-providers>
</template>

495
web/src/api/keys.ts Normal file
View File

@@ -0,0 +1,495 @@
import type { APIKey, Group, GroupStats, TaskInfo } from "@/types/models";
// Mock数据 - 实际开发时应该从后端获取
const mockGroups: Group[] = [
{
id: 1,
name: "openai-main",
display_name: "OpenAI主组",
description: "OpenAI主要API组",
sort: 1,
channel_type: "openai",
upstreams: [
{ url: "https://api.openai.com", weight: 1 },
{ url: "https://api.openai.com/v1", weight: 2 },
],
config: {
test_model: "gpt-3.5-turbo",
param_overrides: { temperature: 0.7 },
request_timeout: 30000,
},
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
},
{
id: 2,
name: "gemini-backup",
display_name: "Gemini备用组",
description: "Gemini备用API组",
sort: 2,
channel_type: "gemini",
upstreams: [{ url: "https://generativelanguage.googleapis.com", weight: 1 }],
config: {
test_model: "gemini-pro",
param_overrides: {},
request_timeout: 25000,
},
created_at: "2024-01-02T00:00:00Z",
updated_at: "2024-01-02T00:00:00Z",
},
{
id: 3,
name: "silicon-test",
display_name: "Silicon测试组",
description: "Silicon Flow测试API组",
sort: 3,
channel_type: "silicon",
upstreams: [{ url: "https://api.siliconflow.cn", weight: 1 }],
config: {
test_model: "qwen-turbo",
param_overrides: {},
request_timeout: 20000,
},
created_at: "2024-01-03T00:00:00Z",
updated_at: "2024-01-03T00:00:00Z",
},
];
const mockAPIKeys: APIKey[] = [
{
id: 1,
group_id: 1,
key_value: "sk-1234567890abcdef1234567890abcdef",
status: "active",
request_count: 1250,
failure_count: 3,
last_used_at: "2024-01-01T12:00:00Z",
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
},
{
id: 2,
group_id: 1,
key_value: "sk-abcdef1234567890abcdef1234567890",
status: "inactive",
request_count: 890,
failure_count: 15,
last_used_at: "2024-01-01T10:00:00Z",
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
},
{
id: 3,
group_id: 1,
key_value: "sk-fedcba0987654321fedcba0987654321",
status: "active",
request_count: 2100,
failure_count: 1,
last_used_at: "2024-01-01T14:00:00Z",
created_at: "2024-01-01T00:00:00Z",
updated_at: "2024-01-01T00:00:00Z",
},
{
id: 4,
group_id: 2,
key_value: "gk-1234567890abcdef1234567890abcdef",
status: "active",
request_count: 450,
failure_count: 2,
last_used_at: "2024-01-02T11:00:00Z",
created_at: "2024-01-02T00:00:00Z",
updated_at: "2024-01-02T00:00:00Z",
},
{
id: 5,
group_id: 3,
key_value: "sf-1234567890abcdef1234567890abcdef",
status: "active",
request_count: 320,
failure_count: 0,
last_used_at: "2024-01-03T09:00:00Z",
created_at: "2024-01-03T00:00:00Z",
updated_at: "2024-01-03T00:00:00Z",
},
];
let mockTaskInfo: TaskInfo = {
is_running: false,
};
export const keysApi = {
// 获取所有分组
async getGroups(): Promise<Group[]> {
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 300));
return mockGroups;
},
// 获取分组信息
async getGroup(groupId: number): Promise<Group | null> {
await new Promise(resolve => setTimeout(resolve, 200));
return mockGroups.find(g => g.id === groupId) || null;
},
// 创建分组
async createGroup(group: Partial<Group>): Promise<Group> {
await new Promise(resolve => setTimeout(resolve, 500));
const newGroup: Group = {
id: Math.max(...mockGroups.map(g => g.id)) + 1,
name: group.name || "",
display_name: group.display_name || "",
description: group.description || "",
sort: group.sort || 0,
channel_type: group.channel_type || "openai",
upstreams: group.upstreams || [],
config: group.config || {},
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
};
mockGroups.push(newGroup);
return newGroup;
},
// 更新分组
async updateGroup(groupId: number, group: Partial<Group>): Promise<Group> {
await new Promise(resolve => setTimeout(resolve, 500));
const index = mockGroups.findIndex(g => g.id === groupId);
if (index === -1) {
throw new Error("分组不存在");
}
mockGroups[index] = {
...mockGroups[index],
...group,
updated_at: new Date().toISOString(),
};
return mockGroups[index];
},
// 删除分组
async deleteGroup(groupId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 300));
const index = mockGroups.findIndex(g => g.id === groupId);
if (index === -1) {
throw new Error("分组不存在");
}
mockGroups.splice(index, 1);
// 同时删除该分组的所有密钥
const keyIndexes = mockAPIKeys
.map((key, i) => (key.group_id === groupId ? i : -1))
.filter(i => i !== -1);
keyIndexes.reverse().forEach(i => mockAPIKeys.splice(i, 1));
},
// 获取分组统计信息
async getGroupStats(groupId: number): Promise<GroupStats> {
await new Promise(resolve => setTimeout(resolve, 200));
const keys = mockAPIKeys.filter(k => k.group_id === groupId);
const activeKeys = keys.filter(k => k.status === "active");
return {
total_keys: keys.length,
active_keys: activeKeys.length,
requests_1h: Math.floor(Math.random() * 100),
requests_24h: keys.reduce((sum, key) => sum + key.request_count, 0),
requests_7d: Math.floor(keys.reduce((sum, key) => sum + key.request_count, 0) * 7.2),
failure_rate_24h:
keys.length > 0
? (keys.reduce((sum, key) => sum + key.failure_count, 0) /
keys.reduce((sum, key) => sum + key.request_count, 1)) *
100
: 0,
};
},
// 获取分组的密钥列表
async getGroupKeys(
groupId: number,
page = 1,
size = 10,
filter?: string
): Promise<{
data: APIKey[];
total: number;
page: number;
size: number;
}> {
await new Promise(resolve => setTimeout(resolve, 300));
let keys = mockAPIKeys.filter(k => k.group_id === groupId);
if (filter === "valid") {
keys = keys.filter(k => k.status === "active");
} else if (filter === "invalid") {
keys = keys.filter(k => k.status !== "active");
}
const start = (page - 1) * size;
const end = start + size;
return {
data: keys.slice(start, end),
total: keys.length,
page,
size,
};
},
// 获取密钥列表（简化方法）
async getKeys(groupId: number): Promise<APIKey[]> {
await new Promise(resolve => setTimeout(resolve, 200));
return mockAPIKeys.filter(k => k.group_id === groupId);
},
// 批量添加密钥
async addMultipleKeys(
groupId: number,
keysText: string
): Promise<{
added_count: number;
ignored_count: number;
total_in_group: number;
}> {
await new Promise(resolve => setTimeout(resolve, 800));
// 解析密钥文本
const keys = this.parseKeysText(keysText);
const existingKeys = mockAPIKeys.filter(k => k.group_id === groupId).map(k => k.key_value);
let addedCount = 0;
let ignoredCount = 0;
keys.forEach(key => {
if (existingKeys.includes(key)) {
ignoredCount++;
} else {
const newKey: APIKey = {
id: Math.max(...mockAPIKeys.map(k => k.id)) + 1,
group_id: groupId,
key_value: key,
status: "active",
request_count: 0,
failure_count: 0,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
};
mockAPIKeys.push(newKey);
addedCount++;
}
});
return {
added_count: addedCount,
ignored_count: ignoredCount,
total_in_group: mockAPIKeys.filter(k => k.group_id === groupId).length,
};
},
// 批量添加密钥（别名方法）
async batchAddKeys(_keysText: string): Promise<void> {
// 模拟批量导入，触发全局任务
mockTaskInfo = {
is_running: true,
task_name: "批量导入密钥",
group_id: 1,
group_name: "当前分组",
processed: 0,
total: 100,
started_at: new Date().toISOString(),
message: "正在导入密钥...",
};
// 10秒后完成任务
setTimeout(() => {
mockTaskInfo = { is_running: false };
}, 10000);
},
// 解析密钥文本
parseKeysText(text: string): string[] {
const keys: string[] = [];
// 尝试解析JSON数组
try {
const parsed = JSON.parse(text);
if (Array.isArray(parsed)) {
return parsed.filter(key => typeof key === "string" && key.trim().length > 0);
}
} catch {
// 不是JSON，继续其他解析方式
}
// 按行分割，然后按常见分隔符分割
const lines = text.split(/\r?\n/);
lines.forEach(line => {
// 按逗号、分号、空格分割
const parts = line.split(/[,;\s]+/).filter(part => part.trim().length > 0);
keys.push(...parts);
});
return keys.filter(key => key.trim().length > 0);
},
// 测试单个密钥
async testKey(_keyId: number): Promise<{ success: boolean; message: string }> {
await new Promise(resolve => setTimeout(resolve, 1000));
// 模拟测试结果
const success = Math.random() > 0.2; // 80% 成功率
return {
success,
message: success ? "密钥测试成功" : "密钥测试失败：权限不足或密钥无效",
};
},
// 恢复密钥
async restoreKey(keyId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 300));
const key = mockAPIKeys.find(k => k.id === keyId);
if (key) {
key.status = "active";
key.updated_at = new Date().toISOString();
}
},
// 删除密钥
async deleteKey(keyId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 300));
const index = mockAPIKeys.findIndex(k => k.id === keyId);
if (index !== -1) {
mockAPIKeys.splice(index, 1);
}
},
// 恢复所有无效密钥
async restoreAllInvalidKeys(groupId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 500));
mockAPIKeys.forEach(key => {
if (key.group_id === groupId && key.status !== "active") {
key.status = "active";
key.updated_at = new Date().toISOString();
}
});
},
// 清空所有无效密钥
async clearAllInvalidKeys(groupId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 500));
for (let i = mockAPIKeys.length - 1; i >= 0; i--) {
if (mockAPIKeys[i].group_id === groupId && mockAPIKeys[i].status !== "active") {
mockAPIKeys.splice(i, 1);
}
}
},
// 导出密钥
async exportKeys(
groupId: number,
filter: "all" | "valid" | "invalid" = "all"
): Promise<{ keys: string[] }> {
await new Promise(resolve => setTimeout(resolve, 300));
let keys = mockAPIKeys.filter(k => k.group_id === groupId);
if (filter === "valid") {
keys = keys.filter(k => k.status === "active");
} else if (filter === "invalid") {
keys = keys.filter(k => k.status !== "active");
}
return {
keys: keys.map(k => k.key_value),
};
},
// 验证分组密钥
async validateGroupKeys(groupId: number): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 500));
if (mockTaskInfo.is_running) {
throw new Error("已有验证任务正在运行");
}
const group = mockGroups.find(g => g.id === groupId);
const keys = mockAPIKeys.filter(k => k.group_id === groupId);
mockTaskInfo = {
is_running: true,
task_name: "key_validation",
group_id: groupId,
group_name: group?.display_name || group?.name || "",
processed: 0,
total: keys.length,
started_at: new Date().toISOString(),
};
// 模拟异步验证过程
setTimeout(() => {
mockTaskInfo = { is_running: false };
}, 10000); // 10秒后完成
},
// 获取任务状态
async getTaskStatus(): Promise<TaskInfo> {
await new Promise(resolve => setTimeout(resolve, 100));
if (
mockTaskInfo.is_running &&
mockTaskInfo.processed !== undefined &&
mockTaskInfo.total !== undefined
) {
// 模拟进度更新
if (mockTaskInfo.processed < mockTaskInfo.total) {
mockTaskInfo.processed = Math.min(mockTaskInfo.processed + 1, mockTaskInfo.total);
}
}
return mockTaskInfo;
},
// 批量切换密钥状态
async batchToggleKeys(keyIds: string[], status: 0 | 1): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 500));
// 模拟批量操作
const numKeys = keyIds.length;
console.warn(`Mock: 批量${status === 1 ? "启用" : "禁用"}${numKeys}个密钥`, keyIds);
},
// 批量删除密钥
async batchDeleteKeys(keyIds: string[]): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 800));
// 模拟批量删除
const numKeys = keyIds.length;
console.warn(`Mock: 批量删除${numKeys}个密钥`, keyIds);
},
// 切换单个密钥状态
async toggleKeyStatus(keyId: string, status: 0 | 1): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 300));
console.warn(`Mock: ${status === 1 ? "启用" : "禁用"}密钥 ${keyId}`);
},
// 删除单个密钥
async deleteKeyById(keyId: string): Promise<void> {
await new Promise(resolve => setTimeout(resolve, 400));
console.warn(`Mock: 删除密钥 ${keyId}`);
},
// 验证密钥
async validateKeys(groupId: number): Promise<{ valid_count: number; invalid_count: number }> {
await new Promise(resolve => setTimeout(resolve, 2000));
// 模拟验证结果
const validCount = Math.floor(Math.random() * 10) + 5;
const invalidCount = Math.floor(Math.random() * 3);
console.warn(`Mock: 验证分组${groupId}的密钥，有效：${validCount}，无效：${invalidCount}`);
return {
valid_count: validCount,
invalid_count: invalidCount,
};
},
};

231
web/src/components/GlobalTaskProgressBar.vue Normal file
View File

@@ -0,0 +1,231 @@
<script setup lang="ts">
import { keysApi } from "@/api/keys";
import type { TaskInfo } from "@/types/models";
import { onBeforeUnmount, onMounted, ref } from "vue";
const taskInfo = ref<TaskInfo>({ is_running: false });
const visible = ref(false);
let pollTimer: number | null = null;
onMounted(() => {
startPolling();
});
onBeforeUnmount(() => {
stopPolling();
});
function startPolling() {
stopPolling();
pollTimer = setInterval(async () => {
try {
const task = await keysApi.getTaskStatus();
taskInfo.value = task;
visible.value = task.is_running;
} catch (error) {
console.error("获取任务状态失败:", error);
}
}, 1000);
}
function stopPolling() {
if (pollTimer) {
clearInterval(pollTimer);
pollTimer = null;
}
}
function getProgressPercentage(): number {
if (!taskInfo.value.total || taskInfo.value.total === 0) {
return 0;
}
return Math.round(((taskInfo.value.processed || 0) / taskInfo.value.total) * 100);
}
function getProgressText(): string {
const { processed = 0, total = 0 } = taskInfo.value;
return `${processed}/${total}`;
}
function handleClose() {
visible.value = false;
}
</script>
<template>
<div v-if="visible" class="global-task-progress">
<div class="progress-container">
<div class="progress-header">
<div class="progress-info">
<span class="progress-icon">⚡</span>
<div class="progress-details">
<div class="progress-title">{{ taskInfo.task_name || "正在处理任务" }}</div>
<div class="progress-subtitle">
{{ getProgressText() }} ({{ getProgressPercentage() }}%)
</div>
</div>
</div>
<button @click="handleClose" class="close-btn" title="隐藏进度条">✕</button>
</div>
<div class="progress-bar-container">
<div class="progress-bar" :style="{ width: `${getProgressPercentage()}%` }" />
</div>
<div v-if="taskInfo.message" class="progress-message">
{{ taskInfo.message }}
</div>
</div>
</div>
</template>
<style scoped>
.global-task-progress {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 360px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #e1e5e9;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.progress-container {
padding: 16px;
}
.progress-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.progress-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.progress-icon {
font-size: 20px;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.progress-details {
flex: 1;
}
.progress-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
}
.progress-subtitle {
font-size: 12px;
color: #666;
}
.close-btn {
width: 24px;
height: 24px;
border: none;
background: none;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
transition: all 0.2s;
}
.close-btn:hover {
background: #f5f5f5;
color: #666;
}
.progress-bar-container {
width: 100%;
height: 6px;
background: #f0f0f0;
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22c55e);
border-radius: 3px;
transition: width 0.3s ease;
position: relative;
}
.progress-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.progress-message {
font-size: 12px;
color: #666;
text-align: center;
padding: 8px;
background: #f8f9fa;
border-radius: 4px;
margin-top: 8px;
}
@media (max-width: 768px) {
.global-task-progress {
left: 20px;
right: 20px;
width: auto;
top: 10px;
}
}
</style>

501
web/src/components/keys/GroupInfoCard.vue Normal file
View File

@@ -0,0 +1,501 @@
<script setup lang="ts">
import { keysApi } from "@/api/keys";
import type { Group, GroupStats } from "@/types/models";
import { onMounted, ref } from "vue";
interface Props {
group: Group;
}
const props = defineProps<Props>();
const stats = ref<GroupStats | null>(null);
const loading = ref(false);
const showDetails = ref(false);
onMounted(() => {
loadStats();
});
async function loadStats() {
try {
loading.value = true;
stats.value = await keysApi.getGroupStats(props.group.id);
} catch (error) {
console.error("加载统计信息失败:", error);
} finally {
loading.value = false;
}
}
function handleEdit() {
window.$message.info("编辑分组功能开发中...");
}
function handleDelete() {
window.$message.info("删除分组功能开发中...");
}
function toggleDetails() {
showDetails.value = !showDetails.value;
}
function formatNumber(num: number): string {
if (num >= 1000000) {
return `${(num / 1000000).toFixed(1)}M`;
}
if (num >= 1000) {
return `${(num / 1000).toFixed(1)}K`;
}
return num.toString();
}
function formatPercentage(num: number): string {
return `${num.toFixed(1)}%`;
}
</script>
<template>
<div class="group-info-container">
<div class="group-info-card">
<!-- 头部信息 -->
<div class="card-header">
<div class="header-left">
<h3 class="group-title">{{ group.display_name || group.name }}</h3>
<div class="group-meta">
<span class="channel-badge" :class="`channel-${group.channel_type}`">
{{ group.channel_type.toUpperCase() }}
</span>
<span class="group-id">#{{ group.id }}</span>
</div>
</div>
<div class="header-actions">
<button class="action-btn" @click="handleEdit" title="编辑分组">
<span class="icon">✏️</span>
</button>
<button class="action-btn delete-btn" @click="handleDelete" title="删除分组">
<span class="icon">🗑️</span>
</button>
</div>
</div>
<!-- 统计摘要区 -->
<div class="stats-summary">
<div v-if="loading" class="loading-stats">
<div class="loading-placeholder" />
<div class="loading-placeholder" />
<div class="loading-placeholder" />
<div class="loading-placeholder" />
</div>
<div v-else-if="stats" class="stats-grid">
<div class="stat-item">
<div class="stat-value">{{ stats.active_keys }}/{{ stats.total_keys }}</div>
<div class="stat-label">密钥数量</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ formatNumber(stats.requests_1h) }}</div>
<div class="stat-label">近1小时</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ formatNumber(stats.requests_24h) }}</div>
<div class="stat-label">近24小时</div>
</div>
<div class="stat-item">
<div class="stat-value failure-rate">
{{ formatPercentage(stats.failure_rate_24h) }}
</div>
<div class="stat-label">失败率</div>
</div>
</div>
</div>
<!-- 详细信息区（可折叠） -->
<div class="details-section">
<button class="toggle-btn" @click="toggleDetails">
<span class="toggle-text">{{ showDetails ? "收起" : "展开" }}详细信息</span>
<span class="toggle-icon" :class="{ expanded: showDetails }">▼</span>
</button>
<div v-if="showDetails" class="details-content">
<div class="detail-section">
<h4 class="section-title">基础信息</h4>
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">分组名称:</span>
<span class="detail-value">{{ group.name }}</span>
</div>
<div class="detail-item">
<span class="detail-label">渠道类型:</span>
<span class="detail-value">{{ group.channel_type }}</span>
</div>
<div class="detail-item">
<span class="detail-label">排序:</span>
<span class="detail-value">{{ group.sort }}</span>
</div>
<div v-if="group.description" class="detail-item full-width">
<span class="detail-label">描述:</span>
<span class="detail-value">{{ group.description }}</span>
</div>
</div>
</div>
<div class="detail-section">
<h4 class="section-title">上游地址</h4>
<div class="upstream-list">
<div v-for="(upstream, index) in group.upstreams" :key="index" class="upstream-item">
<span class="upstream-url">{{ upstream.url }}</span>
<span class="upstream-weight">权重: {{ upstream.weight }}</span>
</div>
</div>
</div>
<div class="detail-section">
<h4 class="section-title">配置信息</h4>
<div class="config-content">
<div v-if="group.config.test_model" class="config-item">
<span class="config-label">测试模型:</span>
<span class="config-value">{{ group.config.test_model }}</span>
</div>
<div v-if="group.config.request_timeout" class="config-item">
<span class="config-label">请求超时:</span>
<span class="config-value">{{ group.config.request_timeout }}ms</span>
</div>
<div
v-if="Object.keys(group.config.param_overrides || {}).length > 0"
class="config-item"
>
<span class="config-label">参数覆盖:</span>
<pre class="config-json">{{
JSON.stringify(group.config.param_overrides, null, 2)
}}</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.group-info-container {
width: 100%;
}
.group-info-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #e9ecef;
}
.header-left {
flex: 1;
}
.group-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 4px 0;
}
.group-meta {
display: flex;
align-items: center;
gap: 8px;
}
.channel-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
}
.channel-openai {
background: rgba(16, 163, 127, 0.1);
color: #10a37f;
}
.channel-gemini {
background: rgba(66, 133, 244, 0.1);
color: #4285f4;
}
.channel-silicon {
background: rgba(147, 51, 234, 0.1);
color: #9333ea;
}
.channel-chutes {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.group-id {
font-size: 12px;
color: #6c757d;
}
.header-actions {
display: flex;
gap: 4px;
}
.action-btn {
padding: 4px 6px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
}
.action-btn:hover {
background: rgba(0, 123, 255, 0.1);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.1);
}
.action-btn .icon {
font-size: 14px;
}
.stats-summary {
padding: 12px 16px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.loading-stats {
display: flex;
gap: 12px;
}
.loading-placeholder {
height: 40px;
flex: 1;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.stat-item {
text-align: center;
padding: 8px;
background: white;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.stat-value {
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 2px;
}
.stat-value.failure-rate {
color: #dc3545;
}
.stat-label {
font-size: 10px;
color: #6c757d;
font-weight: 500;
}
.details-section {
border-top: 1px solid #e9ecef;
}
.toggle-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 16px;
border: none;
background: #f8f9fa;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-btn:hover {
background: #e9ecef;
}
.toggle-text {
font-size: 12px;
font-weight: 500;
color: #495057;
}
.toggle-icon {
font-size: 10px;
color: #6c757d;
transition: transform 0.2s;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.details-content {
padding: 12px 16px;
background: white;
}
.detail-section {
margin-bottom: 16px;
}
.detail-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.detail-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.detail-item.full-width {
grid-column: 1 / -1;
flex-direction: column;
align-items: flex-start;
}
.detail-label {
font-weight: 500;
color: #6c757d;
}
.detail-value {
color: #333;
}
.upstream-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.upstream-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px;
background: #f8f9fa;
border-radius: 4px;
font-size: 12px;
}
.upstream-url {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #333;
}
.upstream-weight {
color: #6c757d;
font-weight: 500;
}
.config-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.config-item {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}
.config-label {
font-weight: 500;
color: #6c757d;
}
.config-value {
color: #333;
}
.config-json {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 8px;
font-size: 10px;
color: #495057;
overflow-x: auto;
margin: 0;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.detail-grid {
grid-template-columns: 1fr;
}
.upstream-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
</style>

320
web/src/components/keys/GroupList.vue Normal file
View File

@@ -0,0 +1,320 @@
<script setup lang="ts">
import { keysApi } from "@/api/keys";
import type { Group } from "@/types/models";
import { useMessage } from "naive-ui";
import { computed, ref } from "vue";
interface Props {
groups: Group[];
selectedGroup: Group | null;
loading?: boolean;
}
interface Emits {
(e: "group-select", group: Group): void;
(e: "refresh"): void;
}
const props = withDefaults(defineProps<Props>(), {
loading: false,
});
const emit = defineEmits<Emits>();
const searchText = ref("");
const message = useMessage();
// 过滤后的分组列表
const filteredGroups = computed(() => {
if (!searchText.value) {
return props.groups;
}
const search = searchText.value.toLowerCase();
return props.groups.filter(
group =>
group.name.toLowerCase().includes(search) ||
(group.display_name && group.display_name.toLowerCase().includes(search))
);
});
function handleGroupClick(group: Group) {
emit("group-select", group);
}
// 简单的创建分组功能（演示用）
async function createDemoGroup() {
try {
const newGroup = await keysApi.createGroup({
name: `demo-group-${Date.now()}`,
display_name: `演示分组 ${props.groups.length + 1}`,
description: "这是一个演示分组",
sort: props.groups.length + 1,
channel_type: "openai",
upstreams: [{ url: "https://api.openai.com", weight: 1 }],
config: {
test_model: "gpt-3.5-turbo",
param_overrides: {},
request_timeout: 30000,
},
});
message.success(`创建分组成功: ${newGroup.display_name}`);
emit("refresh");
} catch (error) {
console.error("创建分组失败:", error);
message.error("创建分组失败");
}
}
</script>
<template>
<div class="group-list-container">
<div class="group-list-card">
<!-- 搜索框 -->
<div class="search-section">
<input v-model="searchText" placeholder="搜索分组名称..." class="search-input" />
</div>
<!-- 分组列表 -->
<div class="groups-section">
<div v-if="loading" class="loading-state">加载中...</div>
<div v-else-if="filteredGroups.length === 0" class="empty-state">
<div class="empty-text">
{{ searchText ? "未找到匹配的分组" : "暂无分组" }}
</div>
</div>
<div v-else class="groups-list">
<div
v-for="group in filteredGroups"
:key="group.id"
class="group-item"
:class="{ active: selectedGroup?.id === group.id }"
@click="handleGroupClick(group)"
>
<div class="group-icon">
<span v-if="group.channel_type === 'openai'">🤖</span>
<span v-else-if="group.channel_type === 'gemini'">💎</span>
<span v-else-if="group.channel_type === 'silicon'">⚡</span>
<span v-else>🔧</span>
</div>
<div class="group-content">
<div class="group-name">
{{ group.display_name || group.name }}
</div>
<div class="group-info">
<span class="channel-type">{{ group.channel_type }}</span>
<span class="group-id">#{{ group.id }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 添加分组按钮 -->
<div class="add-section">
<button class="add-button" @click="createDemoGroup">
<span class="add-icon">+</span>
添加分组
</button>
</div>
</div>
</div>
</template>
<style scoped>
.group-list-container {
height: 100%;
}
.group-list-card {
height: 100%;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 12px;
display: flex;
flex-direction: column;
}
.search-section {
margin-bottom: 12px;
}
.search-input {
width: 100%;
padding: 6px 8px;
border: 1px solid #e9ecef;
border-radius: 4px;
font-size: 12px;
background: #f8f9fa;
}
.search-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.groups-section {
flex: 1;
min-height: 0;
margin-bottom: 12px;
}
.loading-state {
text-align: center;
padding: 20px;
color: #6c757d;
font-size: 14px;
}
.empty-state {
text-align: center;
padding: 20px;
color: #6c757d;
}
.empty-text {
font-size: 12px;
}
.groups-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 100%;
overflow-y: auto;
}
.group-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
font-size: 12px;
}
.group-item:hover {
background: #f8f9fa;
border-color: #e9ecef;
}
.group-item.active {
background: #007bff;
color: white;
border-color: #007bff;
}
.group-icon {
font-size: 14px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
flex-shrink: 0;
}
.group-item.active .group-icon {
background: rgba(255, 255, 255, 0.2);
}
.group-content {
flex: 1;
min-width: 0;
}
.group-name {
font-weight: 600;
font-size: 12px;
line-height: 1.2;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-info {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
opacity: 0.7;
}
.channel-type {
text-transform: uppercase;
font-weight: 500;
}
.group-id {
opacity: 0.6;
}
.add-section {
border-top: 1px solid #e9ecef;
padding-top: 12px;
}
.add-button {
width: 100%;
padding: 8px;
border: 1px solid #007bff;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.add-button:hover {
background: #0056b3;
}
.add-icon {
font-size: 14px;
}
/* 滚动条样式 */
.groups-list::-webkit-scrollbar {
width: 4px;
}
.groups-list::-webkit-scrollbar-track {
background: transparent;
}
.groups-list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.groups-list::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.group-item {
padding: 6px;
}
.group-name {
font-size: 11px;
}
.group-info {
font-size: 9px;
}
}
</style>

848
web/src/components/keys/KeyTable.vue Normal file
View File

@@ -0,0 +1,848 @@
<script setup lang="ts">
import { keysApi } from "@/api/keys";
import type { APIKey, Group } from "@/types/models";
import { computed, ref, watch } from "vue";
interface Props {
selectedGroup: Group | null;
}
const props = defineProps<Props>();
const keys = ref<APIKey[]>([]);
const loading = ref(false);
const searchText = ref("");
const statusFilter = ref<"all" | "valid" | "invalid">("all");
const currentPage = ref(1);
const pageSize = ref(20);
const totalKeys = ref(0);
const showMoreMenu = ref(false);
const totalPages = computed(() => Math.ceil(totalKeys.value / pageSize.value));
watch(
() => props.selectedGroup,
async newGroup => {
if (newGroup) {
currentPage.value = 1;
await loadKeys();
}
},
{ immediate: true }
);
watch([currentPage, pageSize, statusFilter, searchText], async () => {
await loadKeys();
});
async function loadKeys() {
if (!props.selectedGroup) {
return;
}
try {
loading.value = true;
const result = await keysApi.getGroupKeys(
props.selectedGroup.id,
currentPage.value,
pageSize.value,
statusFilter.value === "all" ? undefined : statusFilter.value
);
keys.value = result.data;
totalKeys.value = result.total;
} catch (error) {
console.error("加载密钥失败:", error);
window.$message.error("加载密钥失败");
} finally {
loading.value = false;
}
}
function maskKey(key: string): string {
if (key.length <= 8) {
return key;
}
return `${key.substring(0, 4)}...${key.substring(key.length - 4)}`;
}
function copyKey(key: APIKey) {
navigator.clipboard
.writeText(key.key_value)
.then(() => {
window.$message.success("密钥已复制到剪贴板");
})
.catch(() => {
window.$message.error("复制失败");
});
}
async function testKey(_key: APIKey) {
try {
window.$message.info("正在测试密钥...");
// TODO: 实现密钥测试 API
await new Promise(resolve => setTimeout(resolve, 2000));
const success = Math.random() > 0.3; // 模拟测试结果
if (success) {
window.$message.success("密钥测试成功");
} else {
window.$message.error("密钥测试失败: 无效的API密钥");
}
} catch (error) {
console.error("测试密钥失败:", error);
window.$message.error("测试失败");
}
}
function toggleKeyVisibility(key: APIKey) {
// TODO: 实现密钥显示/隐藏切换
window.$message.info(`切换密钥"${maskKey(key.key_value)}"显示状态功能开发中`);
}
async function restoreKey(key: APIKey) {
// eslint-disable-next-line no-alert
const confirmed = window.confirm(`确定要恢复密钥"${maskKey(key.key_value)}"吗？`);
if (!confirmed) {
return;
}
try {
await keysApi.toggleKeyStatus(key.id.toString(), 1);
window.$message.success("密钥已恢复");
await loadKeys();
} catch (error) {
console.error("恢复密钥失败:", error);
window.$message.error("恢复失败");
}
}
async function deleteKey(key: APIKey) {
// eslint-disable-next-line no-alert
const confirmed = window.confirm(`确定要删除密钥"${maskKey(key.key_value)}"吗？`);
if (!confirmed) {
return;
}
try {
await keysApi.deleteKeyById(key.id.toString());
window.$message.success("密钥已删除");
await loadKeys();
} catch (error) {
console.error("删除密钥失败:", error);
window.$message.error("删除失败");
}
}
function formatDate(date: string) {
return new Date(date).toLocaleDateString();
}
function formatRelativeTime(date: string) {
const now = new Date();
const target = new Date(date);
const diff = now.getTime() - target.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const days = Math.floor(hours / 24);
if (days > 0) {
return `${days}天前`;
} else if (hours > 0) {
return `${hours}小时前`;
} else {
return "刚刚";
}
}
function getStatusText(status: "active" | "inactive" | "error") {
switch (status) {
case "active":
return "有效";
case "inactive":
return "无效";
case "error":
return "错误";
default:
return "未知";
}
}
function getStatusClass(status: "active" | "inactive" | "error") {
switch (status) {
case "active":
return "status-valid";
case "inactive":
return "status-invalid";
case "error":
return "status-error";
default:
return "status-unknown";
}
}
function addKey() {
window.$message.info("添加密钥功能开发中");
}
async function copyAllKeys() {
if (!props.selectedGroup) {
return;
}
try {
const result = await keysApi.exportKeys(props.selectedGroup.id, "all");
const keysText = result.keys.join("\n");
navigator.clipboard
.writeText(keysText)
.then(() => {
window.$message.success(`已复制${result.keys.length}个密钥到剪贴板`);
})
.catch(() => {
window.$message.error("复制失败");
});
} catch (error) {
console.error("导出失败:", error);
window.$message.error("导出失败");
}
}
async function copyValidKeys() {
if (!props.selectedGroup) {
return;
}
try {
const result = await keysApi.exportKeys(props.selectedGroup.id, "valid");
const keysText = result.keys.join("\n");
navigator.clipboard
.writeText(keysText)
.then(() => {
window.$message.success(`已复制${result.keys.length}个有效密钥到剪贴板`);
})
.catch(() => {
window.$message.error("复制失败");
});
} catch (error) {
console.error("导出失败:", error);
window.$message.error("导出失败");
}
}
async function copyInvalidKeys() {
if (!props.selectedGroup) {
return;
}
try {
const result = await keysApi.exportKeys(props.selectedGroup.id, "invalid");
const keysText = result.keys.join("\n");
navigator.clipboard
.writeText(keysText)
.then(() => {
window.$message.success(`已复制${result.keys.length}个无效密钥到剪贴板`);
})
.catch(() => {
window.$message.error("复制失败");
});
} catch (error) {
console.error("导出失败:", error);
window.$message.error("导出失败");
}
}
async function restoreAllInvalid() {
if (!props.selectedGroup) {
return;
}
// eslint-disable-next-line no-alert
const confirmed = window.confirm("确定要恢复所有无效密钥吗？");
if (!confirmed) {
return;
}
try {
// TODO: 实现恢复所有无效密钥 API
window.$message.success("所有无效密钥已恢复");
await loadKeys();
} catch (error) {
console.error("恢复失败:", error);
window.$message.error("恢复失败");
}
}
async function validateAllKeys() {
if (!props.selectedGroup) {
return;
}
try {
const result = await keysApi.validateKeys(props.selectedGroup.id);
window.$message.success(`验证完成: 有效${result.valid_count}个，无效${result.invalid_count}个`);
} catch (error) {
console.error("验证失败:", error);
window.$message.error("验证失败");
}
}
async function clearAllInvalid() {
if (!props.selectedGroup) {
return;
}
// eslint-disable-next-line no-alert
const confirmed = window.confirm("确定要清除所有无效密钥吗？此操作不可恢复！");
if (!confirmed) {
return;
}
try {
// TODO: 实现清除所有无效密钥 API
window.$message.success("所有无效密钥已清除");
await loadKeys();
} catch (error) {
console.error("清除失败:", error);
window.$message.error("清除失败");
}
}
function changePage(page: number) {
currentPage.value = page;
}
function changePageSize(size: number) {
pageSize.value = size;
currentPage.value = 1;
}
</script>
<template>
<div class="key-table-container">
<!-- 工具栏 -->
<div class="toolbar">
<div class="toolbar-left">
<button @click="addKey" class="btn btn-primary btn-sm">+ 添加密钥</button>
</div>
<div class="toolbar-right">
<div class="filter-group">
<select v-model="statusFilter" class="filter-select">
<option value="all">全部</option>
<option value="valid">有效</option>
<option value="invalid">无效</option>
</select>
</div>
<div class="filter-group">
<input v-model="searchText" type="text" placeholder="Key 模糊查询" class="search-input" />
</div>
<div class="more-actions">
<button @click="showMoreMenu = !showMoreMenu" class="btn btn-secondary btn-sm">
<span class="more-icon">⋯</span>
</button>
<div v-if="showMoreMenu" class="more-menu">
<button @click="copyAllKeys" class="menu-item">复制所有 Key</button>
<button @click="copyValidKeys" class="menu-item">复制有效 Key</button>
<button @click="copyInvalidKeys" class="menu-item">复制无效 Key</button>
<div class="menu-divider" />
<button @click="restoreAllInvalid" class="menu-item">恢复所有无效 Key</button>
<button @click="validateAllKeys" class="menu-item">验证所有 Key</button>
<div class="menu-divider" />
<button @click="clearAllInvalid" class="menu-item danger">清空所有无效 Key</button>
</div>
</div>
</div>
</div>
<!-- 密钥表格 -->
<div class="table-container">
<table class="key-table">
<thead>
<tr>
<th class="key-column">密钥 (Key)</th>
<th class="status-column">状态</th>
<th class="usage-column">24小时请求</th>
<th class="last-used-column">最后使用</th>
<th class="created-column">创建时间</th>
<th class="actions-column">操作</th>
</tr>
</thead>
<tbody>
<tr v-if="loading" class="loading-row">
<td colspan="6" class="loading-cell">
<div class="loading-spinner">加载中...</div>
</td>
</tr>
<tr v-else-if="keys.length === 0" class="empty-row">
<td colspan="6" class="empty-cell">
<div class="empty-text">没有找到匹配的密钥</div>
</td>
</tr>
<tr v-else v-for="key in keys" :key="key.id" class="key-row">
<td class="key-column">
<div class="key-content">
<span class="key-text" :title="key.key_value">{{ maskKey(key.key_value) }}</span>
<div class="key-actions">
<button @click="copyKey(key)" class="key-btn" title="复制">
<span class="icon">📋</span>
</button>
<button @click="toggleKeyVisibility(key)" class="key-btn" title="显示/隐藏">
<span class="icon">👁️</span>
</button>
</div>
</div>
</td>
<td class="status-column">
<span :class="['status-badge', getStatusClass(key.status)]">
{{ getStatusText(key.status) }}
</span>
</td>
<td class="usage-column">
<span class="usage-text">{{ key.request_count }} / {{ key.failure_count }}</span>
</td>
<td class="last-used-column">
<span class="time-text">
{{ key.last_used_at ? formatRelativeTime(key.last_used_at) : "从未使用" }}
</span>
</td>
<td class="created-column">
<span class="time-text">{{ formatDate(key.created_at) }}</span>
</td>
<td class="actions-column">
<div class="action-buttons">
<button @click="copyKey(key)" class="action-btn" title="复制">复制</button>
<button @click="testKey(key)" class="action-btn" title="测试">测试</button>
<button
v-if="key.status !== 'active'"
@click="restoreKey(key)"
class="action-btn"
title="恢复"
>
恢复
</button>
<button @click="deleteKey(key)" class="action-btn danger" title="删除">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="pagination-container">
<div class="pagination-info">
<span>共 {{ totalKeys }} 条记录</span>
<select v-model="pageSize" @change="changePageSize(pageSize)" class="page-size-select">
<option :value="10">10条/页</option>
<option :value="20">20条/页</option>
<option :value="50">50条/页</option>
<option :value="100">100条/页</option>
</select>
</div>
<div class="pagination-controls">
<button
@click="changePage(currentPage - 1)"
:disabled="currentPage <= 1"
class="btn btn-secondary btn-sm"
>
上一页
</button>
<span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
<button
@click="changePage(currentPage + 1)"
:disabled="currentPage >= totalPages"
class="btn btn-secondary btn-sm"
>
下一页
</button>
</div>
</div>
</div>
</template>
<style scoped>
.key-table-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
flex-shrink: 0;
}
.toolbar-left {
display: flex;
gap: 8px;
}
.toolbar-right {
display: flex;
gap: 12px;
align-items: center;
}
.filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.more-actions {
position: relative;
}
.more-menu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #e9ecef;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 180px;
z-index: 1000;
overflow: hidden;
}
.menu-item {
display: block;
width: 100%;
padding: 8px 12px;
border: none;
background: none;
text-align: left;
cursor: pointer;
font-size: 14px;
color: #333;
transition: background-color 0.2s;
}
.menu-item:hover {
background: #f8f9fa;
}
.menu-item.danger {
color: #dc3545;
}
.menu-item.danger:hover {
background: #f8d7da;
}
.menu-divider {
height: 1px;
background: #e9ecef;
margin: 4px 0;
}
.btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
white-space: nowrap;
}
.btn-sm {
padding: 4px 8px;
font-size: 12px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #0056b3;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: #545b62;
}
.more-icon {
font-size: 16px;
font-weight: bold;
}
.filter-select,
.search-input,
.page-size-select {
padding: 4px 8px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 12px;
}
.search-input {
width: 180px;
}
.filter-select:focus,
.search-input:focus,
.page-size-select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.table-container {
flex: 1;
overflow-y: auto;
}
.key-table {
width: 100%;
border-collapse: collapse;
background: white;
font-size: 13px;
}
.key-table th,
.key-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid #e9ecef;
vertical-align: middle;
}
.key-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
font-size: 12px;
position: sticky;
top: 0;
z-index: 10;
}
.key-column {
width: 35%;
}
.status-column {
width: 10%;
}
.usage-column {
width: 15%;
}
.last-used-column {
width: 15%;
}
.created-column {
width: 15%;
}
.actions-column {
width: 10%;
}
.key-content {
display: flex;
align-items: center;
gap: 8px;
}
.key-text {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
color: #495057;
background: #f8f9fa;
padding: 2px 6px;
border-radius: 3px;
flex: 1;
min-width: 0;
}
.key-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.key-btn {
padding: 2px 4px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 3px;
transition: background-color 0.2s;
}
.key-btn:hover {
background: #e9ecef;
}
.key-btn .icon {
font-size: 12px;
}
.status-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
text-align: center;
min-width: 40px;
}
.status-valid {
background: #d4edda;
color: #155724;
}
.status-invalid {
background: #f8d7da;
color: #721c24;
}
.status-error {
background: #fff3cd;
color: #856404;
}
.status-unknown {
background: #d1ecf1;
color: #0c5460;
}
.usage-text {
font-weight: 500;
color: #495057;
font-size: 12px;
}
.time-text {
font-size: 11px;
color: #6c757d;
}
.action-buttons {
display: flex;
gap: 2px;
flex-wrap: nowrap;
}
.action-btn {
padding: 2px 6px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
transition: all 0.2s;
white-space: nowrap;
background: #f8f9fa;
color: #495057;
border: 1px solid #dee2e6;
}
.action-btn:hover {
background: #e9ecef;
border-color: #adb5bd;
}
.action-btn.danger {
color: #dc3545;
}
.action-btn.danger:hover {
background: #f8d7da;
border-color: #dc3545;
}
.loading-row,
.empty-row {
height: 80px;
}
.loading-cell,
.empty-cell {
text-align: center;
vertical-align: middle;
color: #6c757d;
}
.loading-spinner {
font-size: 14px;
}
.empty-text {
font-size: 14px;
}
.pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
flex-shrink: 0;
}
.pagination-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: #6c757d;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 12px;
}
.page-info {
font-size: 12px;
color: #6c757d;
}
@media (max-width: 1024px) {
.toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.toolbar-left,
.toolbar-right {
justify-content: center;
}
.action-buttons {
flex-direction: column;
gap: 1px;
}
.action-btn {
font-size: 9px;
padding: 1px 4px;
}
}
</style>

4
web/src/types/models.ts
View File

@@ -11,6 +11,9 @@ export interface APIKey {
updated_at: string;
}
// 类型别名，用于兼容
export type Key = APIKey;
export interface UpstreamInfo {
url: string;
weight: number;
@@ -47,6 +50,7 @@ export interface TaskInfo {
processed?: number;
total?: number;
started_at?: string;
message?: string;
}
export interface RequestLog {

188
web/src/views/Keys.vue
View File

@@ -1,26 +1,73 @@
<script setup lang="ts">
// 这里可以添加密钥管理相关的逻辑
import { keysApi } from "@/api/keys";
import GroupInfoCard from "@/components/keys/GroupInfoCard.vue";
import GroupList from "@/components/keys/GroupList.vue";
import KeyTable from "@/components/keys/KeyTable.vue";
import type { Group } from "@/types/models";
import { onMounted, ref } from "vue";
const groups = ref<Group[]>([]);
const loading = ref(false);
const selectedGroup = ref<Group | null>(null);
onMounted(async () => {
await loadGroups();
});
async function loadGroups() {
try {
loading.value = true;
groups.value = await keysApi.getGroups();
// 默认选择第一个分组
if (groups.value.length > 0 && !selectedGroup.value) {
selectedGroup.value = groups.value[0];
}
} catch (error) {
console.error("加载分组失败:", error);
window.$message.error("加载分组失败");
} finally {
loading.value = false;
}
}
function handleGroupSelect(group: Group) {
selectedGroup.value = group;
}
function handleGroupRefresh() {
loadGroups();
}
</script>
<template>
<div class="keys-container">
<!-- 页面头部更紧凑 -->
<div class="page-header">
<h2 class="page-title">密钥管理</h2>
<p class="page-subtitle">管理API密钥和访问凭证</p>
</div>
<div class="content-placeholder">
<div class="placeholder-card modern-card">
<div class="placeholder-icon">🔑</div>
<h3 class="placeholder-title">密钥管理功能</h3>
<p class="placeholder-description">
此功能正在开发中，将提供完整的API密钥管理功能，包括添加、删除、编辑和监控密钥使用情况。
</p>
<div class="placeholder-features">
<div class="feature-item">✨ 密钥添加与删除</div>
<div class="feature-item">📊 使用情况统计</div>
<div class="feature-item">🔒 安全性验证</div>
<div class="feature-item">🔄 自动轮换</div>
<div class="keys-content">
<!-- 左侧分组列表，宽度减少到20% -->
<div class="sidebar">
<group-list
:groups="groups"
:selected-group="selectedGroup"
:loading="loading"
@group-select="handleGroupSelect"
@refresh="handleGroupRefresh"
/>
</div>
<!-- 右侧主内容区域，占80% -->
<div class="main-content">
<!-- 分组信息卡片，更紧凑 -->
<div v-if="selectedGroup" class="group-info">
<group-info-card :group="selectedGroup" @refresh="handleGroupRefresh" />
</div>
<!-- 密钥表格区域，占主要空间 -->
<div class="key-table-section">
<key-table :selected-group="selectedGroup" />
</div>
</div>
</div>
@@ -29,90 +76,69 @@
<style scoped>
.keys-container {
max-width: 1000px;
padding: 12px;
max-width: 1600px;
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.page-header {
margin-bottom: 32px;
text-align: center;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e9ecef;
}
.page-title {
font-size: 2.25rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 8px 0;
letter-spacing: -0.5px;
}
.page-subtitle {
font-size: 1.1rem;
color: #64748b;
margin: 0;
font-weight: 500;
}
.content-placeholder {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.placeholder-card {
text-align: center;
max-width: 500px;
padding: 48px 32px;
background: rgba(255, 255, 255, 0.98);
}
.placeholder-icon {
font-size: 4rem;
margin-bottom: 24px;
display: block;
}
.placeholder-title {
font-size: 1.5rem;
font-size: 20px;
font-weight: 600;
color: #1e293b;
margin: 0 0 16px 0;
color: #333;
margin: 0;
}
.placeholder-description {
font-size: 1rem;
color: #64748b;
line-height: 1.6;
margin: 0 0 32px 0;
}
.placeholder-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.keys-content {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
}
.feature-item {
padding: 12px 16px;
background: rgba(102, 126, 234, 0.1);
border-radius: var(--border-radius-md);
color: #667eea;
font-weight: 500;
font-size: 0.9rem;
.sidebar {
width: 240px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.placeholder-card {
margin: 0 16px;
padding: 32px 24px;
.main-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.group-info {
flex-shrink: 0;
}
.key-table-section {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
@media (max-width: 1024px) {
.keys-content {
flex-direction: column;
}
.placeholder-features {
grid-template-columns: 1fr;
.sidebar {
width: 100%;
}
.main-content {
width: 100%;
}
}
</style>