jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jingrow 2025-11-03 02:31:21 +08:00
parent ad559a237f
commit 55fae1bd17
1 changed files with 130 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
apps/jingrow/frontend/src/views/pagetype/local_ai_node/PublishProgressModal.vue
View File

@ -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>