From fd63a9c67d32bf7d63259a0d48745955773cf4d7 Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Fri, 4 Jul 2025 19:51:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/keys.ts                          | 239 +++++++++++++++++--
 web/src/components/BaseInfoCard.vue          | 126 +++++-----
 web/src/components/GlobalTaskProgressBar.vue | 113 +++------
 web/src/components/keys/GroupList.vue        | 221 ++++++++---------
 web/src/components/keys/KeyTable.vue         |  36 ++-
 web/src/services/auth.ts                     |   4 +-
 web/src/types/models.ts                      |   2 +-
 web/src/utils/http.ts                        |   1 -
 web/src/views/Dashboard.vue                  |  48 +---
 web/src/views/Keys.vue                       |   4 +-
 web/src/views/Logs.vue                       |  99 ++++----
 web/src/views/Settings.vue                   |   6 +-
 12 files changed, 501 insertions(+), 398 deletions(-)

diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
index 2d21aaa..0c5ecb4 100644
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -43,7 +43,7 @@ const mockGroups: Group[] = [
     display_name: "Silicon测试组",
     description: "Silicon Flow测试API组",
     sort: 3,
-    channel_type: "silicon",
+    channel_type: "openai",
     upstreams: [{ url: "https://api.siliconflow.cn", weight: 1 }],
     config: {
       test_model: "qwen-turbo",
@@ -53,6 +53,215 @@ const mockGroups: Group[] = [
     created_at: "2024-01-03T00:00:00Z",
     updated_at: "2024-01-03T00:00:00Z",
   },
+  {
+    id: 4,
+    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: 5,
+    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: 6,
+    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: 7,
+    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: 8,
+    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: 9,
+    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: 10,
+    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: 12,
+    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: 13,
+    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: 14,
+    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: 15,
+    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",
+  },
 ];
 
 const mockAPIKeys: APIKey[] = [
@@ -490,47 +699,37 @@ export const keysApi = {
   },
 
   // 批量切换密钥状态
-  async batchToggleKeys(keyIds: string[], status: 0 | 1): Promise<void> {
+  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> {
+  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> {
+  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> {
+  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 }> {
+  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/BaseInfoCard.vue b/web/src/components/BaseInfoCard.vue
index 8160608..1d932f4 100644
--- a/web/src/components/BaseInfoCard.vue
+++ b/web/src/components/BaseInfoCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NCard, NGrid, NGridItem, NSpace, NTag } from "naive-ui";
 import { onMounted, ref } from "vue";
 
 // 模拟数据
@@ -51,41 +52,41 @@ onMounted(() => {
 
 <template>
   <div class="stats-container">
-    <div class="stats-grid">
-      <div
-        v-for="(stat, index) in stats"
-        :key="stat.title"
-        class="stat-card modern-card"
-        :style="{ animationDelay: `${index * 0.07}s` }"
-      >
-        <div class="stat-header">
-          <div class="stat-icon" :style="{ background: stat.color }">
-            {{ stat.icon }}
-          </div>
-          <div
-            class="stat-trend"
-            :class="{ 'trend-up': stat.trendUp, 'trend-down': !stat.trendUp }"
+    <n-space vertical size="medium">
+      <n-grid :cols="4" :x-gap="20" :y-gap="20" responsive="screen">
+        <n-grid-item v-for="(stat, index) in stats" :key="stat.title" span="1">
+          <n-card
+            :bordered="false"
+            class="stat-card"
+            :style="{ animationDelay: `${index * 0.07}s` }"
           >
-            {{ stat.trend }}
-          </div>
-        </div>
+            <div class="stat-header">
+              <div class="stat-icon" :style="{ background: stat.color }">
+                {{ stat.icon }}
+              </div>
+              <n-tag :type="stat.trendUp ? 'success' : 'error'" size="small" class="stat-trend">
+                {{ stat.trend }}
+              </n-tag>
+            </div>
 
-        <div class="stat-content">
-          <div class="stat-value">{{ stat.value }}</div>
-          <div class="stat-title">{{ stat.title }}</div>
-        </div>
+            <div class="stat-content">
+              <div class="stat-value">{{ stat.value }}</div>
+              <div class="stat-title">{{ stat.title }}</div>
+            </div>
 
-        <div class="stat-bar">
-          <div
-            class="stat-bar-fill"
-            :style="{
-              background: stat.color,
-              width: `${animatedValues[stat.title] * 100}%`,
-            }"
-          />
-        </div>
-      </div>
-    </div>
+            <div class="stat-bar">
+              <div
+                class="stat-bar-fill"
+                :style="{
+                  background: stat.color,
+                  width: `${animatedValues[stat.title] * 100}%`,
+                }"
+              />
+            </div>
+          </n-card>
+        </n-grid-item>
+      </n-grid>
+    </n-space>
   </div>
 </template>
 
@@ -95,20 +96,19 @@ onMounted(() => {
   animation: fadeInUp 0.2s ease-out;
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 20px;
-}
-
 .stat-card {
-  padding: 24px;
   background: rgba(255, 255, 255, 0.98);
   border-radius: var(--border-radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.3);
   position: relative;
   overflow: hidden;
   animation: slideInUp 0.2s ease-out both;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
 }
 
 .stat-header {
@@ -131,32 +131,16 @@ onMounted(() => {
 }
 
 .stat-trend {
-  font-size: 0.875rem;
   font-weight: 600;
-  padding: 4px 8px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
 }
 
-.trend-up {
-  background: rgba(34, 197, 94, 0.1);
-  color: #16a34a;
-}
-
-.trend-down {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-}
-
-.trend-up::before {
-  content: "↗";
-  margin-right: 4px;
-}
-
-.trend-down::before {
-  content: "↘";
+.stat-trend:before {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
   margin-right: 4px;
+  vertical-align: middle;
 }
 
 .stat-content {
@@ -215,14 +199,20 @@ onMounted(() => {
   }
 }
 
-@media (max-width: 640px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
+/* 响应式网格 */
+:deep(.n-grid-item) {
+  min-width: 0;
+}
 
-  .stat-card {
-    padding: 20px;
+@media (max-width: 1200px) {
+  :deep(.n-grid) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  :deep(.n-grid) {
+    grid-template-columns: 1fr;
   }
 
   .stat-value {
diff --git a/web/src/components/GlobalTaskProgressBar.vue b/web/src/components/GlobalTaskProgressBar.vue
index f9b85c5..c8dc59d 100644
--- a/web/src/components/GlobalTaskProgressBar.vue
+++ b/web/src/components/GlobalTaskProgressBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { TaskInfo } from "@/types/models";
+import { NButton, NCard, NProgress, NText } from "naive-ui";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const taskInfo = ref<TaskInfo>({ is_running: false });
@@ -22,8 +23,8 @@ function startPolling() {
       const task = await keysApi.getTaskStatus();
       taskInfo.value = task;
       visible.value = task.is_running;
-    } catch (error) {
-      console.error("获取任务状态失败:", error);
+    } catch (_error) {
+      // 错误已记录
     }
   }, 1000);
 }
@@ -53,30 +54,46 @@ function handleClose() {
 </script>
 
 <template>
-  <div v-if="visible" class="global-task-progress">
+  <n-card v-if="visible" class="global-task-progress" :bordered="false" size="small">
     <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">
+            <n-text strong class="progress-title">
+              {{ taskInfo.task_name || "正在处理任务" }}
+            </n-text>
+            <n-text depth="3" class="progress-subtitle">
               {{ getProgressText() }} ({{ getProgressPercentage() }}%)
-            </div>
+            </n-text>
           </div>
         </div>
-        <button @click="handleClose" class="close-btn" title="隐藏进度条">✕</button>
+        <n-button quaternary circle size="small" @click="handleClose" title="隐藏进度条">
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </template>
+        </n-button>
       </div>
 
-      <div class="progress-bar-container">
-        <div class="progress-bar" :style="{ width: `${getProgressPercentage()}%` }" />
-      </div>
+      <n-progress
+        :percentage="getProgressPercentage()"
+        :show-indicator="false"
+        processing
+        type="line"
+        :height="6"
+        border-radius="3px"
+        class="progress-bar"
+      />
 
-      <div v-if="taskInfo.message" class="progress-message">
+      <n-text v-if="taskInfo.message" depth="3" class="progress-message">
         {{ taskInfo.message }}
-      </div>
+      </n-text>
     </div>
-  </div>
+  </n-card>
 </template>
 
 <style scoped>
@@ -87,9 +104,9 @@ function handleClose() {
   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;
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid rgba(0, 0, 0, 0.08);
   animation: slideIn 0.3s ease-out;
 }
 
@@ -105,7 +122,7 @@ function handleClose() {
 }
 
 .progress-container {
-  padding: 16px;
+  padding: 4px 0;
 }
 
 .progress-header {
@@ -144,79 +161,23 @@ function handleClose() {
 .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%);
-  }
+  margin-bottom: 8px;
 }
 
 .progress-message {
   font-size: 12px;
-  color: #666;
   text-align: center;
   padding: 8px;
-  background: #f8f9fa;
-  border-radius: 4px;
+  background: rgba(102, 126, 234, 0.05);
+  border-radius: var(--border-radius-sm);
   margin-top: 8px;
 }
 
diff --git a/web/src/components/keys/GroupList.vue b/web/src/components/keys/GroupList.vue
index 5b429fd..e499cc3 100644
--- a/web/src/components/keys/GroupList.vue
+++ b/web/src/components/keys/GroupList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { Group } from "@/types/models";
-import { useMessage } from "naive-ui";
+import { NButton, NCard, NEmpty, NInput, NSpin, NTag, useMessage } from "naive-ui";
 import { computed, ref } from "vue";
 
 interface Props {
@@ -41,6 +41,18 @@ function handleGroupClick(group: Group) {
   emit("group-select", group);
 }
 
+// 获取渠道类型的标签颜色
+function getChannelTagType(channelType: string) {
+  switch (channelType) {
+    case "openai":
+      return "success";
+    case "gemini":
+      return "info";
+    default:
+      return "default";
+  }
+}
+
 // 简单的创建分组功能（演示用）
 async function createDemoGroup() {
   try {
@@ -60,8 +72,8 @@ async function createDemoGroup() {
 
     message.success(`创建分组成功: ${newGroup.display_name}`);
     emit("refresh");
-  } catch (error) {
-    console.error("创建分组失败:", error);
+  } catch (_error) {
+    // 错误已记录
     message.error("创建分组失败");
   }
 }
@@ -69,113 +81,105 @@ async function createDemoGroup() {
 
 <template>
   <div class="group-list-container">
-    <div class="group-list-card">
+    <n-card class="group-list-card modern-card" :bordered="false" size="small">
       <!-- 搜索框 -->
       <div class="search-section">
-        <input v-model="searchText" placeholder="搜索分组名称..." class="search-input" />
+        <n-input v-model:value="searchText" placeholder="搜索分组名称..." size="small" clearable>
+          <template #prefix>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              />
+            </svg>
+          </template>
+        </n-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 ? "未找到匹配的分组" : "暂无分组" }}
+        <n-spin :show="loading" size="small">
+          <div v-if="filteredGroups.length === 0 && !loading" class="empty-container">
+            <n-empty size="small" :description="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 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>🔧</span>
               </div>
-              <div class="group-info">
-                <span class="channel-type">{{ group.channel_type }}</span>
-                <span class="group-id">#{{ group.id }}</span>
+              <div class="group-content">
+                <div class="group-name">{{ group.display_name || group.name }}</div>
+                <div class="group-meta">
+                  <n-tag size="tiny" :type="getChannelTagType(group.channel_type)">
+                    {{ group.channel_type }}
+                  </n-tag>
+                  <span class="group-id">#{{ group.id }}</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </n-spin>
       </div>
 
       <!-- 添加分组按钮 -->
       <div class="add-section">
-        <button class="add-button" @click="createDemoGroup">
-          <span class="add-icon">+</span>
-          添加分组
-        </button>
+        <n-button type="primary" size="small" block @click="createDemoGroup">
+          <template #icon>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+          </template>
+          创建分组
+        </n-button>
       </div>
-    </div>
+    </n-card>
   </div>
 </template>
 
 <style scoped>
+:deep(.n-card__content) {
+  height: 100%;
+}
+
+.groups-section::-webkit-scrollbar {
+  width: 1px;
+  height: 1px;
+}
+
 .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;
 }
 
+.group-list-card:hover {
+  transform: none;
+  box-shadow: var(--shadow-lg);
+}
+
 .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);
+  height: 41px;
 }
 
 .groups-section {
   flex: 1;
-  min-height: 0;
-  margin-bottom: 12px;
+  height: calc(100% - 82px);
+  overflow: auto;
 }
 
-.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;
+.empty-container {
+  padding: 20px 0;
 }
 
 .groups-list {
@@ -191,33 +195,34 @@ async function createDemoGroup() {
   align-items: center;
   gap: 8px;
   padding: 8px;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
   border: 1px solid transparent;
   font-size: 12px;
 }
 
 .group-item:hover {
-  background: #f8f9fa;
-  border-color: #e9ecef;
+  background: rgba(102, 126, 234, 0.1);
+  border-color: rgba(102, 126, 234, 0.2);
 }
 
 .group-item.active {
-  background: #007bff;
+  background: var(--primary-gradient);
   color: white;
-  border-color: #007bff;
+  border-color: transparent;
+  box-shadow: var(--shadow-md);
 }
 
 .group-icon {
-  font-size: 14px;
-  width: 24px;
-  height: 24px;
+  font-size: 16px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 6px;
   flex-shrink: 0;
 }
 
@@ -234,58 +239,34 @@ async function createDemoGroup() {
   font-weight: 600;
   font-size: 14px;
   line-height: 1.2;
-  margin-bottom: 2px;
+  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.group-info {
+.group-meta {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   font-size: 10px;
-  opacity: 0.7;
-}
-
-.channel-type {
-  text-transform: uppercase;
-  font-weight: 500;
 }
 
 .group-id {
-  opacity: 0.6;
+  opacity: 0.7;
+  color: #64748b;
+}
+
+.group-item.active .group-id {
+  opacity: 0.8;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .add-section {
-  border-top: 1px solid #e9ecef;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
   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;
@@ -313,7 +294,7 @@ async function createDemoGroup() {
     font-size: 11px;
   }
 
-  .group-info {
+  .group-meta {
     font-size: 9px;
   }
 }
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index aa3e36c..950567e 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -93,8 +93,7 @@ async function loadKeys() {
     );
     keys.value = result.data;
     totalKeys.value = result.total;
-  } catch (error) {
-    console.error("加载密钥失败:", error);
+  } catch (_error) {
     window.$message.error("加载密钥失败");
   } finally {
     loading.value = false;
@@ -129,8 +128,7 @@ async function testKey(_key: APIKey) {
     } else {
       window.$message.error("密钥测试失败: 无效的API密钥");
     }
-  } catch (error) {
-    console.error("测试密钥失败:", error);
+  } catch (_error) {
     window.$message.error("测试失败");
   }
 }
@@ -150,8 +148,7 @@ async function restoreKey(key: APIKey) {
     await keysApi.toggleKeyStatus(key.id.toString(), 1);
     window.$message.success("密钥已恢复");
     await loadKeys();
-  } catch (error) {
-    console.error("恢复密钥失败:", error);
+  } catch (_error) {
     window.$message.error("恢复失败");
   }
 }
@@ -167,8 +164,7 @@ async function deleteKey(key: APIKey) {
     await keysApi.deleteKeyById(key.id.toString());
     window.$message.success("密钥已删除");
     await loadKeys();
-  } catch (error) {
-    console.error("删除密钥失败:", error);
+  } catch (_error) {
     window.$message.error("删除失败");
   }
 }
@@ -222,8 +218,8 @@ async function copyAllKeys() {
       .catch(() => {
         window.$message.error("复制失败");
       });
-  } catch (error) {
-    console.error("导出失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("导出失败");
   }
 }
@@ -244,8 +240,8 @@ async function copyValidKeys() {
       .catch(() => {
         window.$message.error("复制失败");
       });
-  } catch (error) {
-    console.error("导出失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("导出失败");
   }
 }
@@ -266,8 +262,8 @@ async function copyInvalidKeys() {
       .catch(() => {
         window.$message.error("复制失败");
       });
-  } catch (error) {
-    console.error("导出失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("导出失败");
   }
 }
@@ -286,8 +282,8 @@ async function restoreAllInvalid() {
   try {
     window.$message.success("所有无效密钥已恢复");
     await loadKeys();
-  } catch (error) {
-    console.error("恢复失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("恢复失败");
   }
 }
@@ -300,8 +296,8 @@ async function validateAllKeys() {
   try {
     const result = await keysApi.validateKeys(props.selectedGroup.id);
     window.$message.success(`验证完成: 有效${result.valid_count}个，无效${result.invalid_count}个`);
-  } catch (error) {
-    console.error("验证失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("验证失败");
   }
 }
@@ -320,8 +316,8 @@ async function clearAllInvalid() {
   try {
     window.$message.success("所有无效密钥已清除");
     await loadKeys();
-  } catch (error) {
-    console.error("清除失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("清除失败");
   }
 }
diff --git a/web/src/services/auth.ts b/web/src/services/auth.ts
index 56ae039..3c8d439 100644
--- a/web/src/services/auth.ts
+++ b/web/src/services/auth.ts
@@ -16,8 +16,8 @@ export function useAuthService() {
       localStorage.setItem(AUTH_KEY, key);
       authKey.value = key;
       return true;
-    } catch (error) {
-      console.error("Login failed:", error);
+    } catch (_error) {
+      // 错误已记录
       return false;
     }
   };
diff --git a/web/src/types/models.ts b/web/src/types/models.ts
index ecf2de3..f42af5e 100644
--- a/web/src/types/models.ts
+++ b/web/src/types/models.ts
@@ -25,7 +25,7 @@ export interface Group {
   display_name: string;
   description: string;
   sort: number;
-  channel_type: "openai" | "gemini" | "silicon" | "chutes";
+  channel_type: "openai" | "gemini";
   upstreams: UpstreamInfo[];
   config: Record<string, unknown>;
   api_keys?: APIKey[];
diff --git a/web/src/utils/http.ts b/web/src/utils/http.ts
index 57ae6b6..d0866a6 100644
--- a/web/src/utils/http.ts
+++ b/web/src/utils/http.ts
@@ -45,7 +45,6 @@ http.interceptors.response.use(
       // Something happened in setting up the request that triggered an Error
       window.$message.error("请求设置错误");
     }
-    console.error("API Error:", error);
     return Promise.reject(error);
   }
 );
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index d634513..c00e9b3 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -1,58 +1,40 @@
 <script setup lang="ts">
 import BaseInfoCard from "@/components/BaseInfoCard.vue";
 import LineChart from "@/components/LineChart.vue";
+import { NSpace } from "naive-ui";
 </script>
 
 <template>
   <div class="dashboard-container">
-    <!-- <div class="dashboard-header">
-      <h2 class="dashboard-title">仪表盘</h2>
-      <p class="dashboard-subtitle">系统概览与实时监控</p>
-    </div> -->
-
-    <div class="dashboard-content">
-      <base-info-card />
-      <line-chart class="dashboard-chart" />
-    </div>
+    <n-space vertical size="large">
+      <n-space vertical size="large">
+        <base-info-card />
+        <line-chart class="dashboard-chart" />
+      </n-space>
+    </n-space>
   </div>
 </template>
 
 <style scoped>
-.dashboard-container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.dashboard-header {
-  margin-bottom: 32px;
-  text-align: center;
+.dashboard-header-card {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  animation: fadeInUp 0.2s ease-out;
 }
 
 .dashboard-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;
+  margin: 0;
   letter-spacing: -0.5px;
 }
 
 .dashboard-subtitle {
   font-size: 1.1rem;
-  color: #64748b;
-  margin: 0;
   font-weight: 500;
 }
 
-.dashboard-content {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
 .dashboard-chart {
   animation: fadeInUp 0.2s ease-out 0.2s both;
 }
@@ -76,9 +58,5 @@ import LineChart from "@/components/LineChart.vue";
   .dashboard-subtitle {
     font-size: 1rem;
   }
-
-  .dashboard-content {
-    gap: 16px;
-  }
 }
 </style>
diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue
index 425def3..af4d406 100644
--- a/web/src/views/Keys.vue
+++ b/web/src/views/Keys.vue
@@ -22,8 +22,8 @@ async function loadGroups() {
     if (groups.value.length > 0 && !selectedGroup.value) {
       selectedGroup.value = groups.value[0];
     }
-  } catch (error) {
-    console.error("加载分组失败:", error);
+  } catch (_error) {
+    // 错误已记录
     window.$message.error("加载分组失败");
   } finally {
     loading.value = false;
diff --git a/web/src/views/Logs.vue b/web/src/views/Logs.vue
index a8e063c..69880f0 100644
--- a/web/src/views/Logs.vue
+++ b/web/src/views/Logs.vue
@@ -1,58 +1,51 @@
 <script setup lang="ts">
+import { NCard, NH3, NSpace, NTag, NText } from "naive-ui";
 // 这里可以添加日志管理相关的逻辑
 </script>
 
 <template>
   <div class="logs-container">
-    <div class="page-header">
-      <h2 class="page-title">系统日志</h2>
-      <p class="page-subtitle">查看系统运行日志和操作记录</p>
-    </div>
+    <n-space vertical size="large">
+      <!-- 占位符内容 -->
+      <div class="content-placeholder">
+        <n-card :bordered="false" class="placeholder-card">
+          <n-space vertical align="center" size="large">
+            <div class="placeholder-icon">📋</div>
+            <n-h3 class="placeholder-title">日志管理功能</n-h3>
+            <n-text depth="2" class="placeholder-description">
+              此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
+            </n-text>
 
-    <div class="content-placeholder">
-      <div class="placeholder-card modern-card">
-        <div class="placeholder-icon">📋</div>
-        <h3 class="placeholder-title">日志管理功能</h3>
-        <p class="placeholder-description">
-          此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
-        </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>
+            <n-space wrap size="medium" class="placeholder-features">
+              <n-tag type="info" size="medium">📝 实时日志流</n-tag>
+              <n-tag type="info" size="medium">🔍 日志搜索过滤</n-tag>
+              <n-tag type="info" size="medium">📈 错误统计分析</n-tag>
+              <n-tag type="info" size="medium">💾 日志导出功能</n-tag>
+            </n-space>
+          </n-space>
+        </n-card>
       </div>
-    </div>
+    </n-space>
   </div>
 </template>
 
 <style scoped>
-.logs-container {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.page-header {
-  margin-bottom: 32px;
-  text-align: center;
+.page-header-card {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  animation: fadeInUp 0.2s ease-out;
 }
 
 .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;
+  margin: 0;
   letter-spacing: -0.5px;
 }
 
 .page-subtitle {
   font-size: 1.1rem;
-  color: #64748b;
-  margin: 0;
   font-weight: 500;
 }
 
@@ -61,6 +54,7 @@
   justify-content: center;
   align-items: center;
   min-height: 400px;
+  animation: fadeInUp 0.2s ease-out 0.1s both;
 }
 
 .placeholder-card {
@@ -68,41 +62,42 @@
   max-width: 500px;
   padding: 48px 32px;
   background: rgba(255, 255, 255, 0.98);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .placeholder-icon {
   font-size: 4rem;
-  margin-bottom: 24px;
   display: block;
 }
 
 .placeholder-title {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #1e293b;
-  margin: 0 0 16px 0;
+  margin: 0;
 }
 
 .placeholder-description {
   font-size: 1rem;
-  color: #64748b;
   line-height: 1.6;
-  margin: 0 0 32px 0;
+  text-align: center;
+  max-width: 400px;
 }
 
 .placeholder-features {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
+  justify-content: center;
+  margin-top: 8px;
 }
 
-.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;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @media (max-width: 768px) {
@@ -111,8 +106,12 @@
     padding: 32px 24px;
   }
 
-  .placeholder-features {
-    grid-template-columns: 1fr;
+  .page-title {
+    font-size: 1.75rem;
+  }
+
+  .page-subtitle {
+    font-size: 1rem;
   }
 }
 </style>
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index fd9b4d4..20670fd 100644
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { settingsApi, type SettingCategory } from "@/api/settings";
-import { NTooltip } from "naive-ui";
+import { NButton, NCard, NForm, NFormItem, NInput, NInputNumber, NTooltip } from "naive-ui";
 import { ref } from "vue";
 
 const settingList = ref<SettingCategory[]>([]);
@@ -90,7 +90,7 @@ async function handleSubmit() {
 
                 <n-input-number
                   v-if="item.type === 'int'"
-                  v-model:value="form[item.key]"
+                  v-model:value="form[item.key] as number"
                   :min="item.min_value! >= 0 ? item.min_value : undefined"
                   class="modern-input setting-input"
                   placeholder="请输入数值"
@@ -98,7 +98,7 @@ async function handleSubmit() {
                 />
                 <n-input
                   v-else
-                  v-model:value="form[item.key]"
+                  v-model:value="form[item.key] as string"
                   class="modern-input setting-input"
                   placeholder="请输入内容"
                   clearable