fix site import dialog

2026-06-02 22:31:07 +08:00 · 2025-08-23 08:47:16 +08:00
parent 0aa4851f8e
commit 382cae32a2
6 changed files with 914 additions and 416 deletions
--- a/src/components/dialog/SiteImportDialog.vue
+++ b/src/components/dialog/SiteImportDialog.vue
@@ -15,18 +15,19 @@ const display = useDisplay()
 // 提示框
 const $toast = useToast()

-// 输入参数
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-})
-
 // 注册事件
 const emit = defineEmits(['update:modelValue', 'import-success'])

+// 界面阶段枚举
+enum ImportStage {
+  SELECT_FILE = 'select_file', // 选择文件阶段
+  PREVIEW_FILE = 'preview_file', // 文件预览阶段
+  IMPORTING = 'importing', // 正在导入阶段
+  IMPORT_COMPLETE = 'import_complete', // 导入完成阶段
+}

+// 当前阶段
+const currentStage = ref<ImportStage>(ImportStage.SELECT_FILE)

 // 是否拖拽中
 const isDragging = ref(false)
@@ -37,19 +38,20 @@ const importData = ref<Site[]>([])
 // 导入进度
 const importProgress = ref(0)

-// 是否正在导入
-const isImporting = ref(false)
-
 // 预览数据
 const previewData = ref<Site[]>([])

-// 是否显示预览
-const showPreview = ref(false)
-
 // 选中的文件
 const selectedFile = ref<File | null>(null)

+// 导入错误信息
+const importErrors = ref<Array<{ site: Site; error: string }>>([])

+// 导入成功的站点
+const importSuccesses = ref<Site[]>([])
+
+// 是否显示错误详情
+const showErrorDetails = ref(false)

 // 处理拖拽事件
 function handleDragOver(event: DragEvent) {
@@ -65,7 +67,7 @@ function handleDragLeave(event: DragEvent) {
 async function handleDrop(event: DragEvent) {
  event.preventDefault()
  isDragging.value = false
-  
+
  const files = event.dataTransfer?.files
  if (files && files.length > 0) {
    const file = files[0]
@@ -83,11 +85,11 @@ async function processFile(file: File) {
  try {
    const text = await file.text()
    const data = JSON.parse(text)
-    
+
    if (Array.isArray(data)) {
      importData.value = data
      previewData.value = data.slice(0, 5) // 只显示前5个站点作为预览
-      showPreview.value = true
+      currentStage.value = ImportStage.PREVIEW_FILE
    } else {
      $toast.error(t('site.messages.invalidFileFormat'))
    }
@@ -121,74 +123,98 @@ async function importSites() {
    $toast.warning(t('site.messages.someInvalidData', { valid: validSites.length, total: importData.value.length }))
  }

+  // 进入导入阶段
+  currentStage.value = ImportStage.IMPORTING
  startNProgress()
-  isImporting.value = true
  importProgress.value = 0

  try {
    let successCount = 0
    let failCount = 0
+    importErrors.value = [] // 清空之前的错误信息
+    importSuccesses.value = [] // 清空之前的成功信息

    for (let i = 0; i < validSites.length; i++) {
      const site = validSites[i]
      try {
        // 移除id字段，避免冲突
        const { id, ...siteData } = site
-        const result = await api.post('site/', siteData)
+        const result: { success: boolean; message?: string } = await api.post('site/', siteData)
        if (result.success) {
+          // 记录成功的站点
          successCount++
+          importSuccesses.value.push(site)
        } else {
          failCount++
+          // 记录失败信息
+          importErrors.value.push({
+            site,
+            error: result.message || t('site.messages.importFailed'),
+          })
        }
      } catch (error) {
        console.error(`Import site ${site.name} failed:`, error)
        failCount++
+        // 记录错误信息
+        importErrors.value.push({
+          site,
+          error: error instanceof Error ? error.message : t('site.messages.importFailed'),
+        })
      }
-      
+      // 更新进度
      importProgress.value = Math.round(((i + 1) / validSites.length) * 100)
    }

+    // 进入完成阶段
+    currentStage.value = ImportStage.IMPORT_COMPLETE
+
    // 显示导入结果
-    if (successCount > 0) {
+    if (failCount === 0 && successCount > 0) {
+      // 全部成功，直接关闭对话框
      $toast.success(t('site.messages.importSuccess', { count: successCount }))
-      emit('import-success')
-      closeDialog()
-    }
-    
-    if (failCount > 0) {
+      closeDialog(true)
+    } else if (successCount === 0 && failCount > 0) {
+      // 全部失败的情况
+      $toast.error(t('site.messages.importAllFailed', { count: failCount }))
+      showErrorDetails.value = true
+    } else {
+      // 部分成功部分失败的情况
      $toast.error(t('site.messages.importPartialFailed', { success: successCount, failed: failCount }))
+      showErrorDetails.value = true
    }
  } catch (error) {
    console.error('Import sites failed:', error)
    $toast.error(t('site.messages.importFailed'))
+    // 出错时回到预览阶段
+    currentStage.value = ImportStage.PREVIEW_FILE
  } finally {
-    isImporting.value = false
    doneNProgress()
  }
 }

-// 关闭对话框
-function closeDialog() {
-  emit('update:modelValue', false)
-  // 重置状态
+// 重置到文件选择阶段
+function resetToFileSelection() {
+  currentStage.value = ImportStage.SELECT_FILE
  importData.value = []
  previewData.value = []
-  showPreview.value = false
  importProgress.value = 0
-  isImporting.value = false
  isDragging.value = false
  selectedFile.value = null
+  importErrors.value = []
+  importSuccesses.value = []
+  showErrorDetails.value = false
 }

-// 监听对话框状态
-watch(() => props.modelValue, (newVal) => {
-  if (!newVal) {
-    closeDialog()
+// 关闭对话框
+function closeDialog(success: boolean = false) {
+  if (success) {
+    emit('import-success')
  }
-})
+  emit('update:modelValue', false)
+}

 // 监听文件选择
-watch(selectedFile, async (newFile) => {
+watch(selectedFile, async newFile => {
  if (newFile) {
    await processFile(newFile)
  }
@@ -196,9 +222,9 @@ watch(selectedFile, async (newFile) => {
 </script>

 <template>
-  <DialogWrapper scrollable :close-on-back="false" eager max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <DialogWrapper scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
    <VCard>
-      <VCardItem class="py-3">
+      <VCardItem class="py-2">
        <template #prepend>
          <VIcon icon="mdi-upload" class="me-2" />
        </template>
@@ -208,43 +234,46 @@ watch(selectedFile, async (newFile) => {
      <VDialogCloseBtn @click="closeDialog" />
      <VDivider />
      <VCardText>
-        <!-- 文件上传区域 -->
-        <div
-          v-if="!showPreview"
-          class="upload-area"
-          :class="{ 'dragging': isDragging }"
-          @dragover="handleDragOver"
-          @dragleave="handleDragLeave"
-          @drop="handleDrop"
-        >
-          <VFileInput
-            v-model="selectedFile"
-            accept=".json"
-            :label="t('site.fields.selectFile')"
-            :hint="t('site.hints.selectFile')"
-            persistent-hint
-            prepend-icon="mdi-file-upload"
-          />
-          <div class="text-center mt-4">
-            <VIcon icon="mdi-cloud-upload" size="48" color="primary" />
-            <p class="text-body-1 mt-2">{{ t('site.hints.dragDropFile') }}</p>
-            <p class="text-caption text-medium-emphasis">{{ t('site.hints.supportedFormat') }}</p>
+        <!-- 阶段1：选择文件阶段 -->
+        <div v-if="currentStage === ImportStage.SELECT_FILE" class="upload-area">
+          <div
+            class="upload-zone"
+            :class="{ 'dragging': isDragging }"
+            @dragover="handleDragOver"
+            @dragleave="handleDragLeave"
+            @drop="handleDrop"
+          >
+            <VFileInput
+              v-model="selectedFile"
+              accept=".json"
+              :label="t('site.fields.selectFile')"
+              :hint="t('site.hints.selectFile')"
+              persistent-hint
+              prepend-icon="mdi-file-upload"
+            />
+            <div class="text-center mt-4">
+              <VIcon icon="mdi-cloud-upload" size="48" color="primary" />
+              <p class="text-body-1 mt-2">{{ t('site.hints.dragDropFile') }}</p>
+              <p class="text-caption text-medium-emphasis">{{ t('site.hints.supportedFormat') }}</p>
+            </div>
          </div>
        </div>

-        <!-- 预览区域 -->
-        <div v-if="showPreview" class="preview-area">
+        <!-- 阶段2：文件预览阶段 -->
+        <div v-if="currentStage === ImportStage.PREVIEW_FILE" class="preview-area">
          <VAlert
            type="info"
            variant="tonal"
            class="mb-4"
            :text="t('site.messages.previewData', { count: importData.length })"
          />
-          
+
          <!-- 预览列表 -->
          <VCard variant="outlined" class="mb-4">
            <VCardTitle class="text-subtitle-1">
-              {{ t('site.preview.title') }} ({{ t('site.preview.showing', { count: previewData.length, total: importData.length }) }})
+              {{ t('site.preview.title') }} ({{
+                t('site.preview.showing', { count: previewData.length, total: importData.length })
+              }})
            </VCardTitle>
            <VCardText>
              <VList>
@@ -262,12 +291,7 @@ watch(selectedFile, async (newFile) => {
                  <VListItemTitle>{{ site.name || t('site.preview.unnamed') }}</VListItemTitle>
                  <VListItemSubtitle>{{ site.url || t('site.preview.noUrl') }}</VListItemSubtitle>
                  <template #append>
-                    <VChip
-                      v-if="!validateSiteData(site)"
-                      size="small"
-                      color="error"
-                      variant="tonal"
-                    >
+                    <VChip v-if="!validateSiteData(site)" size="small" color="error" variant="tonal">
                      {{ t('site.preview.invalid') }}
                    </VChip>
                  </template>
@@ -276,34 +300,84 @@ watch(selectedFile, async (newFile) => {
            </VCardText>
          </VCard>

+          <!-- 操作按钮 -->
+          <div class="d-flex justify-end gap-2">
+            <VBtn variant="text" @click="resetToFileSelection">
+              {{ t('common.reset') }}
+            </VBtn>
+            <VBtn color="primary" @click="importSites" :disabled="importData.length === 0">
+              {{ t('site.actions.startImport') }}
+            </VBtn>
+          </div>
+        </div>
+
+        <!-- 阶段3：正在导入阶段 -->
+        <div v-if="currentStage === ImportStage.IMPORTING" class="importing-area">
+          <VAlert
+            type="info"
+            variant="tonal"
+            class="mb-4"
+            :text="t('site.messages.importing', { progress: importProgress })"
+          />
+
          <!-- 导入进度 -->
-          <div v-if="isImporting" class="import-progress">
-            <VProgressLinear
-              v-model="importProgress"
-              color="primary"
-              height="8"
-              rounded
-              class="mb-2"
+          <VCard variant="outlined" class="mb-4">
+            <VCardTitle class="text-subtitle-1">
+              {{ t('site.messages.importing', { progress: importProgress }) }}
+            </VCardTitle>
+            <VCardText>
+              <VProgressLinear v-model="importProgress" color="primary" height="8" rounded class="mb-2" />
+              <p class="text-caption text-center">{{ importProgress }}%</p>
+            </VCardText>
+          </VCard>
+        </div>
+
+        <!-- 阶段4：导入完成阶段 -->
+        <div v-if="currentStage === ImportStage.IMPORT_COMPLETE" class="result-area">
+          <!-- 成功导入的站点 -->
+          <div v-if="importSuccesses.length > 0" class="success-sites mb-4">
+            <VAlert
+              type="success"
+              variant="tonal"
+              class="mb-4"
+              :text="t('site.messages.importSuccess', { count: importSuccesses.length })"
            />
-            <p class="text-caption text-center">{{ t('site.messages.importing', { progress: importProgress }) }}</p>
+          </div>
+
+          <!-- 错误详情 -->
+          <div v-if="showErrorDetails && importErrors.length > 0" class="error-details">
+            <VAlert
+              type="error"
+              variant="tonal"
+              class="mb-4"
+              :text="t('site.messages.importErrors', { count: importErrors.length })"
+            />
+
+            <VCard variant="outlined" class="mb-4">
+              <VCardTitle class="text-subtitle-1 d-flex align-center justify-space-between">
+                {{ t('site.errors.title') }}
+              </VCardTitle>
+              <!-- 错误信息详情 -->
+              <VExpansionPanels class="mt-4">
+                <VExpansionPanel v-for="(error, index) in importErrors" :key="index">
+                  <VExpansionPanelTitle>
+                    {{ error.site.name || t('site.preview.unnamed') }} - {{ t('site.errors.details') }}
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <VAlert type="error" variant="text" :text="error.error" class="mb-0" />
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+              </VExpansionPanels>
+            </VCard>
          </div>

          <!-- 操作按钮 -->
          <div class="d-flex justify-end gap-2">
-            <VBtn
-              variant="text"
-              @click="showPreview = false"
-              :disabled="isImporting"
-            >
-              {{ t('common.back') }}
+            <VBtn variant="text" @click="resetToFileSelection">
+              {{ t('common.reset') }}
            </VBtn>
-            <VBtn
-              color="primary"
-              @click="importSites"
-              :loading="isImporting"
-              :disabled="importData.length === 0"
-            >
-              {{ t('site.actions.startImport') }}
+            <VBtn color="primary" @click="closeDialog(false)">
+              {{ t('common.close') }}
            </VBtn>
          </div>
        </div>
@@ -314,24 +388,36 @@ watch(selectedFile, async (newFile) => {

 <style scoped>
 .upload-area {
+  padding: 2rem;
+}
+
+.upload-zone {
+  padding: 2rem;
  border: 2px dashed #ccc;
  border-radius: 8px;
-  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
 }

-.upload-area.dragging {
+.upload-zone.dragging {
  border-color: rgb(var(--v-theme-primary));
  background-color: rgba(var(--v-theme-primary), 0.05);
 }

-.preview-area {
-  max-height: 60vh;
-  overflow-y: auto;
+.error-details {
+  margin-block: 1rem;
+  margin-inline: 0;
 }

-.import-progress {
-  margin: 1rem 0;
+.error-details .v-expansion-panels {
+  background: transparent;
 }
-</style>
+
+.border-success {
+  border-inline-start: 4px solid rgb(var(--v-theme-success));
+}
+
+.border-error {
+  border-inline-start: 4px solid rgb(var(--v-theme-error));
+}
+</style>
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -1033,8 +1033,8 @@ export default {
    actions: {
      add: 'Add Site',
      edit: 'Edit Site',
-      import: 'Batch Import',
-      export: 'Batch Export',
+      import: 'Import',
+      export: 'Export',
      startImport: 'Start Import',
    },
    messages: {
@@ -1047,6 +1047,7 @@ export default {
      importSuccess: 'Successfully imported {count} sites',
      importFailed: 'Failed to import sites',
      importPartialFailed: 'Import completed, {success} successful, {failed} failed',
+      importAllFailed: 'Import failed, all {count} sites failed to import',
      noDataToImport: 'No data to import',
      noValidData: 'No valid data',
      someInvalidData: 'Some data is invalid, valid data: {valid}/{total}',
@@ -1055,9 +1056,17 @@ export default {
      parseFileError: 'Failed to parse file, please check file format',
      previewData: 'Preview data ({count} sites)',
      importing: 'Importing... ({progress}%)',
+      importErrors: 'Import encountered {count} errors',
    },
    errors: {
      loadDownloader: 'Failed to load downloader settings',
+      title: 'Import Error Details',
+      failed: 'Import Failed',
+      details: 'Error Details',
+    },
+    results: {
+      successTitle: 'Successfully Imported Sites',
+      success: 'Import Success',
    },
    testConnectivity: 'Test Connectivity',
    testing: 'Testing ...',
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -1029,8 +1029,8 @@ export default {
    actions: {
      add: '新增站点',
      edit: '编辑站点',
-      import: '批量导入',
-      export: '批量导出',
+      import: '导入',
+      export: '导出',
      startImport: '开始导入',
    },
    messages: {
@@ -1043,6 +1043,7 @@ export default {
      importSuccess: '成功导入 {count} 个站点',
      importFailed: '站点导入失败',
      importPartialFailed: '导入完成，成功 {success} 个，失败 {failed} 个',
+      importAllFailed: '导入失败，{count} 个站点全部导入失败',
      noDataToImport: '没有数据可导入',
      noValidData: '没有有效的数据',
      someInvalidData: '部分数据无效，有效数据 {valid}/{total} 个',
@@ -1051,9 +1052,17 @@ export default {
      parseFileError: '文件解析失败，请检查文件格式',
      previewData: '预览数据 ({count} 个站点)',
      importing: '正在导入... ({progress}%)',
+      importErrors: '导入过程中出现 {count} 个错误',
    },
    errors: {
      loadDownloader: '加载下载器设置失败',
+      title: '导入错误详情',
+      failed: '导入失败',
+      details: '错误详情',
+    },
+    results: {
+      successTitle: '成功导入的站点',
+      success: '导入成功',
    },
    testConnectivity: '测试连通性',
    testing: '测试中 ...',
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -1028,8 +1028,8 @@ export default {
    actions: {
      add: '新增站點',
      edit: '編輯站點',
-      import: '批量導入',
-      export: '批量導出',
+      import: '導入',
+      export: '導出',
      startImport: '開始導入',
    },
    messages: {
@@ -1042,6 +1042,7 @@ export default {
      importSuccess: '成功導入 {count} 個站點',
      importFailed: '站點導入失敗',
      importPartialFailed: '導入完成，成功 {success} 個，失敗 {failed} 個',
+      importAllFailed: '導入失敗，{count} 個站點全部導入失敗',
      noDataToImport: '沒有數據可導入',
      noValidData: '沒有有效的數據',
      someInvalidData: '部分數據無效，有效數據 {valid}/{total} 個',
@@ -1050,9 +1051,17 @@ export default {
      parseFileError: '文件解析失敗，請檢查文件格式',
      previewData: '預覽數據 ({count} 個站點)',
      importing: '正在導入... ({progress}%)',
+      importErrors: '導入過程中出現 {count} 個錯誤',
    },
    errors: {
      loadDownloader: '加載下載器設置失敗',
+      title: '導入錯誤詳情',
+      failed: '導入失敗',
+      details: '錯誤詳情',
+    },
+    results: {
+      successTitle: '成功導入的站點',
+      success: '導入成功',
    },
    testConnectivity: '測試連通性',
    testing: '測試中 ...',
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -224,8 +224,8 @@ function selectFilter(value: string) {
 async function exportSites() {
  try {
    // 获取所有站点数据
-    const sites = await api.get('site/')
-    
+    const sites: Site[] = await api.get('site/')
+
    // 创建导出数据，只包含必要的字段
    const exportData = sites.map((site: Site) => ({
      name: site.name,
@@ -247,12 +247,12 @@ async function exportSites() {
      limit_count: site.limit_count,
      limit_seconds: site.limit_seconds,
      is_active: site.is_active,
-      pri: site.pri
+      pri: site.pri,
    }))
-    
+
    // 创建Blob对象
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
-    
+
    // 创建下载链接
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
@@ -262,7 +262,7 @@ async function exportSites() {
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
-    
+
    // 显示成功提示
    $toast.success(t('site.messages.exportSuccess'))
  } catch (error) {
@@ -302,14 +302,14 @@ useDynamicButton({
      <div class="d-flex align-center gap-2">
        <!-- 导入按钮 -->
        <VBtn :icon="display.smAndDown.value" variant="text" color="success" @click="siteImportDialog = true">
-          <VIcon icon="mdi-upload" />
+          <VIcon icon="mdi-import" />
          <span v-if="!display.smAndDown.value" class="ml-2">
            {{ t('site.actions.import') }}
          </span>
        </VBtn>
        <!-- 导出按钮 -->
-        <VBtn :icon="display.smAndDown.value" variant="text" color="primary" @click="exportSites">
-          <VIcon icon="mdi-download" />
+        <VBtn :icon="display.smAndDown.value" variant="text" color="warning" @click="exportSites">
+          <VIcon icon="mdi-export" />
          <span v-if="!display.smAndDown.value" class="ml-2">
            {{ t('site.actions.export') }}
          </span>
@@ -416,7 +416,7 @@ useDynamicButton({

  <!-- 统计信息弹窗 -->
  <SiteStatisticsDialog v-if="siteStatsDialog" v-model="siteStatsDialog" :sites="siteList" />
-  
+
  <!-- 导入站点弹窗 -->
  <SiteImportDialog v-if="siteImportDialog" v-model="siteImportDialog" @import-success="fetchData" />
 </template>