From 55fae1bd177183312881d21bff6ef328721d0578 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Mon, 3 Nov 2025 02:31:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=91=E5=B8=83=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E5=88=B0=E5=B8=82=E5=9C=BA=E7=9A=84=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../local_ai_node/PublishProgressModal.vue    | 135 +++++++++++++++++-
 1 file changed, 130 insertions(+), 5 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/PublishProgressModal.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/PublishProgressModal.vue
index 2d21f32..2737474 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/PublishProgressModal.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/PublishProgressModal.vue
@@ -3,8 +3,9 @@
     v-model:show="show" 
     preset="card" 
     style="width: 600px"
-    :mask-closable="false"
-    :close-on-esc="false"
+    :mask-closable="status !== 'processing'"
+    :close-on-esc="status !== 'processing'"
+    @update:show="handleMaskClose"
   >
     <template #header>
       <div style="display: flex; align-items: center; gap: 8px">
@@ -59,28 +60,33 @@
     </div>
     
     <template #action>
-      <n-space>
+      <div class="dialog-actions">
         <n-button 
           v-if="status === 'error' || status === 'success'" 
+          type="default"
+          size="medium"
           @click="handleClose"
+          class="action-btn-close"
         >
           {{ t('Close') }}
         </n-button>
         <n-button 
           v-if="status === 'error'" 
           type="primary"
+          size="medium"
           @click="handleRetry"
+          class="action-btn-retry"
         >
           {{ t('Retry') }}
         </n-button>
-      </n-space>
+      </div>
     </template>
   </n-modal>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { NModal, NIcon, NButton, NSpace } from 'naive-ui'
+import { NModal, NIcon, NButton } from 'naive-ui'
 import { Icon } from '@iconify/vue'
 import { t } from '@/shared/i18n'
 
@@ -120,6 +126,18 @@ function handleClose() {
   }
 }
 
+function handleMaskClose(value: boolean) {
+  // 如果用户通过点击遮罩或按ESC关闭，且不在处理中，则允许关闭
+  if (!value && props.status !== 'processing') {
+    show.value = false
+  } else if (!value && props.status === 'processing') {
+    // 处理中时不允许关闭，恢复显示
+    show.value = true
+  } else {
+    show.value = value
+  }
+}
+
 function handleRetry() {
   emit('retry')
 }
@@ -204,5 +222,112 @@ function handleRetry() {
     transform: rotate(360deg);
   }
 }
+
+/* 对话框操作按钮布局 - 右下角对齐 */
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+}
+
+/* 关闭按钮 - 与返回按钮样式一致 */
+.action-btn-close {
+  background: #f3f4f6 !important;
+  color: #374151 !important;
+  border: 1px solid rgba(0, 0, 0, 0.08) !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.action-btn-close :deep(.n-button__border),
+.action-btn-close :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-close:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.action-btn-close:hover:not(:disabled) :deep(.n-button__border),
+.action-btn-close:hover:not(:disabled) :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+/* 重试按钮 - 与保存按钮样式一致 */
+.action-btn-retry {
+  background: #e6f8f0 !important;
+  border: 1px solid #1fc76f !important;
+  color: #0d684b !important;
+}
+
+.action-btn-retry :deep(.n-button__border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-retry :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-retry:hover {
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
+}
+
+.action-btn-retry:hover :deep(.n-button__border),
+.action-btn-retry:hover :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-retry:focus {
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.2) !important;
+}
+
+.action-btn-retry:focus :deep(.n-button__border),
+.action-btn-retry:focus :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-retry:active {
+  background: #1fc76f !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
+}
+
+.action-btn-retry:active :deep(.n-button__border),
+.action-btn-retry:active :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.action-btn-retry:disabled {
+  background: #f1f5f9 !important;
+  border: 1px solid #e2e8f0 !important;
+  border-color: #e2e8f0 !important;
+  color: #94a3b8 !important;
+  opacity: 0.6 !important;
+  cursor: not-allowed !important;
+}
+
+.action-btn-retry:disabled :deep(.n-button__border),
+.action-btn-retry:disabled :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
 </style>