From 1e59063c37a097eee7d4189555f5ebf6a1200c48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Fri, 4 Sep 2026 11:29:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5=E5=BC=82=E5=B8=B8=E7=8A=B6=E6=80=81=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DocumentImportBatchStatus.test.ts         |  1 +
 .../DocumentImportBatchStatus.vue             | 95 ++++++++++++++++---
 2 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.test.ts b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.test.ts
index f33eef97..d3869223 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.test.ts
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.test.ts
@@ -293,6 +293,7 @@ describe('documentImportBatchStatus', () => {
 
     const alert = wrapper.find('.batch-status__alert');
     expect(alert.exists()).toBe(true);
+    expect(alert.attributes('role')).toBe('alert');
     expect(alert.text()).toContain('缓存与消息服务异常，自动导入已中断');
     expect(alert.text()).toContain('redis_unavailable');
     expect(wrapper.find('.batch-status__count').text()).toContain('2 / 2');
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.vue
index 6ca2d10e..7a4cfa3e 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentImportBatchStatus.vue
@@ -351,20 +351,20 @@ watch(
     >
       {{ $t('documentCollection.importDoc.continueBatch') }}
     </ElButton>
-    <ElButton
+    <button
+      type="button"
       class="batch-status__close"
-      :icon="Close"
-      circle
-      text
-      size="small"
       :aria-label="$t('documentCollection.importDoc.dismissBatchStatus')"
       :title="$t('documentCollection.importDoc.dismissBatchStatus')"
       @click="dismissBatchStatus"
-    />
+    >
+      <Close aria-hidden="true" />
+    </button>
     <ElAlert
       v-if="batch.status === 'INTERRUPTED'"
       class="batch-status__alert"
       type="error"
+      role="alert"
       :closable="false"
       show-icon
       :title="
@@ -377,6 +377,7 @@ watch(
       <ElAlert
         class="batch-status__alert"
         type="error"
+        role="alert"
         :closable="false"
         show-icon
         :title="loadError"
@@ -394,6 +395,7 @@ watch(
     <ElAlert
       class="batch-status__alert"
       type="error"
+      role="alert"
       :closable="false"
       show-icon
       :title="loadError"
@@ -409,14 +411,14 @@ watch(
   display: flex;
   flex: 1 1 360px;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--space-3);
   align-items: center;
   min-width: min(360px, 100%);
   max-width: 620px;
-  padding: 8px 12px;
+  padding: var(--space-2) var(--space-3);
   background: hsl(var(--surface-contrast-soft) / 74%);
   border: 1px solid var(--el-border-color-lighter);
-  border-radius: 12px;
+  border-radius: var(--radius-toolbar);
 }
 
 .batch-status__summary {
@@ -474,26 +476,93 @@ watch(
 }
 
 .batch-status__close {
-  flex-shrink: 0;
+  display: inline-flex;
+  flex: 0 0 var(--space-8);
+  align-items: center;
+  justify-content: center;
+  width: var(--space-8);
+  height: var(--space-8);
+  padding: var(--space-2);
+  color: hsl(var(--text-muted));
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-control);
+  transition:
+    color var(--motion-duration-fast) var(--motion-ease-standard),
+    background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.batch-status__close:hover {
+  color: hsl(var(--text-strong));
+  background: hsl(var(--surface-panel) / 72%);
+}
+
+.batch-status__close:active {
+  background: hsl(var(--surface-panel));
+}
+
+.batch-status__close:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 45%);
+  outline-offset: 2px;
 }
 
 .batch-status__alert {
   flex: 1 0 100%;
+  align-items: flex-start;
+  min-width: 0;
+  padding: var(--space-1) 0 0;
+  background: transparent;
+}
+
+.batch-status__alert :deep(.el-alert__icon) {
+  width: var(--space-4);
+  margin-top: 1px;
+  margin-right: 0;
+  font-size: var(--space-4);
+  opacity: 0.86;
+}
+
+.batch-status__alert :deep(.el-alert__content) {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0 var(--space-2);
+  min-width: 0;
+  padding-left: var(--space-2);
+}
+
+.batch-status__alert :deep(.el-alert__title),
+.batch-status__alert :deep(.el-alert__description) {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.batch-status__alert :deep(.el-alert__title) {
+  font-weight: 500;
+}
+
+.batch-status__alert :deep(.el-alert__description) {
+  margin: 0;
+  color: var(--el-text-color-secondary);
 }
 
 .batch-status__load-error {
   display: flex;
   flex: 1 0 100%;
-  gap: 8px;
+  gap: var(--space-2);
   align-items: center;
 }
 
 .batch-status__load-error .batch-status__alert {
-  flex-basis: auto;
+  flex: 1 1 auto;
+  padding-top: 0;
 }
 
 .batch-status--error .batch-status__alert {
-  flex-basis: 320px;
+  flex: 1 1 320px;
+  padding-top: 0;
 }
 
 @media (max-width: 900px) {