task-248(admin.html观感对齐): 模态/抽屉容器统一（ModalShell/DrawerShell 收口尺寸与关闭语义）

admin-frontend-vue/src/components/DrawerShell.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { dialogTitleOf, drawerLayoutSpec } from './modal-model'
+
+/**
+ * DrawerShell 右侧抽屉容器（module 13 task 248）：封装 el-drawer，统一 admin 尺寸
+ * 与关闭语义（遮罩/Esc），标题透传默认头部、footer 槽承接底部按钮，构成头/体/脚三段。
+ */
+const props = withDefaults(
+  defineProps<{ modelValue: boolean; title?: string; subtitle?: string; width?: string | number }>(),
+  { title: '', subtitle: '', width: drawerLayoutSpec().width },
+)
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit('update:modelValue', v),
+})
+const spec = computed(() => drawerLayoutSpec())
+const head = computed(() => dialogTitleOf({ title: props.title, subtitle: props.subtitle }))
+</script>
+
+<template>
+  <el-drawer
+    v-model="visible"
+    :size="width"
+    :title="head.title"
+    :close-on-click-modal="spec.maskClosable"
+    :close-on-press-escape="spec.escClosable"
+    class="admin-drawer-shell"
+  >
+    <p v-if="head.subtitle" class="admin-drawer-subtitle">{{ head.subtitle }}</p>
+    <slot />
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped>
+.admin-drawer-subtitle { margin: 0 0 12px; color: var(--admin-muted); font-size: 13px; }
+</style>