refactor(api): 重构API调用方式并优化数据管理

- 将原有的axios直接调用替换为统一的api模块封装
- 新增api.ts文件集中管理所有API接口方法
- 删除旧的axios.ts配置文件
- 统一API响应数据结构处理，将result改为data字段
- 优化HomeView中的Token相关状态管理和数据获取逻辑
- 重构TokenDetailView中信息获取和删除操作的API调用
- 更新TokenManageView中Token列表管理的CRUD操作实现
- 简化组件间的数据传递和状态同步机制

web/src/api.ts

@@ -0,0 +1,50 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+})
+
+export default {
+    getTokenList: () =>
+        axiosInstance.get('/api/token'),
+
+    createToken: (params: {
+        token: string
+        dedup_object: string
+        data_format: string
+        notes: string
+    }) =>
+        axiosInstance.post('/api/token', {}, {params}),
+
+    updateToken: (params: {
+        token: string
+        dedup_object?: string
+        data_format?: string
+        notes?: string
+    }) =>
+        axiosInstance.put('/api/token', {}, {params}),
+
+    deleteToken: (params: {
+        token: string
+    }) =>
+        axiosInstance.delete('/api/token', {params}),
+
+    getTokenInfo: (params: {
+        token: string
+    }) =>
+        axiosInstance.get('/api/token/info', {params}),
+
+    deleteTokenInfo: (params: {
+        token: string
+        dedup_bf?: string
+        cache_list?: string
+        both_number?: string
+    }) =>
+        axiosInstance.delete('/api/token/info', {params}),
+
+    uploadData: (params: {
+        data: string
+        token: string
+    }) =>
+        axiosInstance.post('/api/data', {}, {params}),
+}

web/src/axios.ts

@@ -1,7 +0,0 @@
-import axios from 'axios';
-
-const instance = axios.create({
-    baseURL: import.meta.env.VITE_API_BASE_URL,
-});
-
-export default instance;

web/src/components/AddDataDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {computed, ref} from "vue"
-import axios from "@/axios.ts"
+import api from "@/api"
 import {ElMessage} from 'element-plus'
 import {Upload} from '@element-plus/icons-vue'
 
@@ -42,12 +42,7 @@ const handleUpload = async () => {
 
   for (const line of lines) {
     try {
-      await axios.post('/api/data', {}, {
+      await api.uploadData({data: line, token: props.token || ''})
-        params: {
-          data: line,
-          token: props.token || ''
-        }
-      })
       uploadedCount.value++
     } catch (error: any) {
       ElMessage.error(error.response?.data?.error || '上传失败')

web/src/views/HomeView.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, ref} from 'vue'
-import axios from "@/axios.ts"
+import api from "@/api"
 import {useRoute} from "vue-router"
 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 token = ref(route.query.token as string || '')
+const inputToken = ref(route.query.token as string || '')
-const input = ref(route.query.token as string || '')
 const result = ref<any>(null)
 const loading = ref(false)
 const lastUpdate = ref('')
@@ -20,34 +19,41 @@ const updateTime = () => {
 }
 
 const fetchInfo = async () => {
-  if (!input.value) return
+  if (!inputToken.value) return
 
   try {
-    const res = await axios.get('/api/token/info', {
+    const res = await api.getTokenInfo({token: inputToken.value})
-      params: {token: input.value}
+    result.value = res.data.data
-    })
-    result.value = res.data.result
-    token.value = input.value
     updateTime()
   } catch {
+    result.value = null
     ElMessage({message: 'Token输入错误', type: 'error', duration: 2000})
   }
 }
 
 const refresh = async () => {
   loading.value = true
-  await fetchInfo()
+
-  loading.value = false
+  try {
+    const res = await api.getTokenInfo({token: inputToken.value})
+    result.value = res.data.data
+    updateTime()
     ElMessage({message: '查询成功', type: 'success', duration: 1500})
+  } catch {
+    result.value = null
+    ElMessage({message: 'Token输入错误', type: 'error', duration: 2000})
+  }
+
+  loading.value = false
 }
 
 const inputChange = () => {
-  if (input.value) fetchInfo()
+  if (inputToken.value) fetchInfo()
 }
 
 let timer: number
 onMounted(() => {
-  if (token.value) fetchInfo()
+  fetchInfo()
   timer = window.setInterval(fetchInfo, 5000)
 })
 
@@ -73,7 +79,7 @@ const statCards = [
 
       <div class="search-box">
         <el-input
-            v-model="input"
+            v-model="inputToken"
             placeholder="输入 Token"
             clearable
             size="large"
@@ -99,7 +105,7 @@ const statCards = [
         </el-button>
       </div>
 
-      <AddDataDialog v-model="showAddDataDialog" :token="token"/>
+      <AddDataDialog v-model="showAddDataDialog" :token="inputToken"/>
 
       <div v-if="result" class="result-section">
         <div class="result-header">

web/src/views/TokenDetailView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, ref, watch} from 'vue'
 import {useCounterStore} from "@/stores/counter.ts"
-import axios from "@/axios.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'
 
@@ -23,22 +23,18 @@ const isLoading = ref(false)
 const fetchInfo = async () => {
   if (!value.value) return
 
-  const res = await axios.get('/api/token/info', {
+  const res = await api.getTokenInfo({token: value.value})
-    params: {
-      token: value.value
-    }
-  })
   if (res.status === 200) {
-    result.value = res.data.result
+    result.value = res.data.data
     lastUpdate.value = new Date().toLocaleTimeString()
   }
 }
 
 const fetchTokens = async () => {
   try {
-    const res = await axios.get('/api/token')
+    const res = await api.getTokenList()
     if (res.status === 200) {
-      options.value = res.data.result?.map((item: any) => item.token) || []
+      options.value = res.data.data?.map((item: any) => item.token) || []
     }
   } catch (error) {
     console.error('Failed to fetch tokens:', error)
@@ -58,12 +54,7 @@ const deleteDedup = () => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    await axios.delete('/api/token/info', {
+    await api.deleteTokenInfo({token: value.value, dedup_bf: "all"})
-      params: {
-        token: value.value,
-        dedup_bf: "all"
-      }
-    })
     ElMessage({message: '删除成功', type: 'success'})
     await fetchInfo()
   }).catch(() => {
@@ -76,12 +67,7 @@ const deleteRedis = () => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    await axios.delete('/api/token/info', {
+    await api.deleteTokenInfo({token: value.value, cache_list: "all"})
-      params: {
-        token: value.value,
-        cache_list: "all"
-      }
-    })
     ElMessage({message: '删除成功', type: 'success'})
     await fetchInfo()
   }).catch(() => {
@@ -91,12 +77,7 @@ const deleteRedis = () => {
 const deleteSpecifyDedup = async () => {
   isLoading.value = true
 
-  await axios.delete('/api/token/info', {
+  await api.deleteTokenInfo({token: value.value, dedup_bf: inputSpecifyDedup.value})
-    params: {
-      token: value.value,
-      dedup_bf: inputSpecifyDedup.value
-    }
-  })
 
   isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})
@@ -109,12 +90,7 @@ const deleteSpecifyDedup = async () => {
 const deleteSpecifyRaw = async () => {
   isLoading.value = true
 
-  await axios.delete('/api/token/info', {
+  await api.deleteTokenInfo({token: value.value, cache_list: inputSpecifyRaw.value})
-    params: {
-      token: value.value,
-      cache_list: inputSpecifyRaw.value
-    }
-  })
 
   isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})
@@ -127,12 +103,7 @@ const deleteSpecifyRaw = async () => {
 const deleteSpecifyData = async () => {
   isLoading.value = true
 
-  await axios.delete('/api/token/info', {
+  await api.deleteTokenInfo({token: value.value, both_number: inputSpecifyData.value})
-    params: {
-      token: value.value,
-      both_number: inputSpecifyData.value
-    }
-  })
 
   isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})

web/src/views/TokenManageView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue"
-import axios from "@/axios.ts"
+import api from "@/api"
 import {ElMessage} from 'element-plus'
 import {useCounterStore} from "@/stores/counter.ts"
 import {useRouter} from "vue-router"
@@ -42,8 +42,8 @@ const dataFormatOptions = [
 const fetchTokens = async () => {
   loading.value = true
   try {
-    const res = await axios.get("/api/token")
+    const res = await api.getTokenList()
-    tableData.value = res.data.result || []
+    tableData.value = res.data.data || []
   } finally {
     loading.value = false
   }
@@ -74,13 +74,11 @@ const addToken = async () => {
     return
   }
   try {
-    await axios.post('/api/token', {}, {
+    await api.createToken({
-      params: {
       token: input.value,
       dedup_object: value.value,
       data_format: dataFormat.value,
       notes: inputNotes.value,
-      }
     })
     ElMessage({message: '添加成功', type: 'success'})
     input.value = ''
@@ -123,13 +121,11 @@ const dialogDataADDVisible = (row: any) => {
 
 const updateDedupObject = async () => {
   try {
-    await axios.put('/api/token', {}, {
+    await api.updateToken({
-      params: {
       token: rowOut.value.token,
       dedup_object: value.value,
       data_format: rowOut.value.data_format,
       notes: rowOut.value.notes,
-      }
     })
     ElMessage({message: '更新成功', type: 'success'})
     dedupObjectVisible.value = false
@@ -141,13 +137,11 @@ const updateDedupObject = async () => {
 
 const updateDataFormat = async () => {
   try {
-    await axios.put('/api/token', {}, {
+    await api.updateToken({
-      params: {
       token: rowOut.value.token,
       dedup_object: rowOut.value.dedup_object,
       data_format: dataFormat.value,
       notes: rowOut.value.notes,
-      }
     })
     ElMessage({message: '更新成功', type: 'success'})
     dataFormatVisible.value = false
@@ -159,13 +153,11 @@ const updateDataFormat = async () => {
 
 const updateNotes = async () => {
   try {
-    await axios.put('/api/token', {}, {
+    await api.updateToken({
-      params: {
       token: rowOut.value.token,
       dedup_object: rowOut.value.dedup_object,
       data_format: rowOut.value.data_format,
-        notes: inputNotes.value
+      notes: inputNotes.value,
-      }
     })
     ElMessage({message: '更新成功', type: 'success'})
     inputNotesVisible.value = false
@@ -177,9 +169,7 @@ const updateNotes = async () => {
 
 const deleteToken = async (row: any) => {
   try {
-    await axios.delete('/api/token', {
+    await api.deleteToken({token: row.token})
-      params: {token: row.token}
-    })
     ElMessage({message: '删除成功', type: 'success'})
     fetchTokens()
   } catch (error: any) {