duanshuwen/WonderQ-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin-ui): 统一重构抽屉编辑器布局，修复废弃API用法

Browse Source 
为所有抽屉式编辑器组件添加统一的样式规范，实现内容区域可滚动、操作栏固定于底部的布局，适配移动端安全区域间距。替换布局设置抽屉中el-radio-button的废弃label属性为value属性以消除组件警告。重构首页配置页面的编辑器关闭逻辑，拆分状态重置与关闭操作优化代码复用。新增单元测试用例验证抽屉编辑器的布局一致性。
This commit is contained in:
duanshuwen
2026-08-27 09:31:49 +08:00
parent e74ecea6aa
commit b322c930fa
11 changed files with 186 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
WonderQ-Admin-UI-Vue/src/styles.css
View File

@@ -131,7 +131,13 @@ button, input { font: inherit; }
.site-image-preview { display: block; width: 100%; max-width: 260px; height: 132px; margin-top: 12px; border-radius: 9px; background: #f1f5f9; }
.editor-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor-sort-item { margin-top: 20px; }
.editor-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding: 14px 0 4px; border-top: 1px solid var(--line); background: var(--surface); }
.editor-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; margin-top: 0; padding: 14px 8px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.editor-drawer .el-drawer__body { display: flex; min-height: 0; flex-direction: column; padding: 0; overflow: hidden; }
.drawer-editor-form { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; padding: 4px 4px 0; }
.drawer-editor-form__content { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 0 8px 20px; scrollbar-gutter: stable; }
.settings-drawer .el-drawer__body { display: flex; min-height: 0; flex-direction: column; }
.settings-drawer .settings-form { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.settings-drawer .el-drawer__footer { flex: 0 0 auto; }
.home-content-panel .panel-heading { margin-bottom: 18px; }
.home-content-panel .panel-heading > div { display: flex; align-items: baseline; gap: 10px; }
.home-content-panel .panel-heading span { color: var(--muted); font-size: 12px; font-weight: 400; }