From 4e0b283fa9bbd8e00a66b2a7d80b4087e96dc81c Mon Sep 17 00:00:00 2001
From: YGXB_net <ygxb-net@outlook.com>
Date: Sun, 14 Jun 2026 01:23:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin):=20=E9=87=8D=E6=9E=84=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=89=AA=E5=A4=9A=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将AdminView中的header和main标签替换为el-header和el-main组件
- 移除自定义的导航菜单样式，使用Element Plus的导航组件
- 将管理员下拉菜单替换为el-dropdown组件
- 更新所有颜色变量为Element Plus的CSS变量
- 移除自定义按钮和表单样式，统一使用Element Plus组件
- 优化响应式布局和间距处理
---
 web/src/App.vue                         | 152 +-----------------------
 web/src/components/AddDataDialog.vue    |   2 +-
 web/src/views/AdminView.vue             | 118 +++++-------------
 web/src/views/HomeView.vue              |  41 +++----
 web/src/views/admin/TokenDetailView.vue |  21 ++--
 web/src/views/admin/TokenManageView.vue |  14 +--
 6 files changed, 67 insertions(+), 281 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 7a36c8b..a5d277c 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -12,16 +12,6 @@ const themeMode = ref('light')
 
 <style>
 :root {
-  --primary-color: #409eff;
-  --primary-light: #79bbff;
-  --success-color: #67c23a;
-  --warning-color: #e6a23c;
-  --danger-color: #f56c6c;
-  --info-color: #909399;
-  --text-primary: #303133;
-  --text-regular: #606266;
-  --text-secondary: #909399;
-  --border-color: #dcdfe6;
   --bg-page: #f5f7fa;
   --bg-card: #ffffff;
   --bg-header: #ffffff;
@@ -33,7 +23,7 @@ const themeMode = ref('light')
   box-sizing: border-box;
 }
 
-html, body, #app {
+html, body {
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
@@ -56,154 +46,20 @@ html, body, #app {
 .page-title {
   font-size: 20px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   margin-bottom: 20px;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--el-border-color);
 }
 
 /* Section 标题 */
 .section-title {
   font-size: 16px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   margin: 20px 0 16px;
 }
 
-/* 按钮组样式 */
-.btn-group {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-/* 表格工具栏 */
-.table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-/* Flex 布局工具类 */
-.flex-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-/* Gap 间距 */
-.gap-sm {
-  gap: 8px;
-}
-
-.gap-md {
-  gap: 12px;
-}
-
-.gap-lg {
-  gap: 16px;
-}
-
-/* 间距工具类 */
-.mt-sm {
-  margin-top: 8px;
-}
-
-.mt-md {
-  margin-top: 16px;
-}
-
-.mt-lg {
-  margin-top: 24px;
-}
-
-.mb-sm {
-  margin-bottom: 8px;
-}
-
-.mb-md {
-  margin-bottom: 16px;
-}
-
-.mb-lg {
-  margin-bottom: 24px;
-}
-
-.ml-sm {
-  margin-left: 8px;
-}
-
-.ml-md {
-  margin-left: 12px;
-}
-
-.ml-lg {
-  margin-left: 16px;
-}
-
-.mr-sm {
-  margin-right: 8px;
-}
-
-.mr-md {
-  margin-right: 12px;
-}
-
-.mr-lg {
-  margin-right: 16px;
-}
-
-/* 文本工具类 */
-.text-primary {
-  color: var(--text-primary);
-}
-
-.text-success {
-  color: var(--success-color);
-}
-
-.text-warning {
-  color: var(--warning-color);
-}
-
-.text-danger {
-  color: var(--danger-color);
-}
-
-.text-info {
-  color: var(--info-color);
-}
-
-/* 加载动画 */
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-/* 空状态 */
-.empty-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  color: var(--text-secondary);
-}
-
 /* 响应式 */
 @media (max-width: 768px) {
   .content-card {
diff --git a/web/src/components/AddDataDialog.vue b/web/src/components/AddDataDialog.vue
index 0b210de..489d188 100644
--- a/web/src/components/AddDataDialog.vue
+++ b/web/src/components/AddDataDialog.vue
@@ -135,7 +135,7 @@ const handleUpload = async () => {
 
 .progress-text {
   font-size: 14px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   white-space: nowrap;
 }
 
diff --git a/web/src/views/AdminView.vue b/web/src/views/AdminView.vue
index 47bf887..b2932d5 100644
--- a/web/src/views/AdminView.vue
+++ b/web/src/views/AdminView.vue
@@ -30,23 +30,18 @@ const logout = () => {
 
 <template>
   <div class="admin-layout">
-    <header class="admin-header">
+    <el-header class="admin-header">
       <div class="header-left">
         <div class="logo">
-          <el-icon size="24">
-            <Edit/>
-          </el-icon>
-          <span class="logo-text">DYPID 管理后台</span>
+          DYPID 管理后台
         </div>
       </div>
 
       <nav class="header-nav">
-        <div
-            v-for="item in menuItems"
-            :key="item.key"
-            class="nav-item"
-            :class="{ active: activeIndex === item.key }"
-            @click="handleSelect(item.key)"
+        <div v-for="item in menuItems" class="nav-item"
+             :key="item.key"
+             :class="{ active: activeIndex === item.key }"
+             @click="handleSelect(item.key)"
         >
           <el-icon>
             <component :is="item.icon"/>
@@ -56,34 +51,32 @@ const logout = () => {
       </nav>
 
       <div class="header-right">
-        <div v-if="store.isAdmin" class="admin-badge">
-          <el-icon>
-            <User/>
-          </el-icon>
-          <span>管理员</span>
-        </div>
-        <el-button
-            v-if="store.isAdmin"
-            type="danger"
-            plain
-            size="small"
-            @click="logout"
-        >
-          <el-icon>
-            <CloseBold/>
-          </el-icon>
-          退出
-        </el-button>
-      </div>
-    </header>
+        <el-dropdown v-if="store.isAdmin">
+          <el-button :icon="User">管理员</el-button>
 
-    <main class="admin-main">
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="logout()">
+                <el-text type="danger">
+                  <el-icon>
+                    <CloseBold/>
+                  </el-icon>
+                  退出登录
+                </el-text>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
+
+    <el-main>
       <router-view v-slot="{ Component }">
         <transition name="fade" mode="out-in">
           <component :is="Component"/>
         </transition>
       </router-view>
-    </main>
+    </el-main>
   </div>
 </template>
 
@@ -99,10 +92,8 @@ const logout = () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
-  height: 60px;
   background: var(--bg-header);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--el-border-color);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -117,21 +108,11 @@ const logout = () => {
   display: flex;
   align-items: center;
   gap: 10px;
-  color: var(--primary-color);
+  color: var(--el-color-primary);
   font-weight: 600;
   font-size: 18px;
 }
 
-.logo-text {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .logo-text {
-    display: inline;
-  }
-}
-
 .header-nav {
   display: flex;
   gap: 8px;
@@ -144,18 +125,18 @@ const logout = () => {
   padding: 8px 16px;
   border-radius: 8px;
   cursor: pointer;
-  color: var(--text-regular);
+  color: var(--el-text-color-regular);
   font-size: 14px;
   transition: all 0.2s;
 }
 
 .nav-item:hover {
   background: var(--bg-page);
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
 }
 
 .nav-item.active {
-  background: var(--primary-color);
+  background: var(--el-color-primary);
   color: #fff;
 }
 
@@ -165,37 +146,8 @@ const logout = () => {
   gap: 12px;
 }
 
-.admin-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: var(--danger-color);
-  color: #fff;
-  border-radius: 20px;
-  font-size: 13px;
-}
-
-.admin-main {
-  flex: 1;
-  padding: 24px 48px;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
 @media (max-width: 768px) {
   .admin-header {
-    padding: 0 16px;
     flex-wrap: wrap;
     height: auto;
     padding: 12px 16px;
@@ -212,13 +164,5 @@ const logout = () => {
     padding: 8px 12px;
     font-size: 13px;
   }
-
-  .nav-item span {
-    display: none;
-  }
-
-  .admin-main {
-    padding: 16px;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 7ab486e..d6ed492 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -3,7 +3,7 @@ import {onMounted, onUnmounted, ref} from 'vue'
 import api from "@/api"
 import {useRoute} from "vue-router"
 import {ElMessage} from "element-plus"
-import {DataAnalysis, Document, Key, Search, Upload, Warning} from '@element-plus/icons-vue'
+import {DataAnalysis, Document, Key, Plus, Search, Warning} from '@element-plus/icons-vue'
 import AddDataDialog from "@/components/AddDataDialog.vue";
 
 const route = useRoute()
@@ -71,36 +71,23 @@ const statCards = [
 
 <template>
   <div class="home-page">
-    <div class="content-card" style="max-width: 1600px;">
+    <div class="content-card" style="max-width: 1600px">
       <div class="page-header">
         <div class="page-title">Token 信息查询</div>
         <div class="header-subtitle">输入 Token 以查看去重和缓存信息</div>
       </div>
 
       <div class="search-box">
-        <el-input
-            v-model="inputToken"
-            placeholder="输入 Token"
-            clearable
-            size="large"
-            class="token-input"
-            @change="inputChange"
-        >
-          <template #prefix>
-            <el-icon>
-              <Search/>
-            </el-icon>
-          </template>
-        </el-input>
+        <el-input placeholder="输入 Token" size="large" clearable class="token-input"
+                  v-model="inputToken" @change="inputChange"/>
 
-        <el-button type="primary" size="large" @click="refresh" :loading="loading">
+        <el-button type="primary" size="large"
+                   @click="refresh" :loading="loading" :icon="Search">
           查询
         </el-button>
 
-        <el-button type="success" size="large" @click="showAddDataDialog = true">
-          <el-icon>
-            <Upload/>
-          </el-icon>
+        <el-button type="success" size="large" class=""
+                   @click="showAddDataDialog = true" :icon="Plus">
           增加数据
         </el-button>
       </div>
@@ -155,7 +142,7 @@ const statCards = [
 }
 
 .header-subtitle {
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   margin-top: 8px;
 }
 
@@ -193,7 +180,7 @@ const statCards = [
 
 .auto-refresh {
   font-size: 12px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .stat-cards {
@@ -233,14 +220,14 @@ const statCards = [
 
 .stat-label {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   margin-bottom: 4px;
 }
 
 .stat-value {
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -250,7 +237,7 @@ const statCards = [
   text-align: center;
   margin-top: 20px;
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .empty-state {
@@ -258,7 +245,7 @@ const statCards = [
   flex-direction: column;
   align-items: center;
   padding: 64px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .empty-text {
diff --git a/web/src/views/admin/TokenDetailView.vue b/web/src/views/admin/TokenDetailView.vue
index 3c585f5..b05756f 100644
--- a/web/src/views/admin/TokenDetailView.vue
+++ b/web/src/views/admin/TokenDetailView.vue
@@ -318,7 +318,6 @@ const statCards = [
 
 <style scoped>
 .token-detail {
-  max-width: 1600px;
   margin: 0 auto;
   width: 100%;
   padding: 0;
@@ -345,7 +344,7 @@ const statCards = [
 }
 
 .no-permission-text {
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 /* Token 选择 */
@@ -359,7 +358,7 @@ const statCards = [
 
 .update-time {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 /* 信息卡片 */
@@ -411,14 +410,14 @@ const statCards = [
 
 .stat-label {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   margin-bottom: 4px;
 }
 
 .stat-value {
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   word-break: break-all;
 }
 
@@ -430,7 +429,7 @@ const statCards = [
 .section-subtitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   margin: 24px 0 16px;
 }
 
@@ -462,12 +461,12 @@ const statCards = [
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--primary-color);
+  background: var(--el-color-primary);
   color: #fff;
 }
 
 .action-icon.warning {
-  background: var(--warning-color);
+  background: var(--el-color-warning);
 }
 
 .action-info {
@@ -478,13 +477,13 @@ const statCards = [
 .action-label {
   font-size: 15px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   margin-bottom: 4px;
 }
 
 .action-desc {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 /* 空状态 */
@@ -493,7 +492,7 @@ const statCards = [
   flex-direction: column;
   align-items: center;
   padding: 64px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .empty-text {
diff --git a/web/src/views/admin/TokenManageView.vue b/web/src/views/admin/TokenManageView.vue
index d8a5789..37854e7 100644
--- a/web/src/views/admin/TokenManageView.vue
+++ b/web/src/views/admin/TokenManageView.vue
@@ -261,7 +261,8 @@ const deleteToken = async (row: any) => {
             <span class="table-count">共 {{ tableData.length }} 条</span>
           </div>
 
-          <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
+          <el-table empty-text="没有数据" stripe style="width: 100%"
+                    :data="tableData" v-loading="loading">
             <el-table-column prop="token" label="Token" min-width="100" show-overflow-tooltip>
               <template #default="{ row }">
                 <div class="token-cell">
@@ -385,7 +386,6 @@ const deleteToken = async (row: any) => {
 
 <style scoped>
 .token-manage {
-  max-width: 1600px;
   margin: 0 auto;
   width: 100%;
   padding: 0;
@@ -416,13 +416,13 @@ const deleteToken = async (row: any) => {
 .login-title {
   font-size: 24px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   margin-bottom: 8px;
 }
 
 .login-subtitle {
   font-size: 14px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   margin-bottom: 32px;
 }
 
@@ -446,7 +446,7 @@ const deleteToken = async (row: any) => {
 .form-title {
   font-size: 15px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--el-text-color-primary);
   margin-bottom: 16px;
 }
 
@@ -479,7 +479,7 @@ const deleteToken = async (row: any) => {
 
 .table-count {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .token-cell {
@@ -494,7 +494,7 @@ const deleteToken = async (row: any) => {
 }
 
 .notes-text {
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;