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 committed 2026-08-27 09:31:49 +08:00
1 parent e74ecea6aa
commit b322c930fa
11 files changed
+186 -109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WonderQ-Admin-UI-Vue/src/pages/HomePage.vue
+14 -6
View File
@@ -81,8 +81,7 @@ async function loadConfig() {
}
}
function closeEditor() {
if (saving.value) return;
function resetEditorState() {
editorOpen.value = false;
siteEditorOpen.value = false;
editingId.value = null;
@@ -90,6 +89,15 @@ function closeEditor() {
siteDraft.value = {};
}
function closeEditor() {
if (saving.value) return;
resetEditorState();
}
function closeEditorAfterSave() {
resetEditorState();
}
function startCreate() {
if (!auth.hasPermission("admin:site-config")) return;
editingId.value = null;
@@ -135,7 +143,7 @@ async function saveSiteItem() {
const next = siteItems.value[activeSiteModule.value].filter((item) => item.id !== saved.id);
siteItems.value[activeSiteModule.value] = [...next, saved].sort((left, right) => ("sortOrder" in left ? left.sortOrder : 0) - ("sortOrder" in right ? right.sortOrder : 0));
ElMessage.success(editingId.value ? "配置已保存" : "配置已新增");
closeEditor();
closeEditorAfterSave();
} catch (error) { ElMessage.error(error instanceof Error ? error.message : "配置保存失败"); } finally { saving.value = false; }
}
@@ -149,7 +157,7 @@ async function saveHomeItem() {
const saved = await saveHomeByKind(kind);
homeItems.value[kind] = [...activeHomeItems.value.filter((item) => item.id !== saved.id), saved].sort((left, right) => left.sortOrder - right.sortOrder) as typeof activeHomeItems.value;
ElMessage.success(editingId.value ? "首页配置已保存" : "首页配置已新增");
closeEditor();
closeEditorAfterSave();
} catch (error) { ElMessage.error(error instanceof Error ? error.message : "首页配置保存失败"); } finally { saving.value = false; }
}
@@ -248,8 +256,8 @@ onMounted(loadConfig);
<el-table-column label="操作" width="250" fixed="right"><template #default="{ row, $index }"><el-button v-permission="'admin:site-config'" link type="primary" @click="startEdit(row)">编辑</el-button><el-button v-permission="'admin:site-config'" link :disabled="$index === 0 || reorderingId === row.id" @click="moveItem(row, -1)">上移</el-button><el-button v-permission="'admin:site-config'" link :disabled="$index === activeItems.length - 1 || reorderingId === row.id" @click="moveItem(row, 1)">下移</el-button><el-button v-permission="'admin:site-config'" link type="danger" :loading="deletingId === row.id" @click="removeItem(row)">删除</el-button></template></el-table-column>
</el-table>
</el-card>
<el-drawer v-model="siteEditorOpen" class="site-config-drawer" size="min(560px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!saving"><SiteConfigEditor v-if="siteEditorOpen" :module="activeSiteModule" :draft="siteDraft" :creating="creating" :saving="saving" @update:draft="siteDraft = $event" @save="saveSiteItem" @cancel="closeEditor" /></el-drawer>
<el-drawer v-model="editorOpen" class="site-config-drawer" size="min(560px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!saving"><HomeContentEditor v-if="editorOpen" :kind="activeHomeKind" :draft="homeDraft" :categories="categories" :creating="creating" :saving="saving" @update:draft="homeDraft = $event" @save="saveHomeItem" @cancel="closeEditor" /></el-drawer>
<el-drawer v-model="siteEditorOpen" class="site-config-drawer editor-drawer" size="min(560px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!saving"><SiteConfigEditor v-if="siteEditorOpen" :module="activeSiteModule" :draft="siteDraft" :creating="creating" :saving="saving" @update:draft="siteDraft = $event" @save="saveSiteItem" @cancel="closeEditor" /></el-drawer>
<el-drawer v-model="editorOpen" class="site-config-drawer editor-drawer" size="min(560px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!saving"><HomeContentEditor v-if="editorOpen" :kind="activeHomeKind" :draft="homeDraft" :categories="categories" :creating="creating" :saving="saving" @update:draft="homeDraft = $event" @save="saveHomeItem" @cancel="closeEditor" /></el-drawer>
</template>
</div>
</template>