fix: 优化自动导入异常状态展示

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

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) {