@morya-ui/mcp 0.3.5 → 0.3.7

package/dist/page-snippets.js

@@ -8,33 +8,33 @@ export const pageSnippets = [
         pageTypes: ['list'],
         keywords: ['筛选', '搜索', '查询', 'filters', 'filter', 'search', 'keyword', 'reset', '基础筛选'],
         imports: ['MPageFilters', 'MSpace', 'MInput', 'MSelect', 'MButton'],
-        scriptSetup: `const keyword = ref('')
-const status = ref<string | undefined>()
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-
-function resetFilters() {
-  keyword.value = ''
-  status.value = undefined
+        scriptSetup: `const keyword = ref('')
+const status = ref<string | undefined>()
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+
+function resetFilters() {
+  keyword.value = ''
+  status.value = undefined
 }`,
-        template: `<MPageFilters aria-label="筛选" variant="filled">
-  <MSpace wrap>
-    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
-    <MSelect
-      v-model="status"
-      :options="statusOptions"
-      placeholder="状态"
-      clearable
-      style="width: 10rem"
-    />
-  </MSpace>
-  <template #actions>
-    <MButton severity="secondary">查询</MButton>
-    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
-  </template>
+        template: `<MPageFilters aria-label="筛选" variant="filled">
+  <MSpace wrap>
+    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
+    <MSelect
+      v-model="status"
+      :options="statusOptions"
+      placeholder="状态"
+      clearable
+      style="width: 10rem"
+    />
+  </MSpace>
+  <template #actions>
+    <MButton severity="secondary">查询</MButton>
+    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
+  </template>
 </MPageFilters>`,
         rules: [
             '放在 MPageHeader 之后、表格（或 FilterChips）之前',
@@ -68,57 +68,57 @@ function resetFilters() {
         pageTypes: ['list'],
         keywords: ['折叠', '高级筛选', 'collapse', 'advanced', 'expand', 'filter', '次要条件'],
         imports: ['MPageFilters', 'MSpace', 'MInput', 'MSelect', 'MButton'],
-        scriptSetup: `const filtersExpanded = ref(false)
-const keyword = ref('')
-const status = ref<string | undefined>()
-const department = ref<string | null>(null)
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-const departmentOptions = [
-  { label: '研发', value: '研发' },
-  { label: '运营', value: '运营' },
-  { label: '市场', value: '市场' },
-]
-
-function resetFilters() {
-  keyword.value = ''
-  status.value = undefined
-  department.value = null
+        scriptSetup: `const filtersExpanded = ref(false)
+const keyword = ref('')
+const status = ref<string | undefined>()
+const department = ref<string | null>(null)
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+const departmentOptions = [
+  { label: '研发', value: '研发' },
+  { label: '运营', value: '运营' },
+  { label: '市场', value: '市场' },
+]
+
+function resetFilters() {
+  keyword.value = ''
+  status.value = undefined
+  department.value = null
 }`,
-        template: `<MPageFilters
-  v-model:expanded="filtersExpanded"
-  aria-label="筛选"
-  variant="filled"
-  collapsible
->
-  <MSpace wrap>
-    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
-    <MSelect
-      v-model="status"
-      :options="statusOptions"
-      placeholder="状态"
-      clearable
-      style="width: 10rem"
-    />
-  </MSpace>
-  <template #actions>
-    <MButton severity="secondary">查询</MButton>
-    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
-  </template>
-  <template #advanced>
-    <MSpace wrap>
-      <MSelect
-        v-model="department"
-        :options="departmentOptions"
-        placeholder="部门"
-        clearable
-        style="width: 10rem"
-      />
-    </MSpace>
-  </template>
+        template: `<MPageFilters
+  v-model:expanded="filtersExpanded"
+  aria-label="筛选"
+  variant="filled"
+  collapsible
+>
+  <MSpace wrap>
+    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
+    <MSelect
+      v-model="status"
+      :options="statusOptions"
+      placeholder="状态"
+      clearable
+      style="width: 10rem"
+    />
+  </MSpace>
+  <template #actions>
+    <MButton severity="secondary">查询</MButton>
+    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
+  </template>
+  <template #advanced>
+    <MSpace wrap>
+      <MSelect
+        v-model="department"
+        :options="departmentOptions"
+        placeholder="部门"
+        clearable
+        style="width: 10rem"
+      />
+    </MSpace>
+  </template>
 </MPageFilters>`,
         rules: [
             '常用条件放 default，次要条件放 #advanced',
@@ -152,45 +152,45 @@ function resetFilters() {
         pageTypes: ['list'],
         keywords: ['已选', 'chip', 'tag', 'active', 'clear', '筛选', 'FilterChips', '已选筛选'],
         imports: ['MPageFilterChips', 'MTag'],
-        scriptSetup: `const keyword = ref('')
-const status = ref<string | undefined>()
-const department = ref<string | null>(null)
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-
-const activeFilters = computed(() => {
-  const items: Array<{ key: string; label: string }> = []
-  if (keyword.value.trim()) {
-    items.push({ key: 'keyword', label: \`关键词：\${keyword.value.trim()}\` })
-  }
-  if (status.value) {
-    const label = statusOptions.find((o) => o.value === status.value)?.label ?? status.value
-    items.push({ key: 'status', label: \`状态：\${label}\` })
-  }
-  if (department.value) {
-    items.push({ key: 'department', label: \`部门：\${department.value}\` })
-  }
-  return items
-})
-
-function clearFilter(key: string) {
-  if (key === 'keyword') keyword.value = ''
-  if (key === 'status') status.value = undefined
-  if (key === 'department') department.value = null
+        scriptSetup: `const keyword = ref('')
+const status = ref<string | undefined>()
+const department = ref<string | null>(null)
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+
+const activeFilters = computed(() => {
+  const items: Array<{ key: string; label: string }> = []
+  if (keyword.value.trim()) {
+    items.push({ key: 'keyword', label: \`关键词：\${keyword.value.trim()}\` })
+  }
+  if (status.value) {
+    const label = statusOptions.find((o) => o.value === status.value)?.label ?? status.value
+    items.push({ key: 'status', label: \`状态：\${label}\` })
+  }
+  if (department.value) {
+    items.push({ key: 'department', label: \`部门：\${department.value}\` })
+  }
+  return items
+})
+
+function clearFilter(key: string) {
+  if (key === 'keyword') keyword.value = ''
+  if (key === 'status') status.value = undefined
+  if (key === 'department') department.value = null
 }`,
-        template: `<MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
-  <MTag
-    v-for="item in activeFilters"
-    :key="item.key"
-    :value="item.label"
-    size="small"
-    bordered
-    closable
-    @close="clearFilter(item.key)"
-  />
+        template: `<MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
+  <MTag
+    v-for="item in activeFilters"
+    :key="item.key"
+    :value="item.label"
+    size="small"
+    bordered
+    closable
+    @close="clearFilter(item.key)"
+  />
 </MPageFilterChips>`,
         rules: [
             '放在 MPageFilters 之后、表格之前',
@@ -241,91 +241,91 @@ function clearFilter(key: string) {
             'MButton',
             'MTag',
         ],
-        scriptSetup: `const filtersExpanded = ref(false)
-const keyword = ref('')
-const status = ref<string | undefined>()
-const department = ref<string | null>(null)
-
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-const departmentOptions = [
-  { label: '研发', value: '研发' },
-  { label: '运营', value: '运营' },
-  { label: '市场', value: '市场' },
-]
-
-const activeFilters = computed(() => {
-  const items: Array<{ key: string; label: string }> = []
-  if (keyword.value.trim()) {
-    items.push({ key: 'keyword', label: \`关键词：\${keyword.value.trim()}\` })
-  }
-  if (status.value) {
-    const label = statusOptions.find((o) => o.value === status.value)?.label ?? status.value
-    items.push({ key: 'status', label: \`状态：\${label}\` })
-  }
-  if (department.value) {
-    items.push({ key: 'department', label: \`部门：\${department.value}\` })
-  }
-  return items
-})
-
-function clearFilter(key: string) {
-  if (key === 'keyword') keyword.value = ''
-  if (key === 'status') status.value = undefined
-  if (key === 'department') department.value = null
-}
-
-function resetFilters() {
-  keyword.value = ''
-  status.value = undefined
-  department.value = null
+        scriptSetup: `const filtersExpanded = ref(false)
+const keyword = ref('')
+const status = ref<string | undefined>()
+const department = ref<string | null>(null)
+
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+const departmentOptions = [
+  { label: '研发', value: '研发' },
+  { label: '运营', value: '运营' },
+  { label: '市场', value: '市场' },
+]
+
+const activeFilters = computed(() => {
+  const items: Array<{ key: string; label: string }> = []
+  if (keyword.value.trim()) {
+    items.push({ key: 'keyword', label: \`关键词：\${keyword.value.trim()}\` })
+  }
+  if (status.value) {
+    const label = statusOptions.find((o) => o.value === status.value)?.label ?? status.value
+    items.push({ key: 'status', label: \`状态：\${label}\` })
+  }
+  if (department.value) {
+    items.push({ key: 'department', label: \`部门：\${department.value}\` })
+  }
+  return items
+})
+
+function clearFilter(key: string) {
+  if (key === 'keyword') keyword.value = ''
+  if (key === 'status') status.value = undefined
+  if (key === 'department') department.value = null
+}
+
+function resetFilters() {
+  keyword.value = ''
+  status.value = undefined
+  department.value = null
 }`,
-        template: `<MPageFilters
-  v-model:expanded="filtersExpanded"
-  aria-label="筛选"
-  variant="filled"
-  collapsible
->
-  <MSpace wrap>
-    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
-    <MSelect
-      v-model="status"
-      :options="statusOptions"
-      placeholder="状态"
-      clearable
-      style="width: 10rem"
-    />
-  </MSpace>
-  <template #actions>
-    <MButton severity="secondary">查询</MButton>
-    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
-  </template>
-  <template #advanced>
-    <MSpace wrap>
-      <MSelect
-        v-model="department"
-        :options="departmentOptions"
-        placeholder="部门"
-        clearable
-        style="width: 10rem"
-      />
-    </MSpace>
-  </template>
-</MPageFilters>
-
-<MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
-  <MTag
-    v-for="item in activeFilters"
-    :key="item.key"
-    :value="item.label"
-    size="small"
-    bordered
-    closable
-    @close="clearFilter(item.key)"
-  />
+        template: `<MPageFilters
+  v-model:expanded="filtersExpanded"
+  aria-label="筛选"
+  variant="filled"
+  collapsible
+>
+  <MSpace wrap>
+    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
+    <MSelect
+      v-model="status"
+      :options="statusOptions"
+      placeholder="状态"
+      clearable
+      style="width: 10rem"
+    />
+  </MSpace>
+  <template #actions>
+    <MButton severity="secondary">查询</MButton>
+    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
+  </template>
+  <template #advanced>
+    <MSpace wrap>
+      <MSelect
+        v-model="department"
+        :options="departmentOptions"
+        placeholder="部门"
+        clearable
+        style="width: 10rem"
+      />
+    </MSpace>
+  </template>
+</MPageFilters>
+
+<MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
+  <MTag
+    v-for="item in activeFilters"
+    :key="item.key"
+    :value="item.label"
+    size="small"
+    bordered
+    closable
+    @close="clearFilter(item.key)"
+  />
 </MPageFilterChips>`,
         rules: [
             '顺序：Header → Filters → FilterChips →（可选 Toolbar）→ Table',
@@ -359,40 +359,40 @@ function resetFilters() {
         pageTypes: ['list'],
         keywords: ['dense', 'compact', '紧凑', 'plain', '监控', '告警', '小尺寸筛选'],
         imports: ['MPageFilters', 'MSpace', 'MInput', 'MSelect', 'MButton'],
-        scriptSetup: `const keyword = ref('')
-const status = ref<string | undefined>()
-const statusOptions = [
-  { label: '全部', value: '' },
-  { label: '启用', value: 'active' },
-  { label: '停用', value: 'inactive' },
-]
-
-function resetFilters() {
-  keyword.value = ''
-  status.value = undefined
+        scriptSetup: `const keyword = ref('')
+const status = ref<string | undefined>()
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+
+function resetFilters() {
+  keyword.value = ''
+  status.value = undefined
 }`,
-        template: `<MPageFilters aria-label="筛选" variant="plain">
-  <MSpace wrap>
-    <MInput
-      v-model="keyword"
-      placeholder="搜索"
-      clearable
-      size="small"
-      style="width: 11rem"
-    />
-    <MSelect
-      v-model="status"
-      :options="statusOptions"
-      placeholder="状态"
-      clearable
-      size="small"
-      style="width: 8rem"
-    />
-  </MSpace>
-  <template #actions>
-    <MButton severity="secondary" size="small">查询</MButton>
-    <MButton severity="secondary" size="small" text @click="resetFilters">重置</MButton>
-  </template>
+        template: `<MPageFilters aria-label="筛选" variant="plain">
+  <MSpace wrap>
+    <MInput
+      v-model="keyword"
+      placeholder="搜索"
+      clearable
+      size="small"
+      style="width: 11rem"
+    />
+    <MSelect
+      v-model="status"
+      :options="statusOptions"
+      placeholder="状态"
+      clearable
+      size="small"
+      style="width: 8rem"
+    />
+  </MSpace>
+  <template #actions>
+    <MButton severity="secondary" size="small">查询</MButton>
+    <MButton severity="secondary" size="small" text @click="resetFilters">重置</MButton>
+  </template>
 </MPageFilters>`,
         rules: [
             '仅在 dense/compact craft 使用；默认列表用 list-filters-stack',
@@ -422,10 +422,10 @@ function resetFilters() {
         pageTypes: ['list'],
         keywords: ['页头', '标题', '新建', 'header', 'title', 'create', 'actions'],
         imports: ['MPageHeader', 'MButton'],
-        template: `<MPageHeader title="用户管理" description="维护账号、角色与权限。">
-  <template #actions>
-    <MButton severity="primary">新建用户</MButton>
-  </template>
+        template: `<MPageHeader title="用户管理" description="维护账号、角色与权限。">
+  <template #actions>
+    <MButton severity="primary">新建用户</MButton>
+  </template>
 </MPageHeader>`,
         rules: ['页级标题用 MPageHeader，不要用 MPageToolbar 当第二页头', '主操作放 #actions'],
         rulesEn: ['Use MPageHeader for page identity; do not use MPageToolbar as a second page title', 'Put primary actions in #actions'],
@@ -441,12 +441,12 @@ function resetFilters() {
         pageTypes: ['list'],
         keywords: ['批量', '已选', 'toolbar', 'batch', 'export', 'delete'],
         imports: ['MPageToolbar', 'MButton'],
-        template: `<MPageToolbar>
-  <span style="color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)">已选 0 项</span>
-  <template #actions>
-    <MButton severity="secondary" text>导出</MButton>
-    <MButton severity="danger" text>删除</MButton>
-  </template>
+        template: `<MPageToolbar>
+  <span style="color:var(--m-color-text-muted);font-size:var(--m-font-size-sm)">已选 0 项</span>
+  <template #actions>
+    <MButton severity="secondary" text>导出</MButton>
+    <MButton severity="danger" text>删除</MButton>
+  </template>
 </MPageToolbar>`,
         rules: ['左侧用 default 插槽展示已选数量', '批量操作用 text/outlined，danger 仅 destructive', '放在 FilterChips 之后、表格之前'],
         rulesEn: ['Use the default slot for selection count', 'Batch actions use text/outlined; danger only for destructive ops', 'Place after FilterChips and before the table'],
@@ -457,8 +457,8 @@ function resetFilters() {
         id: 'list-table',
         title: '列表页表格',
         titleEn: 'List page table',
-        description: '标准 MTable，直接放在 MPageContent 内。全视口主列表可再加 fill（表体滚、分页贴底）；嵌入/短页不要 fill。',
-        descriptionEn: 'Standard MTable in MPageContent. Add fill only for full-viewport main lists; skip fill for embedded/short pages.',
+        description: '标准 MTable：状态列 MStatus、数字列 align end、行操作 small text、空态带下一步。全视口主列表可加 fill；嵌入/短页不要 fill。',
+        descriptionEn: 'MTable with MStatus status, end-aligned numbers, small text row actions, next-step empty. Add fill only for full-viewport main lists.',
         pageTypes: ['list'],
         keywords: [
             '表格',
@@ -471,60 +471,84 @@ function resetFilters() {
             'fill',
             '撑满',
             '分页',
+            'tabular',
+            '对齐',
         ],
-        imports: ['MTable', 'MEmpty', 'MButton'],
-        scriptSetup: `const columns = [
-  { key: 'name', label: '名称' },
-  { key: 'status', label: '状态' },
-  { key: 'updatedAt', label: '更新时间' },
-  { key: 'actions', label: '操作', width: 128 },
-]
-const rows = ref<Record<string, unknown>[]>([])
+        imports: ['MTable', 'MEmpty', 'MButton', 'MStatus', 'MSpace'],
+        scriptSetup: `const columns = [
+  { key: 'name', label: '名称' },
+  { key: 'status', label: '状态', width: 110 },
+  { key: 'count', label: '数量', width: 96, align: 'end' as const },
+  { key: 'updatedAt', label: '更新时间', width: 160 },
+  { key: 'actions', label: '操作', width: 128 },
+]
+const rows = ref<Record<string, unknown>[]>([])
 const loading = ref(false)`,
-        template: `<!-- 全视口主列表再加 fill；嵌入/短页去掉 fill -->
-<MTable
-  :columns="columns"
-  :rows="rows"
-  :loading="loading"
-  fill
-  paginator
-  :rows-per-page="10"
-  striped
-  bordered
-  row-key="id"
-  aria-label="数据列表"
->
-  <template #empty>
-    <MEmpty
-      title="还没有数据"
-      description="创建第一条记录后，这里会列出结果。"
-      icon="inbox"
-    >
-      <template #extra>
-        <MButton severity="primary">新建</MButton>
-      </template>
-    </MEmpty>
-  </template>
+        template: `<!-- 全视口主列表再加 fill；嵌入/短页去掉 fill -->
+<MTable
+  :columns="columns"
+  :rows="rows"
+  :loading="loading"
+  fill
+  paginator
+  :rows-per-page="10"
+  striped
+  bordered
+  row-key="id"
+  aria-label="数据列表"
+>
+  <template #cell-status="{ value }">
+    <MStatus
+      :label="value === 'active' || value === 'online' ? '启用' : '停用'"
+      :severity="value === 'active' || value === 'online' ? 'success' : 'secondary'"
+    />
+  </template>
+  <template #cell-count="{ value }">
+    <span style="font-variant-numeric: tabular-nums">{{ value ?? '—' }}</span>
+  </template>
+  <template #cell-actions>
+    <MSpace>
+      <MButton severity="secondary" size="small" text>编辑</MButton>
+      <MButton severity="danger" size="small" text>删除</MButton>
+    </MSpace>
+  </template>
+  <template #empty>
+    <MEmpty
+      title="还没有成员"
+      description="新建第一条后，这里会列出姓名、状态与更新时间。"
+      icon="inbox"
+    >
+      <template #extra>
+        <MButton severity="primary">新建成员</MButton>
+      </template>
+    </MEmpty>
+  </template>
 </MTable>`,
         rules: [
             '先判断是否适合 fill：全视口后台主列表 + 表格是主任务 → MPageContent fill + MTable fill',
             '嵌入表、短页、整页文档滚动 → 不要 fill，内容高度即可',
-            '表格直接放在 MPageContent 内；空态用 MEmpty',
+            '业务状态列用 MStatus；分类标签才用 MTag',
+            '数量/金额列 columns.align = end，并用 tabular-nums',
+            '行操作用 size="small" + text；空态文案写领域下一步，禁止「示例 / Name / No data」',
         ],
         rulesEn: [
             'Decide fill first: full-viewport admin main list → MPageContent fill + MTable fill',
             'Embedded / short / document-scroll pages → skip fill',
-            'Place the table directly in MPageContent; use MEmpty for zero-data states',
+            'Business status → MStatus; categories → MTag',
+            'Numeric columns: align end + tabular-nums',
+            'Row actions: size="small" + text; empty copy is domain-real — no “示例 / Name / No data”',
         ],
         avoid: [
             '不要用 MCard 包裹 bordered MTable',
             '不要对嵌入/短页硬套 fill',
             '适合 fill 时不要手写 min-height / calc',
+            '不要在 #cell-status 默认用 MTag',
         ],
         avoidEn: [
             'Do not wrap a bordered MTable with MCard',
             'Do not force fill on embedded or short pages',
             'Do not hand-write min-height / calc when fill is appropriate',
+            'Do not default #cell-status to MTag',
         ],
     },
     {
@@ -536,11 +560,11 @@ const loading = ref(false)`,
         pageTypes: ['list'],
         keywords: ['行操作', '编辑', '删除', 'actions', 'row', 'cell'],
         imports: ['MSpace', 'MButton'],
-        template: `<template #cell-actions>
-  <MSpace>
-    <MButton severity="secondary" size="small" text>编辑</MButton>
-    <MButton severity="danger" size="small" text>删除</MButton>
-  </MSpace>
+        template: `<template #cell-actions>
+  <MSpace>
+    <MButton severity="secondary" size="small" text>编辑</MButton>
+    <MButton severity="danger" size="small" text>删除</MButton>
+  </MSpace>
 </template>`,
         rules: ['行内操作用 size="small" + text/outlined，避免一排实心按钮', '危险操作使用 severity="danger" 并配合确认弹窗'],
         rulesEn: ['Use size="small" with text/outlined row actions', 'Use severity="danger" with confirmation for destructive actions'],
@@ -556,11 +580,11 @@ const loading = ref(false)`,
         pageTypes: ['list'],
         keywords: ['分类', '标签', '可关闭', 'chip', 'category', 'tag-only'],
         imports: ['MTag'],
-        template: `<template #cell-category="{ value }">
-  <MTag
-    :value="String(value ?? '')"
-    severity="info"
-  />
+        template: `<template #cell-category="{ value }">
+  <MTag
+    :value="String(value ?? '')"
+    severity="info"
+  />
 </template>`,
         rules: ['分类/强调态用 MTag；行内业务状态用 MStatus（list-status-dot）', '不要用 Button 颜色表达状态'],
         rulesEn: ['Use MTag for categories; use MStatus for business status (list-status-dot)', 'Do not use Button colors for status'],
@@ -576,11 +600,11 @@ const loading = ref(false)`,
         pageTypes: ['list'],
         keywords: ['状态', 'status', 'dot', 'cell-status', '在线', '启用', '停用', '业务状态'],
         imports: ['MStatus'],
-        template: `<template #cell-status="{ value }">
-  <MStatus
-    :label="value === 'active' || value === 'online' ? '启用' : '停用'"
-    :severity="value === 'active' || value === 'online' ? 'success' : 'secondary'"
-  />
+        template: `<template #cell-status="{ value }">
+  <MStatus
+    :label="value === 'active' || value === 'online' ? '启用' : '停用'"
+    :severity="value === 'active' || value === 'online' ? 'success' : 'secondary'"
+  />
 </template>`,
         rules: ['行内轻量业务状态优先 MStatus', '不要用 Button 颜色表达状态'],
         rulesEn: ['Prefer MStatus for lightweight inline business status', 'Do not use Button colors for status'],
@@ -591,25 +615,33 @@ const loading = ref(false)`,
         id: 'empty-block',
         title: '空状态 MEmpty',
         titleEn: 'Empty state with MEmpty',
-        description: '列表或内容区无数据时使用 MEmpty，操作放在 #extra。',
-        descriptionEn: 'Use MEmpty for no-data regions; put actions in #extra.',
+        description: '列表或内容区无数据时使用 MEmpty；标题/说明写领域下一步，#extra 放唯一 primary。',
+        descriptionEn: 'MEmpty for no-data; domain next-step copy; one primary in #extra.',
         pageTypes: ['list', 'common'],
         keywords: ['空状态', '无数据', 'empty', 'zero state', 'no data'],
         imports: ['MEmpty', 'MButton'],
-        template: `<MEmpty
-  title="还没有数据"
-  description="创建第一条记录后即可在此查看。"
-  icon="database"
->
-  <template #extra>
-    <MButton label="新建" />
-    <MButton label="导入" severity="secondary" text />
-  </template>
+        template: `<MEmpty
+  title="还没有成员"
+  description="邀请或新建第一位成员后，这里会显示状态与最近活动。"
+  icon="users"
+>
+  <template #extra>
+    <MButton severity="primary">新建成员</MButton>
+    <MButton severity="secondary" text>导入名单</MButton>
+  </template>
 </MEmpty>`,
-        rules: ['正常无数据用 MEmpty，不要用错误色', '主 CTA 用 primary，次动作用 text/secondary'],
-        rulesEn: ['Use MEmpty for normal emptiness, not error colors', 'Primary CTA + secondary/text for lesser actions'],
-        avoid: ['不要用手写 div 拼空态', '不要用 MResult 表达无数据'],
-        avoidEn: ['Do not hand-roll empty markup', 'Do not use MResult for no-data'],
+        rules: [
+            '正常无数据用 MEmpty，不要用错误色',
+            '主 CTA 用 severity="primary"，次动作用 text/secondary',
+            '文案写清「现在可以做什么」，禁止「暂无数据 / No data / 示例」',
+        ],
+        rulesEn: [
+            'Use MEmpty for normal emptiness, not error colors',
+            'Primary CTA with severity="primary"; lesser actions text/secondary',
+            'Copy says what to do next — no “暂无数据 / No data / 示例”',
+        ],
+        avoid: ['不要用手写 div 拼空态', '不要用 MResult 表达无数据', '不要放两个 filled primary'],
+        avoidEn: ['Do not hand-roll empty markup', 'Do not use MResult for no-data', 'Do not place two filled primaries'],
     },
     {
         id: 'result-block',
@@ -620,11 +652,11 @@ const loading = ref(false)`,
         pageTypes: ['common'],
         keywords: ['结果', '成功', '失败', '404', '403', 'result', 'success', 'error'],
         imports: ['MResult', 'MButton'],
-        template: `<MResult status="success" description="订单已创建，可在列表中查看详情。">
-  <template #extra>
-    <MButton label="查看订单" />
-    <MButton label="返回列表" severity="secondary" text />
-  </template>
+        template: `<MResult status="success" description="订单已创建，可在列表中查看详情。">
+  <template #extra>
+    <MButton label="查看订单" />
+    <MButton label="返回列表" severity="secondary" text />
+  </template>
 </MResult>`,
         rules: ['流程终点用 MResult', '提供明确下一步操作'],
         rulesEn: ['Use MResult for terminal outcomes', 'Provide clear next-step actions'],
@@ -650,25 +682,52 @@ const loading = ref(false)`,
         id: 'form-body',
         title: '表单主体',
         titleEn: 'Form body surface',
-        description: 'MPageSection variant="form" 包裹 MForm 字段。',
-        descriptionEn: 'Wrap MForm fields with MPageSection variant="form".',
+        description: 'MPageSection variant="form" + MForm；左标签时设 label-position/label-width；常驻错误用字段 errorMessage。',
+        descriptionEn: 'MPageSection form + MForm; set label-position/label-width for left labels; persistent errors via errorMessage.',
         pageTypes: ['form'],
-        keywords: ['表单', 'form', 'fields', 'formitem'],
-        imports: ['MPageSection', 'MForm', 'MFormItem', 'MInput'],
-        scriptSetup: `const model = reactive({ name: '' })
-const submitting = ref(false)`,
-        template: `<MPageSection variant="form">
-  <MForm @submit.prevent="onSubmit">
-    <MFormItem label="姓名" name="name" required>
-      <MInput v-model="model.name" placeholder="请输入姓名" fluid />
-    </MFormItem>
-    <!-- 更多字段 -->
-  </MForm>
+        keywords: ['表单', 'form', 'fields', 'formitem', 'label-width', 'errorMessage'],
+        imports: ['MPageSection', 'MForm', 'MFormItem', 'MInput', 'MSelect'],
+        scriptSetup: `const model = reactive({ name: '', role: undefined as string | undefined })
+const submitting = ref(false)
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]`,
+        template: `<MPageSection variant="form">
+  <MForm
+    label-position="left"
+    label-width="6rem"
+    @submit.prevent="onSubmit"
+  >
+    <MFormItem label="姓名" name="name" required>
+      <MInput v-model="model.name" placeholder="与工牌一致的姓名" fluid />
+    </MFormItem>
+    <MFormItem label="角色" name="role" required>
+      <MSelect
+        v-model="model.role"
+        :options="roleOptions"
+        placeholder="选择角色"
+        clearable
+        fluid
+      />
+    </MFormItem>
+    <!-- 更多字段；常驻错误：error-message="请填写必填项" -->
+  </MForm>
 </MPageSection>`,
-        rules: ['字段用 MFormItem + fluid 控件', '表单表面由 MPageSection 提供，不要重复 MCard'],
-        rulesEn: ['Use MFormItem with fluid controls', 'Let MPageSection provide the surface; do not duplicate MCard'],
-        avoid: ['不要绕过 MForm 手写校验状态'],
-        avoidEn: ['Do not bypass MForm for validation state'],
+        rules: [
+            '字段用 MFormItem + fluid 控件',
+            '左标签布局设 label-position="left" + label-width（约 5–7rem）',
+            '表单表面由 MPageSection 提供，不要重复 MCard',
+            '常驻错误用字段 errorMessage 或 token 样式 role="alert"，不要用 <MMessage> 当内嵌 Alert',
+        ],
+        rulesEn: [
+            'Use MFormItem with fluid controls',
+            'Left labels: label-position="left" + label-width (~5–7rem)',
+            'Let MPageSection provide the surface; do not duplicate MCard',
+            'Persistent errors: field errorMessage or token role="alert" — not <MMessage> as inline alert',
+        ],
+        avoid: ['不要绕过 MForm 手写校验状态', '不要把错误只画成红色边框而无文案'],
+        avoidEn: ['Do not bypass MForm for validation state', 'Do not show errors as red borders without copy'],
     },
     {
         id: 'form-actions',
@@ -679,11 +738,11 @@ const submitting = ref(false)`,
         pageTypes: ['form'],
         keywords: ['保存', '取消', 'submit', 'actions', 'footer'],
         imports: ['MPageSection', 'MSpace', 'MButton'],
-        template: `<MPageSection variant="actions">
-  <MSpace>
-    <MButton native-type="submit" severity="primary" :loading="submitting">保存</MButton>
-    <MButton severity="secondary">取消</MButton>
-  </MSpace>
+        template: `<MPageSection variant="actions">
+  <MSpace>
+    <MButton native-type="submit" severity="primary" :loading="submitting">保存</MButton>
+    <MButton severity="secondary">取消</MButton>
+  </MSpace>
 </MPageSection>`,
         rules: ['提交按钮在前，取消 secondary', '保存中传 loading 防重复提交'],
         rulesEn: ['Submit first, cancel secondary', 'Pass loading while saving to prevent duplicate submits'],
@@ -694,31 +753,59 @@ const submitting = ref(false)`,
         id: 'dashboard-kpi-grid',
         title: '仪表盘 KPI 栅格',
         titleEn: 'Dashboard KPI grid',
-        description: 'MGrid + MPageStat 展示关键指标。',
-        descriptionEn: 'Key metrics with MGrid and MPageStat.',
+        description: 'MGrid + MPageStat：带 trend / trendDirection / trendSeverity；高密条可用 density="compact"。',
+        descriptionEn: 'MGrid + MPageStat with trend / trendDirection / trendSeverity; use density="compact" for dense strips.',
         pageTypes: ['dashboard'],
-        keywords: ['kpi', '指标', 'stat', 'grid', 'metrics'],
+        keywords: ['kpi', '指标', 'stat', 'grid', 'metrics', 'trend', 'compact'],
         imports: ['MGrid', 'MGridItem', 'MPageStat'],
-        scriptSetup: `const metrics = ref([
-  { label: '总用户', value: '12,480', trend: '+8.2%', trendDirection: 'up' as const, trendLabel: '较上月', icon: 'users' },
-  { label: '今日活跃', value: '1,926', trend: '+3.1%', trendDirection: 'up' as const, trendLabel: '较昨日', icon: 'activity' },
+        scriptSetup: `const metrics = ref([
+  {
+    label: '在册成员',
+    value: '12,480',
+    trend: '+8.2%',
+    trendDirection: 'up' as const,
+    trendSeverity: 'success' as const,
+    trendLabel: '较上月',
+    icon: 'users',
+  },
+  {
+    label: '今日活跃',
+    value: '1,926',
+    trend: '-3.1%',
+    trendDirection: 'down' as const,
+    trendSeverity: 'warn' as const,
+    trendLabel: '较昨日',
+    icon: 'activity',
+  },
 ])`,
-        template: `<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
-  <MGridItem v-for="metric in metrics" :key="metric.label" :span="1">
-    <MPageStat
-      :label="metric.label"
-      :value="metric.value"
-      :trend="metric.trend"
-      :trend-direction="metric.trendDirection"
-      :trend-label="metric.trendLabel"
-      :icon="metric.icon"
-    />
-  </MGridItem>
-</MGrid>`,
-        rules: ['KPI 用 MPageStat，不要每页自定义 stat CSS', 'responsive="screen" 便于窄屏降列'],
-        rulesEn: ['Use MPageStat for KPIs', 'Use responsive="screen" for narrow layouts'],
-        avoid: ['不要每个指标手写 font-size/颜色'],
-        avoidEn: ['Do not hand-write font sizes/colors per metric'],
+        template: `<MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
+  <MGridItem v-for="metric in metrics" :key="metric.label" :span="1">
+    <MPageStat
+      :label="metric.label"
+      :value="metric.value"
+      :trend="metric.trend"
+      :trend-direction="metric.trendDirection"
+      :trend-severity="metric.trendSeverity"
+      :trend-label="metric.trendLabel"
+      :icon="metric.icon"
+    />
+  </MGridItem>
+</MGrid>
+<!-- 高密条带示例：density="compact" layout="plain" orientation="inline" -->`,
+        rules: [
+            'KPI 用 MPageStat，不要每页自定义 stat CSS',
+            '趋势务必带 trendDirection + trendSeverity（升 success / 降 warn|danger）',
+            'responsive="screen" 便于窄屏降列',
+            '密集工作台可用 density="compact"；加载中用 loading',
+        ],
+        rulesEn: [
+            'Use MPageStat for KPIs — no per-page stat CSS',
+            'Always set trendDirection + trendSeverity (up→success, down→warn|danger)',
+            'Use responsive="screen" for narrow layouts',
+            'Dense dashboards may use density="compact"; use loading while fetching',
+        ],
+        avoid: ['不要每个指标手写 font-size/颜色', '不要只有数字没有趋势语义（用户要求趋势时）'],
+        avoidEn: ['Do not hand-write font sizes/colors per metric', 'Do not omit trend semantics when the brief asks for trends'],
     },
     {
         id: 'dashboard-chart-card',
@@ -729,14 +816,14 @@ const submitting = ref(false)`,
         pageTypes: ['dashboard'],
         keywords: ['chart', '图表', 'placeholder', 'card', 'trend'],
         imports: ['MCard', 'MEmpty', 'MSkeleton'],
-        template: `<MCard title="趋势概览" shadow="always">
-  <MSkeleton v-if="loading" height="8rem" />
-  <MEmpty
-    v-else
-    aria-label="图表占位"
-    title="暂无图表数据"
-    description="图表区域（接入 ECharts / 业务组件）"
-  />
+        template: `<MCard title="趋势概览" shadow="always">
+  <MSkeleton v-if="loading" height="8rem" />
+  <MEmpty
+    v-else
+    aria-label="图表占位"
+    title="暂无图表数据"
+    description="图表区域（接入 ECharts / 业务组件）"
+  />
 </MCard>`,
         rules: ['图表区适合 MCard，因为需要 card 标题', '加载中用 MSkeleton'],
         rulesEn: ['Charts belong in MCard when a card title is needed', 'Use MSkeleton while loading'],
@@ -752,18 +839,18 @@ const submitting = ref(false)`,
         pageTypes: ['dashboard'],
         keywords: ['recent', '最近', 'table', 'card', 'list'],
         imports: ['MCard', 'MTable', 'MStatus'],
-        scriptSetup: `const recentColumns = [
-  { key: 'id', label: '工单号', width: 96 },
-  { key: 'title', label: '标题' },
-  { key: 'status', label: '状态', width: 110 },
-]
+        scriptSetup: `const recentColumns = [
+  { key: 'id', label: '工单号', width: 96 },
+  { key: 'title', label: '标题' },
+  { key: 'status', label: '状态', width: 110 },
+]
 const recentRows = ref<Record<string, unknown>[]>([])`,
-        template: `<MCard title="最近工单">
-  <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered row-key="id">
-    <template #cell-status="{ value }">
-      <MStatus :label="String(value ?? '')" severity="secondary" />
-    </template>
-  </MTable>
+        template: `<MCard title="最近工单">
+  <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered row-key="id">
+    <template #cell-status="{ value }">
+      <MStatus :label="String(value ?? '')" severity="secondary" />
+    </template>
+  </MTable>
 </MCard>`,
         rules: ['明细列表放 MCard 内合理', 'size="small" 适合卡片内表格', '行内业务状态用 MStatus'],
         rulesEn: ['Detail lists inside MCard are appropriate', 'Use size="small" for in-card tables', 'Use MStatus for row business status'],
@@ -779,10 +866,10 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         pageTypes: ['list', 'common'],
         keywords: ['page content', 'stack', 'layout content', '容器'],
         imports: ['MPageContent'],
-        template: `<MLayoutContent>
-  <MPageContent>
-    <!-- MPageFilters → MPageToolbar → MTable -->
-  </MPageContent>
+        template: `<MLayoutContent>
+  <MPageContent>
+    <!-- MPageFilters → MPageToolbar → MTable -->
+  </MPageContent>
 </MLayoutContent>`,
         rules: ['所有列表区块放在 MPageContent 内', '区块顺序：筛选 → 工具栏 → 表格'],
         rulesEn: ['Keep all list sections inside MPageContent', 'Order: filters → toolbar → table'],
@@ -798,10 +885,10 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         pageTypes: ['form', 'common'],
         keywords: ['narrow', 'form content', 'max-width'],
         imports: ['MPageContent'],
-        template: `<MLayoutContent>
-  <MPageContent width="narrow">
-    <!-- MPageHeader → MPageSection form → actions -->
-  </MPageContent>
+        template: `<MLayoutContent>
+  <MPageContent width="narrow">
+    <!-- MPageHeader → MPageSection form → actions -->
+  </MPageContent>
 </MLayoutContent>`,
         rules: ['表单页使用 width="narrow"', '不要手写 max-width CSS'],
         rulesEn: ['Use width="narrow" on form pages', 'Do not hand-write max-width CSS'],
@@ -817,14 +904,14 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         pageTypes: ['detail'],
         keywords: ['detail', '详情', 'edit', 'header'],
         imports: ['MPageHeader', 'MButton', 'MStatus', 'MSpace'],
-        template: `<MPageHeader title="示例资源" description="查看摘要与属性。">
-  <template #actions>
-    <MSpace>
-      <MStatus label="正常" severity="success" />
-      <MButton severity="primary">编辑</MButton>
-      <MButton severity="danger" text>删除</MButton>
-    </MSpace>
-  </template>
+        template: `<MPageHeader title="示例资源" description="查看摘要与属性。">
+  <template #actions>
+    <MSpace>
+      <MStatus label="正常" severity="success" />
+      <MButton severity="primary">编辑</MButton>
+      <MButton severity="danger" text>删除</MButton>
+    </MSpace>
+  </template>
 </MPageHeader>`,
         rules: ['状态用 MStatus 放在 actions 区', '编辑为 primary，删除用 danger text'],
         rulesEn: ['Use MStatus in the actions area', 'Edit is primary; delete uses danger text'],
@@ -840,13 +927,13 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         pageTypes: ['list', 'form', 'dashboard', 'detail', 'common'],
         keywords: ['页头', '主按钮', '新建', 'header', 'primary', 'actions', 'page-header'],
         imports: ['MPageHeader', 'MButton', 'MSpace'],
-        template: `<MPageHeader title="用户管理" description="管理成员与角色。">
-  <template #actions>
-    <MSpace>
-      <MButton severity="secondary" text>导入</MButton>
-      <MButton severity="primary">新建用户</MButton>
-    </MSpace>
-  </template>
+        template: `<MPageHeader title="用户管理" description="管理成员与角色。">
+  <template #actions>
+    <MSpace>
+      <MButton severity="secondary" text>导入</MButton>
+      <MButton severity="primary">新建用户</MButton>
+    </MSpace>
+  </template>
 </MPageHeader>`,
         rules: ['视口内仅一个 filled primary', '次要动作用 secondary 或 text', '批量操作用 MPageToolbar，不要塞进页头'],
         rulesEn: ['Only one filled primary in the viewport', 'Lesser actions: secondary or text', 'Batch actions belong in MPageToolbar, not the header'],
@@ -870,62 +957,62 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
             'inline create',
         ],
         imports: ['MDialog', 'MForm', 'MFormItem', 'MInput', 'MSelect', 'MButton', 'MSpace', 'message'],
-        scriptSetup: `const dialogOpen = ref(false)
-const submitting = ref(false)
-const model = reactive({
-  name: '',
-  email: '',
-  role: undefined as string | undefined,
-})
-const roleOptions = [
-  { label: '管理员', value: 'admin' },
-  { label: '成员', value: 'member' },
-]
-
-function resetModel() {
-  model.name = ''
-  model.email = ''
-  model.role = undefined
-}
-
-async function onSave() {
-  submitting.value = true
-  try {
-    // await api.save(model)
-    message.success('已保存')
-    dialogOpen.value = false
-    resetModel()
-  } finally {
-    submitting.value = false
-  }
+        scriptSetup: `const dialogOpen = ref(false)
+const submitting = ref(false)
+const model = reactive({
+  name: '',
+  email: '',
+  role: undefined as string | undefined,
+})
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]
+
+function resetModel() {
+  model.name = ''
+  model.email = ''
+  model.role = undefined
+}
+
+async function onSave() {
+  submitting.value = true
+  try {
+    // await api.save(model)
+    message.success('已保存')
+    dialogOpen.value = false
+    resetModel()
+  } finally {
+    submitting.value = false
+  }
 }`,
-        template: `<MDialog
-  v-model="dialogOpen"
-  header="新建用户"
-  width="32rem"
-  @close="resetModel"
->
-  <MForm @submit.prevent="onSave">
-    <MFormItem label="姓名" name="name" required>
-      <MInput v-model="model.name" placeholder="请输入姓名" fluid />
-    </MFormItem>
-    <MFormItem label="邮箱" name="email" required>
-      <MInput v-model="model.email" type="email" placeholder="name@example.com" fluid />
-    </MFormItem>
-    <MFormItem label="角色" name="role" required>
-      <MSelect v-model="model.role" :options="roleOptions" placeholder="请选择角色" fluid />
-    </MFormItem>
-  </MForm>
-  <template #footer>
-    <MSpace style="justify-content: flex-end; width: 100%">
-      <MButton severity="secondary" text :disabled="submitting" @click="dialogOpen = false">
-        取消
-      </MButton>
-      <MButton severity="primary" :loading="submitting" @click="onSave">
-        保存
-      </MButton>
-    </MSpace>
-  </template>
+        template: `<MDialog
+  v-model="dialogOpen"
+  header="新建用户"
+  width="32rem"
+  @close="resetModel"
+>
+  <MForm @submit.prevent="onSave">
+    <MFormItem label="姓名" name="name" required>
+      <MInput v-model="model.name" placeholder="请输入姓名" fluid />
+    </MFormItem>
+    <MFormItem label="邮箱" name="email" required>
+      <MInput v-model="model.email" type="email" placeholder="name@example.com" fluid />
+    </MFormItem>
+    <MFormItem label="角色" name="role" required>
+      <MSelect v-model="model.role" :options="roleOptions" placeholder="请选择角色" fluid />
+    </MFormItem>
+  </MForm>
+  <template #footer>
+    <MSpace style="justify-content: flex-end; width: 100%">
+      <MButton severity="secondary" text :disabled="submitting" @click="dialogOpen = false">
+        取消
+      </MButton>
+      <MButton severity="primary" :loading="submitting" @click="onSave">
+        保存
+      </MButton>
+    </MSpace>
+  </template>
 </MDialog>`,
         rules: [
             '留在列表页，不另开路由',
@@ -957,44 +1044,44 @@ async function onSave() {
         pageTypes: ['list', 'detail', 'common'],
         keywords: ['抽屉表单', '侧滑编辑', 'drawer form', 'form-in-drawer', 'side panel edit'],
         imports: ['MDrawer', 'MForm', 'MFormItem', 'MInput', 'MButton', 'MSpace', 'message'],
-        scriptSetup: `const drawerOpen = ref(false)
-const submitting = ref(false)
-const model = reactive({ name: '', note: '' })
-
-async function onSave() {
-  submitting.value = true
-  try {
-    message.success('已保存')
-    drawerOpen.value = false
-  } finally {
-    submitting.value = false
-  }
+        scriptSetup: `const drawerOpen = ref(false)
+const submitting = ref(false)
+const model = reactive({ name: '', note: '' })
+
+async function onSave() {
+  submitting.value = true
+  try {
+    message.success('已保存')
+    drawerOpen.value = false
+  } finally {
+    submitting.value = false
+  }
 }`,
-        template: `<MDrawer
-  v-model="drawerOpen"
-  header="编辑详情"
-  position="right"
-  size="28rem"
-  @close="/* reset draft */"
->
-  <MForm @submit.prevent="onSave">
-    <MFormItem label="名称" name="name" required>
-      <MInput v-model="model.name" fluid />
-    </MFormItem>
-    <MFormItem label="备注" name="note">
-      <MInput v-model="model.note" fluid />
-    </MFormItem>
-  </MForm>
-  <template #footer>
-    <MSpace style="justify-content: flex-end; width: 100%">
-      <MButton severity="secondary" text :disabled="submitting" @click="drawerOpen = false">
-        取消
-      </MButton>
-      <MButton severity="primary" :loading="submitting" @click="onSave">
-        保存
-      </MButton>
-    </MSpace>
-  </template>
+        template: `<MDrawer
+  v-model="drawerOpen"
+  header="编辑详情"
+  position="right"
+  size="28rem"
+  @close="/* reset draft */"
+>
+  <MForm @submit.prevent="onSave">
+    <MFormItem label="名称" name="name" required>
+      <MInput v-model="model.name" fluid />
+    </MFormItem>
+    <MFormItem label="备注" name="note">
+      <MInput v-model="model.note" fluid />
+    </MFormItem>
+  </MForm>
+  <template #footer>
+    <MSpace style="justify-content: flex-end; width: 100%">
+      <MButton severity="secondary" text :disabled="submitting" @click="drawerOpen = false">
+        取消
+      </MButton>
+      <MButton severity="primary" :loading="submitting" @click="onSave">
+        保存
+      </MButton>
+    </MSpace>
+  </template>
 </MDrawer>`,
         rules: ['position 常用 right；较长表单可加大 size', '字段 fluid；底栏放 #footer', '成功用 message.success'],
         rulesEn: ['position usually right; raise size for longer forms', 'Fields fluid; actions in #footer', 'Success via message.success'],
@@ -1010,28 +1097,28 @@ async function onSave() {
         pageTypes: ['list', 'detail', 'common'],
         keywords: ['删除', '确认', '二次确认', 'confirm', 'delete', 'ConfirmDialog', '危险'],
         imports: ['MConfirmDialog', 'message'],
-        scriptSetup: `const confirmOpen = ref(false)
-const pendingId = ref<string | null>(null)
-
-function askDelete(id: string) {
-  pendingId.value = id
-  confirmOpen.value = true
-}
-
-function onAcceptDelete() {
-  // await api.remove(pendingId.value)
-  message.success('已删除')
-  pendingId.value = null
-  confirmOpen.value = false
+        scriptSetup: `const confirmOpen = ref(false)
+const pendingId = ref<string | null>(null)
+
+function askDelete(id: string) {
+  pendingId.value = id
+  confirmOpen.value = true
+}
+
+function onAcceptDelete() {
+  // await api.remove(pendingId.value)
+  message.success('已删除')
+  pendingId.value = null
+  confirmOpen.value = false
 }`,
-        template: `<MConfirmDialog
-  v-model="confirmOpen"
-  header="确认删除"
-  message="删除后不可恢复，确定继续？"
-  accept-label="删除"
-  reject-label="取消"
-  accept-severity="danger"
-  @accept="onAcceptDelete"
+        template: `<MConfirmDialog
+  v-model="confirmOpen"
+  header="确认删除"
+  message="删除后不可恢复，确定继续？"
+  accept-label="删除"
+  reject-label="取消"
+  accept-severity="danger"
+  @accept="onAcceptDelete"
 />`,
         rules: ['用 MConfirmDialog，不要手写 Dialog 确定/取消', 'acceptSeverity="danger"', '成功用 message.success，不要 toast'],
         rulesEn: ['Use MConfirmDialog; do not hand-roll Dialog Yes/No', 'acceptSeverity="danger"', 'Success via message.success, not toast'],
@@ -1047,15 +1134,15 @@ function onAcceptDelete() {
         pageTypes: ['list', 'common'],
         keywords: ['更多', '行菜单', 'dropdown', 'row menu', 'overflow', 'actions menu'],
         imports: ['MDropdown', 'MButton'],
-        scriptSetup: `const rowMenu = [
-  { label: '编辑', command: () => {/* open edit */} },
-  { label: '复制', command: () => {/* duplicate */} },
-  { label: '删除', severity: 'danger', command: () => {/* askDelete */} },
+        scriptSetup: `const rowMenu = [
+  { label: '编辑', command: () => {/* open edit */} },
+  { label: '复制', command: () => {/* duplicate */} },
+  { label: '删除', severity: 'danger', command: () => {/* askDelete */} },
 ]`,
-        template: `<template #cell-actions>
-  <MDropdown :model="rowMenu">
-    <MButton severity="secondary" size="small" text icon="more-horizontal" aria-label="更多操作" />
-  </MDropdown>
+        template: `<template #cell-actions>
+  <MDropdown :model="rowMenu">
+    <MButton severity="secondary" size="small" text icon="more-horizontal" aria-label="更多操作" />
+  </MDropdown>
 </template>`,
         rules: ['操作很多时再用 Dropdown；2–3 个明确操作用 text 按钮', '危险项走 confirm-delete', '图标按钮必须 aria-label'],
         rulesEn: ['Use Dropdown when many actions; 2–3 explicit actions stay as text buttons', 'Danger → confirm-delete', 'Icon-only buttons need aria-label'],
@@ -1071,45 +1158,45 @@ function onAcceptDelete() {
         pageTypes: ['form', 'common'],
         keywords: ['向导', '分步', '步骤', 'wizard', 'stepper', 'multi-step'],
         imports: ['MStepper', 'MForm', 'MFormItem', 'MInput', 'MButton', 'MSpace', 'MPageSection', 'message'],
-        scriptSetup: `const activeStep = ref(0)
-const submitting = ref(false)
-const steps = [
-  { label: '基本信息', description: '名称与说明' },
-  { label: '确认', description: '核对后创建' },
-]
-const model = reactive({ name: '' })
-
-function back() {
-  if (activeStep.value > 0) activeStep.value -= 1
-}
-function next() {
-  if (activeStep.value < steps.length - 1) activeStep.value += 1
-}
-async function finish() {
-  submitting.value = true
-  try {
-    message.success('已创建')
-  } finally {
-    submitting.value = false
-  }
+        scriptSetup: `const activeStep = ref(0)
+const submitting = ref(false)
+const steps = [
+  { label: '基本信息', description: '名称与说明' },
+  { label: '确认', description: '核对后创建' },
+]
+const model = reactive({ name: '' })
+
+function back() {
+  if (activeStep.value > 0) activeStep.value -= 1
+}
+function next() {
+  if (activeStep.value < steps.length - 1) activeStep.value += 1
+}
+async function finish() {
+  submitting.value = true
+  try {
+    message.success('已创建')
+  } finally {
+    submitting.value = false
+  }
 }`,
-        template: `<MStepper v-model="activeStep" :steps="steps" linear />
-<MPageSection variant="form">
-  <MForm v-if="activeStep === 0" @submit.prevent="next">
-    <MFormItem label="名称" name="name" required>
-      <MInput v-model="model.name" fluid />
-    </MFormItem>
-  </MForm>
-  <div v-else>
-    <p>确认创建「{{ model.name }}」？</p>
-  </div>
-</MPageSection>
-<MPageSection variant="actions">
-  <MSpace>
-    <MButton severity="secondary" text :disabled="activeStep === 0" @click="back">上一步</MButton>
-    <MButton v-if="activeStep < steps.length - 1" severity="primary" @click="next">下一步</MButton>
-    <MButton v-else severity="primary" :loading="submitting" @click="finish">创建</MButton>
-  </MSpace>
+        template: `<MStepper v-model="activeStep" :steps="steps" linear />
+<MPageSection variant="form">
+  <MForm v-if="activeStep === 0" @submit.prevent="next">
+    <MFormItem label="名称" name="name" required>
+      <MInput v-model="model.name" fluid />
+    </MFormItem>
+  </MForm>
+  <div v-else>
+    <p>确认创建「{{ model.name }}」？</p>
+  </div>
+</MPageSection>
+<MPageSection variant="actions">
+  <MSpace>
+    <MButton severity="secondary" text :disabled="activeStep === 0" @click="back">上一步</MButton>
+    <MButton v-if="activeStep < steps.length - 1" severity="primary" @click="next">下一步</MButton>
+    <MButton v-else severity="primary" :loading="submitting" @click="finish">创建</MButton>
+  </MSpace>
 </MPageSection>`,
         rules: ['用 :steps（不是 :items）', '每步一个主任务；进入下一步前校验当前步', '完成文案与「下一步」区分'],
         rulesEn: ['Use :steps (not :items)', 'One job per step; validate before advancing', 'Finish label differs from Next'],
@@ -1125,50 +1212,50 @@ async function finish() {
         pageTypes: ['common'],
         keywords: ['登录', '认证', '分栏', 'login', 'auth', 'split', 'brand'],
         imports: ['MForm', 'MFormItem', 'MInput', 'MInputPassword', 'MButton', 'MSpace', 'MConfigProvider', 'zhCN'],
-        scriptSetup: `const submitting = ref(false)
-const formError = ref('')
-const model = reactive({ email: '', password: '' })
-
-async function onSubmit() {
-  formError.value = ''
-  submitting.value = true
-  try {
-    if (!model.email || !model.password) {
-      formError.value = '请输入邮箱和密码后再试。'
-    }
-  } finally {
-    submitting.value = false
-  }
+        scriptSetup: `const submitting = ref(false)
+const formError = ref('')
+const model = reactive({ email: '', password: '' })
+
+async function onSubmit() {
+  formError.value = ''
+  submitting.value = true
+  try {
+    if (!model.email || !model.password) {
+      formError.value = '请输入邮箱和密码后再试。'
+    }
+  } finally {
+    submitting.value = false
+  }
 }`,
-        template: `<MConfigProvider :locale="zhCN">
-  <div class="login-shell">
-    <aside class="login-brand" aria-label="品牌">
-      <p class="login-brand__mark">产品名</p>
-      <h1 class="login-brand__title">一句品牌主张</h1>
-      <p class="login-brand__lead">一句支持说明。</p>
-    </aside>
-    <main class="login-main">
-      <div class="login-panel">
-        <header class="login-panel__header">
-          <h2>登录</h2>
-          <p>使用工作邮箱进入。</p>
-        </header>
-        <p v-if="formError" class="login-alert" role="alert">{{ formError }}</p>
-        <MForm @submit="onSubmit">
-          <MFormItem label="邮箱" name="email" required>
-            <MInput v-model="model.email" type="email" autocomplete="username" fluid />
-          </MFormItem>
-          <MFormItem label="密码" name="password" required>
-            <MInputPassword v-model="model.password" autocomplete="current-password" fluid />
-          </MFormItem>
-          <MSpace style="margin-top: var(--m-space-2)" alignment="center">
-            <MButton type="submit" label="登录" severity="primary" :loading="submitting" />
-            <MButton type="button" label="忘记密码" severity="secondary" text />
-          </MSpace>
-        </MForm>
-      </div>
-    </main>
-  </div>
+        template: `<MConfigProvider :locale="zhCN">
+  <div class="login-shell">
+    <aside class="login-brand" aria-label="品牌">
+      <p class="login-brand__mark">产品名</p>
+      <h1 class="login-brand__title">一句品牌主张</h1>
+      <p class="login-brand__lead">一句支持说明。</p>
+    </aside>
+    <main class="login-main">
+      <div class="login-panel">
+        <header class="login-panel__header">
+          <h2>登录</h2>
+          <p>使用工作邮箱进入。</p>
+        </header>
+        <p v-if="formError" class="login-alert" role="alert">{{ formError }}</p>
+        <MForm @submit="onSubmit">
+          <MFormItem label="邮箱" name="email" required>
+            <MInput v-model="model.email" type="email" autocomplete="username" fluid />
+          </MFormItem>
+          <MFormItem label="密码" name="password" required>
+            <MInputPassword v-model="model.password" autocomplete="current-password" fluid />
+          </MFormItem>
+          <MSpace style="margin-top: var(--m-space-2)" alignment="center">
+            <MButton type="submit" label="登录" severity="primary" :loading="submitting" />
+            <MButton type="button" label="忘记密码" severity="secondary" text />
+          </MSpace>
+        </MForm>
+      </div>
+    </main>
+  </div>
 </MConfigProvider>`,
         rules: [
             '品牌区用 --m-* / color-mix，默认扁平勿叠 aurora',
@@ -1210,29 +1297,29 @@ async function onSubmit() {
             'MConfigProvider',
             'zhCN',
         ],
-        template: `<MConfigProvider :locale="zhCN">
-  <MLayout fill-viewport has-sider>
-    <MLayoutSider v-model:collapsed="siderCollapsed" bordered :collapsed-width="72">
-      <MMenu
-        :model="[
-          { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
-          { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
-        ]"
-        :collapsed="siderCollapsed"
-        :collapsed-width="72"
-      />
-    </MLayoutSider>
-    <MLayout>
-      <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
-        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '当前页' }]" />
-      </MLayoutHeader>
-      <MLayoutContent>
-        <MPageContent>
-          <!-- page sections -->
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MLayout>
+        template: `<MConfigProvider :locale="zhCN">
+  <MLayout fill-viewport has-sider>
+    <MLayoutSider v-model:collapsed="siderCollapsed" bordered :collapsed-width="72">
+      <MMenu
+        :model="[
+          { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
+          { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
+        ]"
+        :collapsed="siderCollapsed"
+        :collapsed-width="72"
+      />
+    </MLayoutSider>
+    <MLayout>
+      <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '当前页' }]" />
+      </MLayoutHeader>
+      <MLayoutContent>
+        <MPageContent>
+          <!-- page sections -->
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MLayout>
 </MConfigProvider>`,
         rules: [
             '根布局用 fillViewport',
@@ -1265,19 +1352,19 @@ async function onSubmit() {
             'log',
         ],
         imports: ['MScrollbar', 'MCard'],
-        template: `<MCard title="活动日志">
-  <MScrollbar max-height="16rem">
-    <ul style="margin:0;padding:0;list-style:none">
-      <li v-for="item in logLines" :key="item.id" style="padding:var(--m-space-2) 0;border-bottom:1px solid var(--m-color-border)">
-        {{ item.text }}
-      </li>
-    </ul>
-  </MScrollbar>
+        template: `<MCard title="活动日志">
+  <MScrollbar max-height="16rem">
+    <ul style="margin:0;padding:0;list-style:none">
+      <li v-for="item in logLines" :key="item.id" style="padding:var(--m-space-2) 0;border-bottom:1px solid var(--m-color-border)">
+        {{ item.text }}
+      </li>
+    </ul>
+  </MScrollbar>
 </MCard>`,
-        scriptSetup: `const logLines = [
-  { id: '1', text: '用户 admin 登录成功' },
-  { id: '2', text: '导出任务已完成' },
-  { id: '3', text: '配置已保存' },
+        scriptSetup: `const logLines = [
+  { id: '1', text: '用户 admin 登录成功' },
+  { id: '2', text: '导出任务已完成' },
+  { id: '3', text: '配置已保存' },
 ]`,
         rules: [
             '整页主滚动推荐 MLayout fillViewport',