style: ElMessageBox 确认对话框对齐全局设计规范(双主题卡片/胶囊按钮/危险操作红色)

This commit is contained in:
DuMate
2026-09-27 01:06:31 +08:00
parent 77e3efd07b
commit ce94f9793b
4 changed files with 77 additions and 2 deletions
+74
View File
@@ -307,6 +307,80 @@ html[data-theme="dark"] .ambient::after {
.el-message.el-message--error .el-message__icon { color: var(--red) !important; }
.el-message.el-message--info .el-message__icon { color: var(--blue) !important; }
/* —— Element Plus MessageBox 全局覆盖:确认对话框对齐自绘 cd-dialog 风格 —— */
.el-message-box {
background: var(--card) !important;
border: 1.5px solid var(--line) !important;
border-radius: 22px !important;
box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .35) !important;
padding-bottom: 0 !important;
}
.el-message-box__header {
padding: 18px 22px 12px !important;
}
.el-message-box__title {
color: var(--ink) !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.el-message-box__headerbtn .el-message-box__close {
color: var(--ink-faint) !important;
font-size: 16px !important;
}
.el-message-box__headerbtn:hover .el-message-box__close { color: var(--ink) !important; }
.el-message-box__status.el-icon-warning { color: var(--orange) !important; }
.el-message-box__content {
padding: 2px 22px 12px !important;
color: var(--ink-dim) !important;
font-size: 13.5px !important;
}
.el-message-box__message { color: var(--ink-dim) !important; line-height: 1.7; }
.el-message-box__message b { color: var(--ink); }
.el-message-box__btns {
padding: 14px 22px 16px !important;
border-top: 1px solid var(--line) !important;
}
.el-message-box__btns .el-button {
border: none !important;
border-radius: 99px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 8px 18px !important;
height: auto !important;
transition: .18s;
}
.el-message-box__btns .el-button + .el-button { margin-left: 10px !important; }
/* 取消(次要)按钮:中性底,同 .btn.unignore */
.el-message-box__btns .el-button:not(.el-button--primary) {
background: var(--num-bg) !important;
color: var(--ink-dim) !important;
}
.el-message-box__btns .el-button:not(.el-button--primary):hover {
background: color-mix(in srgb, var(--num-bg), var(--ink) 8%) !important;
color: var(--ink) !important;
}
/* 主操作按钮:橙渐变,同 .btn.clean */
.el-message-box__btns .el-button--primary {
background: var(--grad-main) !important;
color: #fff !important;
box-shadow: 0 8px 16px -6px rgba(255, 140, 0, .55) !important;
}
.el-message-box__btns .el-button--primary:hover {
background: var(--grad-main) !important;
transform: translateY(-1px);
box-shadow: 0 12px 22px -6px rgba(255, 140, 0, .65) !important;
}
/* 危险操作(删除)按钮:红,同 .btn.remove(经 confirmButtonClass: 'is-danger' 附加) */
.el-message-box__btns .el-button.is-danger {
background: var(--red-soft) !important;
color: var(--red) !important;
box-shadow: none !important;
}
.el-message-box__btns .el-button.is-danger:hover {
background: var(--red) !important;
color: #fff !important;
}
/* —— 响应式断点(桌面 ≥1024 / 平板 768~1023 / 手机 <768) —— */
@media (max-width: 1023px) {
.page { padding: 20px 18px 40px; }
+1 -1
View File
@@ -59,7 +59,7 @@ async function doDeleteVersion(pkg, version) {
await ElMessageBox.confirm(
`确定删除 ${pkg.name} 的版本 ${version} 吗?删除后不可恢复。`,
'删除版本',
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', confirmButtonClass: 'is-danger' },
)
} catch {
return // 用户取消
+1 -1
View File
@@ -267,7 +267,7 @@ async function doDeleteVersion(pkg, version) {
await ElMessageBox.confirm(
`确定删除 ${pkg.name} 的版本 ${version} 吗?删除后不可恢复。`,
'删除版本',
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', confirmButtonClass: 'is-danger' },
)
} catch {
return // 用户取消
+1
View File
@@ -228,6 +228,7 @@ async function del(row) {
type: 'warning',
confirmButtonText: '确认删除',
cancelButtonText: '取消',
confirmButtonClass: 'is-danger',
dangerouslyUseHTMLString: true,
})
} catch { return }