@morya-ui/mcp 0.3.4 → 0.3.5

package/dist/page-snippets.js

@@ -1,12 +1,12 @@
 export const pageSnippets = [
     {
         id: 'list-filters',
-        title: '列表页筛选区',
-        titleEn: 'List page filter bar',
-        description: '在 MPageContent 内追加或替换筛选区，使用 MPageFilters + MSpace 包裹控件。',
-        descriptionEn: 'Add or replace a filter region inside MPageContent using MPageFilters and MSpace.',
+        title: '列表页基础筛选栏',
+        titleEn: 'Basic list filter bar',
+        description: '关键词 + 1–2 个枚举 + 查询/重置。条件少、无需已选摘要时用本片段；有次要条件用 list-filters-collapsible；默认列表推荐 list-filters-stack。',
+        descriptionEn: 'Keyword + 1–2 enums + query/reset. Use for few filters without chips; secondary fields → list-filters-collapsible; default list → list-filters-stack.',
         pageTypes: ['list'],
-        keywords: ['筛选', '搜索', '查询', 'filters', 'filter', 'search', 'keyword', 'reset'],
+        keywords: ['筛选', '搜索', '查询', 'filters', 'filter', 'search', 'keyword', 'reset', '基础筛选'],
         imports: ['MPageFilters', 'MSpace', 'MInput', 'MSelect', 'MButton'],
         scriptSetup: `const keyword = ref('')
 const status = ref<string | undefined>()
@@ -14,7 +14,12 @@ 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" />
@@ -25,27 +30,64 @@ const statusOptions = [
       clearable
       style="width: 10rem"
     />
-    <MButton severity="secondary">查询</MButton>
-    <MButton severity="secondary" text>重置</MButton>
   </MSpace>
+  <template #actions>
+    <MButton severity="secondary">查询</MButton>
+    <MButton severity="secondary" text @click="resetFilters">重置</MButton>
+  </template>
 </MPageFilters>`,
-        rules: ['放在 MPageHeader 之后、表格之前', 'viewport 内仅一个 primary（通常在 Header）', '不要外包 MCard'],
-        rulesEn: ['Place after MPageHeader and before the table', 'Keep one primary in the viewport (usually in Header)', 'Do not wrap with MCard'],
-        avoid: ['不要手写 .page-filters 类', '不要用 MCard 包筛选区'],
-        avoidEn: ['Do not hand-write .page-filters classes', 'Do not wrap filters in MCard'],
+        rules: [
+            '放在 MPageHeader 之后、表格（或 FilterChips）之前',
+            '查询/重置放 #actions（尾部簇）；viewport 内 primary 通常在 Header',
+            'variant 默认 filled；dense craft 可用 plain + size="small"',
+            '不要外包 MCard',
+        ],
+        rulesEn: [
+            'Place after MPageHeader and before the table (or FilterChips)',
+            'Query/reset in #actions (trailing cluster); viewport primary usually in Header',
+            'Default variant filled; dense craft may use plain + size="small"',
+            'Do not wrap with MCard',
+        ],
+        avoid: [
+            '不要手写 .page-filters 类',
+            '不要用 MCard 包筛选区',
+            '条件 ≥3 且含次要字段时不要硬用本片段 → list-filters-collapsible / list-filters-stack',
+        ],
+        avoidEn: [
+            'Do not hand-write .page-filters classes',
+            'Do not wrap filters in MCard',
+            'When ≥3 filters with secondary fields → list-filters-collapsible / list-filters-stack',
+        ],
     },
     {
         id: 'list-filters-collapsible',
-        title: '列表页折叠筛选',
-        titleEn: 'Collapsible list filters',
-        description: 'MPageFilters collapsible + #advanced 隐藏次要字段。',
-        descriptionEn: 'Hide secondary fields with collapsible MPageFilters and an #advanced slot.',
+        title: '列表页折叠高级筛选',
+        titleEn: 'Collapsible advanced list filters',
+        description: '常用条件在 default，次要条件在 #advanced；对齐 list-page 黄金结构。通常再接 list-filter-chips，或直接用 list-filters-stack。',
+        descriptionEn: 'Primary filters in default, secondary in #advanced (list-page structure). Usually pair with list-filter-chips, or use list-filters-stack.',
         pageTypes: ['list'],
-        keywords: ['折叠', '高级筛选', 'collapse', 'advanced', 'expand', 'filter'],
+        keywords: ['折叠', '高级筛选', 'collapse', 'advanced', 'expand', 'filter', '次要条件'],
         imports: ['MPageFilters', 'MSpace', 'MInput', 'MSelect', 'MButton'],
         scriptSetup: `const filtersExpanded = ref(false)
 const keyword = ref('')
-const department = ref<string | null>(null)`,
+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="筛选"
@@ -54,14 +96,23 @@ const department = ref<string | null>(null)`,
 >
   <MSpace wrap>
     <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
-    <MButton severity="secondary">查询</MButton>
-    <MButton severity="secondary" text>重置</MButton>
+    <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="[{ label: '研发', value: '研发' }, { label: '运营', value: '运营' }]"
+        :options="departmentOptions"
         placeholder="部门"
         clearable
         style="width: 10rem"
@@ -69,21 +120,68 @@ const department = ref<string | null>(null)`,
     </MSpace>
   </template>
 </MPageFilters>`,
-        rules: ['常用条件放 default，次要条件放 #advanced', '查询/重置保持 secondary'],
-        rulesEn: ['Keep primary filters in default; secondary filters in #advanced', 'Query/reset stay secondary'],
-        avoid: ['不要用 MCard 包整个筛选区'],
-        avoidEn: ['Do not wrap the whole filter bar in MCard'],
+        rules: [
+            '常用条件放 default，次要条件放 #advanced',
+            '查询/重置放 #actions；toggle 自带「高级筛选/收起」+ chevron',
+            '必须 collapsible + v-model:expanded + #advanced',
+            '重置应清掉 advanced 字段',
+        ],
+        rulesEn: [
+            'Primary filters in default; secondary in #advanced',
+            'Query/reset in #actions; toggle ships Advanced/Collapse + chevron',
+            'Require collapsible + v-model:expanded + #advanced',
+            'Reset clears advanced fields too',
+        ],
+        avoid: [
+            '不要用 MCard 包整个筛选区',
+            '不要只有 #advanced 却不设 collapsible',
+            '不要把查询按钮放进 #advanced',
+        ],
+        avoidEn: [
+            'Do not wrap the whole filter bar in MCard',
+            'Do not provide #advanced without collapsible',
+            'Do not put Query inside #advanced',
+        ],
     },
     {
         id: 'list-filter-chips',
-        title: '列表页已选筛选',
+        title: '列表页已选筛选 Chips',
         titleEn: 'Active filter chips',
-        description: 'MPageFilterChips + MTag closable 展示并清除已选条件。',
-        descriptionEn: 'Show and clear active filters with MPageFilterChips and closable MTag.',
+        description: 'MPageFilterChips + closable MTag；放在 MPageFilters 与表格之间。需配合筛选 ref + activeFilters computed；完整栈见 list-filters-stack。',
+        descriptionEn: 'MPageFilterChips + closable MTag between filters and table. Needs filter refs + activeFilters computed; full stack → list-filters-stack.',
         pageTypes: ['list'],
-        keywords: ['已选', 'chip', 'tag', 'active', 'clear', '筛选'],
+        keywords: ['已选', 'chip', 'tag', 'active', 'clear', '筛选', 'FilterChips', '已选筛选'],
         imports: ['MPageFilterChips', 'MTag'],
-        template: `<MPageFilterChips label="已选" aria-label="已选筛选">
+        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"
@@ -94,10 +192,226 @@ const department = ref<string | null>(null)`,
     @close="clearFilter(item.key)"
   />
 </MPageFilterChips>`,
-        rules: ['放在 MPageFilters 之后、表格之前', '用业务 computed 生成 activeFilters'],
-        rulesEn: ['Place after MPageFilters and before the table', 'Derive activeFilters from filter state'],
-        avoid: ['不要手写 pill 样式或 dashed 壳'],
-        avoidEn: ['Do not hand-write pill or dashed shells'],
+        rules: [
+            '放在 MPageFilters 之后、表格之前',
+            '用 computed 从筛选状态生成 activeFilters；关闭 Tag 时写回对应 ref',
+            '无已选条件时用 v-if 隐藏整块',
+        ],
+        rulesEn: [
+            'Place after MPageFilters and before the table',
+            'Derive activeFilters from filter state; closing a Tag writes back the ref',
+            'Hide the whole block with v-if when empty',
+        ],
+        avoid: [
+            '不要手写 pill 样式或 dashed 壳',
+            '不要用 MTag 代替筛选控件本身',
+            '不要把 Chips 塞进 MPageFilters 默认槽（可用 #active，但更常见是下方独立 Chips）',
+        ],
+        avoidEn: [
+            'Do not hand-write pill or dashed shells',
+            'Do not replace filter controls with MTag',
+            'Do not put chips in the PageFilters default slot (optional #active; prefer sibling Chips)',
+        ],
+    },
+    {
+        id: 'list-filters-stack',
+        title: '列表筛选完整栈（折叠 + 已选）',
+        titleEn: 'Full list filter stack (collapsible + chips)',
+        description: '默认推荐的列表筛选组合：MPageFilters collapsible + #advanced + MPageFilterChips。对齐 list-page / list-page-rail 黄金结构；dense 无高级条件时可改用 list-filters（plain/small）。',
+        descriptionEn: 'Default recommended list filter composition: collapsible MPageFilters + #advanced + MPageFilterChips. Mirrors list-page / list-page-rail; dense with few fields may use list-filters (plain/small).',
+        pageTypes: ['list'],
+        keywords: [
+            '筛选组合',
+            '筛选栈',
+            '高级筛选',
+            '已选筛选',
+            'filter stack',
+            'filters stack',
+            'collapsible',
+            'chips',
+            'list-page',
+            '完整筛选',
+        ],
+        imports: [
+            'MPageFilters',
+            'MPageFilterChips',
+            'MSpace',
+            'MInput',
+            'MSelect',
+            '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
+}`,
+        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',
+            '查询/重置放 #actions；toggle 为「高级筛选/收起」+ chevron',
+            '重置与 Chip @close 必须写回同一套筛选 ref',
+            'dense/compact 且无高级条件：可降级为 list-filters-dense',
+        ],
+        rulesEn: [
+            'Order: Header → Filters → FilterChips → (optional Toolbar) → Table',
+            'Query/reset in #actions; toggle is Advanced/Collapse + chevron',
+            'Reset and Chip @close must write the same filter refs',
+            'Dense/compact without advanced fields: fall back to list-filters-dense',
+        ],
+        avoid: [
+            '不要拆成互不共享状态的 Filters 与 Chips',
+            '不要用 MCard 包筛选栈',
+            '不要用手写 div 模拟已选条',
+        ],
+        avoidEn: [
+            'Do not split Filters and Chips with disconnected state',
+            'Do not wrap the filter stack in MCard',
+            'Do not hand-roll an active-filter bar',
+        ],
+    },
+    {
+        id: 'list-filters-dense',
+        title: '列表页紧凑筛选栏',
+        titleEn: 'Dense list filter bar',
+        description: 'list-page-dense craft：variant="plain" + size="small"，字段少、无折叠/Chips。监控/告警等高密度列表用。',
+        descriptionEn: 'list-page-dense craft: variant="plain" + size="small", few fields, no collapse/chips. For dense monitoring/alert lists.',
+        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
+}`,
+        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',
+            '控件统一 size="small"；Filters 用 variant="plain"',
+            '查询/重置放 #actions，仍为 secondary',
+        ],
+        rulesEn: [
+            'Only for dense/compact craft; default lists use list-filters-stack',
+            'Controls size="small"; Filters variant="plain"',
+            'Query/reset in #actions; stay secondary',
+        ],
+        avoid: [
+            '不要在普通 soft 列表默认套 dense 筛选',
+            '不要在 dense 栏再叠一排大号 filled Filters',
+        ],
+        avoidEn: [
+            'Do not default soft lists to dense filters',
+            'Do not stack a large filled Filters bar on dense craft',
+        ],
     },
     {
         id: 'list-toolbar',
@@ -122,8 +436,8 @@ const department = ref<string | null>(null)`,
         id: 'list-batch-toolbar',
         title: '列表页批量操作条',
         titleEn: 'List batch action row',
-        description: '表格多选时的批量操作，放在筛选区之后（可选）。',
-        descriptionEn: 'Optional batch actions after filters when rows are selectable.',
+        description: '表格多选时的批量操作，放在筛选区（及 FilterChips）之后（可选）。',
+        descriptionEn: 'Optional batch actions after filters (and FilterChips) when rows are selectable.',
         pageTypes: ['list'],
         keywords: ['批量', '已选', 'toolbar', 'batch', 'export', 'delete'],
         imports: ['MPageToolbar', 'MButton'],
@@ -134,8 +448,8 @@ const department = ref<string | null>(null)`,
     <MButton severity="danger" text>删除</MButton>
   </template>
 </MPageToolbar>`,
-        rules: ['左侧用 default 插槽展示已选数量', '批量操作用 text/outlined，danger 仅 destructive'],
-        rulesEn: ['Use the default slot for selection count', 'Batch actions use text/outlined; danger only for destructive ops'],
+        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'],
         avoid: ['不要用 Toolbar title 充当页面标题'],
         avoidEn: ['Do not use Toolbar title as the page heading'],
     },
@@ -517,6 +831,366 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         avoid: ['不要把操作散落到多个无关区域'],
         avoidEn: ['Do not scatter actions across unrelated areas'],
     },
+    {
+        id: 'page-header-actions',
+        title: '页头单主操作',
+        titleEn: 'Page header with one primary action',
+        description: 'MPageHeader + #actions：视口内仅一个 filled primary，次要用 secondary/text。',
+        descriptionEn: 'MPageHeader + #actions: one filled primary in the viewport; secondary/text for lesser actions.',
+        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>
+</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'],
+        avoid: ['不要在页头和筛选区各放一个实心 primary', '不要把危险删除做成页头唯一实心按钮'],
+        avoidEn: ['Do not place a solid primary in both header and filters', 'Do not make destructive delete the only solid header button'],
+    },
+    {
+        id: 'form-in-dialog',
+        title: '列表内弹窗短表单',
+        titleEn: 'Short form in dialog from a list',
+        description: '同页 MDialog + MForm + #footer；短 CRUD 默认路径（约 ≤8 字段）。',
+        descriptionEn: 'Same-page MDialog + MForm + #footer; default short CRUD path (~≤8 fields).',
+        pageTypes: ['list', 'common'],
+        keywords: [
+            '弹窗表单',
+            '新建弹窗',
+            '编辑弹窗',
+            'dialog form',
+            'form-in-dialog',
+            'modal form',
+            '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
+  }
+}`,
+        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: [
+            '留在列表页，不另开路由',
+            '宽度约 28–36rem；字段用 fluid',
+            '取消/保存放 #footer；成功用 message.success',
+        ],
+        rulesEn: [
+            'Stay on the list page; do not open a new route',
+            'Width ~28–36rem; fields use fluid',
+            'Cancel/save in #footer; success via message.success',
+        ],
+        avoid: [
+            '不要用 visible 代替 v-model',
+            '不要把长多分组表单塞进 Dialog → form-page / form-in-drawer',
+            '不要用 toast 代替单行 message',
+        ],
+        avoidEn: [
+            'Do not use visible instead of v-model',
+            'Do not stuff long multi-section forms into Dialog → form-page / form-in-drawer',
+            'Do not use toast for a one-line message',
+        ],
+    },
+    {
+        id: 'form-in-drawer',
+        title: '列表内侧滑表单',
+        titleEn: 'Form in drawer from a list',
+        description: '同页 MDrawer + MForm + #footer；比 Dialog 更长但仍需对照列表。',
+        descriptionEn: 'Same-page MDrawer + MForm + #footer; longer than a dialog but list context still matters.',
+        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
+  }
+}`,
+        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'],
+        avoid: ['极短 2–3 字段也用 Drawer → form-in-dialog', '危险删除只用 Drawer 无确认 → confirm-delete'],
+        avoidEn: ['Tiny 2–3 field forms → form-in-dialog', 'Destructive delete without confirm → confirm-delete'],
+    },
+    {
+        id: 'confirm-delete',
+        title: '危险删除确认',
+        titleEn: 'Destructive delete confirm',
+        description: 'MConfirmDialog + message.success；列表行删除默认路径。',
+        descriptionEn: 'MConfirmDialog + message.success; default for list-row delete.',
+        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
+}`,
+        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'],
+        avoid: ['普通 Dialog 冒充删除确认', '编辑表单误用 ConfirmDialog'],
+        avoidEn: ['Faking delete confirm with Dialog', 'Using ConfirmDialog for edit forms'],
+    },
+    {
+        id: 'row-actions-menu',
+        title: '表格行更多操作菜单',
+        titleEn: 'Table row overflow actions menu',
+        description: '操作较多时用 MDropdown 收纳行内动作；少量明确操作仍用 list-row-actions。',
+        descriptionEn: 'Use MDropdown when there are many row actions; prefer list-row-actions for a few explicit buttons.',
+        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 */} },
+]`,
+        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'],
+        avoid: ['表单枚举用 Dropdown → Select', '只有编辑/删除也强行收进菜单'],
+        avoidEn: ['Form enums via Dropdown → Select', 'Forcing edit/delete into a menu when two text buttons suffice'],
+    },
+    {
+        id: 'wizard-steps',
+        title: '分步向导 Stepper + Form',
+        titleEn: 'Wizard stepper with per-step form',
+        description: 'MStepper :steps + 每步一个 MForm；完成可用 result-block。',
+        descriptionEn: 'MStepper :steps + one MForm per step; finish with result-block when useful.',
+        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
+  }
+}`,
+        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'],
+        avoid: ['所有字段藏在单页超长表单', '允许跳过有前置依赖的步骤'],
+        avoidEn: ['Hiding all fields on one long page', 'Skipping steps with prerequisites'],
+    },
+    {
+        id: 'auth-split-shell',
+        title: '登录左右分栏壳',
+        titleEn: 'Auth split brand + form shell',
+        description: '左品牌 / 右表单；控件 M*；失败用 role="alert" 或 errorMessage，不用 Toast。',
+        descriptionEn: 'Brand left / form right; M* controls; failures via role="alert" or errorMessage, not Toast.',
+        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
+  }
+}`,
+        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',
+            '失败留在表单区（role="alert" 或 errorMessage），不要 Toast',
+            '窄屏改为单栏：表单在上或品牌收短',
+        ],
+        rulesEn: [
+            'Brand panel: --m-* / color-mix; flat by default — no stacked aurora',
+            'Keep failures in the form (role="alert" or errorMessage), not Toast',
+            'Narrow screens: single column',
+        ],
+        avoid: [
+            '不要把 MMessage 当内嵌 Alert',
+            '不要引入第二套 UI 库做登录壳',
+            '不要未询问就加玻璃/霓虹/全页渐变',
+        ],
+        avoidEn: [
+            'Do not use MMessage as an inline Alert',
+            'Do not bring a second UI kit for the auth shell',
+            'Do not add glass/neon/full-page gradients unless asked',
+        ],
+    },
     {
         id: 'layout-app-shell',
         title: '后台应用骨架',