From 650c480416fdc2f1a2ad7acbe4fefbdb477394df Mon Sep 17 00:00:00 2001
From: YGXB_net <ygxb-net@outlook.com>
Date: Thu, 23 Apr 2026 23:51:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin):=20=E9=87=8D=E6=9E=84=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=91=98=E7=95=8C=E9=9D=A2=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新 AdminView.vue 组件结构，使用新的布局和导航设计
- 集成 Element Plus 图标组件，提升界面美观度
- 添加响应式设计支持，适配移动端设备
- 重构 HomeView.vue 组件，改进 Token 查询功能
- 实现自动刷新机制，每5秒更新 Token 信息
- 优化 TokenDetailView.vue 组件，增强数据管理功能
- 添加确认对话框，防止误删操作
- 在 App.vue 中引入全局 CSS 变量和主题系统
- 创建通用组件样式类，统一页面外观
- 优化数据加载逻辑，提升页面性能和用户体验
---
 web/public/favicon-vue.ico        | Bin 0 -> 4286 bytes
 web/public/favicon.ico            | Bin 4286 -> 10069 bytes
 web/src/App.vue                   | 156 ++++++-
 web/src/views/AdminView.vue       | 234 ++++++++--
 web/src/views/HomeView.vue        | 318 ++++++++++---
 web/src/views/TokenDetailView.vue | 649 ++++++++++++++++++++-------
 web/src/views/TokenManageView.vue | 722 +++++++++++++++++++-----------
 7 files changed, 1574 insertions(+), 505 deletions(-)
 create mode 100644 web/public/favicon-vue.ico

diff --git a/web/public/favicon-vue.ico b/web/public/favicon-vue.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
GIT binary patch
literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

literal 0
HcmV?d00001

diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..f1ae864153822df01d9a50616a9618e54263afc8 100644
GIT binary patch
literal 10069
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

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/web/src/App.vue b/web/src/App.vue
index 19444e6..58309fa 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,15 +1,161 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 
+const themeMode = ref('light')
 </script>
 
 <template>
-  <router-view></router-view>
+  <div :class="themeMode" class="app-container">
+    <router-view></router-view>
+  </div>
 </template>
 
-<style scoped>
-html, body, #app {
-  height: 100%;
+<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;
+}
+
+* {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
-</style>
+
+html, body, #app {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.app-container {
+  min-height: 100vh;
+  background: var(--bg-page);
+  max-width: 100%;
+}
+
+/* 卡片通用样式 */
+.content-card {
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* 页面标题样式 */
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Section 标题 */
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-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 {
+    padding: 16px;
+    border-radius: 0;
+  }
+  
+  .hide-on-mobile {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/AdminView.vue b/web/src/views/AdminView.vue
index 1c70962..7206353 100644
--- a/web/src/views/AdminView.vue
+++ b/web/src/views/AdminView.vue
@@ -1,50 +1,224 @@
 <script setup lang="ts">
-import {ref, watch} from 'vue'
-import {useRoute, useRouter} from "vue-router";
-import {useCounterStore} from "@/stores/counter.ts";
+import {ref, watch, computed} from 'vue'
+import {useRoute, useRouter} from "vue-router"
+import {useCounterStore} from "@/stores/counter.ts"
+import {Edit, Delete, Clock, User, Document} from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
+const store = useCounterStore()
 
-const activeIndex = ref(route.name?.toString() || "TokenList")
+const activeIndex = ref(route.name?.toString() || "TokenManage")
 
 watch(route, (newRoute) => {
-  activeIndex.value = newRoute.name?.toString() || "TokenList"
+  activeIndex.value = newRoute.name?.toString() || "TokenManage"
 })
 
 const handleSelect = (key: string) => {
-  router.push({
-    name: key
-  })
+  router.push({name: key})
+}
+
+const menuItems = [
+  {key: 'TokenManage', label: '管理 Token', icon: Edit},
+  {key: 'TokenDetail', label: 'Token 详情', icon: Document},
+]
+
+const logout = () => {
+  store.isAdmin = false
 }
 </script>
 
 <template>
-  <el-container>
-    <el-header>
-      <el-menu
-          :default-active="activeIndex"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="handleSelect"
-      >
-        <el-menu-item index="TokenManage">管理Token</el-menu-item>
-        <el-menu-item index="TokenDetail">Token详细信息</el-menu-item>
-        <el-menu-item v-if="useCounterStore().isAdmin">
-          <el-button type="danger" plain @click="useCounterStore().isAdmin=false">退出管理员</el-button>
-        </el-menu-item>
-      </el-menu>
+  <div class="admin-layout">
+    <header class="admin-header">
+      <div class="header-left">
+        <div class="logo">
+          <el-icon size="24">
+            <Edit/>
+          </el-icon>
+          <span class="logo-text">DYPID 管理后台</span>
+        </div>
+      </div>
 
-    </el-header>
+      <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)"
+        >
+          <el-icon>
+            <component :is="item.icon"/>
+          </el-icon>
+          <span>{{ item.label }}</span>
+        </div>
+      </nav>
 
-    <el-container>
-      <el-main>
-        <router-view></router-view>
-      </el-main>
-    </el-container>
-  </el-container>
+      <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>
+            <Delete/>
+          </el-icon>
+          退出
+        </el-button>
+      </div>
+    </header>
+
+    <main class="admin-main">
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component"/>
+        </transition>
+      </router-view>
+    </main>
+  </div>
 </template>
 
 <style scoped>
+.admin-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-page);
+}
 
-</style>
+.admin-header {
+  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);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--primary-color);
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.logo-text {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .logo-text {
+    display: inline;
+  }
+}
+
+.header-nav {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text-regular);
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.nav-item:hover {
+  background: var(--bg-page);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: var(--primary-color);
+  color: #fff;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  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;
+  }
+
+  .header-nav {
+    order: 3;
+    width: 100%;
+    margin-top: 12px;
+    overflow-x: auto;
+  }
+
+  .nav-item {
+    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 e701f74..6818dcf 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,77 +1,275 @@
 <script setup lang="ts">
-import {ref} from 'vue'
-import axios from "@/axios.ts";
+import {ref, onMounted, onUnmounted} from 'vue'
+import axios from "@/axios.ts"
 import {useRoute} from "vue-router"
-import {ElMessage} from "element-plus";
+import {ElMessage} from "element-plus"
+import {
+  Key, Refresh, Delete, DataAnalysis,
+  Document, Warning, Search, InfoFilled
+} from '@element-plus/icons-vue'
 
-const token = ref(useRoute().query.token)
-const input = ref(useRoute().query.token)
-const result = ref()
+const route = useRoute()
+const token = ref(route.query.token as string || '')
+const input = ref(route.query.token as string || '')
+const result = ref<any>(null)
+const loading = ref(false)
+const lastUpdate = ref('')
+
+const updateTime = () => {
+  const now = new Date()
+  lastUpdate.value = now.toLocaleTimeString()
+}
+
+const fetchInfo = async () => {
+  if (!input.value) return
+  loading.value = true
+  try {
+    const res = await axios.get('/api/token/info', {
+      params: {token: input.value}
+    })
+    result.value = res.data.result
+    token.value = input.value
+    updateTime()
+    // ElMessage({message: '刷新成功', type: 'success', duration: 1500})
+  } catch {
+    ElMessage({message: 'Token输入错误', type: 'error', duration: 2000})
+  } finally {
+    loading.value = false
+  }
+}
 
 const inputChange = () => {
-  if (input.value != null && input.value != '') {
-    axios.get('/api/token/info', {
-      params: {
-        token: input.value
-      }
-    }).then(res => {
-      result.value = res.data.result
-      token.value = input.value
-      ElMessage({
-        message: '更改成功',
-        type: 'success',
-      })
-    }).catch(error => {
-      ElMessage({
-        message: 'Token输入错误',
-        type: 'error',
-      })
-    })
-  }
+  if (input.value) fetchInfo()
 }
 
-const getInfo = () => {
-  if (token.value != null && token.value != '') {
-    axios.get('/api/token/info', {
-      params: {
-        token: token.value
-      }
-    }).then(res => {
-      result.value = res.data.result
-    })
-  }
-}
+let timer: number
+onMounted(() => {
+  if (token.value) fetchInfo()
+  timer = window.setInterval(fetchInfo, 5000)
+})
 
-getInfo()
-setInterval(getInfo, 5000)
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
+const statCards = [
+  {label: '去重对象', key: 'dedup_object', icon: DataAnalysis, color: '#409eff'},
+  {label: '上传数据格式', key: 'data_format', icon: Document, color: '#67c23a'},
+  {label: '去重记录值', key: 'dedup_items_number', icon: Key, color: '#e6a23c'},
+  {label: 'Redis中数据条数', key: 'cache_list_number', icon: Warning, color: '#909399'},
+]
 </script>
 
-
 <template>
-  <b>当前Token：</b>
-  <el-input
-      v-model="input"
-      style="width: 240px"
-      placeholder="输入Token"
-      clearable
-      @change="inputChange"
-  />
+  <div class="home-page">
+    <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>
 
-  <el-divider/>
-  <b>Token信息（每5秒刷新）</b>
-  <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
-  <el-descriptions
-      direction="vertical"
-      :column="4"
-      border
-  >
-    <el-descriptions-item label="去重对象">{{ result?.dedup_object }}</el-descriptions-item>
-    <el-descriptions-item label="上传数据格式">{{ result?.data_format }}</el-descriptions-item>
-    <el-descriptions-item label="去重记录值">{{ result?.dedup_items_number }}</el-descriptions-item>
-    <el-descriptions-item label="Redis中数据条数">{{ result?.cache_list_number }}</el-descriptions-item>
-  </el-descriptions>
+      <div class="search-box">
+        <el-input
+            v-model="input"
+            placeholder="输入 Token"
+            clearable
+            size="large"
+            class="token-input"
+            @change="inputChange"
+            @keyup.enter="fetchInfo"
+        >
+          <template #prefix>
+            <el-icon>
+              <Search/>
+            </el-icon>
+          </template>
+        </el-input>
+        <el-button type="primary" size="large" @click="fetchInfo" :loading="loading">
+          查询
+        </el-button>
+      </div>
+
+      <div v-if="result" class="result-section">
+        <div class="result-header">
+          <span class="section-title">Token 信息</span>
+          <span class="auto-refresh">每5秒自动刷新</span>
+        </div>
+
+        <div class="stat-cards">
+          <div v-for="card in statCards" :key="card.key" class="stat-card">
+            <div class="stat-icon" :style="{ background: card.color + '20', color: card.color }">
+              <el-icon size="24">
+                <component :is="card.icon"/>
+              </el-icon>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">{{ card.label }}</div>
+              <div class="stat-value">{{ result[card.key] || '-' }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="lastUpdate" class="update-time">
+          最后更新: {{ lastUpdate }}
+        </div>
+      </div>
+
+      <div v-else class="empty-state">
+        <el-icon size="64" color="#dcdfe6">
+          <Search/>
+        </el-icon>
+        <div class="empty-text">请输入 Token 进行查询</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.home-page {
+  padding: 24px 48px;
+  max-width: 100%;
+  margin: 0 auto;
+}
 
+.page-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.header-subtitle {
+  color: var(--text-secondary);
+  margin-top: 8px;
+}
+
+.search-box {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.token-input {
+  flex: 1;
+  max-width: 600px;
+}
+
+.result-section {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.auto-refresh {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--bg-page);
+  border-radius: 12px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.update-time {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 64px;
+  color: var(--text-secondary);
+}
+
+.empty-text {
+  margin-top: 16px;
+  font-size: 15px;
+}
+
+@media (max-width: 1200px) {
+  .stat-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .home-page {
+    padding: 16px;
+  }
+
+  .search-box {
+    flex-direction: column;
+  }
+
+  .token-input {
+    max-width: none;
+  }
+
+  .stat-cards {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/TokenDetailView.vue b/web/src/views/TokenDetailView.vue
index b6aaccf..1cd4898 100644
--- a/web/src/views/TokenDetailView.vue
+++ b/web/src/views/TokenDetailView.vue
@@ -1,198 +1,533 @@
 <script setup lang="ts">
-import {useCounterStore} from "@/stores/counter.ts";
-import {ref, watch} from 'vue'
-import axios from "@/axios.ts";
+import {ref, onMounted, onUnmounted, watch} from 'vue'
+import {useCounterStore} from "@/stores/counter.ts"
+import axios from "@/axios.ts"
+import {ElMessage, ElMessageBox} from 'element-plus'
+import {
+  Key, Refresh, Delete, DataAnalysis,
+  Document, Warning, Search, InfoFilled
+} from '@element-plus/icons-vue'
 
-
-// 创建响应式引用，用于存储API请求结果
-const result = ref()
-
-// 创建响应式引用，用于存储当前选中的token值
+const store = useCounterStore()
+const result = ref<any>(null)
 const value = ref('')
-value.value = useCounterStore().token
+const options = ref<string[]>([])
+const loading = ref(false)
+const lastUpdate = ref('')
 
-// 创建响应式引用，用于存储下拉选项列表
-const options = ref([] as string[])
-
-// 控制删除指定Redis键的确认对话框的显示状态
 const deleteSpecifyDataVisible = ref(false)
 const inputSpecifyData = ref('')
-
 const deleteSpecifyDedupVisible = ref(false)
 const inputSpecifyDedup = ref('')
 const deleteSpecifyRawVisible = ref(false)
 const inputSpecifyRaw = ref('')
 
-const getInfo = () => {
-  if (value.value != '') {
-    axios.get('/api/token/info', {
-      params: {
-        token: value.value
-      }
-    }).then(res => {
-      if (res.status == 200) {
-        result.value = res.data.result
-      }
+const fetchInfo = async () => {
+  if (!value.value) return
+  loading.value = true
+  try {
+    const res = await axios.get('/api/token/info', {
+      params: {token: value.value}
     })
+    if (res.status === 200) {
+      result.value = res.data.result
+      lastUpdate.value = new Date().toLocaleTimeString()
+    }
+  } finally {
+    loading.value = false
   }
 }
 
-const deleteDedup = () => {
-  axios.delete('/api/token/info', {
-    params: {
-      token: value.value,
-      dedup_bf: "all"
+const fetchTokens = async () => {
+  try {
+    const res = await axios.get('/api/token')
+    if (res.status === 200) {
+      options.value = res.data.result?.map((item: any) => item.token) || []
     }
-  }).then(res => {
-    getInfo()
+  } catch (error) {
+    console.error('Failed to fetch tokens:', error)
+  }
+}
+
+const refresh = () => {
+  fetchInfo()
+  ElMessage({message: '刷新成功', type: 'success', duration: 1500})
+}
+
+const deleteDedup = () => {
+  ElMessageBox.confirm('确定要删除全部去重参考值吗？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await axios.delete('/api/token/info', {
+      params: {token: value.value, dedup_bf: "all"}
+    })
+    ElMessage({message: '删除成功', type: 'success'})
+    fetchInfo()
+  }).catch(() => {
   })
 }
 
 const deleteRedis = () => {
-  axios.delete('/api/token/info', {
-    params: {
-      token: value.value,
-      cache_list: "all",
-    }
-  }).then(res => {
-    getInfo()
+  ElMessageBox.confirm('确定要删除全部原始数据吗？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await axios.delete('/api/token/info', {
+      params: {token: value.value, cache_list: "all"}
+    })
+    ElMessage({message: '删除成功', type: 'success'})
+    fetchInfo()
+  }).catch(() => {
   })
 }
 
-getInfo()
-setInterval(getInfo, 5000)
+const deleteSpecifyDedup = async () => {
+  await axios.delete('/api/token/info', {
+    params: {token: value.value, dedup_bf: inputSpecifyDedup.value}
+  })
+  ElMessage({message: '删除成功', type: 'success'})
+  deleteSpecifyDedupVisible.value = false
+  inputSpecifyDedup.value = ''
+  fetchInfo()
+}
 
-watch(value, (newValue) => {
-  useCounterStore().token = value.value
-  getInfo()
-})
+const deleteSpecifyRaw = async () => {
+  await axios.delete('/api/token/info', {
+    params: {token: value.value, cache_list: inputSpecifyRaw.value}
+  })
+  ElMessage({message: '删除成功', type: 'success'})
+  deleteSpecifyRawVisible.value = false
+  inputSpecifyRaw.value = ''
+  fetchInfo()
+}
 
+const deleteSpecifyData = async () => {
+  await axios.delete('/api/token/info', {
+    params: {token: value.value, both_number: inputSpecifyData.value}
+  })
+  ElMessage({message: '删除成功', type: 'success'})
+  deleteSpecifyDataVisible.value = false
+  inputSpecifyData.value = ''
+  fetchInfo()
+}
 
-axios.get('/api/token').then(res => {
-  if (res.status == 200) {
-    res.data.result.forEach((item: any) => {
-      options.value.push(item.token)
-    })
+let timer: number
+onMounted(() => {
+  fetchTokens()
+  if (store.token) {
+    value.value = store.token
   }
 })
 
-const deleteSpecifyData = () => {
-  axios.delete('/api/token/info', {
-    params: {
-      token: value.value,
-      both_number: inputSpecifyData.value,
-    }
-  }).then(res => {
-    getInfo()
-    deleteSpecifyDataVisible.value = false
-  })
-}
-const deleteSpecifyDedup = () => {
-  axios.delete('/api/token/info', {
-    params: {
-      token: value.value,
-      dedup_bf: inputSpecifyDedup.value,
-    }
-  }).then(res => {
-    getInfo()
-    deleteSpecifyDedupVisible.value = false
-  })
-}
-const deleteSpecifyRaw = () => {
-  axios.delete('/api/token/info', {
-    params: {
-      token: value.value,
-      cache_list: inputSpecifyRaw.value,
-    }
-  }).then(res => {
-    getInfo()
-    deleteSpecifyRawVisible.value = false
-  })
-}
+watch(value, (newValue) => {
+  store.token = newValue
+  if (newValue) fetchInfo()
+})
+
+onMounted(() => {
+  if (value.value) fetchInfo()
+  timer = window.setInterval(fetchInfo, 5000)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
+const statCards = [
+  {label: '去重对象', key: 'dedup_object', icon: DataAnalysis, color: '#409eff'},
+  {label: '上传数据格式', key: 'data_format', icon: Document, color: '#67c23a'},
+  {label: '去重参考值数量', key: 'dedup_items_number', icon: Key, color: '#e6a23c'},
+  {label: '原始数据数量', key: 'cache_list_number', icon: Warning, color: '#909399'},
+]
 </script>
 
-
 <template>
-  <div v-if="!useCounterStore().isAdmin">
-    <el-alert title="您没有权限访问此页面" type="error" center show-icon/>
-  </div>
-
-
-  <div v-if="useCounterStore().isAdmin">
-    <b>当前Token：</b>
-    <el-select v-model="value" placeholder="选择Token" style="width: 240px">
-      <el-option
-          v-for="item in options"
-          :key="item"
-          :value="item"
-      />
-    </el-select>
-
-    <el-divider/>
-
-    <b>Token信息（每5秒刷新）</b>
-    <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
-    <el-descriptions
-        direction="vertical"
-        :column="4"
-        border
-    >
-      <el-descriptions-item label="去重对象" label-width="150px">
-        <el-tag>{{ result?.dedup_object }}</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="上传数据格式" label-width="150px">
-        {{ result?.data_format }}
-      </el-descriptions-item>
-      <el-descriptions-item label="去重参考值数量" label-width="150px">
-        {{ result?.dedup_items_number }} 条
-      </el-descriptions-item>
-      <el-descriptions-item label="原始数据数量" label-width="150px">
-        {{ result?.cache_list_number }} 条
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <p><b>管理</b></p>
-    <el-button type="danger" @click="deleteDedup">删除全部去重参考值</el-button>
-    <el-button type="danger" @click="deleteRedis">删除全部原始数据</el-button>
-    <div style="margin-top: 10px">
-      <el-button type="danger" @click="deleteSpecifyDedupVisible=true">删除指定数量去重参考值</el-button>
-      <el-button type="danger" @click="deleteSpecifyRawVisible=true">删除指定数量原始数据</el-button>
-    </div>
-    <div style="margin-top: 10px">
-      <el-button type="danger" @click="deleteSpecifyDataVisible=true">
-        删除指定数量的数据（去重参考值+原始数据）
-      </el-button>
+  <div class="token-detail">
+    <!-- 检查权限 -->
+    <div v-if="!store.isAdmin" class="no-permission">
+      <div class="no-permission-card">
+        <el-icon size="64" color="#f56c6c">
+          <InfoFilled/>
+        </el-icon>
+        <div class="no-permission-title">无权限访问</div>
+        <div class="no-permission-text">您没有权限访问此页面</div>
+      </div>
     </div>
 
+    <!-- 管理页面 -->
+    <div v-else class="detail-page">
+      <div class="content-card">
+        <div class="page-title">Token 详情</div>
 
-    <!--弹窗输入-->
-    <el-dialog v-model="deleteSpecifyDedupVisible" title="删除指定数量去重参考值" width="400">
-      <el-input v-model="inputSpecifyDedup" style="width: 200px" placeholder="请输入删除数量"/>
-      <template #footer>
-        <el-button type="primary" @click="deleteSpecifyDedup">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
-    <el-dialog v-model="deleteSpecifyRawVisible" title="删除指定数量原始数据" width="400">
-      <el-input v-model="inputSpecifyRaw" style="width: 200px" placeholder="请输入删除数量"/>
-      <template #footer>
-        <el-button type="primary" @click="deleteSpecifyRaw">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
-    <el-dialog v-model="deleteSpecifyDataVisible" title="删除指定数量的数据" width="400">
-      <el-input v-model="inputSpecifyData" style="width: 200px" placeholder="请输入删除数量"/>
-      <template #footer>
-        <el-button type="primary" @click="deleteSpecifyData">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
+        <!-- 选择 Token -->
+        <div class="token-select">
+          <el-select v-model="value" placeholder="选择 Token" clearable style="width: 100%; max-width: 300px">
+            <el-option v-for="item in options" :key="item" :value="item" :label="item"/>
+          </el-select>
+          <el-button type="primary" @click="refresh" :loading="loading">
+            <el-icon>
+              <Refresh/>
+            </el-icon>
+            刷新
+          </el-button>
+          <span v-if="lastUpdate" class="update-time">上次更新: {{ lastUpdate }}</span>
+        </div>
+
+        <!-- Token 信息 -->
+        <div v-if="result && value" class="info-section">
+          <div class="section-title">Token 信息</div>
+
+          <div class="stat-cards">
+            <div v-for="card in statCards" :key="card.key" class="stat-card">
+              <div class="stat-icon" :style="{ background: card.color + '20', color: card.color }">
+                <el-icon size="24">
+                  <component :is="card.icon"/>
+                </el-icon>
+              </div>
+              <div class="stat-content">
+                <div class="stat-label">{{ card.label }}</div>
+                <div class="stat-value">{{ result[card.key] || '-' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 管理操作 -->
+          <div class="manage-section">
+            <div class="section-title">数据管理</div>
+
+            <div class="action-grid">
+              <div class="action-card danger">
+                <div class="action-icon">
+                  <el-icon size="28">
+                    <Delete/>
+                  </el-icon>
+                </div>
+                <div class="action-info">
+                  <div class="action-label">删除全部去重参考值</div>
+                  <div class="action-desc">清除该 Token 的所有去重布隆过滤器</div>
+                </div>
+                <el-button type="danger" @click="deleteDedup">执行</el-button>
+              </div>
+
+              <div class="action-card danger">
+                <div class="action-icon">
+                  <el-icon size="28">
+                    <Delete/>
+                  </el-icon>
+                </div>
+                <div class="action-info">
+                  <div class="action-label">删除全部原始数据</div>
+                  <div class="action-desc">清除该 Token 的所有原始缓存数据</div>
+                </div>
+                <el-button type="danger" @click="deleteRedis">执行</el-button>
+              </div>
+            </div>
+
+            <div class="section-subtitle">按数量删除</div>
+
+            <div class="action-grid">
+              <div class="action-card">
+                <div class="action-icon warning">
+                  <el-icon size="28">
+                    <Search/>
+                  </el-icon>
+                </div>
+                <div class="action-info">
+                  <div class="action-label">删除指定数量去重参考值</div>
+                  <div class="action-desc">指定要删除的去重参考值数量</div>
+                </div>
+                <el-button type="warning" @click="deleteSpecifyDedupVisible = true">指定</el-button>
+              </div>
+
+              <div class="action-card">
+                <div class="action-icon warning">
+                  <el-icon size="28">
+                    <Search/>
+                  </el-icon>
+                </div>
+                <div class="action-info">
+                  <div class="action-label">删除指定数量原始数据</div>
+                  <div class="action-desc">指定要删除的原始数据数量</div>
+                </div>
+                <el-button type="warning" @click="deleteSpecifyRawVisible = true">指定</el-button>
+              </div>
+
+              <div class="action-card">
+                <div class="action-icon warning">
+                  <el-icon size="28">
+                    <Search/>
+                  </el-icon>
+                </div>
+                <div class="action-info">
+                  <div class="action-label">删除指定数量数据</div>
+                  <div class="action-desc">同时删除去重参考值和原始数据</div>
+                </div>
+                <el-button type="warning" @click="deleteSpecifyDataVisible = true">指定</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-else-if="value" class="empty-state">
+          <el-icon size="64" color="#dcdfe6">
+            <InfoFilled/>
+          </el-icon>
+          <div class="empty-text">暂无数据</div>
+        </div>
+
+        <!-- 未选择 -->
+        <div v-else class="empty-state">
+          <el-icon size="64" color="#dcdfe6">
+            <Key/>
+          </el-icon>
+          <div class="empty-text">请选择 Token 查看详情</div>
+        </div>
+      </div>
+
+      <!-- 删除确认对话框 -->
+      <el-dialog v-model="deleteSpecifyDedupVisible" title="删除指定数量去重参考值" width="400">
+        <el-input v-model="inputSpecifyDedup" placeholder="请输入删除数量" type="number"/>
+        <template #footer>
+          <el-button @click="deleteSpecifyDedupVisible = false">取消</el-button>
+          <el-button type="primary" @click="deleteSpecifyDedup">确定</el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog v-model="deleteSpecifyRawVisible" title="删除指定数量原始数据" width="400">
+        <el-input v-model="inputSpecifyRaw" placeholder="请输入删除数量" type="number"/>
+        <template #footer>
+          <el-button @click="deleteSpecifyRawVisible = false">取消</el-button>
+          <el-button type="primary" @click="deleteSpecifyRaw">确定</el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog v-model="deleteSpecifyDataVisible" title="删除指定数量数据" width="400">
+        <el-input v-model="inputSpecifyData" placeholder="请输入删除数量" type="number"/>
+        <template #footer>
+          <el-button @click="deleteSpecifyDataVisible = false">取消</el-button>
+          <el-button type="primary" @click="deleteSpecifyData">确定</el-button>
+        </template>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.token-detail {
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 0;
+}
 
+/* 无权限 */
+.no-permission {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+}
+
+.no-permission-card {
+  text-align: center;
+  padding: 48px;
+}
+
+.no-permission-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.no-permission-text {
+  color: var(--text-secondary);
+}
+
+/* Token 选择 */
+.token-select {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.update-time {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* 信息卡片 */
+.info-section {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--bg-page);
+  border-radius: 12px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+/* 管理操作 */
+.manage-section {
+  margin-top: 32px;
+}
+
+.section-subtitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 24px 0 16px;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.action-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--bg-page);
+  border-radius: 12px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.action-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.action-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary-color);
+  color: #fff;
+}
+
+.action-icon.warning {
+  background: var(--warning-color);
+}
+
+.action-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.action-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.action-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 64px;
+  color: var(--text-secondary);
+}
+
+.empty-text {
+  margin-top: 16px;
+  font-size: 15px;
+}
+
+@media (max-width: 1200px) {
+  .stat-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .action-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .token-select {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .stat-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-card {
+    flex-direction: column;
+    text-align: center;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/TokenManageView.vue b/web/src/views/TokenManageView.vue
index e65aafb..3853f1c 100644
--- a/web/src/views/TokenManageView.vue
+++ b/web/src/views/TokenManageView.vue
@@ -1,304 +1,520 @@
 <script setup lang="ts">
-import {ref} from "vue";
-import axios from "@/axios.ts";
-import {ElMessage, ElMessageBox} from 'element-plus'
-import {useCounterStore} from "@/stores/counter.ts";
-import {useRouter} from "vue-router";
+import {ref, onMounted} from "vue"
+import axios from "@/axios.ts"
+import {ElMessage} from 'element-plus'
+import {useCounterStore} from "@/stores/counter.ts"
+import {useRouter} from "vue-router"
+import {Plus, View, Edit, Delete, Key, Document, Memo, Search, Lock} from '@element-plus/icons-vue'
 
-const tableData = ref([])
+const store = useCounterStore()
+const router = useRouter()
+
+const tableData = ref<any[]>([])
+const loading = ref(false)
 const input = ref('')
 const value = ref('')
 const dataFormat = ref('')
+const inputNotes = ref('')
 const inputPassWord = ref('')
-const router = useRouter()
-var rowOut: any
+const passwordVisible = ref(true)
+
+const rowOut = ref<any>(null)
 const dedupObjectVisible = ref(false)
 const dataFormatVisible = ref(false)
-const inputNotes = ref("")
-const NotesVisible = ref(false)
+const inputNotesVisible = ref(false)
+
 const options = [
-  {
-    value: 'uid',
-  },
-  {
-    value: 'secid',
-  },
-  {
-    value: 'pid',
-  },
-  {
-    value: 'comment_id',
-  },
-  {
-    value: 'dyid',
-  }
+  {value: 'uid', label: 'uid'},
+  {value: 'secid', label: 'secid'},
+  {value: 'pid', label: 'pid'},
+  {value: 'comment_id', label: 'comment_id'},
+  {value: 'dyid', label: 'dyid'}
 ]
 
 const dataFormatOptions = [
-  {
-    value: 'uid----secid----pid----comment_id',
-  }, {
-    value: 'uid----secid',
-  }, {
-    value: 'dyid',
-  }
+  {value: 'uid----secid----pid----comment_id', label: 'uid----secid----pid----comment_id'},
+  {value: 'uid----secid', label: 'uid----secid'},
+  {value: 'dyid', label: 'dyid'}
 ]
 
+const fetchTokens = async () => {
+  loading.value = true
+  try {
+    const res = await axios.get("/api/token")
+    tableData.value = res.data.result || []
+  } finally {
+    loading.value = false
+  }
+}
 
-axios.get("/api/token").then(res => {
-  tableData.value = res.data.result
+onMounted(() => {
+  if (!store.isAdmin) {
+    passwordVisible.value = true
+  } else {
+    fetchTokens()
+  }
 })
 
-const addToken = () => {
-  axios.post('/api/token', {}, {
-    params: {
-      token: input.value,
-      dedup_object: value.value,
-      data_format: dataFormat.value,
-      notes: inputNotes.value,
-    }
-  }).then(response => {
-    if (response.data.result == "ok") {
-      ElMessage({
-        message: '添加成功',
-        type: 'success',
-      })
-      axios.get('/api/token').then(res => {
-        tableData.value = res.data.result
-      })
-    }
-  }).catch(error => {
-    ElMessage.error(error.response?.data?.error)
-  })
+const checkPassword = () => {
+  if (inputPassWord.value === "haha") {
+    ElMessage({message: '登录成功', type: 'success'})
+    store.isAdmin = true
+    passwordVisible.value = false
+    fetchTokens()
+  } else {
+    ElMessage.error('密码错误')
+  }
+}
+
+const addToken = async () => {
+  if (!input.value || !value.value || !dataFormat.value) {
+    ElMessage.warning('请填写完整信息')
+    return
+  }
+  try {
+    await axios.post('/api/token', {}, {
+      params: {
+        token: input.value,
+        dedup_object: value.value,
+        data_format: dataFormat.value,
+        notes: inputNotes.value,
+      }
+    })
+    ElMessage({message: '添加成功', type: 'success'})
+    input.value = ''
+    value.value = ''
+    dataFormat.value = ''
+    inputNotes.value = ''
+    fetchTokens()
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.error || '添加失败')
+  }
 }
 
 const viewDetails = (row: any) => {
-  useCounterStore().token = row.token
-  router.push({
-    name: "TokenDetail",
-  })
+  store.token = row.token
+  router.push({name: "TokenDetail"})
 }
 
 const dialogDedupObjectVisible = (row: any) => {
-  rowOut = row
+  rowOut.value = row
+  value.value = row.dedup_object
   dedupObjectVisible.value = true
 }
 
-const updateDedupObject = () => {
-  dedupObjectVisible.value = false
-  axios.put('/api/token', {}, {
-    params: {
-      token: rowOut.token,
-      dedup_object: value.value,
-      data_format: rowOut.data_format,
-      notes: rowOut.notes,
-    }
-  }).then(res => {
-    if (res.data.result == "ok") {
-      ElMessage({
-        message: '更改成功',
-        type: 'success',
-      })
-      axios.get('/api/token').then(res => {
-        tableData.value = res.data.result
-      })
-    }
-  }).catch(error => {
-    ElMessage.error(error.response?.data?.error)
-  })
-}
-
 const dialogDataFormatVisible = (row: any) => {
-  rowOut = row
+  rowOut.value = row
+  dataFormat.value = row.data_format
   dataFormatVisible.value = true
 }
 
-const updateDataFormat = () => {
-  dataFormatVisible.value = false
-  axios.put('/api/token', {}, {
-    params: {
-      token: rowOut.token,
-      dedup_object: rowOut.dedup_object,
-      data_format: dataFormat.value,
-      notes: rowOut.notes,
-    }
-  }).then(res => {
-    if (res.data.result == "ok") {
-      ElMessage({
-        message: '更改成功',
-        type: 'success',
-      })
-      axios.get('/api/token').then(res => {
-        tableData.value = res.data.result
-      })
-    }
-  }).catch(error => {
-    ElMessage.error(error.response?.data?.error)
-  })
-}
-
 const dialogNotesVisible = (row: any) => {
-  rowOut = row
-  NotesVisible.value = true
+  rowOut.value = row
+  inputNotes.value = row.notes
+  inputNotesVisible.value = true
 }
 
-const updateNotes = () => {
-  NotesVisible.value = false
-  axios.put('/api/token', {}, {
-    params: {
-      token: rowOut.token,
-      dedup_object: rowOut.dedup_object,
-      data_format: rowOut.data_format,
-      notes: inputNotes.value
-    }
-  }).then(res => {
-    if (res.data.result == "ok") {
-      ElMessage({
-        message: '更改成功',
-        type: 'success',
-      })
-      axios.get('/api/token').then(res => {
-        tableData.value = res.data.result
-      })
-    }
-  }).catch(error => {
-    ElMessage.error(error.response?.data?.error)
-  })
-}
-
-const deleteToken = (row: any) => {
-  axios.delete('/api/token', {
-    params: {
-      token: row.token
-    }
-  }).then(res => {
-    if (res.data.result == "ok") {
-      ElMessage({
-        message: '删除成功',
-        type: 'success',
-      })
-      axios.get('/api/token').then(res => {
-        tableData.value = res.data.result
-      })
-    }
-  }).catch(error => {
-    ElMessage.error(error.response?.data?.error)
-  })
-}
-
-const checkPassword = () => {
-  if (inputPassWord.value == "haha") {
-    ElMessage({
-      message: '密码正确',
-      type: 'success',
+const updateDedupObject = async () => {
+  try {
+    await axios.put('/api/token', {}, {
+      params: {
+        token: rowOut.value.token,
+        dedup_object: value.value,
+        data_format: rowOut.value.data_format,
+        notes: rowOut.value.notes,
+      }
     })
-    useCounterStore().isAdmin = true
-  } else {
-    ElMessage.error('密码错误')
+    ElMessage({message: '更新成功', type: 'success'})
+    dedupObjectVisible.value = false
+    fetchTokens()
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.error || '更新失败')
+  }
+}
+
+const updateDataFormat = async () => {
+  try {
+    await axios.put('/api/token', {}, {
+      params: {
+        token: rowOut.value.token,
+        dedup_object: rowOut.value.dedup_object,
+        data_format: dataFormat.value,
+        notes: rowOut.value.notes,
+      }
+    })
+    ElMessage({message: '更新成功', type: 'success'})
+    dataFormatVisible.value = false
+    fetchTokens()
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.error || '更新失败')
+  }
+}
+
+const updateNotes = async () => {
+  try {
+    await axios.put('/api/token', {}, {
+      params: {
+        token: rowOut.value.token,
+        dedup_object: rowOut.value.dedup_object,
+        data_format: rowOut.value.data_format,
+        notes: inputNotes.value
+      }
+    })
+    ElMessage({message: '更新成功', type: 'success'})
+    inputNotesVisible.value = false
+    fetchTokens()
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.error || '更新失败')
+  }
+}
+
+const deleteToken = async (row: any) => {
+  try {
+    await axios.delete('/api/token', {
+      params: {token: row.token}
+    })
+    ElMessage({message: '删除成功', type: 'success'})
+    fetchTokens()
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.error || '删除失败')
   }
 }
 </script>
 
 <template>
-  <!--非管理员-->
-  <div v-if="!useCounterStore().isAdmin" style="margin: auto auto; max-width: 400px">
-    <el-alert title="您没有权限访问此页面，输入管理员密码" type="error" :closable="false" show-icon/>
-    <p></p>
-    <el-input v-model="inputPassWord" style="width: 400px" placeholder="请输入管理员密码" @change="checkPassword"/>
-    <p></p>
-    <el-button type="primary" @click="checkPassword">确认</el-button>
-  </div>
+  <div class="token-manage">
+    <!-- 登录页面 -->
+    <div v-if="!store.isAdmin" class="login-page">
+      <div class="login-card">
+        <div class="login-icon">
+          <el-icon size="48" color="#409eff">
+            <Lock/>
+          </el-icon>
+        </div>
+        <div class="login-title">管理员登录</div>
+        <div class="login-subtitle">请输入管理员密码访问管理后台</div>
 
-  <!--管理员-->
-  <div v-if="useCounterStore().isAdmin">
-    <!--添加Token-->
-    <el-input v-model="input" style="width: 150px" placeholder="请输入Token名称"/>
-    <el-select v-model="value" placeholder="选择去重对象" style="width: 150px">
-      <el-option
-          v-for="item in options"
-          :key="item.value"
-          :value="item.value"
-      />
-    </el-select>
-    <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 280px">
-      <el-option
-          v-for="item in dataFormatOptions"
-          :key="item.value"
-          :value="item.value"
-      />
-    </el-select>
-    <el-input v-model="inputNotes" style="width: 200px" placeholder="请输入备注"/>
-    <el-button type="primary" @click="addToken">添加Token</el-button>
+        <el-input
+            v-model="inputPassWord"
+            type="password"
+            placeholder="请输入管理员密码"
+            size="large"
+            show-password
+            @keyup.enter="checkPassword"
+        >
+          <template #prefix>
+            <el-icon>
+              <Lock/>
+            </el-icon>
+          </template>
+        </el-input>
 
-    <!--Token列表-->
-    <el-table :data="tableData" stripe style="width: 100%">
-      <el-table-column prop="token" label="Token" width="150"/>
-      <el-table-column prop="dedup_object" label="去重对象" width="150"/>
-      <el-table-column prop="data_format" label="上传数据格式" width="280"/>
-      <el-table-column prop="notes" label="备注" width="200"/>
-      <el-table-column label="操作">
-        <template #default="scope">
-          <el-button @click="viewDetails(scope.row)">查看详细</el-button>
-          <el-button @click="dialogDedupObjectVisible(scope.row)" type="primary">更改去重对象</el-button>
-          <el-button @click="dialogDataFormatVisible(scope.row)" type="primary">更改数据格式</el-button>
-          <el-button @click="dialogNotesVisible(scope.row)" type="primary">更改备注</el-button>
-          <el-popconfirm
-              width="180"
-              title="确认删除此Token吗"
-              confirm-button-text="确认"
-              cancel-button-text="取消"
-              @confirm="deleteToken(scope.row)"
-          >
-            <template #reference>
-              <el-button type="danger">删除此Token</el-button>
-            </template>
-          </el-popconfirm>
+        <el-button type="primary" size="large" class="login-btn" @click="checkPassword">
+          登录
+        </el-button>
+      </div>
+    </div>
 
+    <!-- 管理页面 -->
+    <div v-else class="manage-page">
+      <div class="content-card">
+        <div class="page-title">Token 管理</div>
+
+        <!-- 添加表单 -->
+        <div class="add-form">
+          <div class="form-title">添加新 Token</div>
+          <div class="form-grid">
+            <el-input v-model="input" placeholder="Token 名称" clearable>
+              <template #prefix>
+                <el-icon>
+                  <Key/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-select v-model="value" placeholder="去重对象" clearable>
+              <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/>
+            </el-select>
+
+            <el-select v-model="dataFormat" placeholder="数据格式" clearable>
+              <el-option v-for="item in dataFormatOptions" :key="item.value" :value="item.value" :label="item.label"/>
+            </el-select>
+
+            <el-input v-model="inputNotes" placeholder="备注（可选）" clearable>
+              <template #prefix>
+                <el-icon>
+                  <Memo/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-button type="primary" @click="addToken">
+              <el-icon>
+                <Plus/>
+              </el-icon>
+              添加
+            </el-button>
+          </div>
+        </div>
+
+        <!-- Token 列表 -->
+        <div class="table-section">
+          <div class="section-header">
+            <span class="section-title">Token 列表</span>
+            <span class="table-count">共 {{ tableData.length }} 条</span>
+          </div>
+
+          <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
+            <el-table-column prop="token" label="Token" min-width="200" show-overflow-tooltip>
+              <template #default="{ row }">
+                <div class="token-cell">
+                  <el-icon>
+                    <Key/>
+                  </el-icon>
+                  <span>{{ row.token }}</span>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="dedup_object" label="去重对象" width="150">
+              <template #default="{ row }">
+                <el-tag type="primary" effect="plain">{{ row.dedup_object }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="data_format" label="数据格式" min-width="350" show-overflow-tooltip>
+              <template #default="{ row }">
+                <div class="format-cell">{{ row.data_format }}</div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="notes" label="备注" min-width="250" show-overflow-tooltip>
+              <template #default="{ row }">
+                <span class="notes-text">{{ row.notes || '-' }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="280" fixed="right">
+              <template #default="{ row }">
+                <div class="action-buttons">
+                  <el-button type="primary" size="small" text @click="viewDetails(row)">
+                    <el-icon>
+                      <View/>
+                    </el-icon>
+                    详情
+                  </el-button>
+                  <el-button size="small" text @click="dialogDedupObjectVisible(row)">
+                    <el-icon>
+                      <Edit/>
+                    </el-icon>
+                    去重对象
+                  </el-button>
+                  <el-button size="small" text @click="dialogDataFormatVisible(row)">
+                    <el-icon>
+                      <Edit/>
+                    </el-icon>
+                    数据格式
+                  </el-button>
+                  <el-button size="small" text @click="dialogNotesVisible(row)">
+                    <el-icon>
+                      <Edit/>
+                    </el-icon>
+                    备注
+                  </el-button>
+                  <el-popconfirm
+                      title="确认删除此 Token 吗？"
+                      confirm-button-text="确认"
+                      cancel-button-text="取消"
+                      @confirm="deleteToken(row)"
+                  >
+                    <template #reference>
+                      <el-button type="danger" size="small" text>
+                        <el-icon>
+                          <Delete/>
+                        </el-icon>
+                        删除
+                      </el-button>
+                    </template>
+                  </el-popconfirm>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <!-- 编辑对话框 -->
+      <el-dialog v-model="dedupObjectVisible" title="更改去重对象" width="400">
+        <el-select v-model="value" placeholder="选择去重对象" style="width: 100%">
+          <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/>
+        </el-select>
+        <template #footer>
+          <el-button @click="dedupObjectVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateDedupObject">确定</el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </el-dialog>
 
-    <el-dialog v-model="dedupObjectVisible" title="更改去重对象" width="400">
-      <el-select v-model="value" placeholder="选择去重对象" style="width: 200px">
-        <el-option
-            v-for="item in options"
-            :key="item.value"
-            :value="item.value"
-        />
-      </el-select>
-      <template #footer>
-        <el-button type="primary" @click="updateDedupObject">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
+      <el-dialog v-model="dataFormatVisible" title="更改数据格式" width="400">
+        <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 100%">
+          <el-option v-for="item in dataFormatOptions" :key="item.value" :value="item.value" :label="item.label"/>
+        </el-select>
+        <template #footer>
+          <el-button @click="dataFormatVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateDataFormat">确定</el-button>
+        </template>
+      </el-dialog>
 
-    <el-dialog v-model="dataFormatVisible" title="更改数据格式" width="400">
-      <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 280px">
-        <el-option
-            v-for="item in dataFormatOptions"
-            :key="item.value"
-            :value="item.value"
-        />
-      </el-select>
-      <template #footer>
-        <el-button type="primary" @click="updateDataFormat">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
-
-    <el-dialog v-model="NotesVisible" title="更改备注" width="400">
-      <el-input v-model="inputNotes" style="width: 200px" placeholder="请输入备注"/>
-      <template #footer>
-        <el-button type="primary" @click="updateNotes">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
+      <el-dialog v-model="inputNotesVisible" title="更改备注" width="400">
+        <el-input v-model="inputNotes" placeholder="请输入备注"/>
+        <template #footer>
+          <el-button @click="inputNotesVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateNotes">确定</el-button>
+        </template>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.token-manage {
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 0;
+}
 
+/* 登录页面 */
+.login-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  padding: 48px 40px;
+  background: var(--bg-card);
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+.login-icon {
+  margin-bottom: 24px;
+}
+
+.login-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.login-card :deep(.el-input) {
+  margin-bottom: 16px;
+}
+
+.login-btn {
+  width: 100%;
+  margin-top: 8px;
+}
+
+/* 管理页面 */
+.add-form {
+  margin-bottom: 32px;
+  padding: 24px;
+  background: var(--bg-page);
+  border-radius: 12px;
+}
+
+.form-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+.form-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.form-grid .el-input {
+  width: 220px;
+}
+
+.form-grid .el-select {
+  width: 280px;
+}
+
+/* 表格 */
+.table-section {
+  margin-top: 8px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-count {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.token-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-cell {
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.notes-text {
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .form-grid {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-grid .el-input,
+  .form-grid .el-select {
+    width: 100%;
+  }
+
+  .form-grid .el-button {
+    width: 100%;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+}
 </style>
\ No newline at end of file