From 50e147087a2695f79b7ca486c7ea317a99eacb74 Mon Sep 17 00:00:00 2001
From: danial <danial@gmail.com>
Date: Tue, 28 Oct 2025 17:36:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(jd-order):=20=E6=B7=BB=E5=8A=A0=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=AF=BC=E5=85=A5=E5=A4=B1=E8=B4=A5=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增失败详情弹窗，展示具体失败行号、账户名称和错误原因
- 优化错误提示逻辑，区分全部失败和部分失败的情况
- 调整cookie验证结果展示方式，改善用户体验
- 重构手动提交逻辑，支持表单验证后控制模态框关闭时机
- 修复提交成功后模态框未正确关闭的问题
---
 .../cookie/components/batch-import-modal.vue  | 115 +++++++++++++++---
 .../cookie/components/cookie-modal.vue        |  25 ++--
 2 files changed, 116 insertions(+), 24 deletions(-)

diff --git a/src/views/jd-order/cookie/components/batch-import-modal.vue b/src/views/jd-order/cookie/components/batch-import-modal.vue
index da9365a..02f1650 100644
--- a/src/views/jd-order/cookie/components/batch-import-modal.vue
+++ b/src/views/jd-order/cookie/components/batch-import-modal.vue
@@ -268,6 +268,67 @@
       </div>
     </div>
   </a-modal>
+
+  <!-- 失败详情弹窗 -->
+  <a-modal
+    v-model:visible="showErrorModal"
+    title="批量添加失败详情"
+    :footer="false"
+    width="800px"
+    @cancel="showErrorModal = false"
+  >
+    <div class="error-modal-content">
+      <a-alert
+        type="error"
+        message="部分Cookie添加失败"
+        :description="`共 ${failedItemsList.length} 个Cookie添加失败，请查看具体原因`"
+        show-icon
+        :closable="false"
+        style="margin-bottom: 16px"
+      />
+
+      <a-table
+        :data="failedItemsList"
+        :pagination="{ pageSize: 10 }"
+        size="small"
+        :columns="[
+          {
+            title: '行号',
+            dataIndex: 'lineNumber',
+            width: 80
+          },
+          {
+            title: '账户名称',
+            dataIndex: 'accountName',
+            width: 150,
+            ellipsis: true,
+            tooltip: true
+          },
+          {
+            title: '失败原因',
+            dataIndex: 'errorMsg',
+            ellipsis: true,
+            tooltip: true
+          }
+        ]"
+      >
+        <template #lineNumber="{ record }">
+          第{{ record.lineNumber }}行
+        </template>
+        <template #errorMsg="{ record }">
+          <a-tag color="red" size="small">
+            {{ record.errorMsg }}
+          </a-tag>
+        </template>
+      </a-table>
+
+      <div class="error-actions">
+        <a-button type="primary" @click="showErrorModal = false">
+          我知道了
+        </a-button>
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
@@ -317,6 +378,8 @@ const validationSummary = ref<{
   hasValid: boolean;
   text: string;
 } | null>(null);
+const showErrorModal = ref(false);
+const failedItemsList = ref<any[]>([]);
 
 // 表单数据
 const formModel = reactive({
@@ -489,6 +552,8 @@ const handleCancel = (): void => {
   isFullscreen.value = false;
   validating.value = false;
   validationSummary.value = null;
+  showErrorModal.value = false;
+  failedItemsList.value = [];
 };
 
 const handleSubmit = async (): Promise<boolean> => {
@@ -545,22 +610,17 @@ const handleSubmit = async (): Promise<boolean> => {
         message = `${failedCount} 个Cookie添加失败`;
       }
 
-      // 如果有具体的失败原因，显示详细信息
+      // 如果有具体的失败原因，准备显示详细信息
       if (failedItems.length > 0) {
-        const errorDetails = failedItems
-          .map(item => {
-            const lineNumber = (item.index || 0) + 1;
-            const accountName = item.accountName || `账号${lineNumber}`;
-            const errorMsg = item.errorMsg || '未知错误';
-            return `${accountName}(第${lineNumber}行): ${errorMsg}`;
-          })
-          .join('\n');
+        // 准备失败详情数据
+        failedItemsList.value = failedItems.map(item => ({
+          lineNumber: (item.index || 0) + 1,
+          accountName: item.accountName || `账号${(item.index || 0) + 1}`,
+          errorMsg: item.errorMsg || '未知错误'
+        }));
 
-        // 显示错误详情弹窗
-        console.error('批量添加失败详情:', errorDetails);
-
-        // 可以考虑显示一个更友好的错误提示，这里先简单处理
-        message += `。失败原因请查看控制台`;
+        // 修改提示消息，引导用户查看详情
+        message += `，点击查看失败详情`;
       }
     }
 
@@ -568,10 +628,23 @@ const handleSubmit = async (): Promise<boolean> => {
       if (successCount > 0 && failedCount === 0) {
         Message.success(message);
       } else if (successCount === 0 && failedCount > 0) {
-        Message.error(message);
+        // 全部失败，显示错误消息并引导查看详情
+        Message.error({
+          content: message,
+          duration: 5000,
+          closable: true
+        });
+        // 显示失败详情弹窗
+        showErrorModal.value = true;
       } else {
+        // 部分成功，显示警告消息
         Message.warning(message);
       }
+
+      // 如果有失败项，显示详情弹窗
+      if (failedItems.length > 0) {
+        showErrorModal.value = true;
+      }
     }
 
     // 只要有成功的就触发success事件
@@ -881,6 +954,18 @@ const handleSubmit = async (): Promise<boolean> => {
   display: flex;
 }
 
+.error-modal-content {
+  padding: 16px 0;
+}
+
+.error-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border-2);
+}
+
 /* 全屏模式样式调整 */
 :deep(.arco-modal-fullscreen) .batch-import-container {
   height: calc(100vh - 100px);
diff --git a/src/views/jd-order/cookie/components/cookie-modal.vue b/src/views/jd-order/cookie/components/cookie-modal.vue
index 5f6bbd4..71d0637 100644
--- a/src/views/jd-order/cookie/components/cookie-modal.vue
+++ b/src/views/jd-order/cookie/components/cookie-modal.vue
@@ -31,8 +31,7 @@
     <div v-if="validateResult" class="validate-result">
       <a-alert
         :type="validateResult.isValid ? 'success' : 'error'"
-        :message="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
-        :description="validateResult.message"
+        :title="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
         show-icon
         :closable="false"
       >
@@ -40,6 +39,7 @@
           <icon-check-circle v-if="validateResult.isValid" />
           <icon-close-circle v-else />
         </template>
+        {{ validateResult.message }}
       </a-alert>
     </div>
 
@@ -64,12 +64,7 @@
           <a-button
             type="primary"
             :loading="loading"
-            @click="
-              () =>
-                formRef.value
-                  ?.validate()
-                  .then(res => !res && handleSubmit(() => {}))
-            "
+            @click="handleManualSubmit"
           >
             {{ cookieId ? '修改' : '添加' }}
           </a-button>
@@ -215,6 +210,19 @@ const handleValidate = async (): Promise<void> => {
   }
 };
 
+// 手动提交表单（用于底部按钮）
+const handleManualSubmit = (): void => {
+  formRef.value?.validate().then((res: any) => {
+    if (res) return;
+    // 调用原有的提交逻辑，但不关闭模态框
+    handleSubmit(closed => {
+      if (closed) {
+        emit('update:visible', false);
+      }
+    });
+  });
+};
+
 // 提交表单
 const handleSubmit = (done: (closed: boolean) => void) => {
   formRef.value?.validate().then(async (res: any) => {
@@ -249,7 +257,6 @@ const handleSubmit = (done: (closed: boolean) => void) => {
       Message.success(props.cookieId ? '修改成功' : '添加成功');
       emit('success');
       done(true);
-      emit('update:visible', false);
     } catch (error) {
       console.error('提交失败:', error);
       Message.error(props.cookieId ? '修改失败' : '添加失败');