From b322c930fa9cf3db2110fee3d187d4065bedafea Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 27 Aug 2026 09:31:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin-ui):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=8A=BD=E5=B1=89=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=BA=9F=E5=BC=83?=
 =?UTF-8?q?API=E7=94=A8=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为所有抽屉式编辑器组件添加统一的样式规范，实现内容区域可滚动、操作栏固定于底部的布局，适配移动端安全区域间距。替换布局设置抽屉中el-radio-button的废弃label属性为value属性以消除组件警告。重构首页配置页面的编辑器关闭逻辑，拆分状态重置与关闭操作优化代码复用。新增单元测试用例验证抽屉编辑器的布局一致性。
---
 .../concierge/ConciergeAdvisorEditor.vue      | 18 +++--
 .../src/components/home/HomeContentEditor.vue | 44 +++++-----
 .../src/components/layout/SettingsDrawer.vue  | 11 +--
 .../site-config/SiteConfigEditor.vue          | 80 ++++++++++---------
 .../components/wanfa/WanfaCategoryEditor.vue  | 22 ++---
 .../src/components/wanfa/WanfaRouteEditor.vue | 34 ++++----
 .../src/pages/ConciergePage.vue               |  2 +-
 WonderQ-Admin-UI-Vue/src/pages/HomePage.vue   | 20 +++--
 WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue  |  4 +-
 .../src/pages/drawer-editors.test.ts          | 52 ++++++++++++
 WonderQ-Admin-UI-Vue/src/styles.css           |  8 +-
 11 files changed, 186 insertions(+), 109 deletions(-)
 create mode 100644 WonderQ-Admin-UI-Vue/src/pages/drawer-editors.test.ts

diff --git a/WonderQ-Admin-UI-Vue/src/components/concierge/ConciergeAdvisorEditor.vue b/WonderQ-Admin-UI-Vue/src/components/concierge/ConciergeAdvisorEditor.vue
index 48f109a..63108a1 100644
--- a/WonderQ-Admin-UI-Vue/src/components/concierge/ConciergeAdvisorEditor.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/concierge/ConciergeAdvisorEditor.vue
@@ -37,14 +37,16 @@ function toDraft(advisor?: ConciergeAdvisor): ConciergeAdvisorCreate {
 </script>
 
 <template>
-  <el-form class="concierge-editor" label-position="top" @submit.prevent="save">
-    <div class="editor-heading"><div><p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / CONCIERGE</p><h3>{{ editing ? "编辑管家顾问" : "新增管家顾问" }}</h3><p>维护顾问卡片、服务详情和二维码，保存后直接同步前台展示。</p></div></div>
-    <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
-    <el-form-item label="顾问姓名" required><el-input :model-value="draft.name" :disabled="saving" maxlength="80" show-word-limit @update:model-value="update('name', $event)" /></el-form-item>
-    <el-form-item label="顾问职位" required><el-input :model-value="draft.role" :disabled="saving" maxlength="120" show-word-limit @update:model-value="update('role', $event)" /></el-form-item>
-    <div class="editor-options"><SingleMediaEditor :model-value="draft.avatar" group="concierge" label="顾问头像" :disabled="saving" @update:model-value="update('avatar', $event)" /><SingleMediaEditor :model-value="draft.qrImage" group="concierge" label="添加管家二维码" :disabled="saving" @update:model-value="update('qrImage', $event)" /></div>
-    <ConciergeDetailEditor :model-value="draft.details as ConciergeDetail[]" :disabled="saving" @update:model-value="update('details', $event)" />
-    <el-form-item label="启用状态"><el-switch :model-value="draft.isActive ?? true" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="update('isActive', $event)" /></el-form-item>
+  <el-form class="concierge-editor drawer-editor-form" label-position="top" @submit.prevent="save">
+    <div class="drawer-editor-form__content">
+      <div class="editor-heading"><div><p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / CONCIERGE</p><h3>{{ editing ? "编辑管家顾问" : "新增管家顾问" }}</h3><p>维护顾问卡片、服务详情和二维码，保存后直接同步前台展示。</p></div></div>
+      <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
+      <el-form-item label="顾问姓名" required><el-input :model-value="draft.name" :disabled="saving" maxlength="80" show-word-limit @update:model-value="update('name', $event)" /></el-form-item>
+      <el-form-item label="顾问职位" required><el-input :model-value="draft.role" :disabled="saving" maxlength="120" show-word-limit @update:model-value="update('role', $event)" /></el-form-item>
+      <div class="editor-options"><SingleMediaEditor :model-value="draft.avatar" group="concierge" label="顾问头像" :disabled="saving" @update:model-value="update('avatar', $event)" /><SingleMediaEditor :model-value="draft.qrImage" group="concierge" label="添加管家二维码" :disabled="saving" @update:model-value="update('qrImage', $event)" /></div>
+      <ConciergeDetailEditor :model-value="draft.details as ConciergeDetail[]" :disabled="saving" @update:model-value="update('details', $event)" />
+      <el-form-item label="启用状态"><el-switch :model-value="draft.isActive ?? true" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="update('isActive', $event)" /></el-form-item>
+    </div>
     <div class="editor-actions"><el-button :disabled="saving" @click="emit('cancel')">取消</el-button><el-button type="primary" native-type="submit" :loading="saving">{{ editing ? "保存修改" : "创建顾问" }}</el-button></div>
   </el-form>
 </template>
diff --git a/WonderQ-Admin-UI-Vue/src/components/home/HomeContentEditor.vue b/WonderQ-Admin-UI-Vue/src/components/home/HomeContentEditor.vue
index ed53de7..9158419 100644
--- a/WonderQ-Admin-UI-Vue/src/components/home/HomeContentEditor.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/home/HomeContentEditor.vue
@@ -45,31 +45,33 @@ function updateLines(field: "detailParagraphs", value: string) {
 </script>
 
 <template>
-  <el-form class="home-content-editor" label-position="top" @submit.prevent="emit('save')">
-    <div class="editor-heading"><div><p class="eyebrow">{{ creating ? "CREATE" : "EDIT" }} / HOME CONTENT</p><h3>{{ creating ? "新增" : "编辑" }}{{ title[kind] }}</h3><p>{{ subtitle[kind] }}</p></div></div>
+  <el-form class="home-content-editor drawer-editor-form" label-position="top" @submit.prevent="emit('save')">
+    <div class="drawer-editor-form__content">
+      <div class="editor-heading"><div><p class="eyebrow">{{ creating ? "CREATE" : "EDIT" }} / HOME CONTENT</p><h3>{{ creating ? "新增" : "编辑" }}{{ title[kind] }}</h3><p>{{ subtitle[kind] }}</p></div></div>
 
-    <template v-if="kind === 'recommendation'">
-      <el-form-item label="玩法分类" required><el-select :model-value="draft.categoryId" class="full-width" filterable placeholder="请选择玩法分类" :disabled="saving" @update:model-value="update('categoryId', $event)"><el-option v-for="category in categories" :key="category.id" :label="`${category.label}（${category.routes.length} 条路线）`" :value="category.id" /></el-select></el-form-item>
-    </template>
+      <template v-if="kind === 'recommendation'">
+        <el-form-item label="玩法分类" required><el-select :model-value="draft.categoryId" class="full-width" filterable placeholder="请选择玩法分类" :disabled="saving" @update:model-value="update('categoryId', $event)"><el-option v-for="category in categories" :key="category.id" :label="`${category.label}（${category.routes.length} 条路线）`" :value="category.id" /></el-select></el-form-item>
+      </template>
 
-    <template v-else-if="kind === 'team'">
-      <div class="editor-options"><el-form-item label="标签" required><el-input :model-value="draft.tag ?? ''" maxlength="40" :disabled="saving" @update:model-value="update('tag', $event)" /></el-form-item><el-form-item label="需求关键词" required><el-input :model-value="draft.demandKeyword ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('demandKeyword', $event)" /></el-form-item></div>
-      <el-form-item label="标题" required><el-input :model-value="draft.title ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('title', $event)" /></el-form-item>
-      <el-form-item label="卡片描述" required><el-input :model-value="draft.description ?? ''" type="textarea" :rows="3" maxlength="240" :disabled="saving" @update:model-value="update('description', $event)" /></el-form-item>
-      <SingleMediaEditor :model-value="draft.image ?? ''" group="home-team-building" label="团队共创图片" :disabled="saving" @update:model-value="update('image', $event)" />
-      <el-form-item label="详情副标题"><el-input :model-value="draft.detailSubtitle ?? ''" maxlength="160" :disabled="saving" @update:model-value="update('detailSubtitle', $event)" /></el-form-item>
-      <el-form-item label="详情正文（每行一段）"><el-input :model-value="(draft.detailParagraphs ?? []).join('\n')" type="textarea" :rows="5" :disabled="saving" @update:model-value="updateLines('detailParagraphs', $event)" /></el-form-item>
-    </template>
+      <template v-else-if="kind === 'team'">
+        <div class="editor-options"><el-form-item label="标签" required><el-input :model-value="draft.tag ?? ''" maxlength="40" :disabled="saving" @update:model-value="update('tag', $event)" /></el-form-item><el-form-item label="需求关键词" required><el-input :model-value="draft.demandKeyword ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('demandKeyword', $event)" /></el-form-item></div>
+        <el-form-item label="标题" required><el-input :model-value="draft.title ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('title', $event)" /></el-form-item>
+        <el-form-item label="卡片描述" required><el-input :model-value="draft.description ?? ''" type="textarea" :rows="3" maxlength="240" :disabled="saving" @update:model-value="update('description', $event)" /></el-form-item>
+        <SingleMediaEditor :model-value="draft.image ?? ''" group="home-team-building" label="团队共创图片" :disabled="saving" @update:model-value="update('image', $event)" />
+        <el-form-item label="详情副标题"><el-input :model-value="draft.detailSubtitle ?? ''" maxlength="160" :disabled="saving" @update:model-value="update('detailSubtitle', $event)" /></el-form-item>
+        <el-form-item label="详情正文（每行一段）"><el-input :model-value="(draft.detailParagraphs ?? []).join('\n')" type="textarea" :rows="5" :disabled="saving" @update:model-value="updateLines('detailParagraphs', $event)" /></el-form-item>
+      </template>
 
-    <template v-else>
-      <el-form-item label="需求关键词" required><el-input :model-value="draft.demandKeyword ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('demandKeyword', $event)" /></el-form-item>
-      <el-form-item label="标题" required><el-input :model-value="draft.title ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('title', $event)" /></el-form-item>
-      <SingleMediaEditor :model-value="draft.image ?? ''" group="home-wild-archive" label="极境视界封面" :disabled="saving" @update:model-value="update('image', $event)" />
-      <ImageGalleryEditor :model-value="draft.images ?? []" :disabled="saving" @update:model-value="update('images', $event)" />
-    </template>
+      <template v-else>
+        <el-form-item label="需求关键词" required><el-input :model-value="draft.demandKeyword ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('demandKeyword', $event)" /></el-form-item>
+        <el-form-item label="标题" required><el-input :model-value="draft.title ?? ''" maxlength="120" :disabled="saving" @update:model-value="update('title', $event)" /></el-form-item>
+        <SingleMediaEditor :model-value="draft.image ?? ''" group="home-wild-archive" label="极境视界封面" :disabled="saving" @update:model-value="update('image', $event)" />
+        <ImageGalleryEditor :model-value="draft.images ?? []" :disabled="saving" @update:model-value="update('images', $event)" />
+      </template>
 
-    <el-form-item v-if="kind !== 'recommendation'" class="editor-sort-item" label="排序值"><el-input-number :model-value="draft.sortOrder ?? 0" :min="0" :disabled="saving" controls-position="right" @update:model-value="update('sortOrder', $event ?? 0)" /></el-form-item>
-    <div class="home-content-options"><el-form-item label="启用状态"><el-switch :model-value="draft.isActive" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="update('isActive', $event)" /></el-form-item></div>
+      <el-form-item v-if="kind !== 'recommendation'" class="editor-sort-item" label="排序值"><el-input-number :model-value="draft.sortOrder ?? 0" :min="0" :disabled="saving" controls-position="right" @update:model-value="update('sortOrder', $event ?? 0)" /></el-form-item>
+      <div class="home-content-options"><el-form-item label="启用状态"><el-switch :model-value="draft.isActive" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="update('isActive', $event)" /></el-form-item></div>
+    </div>
     <div class="editor-actions"><el-button :disabled="saving" @click="emit('cancel')">取消</el-button><el-button type="primary" native-type="submit" :loading="saving">保存{{ title[kind] }}</el-button></div>
   </el-form>
 </template>
diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue b/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue
index 141c35d..21bf790 100644
--- a/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue
@@ -18,6 +18,7 @@ function reset() {
 <template>
   <el-drawer
     :model-value="layout.settingsDrawerOpen"
+    class="settings-drawer"
     title="布局设置"
     size="320px"
     append-to-body
@@ -26,15 +27,15 @@ function reset() {
     <el-form label-position="top" class="settings-form">
       <el-form-item label="导航模式">
         <el-radio-group :model-value="layout.settings.navType" @update:model-value="update('navType', $event as NavigationType)">
-          <el-radio-button label="left">左侧菜单</el-radio-button>
-          <el-radio-button label="mix">混合菜单</el-radio-button>
-          <el-radio-button label="top">顶部菜单</el-radio-button>
+          <el-radio-button value="left">左侧菜单</el-radio-button>
+          <el-radio-button value="mix">混合菜单</el-radio-button>
+          <el-radio-button value="top">顶部菜单</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="侧栏主题">
         <el-radio-group :model-value="layout.settings.sideTheme" @update:model-value="update('sideTheme', $event as SideTheme)">
-          <el-radio-button label="theme-dark">深色</el-radio-button>
-          <el-radio-button label="theme-light">浅色</el-radio-button>
+          <el-radio-button value="theme-dark">深色</el-radio-button>
+          <el-radio-button value="theme-light">浅色</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="主题色">
diff --git a/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue b/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue
index a717ff4..092fa42 100644
--- a/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue
@@ -28,48 +28,50 @@ function updateField<K extends keyof SiteItemPatch>(field: K, value: SiteItemPat
 </script>
 
 <template>
-  <el-form class="site-config-editor" :model="draft" label-position="top" @submit.prevent="emit('save')">
-    <div class="editor-heading">
-      <div>
-        <p class="eyebrow">{{ creating ? "CREATE" : "EDIT" }} / SITE CONFIG</p>
-        <h3>{{ editorTitle }}</h3>
-        <p>{{ definition.description }}</p>
+  <el-form class="site-config-editor drawer-editor-form" :model="draft" label-position="top" @submit.prevent="emit('save')">
+    <div class="drawer-editor-form__content">
+      <div class="editor-heading">
+        <div>
+          <p class="eyebrow">{{ creating ? "CREATE" : "EDIT" }} / SITE CONFIG</p>
+          <h3>{{ editorTitle }}</h3>
+          <p>{{ definition.description }}</p>
+        </div>
       </div>
+
+      <el-form-item label="标题" required>
+        <el-input
+          :model-value="String(primaryValue)"
+          :disabled="saving"
+          maxlength="80"
+          show-word-limit
+          @update:model-value="updateField(definition.primaryField, $event)"
+        />
+      </el-form-item>
+
+      <template v-if="module === 'heroSlides'">
+        <el-form-item label="副标题">
+          <el-input :model-value="draft.kicker ?? ''" :disabled="saving" maxlength="80" @update:model-value="updateField('kicker', $event)" />
+        </el-form-item>
+      </template>
+
+      <template v-if="module === 'vehicleOptions'">
+        <el-form-item label="卡片描述">
+          <el-input :model-value="draft.description ?? ''" :disabled="saving" type="textarea" :rows="4" maxlength="240" show-word-limit @update:model-value="updateField('description', $event)" />
+        </el-form-item>
+      </template>
+
+      <template v-if="imageModule">
+        <SingleMediaEditor :model-value="draft.image ?? ''" group="site-config" label="资源图片" :disabled="saving" @update:model-value="updateField('image', $event)" />
+      </template>
+
+      <el-form-item v-if="!definition.singleton" class="editor-sort-item" label="排序值">
+        <el-input-number :model-value="draft.sortOrder ?? 0" :disabled="saving" :min="0" :step="1" controls-position="right" @update:model-value="updateField('sortOrder', $event ?? 0)" />
+      </el-form-item>
+      <el-form-item label="启用状态">
+        <el-switch :model-value="draft.isActive ?? true" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="updateField('isActive', $event)" />
+      </el-form-item>
     </div>
 
-    <el-form-item label="标题" required>
-      <el-input
-        :model-value="String(primaryValue)"
-        :disabled="saving"
-        maxlength="80"
-        show-word-limit
-        @update:model-value="updateField(definition.primaryField, $event)"
-      />
-    </el-form-item>
-
-    <template v-if="module === 'heroSlides'">
-      <el-form-item label="副标题">
-        <el-input :model-value="draft.kicker ?? ''" :disabled="saving" maxlength="80" @update:model-value="updateField('kicker', $event)" />
-      </el-form-item>
-    </template>
-
-    <template v-if="module === 'vehicleOptions'">
-      <el-form-item label="卡片描述">
-        <el-input :model-value="draft.description ?? ''" :disabled="saving" type="textarea" :rows="4" maxlength="240" show-word-limit @update:model-value="updateField('description', $event)" />
-      </el-form-item>
-    </template>
-
-    <template v-if="imageModule">
-      <SingleMediaEditor :model-value="draft.image ?? ''" group="site-config" label="资源图片" :disabled="saving" @update:model-value="updateField('image', $event)" />
-    </template>
-
-    <el-form-item v-if="!definition.singleton" class="editor-sort-item" label="排序值">
-      <el-input-number :model-value="draft.sortOrder ?? 0" :disabled="saving" :min="0" :step="1" controls-position="right" @update:model-value="updateField('sortOrder', $event ?? 0)" />
-    </el-form-item>
-    <el-form-item label="启用状态">
-      <el-switch :model-value="draft.isActive ?? true" :disabled="saving" active-text="启用" inactive-text="停用" @update:model-value="updateField('isActive', $event)" />
-    </el-form-item>
-
     <div class="editor-actions">
       <el-button :disabled="saving" @click="emit('cancel')">取消</el-button>
       <el-button type="primary" native-type="submit" :loading="saving">保存配置</el-button>
diff --git a/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaCategoryEditor.vue b/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaCategoryEditor.vue
index 4d85c1e..53e8864 100644
--- a/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaCategoryEditor.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaCategoryEditor.vue
@@ -20,18 +20,20 @@ function submit() {
 </script>
 
 <template>
-  <el-form class="wanfa-editor" label-position="top" @submit.prevent="submit">
-    <div class="editor-heading">
-      <div>
-        <p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / PLAY CATEGORY</p>
-        <h3>{{ editing ? "编辑玩法分类" : "新增玩法分类" }}</h3>
-        <p>{{ editing ? "修改后会同步更新前台玩法入口。" : "创建后即可在分类下维护路线。" }}</p>
+  <el-form class="wanfa-editor drawer-editor-form" label-position="top" @submit.prevent="submit">
+    <div class="drawer-editor-form__content">
+      <div class="editor-heading">
+        <div>
+          <p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / PLAY CATEGORY</p>
+          <h3>{{ editing ? "编辑玩法分类" : "新增玩法分类" }}</h3>
+          <p>{{ editing ? "修改后会同步更新前台玩法入口。" : "创建后即可在分类下维护路线。" }}</p>
+        </div>
       </div>
+      <el-form-item label="分类名称" required :error="error">
+        <el-input v-model="value" maxlength="40" show-word-limit :disabled="saving" placeholder="例如：亲子路线" autofocus />
+      </el-form-item>
+      <p class="field-hint">保存前会自动去除首尾空格。</p>
     </div>
-    <el-form-item label="分类名称" required :error="error">
-      <el-input v-model="value" maxlength="40" show-word-limit :disabled="saving" placeholder="例如：亲子路线" autofocus />
-    </el-form-item>
-    <p class="field-hint">保存前会自动去除首尾空格。</p>
     <div class="editor-actions">
       <el-button :disabled="saving" @click="emit('cancel')">取消</el-button>
       <el-button type="primary" native-type="submit" :loading="saving">{{ editing ? "保存修改" : "创建分类" }}</el-button>
diff --git a/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaRouteEditor.vue b/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaRouteEditor.vue
index bdbd305..637aad1 100644
--- a/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaRouteEditor.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/wanfa/WanfaRouteEditor.vue
@@ -62,25 +62,27 @@ function submit() {
 </script>
 
 <template>
-  <el-form class="wanfa-editor route-editor" label-position="top" @submit.prevent="submit">
-    <div class="editor-heading">
-      <div>
-        <p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / PLAY ROUTE</p>
-        <h3>{{ editing ? "编辑分类路线" : "新增分类路线" }}</h3>
-        <p>{{ editing ? `修改「${categoryLabel}」下的路线卡片和详情。` : `添加到「${categoryLabel}」，保存后会排在当前路线末尾。` }}</p>
+  <el-form class="wanfa-editor route-editor drawer-editor-form" label-position="top" @submit.prevent="submit">
+    <div class="drawer-editor-form__content">
+      <div class="editor-heading">
+        <div>
+          <p class="eyebrow">{{ editing ? "EDIT" : "CREATE" }} / PLAY ROUTE</p>
+          <h3>{{ editing ? "编辑分类路线" : "新增分类路线" }}</h3>
+          <p>{{ editing ? `修改「${categoryLabel}」下的路线卡片和详情。` : `添加到「${categoryLabel}」，保存后会排在当前路线末尾。` }}</p>
+        </div>
       </div>
-    </div>
 
-    <el-form-item label="路线标题" required><el-input v-model="routeDraft.title" maxlength="80" :disabled="saving" placeholder="例如：亲子玩水" autofocus /></el-form-item>
-    <el-form-item label="副标题/目的地说明" required><el-input v-model="routeDraft.subtitle" type="textarea" :rows="3" maxlength="160" :disabled="saving" /></el-form-item>
-    <div class="editor-options">
-      <el-form-item label="路线数量" required><el-input-number v-model="routeDraft.routeCount" :disabled="saving" :min="0" :step="1" controls-position="right" /></el-form-item>
-      <el-form-item label="需求关键词" required><el-input v-model="routeDraft.demandKeyword" maxlength="60" :disabled="saving" placeholder="例如：亲子玩水" /></el-form-item>
-    </div>
-    <SingleMediaEditor :model-value="routeDraft.image" group="wanfa-route" label="路线封面" :disabled="saving" @update:model-value="routeDraft.image = $event" />
+      <el-form-item label="路线标题" required><el-input v-model="routeDraft.title" maxlength="80" :disabled="saving" placeholder="例如：亲子玩水" autofocus /></el-form-item>
+      <el-form-item label="副标题/目的地说明" required><el-input v-model="routeDraft.subtitle" type="textarea" :rows="3" maxlength="160" :disabled="saving" /></el-form-item>
+      <div class="editor-options">
+        <el-form-item label="路线数量" required><el-input-number v-model="routeDraft.routeCount" :disabled="saving" :min="0" :step="1" controls-position="right" /></el-form-item>
+        <el-form-item label="需求关键词" required><el-input v-model="routeDraft.demandKeyword" maxlength="60" :disabled="saving" placeholder="例如：亲子玩水" /></el-form-item>
+      </div>
+      <SingleMediaEditor :model-value="routeDraft.image" group="wanfa-route" label="路线封面" :disabled="saving" @update:model-value="routeDraft.image = $event" />
 
-    <DetailFields v-model="detailDraft" :advisors="advisors" :disabled="saving" />
-    <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
+      <DetailFields v-model="detailDraft" :advisors="advisors" :disabled="saving" />
+      <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
+    </div>
     <div class="editor-actions">
       <el-button :disabled="saving" @click="emit('cancel')">取消</el-button>
       <el-button type="primary" native-type="submit" :loading="saving">{{ editing ? "保存修改" : "创建路线" }}</el-button>
diff --git a/WonderQ-Admin-UI-Vue/src/pages/ConciergePage.vue b/WonderQ-Admin-UI-Vue/src/pages/ConciergePage.vue
index 15eeb26..0292afa 100644
--- a/WonderQ-Admin-UI-Vue/src/pages/ConciergePage.vue
+++ b/WonderQ-Admin-UI-Vue/src/pages/ConciergePage.vue
@@ -116,6 +116,6 @@ onMounted(load);
     <el-skeleton v-if="loading" :rows="7" animated />
     <el-empty v-else-if="!advisors.length" description="暂无管家顾问"><el-button v-permission="'admin:concierge:read'" type="primary" @click="openCreate">创建第一位顾问</el-button></el-empty>
     <el-card v-else shadow="never" class="panel-card"><div class="concierge-list"><div v-for="(advisor, index) in advisors" :key="advisor.id" class="concierge-row"><div class="concierge-summary"><el-avatar :size="48" :src="resolveAdminMediaUrl(advisor.avatar)">{{ advisor.name.slice(0, 1) }}</el-avatar><div><strong>{{ advisor.name }}</strong><span>{{ advisor.role }} · {{ advisor.details?.length ?? 0 }} 条服务详情</span></div></div><div class="concierge-actions"><el-tag :type="advisor.isActive ? 'success' : 'info'" effect="plain">{{ advisor.isActive ? "启用" : "停用" }}</el-tag><el-button v-permission="'admin:concierge:read'" link :disabled="index === 0 || Boolean(savingKey)" @click="move(advisor, -1)">上移</el-button><el-button v-permission="'admin:concierge:read'" link :disabled="index === advisors.length - 1 || Boolean(savingKey)" @click="move(advisor, 1)">下移</el-button><el-button v-permission="'admin:concierge:read'" link type="primary" @click="openEdit(advisor)">编辑</el-button><el-button v-permission="'admin:concierge:read'" link type="danger" :disabled="Boolean(savingKey)" @click="remove(advisor)">删除</el-button></div></div></div></el-card>
-    <el-drawer v-model="editorOpen" size="min(720px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeEditor"><ConciergeAdvisorEditor v-if="editorOpen" :advisor="editing" :editing="Boolean(editing)" :saving="savingKey === 'advisor'" @save="save" @cancel="closeEditor" /></el-drawer>
+    <el-drawer v-model="editorOpen" class="editor-drawer" size="min(720px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeEditor"><ConciergeAdvisorEditor v-if="editorOpen" :advisor="editing" :editing="Boolean(editing)" :saving="savingKey === 'advisor'" @save="save" @cancel="closeEditor" /></el-drawer>
   </div>
 </template>
diff --git a/WonderQ-Admin-UI-Vue/src/pages/HomePage.vue b/WonderQ-Admin-UI-Vue/src/pages/HomePage.vue
index f74f19c..ecdb225 100644
--- a/WonderQ-Admin-UI-Vue/src/pages/HomePage.vue
+++ b/WonderQ-Admin-UI-Vue/src/pages/HomePage.vue
@@ -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>
diff --git a/WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue b/WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue
index c16ca8f..1fd6349 100644
--- a/WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue
+++ b/WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue
@@ -278,7 +278,7 @@ onMounted(loadData);
       </el-card>
     </div>
 
-    <el-drawer v-model="categoryDrawer" size="min(480px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeCategoryDrawer"><WanfaCategoryEditor :label="categoryEditing?.label ?? ''" :editing="Boolean(categoryEditing)" :saving="savingKey === 'category'" @save="saveCategory" @cancel="closeCategoryDrawer" /></el-drawer>
-    <el-drawer v-model="routeDrawer" size="min(700px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeRouteDrawer"><WanfaRouteEditor v-if="routeDrawer && selectedCategory" :category-label="selectedCategory.label" :route="routeEditing ?? undefined" :detail="selectedDetail" :advisors="advisors" :saving="savingKey === 'route'" @save="saveRoute" @cancel="closeRouteDrawer" /></el-drawer>
+    <el-drawer v-model="categoryDrawer" class="editor-drawer" size="min(480px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeCategoryDrawer"><WanfaCategoryEditor :label="categoryEditing?.label ?? ''" :editing="Boolean(categoryEditing)" :saving="savingKey === 'category'" @save="saveCategory" @cancel="closeCategoryDrawer" /></el-drawer>
+    <el-drawer v-model="routeDrawer" class="editor-drawer" size="min(700px, 100%)" :with-header="false" :show-close="false" :close-on-press-escape="!savingKey" @close="closeRouteDrawer"><WanfaRouteEditor v-if="routeDrawer && selectedCategory" :category-label="selectedCategory.label" :route="routeEditing ?? undefined" :detail="selectedDetail" :advisors="advisors" :saving="savingKey === 'route'" @save="saveRoute" @cancel="closeRouteDrawer" /></el-drawer>
   </div>
 </template>
diff --git a/WonderQ-Admin-UI-Vue/src/pages/drawer-editors.test.ts b/WonderQ-Admin-UI-Vue/src/pages/drawer-editors.test.ts
new file mode 100644
index 0000000..edc8ec3
--- /dev/null
+++ b/WonderQ-Admin-UI-Vue/src/pages/drawer-editors.test.ts
@@ -0,0 +1,52 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const readSource = (path: string) => readFileSync(new URL(path, import.meta.url), "utf8");
+
+const homePage = readSource("./HomePage.vue");
+const wanfaPage = readSource("./WanfaPage.vue");
+const conciergePage = readSource("./ConciergePage.vue");
+const settingsDrawer = readSource("../components/layout/SettingsDrawer.vue");
+const styles = readSource("../styles.css");
+
+const editorSources = [
+  readSource("../components/site-config/SiteConfigEditor.vue"),
+  readSource("../components/home/HomeContentEditor.vue"),
+  readSource("../components/wanfa/WanfaCategoryEditor.vue"),
+  readSource("../components/wanfa/WanfaRouteEditor.vue"),
+  readSource("../components/concierge/ConciergeAdvisorEditor.vue"),
+];
+
+describe("side drawer editor contracts", () => {
+  it("keeps editor content scrollable and action buttons in a bottom action bar", () => {
+    for (const source of editorSources) {
+      expect(source).toMatch(/<el-form[^>]*class="[^"]*drawer-editor-form[^"]*"/);
+      expect(source).toContain('class="drawer-editor-form__content"');
+      expect(source).toContain('class="editor-actions"');
+    }
+
+    expect(styles).toMatch(/\.drawer-editor-form\s*\{[^}]*display:\s*flex/);
+    expect(styles).toMatch(/\.drawer-editor-form__content\s*\{[^}]*overflow-y:\s*auto/);
+    expect(styles).toMatch(/\.editor-actions\s*\{[^}]*margin-top:\s*0/);
+  });
+
+  it("closes both home configuration drawers after a successful save", () => {
+    expect(homePage).toMatch(/async function saveSiteItem\(\)[\s\S]*?closeEditorAfterSave\(\);/);
+    expect(homePage).toMatch(/async function saveHomeItem\(\)[\s\S]*?closeEditorAfterSave\(\);/);
+  });
+
+  it("keeps successful save closure wired for route and concierge drawers", () => {
+    expect(wanfaPage).toMatch(/async function saveCategory\(label: string\)[\s\S]*?categoryDrawer\.value = false;/);
+    expect(wanfaPage).toMatch(/async function saveRoute\([\s\S]*?details\.value = [\s\S]*?routeDrawer\.value = false;/);
+    expect(conciergePage).toMatch(/async function save\(input: ConciergeAdvisorCreate\)[\s\S]*?editorOpen\.value = false;/);
+  });
+
+  it("uses the non-deprecated value API in the settings drawer", () => {
+    expect(settingsDrawer).toContain('<el-radio-button value="left">');
+    expect(settingsDrawer).toContain('<el-radio-button value="mix">');
+    expect(settingsDrawer).toContain('<el-radio-button value="top">');
+    expect(settingsDrawer).toContain('<el-radio-button value="theme-dark">');
+    expect(settingsDrawer).toContain('<el-radio-button value="theme-light">');
+    expect(settingsDrawer).not.toContain('<el-radio-button label=');
+  });
+});
diff --git a/WonderQ-Admin-UI-Vue/src/styles.css b/WonderQ-Admin-UI-Vue/src/styles.css
index d770a64..38ee583 100644
--- a/WonderQ-Admin-UI-Vue/src/styles.css
+++ b/WonderQ-Admin-UI-Vue/src/styles.css
@@ -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; }