优化发布节点到市场的进度弹窗页面

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"
+    :mask-closable="status !== 'processing'"
-    :close-on-esc="false"
+    :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>