From 409aac84861236e7de02b0972927ed27ca28f1f7 Mon Sep 17 00:00:00 2001
From: YGXB_net <ygxb-net@outlook.com>
Date: Fri, 24 Apr 2026 17:48:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(token):=20=E6=B7=BB=E5=8A=A0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=89=B9=E9=87=8F=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 AddDataDialog 组件用于数据批量上传
- 在 TokenManageView 中集成数据上传对话框
- 实现按行分割数据并逐条上传的功能
- 添加上传进度显示和计数功能
- 集成 API 接口进行数据提交
- 添加上传状态控制和错误处理机制
---
 web/src/components/AddDataDialog.vue | 150 +++++++++++++++++++++++++++
 web/src/views/TokenManageView.vue    |  10 +-
 2 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/AddDataDialog.vue

diff --git a/web/src/components/AddDataDialog.vue b/web/src/components/AddDataDialog.vue
new file mode 100644
index 0000000..23cf6c7
--- /dev/null
+++ b/web/src/components/AddDataDialog.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import {ref, computed} from "vue"
+import axios from "@/axios.ts"
+import {ElMessage} from 'element-plus'
+import {Upload} from '@element-plus/icons-vue'
+import * as timers from "node:timers";
+
+const props = defineProps<{
+  modelValue: boolean
+  token?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const inputData = ref('')
+const uploading = ref(false)
+const uploadedCount = ref(0)
+const totalCount = computed(() => {
+  const lines = inputData.value.split('\n').filter(line => line.trim())
+  return lines.length
+})
+
+const close = () => {
+  emit('update:modelValue', false)
+  inputData.value = ''
+  uploadedCount.value = 0
+}
+
+const handleUpload = async () => {
+  if (!inputData.value.trim()) {
+    ElMessage.warning('请输入数据')
+    return
+  }
+
+  uploading.value = true
+  uploadedCount.value = 0
+
+  const lines = inputData.value.split('\n').filter(line => line.trim())
+  const total = lines.length
+  uploadedCount.value = 0
+
+  for (const line of lines) {
+    try {
+      await axios.post('/api/data', {}, {
+        params: {
+          data: line,
+          token: props.token || ''
+        }
+      })
+      uploadedCount.value++
+    } catch (error: any) {
+      ElMessage.error(error.response?.data?.error || '上传失败')
+      uploading.value = false
+      return
+    }
+  }
+
+  uploading.value = false
+  ElMessage({message: '已上传成功 ' + uploadedCount.value + ' 条数据', type: 'success'})
+  setTimeout(() => {
+    close()
+  }, 2000)
+}
+</script>
+
+<template>
+  <el-dialog
+      :model-value="modelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      width="700px"
+      :close-on-click-modal="false"
+      @close="close"
+  >
+    <template #title>
+      添加数据&nbsp;
+      <el-tag type="primary" effect="plain">{{ props.token }}</el-tag>
+    </template>
+    <div class="add-data-dialog">
+      <el-input
+          v-model="inputData"
+          type="textarea"
+          :rows="18"
+          placeholder="请输入数据，每行一条"
+          :disabled="uploading"
+          class="textarea-input"
+      />
+
+      <div class="footer">
+        <div class="progress">
+          <el-progress
+              :percentage="totalCount > 0 ? Math.round((uploadedCount / totalCount) * 100) : 0"
+              :show-text="false"
+          />
+          <span class="progress-text">已上传 {{ uploadedCount }}/{{ totalCount }} 行</span>
+        </div>
+
+        <el-button
+            type="primary"
+            :loading="uploading"
+            @click="handleUpload"
+        >
+          <el-icon v-if="!uploading">
+            <Upload/>
+          </el-icon>
+          上传
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</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(--text-secondary);
+  white-space: nowrap;
+}
+
+.footer .el-progress {
+  flex: 1;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/TokenManageView.vue b/web/src/views/TokenManageView.vue
index 1d84586..20e4451 100644
--- a/web/src/views/TokenManageView.vue
+++ b/web/src/views/TokenManageView.vue
@@ -5,6 +5,7 @@ import {ElMessage} from 'element-plus'
 import {useCounterStore} from "@/stores/counter.ts"
 import {useRouter} from "vue-router"
 import {Plus, View, Edit, Delete, Key, Document, Memo, Search, Lock, DocumentAdd} from '@element-plus/icons-vue'
+import AddDataDialog from '@/components/AddDataDialog.vue'
 
 const store = useCounterStore()
 const router = useRouter()
@@ -19,6 +20,7 @@ const inputPassWord = ref('')
 const passwordVisible = ref(true)
 
 const rowOut = ref<any>(null)
+const addDataDialogVisible = ref(false)
 const dedupObjectVisible = ref(false)
 const dataFormatVisible = ref(false)
 const inputNotesVisible = ref(false)
@@ -116,6 +118,7 @@ const dialogNotesVisible = (row: any) => {
 
 const dialogDataADDVisible = (row: any) => {
   rowOut.value = row
+  addDataDialogVisible.value = true
 }
 
 const updateDedupObject = async () => {
@@ -307,7 +310,7 @@ const deleteToken = async (row: any) => {
                     </el-icon>
                     详情
                   </el-button>
-                  <el-button size="small" text @click="dialogNotesVisible(row)">
+                  <el-button size="small" text @click="dialogDataADDVisible(row)">
                     <el-icon>
                       <Plus/>
                     </el-icon>
@@ -381,6 +384,11 @@ const deleteToken = async (row: any) => {
           <el-button type="primary" @click="updateNotes">确定</el-button>
         </template>
       </el-dialog>
+
+      <AddDataDialog
+        v-model="addDataDialogVisible"
+        :token="rowOut?.token"
+      />
     </div>
   </div>
 </template>