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-01 21:37:12 +08:00
parent 5fbd5bbc7e
commit 9c50b5921b
1 changed files with 82 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
apps/jingrow/frontend/src/core/features/flows/FlowBuilderContainer.vue
View File

@ -12,7 +12,14 @@
</template>
{{ t('Back') }}
</n-button>
<n-button size="small" type="primary" @click="handleSave">{{ t('Save') }}</n-button>
<n-button size="small" type="primary" @click="handleSave" class="save-btn-brand">
<template #icon>
<n-icon>
<Icon icon="tabler:check" />
</n-icon>
</template>
{{ t('Save') }}
</n-button>
</n-space>
</div>
</div>
@ -122,4 +129,78 @@ const handleBack = () => {
.flow-builder-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; border-bottom: 1px solid #e5e7eb; background: white; min-height: 40px; }
.header-left .title { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.flow-builder-content { flex: 1; overflow: hidden; }
/* 保存按钮 - 使用柔和的品牌色系，与详情页保存按钮一致 */
.save-btn-brand {
background: #e6f8f0 !important;
border: 1px solid #1fc76f !important;
color: #0d684b !important;
}
.save-btn-brand :deep(.n-button__border) {
border: none !important;
border-color: transparent !important;
}
.save-btn-brand :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.save-btn-brand: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;
}
.save-btn-brand:hover :deep(.n-button__border),
.save-btn-brand:hover :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.save-btn-brand: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;
}
.save-btn-brand:focus :deep(.n-button__border),
.save-btn-brand:focus :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.save-btn-brand: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;
}
.save-btn-brand:active :deep(.n-button__border),
.save-btn-brand:active :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.save-btn-brand:disabled {
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-color: #e2e8f0 !important;
color: #94a3b8 !important;
opacity: 0.6 !important;
cursor: not-allowed !important;
}
.save-btn-brand:disabled :deep(.n-button__border),
.save-btn-brand:disabled :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
</style>