包裹按钮
* - 有固定底部时：使用 el-dialog 的 footer slot
*/
:root {
--dialog-radius: 8px;
--dialog-header-padding: 18px 20px 16px;
--dialog-body-padding: 20px;
--dialog-footer-padding: 14px 20px;
--dialog-border-color: #EEF0F4;
--dialog-title-size: 16px;
--dialog-title-weight: 600;
--dialog-title-color: #1D2129;
--dialog-text-color: #4E5969;
--dialog-text-secondary: #86909C;
--dialog-primary: #3370FF;
--dialog-primary-light: #ECF2FF;
--dialog-label-color: #4E5969;
--dialog-bg: #FFFFFF;
--dialog-mask-bg: rgba(0, 0, 0, 0.45);
--dialog-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
--dialog-scrollbar-bg: #F2F3F5;
--dialog-scrollbar-thumb: #C9CDD4;
--dialog-scrollbar-thumb-hover: #A9AEB8;
}
/* ================================================
基础弹窗样式 (Base Dialog Styles)
================================================ */
.el-dialog {
border-radius: var(--dialog-radius) !important;
--el-dialog-border-radius: var(--dialog-radius);
--el-dialog-margin-top: 0;
margin: 0 !important;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
box-shadow: var(--dialog-shadow) !important;
background: var(--dialog-bg);
overflow: hidden;
}
.el-message-box {
border-radius: var(--dialog-radius) !important;
--el-messagebox-border-radius: var(--dialog-radius);
box-shadow: var(--dialog-shadow) !important;
}
.v-modal,
.el-overlay {
background-color: var(--dialog-mask-bg) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.el-overlay-dialog,
.el-dialog__wrapper {
display: flex !important;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
/* Header */
.el-dialog__header {
margin: 0;
padding: 20px 20px 12px !important;
border-bottom: none;
background: var(--dialog-bg);
flex-shrink: 0;
}
.el-dialog__header .el-dialog__title,
.el-dialog__header > .el-dialog__title {
font-size: var(--dialog-title-size) !important;
font-weight: var(--dialog-title-weight);
color: var(--dialog-title-color);
line-height: 1.5;
display: flex !important;
align-items: center;
letter-spacing: 0.2px;
}
.el-dialog__headerbtn {
top: 16px !important;
right: 16px !important;
width: 28px;
height: 28px;
border-radius: 6px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.el-dialog__headerbtn:hover {
background: var(--dialog-primary-light);
}
.el-dialog__headerbtn .el-dialog__close {
font-size: 15px !important;
color: var(--dialog-text-secondary) !important;
transition: color 0.2s ease;
}
.el-dialog__headerbtn:hover .el-dialog__close {
color: var(--dialog-primary) !important;
}
/* Body */
.el-dialog__body {
padding: var(--dialog-body-padding);
flex: 1;
overflow-y: auto;
color: var(--dialog-text-color);
font-size: 14px;
line-height: 1.6;
}
/* Footer */
.el-dialog__footer {
padding: 12px 20px 20px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
background: var(--dialog-bg);
}
.el-dialog__footer .el-button + .el-button {
margin-left: 0 !important;
}
/* ================================================
类型〇：简易弹窗 (Simple Dialog) - 参照 prototype.html 新建文件夹弹窗
适用场景：单/双字段的轻量弹窗（新建文件夹/编辑文件夹/新建子文件夹等），560px 宽
使用方式：
================================================ */
.dialog-simple {
--el-dialog-width: 560px !important;
border-radius: var(--dialog-radius) !important;
overflow: hidden;
}
/* 简易弹窗内容区：与 prototype.html folder-dialog 完全一致 */
.dialog-simple .el-dialog__header {
margin: 0;
padding: 16px 20px !important;
border-bottom: 1px solid var(--dialog-border-color);
background: var(--dialog-bg);
}
.dialog-simple .el-dialog__title {
font-size: 16px !important;
font-weight: 600;
color: #1D2129;
line-height: 1.5;
}
.dialog-simple .el-dialog__headerbtn {
top: 14px !important;
right: 16px !important;
width: 28px;
height: 28px;
font-size: 15px;
}
.dialog-simple .el-dialog__body {
padding: 24px;
}
.dialog-simple .el-dialog__footer {
padding: 12px 24px 20px;
border-top: none;
background: transparent;
justify-content: flex-end;
}
/* 简易弹窗内容区：参照 prototype.html folder-dialog */
.folder-dialog .el-dialog__body {
padding: 24px;
}
/* 简易弹窗底部按钮组：参照 prototype.html dialog-footer */
.folder-dialog .dialog-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
width: 100%;
}
.folder-form-section {
margin-bottom: 20px;
}
.folder-form-section:last-of-type {
margin-bottom: 0;
}
.folder-form-section .section-title {
font-size: 14px;
font-weight: 500;
color: #374151;
margin-bottom: 12px;
line-height: 1.4;
}
.folder-name-wrapper {
flex: 1;
}
.folder-name-wrapper .el-input__wrapper {
border-radius: 8px;
}
.folder-name-wrapper .el-input.is-error .el-input__wrapper {
box-shadow: 0 0 0 1px #F56C6C inset;
}
.folder-name-wrapper .error-message {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 12px;
color: #F56C6C;
line-height: 1.5;
}
.folder-name-wrapper .error-message .el-icon {
font-size: 14px;
}
.folder-input .el-input__wrapper {
border-radius: 8px;
}
.folder-input .el-input__inner {
height: 40px;
}
.folder-input .el-textarea__inner {
border-radius: 8px;
resize: none;
}
.folder-input .el-input__count {
font-size: 12px;
color: #9CA3AF;
}
/* ================================================
类型一：简洁底部弹窗 (Compact Footer Dialog)
适用场景：内容较短的表单弹窗，底部无分隔线，间距紧凑
使用方式：