refactor(ui): 重构UI组件样式和对话框功能

- 将 AddDataDialog 组件的布局改为 flex 布局并移除自定义 CSS 类
- 更新 TokenDetailView 的整体布局结构，使用 Tailwind CSS 类替换原生样式
- 优化 TokenManageView 的表单和表格界面，调整响应式设计
- 移除 Element Plus ElContainer 组件的引用
- 合并多个编辑对话框为统一的数据编辑对话框
- 优化进度条和标签的显示样式
- 调整按钮和表单项的间距和对齐方式

web/components.d.ts

@@ -16,7 +16,6 @@ declare module 'vue' {
     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/components/AddDataDialog.vue

@@ -70,7 +70,7 @@ const handleUpload = async () => {
       <el-tag type="primary" effect="plain">{{ props.token }}</el-tag>
     </template>
 
-    <div class="add-data-dialog">
+    <div class="flex flex-col gap-4">
       <el-input
           v-model="inputData"
           type="textarea"
@@ -80,13 +80,14 @@ const handleUpload = async () => {
           class="textarea-input"
       />
 
-      <div class="footer">
+      <div class="flex justify-between items-center gap-4">
-        <div class="progress">
+        <div class="flex-1 flex items-center gap-3">
           <el-progress
               :percentage="totalCount > 0 ? Math.round((uploadedCount / totalCount) * 100) : 0"
               :show-text="false"
+              class="flex-1"
           />
-          <span class="progress-text">已上传 {{ uploadedCount }}/{{ totalCount }} 行</span>
+          <span class="text-sm text-[var(--el-text-color-secondary)] whitespace-nowrap">已上传 {{ uploadedCount }}/{{ totalCount }} 行</span>
         </div>
 
         <el-button
@@ -105,39 +106,9 @@ const handleUpload = async () => {
 </template>
 
 <style scoped>
-.add-data-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
 .textarea-input :deep(.el-textarea__inner) {
   overflow-x: auto;
   white-space: pre;
   word-break: keep-all;
 }
-
-.footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.progress {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.progress-text {
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  white-space: nowrap;
-}
-
-.footer .el-progress {
-  flex: 1;
-}
 </style>

web/src/views/admin/TokenDetailView.vue

@@ -142,14 +142,15 @@ const statCards = [
 </script>
 
 <template>
-  <div class="token-detail">
+  <div class="mx-auto w-full">
     <!-- 管理页面 -->
-    <div class="detail-page">
+    <div class="bg-white rounded-lg p-6 shadow-[0_2px_12px_rgba(0,0,0,0.08)]">
-      <div class="content-card">
+      <div class="text-xl font-semibold text-(--el-text-color-primary) mb-5 pb-3 border-b border-(--el-border-color)">
-        <div class="page-title">Token 详情</div>
+        Token 详情
+      </div>
 
       <!-- 选择 Token -->
-        <div class="token-select">
+      <div class="flex items-center gap-3 mb-6 flex-wrap max-md:flex-col max-md:items-stretch">
         <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>
@@ -159,97 +160,109 @@ const statCards = [
           </el-icon>
           刷新
         </el-button>
-          <span v-if="lastUpdate" class="update-time">上次更新: {{ lastUpdate }}</span>
+        <span v-if="lastUpdate" class="text-xs text-(--el-text-color-secondary)">上次更新: {{ lastUpdate }}</span>
       </div>
 
       <!-- Token 信息 -->
-        <div v-if="result && value" class="info-section">
+      <div v-if="result && value" class="animate-fade-in">
-          <div class="section-title">Token 信息</div>
+        <div class="text-base font-semibold text-(--el-text-color-primary) mt-5 mb-4">Token 信息</div>
 
-          <div class="stat-cards">
+        <div class="grid grid-cols-4 gap-4 mb-8 max-xl:grid-cols-2 max-md:grid-cols-1">
-            <div v-for="card in statCards" :key="card.key" class="stat-card">
+          <div v-for="card in statCards" :key="card.key"
-              <div class="stat-icon" :style="{ background: card.color + '20', color: card.color }">
+               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)]">
+            <div class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                 :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="flex-1 min-w-0">
-                <div class="stat-label">{{ card.label }}</div>
+              <div class="text-xs text-(--el-text-color-secondary) mb-1">{{ card.label }}</div>
-                <div class="stat-value">{{ result[card.key] || '-' }}</div>
+              <div class="text-lg font-semibold text-(--el-text-color-primary)">{{ result[card.key] || '-' }}</div>
             </div>
           </div>
         </div>
 
         <!-- 管理操作 -->
-          <div class="manage-section">
+        <div class="mt-8">
-            <div class="section-title">数据管理</div>
+          <div class="text-base font-semibold text-(--el-text-color-primary) mt-5 mb-4">数据管理</div>
 
-            <div class="action-grid">
+          <div class="grid grid-cols-3 gap-4 max-xl:grid-cols-2 max-md:grid-cols-1">
-              <div class="action-card danger">
+            <div
-                <div class="action-icon">
+                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)] max-md:flex-col max-md:text-center">
+              <div
+                  class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-(--el-color-primary) text-white">
                 <el-icon size="28">
                   <Delete/>
                 </el-icon>
               </div>
-                <div class="action-info">
+              <div class="flex-1 min-w-0">
-                  <div class="action-label">删除全部去重参考值</div>
+                <div class="text-base font-semibold text-(--el-text-color-primary) mb-1">删除全部去重参考值</div>
-                  <div class="action-desc">清除该 Token 的所有去重布隆过滤器</div>
+                <div class="text-xs text-(--el-text-color-secondary)">清除该 Token 的所有去重布隆过滤器</div>
               </div>
               <el-button type="danger" @click="deleteDedup">执行</el-button>
             </div>
 
-              <div class="action-card danger">
+            <div
-                <div class="action-icon">
+                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)] max-md:flex-col max-md:text-center">
+              <div
+                  class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-(--el-color-primary) text-white">
                 <el-icon size="28">
                   <Delete/>
                 </el-icon>
               </div>
-                <div class="action-info">
+              <div class="flex-1 min-w-0">
-                  <div class="action-label">删除全部原始数据</div>
+                <div class="text-base font-semibold text-(--el-text-color-primary) mb-1">删除全部原始数据</div>
-                  <div class="action-desc">清除该 Token 的所有原始缓存数据</div>
+                <div class="text-xs text-(--el-text-color-secondary)">清除该 Token 的所有原始缓存数据</div>
               </div>
               <el-button type="danger" @click="deleteRedis">执行</el-button>
             </div>
           </div>
 
-            <div class="section-subtitle">按数量删除</div>
+          <div class="text-sm font-semibold text-(--el-text-color-secondary) mt-6 mb-4">按数量删除</div>
 
-            <div class="action-grid">
+          <div class="grid grid-cols-3 gap-4 max-xl:grid-cols-2 max-md:grid-cols-1">
-              <div class="action-card">
+            <div
-                <div class="action-icon warning">
+                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)] max-md:flex-col max-md:text-center">
+              <div
+                  class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-(--el-color-warning) text-white">
                 <el-icon size="28">
                   <Search/>
                 </el-icon>
               </div>
-                <div class="action-info">
+              <div class="flex-1 min-w-0">
-                  <div class="action-label">删除指定数量去重参考值</div>
+                <div class="text-base font-semibold text-(--el-text-color-primary) mb-1">删除指定数量去重参考值</div>
-                  <div class="action-desc">指定要删除的去重参考值数量</div>
+                <div class="text-xs text-(--el-text-color-secondary)">指定要删除的去重参考值数量</div>
               </div>
               <el-button type="warning" @click="deleteSpecifyDedupVisible = true">指定</el-button>
             </div>
 
-              <div class="action-card">
+            <div
-                <div class="action-icon warning">
+                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)] max-md:flex-col max-md:text-center">
+              <div
+                  class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-(--el-color-warning) text-white">
                 <el-icon size="28">
                   <Search/>
                 </el-icon>
               </div>
-                <div class="action-info">
+              <div class="flex-1 min-w-0">
-                  <div class="action-label">删除指定数量原始数据</div>
+                <div class="text-base font-semibold text-(--el-text-color-primary) mb-1">删除指定数量原始数据</div>
-                  <div class="action-desc">指定要删除的原始数据数量</div>
+                <div class="text-xs text-(--el-text-color-secondary)">指定要删除的原始数据数量</div>
               </div>
               <el-button type="warning" @click="deleteSpecifyRawVisible = true">指定</el-button>
             </div>
 
-              <div class="action-card">
+            <div
-                <div class="action-icon warning">
+                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)] max-md:flex-col max-md:text-center">
+              <div
+                  class="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-(--el-color-warning) text-white">
                 <el-icon size="28">
                   <Search/>
                 </el-icon>
               </div>
-                <div class="action-info">
+              <div class="flex-1 min-w-0">
-                  <div class="action-label">删除指定数量数据</div>
+                <div class="text-base font-semibold text-(--el-text-color-primary) mb-1">删除指定数量数据</div>
-                  <div class="action-desc">同时删除去重参考值和原始数据</div>
+                <div class="text-xs text-(--el-text-color-secondary)">同时删除去重参考值和原始数据</div>
               </div>
               <el-button type="warning" @click="deleteSpecifyDataVisible = true">指定</el-button>
             </div>
@@ -258,19 +271,19 @@ const statCards = [
       </div>
 
       <!-- 空状态 -->
-        <div v-else-if="value" class="empty-state">
+      <div v-else-if="value" class="flex flex-col items-center p-16 text-(--el-text-color-secondary)">
         <el-icon size="64" color="#dcdfe6">
           <InfoFilled/>
         </el-icon>
-          <div class="empty-text">暂无数据</div>
+        <div class="mt-4 text-[15px]">暂无数据</div>
       </div>
 
       <!-- 未选择 -->
-        <div v-else class="empty-state">
+      <div v-else class="flex flex-col items-center p-16 text-(--el-text-color-secondary)">
         <el-icon size="64" color="#dcdfe6">
           <Key/>
         </el-icon>
-          <div class="empty-text">请选择 Token 查看详情</div>
+        <div class="mt-4 text-[15px]">请选择 Token 查看详情</div>
       </div>
     </div>
 
@@ -300,196 +313,4 @@ const statCards = [
       </template>
     </el-dialog>
   </div>
-  </div>
 </template>
-
-<style scoped>
-.token-detail {
-  margin: 0 auto;
-  width: 100%;
-  padding: 0;
-}
-
-/* Token 选择 */
-.token-select {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-}
-
-.update-time {
-  font-size: 13px;
-  color: var(--el-text-color-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(--el-text-color-secondary);
-  margin-bottom: 4px;
-}
-
-.stat-value {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  word-break: break-all;
-}
-
-/* 管理操作 */
-.manage-section {
-  margin-top: 32px;
-}
-
-.section-subtitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--el-text-color-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(--el-color-primary);
-  color: #fff;
-}
-
-.action-icon.warning {
-  background: var(--el-color-warning);
-}
-
-.action-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.action-label {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin-bottom: 4px;
-}
-
-.action-desc {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-}
-
-/* 空状态 */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 64px;
-  color: var(--el-text-color-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>

web/src/views/admin/TokenManageView.vue

@@ -9,16 +9,16 @@ const router = useRouter()
 const tableData = ref<any[]>([])
 const loading = ref(false)
 const input = ref('')
-const value = ref('')
+
-const dataFormat = ref('')
+const inputDedupObject = ref('')
+const inputDataFormat = ref('')
 const inputNotes = ref('')
+
 const activeNames = ref(['1'])
 
 const rowOut = ref<any>(null)
 const addDataDialogVisible = ref(false)
-const dedupObjectVisible = ref(false)
+const dataDialogVisible = ref(false)
-const dataFormatVisible = ref(false)
-const inputNotesVisible = ref(false)
 
 const options = [
   {value: 'uid', label: 'uid'},
@@ -46,32 +46,26 @@ const fetchTokens = async () => {
   }
 }
 
-onMounted(() => {
-  if (store.isAdmin) {
-    fetchTokens()
-  }
-})
-
 const addToken = async () => {
-  if (!input.value || !value.value || !dataFormat.value) {
+  if (!input.value || !inputDedupObject.value || !inputDataFormat.value) {
     ElMessage.warning('请填写完整信息')
     return
   }
   try {
     await api.createToken({
       token: input.value,
-      dedup_object: value.value,
+      dedup_object: inputDedupObject.value,
-      data_format: dataFormat.value,
+      data_format: inputDataFormat.value,
       notes: inputNotes.value,
     })
     ElMessage({message: '添加成功', type: 'success'})
     input.value = ''
-    value.value = ''
+    inputDedupObject.value = ''
-    dataFormat.value = ''
+    inputDataFormat.value = ''
     inputNotes.value = ''
     fetchTokens()
   } catch (error: any) {
-    ElMessage.error(error.response?.data?.error || '添加失败')
+    ElMessage.error('添加失败' + error.response?.data?.error)
   }
 }
 
@@ -80,75 +74,38 @@ const viewDetails = (row: any) => {
   router.push({name: "TokenDetail"})
 }
 
-const dialogDedupObjectVisible = (row: any) => {
-  rowOut.value = row
-  value.value = row.dedup_object
-  dedupObjectVisible.value = true
-}
-
-const dialogDataFormatVisible = (row: any) => {
-  rowOut.value = row
-  dataFormat.value = row.data_format
-  dataFormatVisible.value = true
-}
-
-const dialogNotesVisible = (row: any) => {
-  rowOut.value = row
-  inputNotes.value = row.notes
-  inputNotesVisible.value = true
-}
-
 const dialogDataADDVisible = (row: any) => {
   rowOut.value = row
+
   addDataDialogVisible.value = true
 }
 
-const updateDedupObject = async () => {
+const displayDataVisible = (row: any) => {
-  try {
+  rowOut.value = row
-    await api.updateToken({
+
-      token: rowOut.value.token,
+  inputDedupObject.value = row.dedup_object
-      dedup_object: value.value,
+  inputDataFormat.value = row.data_format
-      data_format: rowOut.value.data_format,
+  inputNotes.value = row.notes
-      notes: rowOut.value.notes,
+
-    })
+  dataDialogVisible.value = true
-    ElMessage({message: '更新成功', type: 'success'})
-    dedupObjectVisible.value = false
-    fetchTokens()
-  } catch (error: any) {
-    ElMessage.error(error.response?.data?.error || '更新失败')
-  }
 }
 
-const updateDataFormat = async () => {
+const updateData = async () => {
   try {
     await api.updateToken({
       token: rowOut.value.token,
-      dedup_object: rowOut.value.dedup_object,
+      dedup_object: inputDedupObject.value,
-      data_format: dataFormat.value,
+      data_format: inputDataFormat.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 api.updateToken({
-      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 || '更新失败')
+    ElMessage.error('更新失败' + error.response?.data?.error)
+    dataDialogVisible.value = false
+    return
   }
+  ElMessage({message: '更新成功', type: 'success'})
+  fetchTokens()
+  dataDialogVisible.value = false
 }
 
 const deleteToken = async (row: any) => {
@@ -157,23 +114,34 @@ const deleteToken = async (row: any) => {
     ElMessage({message: '删除成功', type: 'success'})
     fetchTokens()
   } catch (error: any) {
-    ElMessage.error(error.response?.data?.error || '删除失败')
+    ElMessage.error('删除失败' + error.response?.data?.error)
   }
 }
+
+onMounted(() => {
+  if (store.isAdmin) {
+    fetchTokens()
+  }
+})
 </script>
 
 <template>
-  <div class="token-manage">
+  <div class="mx-auto w-full bg-white">
     <!-- 管理页面 -->
-    <div class="manage-page">
+    <div class="rounded-lg p-6 shadow-[0_2px_12px_rgba(0,0,0,0.08)]">
-      <div class="content-card">
+      <div class="text-xl font-semibold text-(--el-text-color-primary) pb-3 border-b border-(--el-border-color)">
-        <div class="page-title">Token 管理</div>
+        Token 管理
+      </div>
 
       <!-- 添加表单 -->
-        <el-collapse class="add-form" v-model="activeNames">
+      <el-collapse
-          <el-collapse-item title="添加新 Token" name="1">
+          class="rounded-xl"
-            <div class="form-grid">
+          v-model="activeNames"
-              <el-input v-model="input" placeholder="Token 名称" clearable>
+      >
+        <el-collapse-item title="添加新 Token" name="1"
+                          class="flex flex-wrap gap-3 items-center max-md:flex-col max-md:items-stretch"
+        >
+          <el-input v-model="input" placeholder="Token 名称" clearable class="w-55 max-md:w-full">
             <template #prefix>
               <el-icon>
                 <Key/>
@@ -181,16 +149,16 @@ const deleteToken = async (row: any) => {
             </template>
           </el-input>
 
-              <el-select v-model="value" placeholder="去重对象" clearable>
+          <el-select v-model="inputDedupObject" placeholder="去重对象" clearable class="w-70 max-md:w-full">
             <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-select v-model="inputDataFormat" placeholder="数据格式" clearable class="w-70 max-md:w-full">
             <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>
+          <el-input v-model="inputNotes" placeholder="备注（可选）" clearable class="w-55 max-md:w-full">
             <template #prefix>
               <el-icon>
                 <Memo/>
@@ -198,28 +166,27 @@ const deleteToken = async (row: any) => {
             </template>
           </el-input>
 
-              <el-button type="primary" @click="addToken">
+          <el-button type="primary" @click="addToken" class="max-md:w-full">
             <el-icon>
               <Plus/>
             </el-icon>
             添加
           </el-button>
-            </div>
         </el-collapse-item>
       </el-collapse>
 
       <!-- Token 列表 -->
-        <div class="table-section">
+      <div>
-          <div class="section-header">
+        <div class="flex justify-between items-center">
-            <span class="section-title">Token 列表</span>
+          <span class="text-base font-semibold text-(--el-text-color-primary) mt-5 mb-4">Token 列表</span>
-            <span class="table-count">共 {{ tableData.length }} 条</span>
+          <span class="text-xs text-(--el-text-color-secondary)">共 {{ tableData.length }} 条</span>
         </div>
 
         <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">
+              <div class="flex items-center gap-2">
                 <el-icon>
                   <Key/>
                 </el-icon>
@@ -228,7 +195,7 @@ const deleteToken = async (row: any) => {
             </template>
           </el-table-column>
 
-            <el-table-column prop="dedup_object" label="去重对象" width="150">
+          <el-table-column prop="dedup_object" label="去重对象" width="200">
             <template #default="{ row }">
               <el-tag type="primary" effect="plain">{{ row.dedup_object }}</el-tag>
             </template>
@@ -236,20 +203,22 @@ const deleteToken = async (row: any) => {
 
           <el-table-column prop="data_format" label="数据格式" min-width="200" show-overflow-tooltip>
             <template #default="{ row }">
-                <div class="format-cell">{{ row.data_format }}</div>
+              <div class="text-xs break-all">{{ row.data_format }}</div>
             </template>
           </el-table-column>
 
           <el-table-column prop="notes" label="备注" min-width="150" show-overflow-tooltip>
             <template #default="{ row }">
-                <span class="notes-text">{{ row.notes || '-' }}</span>
+              <span class="text-(--el-text-color-secondary) overflow-hidden text-ellipsis whitespace-nowrap">
+                {{ row.notes || '-' }}
+              </span>
             </template>
           </el-table-column>
 
-            <el-table-column label="操作" width="500" fixed="right">
+          <el-table-column label="操作" width="380" fixed="right">
             <template #default="{ row }">
-                <div class="action-buttons">
+              <div class="flex gap-1 flex-wrap max-md:flex-col">
-                  <el-button type="primary" size="small" text @click="viewDetails(row)">
+                <el-button size="small" text @click="viewDetails(row)">
                   <el-icon>
                     <View/>
                   </el-icon>
@@ -261,23 +230,11 @@ const deleteToken = async (row: any) => {
                   </el-icon>
                   数据
                 </el-button>
-                  <el-button size="small" text @click="dialogDedupObjectVisible(row)">
+                <el-button type="primary" size="small" text @click="displayDataVisible(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 吗？"
@@ -300,33 +257,35 @@ const deleteToken = async (row: any) => {
         </el-table>
       </div>
     </div>
+  </div>
 
   <!-- 编辑对话框 -->
-      <el-dialog v-model="dedupObjectVisible" title="更改去重对象" width="400">
+  <el-dialog width="400"
-        <el-select v-model="value" placeholder="选择去重对象" style="width: 100%">
+             v-model="dataDialogVisible"
+  >
+    <template #header>
+      编辑Token
+      <el-tag type="primary" effect="plain">{{ rowOut?.token }}</el-tag>
+    </template>
+
+
+    <div class="flex flex-col gap-3">
+      <el-text class="mr-auto">去重对象</el-text>
+      <el-select v-model="inputDedupObject" placeholder="选择去重对象">
         <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-dialog>
 
-      <el-dialog v-model="dataFormatVisible" title="更改数据格式" width="400">
+      <el-text class="mr-auto">数据格式</el-text>
-        <el-select v-model="dataFormat" placeholder="选择数据格式" style="width: 100%">
+      <el-select v-model="inputDataFormat" placeholder="选择数据格式">
         <el-option v-for="item in dataFormatOptions" :key="item.value" :value="item.value" :label="item.label"/>
       </el-select>
-        <template #footer>
+      <el-text class="mr-auto">备注</el-text>
-          <el-button @click="dataFormatVisible = false">取消</el-button>
-          <el-button type="primary" @click="updateDataFormat">确定</el-button>
-        </template>
-      </el-dialog>
-
-      <el-dialog v-model="inputNotesVisible" title="更改备注" width="400">
       <el-input v-model="inputNotes" placeholder="请输入备注"/>
+    </div>
+
     <template #footer>
-          <el-button @click="inputNotesVisible = false">取消</el-button>
+      <el-button @click="dataDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="updateNotes">确定</el-button>
+      <el-button type="primary" @click="updateData">确定</el-button>
     </template>
   </el-dialog>
 
@@ -334,105 +293,4 @@ const deleteToken = async (row: any) => {
       v-model="addDataDialogVisible"
       :token="rowOut?.token"
   />
-    </div>
-  </div>
 </template>
-
-<style scoped>
-.token-manage {
-  margin: 0 auto;
-  width: 100%;
-  padding: 0;
-}
-
-/* 管理页面 */
-.add-form {
-  margin-bottom: 32px;
-  padding: 24px;
-  background: var(--bg-page);
-  border-radius: 12px;
-}
-
-.form-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--el-text-color-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(--el-text-color-secondary);
-}
-
-.token-cell {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.format-cell {
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.notes-text {
-  color: var(--el-text-color-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>