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

2026-09-05 21:01:23 +08:00
parent f7ad99deda
commit 4e86506f3e
4 changed files with 188 additions and 0 deletions
@@ -0,0 +1,30 @@
+/**
+ * 模态/抽屉布局模型（module 13 task 248）：统一两种承载容器的尺寸与关闭语义，
+ * 对齐 admin.html —— 居中 modal width min(920px,100vw-48)、radius14；右侧 drawer
+ * width min(460px,100%)；遮罩点击与 Esc 均关闭。页面接入统一尺寸与头/脚槽。
+ */
+export const ADMIN_MODAL_WIDTH = 'min(920px, 100vw - 48px)'
+export const ADMIN_DRAWER_WIDTH = 'min(460px, 100%)'
+export const ADMIN_MODAL_RADIUS = 14
+
+export interface AdminContainerSpec {
+  width: string
+  radius?: number
+  maskClosable: boolean
+  escClosable: boolean
+}
+
+export function modalLayoutSpec(): AdminContainerSpec {
+  return { width: ADMIN_MODAL_WIDTH, radius: ADMIN_MODAL_RADIUS, maskClosable: true, escClosable: true }
+}
+
+export function drawerLayoutSpec(): AdminContainerSpec {
+  return { width: ADMIN_DRAWER_WIDTH, maskClosable: true, escClosable: true }
+}
+
+/** 页面头标题归一：空/空白标题兜底「操作」，副标题去空白后无则省略。 */
+export function dialogTitleOf(opts: { title?: string; subtitle?: string }): { title: string; subtitle?: string } {
+  const title = opts.title?.trim()
+  const subtitle = opts.subtitle?.trim()
+  return { title: title || '操作', ...(subtitle ? { subtitle } : {}) }
+}