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/components.d.ts

@@ -13,8 +13,10 @@ 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']

web/src/App.vue

@@ -3,58 +3,7 @@ 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 {
-  --bg-page: #f5f7fa;
-  --bg-card: #ffffff;
-  --bg-header: #ffffff;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html, body {
-  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(--el-text-color-primary);
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--el-border-color);
-}
-
-/* Section 标题 */
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin: 20px 0 16px;
-}
-</style>

web/src/assets/main.css

@@ -1 +1,23 @@
 @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/views/AdminView.vue

@@ -45,18 +45,26 @@ const checkPassword = () => {
     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)">
-    <el-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">DYPID 管理后台</div>
+      <div class="flex items-center">
+        <div class="flex items-center gap-2.5 text-(--el-color-primary) font-semibold text-lg">DYPID 管理后台</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 class="nav-item"
+        <div
-             :class="{active:activeIndex=='TokenManage'}"
+            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('TokenManage')"
             @click="handleSelect('TokenManage')"
         >
           <el-icon>
@@ -65,8 +73,9 @@ const checkPassword = () => {
           <span>管理 Token</span>
         </div>
 
-        <div class="nav-item"
+        <div
-             :class="{active:activeIndex=='TokenDetail'}"
+            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>
@@ -76,7 +85,7 @@ const checkPassword = () => {
         </div>
       </nav>
 
-      <div class="header-right">
+      <div class="flex items-center">
         <el-button v-if="_isAdmin" circle link
                    @click="handleSelect('AdminSettings')"
         >
@@ -106,15 +115,16 @@ const checkPassword = () => {
 
     <el-main>
       <!-- 登录页面 -->
-      <div v-if="!_isAdmin" class="login-page">
+      <div v-if="!_isAdmin" class="flex justify-center items-center min-h-[60vh]">
-        <div class="login-card">
+        <div
-          <div class="login-icon">
+            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="login-title">管理员登录</div>
+          <div class="text-2xl font-semibold text-(--el-text-color-primary) mb-2">管理员登录</div>
-          <div class="login-subtitle">请输入管理员密码访问管理后台</div>
+          <div class="text-sm text-(--el-text-color-secondary) mb-8">请输入管理员密码访问管理后台</div>
 
           <el-input
               v-model="inputPassWord"
@@ -122,6 +132,7 @@ const checkPassword = () => {
               placeholder="请输入管理员密码"
               size="large"
               show-password
+              class="mb-4"
               @keyup.enter="checkPassword"
           >
             <template #prefix>
@@ -131,7 +142,7 @@ const checkPassword = () => {
             </template>
           </el-input>
 
-          <el-button type="primary" size="large" class="login-btn" @click="checkPassword">
+          <el-button type="primary" size="large" class="w-full mt-2" @click="checkPassword">
             登录
           </el-button>
         </div>
@@ -143,133 +154,3 @@ const checkPassword = () => {
     </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;
-  background: var(--bg-header);
-  border-bottom: 1px solid var(--el-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(--el-color-primary);
-  font-weight: 600;
-  font-size: 18px;
-}
-
-.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(--el-text-color-regular);
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.nav-item:hover {
-  background: var(--bg-page);
-  color: var(--el-text-color-primary);
-}
-
-.nav-item.active {
-  background: var(--el-color-primary);
-  color: #fff;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-}
-
-/* 登录页面 */
-.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(--el-text-color-primary);
-  margin-bottom: 8px;
-}
-
-.login-subtitle {
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 32px;
-}
-
-.login-card :deep(.el-input) {
-  margin-bottom: 16px;
-}
-
-.login-btn {
-  width: 100%;
-  margin-top: 8px;
-}
-
-@media (max-width: 768px) {
-  .admin-header {
-    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;
-  }
-}
-</style>

web/src/views/HomeView.vue

@@ -56,21 +56,16 @@ 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="p-6 h-dvh">
-    <div class="content-card h-full">
+    <div class="bg-white rounded-lg p-6 shadow-[0_2px_12px_rgba(0,0,0,0.08)] h-full">
-      <div class="text-center mb-8">
+      <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="flex justify-center mb-8">
@@ -91,40 +86,138 @@ const statCards = [
         </el-button>
       </div>
 
-      <AddDataDialog v-model="showAddDataDialog" :token="inputToken"/>
+      <el-space direction="vertical"
-
+                class="w-full animate-fade-in"
-      <div v-if="result" class="result-section">
+                v-if="result"
-        <el-button type="primary" size=""
-                   class=""
-                   @click="showAddDataDialog = true" :icon="Plus"
       >
-          增加数据
+        <el-card class="p-6">
-        </el-button>
+          <template #header>
+            <el-text>Token 信息</el-text>
+            <el-divider direction="vertical"/>
+            <el-tag type="primary" effect="plain">{{ inputToken }}</el-tag>
+          </template>
 
-        <div class="flex ">
+          <el-space direction="vertical">
-          <span class="section-title">Token 信息</span>
+            <el-space>
-        </div>
+              <div
-
+                  class="flex items-center gap-4 p-5 bg-(--bg-page) rounded-xl transition-all duration-200
-        <div class="stat-cards">
+                  hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(0,0,0,0.1)]
-          <div v-for="card in statCards" :key="card.key" class="stat-card">
+                  min-w-100"
-            <div class="stat-icon" :style="{ background: card.color + '20', color: card.color }">
+              >
+                <div
+                    class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                    style="background: #409eff20; color: #409eff"
+                >
                   <el-icon size="24">
-                <component :is="card.icon"/>
+                    <DataAnalysis/>
                   </el-icon>
                 </div>
                 <div class="flex-1">
-              <div class="stat-label">{{ card.label }}</div>
+                  <div class="text-xs text-(--el-text-color-secondary) mb-1">
-              <div class="stat-value">{{ result[card.key] || '-' }}</div>
+                    去重对象
+                  </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>
 
           <el-text v-if="lastUpdate" type="info"
                    class="block w-full mt-5 text-center"
           >
             每5秒更新一次数据 最后更新: {{ lastUpdate }}
           </el-text>
-      </div>
+
+          <template #footer>
+            <el-text>操作</el-text>
+            <el-divider direction="vertical"/>
+            <el-button type="primary" size=""
+                       class=""
+                       @click="showAddDataDialog = true" :icon="Plus"
+            >
+              添加数据
+            </el-button>
+          </template>
+        </el-card>
+      </el-space>
 
       <el-space v-else direction="vertical"
                 class="flex p-16"
@@ -136,78 +229,6 @@ const statCards = [
       </el-space>
     </div>
   </div>
+
+  <AddDataDialog v-model="showAddDataDialog" :token="inputToken"/>
 </template>
-
-<style scoped>
-.header-subtitle {
-  color: var(--el-text-color-secondary);
-  margin-top: 8px;
-}
-
-.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;
-}
-
-.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-label {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>

web/src/views/admin/SettingsView.vue

@@ -5,7 +5,3 @@
 <template>
   TODO
 </template>
-
-<style scoped>
-
-</style>