refactor(token): 优化表格样式和删除功能

web/src/views/TokenDetailView.vue

@@ -4,18 +4,25 @@ import {ref, watch} from 'vue'
 import axios from "@/axios.ts";
 import {useRoute} from "vue-router"
 
-interface optionsType {
-  value: string
-}
 
-const route = useRoute()
+// 创建响应式引用，用于存储API请求结果
 const result = ref()
+
+// 创建响应式引用，用于存储当前选中的token值
 const value = ref('')
-const options = ref([] as optionsType[])
 value.value = useCounterStore().token
+
+// 创建响应式引用，用于存储下拉选项列表
+const options = ref([] as string[])
+
+// 控制删除指定Redis键的确认对话框的显示状态
 const deleteSpecifyRedisVisible = ref(false)
 const inputSpecifyRedis = ref('')
 
+// 控制删除指定去重项的确认对话框的显示状态
+const deleteSpecifyDedupVisible = ref(false)
+const inputSpecifyDedup = ref('')
+
 
 const getInfo = () => {
   if (value.value != '') {
@@ -35,7 +42,7 @@ const deleteDedup = () => {
   axios.delete('/api/token/info', {
     params: {
       token: value.value,
-      dedup_bf: true
+      dedup_bf: "all"
     }
   }).then(res => {
     getInfo()
@@ -64,7 +71,7 @@ watch(value, (newValue) => {
 axios.get('/api/token').then(res => {
   if (res.status == 200) {
     res.data.result.forEach((item: any) => {
-      options.value.push({"value": item.token})
+      options.value.push(item.token)
     })
   }
 })
@@ -80,6 +87,18 @@ const deleteSpecifyRedis = () => {
     deleteSpecifyRedisVisible.value = false
   })
 }
+
+const deleteSpecifyDedup = () => {
+  axios.delete('/api/token/info', {
+    params: {
+      token: value.value,
+      dedup_bf: inputSpecifyDedup.value,
+    }
+  }).then(res => {
+    getInfo()
+    deleteSpecifyDedupVisible.value = false
+  })
+}
 </script>
 
 
@@ -93,12 +112,13 @@ const deleteSpecifyRedis = () => {
     <el-select v-model="value" placeholder="选择Token" style="width: 240px">
       <el-option
           v-for="item in options"
-          :key="item.value"
-          :value="item.value"
+          :key="item"
+          :value="item"
       />
     </el-select>
 
     <el-divider/>
+
     <b>Token信息（每5秒刷新）</b>
     <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
     <el-descriptions
@@ -106,18 +126,40 @@ const deleteSpecifyRedis = () => {
         :column="4"
         border
     >
-      <el-descriptions-item label="去重对象">{{ result?.dedup_object }}</el-descriptions-item>
-      <el-descriptions-item label="上传数据格式">{{ result?.data_format }}</el-descriptions-item>
-      <el-descriptions-item label="去重参考值数量">{{ result?.dedup_items_number }}</el-descriptions-item>
-      <el-descriptions-item label="原始数据数量">{{ result?.cache_list_number }}</el-descriptions-item>
+      <el-descriptions-item label="去重对象" label-width="150px">
+        <el-tag>{{ result?.dedup_object }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="上传数据格式" label-width="150px">
+        {{ result?.data_format }}
+      </el-descriptions-item>
+      <el-descriptions-item label="去重参考值数量" label-width="150px">
+        {{ result?.dedup_items_number }} 条
+      </el-descriptions-item>
+      <el-descriptions-item label="原始数据数量" label-width="150px">
+        {{ result?.cache_list_number }} 条
+      </el-descriptions-item>
     </el-descriptions>
 
     <p><b>管理</b></p>
-    <el-button type="danger" @click="deleteDedup">删除去重记录值</el-button>
-    <el-button type="danger" @click="deleteRedis">删除全部Redis数据</el-button>
-    <el-button type="danger" @click="deleteSpecifyRedisVisible=true">删除指定数量Redis数据</el-button>
+    <el-button type="danger" @click="deleteDedup">删除全部去重参考值</el-button>
+    <el-button type="danger" @click="deleteRedis">删除全部原始数据</el-button>
+    <div style="margin-top: 10px">
+      <el-button type="danger" @click="deleteSpecifyDedupVisible=true">删除指定数量去重参考值</el-button>
+      <el-button type="danger" @click="deleteSpecifyRedisVisible=true">删除指定数量原始数据</el-button>
+    </div>
 
-    <el-dialog v-model="deleteSpecifyRedisVisible" title="删除指定数量Redis数据" width="400">
+
+    <!--弹窗输入-->
+    <el-dialog v-model="deleteSpecifyDedupVisible" title="删除指定数量去重参考值" width="400">
+      <el-input v-model="inputSpecifyDedup" style="width: 200px" placeholder="请输入删除数量"/>
+      <template #footer>
+        <el-button type="primary" @click="deleteSpecifyDedup">
+          确定
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="deleteSpecifyRedisVisible" title="删除指定数量原始数据" width="400">
       <el-input v-model="inputSpecifyRedis" style="width: 200px" placeholder="请输入删除数量"/>
       <template #footer>
         <el-button type="primary" @click="deleteSpecifyRedis">

web/src/views/TokenManageView.vue

@@ -229,7 +229,7 @@ const checkPassword = () => {
     <el-button type="primary" @click="addToken">添加Token</el-button>
 
     <!--Token列表-->
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" stripe style="width: 100%">
       <el-table-column prop="token" label="Token" width="150"/>
       <el-table-column prop="dedup_object" label="去重对象" width="150"/>
       <el-table-column prop="data_format" label="上传数据格式" width="280"/>