refactor(ui): 重构应用样式和组件结构

- 移除 App.vue 中的内联样式，将 CSS 变量定义移到 main.css
- 在 HomeView.vue 中使用 Element Plus Card 组件替代自定义卡片样式
- 更新 HomeView.vue 中的统计卡片布局，使用 Space 和 Card 组件
- 添加 fade-in 动画到全局主题配置
- 在 components.d.ts 中注册 ElCard 和 ElContainer 组件
- 移除 SettingsView.vue 中的空样式标签
- 使用 Tailwind CSS 类替代原有的自定义样式类

web/auto-imports.d.ts

@@ -0,0 +1,80 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue').EffectScope
+  const ElMessage: typeof import('element-plus/es').ElMessage
+  const ElMessageBox: typeof import('element-plus/es').ElMessageBox
+  const computed: typeof import('vue').computed
+  const createApp: typeof import('vue').createApp
+  const customRef: typeof import('vue').customRef
+  const defineAsyncComponent: typeof import('vue').defineAsyncComponent
+  const defineComponent: typeof import('vue').defineComponent
+  const effectScope: typeof import('vue').effectScope
+  const getCurrentInstance: typeof import('vue').getCurrentInstance
+  const getCurrentScope: typeof import('vue').getCurrentScope
+  const getCurrentWatcher: typeof import('vue').getCurrentWatcher
+  const h: typeof import('vue').h
+  const inject: typeof import('vue').inject
+  const isProxy: typeof import('vue').isProxy
+  const isReactive: typeof import('vue').isReactive
+  const isReadonly: typeof import('vue').isReadonly
+  const isRef: typeof import('vue').isRef
+  const isShallow: typeof import('vue').isShallow
+  const markRaw: typeof import('vue').markRaw
+  const nextTick: typeof import('vue').nextTick
+  const onActivated: typeof import('vue').onActivated
+  const onBeforeMount: typeof import('vue').onBeforeMount
+  const onBeforeRouteLeave: typeof import('vue-router').onBeforeRouteLeave
+  const onBeforeRouteUpdate: typeof import('vue-router').onBeforeRouteUpdate
+  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
+  const onBeforeUpdate: typeof import('vue').onBeforeUpdate
+  const onDeactivated: typeof import('vue').onDeactivated
+  const onErrorCaptured: typeof import('vue').onErrorCaptured
+  const onMounted: typeof import('vue').onMounted
+  const onRenderTracked: typeof import('vue').onRenderTracked
+  const onRenderTriggered: typeof import('vue').onRenderTriggered
+  const onScopeDispose: typeof import('vue').onScopeDispose
+  const onServerPrefetch: typeof import('vue').onServerPrefetch
+  const onUnmounted: typeof import('vue').onUnmounted
+  const onUpdated: typeof import('vue').onUpdated
+  const onWatcherCleanup: typeof import('vue').onWatcherCleanup
+  const provide: typeof import('vue').provide
+  const reactive: typeof import('vue').reactive
+  const readonly: typeof import('vue').readonly
+  const ref: typeof import('vue').ref
+  const resolveComponent: typeof import('vue').resolveComponent
+  const shallowReactive: typeof import('vue').shallowReactive
+  const shallowReadonly: typeof import('vue').shallowReadonly
+  const shallowRef: typeof import('vue').shallowRef
+  const toRaw: typeof import('vue').toRaw
+  const toRef: typeof import('vue').toRef
+  const toRefs: typeof import('vue').toRefs
+  const toValue: typeof import('vue').toValue
+  const triggerRef: typeof import('vue').triggerRef
+  const unref: typeof import('vue').unref
+  const useAttrs: typeof import('vue').useAttrs
+  const useCssModule: typeof import('vue').useCssModule
+  const useCssVars: typeof import('vue').useCssVars
+  const useId: typeof import('vue').useId
+  const useLink: typeof import('vue-router').useLink
+  const useModel: typeof import('vue').useModel
+  const useRoute: typeof import('vue-router').useRoute
+  const useRouter: typeof import('vue-router').useRouter
+  const useSlots: typeof import('vue').useSlots
+  const useTemplateRef: typeof import('vue').useTemplateRef
+  const watch: typeof import('vue').watch
+  const watchEffect: typeof import('vue').watchEffect
+  const watchPostEffect: typeof import('vue').watchPostEffect
+  const watchSyncEffect: typeof import('vue').watchSyncEffect
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

web/components.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AddDataDialog: typeof import('./src/components/AddDataDialog.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface GlobalDirectives {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}

web/package.json

@@ -28,6 +28,8 @@
     "@vue/tsconfig": "^0.9.1",
     "npm-run-all2": "^8.0.4",
     "typescript": "~6.0.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.0.16",
     "vite-plugin-vue-devtools": "^8.1.2",
     "vue-tsc": "^3.3.3"

web/pnpm-lock.yaml

@@ -54,6 +54,12 @@ importers:
       typescript:
         specifier: ~6.0.3
         version: 6.0.3
+      unplugin-auto-import:
+        specifier: ^21.0.0
+        version: 21.0.0(@vueuse/core@14.3.0(vue@3.5.35(typescript@6.0.3)))
+      unplugin-vue-components:
+        specifier: ^32.1.0
+        version: 32.1.0(vue@3.5.35(typescript@6.0.3))
       vite:
         specifier: ^8.0.16
         version: 8.0.16(@types/node@24.12.4)(jiti@2.7.0)(yaml@2.9.0)
@@ -483,6 +489,9 @@ packages:
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/jsesc@2.5.1':
     resolution: {integrity: sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==}
 
@@ -788,9 +797,16 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   exsolve@1.0.8:
     resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
@@ -898,6 +914,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -1205,6 +1224,9 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
   superjson@2.2.6:
     resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
     engines: {node: '>=16'}
@@ -1238,10 +1260,40 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
+  unimport@5.7.0:
+    resolution: {integrity: sha512-njnL6sp8lEA8QQbZrt+52p/g4X0rw3bnGGmUcJnt1jeG8+iiqO779aGz0PirCtydAIVcuTBRlJ52F0u46z309Q==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-auto-import@21.0.0:
+    resolution: {integrity: sha512-vWuC8SwqJmxZFYwPojhOhOXDb5xFhNNcEVb9K/RFkyk/3VnfaOjzitWN7v+8DEKpMjSsY2AEGXNgt6I0yQrhRQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.0
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
   unplugin-utils@0.3.1:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-vue-components@32.1.0:
+    resolution: {integrity: sha512-YiUkSxuRjab18XFOrX5VsIxXzccrfmHVGsGeJgSgklb829DQmCy9E4vvDUE4tuvZZdxyFJZX0Oc4TPnnxiiMyg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   unplugin@3.0.0:
     resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1795,6 +1847,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/estree@1.0.9': {}
+
   '@types/jsesc@2.5.1': {}
 
   '@types/lodash-es@4.17.12':
@@ -2149,8 +2203,14 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   exsolve@1.0.8: {}
 
   fdir@6.5.0(picomatch@4.0.4):
@@ -2237,6 +2297,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   jsesc@3.1.0: {}
 
   json-parse-even-better-errors@4.0.0: {}
@@ -2488,6 +2550,10 @@ snapshots:
 
   speakingurl@14.0.1: {}
 
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   superjson@2.2.6:
     dependencies:
       copy-anything: 4.0.5
@@ -2512,11 +2578,59 @@ snapshots:
 
   undici-types@7.16.0: {}
 
+  unimport@5.7.0:
+    dependencies:
+      acorn: 8.16.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      pkg-types: 2.3.1
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.17
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+
+  unplugin-auto-import@21.0.0(@vueuse/core@14.3.0(vue@3.5.35(typescript@6.0.3))):
+    dependencies:
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      picomatch: 4.0.4
+      unimport: 5.7.0
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      '@vueuse/core': 14.3.0(vue@3.5.35(typescript@6.0.3))
+
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.4
 
+  unplugin-vue-components@32.1.0(vue@3.5.35(typescript@6.0.3)):
+    dependencies:
+      chokidar: 5.0.0
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      obug: 2.1.1
+      picomatch: 4.0.4
+      tinyglobby: 0.2.17
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+      vue: 3.5.35(typescript@6.0.3)
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
   unplugin@3.0.0:
     dependencies:
       '@jridgewell/remapping': 2.3.5

web/src/App.vue

@@ -1,218 +1,9 @@
 <script setup lang="ts">
-import {ref} from 'vue'
-
 const themeMode = ref('light')
 </script>
 
 <template>
-  <div :class="themeMode" class="app-container">
+  <div :class="themeMode" class="min-h-screen bg-(--bg-page) max-w-full">
     <router-view></router-view>
   </div>
 </template>
-
-<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;
-}
-
-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>

web/src/assets/main.css

@@ -1 +1,23 @@
-@import "tailwindcss";
+@import "tailwindcss" important;
+
+@theme {
+    --animate-fade-in: fade-in 0.3s ease;
+    --bg-page: #f5f7fa;
+    --bg-card: #ffffff;
+    --bg-header: #ffffff;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+:root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}

web/src/components/AddDataDialog.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import {computed, ref} from "vue"
 import api from "@/api"
-import {ElMessage} from 'element-plus'
 import {Upload} from '@element-plus/icons-vue'
 
 const props = defineProps<{
@@ -135,7 +133,7 @@ const handleUpload = async () => {
 
 .progress-text {
   font-size: 14px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
   white-space: nowrap;
 }
 

web/src/main.ts

@@ -1,22 +1,29 @@
-import './assets/main.css'
-
 import {createApp} from 'vue'
 import {createPinia} from 'pinia'
 import persistedState from 'pinia-plugin-persistedstate';
-
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import './assets/main.css'
+
+const pinia = createPinia()
+pinia.use(persistedState)
 
 const app = createApp(App)
-
+app.use(pinia)
-if (import.meta.env.DEV) {
-    document.title = '抖音数据去重 - dev'
-}
-
-app.use(createPinia().use(persistedState))
 app.use(router)
 app.use(ElementPlus)
-
 app.mount('#app')
+
+
+router.beforeEach((to, from) => {
+    var postfix: string = ''
+    if (import.meta.env.DEV) {
+        postfix = '-dev'
+    }
+
+    if (to.meta.title) {
+        document.title = to.meta.title + postfix
+    }
+})

web/src/router/index.ts

@@ -4,17 +4,20 @@ import TokenManageView from '@/views/admin/TokenManageView.vue'
 import TokenDetailView from '@/views/admin/TokenDetailView.vue'
 import AdminView from '@/views/AdminView.vue'
 import HomeView from '@/views/HomeView.vue'
+import SettingsView from '@/views/admin/SettingsView.vue'
 
 const routes = [
     {
         path: '/',
         name: "Home",
         component: HomeView,
+        meta: {title: "抖音数据去重",}
     },
     {
         path: '/haha',
         name: "Admin",
         component: AdminView,
+        meta: {title: "抖音数据去重 | 管理后台",},
         children: [
             {
                 path: '',
@@ -26,6 +29,11 @@ const routes = [
                 name: "TokenDetail",
                 component: TokenDetailView
             },
+            {
+                path: "settings",
+                name: "AdminSettings",
+                component: SettingsView,
+            }
         ],
     },
 

web/src/stores/counter.ts

@@ -2,13 +2,9 @@ import {ref} from 'vue'
 import {defineStore} from 'pinia'
 
 export const useCounterStore = defineStore('counter', () => {
-    const homeToken = ref("")
-
     const token = ref("")
-
     const isAdmin = ref(false)
 
-
     return {token, isAdmin}
 }, {
     persist: true

web/src/views/AdminView.vue

@@ -1,224 +1,156 @@
 <script setup lang="ts">
-import {ref, watch} from 'vue'
-import {useRoute, useRouter} from "vue-router"
 import {useCounterStore} from "@/stores/counter.ts"
-import {CloseBold, Document, Edit, User} from '@element-plus/icons-vue'
+import {CloseBold, Document, Edit, Lock, Setting, User} from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
 const store = useCounterStore()
 
 const activeIndex = ref(route.name?.toString() || "TokenManage")
+const _userName = ref("未登录")
+const _isAdmin = ref(store.isAdmin)
+const inputPassWord = ref('')
+
+if (_isAdmin.value) {
+  _userName.value = "管理员"
+} else {
+  _userName.value = "未登录"
+}
+watch(_isAdmin, (newValue) => {
+  store.isAdmin = newValue
+  if (newValue) {
+    _userName.value = "管理员"
+  } else {
+    _userName.value = "未登录"
+  }
+})
 
 watch(route, (newRoute) => {
   activeIndex.value = newRoute.name?.toString() || "TokenManage"
 })
 
-const handleSelect = (key: string) => {
+const handleSelect = (name: string) => {
-  router.push({name: key})
+  router.push({name: name})
 }
 
-const menuItems = [
-  {key: 'TokenManage', label: '管理 Token', icon: Edit},
-  {key: 'TokenDetail', label: 'Token 详情', icon: Document},
-]
-
 const logout = () => {
-  store.isAdmin = false
+  _isAdmin.value = false
+}
+
+const checkPassword = () => {
+  if (inputPassWord.value === "haha") {
+    ElMessage({message: '登录成功', type: 'success'})
+    _isAdmin.value = true
+  } else {
+    ElMessage.error('密码错误')
+  }
+}
+
+const navItemClass = (name: string) => {
+  return activeIndex.value === name
+      ? 'bg-[var(--el-color-primary)] text-white'
+      : 'text-[var(--el-text-color-regular)] hover:bg-[var(--bg-page)] hover:text-[var(--el-text-color-primary)]'
 }
 </script>
 
 <template>
-  <div class="admin-layout">
+  <div class="min-h-screen flex flex-col bg-(--bg-page)">
-    <header class="admin-header">
+    <el-header
-      <div class="header-left">
+        class="flex items-center justify-between bg-(--bg-header) border-b border-(--el-border-color) sticky top-0 z-50 max-md:flex-wrap max-md:h-auto max-md:px-4 max-md:py-3">
-        <div class="logo">
+      <div class="flex items-center">
-          <el-icon size="24">
+        <div class="flex items-center gap-2.5 text-(--el-color-primary) font-semibold text-lg">DYPID 管理后台</div>
-            <Edit/>
-          </el-icon>
-          <span class="logo-text">DYPID 管理后台</span>
-        </div>
       </div>
 
-      <nav class="header-nav">
+      <nav class="flex gap-2 max-md:order-3 max-md:w-full max-md:mt-3 max-md:overflow-x-auto max-md:pb-1">
         <div
-            v-for="item in menuItems"
+            class="flex items-center gap-1.5 px-4 py-2 rounded-lg cursor-pointer text-sm transition-all duration-200 max-md:px-3 max-md:py-2 max-md:text-xs"
-            :key="item.key"
+            :class="navItemClass('TokenManage')"
-            class="nav-item"
+            @click="handleSelect('TokenManage')"
-            :class="{ active: activeIndex === item.key }"
-            @click="handleSelect(item.key)"
         >
           <el-icon>
-            <component :is="item.icon"/>
+            <Edit/>
           </el-icon>
-          <span>{{ item.label }}</span>
+          <span>管理 Token</span>
+        </div>
+
+        <div
+            class="flex items-center gap-1.5 px-4 py-2 rounded-lg cursor-pointer text-sm transition-all duration-200 max-md:px-3 max-md:py-2 max-md:text-xs"
+            :class="navItemClass('TokenDetail')"
+            @click="handleSelect('TokenDetail')"
+        >
+          <el-icon>
+            <Document/>
+          </el-icon>
+          <span>Token 详情</span>
         </div>
       </nav>
 
-      <div class="header-right">
+      <div class="flex items-center">
-        <div v-if="store.isAdmin" class="admin-badge">
+        <el-button v-if="_isAdmin" circle link
-          <el-icon>
+                   @click="handleSelect('AdminSettings')"
-            <User/>
-          </el-icon>
-          <span>管理员</span>
-        </div>
-        <el-button
-            v-if="store.isAdmin"
-            type="danger"
-            plain
-            size="small"
-            @click="logout"
         >
-          <el-icon>
+          <el-icon size="16">
-            <CloseBold/>
+            <Setting/>
           </el-icon>
-          退出
         </el-button>
-      </div>
+        <el-divider direction="vertical"/>
-    </header>
+        <el-dropdown :disabled="!_isAdmin">
+          <el-button :icon="User" link>{{ _userName }}</el-button>
 
-    <main class="admin-main">
+          <template #dropdown>
-      <router-view v-slot="{ Component }">
+            <el-dropdown-menu>
-        <transition name="fade" mode="out-in">
+              <el-dropdown-item @click="logout()">
-          <component :is="Component"/>
+                <el-text type="danger">
-        </transition>
+                  <el-icon>
+                    <CloseBold/>
+                  </el-icon>
+                  退出登录
+                </el-text>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
+
+    <el-main>
+      <!-- 登录页面 -->
+      <div v-if="!_isAdmin" class="flex justify-center items-center min-h-[60vh]">
+        <div
+            class="w-full max-w-100 text-center py-12 px-10 bg-(--bg-card) rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.08)]">
+          <div class="mb-6">
+            <el-icon size="48" color="#409eff">
+              <Lock/>
+            </el-icon>
+          </div>
+          <div class="text-2xl font-semibold text-(--el-text-color-primary) mb-2">管理员登录</div>
+          <div class="text-sm text-(--el-text-color-secondary) mb-8">请输入管理员密码访问管理后台</div>
+
+          <el-input
+              v-model="inputPassWord"
+              type="password"
+              placeholder="请输入管理员密码"
+              size="large"
+              show-password
+              class="mb-4"
+              @keyup.enter="checkPassword"
+          >
+            <template #prefix>
+              <el-icon>
+                <Lock/>
+              </el-icon>
+            </template>
+          </el-input>
+
+          <el-button type="primary" size="large" class="w-full mt-2" @click="checkPassword">
+            登录
+          </el-button>
+        </div>
+      </div>
+
+      <router-view v-else v-slot="{ Component }">
+        <component :is="Component"/>
       </router-view>
-    </main>
+    </el-main>
   </div>
 </template>
-
-<style scoped>
-.admin-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-page);
-}
-
-.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>

web/src/views/HomeView.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref} from 'vue'
 import api from "@/api"
-import {useRoute} from "vue-router"
+import {DataAnalysis, Document, Key, Plus, Search, Warning} from '@element-plus/icons-vue'
-import {ElMessage} from "element-plus"
-import {DataAnalysis, Document, Key, Search, Upload, Warning} from '@element-plus/icons-vue'
-import AddDataDialog from "@/components/AddDataDialog.vue";
 
 const route = useRoute()
 const inputToken = ref(route.query.token as string || '')
@@ -60,233 +56,179 @@ onMounted(() => {
 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>
-  <div class="home-page">
+  <div class="p-6 h-dvh">
-    <div class="content-card" style="max-width: 1600px;">
+    <div class="bg-white rounded-lg p-6 shadow-[0_2px_12px_rgba(0,0,0,0.08)] h-full">
-      <div class="page-header">
+      <div class="text-center mb-4">
-        <div class="page-title">Token 信息查询</div>
+        <div class="text-xl font-semibold text-(--el-text-color-primary) mb-5 pb-3 border-b border-(--el-border-color)">
-        <div class="header-subtitle">输入 Token 以查看去重和缓存信息</div>
+          Token 信息查询
+        </div>
+        <div class="text-(--el-text-color-secondary) mt-2">输入 Token 以查看去重和缓存信息</div>
       </div>
 
-      <div class="search-box">
+      <div class="flex justify-center mb-8">
-        <el-input
+        <el-input placeholder="请输入要查询数据的Token..." size="large" clearable
-            v-model="inputToken"
+                  class="max-w-120"
-            placeholder="输入 Token"
+                  v-model="inputToken" @change="inputChange"
-            clearable
-            size="large"
-            class="token-input"
-            @change="inputChange"
         >
-          <template #prefix>
+          <template #prepend>
-            <el-icon>
+            Token
-              <Search/>
-            </el-icon>
           </template>
         </el-input>
 
-        <el-button type="primary" size="large" @click="refresh" :loading="loading">
+        <el-button type="primary" size="large"
+                   class="ml-3"
+                   @click="refresh" :loading="loading" :icon="Search"
+        >
           查询
         </el-button>
-
-        <el-button type="success" size="large" @click="showAddDataDialog = true">
-          <el-icon>
-            <Upload/>
-          </el-icon>
-          增加数据
-        </el-button>
       </div>
 
-      <AddDataDialog v-model="showAddDataDialog" :token="inputToken"/>
+      <el-space direction="vertical"
+                class="w-full animate-fade-in"
+                v-if="result"
+      >
+        <el-card class="p-6">
+          <template #header>
+            <el-text>Token 信息</el-text>
+            <el-divider direction="vertical"/>
+            <el-tag type="primary" effect="plain">{{ inputToken }}</el-tag>
+          </template>
 
-      <div v-if="result" class="result-section">
+          <el-space direction="vertical">
-        <div class="result-header">
+            <el-space>
-          <span class="section-title">Token 信息</span>
+              <div
-          <span class="auto-refresh">每5秒自动刷新</span>
+                  class="flex items-center gap-4 p-5 bg-(--bg-page) rounded-xl transition-all duration-200
-        </div>
+                  hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(0,0,0,0.1)]
+                  min-w-100"
+              >
+                <div
+                    class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                    style="background: #409eff20; color: #409eff"
+                >
+                  <el-icon size="24">
+                    <DataAnalysis/>
+                  </el-icon>
+                </div>
+                <div class="flex-1">
+                  <div class="text-xs text-(--el-text-color-secondary) mb-1">
+                    去重对象
+                  </div>
+                  <div
+                      class="text-lg font-semibold text-(--el-text-color-primary) overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {{ result['dedup_object'] || '-' }}
+                  </div>
+                </div>
+              </div>
+              <div
+                  class="flex items-center gap-4 p-5 bg-(--bg-page) rounded-xl transition-all duration-200
+                  hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(0,0,0,0.1)]
+                  min-w-100"
+              >
+                <div
+                    class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                    style="background: #67c23a20; color: #67c23a"
+                >
+                  <el-icon size="24">
+                    <Document/>
+                  </el-icon>
+                </div>
+                <div class="flex-1">
+                  <div class="text-xs text-(--el-text-color-secondary) mb-1">
+                    上传数据格式
+                  </div>
+                  <div
+                      class="text-lg font-semibold text-(--el-text-color-primary) overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {{ result['data_format'] || '-' }}
+                  </div>
+                </div>
+              </div>
+            </el-space>
+            <el-space>
+              <div
+                  class="flex items-center gap-4 p-5 bg-(--bg-page) rounded-xl transition-all duration-200
+                  hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(0,0,0,0.1)]
+                  min-w-100"
+              >
+                <div
+                    class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                    style="background: #e6a23c20; color: #e6a23c"
+                >
+                  <el-icon size="24">
+                    <Key/>
+                  </el-icon>
+                </div>
+                <div class="flex-1">
+                  <div class="text-xs text-(--el-text-color-secondary) mb-1">
+                    去重记录值
+                  </div>
+                  <div
+                      class="text-lg font-semibold text-(--el-text-color-primary) overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {{ result['dedup_items_number'] || '-' }}
+                  </div>
+                </div>
+              </div>
+              <div
+                  class="flex items-center gap-4 p-5 bg-(--bg-page) rounded-xl transition-all duration-200
+                  hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(0,0,0,0.1)]
+                  min-w-100"
+              >
+                <div
+                    class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                    style="background: #90939920; color: #909399"
+                >
+                  <el-icon size="24">
+                    <Warning/>
+                  </el-icon>
+                </div>
+                <div class="flex-1">
+                  <div class="text-xs text-(--el-text-color-secondary) mb-1">
+                    Redis中数据条数
+                  </div>
+                  <div
+                      class="text-lg font-semibold text-(--el-text-color-primary) overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {{ result['cache_list_number'] || '-' }}
+                  </div>
+                </div>
+              </div>
+            </el-space>
+          </el-space>
 
-        <div class="stat-cards">
+          <el-text v-if="lastUpdate" type="info"
-          <div v-for="card in statCards" :key="card.key" class="stat-card">
+                   class="block w-full mt-5 text-center"
-            <div class="stat-icon" :style="{ background: card.color + '20', color: card.color }">
+          >
-              <el-icon size="24">
+            每5秒更新一次数据 最后更新: {{ lastUpdate }}
-                <component :is="card.icon"/>
+          </el-text>
-              </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">
+          <template #footer>
-          最后更新: {{ lastUpdate }}
+            <el-text>操作</el-text>
-        </div>
+            <el-divider direction="vertical"/>
-      </div>
+            <el-button type="primary" size=""
+                       class=""
+                       @click="showAddDataDialog = true" :icon="Plus"
+            >
+              添加数据
+            </el-button>
+          </template>
+        </el-card>
+      </el-space>
 
-      <div v-else class="empty-state">
+      <el-space v-else direction="vertical"
+                class="flex p-16"
+      >
         <el-icon size="64" color="#dcdfe6">
           <Search/>
         </el-icon>
-        <div class="empty-text">请输入 Token 进行查询</div>
+        <el-text type="info" size="large" class="">请输入 Token 进行查询</el-text>
-      </div>
+      </el-space>
     </div>
   </div>
+
+  <AddDataDialog v-model="showAddDataDialog" :token="inputToken"/>
 </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 {
-  max-width: 400px;
-}
-
-.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>

web/src/views/admin/SettingsView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  TODO
+</template>

web/src/views/admin/TokenDetailView.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref, watch} from 'vue'
 import {useCounterStore} from "@/stores/counter.ts"
 import api from "@/api"
-import {ElMessage, ElMessageBox} from 'element-plus'
 import {DataAnalysis, Delete, Document, InfoFilled, Key, Refresh, Search, Warning} from '@element-plus/icons-vue'
 
 const store = useCounterStore()
@@ -145,19 +143,8 @@ const statCards = [
 
 <template>
   <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="detail-page">
       <div class="content-card">
         <div class="page-title">Token 详情</div>
 
@@ -318,36 +305,11 @@ const statCards = [
 
 <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;
@@ -359,7 +321,7 @@ const statCards = [
 
 .update-time {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 /* 信息卡片 */
@@ -411,14 +373,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 +392,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 +424,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 +440,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 +455,7 @@ const statCards = [
   flex-direction: column;
   align-items: center;
   padding: 64px;
-  color: var(--text-secondary);
+  color: var(--el-text-color-secondary);
 }
 
 .empty-text {

web/src/views/admin/TokenManageView.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import {onMounted, ref} from "vue"
 import api from "@/api"
-import {ElMessage} from 'element-plus'
 import {useCounterStore} from "@/stores/counter.ts"
-import {useRouter} from "vue-router"
+import {Delete, Edit, Key, Memo, Plus, View} from '@element-plus/icons-vue'
-import {Delete, Edit, Key, Lock, Memo, Plus, View} from '@element-plus/icons-vue'
-import AddDataDialog from '@/components/AddDataDialog.vue'
 
 const store = useCounterStore()
 const router = useRouter()
@@ -16,8 +12,7 @@ const input = ref('')
 const value = ref('')
 const dataFormat = ref('')
 const inputNotes = ref('')
-const inputPassWord = ref('')
+const activeNames = ref(['1'])
-const passwordVisible = ref(true)
 
 const rowOut = ref<any>(null)
 const addDataDialogVisible = ref(false)
@@ -50,24 +45,11 @@ const fetchTokens = async () => {
 }
 
 onMounted(() => {
-  if (!store.isAdmin) {
+  if (store.isAdmin) {
-    passwordVisible.value = true
-  } else {
     fetchTokens()
   }
 })
 
-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('请填写完整信息')
@@ -180,79 +162,49 @@ const deleteToken = async (row: any) => {
 
 <template>
   <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>
-
-        <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>
-
-        <el-button type="primary" size="large" class="login-btn" @click="checkPassword">
-          登录
-        </el-button>
-      </div>
-    </div>
-
     <!-- 管理页面 -->
-    <div v-else class="manage-page">
+    <div class="manage-page">
       <div class="content-card">
         <div class="page-title">Token 管理</div>
 
         <!-- 添加表单 -->
-        <div class="add-form">
+        <el-collapse class="add-form" v-model="activeNames">
-          <div class="form-title">添加新 Token</div>
+          <el-collapse-item title="添加新 Token" name="1">
-          <div class="form-grid">
+            <div class="form-grid">
-            <el-input v-model="input" placeholder="Token 名称" clearable>
+              <el-input v-model="input" placeholder="Token 名称" clearable>
-              <template #prefix>
+                <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>
-                  <Key/>
+                  <Plus/>
                 </el-icon>
-              </template>
+                添加
-            </el-input>
+              </el-button>
-
+            </div>
-            <el-select v-model="value" placeholder="去重对象" clearable>
+          </el-collapse-item>
-              <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/>
+        </el-collapse>
-            </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">
@@ -261,7 +213,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,56 +338,11 @@ const deleteToken = async (row: any) => {
 
 <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;
@@ -446,7 +354,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 +387,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 +402,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;

web/tsconfig.app.json

@@ -3,7 +3,9 @@
   "include": [
     "env.d.ts",
     "src/**/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "auto-imports.d.ts",
+    "components.d.ts"
   ],
   "exclude": [
     "src/**/__tests__/*"

web/vite.config.ts

@@ -4,6 +4,9 @@ import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -11,6 +14,16 @@ export default defineConfig({
         vue(),
         vueDevTools(),
         tailwindcss(),
+        AutoImport({
+            imports: [
+                'vue',
+                'vue-router',
+            ],
+            resolvers: [ElementPlusResolver()],
+        }),
+        Components({
+            resolvers: [ElementPlusResolver()],
+        }),
     ],
     resolve: {
         alias: {