@morya-ui/mcp 0.2.9 → 0.3.0

package/dist/__tests__/tools.test.js

@@ -74,16 +74,60 @@ describe('@morya-ui/mcp handlers', () => {
         }));
         expect(result.matchedPattern).toBe('admin-list');
     });
-    it('returns a dashboard scaffold when includeScaffold is true', () => {
+    it('returns golden-page source as scaffold when available', () => {
         const result = read(handlers.recommendPage({
             intent: '生产监控仪表盘',
             pageType: 'dashboard',
             includeScaffold: true,
         }));
         expect(result.matchedPattern).toBe('dashboard');
+        expect(result.scaffold.source).toBe('golden-page');
+        expect(result.scaffold.goldenPage).toBe('dashboard-page');
         expect(result.scaffold.files.component).toContain('MGrid');
         expect(result.scaffold.files.component).toContain('MPageStat');
-        expect(result.scaffold.files.component).toContain('MSkeleton');
+        expect(result.scaffold.files.component).toContain('黄金样例');
+        expect(result.nextStep).toContain('validate_usage');
+    });
+    it('prefers list-status-dot for status cell queries', () => {
+        const result = read(handlers.getPageSnippet({ section: '状态' }));
+        expect(result.id).toBe('list-status-dot');
+        expect(result.template).toContain('MStatus');
+    });
+    it('returns result-page golden sample with MResult footer slot', () => {
+        const result = read(handlers.getGoldenPage({ page: 'result-page' }));
+        expect(result.id).toBe('result-page');
+        expect(result.source).toContain('MResult');
+        expect(result.source).toContain('status="403"');
+        expect(result.source).toContain('<template #footer>');
+        expect(result.source).not.toContain('<template #extra>');
+    });
+    it('returns settings-page and wizard-form golden samples with correct APIs', () => {
+        const settings = read(handlers.getGoldenPage({ page: 'settings-page' }));
+        expect(settings.id).toBe('settings-page');
+        expect(settings.source).toContain('MTabs');
+        expect(settings.source).toContain(':tabs=');
+        expect(settings.source).not.toContain(':items=');
+        const wizard = read(handlers.getGoldenPage({ page: 'wizard-form' }));
+        expect(wizard.id).toBe('wizard-form');
+        expect(wizard.source).toContain('MStepper');
+        expect(wizard.source).toContain(':steps=');
+        expect(wizard.source).not.toContain(':items=');
+    });
+    it('scaffolds settings from golden page source', () => {
+        const result = read(handlers.recommendPage({
+            intent: '系统设置页',
+            pageType: 'settings',
+            includeScaffold: true,
+        }));
+        expect(result.scaffold.source).toBe('golden-page');
+        expect(result.scaffold.goldenPage).toBe('settings-page');
+        expect(result.scaffold.files.component).toContain(':tabs=');
+    });
+    it('flags MTabs items and MStepper items as contract advisories', () => {
+        const tabs = read(handlers.validatePage({ code: `<MTabs :items="[]" />` }));
+        expect(tabs.suggestions.some((item) => item.type === 'tabs-items-prop')).toBe(true);
+        const stepper = read(handlers.validatePage({ code: `<MStepper :items="['a']" />` }));
+        expect(stepper.suggestions.some((item) => item.type === 'stepper-items-prop')).toBe(true);
     });
     it('returns a golden page source sample', () => {
         const result = read(handlers.getGoldenPage({ page: 'list-page' }));
@@ -138,14 +182,15 @@ describe('@morya-ui/mcp handlers', () => {
     it('keeps recommend_page focused on pattern matching', () => {
         const result = read(handlers.recommendPage({ intent: '用户列表页', pageType: 'list' }));
         expect(result.matchedPattern).toBe('admin-list');
-        expect(result.nextStep).toContain('get_design_rules');
+        expect(result.nextStep).toContain('validate_usage');
+        expect(result.nextStep).toContain('get_golden_page');
         expect(result.pageStandards).toBeUndefined();
         expect(result.scrollStandards).toBeUndefined();
     });
     it('keeps get_golden_page focused on source code', () => {
         const result = read(handlers.getGoldenPage({ page: 'list-page' }));
         expect(result.source).toContain('MLayout');
-        expect(result.nextStep).toContain('get_design_rules');
+        expect(result.nextStep).toContain('validate_usage');
         expect(result.pageStandards).toBeUndefined();
         expect(result.scrollStandards).toBeUndefined();
     });
@@ -188,6 +233,44 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.ok).toBe(true);
         expect(result.suggestions.some((item) => item.type === 'menu-missing-icons')).toBe(false);
     });
+    it('flags MTable data prop as contract advisory', () => {
+        const result = read(handlers.validatePage({
+            code: '<MTable :columns="columns" :data="rows" />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'table-data-prop')).toBe(true);
+    });
+    it('flags MMessage severity as inline-alert misuse', () => {
+        const result = read(handlers.validatePage({
+            code: '<MMessage severity="error">登录失败</MMessage>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'mmessage-as-alert')).toBe(true);
+    });
+    it('flags one-line toast string as message preference', () => {
+        const result = read(handlers.validatePage({
+            code: `toast.success('已保存')`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'toast-one-liner')).toBe(true);
+    });
+    it('flags MTag in cell-status when MStatus is missing', () => {
+        const result = read(handlers.validatePage({
+            code: `<template #cell-status="{ value }"><MTag :value="value" /></template>`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'status-cell-tag')).toBe(true);
+    });
+    it('returns detail-page and form-in-dialog golden samples', () => {
+        const detail = read(handlers.getGoldenPage({ page: 'detail-page' }));
+        expect(detail.id).toBe('detail-page');
+        expect(detail.source).toContain('MPageHeader');
+        expect(detail.source).toContain('MStatus');
+        const dialog = read(handlers.getGoldenPage({ page: 'form-in-dialog' }));
+        expect(dialog.id).toBe('form-in-dialog');
+        expect(dialog.source).toContain('MDialog');
+        expect(dialog.source).toContain('message.success');
+    });
     it('lists component decision guides when query is omitted', () => {
         const result = read(handlers.recommendComponent({ limit: 5 }));
         expect(result.kind).toBe('decisions');

package/dist/golden-pages.js

@@ -44,6 +44,41 @@ export const goldenPageCatalog = [
         titleEn: 'Empty state golden sample',
         patternId: 'empty-state',
     },
+    {
+        id: 'detail-page',
+        file: 'detail-page.vue',
+        title: '详情页黄金样例',
+        titleEn: 'Detail page golden sample',
+        patternId: 'detail-page',
+    },
+    {
+        id: 'form-in-dialog',
+        file: 'form-in-dialog.vue',
+        title: '列表内弹窗表单黄金样例',
+        titleEn: 'List create/edit dialog golden sample',
+        patternId: 'form-in-dialog',
+    },
+    {
+        id: 'result-page',
+        file: 'result-page.vue',
+        title: '结果 / 阻断页黄金样例',
+        titleEn: 'Result / terminal page golden sample',
+        patternId: 'result-page',
+    },
+    {
+        id: 'settings-page',
+        file: 'settings-page.vue',
+        title: '设置页黄金样例',
+        titleEn: 'Settings page golden sample',
+        patternId: 'settings-page',
+    },
+    {
+        id: 'wizard-form',
+        file: 'wizard-form.vue',
+        title: '分步向导黄金样例',
+        titleEn: 'Wizard form golden sample',
+        patternId: 'wizard-form',
+    },
 ];
 const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
 const bundledDir = join(pkgRoot, 'data/golden-pages');

package/dist/index.js

@@ -102,7 +102,7 @@ register('recommend_component', 'List, read, or recommend component selection gu
     offset: z.number().int().min(0).optional(),
 }, async (args) => handlers.recommendComponent(args));
 register('list_golden_pages', 'List golden page samples for list, form, and dashboard layouts.', { mode: z.string().optional() }, async (args) => handlers.listGoldenPageCatalog(args));
-register('get_golden_page', 'Read a golden page Vue source sample (list-page, form-page, dashboard-page, login-page, landing-page, empty-state).', {
+register('get_golden_page', 'Read a golden page Vue source sample (list-page, form-page, dashboard-page, login-page, landing-page, empty-state, detail-page, form-in-dialog, result-page, settings-page, wizard-form).', {
     page: z.string().min(1),
     mode: z.string().optional(),
 }, async (args) => handlers.getGoldenPage(args));

package/dist/page-snippets.js

@@ -120,43 +120,43 @@ const loading = ref(false)`,
     },
     {
         id: 'list-status-tag',
-        title: '表格状态列 Tag',
-        titleEn: 'Table status tag cell',
-        description: '在 #cell-status 中用 MTag 展示分类标签（业务状态优先用 list-status-dot / MStatus）。',
-        descriptionEn: 'Render category labels with MTag in #cell-status (prefer MStatus for business status).',
+        title: '表格分类标签列 Tag',
+        titleEn: 'Table category tag cell',
+        description: '仅用于分类 / 可关闭标签。业务状态（启用/停用/在线）请用 list-status-dot / MStatus。',
+        descriptionEn: 'Category or closable chips only. Prefer list-status-dot / MStatus for business status.',
         pageTypes: ['list'],
-        keywords: ['状态', 'tag', 'status', 'cell-status'],
+        keywords: ['分类', '标签', '可关闭', 'chip', 'category', 'tag-only'],
         imports: ['MTag'],
-        template: `<template #cell-status="{ value }">
+        template: `<template #cell-category="{ value }">
   <MTag
-    :value="value === 'active' ? '启用' : '停用'"
-    :severity="value === 'active' ? 'success' : 'secondary'"
+    :value="String(value ?? '')"
+    severity="info"
   />
 </template>`,
-        rules: ['分类/强调态用 MTag；更轻的圆点+文案用 MStatus', '不要用 Button 颜色表达状态'],
-        rulesEn: ['Use MTag for chip-like status; use MStatus for lighter dot+label', 'Do not use Button colors for status'],
-        avoid: ['不要用裸文本颜色区分状态'],
-        avoidEn: ['Do not rely on raw text color for status'],
+        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'],
+        avoid: ['不要在 #cell-status 里默认用 MTag 表示启用/停用'],
+        avoidEn: ['Do not default #cell-status to MTag for active/inactive'],
     },
     {
         id: 'list-status-dot',
         title: '表格状态列 Status',
         titleEn: 'Table status dot cell',
-        description: '在 #cell-status 中用 MStatus 展示轻量业务状态。',
-        descriptionEn: 'Render lightweight business status with MStatus in #cell-status.',
+        description: '在 #cell-status 中用 MStatus 展示轻量业务状态（默认首选）。',
+        descriptionEn: 'Render lightweight business status with MStatus in #cell-status (default preference).',
         pageTypes: ['list'],
-        keywords: ['状态', 'status', 'dot', 'cell-status', '在线'],
+        keywords: ['状态', 'status', 'dot', 'cell-status', '在线', '启用', '停用', '业务状态'],
         imports: ['MStatus'],
         template: `<template #cell-status="{ value }">
   <MStatus
-    :label="value === 'online' ? '在线' : '离线'"
-    :severity="value === 'online' ? 'success' : 'secondary'"
+    :label="value === 'active' || value === 'online' ? '启用' : '停用'"
+    :severity="value === 'active' || value === 'online' ? 'success' : 'secondary'"
   />
 </template>`,
-        rules: ['行内轻量状态优先 MStatus', '不要用 Button 颜色表达状态'],
-        rulesEn: ['Prefer MStatus for lightweight inline status', 'Do not use Button colors for status'],
-        avoid: ['不要用裸文本颜色区分状态'],
-        avoidEn: ['Do not rely on raw text color for status'],
+        rules: ['行内轻量业务状态优先 MStatus', '不要用 Button 颜色表达状态'],
+        rulesEn: ['Prefer MStatus for lightweight inline business status', 'Do not use Button colors for status'],
+        avoid: ['不要用裸文本颜色区分状态', '不要默认改用 MTag 表达启用/停用'],
+        avoidEn: ['Do not rely on raw text color for status', 'Do not default to MTag for active/inactive'],
     },
     {
         id: 'empty-block',

package/dist/patterns.d.ts

@@ -48,7 +48,7 @@ export declare const designRules: {
         readonly spacing: "--m-space-*";
         readonly radius: "--m-radius-sm/md/lg";
         readonly typography: "--m-font-size-xs/sm/md/lg";
-        readonly motion: "--m-motion-fast/normal";
+        readonly motion: "--m-motion-fast/normal/enter/exit/distance/ease; intensity via useMotion (data-m-motion); enter/exit via motion.transitions / transition prop (fade, scale-fade, zoom, slide-*, dialog, drawer, …)";
     };
     readonly composition: {
         readonly workflow: readonly ["For full pages: recommend_page → get_golden_page → get_design_rules.", "For local edits: get_page_snippet(section) for filters/toolbar/form-actions/KPI/scrollable-panel blocks.", "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."];
@@ -68,7 +68,7 @@ export declare const designRules: {
             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", "login-page", "landing-page", "empty-state"];
+        readonly goldenPages: readonly ["list-page", "form-page", "dashboard-page", "login-page", "landing-page", "empty-state", "detail-page", "form-in-dialog", "result-page", "settings-page", "wizard-form"];
     };
     readonly actions: {
         readonly primary: {
@@ -130,7 +130,7 @@ export declare const designRules: {
         };
         readonly doc: "design-kit/.agents/skills/morya-ui-pages/references/feedback.md";
     };
-    readonly global: readonly ["优先使用组件库组件和 --m-* Token", "操作反馈默认 message；仅一行文案时优先于 toast", "空态用 MEmpty；结果/阻断页用 MResult；行内状态优先 MStatus", "图标按钮建议提供 aria-label；表单字段建议有可见 label", "浮层默认 Teleport 到 body；有明确布局约束时再改 appendTo", "优先使用组件 documented variant，少写深层 CSS 覆盖"];
+    readonly global: readonly ["优先使用组件库组件和 --m-* Token", "操作反馈默认 message；仅一行文案时优先于 toast", "空态用 MEmpty；结果/阻断页用 MResult；行内状态优先 MStatus", "图标按钮建议提供 aria-label；表单字段建议有可见 label", "浮层默认 Teleport 到 body；有明确布局约束时再改 appendTo", "优先使用组件 documented variant，少写深层 CSS 覆盖", "动效强度用 useMotion；进出场预设用 motion.transitions / 组件 transition，勿臆造动画库 API"];
 };
 export declare function findPattern(input: string): PagePattern | undefined;
 export declare function scorePattern(pattern: PagePattern, query: string): number;

package/dist/patterns.js

@@ -186,6 +186,7 @@ export const pagePatterns = [
             '不要为 ≤8 字段的列表 CRUD 再开 /entities/new 路由',
             '不要用 Toast 代替单行 message 回执',
         ],
+        goldenPage: 'form-in-dialog',
     },
     {
         id: 'dashboard',
@@ -260,6 +261,7 @@ export const pagePatterns = [
         styleRules: ['开关用于二元启用状态，不用 Select 模拟开关', '保存使用 primary，恢复默认值使用 secondary 或 text', '危险配置需要明确说明影响范围并使用 danger 语义', '使用 MConfigProvider 统一 size、density 和 locale'],
         interactionRules: ['显示未保存修改状态', '保存成功使用 message.success 单行反馈；仅有 summary+detail 时用 toast', '保存失败保留输入并显示字段或页面级错误', '切换 Tab 不应意外丢失未保存输入'],
         avoid: ['不要把所有设置塞进一个超长表单', '不要用 placeholder 代替配置项 label', '不要隐藏影响范围较大的配置说明'],
+        goldenPage: 'settings-page',
     },
     {
         id: 'empty-state',
@@ -391,6 +393,7 @@ export const pagePatterns = [
         styleRules: ['每一步只承载一个清晰目标', '步骤状态使用 Stepper，不用 Button 颜色模拟', '长流程使用 Card 分组但避免多层嵌套', '危险退出使用 ConfirmDialog 或 Dialog'],
         interactionRules: ['进入下一步前只校验当前步骤', '返回上一步保留输入', '完成前展示摘要或确认', '刷新和离开时处理未完成状态'],
         avoid: ['不要把所有字段一次性隐藏在一个超长页面', '不要允许跳过有前置依赖的步骤', '不要让完成按钮在每一步都使用相同文案'],
+        goldenPage: 'wizard-form',
     },
     {
         id: 'detail-page',
@@ -441,6 +444,7 @@ export const pagePatterns = [
             '不要使用颜色作为唯一的状态表达方式',
             '不要让详情页的操作按钮分散在多个无关区域',
         ],
+        goldenPage: 'detail-page',
     },
     {
         id: 'result-page',
@@ -471,9 +475,9 @@ export const pagePatterns = [
         structure: [
             'MPageContent (optional shell)',
             '└── MResult',
-            '    ├── status icon',
+            '    ├── status icon / illustration',
             '    ├── title + description',
-            '    └── #extra primary + optional secondary MButton',
+            '    └── #footer primary + optional secondary MButton',
         ],
         layout: {
             page: '结果在内容区居中，不一定占满整屏',
@@ -482,8 +486,8 @@ export const pagePatterns = [
         },
         styleRules: [
             '使用 MResult 的 status 语义，不要手写大图标+文案拼盘',
-            '成功/失败用对应 severity 色；403/404 保持中性',
-            '主恢复动作使用 primary MButton，次动作使用 secondary 或 text',
+            '成功/失败用对应 status；403/404/500 用 HTTP 类 status',
+            '主恢复动作使用 primary MButton，次动作使用 secondary 或 text（放在 #footer，不是 #extra）',
             '颜色与间距使用 --m-* Token',
         ],
         interactionRules: [
@@ -495,7 +499,9 @@ export const pagePatterns = [
             '不要用 Empty 表达 403/404/提交失败',
             '不要只用颜色表达结果而无标题文案',
             '不要在结果页堆砌无关营销内容',
+            '不要使用已移除的 #extra 插槽；操作用 #footer',
         ],
+        goldenPage: 'result-page',
     },
 ];
 /** Advisory page-writing standards for MCP and human authors — not enforced blockers. */
@@ -639,7 +645,7 @@ export const designRules = {
         spacing: '--m-space-*',
         radius: '--m-radius-sm/md/lg',
         typography: '--m-font-size-xs/sm/md/lg',
-        motion: '--m-motion-fast/normal',
+        motion: '--m-motion-fast/normal/enter/exit/distance/ease; intensity via useMotion (data-m-motion); enter/exit via motion.transitions / transition prop (fade, scale-fade, zoom, slide-*, dialog, drawer, …)',
     },
     composition: {
         workflow: [
@@ -682,7 +688,19 @@ export const designRules = {
                 'Double borders on filter + table wrapper',
             ],
         },
-        goldenPages: ['list-page', 'form-page', 'dashboard-page', 'login-page', 'landing-page', 'empty-state'],
+        goldenPages: [
+            'list-page',
+            'form-page',
+            'dashboard-page',
+            'login-page',
+            'landing-page',
+            'empty-state',
+            'detail-page',
+            'form-in-dialog',
+            'result-page',
+            'settings-page',
+            'wizard-form',
+        ],
     },
     actions: {
         primary: { component: 'MButton', props: ['severity omitted or primary'] },
@@ -737,6 +755,7 @@ export const designRules = {
         '图标按钮建议提供 aria-label；表单字段建议有可见 label',
         '浮层默认 Teleport 到 body；有明确布局约束时再改 appendTo',
         '优先使用组件 documented variant，少写深层 CSS 覆盖',
+        '动效强度用 useMotion；进出场预设用 motion.transitions / 组件 transition，勿臆造动画库 API',
     ],
 };
 export function findPattern(input) {