dypid/web/src/components/AddDataDialog.vue

<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'

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>