From 8159ea52c9108be13980790a15c781ffa47fa38d Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Fri, 4 Jul 2025 16:48:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=98=E9=92=A5=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?web=20v1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/eslint.config.js                         |  12 +-
 web/src/App.vue                              |   4 +
 web/src/api/keys.ts                          | 495 +++++++++++
 web/src/components/GlobalTaskProgressBar.vue | 231 +++++
 web/src/components/keys/GroupInfoCard.vue    | 501 +++++++++++
 web/src/components/keys/GroupList.vue        | 320 +++++++
 web/src/components/keys/KeyTable.vue         | 848 +++++++++++++++++++
 web/src/types/models.ts                      |   4 +
 web/src/views/Keys.vue                       | 188 ++--
 9 files changed, 2520 insertions(+), 83 deletions(-)
 create mode 100644 web/src/api/keys.ts
 create mode 100644 web/src/components/GlobalTaskProgressBar.vue
 create mode 100644 web/src/components/keys/GroupInfoCard.vue
 create mode 100644 web/src/components/keys/GroupList.vue
 create mode 100644 web/src/components/keys/KeyTable.vue

diff --git a/web/eslint.config.js b/web/eslint.config.js
index 5d1addf..7cff510 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -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 规则
diff --git a/web/src/App.vue b/web/src/App.vue
index d715f88..94c941e 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -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>
diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
new file mode 100644
index 0000000..020c42a
--- /dev/null
+++ b/web/src/api/keys.ts
@@ -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,
+    };
+  },
+};
diff --git a/web/src/components/GlobalTaskProgressBar.vue b/web/src/components/GlobalTaskProgressBar.vue
new file mode 100644
index 0000000..f9b85c5
--- /dev/null
+++ b/web/src/components/GlobalTaskProgressBar.vue
@@ -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>
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
new file mode 100644
index 0000000..ca4ef9e
--- /dev/null
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -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>
diff --git a/web/src/components/keys/GroupList.vue b/web/src/components/keys/GroupList.vue
new file mode 100644
index 0000000..3d03a4e
--- /dev/null
+++ b/web/src/components/keys/GroupList.vue
@@ -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>
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
new file mode 100644
index 0000000..0c2e3d1
--- /dev/null
+++ b/web/src/components/keys/KeyTable.vue
@@ -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>
diff --git a/web/src/types/models.ts b/web/src/types/models.ts
index 7781dc6..ecf2de3 100644
--- a/web/src/types/models.ts
+++ b/web/src/types/models.ts
@@ -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 {
diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue
index 6483bbb..ec284c8 100644
--- a/web/src/views/Keys.vue
+++ b/web/src/views/Keys.vue
@@ -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>