@morya-ui/mcp 0.2.1 → 0.2.3

package/dist/page-snippets.d.ts

@@ -0,0 +1,33 @@
+export type PageSnippetPageType = 'list' | 'form' | 'dashboard' | 'detail' | 'common';
+export interface PageSnippet {
+    id: string;
+    title: string;
+    titleEn: string;
+    description: string;
+    descriptionEn: string;
+    pageTypes: PageSnippetPageType[];
+    keywords: string[];
+    imports: string[];
+    scriptSetup?: string;
+    template: string;
+    rules: string[];
+    rulesEn: string[];
+    avoid: string[];
+    avoidEn: string[];
+}
+export declare const pageSnippets: PageSnippet[];
+export declare function findPageSnippet(id: string): PageSnippet | undefined;
+export declare function scorePageSnippet(snippet: PageSnippet, query: string): number;
+export declare function filterPageSnippets(args: {
+    query?: string;
+    pageType?: string;
+    limit?: number;
+    offset?: number;
+}): {
+    total: number;
+    items: PageSnippet[];
+    offset: number;
+    limit: number;
+    hasMore: boolean;
+    nextOffset: number | undefined;
+};

package/dist/page-snippets.js

@@ -0,0 +1,405 @@
+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.',
+        pageTypes: ['list'],
+        keywords: ['筛选', '搜索', '查询', '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' },
+]`,
+        template: `<MPageFilters aria-label="筛选">
+  <MSpace wrap>
+    <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
+    <MSelect
+      v-model="status"
+      :options="statusOptions"
+      placeholder="状态"
+      clearable
+      style="width: 10rem"
+    />
+    <MButton severity="primary">查询</MButton>
+    <MButton severity="secondary">重置</MButton>
+  </MSpace>
+</MPageFilters>`,
+        rules: ['放在 MPageContent 内、MPageToolbar 之前', '不要外包 MCard', '筛选项宽度用 inline style，区块样式交给 MPageFilters'],
+        rulesEn: ['Place inside MPageContent before MPageToolbar', 'Do not wrap with MCard', 'Use inline width on controls; let MPageFilters own the surface'],
+        avoid: ['不要手写 .page-filters 类', '不要用 MCard 包筛选区'],
+        avoidEn: ['Do not hand-write .page-filters classes', 'Do not wrap filters in MCard'],
+    },
+    {
+        id: 'list-toolbar',
+        title: '列表页工具栏',
+        titleEn: 'List page toolbar',
+        description: '标题 + 主操作按钮，放在筛选区之后、表格之前。',
+        descriptionEn: 'Page title and primary action between filters and the table.',
+        pageTypes: ['list'],
+        keywords: ['工具栏', '标题', '新建', 'toolbar', 'title', 'create', 'actions'],
+        imports: ['MPageToolbar', 'MButton'],
+        template: `<MPageToolbar title="用户管理">
+  <template #actions>
+    <MButton severity="primary">新建用户</MButton>
+  </template>
+</MPageToolbar>`,
+        rules: ['主操作放 #actions', '标题优先用 title prop，不用裸 h1 + flex'],
+        rulesEn: ['Put primary actions in #actions', 'Prefer the title prop over raw h1 + flex'],
+        avoid: ['不要再用自定义 toolbar CSS'],
+        avoidEn: ['Do not add custom toolbar CSS'],
+    },
+    {
+        id: 'list-table',
+        title: '列表页表格',
+        titleEn: 'List page table',
+        description: '标准 MTable，直接放在 MPageContent 内，不额外包 Card。',
+        descriptionEn: 'Standard MTable placed directly in MPageContent without an extra Card wrapper.',
+        pageTypes: ['list'],
+        keywords: ['表格', 'table', 'pagination', 'paginator', 'empty', 'columns', 'rows'],
+        imports: ['MTable'],
+        scriptSetup: `const columns = [
+  { key: 'name', label: '名称' },
+  { key: 'status', label: '状态' },
+  { key: 'updatedAt', label: '更新时间' },
+  { key: 'actions', label: '操作', width: 128 },
+]
+const rows = ref<Record<string, unknown>[]>([])
+const loading = ref(false)`,
+        template: `<MTable
+  :columns="columns"
+  :rows="rows"
+  :loading="loading"
+  paginator
+  :rows-per-page="10"
+  striped
+  bordered
+  row-key="id"
+  aria-label="数据列表"
+>
+  <template #empty>
+    <p style="margin:0;padding:var(--m-space-8);text-align:center;color:var(--m-color-text-muted)">
+      暂无数据
+    </p>
+  </template>
+</MTable>`,
+        rules: ['表格直接放在 MPageContent 内', '空态用 #empty，不要留空白区域'],
+        rulesEn: ['Place the table directly in MPageContent', 'Use #empty for zero-data states'],
+        avoid: ['不要用 MCard 包裹 bordered MTable'],
+        avoidEn: ['Do not wrap a bordered MTable with MCard'],
+    },
+    {
+        id: 'list-row-actions',
+        title: '表格行操作列',
+        titleEn: 'Table row actions cell',
+        description: '在 #cell-actions 插槽中放置编辑/删除等按钮组。',
+        descriptionEn: 'Edit/delete buttons inside the #cell-actions slot.',
+        pageTypes: ['list'],
+        keywords: ['行操作', '编辑', '删除', 'actions', 'row', 'cell'],
+        imports: ['MSpace', 'MButton'],
+        template: `<template #cell-actions>
+  <MSpace>
+    <MButton severity="secondary" size="small">编辑</MButton>
+    <MButton severity="danger" size="small">删除</MButton>
+  </MSpace>
+</template>`,
+        rules: ['行内操作用 size="small"', '危险操作使用 severity="danger" 并配合确认弹窗'],
+        rulesEn: ['Use size="small" for row actions', 'Use severity="danger" with confirmation for destructive actions'],
+        avoid: ['不要用 Dropdown 代替明确的行内按钮组，除非操作很多'],
+        avoidEn: ['Do not replace explicit row buttons with Dropdown unless there are many actions'],
+    },
+    {
+        id: 'list-status-tag',
+        title: '表格状态列 Tag',
+        titleEn: 'Table status tag cell',
+        description: '在 #cell-status 中用 MTag 展示业务状态。',
+        descriptionEn: 'Render business status with MTag in #cell-status.',
+        pageTypes: ['list'],
+        keywords: ['状态', 'tag', 'status', 'cell-status'],
+        imports: ['MTag'],
+        template: `<template #cell-status="{ value }">
+  <MTag
+    :value="value === 'active' ? '启用' : '停用'"
+    :severity="value === 'active' ? 'success' : 'secondary'"
+  />
+</template>`,
+        rules: ['状态用 MTag，不要用 Button 颜色表达状态'],
+        rulesEn: ['Use MTag for status, not Button colors'],
+        avoid: ['不要用裸文本颜色区分状态'],
+        avoidEn: ['Do not rely on raw text color for status'],
+    },
+    {
+        id: 'form-header',
+        title: '表单页标题区',
+        titleEn: 'Form page header',
+        description: '表单页顶部标题与说明，放在 MPageContent width="narrow" 内。',
+        descriptionEn: 'Form page title and description inside narrow MPageContent.',
+        pageTypes: ['form'],
+        keywords: ['标题', '说明', 'intro', 'header', 'description'],
+        imports: ['MPageHeader'],
+        template: `<MPageHeader title="新建用户" description="填写基本信息并分配角色。" />`,
+        rules: ['放在 MPageSection 之前', '说明文案用 description prop'],
+        rulesEn: ['Place before MPageSection', 'Use the description prop for helper copy'],
+        avoid: ['不要裸 h1 + p 手写 margin'],
+        avoidEn: ['Do not hand-write h1 + p margins'],
+    },
+    {
+        id: 'form-body',
+        title: '表单主体',
+        titleEn: 'Form body surface',
+        description: 'MPageSection variant="form" 包裹 MForm 字段。',
+        descriptionEn: 'Wrap MForm fields with MPageSection variant="form".',
+        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>
+</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'],
+    },
+    {
+        id: 'form-actions',
+        title: '表单底栏操作',
+        titleEn: 'Form footer actions',
+        description: '保存/取消按钮区，放在 MForm 内底部。',
+        descriptionEn: 'Save/cancel actions at the bottom of MForm.',
+        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>
+</MPageSection>`,
+        rules: ['提交按钮在前，取消 secondary', '保存中传 loading 防重复提交'],
+        rulesEn: ['Submit first, cancel secondary', 'Pass loading while saving to prevent duplicate submits'],
+        avoid: ['不要手写 border-top + margin-top'],
+        avoidEn: ['Do not hand-write border-top and margin-top'],
+    },
+    {
+        id: 'dashboard-kpi-grid',
+        title: '仪表盘 KPI 栅格',
+        titleEn: 'Dashboard KPI grid',
+        description: 'MGrid + MPageStat 展示关键指标。',
+        descriptionEn: 'Key metrics with MGrid and MPageStat.',
+        pageTypes: ['dashboard'],
+        keywords: ['kpi', '指标', 'stat', 'grid', 'metrics'],
+        imports: ['MGrid', 'MGridItem', 'MPageStat'],
+        scriptSetup: `const metrics = ref([
+  { label: '总用户', value: '12,480', trend: '+8.2%', icon: 'users' },
+  { label: '今日活跃', value: '1,926', trend: '+3.1%', 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"
+      icon="activity"
+    />
+  </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'],
+    },
+    {
+        id: 'dashboard-chart-card',
+        title: '仪表盘图表卡片',
+        titleEn: 'Dashboard chart card',
+        description: 'MCard 标题 + MPagePlaceholder 作为图表占位。',
+        descriptionEn: 'MCard title with MPagePlaceholder for chart area.',
+        pageTypes: ['dashboard'],
+        keywords: ['chart', '图表', 'placeholder', 'card', 'trend'],
+        imports: ['MCard', 'MPagePlaceholder', 'MSkeleton'],
+        template: `<MCard title="趋势概览">
+  <MSkeleton v-if="loading" height="8rem" />
+  <MPagePlaceholder
+    v-else
+    aria-label="图表占位"
+    description="图表区域（接入 ECharts / 业务组件）"
+  />
+</MCard>`,
+        rules: ['图表区适合 MCard，因为需要 card 标题', '加载中用 MSkeleton'],
+        rulesEn: ['Charts belong in MCard when a card title is needed', 'Use MSkeleton while loading'],
+        avoid: ['不要用 MPageFilters 风格包裹图表'],
+        avoidEn: ['Do not wrap charts with MPageFilters styling'],
+    },
+    {
+        id: 'dashboard-recent-table',
+        title: '仪表盘最近列表',
+        titleEn: 'Dashboard recent list card',
+        description: 'MCard 内嵌小尺寸 MTable 展示最近记录。',
+        descriptionEn: 'Recent records in a small MTable inside MCard.',
+        pageTypes: ['dashboard'],
+        keywords: ['recent', '最近', 'table', 'card', 'list'],
+        imports: ['MCard', 'MTable', 'MTag'],
+        scriptSetup: `const recentColumns = [
+  { key: 'id', label: '工单号', width: 96 },
+  { key: 'title', label: '标题' },
+  { key: 'status', label: '状态', width: 96 },
+]
+const recentRows = ref<Record<string, unknown>[]>([])`,
+        template: `<MCard title="最近工单">
+  <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered />
+</MCard>`,
+        rules: ['明细列表放 MCard 内合理', 'size="small" 适合卡片内表格'],
+        rulesEn: ['Detail lists inside MCard are appropriate', 'Use size="small" for in-card tables'],
+        avoid: ['卡片内表格不要再外包一层 MPageContent'],
+        avoidEn: ['Do not wrap in-card tables with another MPageContent'],
+    },
+    {
+        id: 'page-content-list',
+        title: '列表页内容容器',
+        titleEn: 'List page content stack',
+        description: 'MLayoutContent 内的标准垂直堆叠容器。',
+        descriptionEn: 'Standard vertical stack container inside MLayoutContent.',
+        pageTypes: ['list', 'common'],
+        keywords: ['page content', 'stack', 'layout content', '容器'],
+        imports: ['MPageContent'],
+        template: `<MLayoutContent>
+  <MPageContent>
+    <!-- MPageFilters → MPageToolbar → MTable -->
+  </MPageContent>
+</MLayoutContent>`,
+        rules: ['所有列表区块放在 MPageContent 内', '区块顺序：筛选 → 工具栏 → 表格'],
+        rulesEn: ['Keep all list sections inside MPageContent', 'Order: filters → toolbar → table'],
+        avoid: ['不要在 MLayoutContent 上手写 padding/gap'],
+        avoidEn: ['Do not hand-write padding/gap on MLayoutContent'],
+    },
+    {
+        id: 'page-content-form',
+        title: '表单页内容容器',
+        titleEn: 'Form page content stack',
+        description: '窄宽表单页容器。',
+        descriptionEn: 'Narrow form page container.',
+        pageTypes: ['form', 'common'],
+        keywords: ['narrow', 'form content', 'max-width'],
+        imports: ['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'],
+        avoid: ['不要让表单字段铺满超宽视口'],
+        avoidEn: ['Do not let form fields stretch across an ultra-wide viewport'],
+    },
+    {
+        id: 'detail-toolbar',
+        title: '详情页顶栏',
+        titleEn: 'Detail page header actions',
+        description: '详情页标题与编辑操作。',
+        descriptionEn: 'Detail page title and edit action.',
+        pageTypes: ['detail'],
+        keywords: ['detail', '详情', 'edit', 'toolbar'],
+        imports: ['MPageToolbar', 'MButton', 'MTag'],
+        template: `<MPageToolbar title="示例资源">
+  <template #actions>
+    <MButton severity="primary" outlined>编辑</MButton>
+  </template>
+</MPageToolbar>
+<MTag value="正常" severity="success" />`,
+        rules: ['状态 Tag 放在标题区附近', '编辑为主操作，删除放低强调区域'],
+        rulesEn: ['Keep status Tag near the header area', 'Edit is primary; delete stays low emphasis'],
+        avoid: ['不要把操作散落到多个无关区域'],
+        avoidEn: ['Do not scatter actions across unrelated areas'],
+    },
+    {
+        id: 'layout-app-shell',
+        title: '后台应用骨架',
+        titleEn: 'Admin app shell',
+        description: 'MLayout fillViewport + Header + Content 的最小骨架。',
+        descriptionEn: 'Minimal MLayout fillViewport shell with header and content.',
+        pageTypes: ['common'],
+        keywords: ['layout', 'shell', 'breadcrumb', 'sider', 'app'],
+        imports: ['MLayout', 'MLayoutHeader', 'MLayoutContent', 'MBreadcrumb', 'MConfigProvider', 'zhCN'],
+        template: `<MConfigProvider :locale="zhCN">
+  <MLayout fill-viewport>
+    <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+      <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '当前页' }]" />
+    </MLayoutHeader>
+    <MLayoutContent>
+      <MPageContent>
+        <!-- page sections -->
+      </MPageContent>
+    </MLayoutContent>
+  </MLayout>
+</MConfigProvider>`,
+        rules: ['根布局用 fillViewport', '面包屑放 MLayoutHeader'],
+        rulesEn: ['Use fillViewport on the root layout', 'Place breadcrumb in MLayoutHeader'],
+        avoid: ['不要手写 min-height: 100vh'],
+        avoidEn: ['Do not hand-write min-height: 100vh'],
+    },
+];
+export function findPageSnippet(id) {
+    const key = id.trim().toLowerCase().replace(/[-_\s]/g, '');
+    return pageSnippets.find((item) => item.id.replace(/[-_\s]/g, '') === key);
+}
+export function scorePageSnippet(snippet, query) {
+    const normalized = query.toLowerCase().trim();
+    if (!normalized)
+        return 0;
+    let score = 0;
+    if (snippet.id.replace(/[-_\s]/g, '') === normalized.replace(/[-_\s]/g, ''))
+        score += 100;
+    for (const keyword of snippet.keywords) {
+        const key = keyword.toLowerCase();
+        if (normalized === key)
+            score += 40;
+        else if (normalized.includes(key) || key.includes(normalized))
+            score += 15;
+    }
+    for (const type of snippet.pageTypes) {
+        if (normalized.includes(type))
+            score += 10;
+    }
+    if (snippet.title.toLowerCase().includes(normalized) || snippet.titleEn.toLowerCase().includes(normalized)) {
+        score += 25;
+    }
+    return score;
+}
+export function filterPageSnippets(args) {
+    const pageType = args.pageType?.trim().toLowerCase();
+    let items = pageSnippets.filter((item) => {
+        if (!pageType)
+            return true;
+        if (item.pageTypes.includes(pageType))
+            return true;
+        return item.pageTypes.length === 1 && item.pageTypes[0] === 'common';
+    });
+    if (args.query?.trim()) {
+        items = items
+            .map((item) => ({ item, score: scorePageSnippet(item, args.query) }))
+            .filter((entry) => entry.score > 0)
+            .sort((a, b) => b.score - a.score || a.item.id.localeCompare(b.item.id))
+            .map((entry) => entry.item);
+    }
+    const offset = Math.max(args.offset ?? 0, 0);
+    const limit = Math.min(Math.max(args.limit ?? 50, 1), 100);
+    return {
+        total: items.length,
+        items: items.slice(offset, offset + limit),
+        offset,
+        limit,
+        hasMore: offset + limit < items.length,
+        nextOffset: offset + limit < items.length ? offset + limit : undefined,
+    };
+}

package/dist/patterns.d.ts

@@ -28,6 +28,26 @@ export declare const designRules: {
         readonly typography: "--m-font-size-xs/sm/md/lg";
         readonly motion: "--m-motion-fast/normal";
     };
+    readonly composition: {
+        readonly workflow: readonly ["For full pages: recommend_page then get_golden_page before writing layout code.", "For local edits: get_page_snippet(section) for filters/toolbar/form-actions/KPI blocks instead of reading the whole golden page.", "Use MLayout fillViewport as the app shell; put MPageContent inside MLayoutContent.", "Prefer MPage* components over scoped CSS for filters, toolbars, headers, form surfaces, and KPI cards.", "Use MSpace or MFlex for control groups inside MPageFilters; use MPageToolbar for title + primary action."];
+        readonly snippets: readonly ["list-filters", "list-toolbar", "list-table", "list-row-actions", "form-header", "form-body", "form-actions", "dashboard-kpi-grid", "dashboard-chart-card", "layout-app-shell"];
+        readonly pageStack: {
+            readonly list: readonly ["MLayout", "MLayoutHeader", "MLayoutContent", "MPageContent", "MPageFilters", "MPageToolbar", "MTable"];
+            readonly form: readonly ["MLayout", "MLayoutHeader", "MLayoutContent", "MPageContent", "MPageHeader", "MPageSection", "MForm"];
+            readonly dashboard: readonly ["MLayout", "MLayoutHeader", "MLayoutContent", "MPageContent", "MPageHeader", "MGrid", "MPageStat", "MCard"];
+        };
+        readonly spacing: {
+            readonly pageContent: "MPageContent handles padding (--m-space-6) and gap (--m-space-4); spacious uses --m-space-6 gap";
+            readonly filters: "MPageFilters handles padded muted surface; do not wrap filters in MCard";
+            readonly toolbar: "MPageToolbar handles title/actions alignment with --m-space-4 gap";
+            readonly form: "MPageSection variant=\"form\" handles form padding/border/shadow";
+        };
+        readonly borders: {
+            readonly do: readonly ["MLayoutHeader bordered (default)", "MPageFilters for filter regions", "MPageSection variant=\"form\" for forms", "MTable bordered when table needs grid lines"];
+            readonly avoid: readonly ["MCard wrapping MTable that is already bordered", "Nested MCard with bordered=true on both levels", "Hand-written section borders when MPageFilters or MPageSection applies", "Double borders on filter + table wrapper"];
+        };
+        readonly goldenPages: readonly ["list-page", "form-page", "dashboard-page"];
+    };
     readonly actions: {
         readonly primary: {
             readonly component: "MButton";

package/dist/patterns.js

@@ -32,7 +32,10 @@ export const pagePatterns = [
             { component: 'LayoutHeader', role: '顶栏面包屑' },
             { component: 'LayoutContent', role: '页面主体内容区' },
             { component: 'Breadcrumb', role: '页面层级导航' },
-            { component: 'Space', role: '筛选区与行操作间距布局' },
+            { component: 'PageContent', role: '内容区垂直堆叠与间距', reason: '替代手写 gap/padding CSS' },
+            { component: 'PageFilters', role: '筛选区表面与边框' },
+            { component: 'PageToolbar', role: '标题与主操作两端对齐' },
+            { component: 'Space', role: '筛选控件与行操作间距' },
             { component: 'Input', role: '关键词筛选' },
             { component: 'Select', role: '枚举或状态筛选' },
             { component: 'Button', role: '查询、新增和行操作' },
@@ -47,15 +50,16 @@ export const pagePatterns = [
             '    └── MLayout',
             '        ├── MLayoutHeader → MBreadcrumb',
             '        └── MLayoutContent',
-            '            ├── Filter section (MSpace + MInput + MSelect + MButton)',
-            '            ├── PageHeader (title + primary action)',
-            '            └── MTable (paginator, #cell-* slots, #empty)',
+            '            └── MPageContent',
+            '                ├── MPageFilters (MSpace + MInput + MSelect + MButton)',
+            '                ├── MPageToolbar (title + primary action)',
+            '                └── MTable (paginator, #cell-* slots, #empty)',
         ],
         layout: {
-            page: 'MLayout has-sider 作为后台骨架；内容区 padding 使用 --m-space-6',
-            header: 'MLayoutHeader 放面包屑；标题与主操作在内容区 toolbar 两端对齐',
-            filters: '筛选区使用浅色背景 + border-radius；桌面端 MSpace wrap，窄屏堆叠',
-            data: 'MTable 启用 paginator；行操作用 MButton size="small"；空态用 #empty 插槽',
+            page: 'MLayout fillViewport + has-sider；MLayoutContent 内用 MPageContent 堆叠区块',
+            header: 'MLayoutHeader 放面包屑；标题与主操作用 MPageToolbar',
+            filters: 'MPageFilters 包裹筛选控件；内部 MSpace wrap 或 MFlex',
+            data: 'MTable 直接放在 MPageContent 内，不要额外 MCard；paginator + #empty',
         },
         styleRules: [
             '新增、保存等主操作使用 primary MButton',
@@ -90,7 +94,10 @@ export const pagePatterns = [
             { component: 'ConfigProvider', role: '应用根包裹' },
             { component: 'Layout', role: '页面骨架' },
             { component: 'LayoutHeader', role: '顶栏面包屑' },
-            { component: 'LayoutContent', role: '表单主体区', reason: 'max-width 约 42rem' },
+            { component: 'LayoutContent', role: '页面主体滚动区' },
+            { component: 'PageContent', role: '表单页窄宽与垂直间距', reason: 'width="narrow"' },
+            { component: 'PageHeader', role: '页面标题与说明' },
+            { component: 'PageSection', role: '表单表面与底栏', reason: 'variant form / actions' },
             { component: 'Breadcrumb', role: '页面层级导航' },
             { component: 'Form', role: '声明式校验和布局' },
             { component: 'FormItem', role: '字段标签、帮助文本和校验状态', required: false, reason: '由 MForm 同目录导出，作为表单子结构使用' },
@@ -104,16 +111,16 @@ export const pagePatterns = [
             '└── MLayout',
             '    ├── MLayoutHeader → MBreadcrumb',
             '    └── MLayoutContent',
-            '        ├── Page intro (title + description)',
-            '        └── MForm',
-            '            ├── MFormItem fields',
-            '            └── Actions (submit + cancel)',
+            '        └── MPageContent (width="narrow")',
+            '            ├── MPageHeader',
+            '            └── MPageSection (variant="form")',
+            '                └── MForm + MPageSection (variant="actions")',
         ],
         layout: {
-            shell: 'MLayout + MLayoutHeader + MLayoutContent；表单 max-width 约 42rem',
-            page: '表单主体使用 max-width，避免字段横向过宽',
-            form: '默认 label-position=top；字段按业务逻辑分组',
-            actions: '提交按钮在前，取消使用 text 或 secondary，操作区与表单分隔',
+            shell: 'MLayout fillViewport + MLayoutHeader + MLayoutContent',
+            page: 'MPageContent width="narrow" 限制表单宽度',
+            form: 'MPageSection variant="form" 包裹 MForm；label-position=top',
+            actions: 'MPageSection variant="actions" 放提交/取消；不要手写 border-top CSS',
             responsive: '多列字段在窄屏降为单列',
         },
         styleRules: [
@@ -148,9 +155,13 @@ export const pagePatterns = [
             { component: 'LayoutHeader', role: '顶栏与面包屑' },
             { component: 'LayoutContent', role: '仪表盘内容' },
             { component: 'Breadcrumb', role: '页面层级导航' },
+            { component: 'PageContent', role: '仪表盘垂直间距', reason: 'density="spacious"' },
+            { component: 'PageHeader', role: '页面标题' },
+            { component: 'PageStat', role: 'KPI 指标卡' },
+            { component: 'PagePlaceholder', role: '图表占位' },
             { component: 'Grid', role: 'KPI 与内容区栅格' },
             { component: 'GridItem', role: '栅格子项' },
-            { component: 'Card', role: '指标和内容分区' },
+            { component: 'Card', role: '图表与列表明细分区' },
             { component: 'Icon', role: 'KPI 图标', required: false },
             { component: 'Tag', role: '状态和告警级别' },
             { component: 'Table', role: '明细数据', required: false },
@@ -321,6 +332,48 @@ export const designRules = {
         typography: '--m-font-size-xs/sm/md/lg',
         motion: '--m-motion-fast/normal',
     },
+    composition: {
+        workflow: [
+            'For full pages: recommend_page then get_golden_page before writing layout code.',
+            'For local edits: get_page_snippet(section) for filters/toolbar/form-actions/KPI blocks instead of reading the whole golden page.',
+            'Use MLayout fillViewport as the app shell; put MPageContent inside MLayoutContent.',
+            'Prefer MPage* components over scoped CSS for filters, toolbars, headers, form surfaces, and KPI cards.',
+            'Use MSpace or MFlex for control groups inside MPageFilters; use MPageToolbar for title + primary action.',
+        ],
+        snippets: [
+            'list-filters',
+            'list-toolbar',
+            'list-table',
+            'list-row-actions',
+            'form-header',
+            'form-body',
+            'form-actions',
+            'dashboard-kpi-grid',
+            'dashboard-chart-card',
+            'layout-app-shell',
+        ],
+        pageStack: {
+            list: ['MLayout', 'MLayoutHeader', 'MLayoutContent', 'MPageContent', 'MPageFilters', 'MPageToolbar', 'MTable'],
+            form: ['MLayout', 'MLayoutHeader', 'MLayoutContent', 'MPageContent', 'MPageHeader', 'MPageSection', 'MForm'],
+            dashboard: ['MLayout', 'MLayoutHeader', 'MLayoutContent', 'MPageContent', 'MPageHeader', 'MGrid', 'MPageStat', 'MCard'],
+        },
+        spacing: {
+            pageContent: 'MPageContent handles padding (--m-space-6) and gap (--m-space-4); spacious uses --m-space-6 gap',
+            filters: 'MPageFilters handles padded muted surface; do not wrap filters in MCard',
+            toolbar: 'MPageToolbar handles title/actions alignment with --m-space-4 gap',
+            form: 'MPageSection variant="form" handles form padding/border/shadow',
+        },
+        borders: {
+            do: ['MLayoutHeader bordered (default)', 'MPageFilters for filter regions', 'MPageSection variant="form" for forms', 'MTable bordered when table needs grid lines'],
+            avoid: [
+                'MCard wrapping MTable that is already bordered',
+                'Nested MCard with bordered=true on both levels',
+                'Hand-written section borders when MPageFilters or MPageSection applies',
+                'Double borders on filter + table wrapper',
+            ],
+        },
+        goldenPages: ['list-page', 'form-page', 'dashboard-page'],
+    },
     actions: {
         primary: { component: 'MButton', props: ['severity omitted or primary'] },
         secondary: { component: 'MButton', props: ['severity="secondary"', 'outlined or text'] },