@morya-ui/mcp 0.2.2 → 0.2.4

package/data/example-coverage.json

@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-09-14T01:38:04.233Z",
-  "catalogGeneratedAt": "2026-09-14T01:38:01.275Z",
+  "generatedAt": "2026-09-14T07:44:52.185Z",
+  "catalogGeneratedAt": "2026-09-14T07:44:48.362Z",
   "components": [
     {
       "id": "Accordion",
@@ -1762,6 +1762,31 @@
         "missing": []
       }
     },
+    {
+      "id": "Page",
+      "exportName": "MPageContent",
+      "examples": 6,
+      "props": {
+        "total": 0,
+        "covered": 0,
+        "missing": []
+      },
+      "events": {
+        "total": 0,
+        "covered": 0,
+        "missing": []
+      },
+      "slots": {
+        "total": 0,
+        "covered": 0,
+        "missing": []
+      },
+      "methods": {
+        "total": 0,
+        "covered": 0,
+        "missing": []
+      }
+    },
     {
       "id": "Pagination",
       "exportName": "MPagination",
@@ -2075,10 +2100,8 @@
       },
       "slots": {
         "total": 1,
-        "covered": 0,
-        "missing": [
-          "default"
-        ]
+        "covered": 1,
+        "missing": []
       },
       "methods": {
         "total": 0,
@@ -3075,8 +3098,8 @@
     }
   ],
   "summary": {
-    "components": 88,
+    "components": 89,
     "componentsWithMissingCoverage": 84,
-    "totalExamples": 751
+    "totalExamples": 757
   }
 }

package/data/golden-pages/dashboard-page.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：仪表盘页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MCard,
+  MConfigProvider,
+  MGrid,
+  MGridItem,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPagePlaceholder,
+  MPageStat,
+  MTable,
+  MTag,
+  zhCN,
+} from 'morya-ui'
+
+const stats = [
+  { label: '总用户', value: '12,480', trend: '+8.2%', icon: 'users' },
+  { label: '今日活跃', value: '1,926', trend: '+3.1%', icon: 'activity' },
+  { label: '待处理工单', value: '47', trend: '-12%', trendSeverity: 'warn' as const, icon: 'clipboard' },
+  { label: '系统健康', value: '99.9%', trend: '稳定', trendSeverity: 'secondary' as const, icon: 'heart' },
+]
+
+const recentColumns = [
+  { key: 'id', label: '工单号', width: 96 },
+  { key: 'title', label: '标题' },
+  { key: 'priority', label: '优先级', width: 96 },
+  { key: 'status', label: '状态', width: 96 },
+]
+
+const recentRows = [
+  { id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
+  { id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
+  { id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
+]
+
+function prioritySeverity(p: string) {
+  if (p === 'high') return 'danger'
+  if (p === 'medium') return 'warn'
+  return 'secondary'
+}
+
+function statusLabel(s: string) {
+  if (s === 'open') return '待处理'
+  if (s === 'progress') return '进行中'
+  return '已完成'
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+        <MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent density="spacious">
+          <MPageHeader title="仪表盘" />
+
+          <MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
+            <MGridItem v-for="item in stats" :key="item.label" :span="1">
+              <MPageStat
+                :label="item.label"
+                :value="item.value"
+                :trend="item.trend"
+                :trend-severity="item.trendSeverity ?? 'primary'"
+                :icon="item.icon"
+              />
+            </MGridItem>
+          </MGrid>
+
+          <MGrid :cols="2" :x-gap="16" :y-gap="16">
+            <MGridItem :span="1">
+              <MCard title="趋势概览">
+                <MPagePlaceholder aria-label="图表占位" description="图表区域（接入 ECharts / 业务组件）" />
+              </MCard>
+            </MGridItem>
+            <MGridItem :span="1">
+              <MCard title="最近工单">
+                <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered>
+                  <template #cell-priority="{ value }">
+                    <MTag :value="String(value)" :severity="prioritySeverity(String(value))" />
+                  </template>
+                  <template #cell-status="{ value }">
+                    <MTag :value="statusLabel(String(value))" severity="info" />
+                  </template>
+                </MTable>
+              </MCard>
+            </MGridItem>
+          </MGrid>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/data/golden-pages/form-page.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：表单页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MDatePicker,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MSwitch,
+  MTextarea,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const submitting = ref(false)
+
+const model = reactive({
+  name: '',
+  email: '',
+  role: undefined as string | undefined,
+  active: true,
+  joinedAt: null as string | null,
+  bio: '',
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]
+
+async function onSubmit() {
+  submitting.value = true
+  try {
+    // await api.save(model)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理', to: '/users' }, { label: '新建用户' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader title="新建用户" description="填写基本信息并分配角色。" />
+
+          <MPageSection variant="form">
+            <MForm @submit="onSubmit">
+              <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>
+
+              <MFormItem label="入职日期" name="joinedAt">
+                <MDatePicker v-model="model.joinedAt" placeholder="选择日期" fluid />
+              </MFormItem>
+
+              <MFormItem label="启用账号" name="active">
+                <MSwitch v-model="model.active" />
+              </MFormItem>
+
+              <MFormItem label="简介" name="bio">
+                <MTextarea v-model="model.bio" :rows="4" placeholder="可选" fluid />
+              </MFormItem>
+
+              <MPageSection variant="actions">
+                <MSpace>
+                  <MButton native-type="submit" severity="primary" :loading="submitting">保存</MButton>
+                  <MButton severity="secondary">取消</MButton>
+                </MSpace>
+              </MPageSection>
+            </MForm>
+          </MPageSection>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/data/golden-pages/list-page.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：列表页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MLayoutSider,
+  MMenu,
+  MPageContent,
+  MPageFilters,
+  MPageToolbar,
+  MSelect,
+  MSpace,
+  MTable,
+  MTag,
+  zhCN,
+} from 'morya-ui'
+import { ref } from 'vue'
+
+const keyword = ref('')
+const status = ref<string | undefined>()
+
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+
+const columns = [
+  { key: 'name', label: '名称' },
+  { key: 'status', label: '状态' },
+  { key: 'updatedAt', label: '更新时间' },
+  { key: 'actions', label: '操作', width: 128 },
+]
+
+const rows = [
+  { id: '1', name: '示例项目 A', status: 'active', updatedAt: '2026-09-01' },
+  { id: '2', name: '示例项目 B', status: 'inactive', updatedAt: '2026-08-28' },
+  { id: '3', name: '示例项目 C', status: 'active', updatedAt: '2026-08-25' },
+  { id: '4', name: '示例项目 D', status: 'active', updatedAt: '2026-08-20' },
+  { id: '5', name: '示例项目 E', status: 'inactive', updatedAt: '2026-08-15' },
+]
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout has-sider fill-viewport>
+      <MLayoutSider bordered>
+        <MMenu :model="[{ label: '用户管理', key: 'users' }, { label: '角色管理', key: 'roles' }]" />
+      </MLayoutSider>
+
+      <MLayout>
+        <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+          <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理' }]" />
+        </MLayoutHeader>
+
+        <MLayoutContent>
+          <MPageContent>
+            <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>
+
+            <MPageToolbar title="用户管理">
+              <template #actions>
+                <MButton severity="primary">新建用户</MButton>
+              </template>
+            </MPageToolbar>
+
+            <MTable
+              :columns="columns"
+              :rows="rows"
+              :rows-per-page="3"
+              paginator
+              striped
+              bordered
+              row-key="id"
+              aria-label="用户列表"
+            >
+              <template #cell-status="{ value }">
+                <MTag :value="value === 'active' ? '启用' : '停用'" :severity="value === 'active' ? 'success' : 'secondary'" />
+              </template>
+              <template #cell-actions>
+                <MSpace>
+                  <MButton severity="secondary" size="small">编辑</MButton>
+                  <MButton severity="danger" size="small">删除</MButton>
+                </MSpace>
+              </template>
+              <template #empty>
+                <p style="margin: 0; padding: var(--m-space-8); text-align: center; color: var(--m-color-text-muted)">
+                  暂无用户数据
+                </p>
+              </template>
+            </MTable>
+          </MPageContent>
+        </MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/dist/__tests__/page-snippets.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/page-snippets.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { filterPageSnippets, findPageSnippet, scorePageSnippet } from '../page-snippets.js';
+describe('page snippets catalog', () => {
+    it('finds snippet by exact id', () => {
+        expect(findPageSnippet('form-actions')?.id).toBe('form-actions');
+    });
+    it('scores keyword matches for fuzzy lookup', () => {
+        const snippet = findPageSnippet('list-filters');
+        expect(scorePageSnippet(snippet, 'filters')).toBeGreaterThan(0);
+        expect(scorePageSnippet(snippet, 'search')).toBeGreaterThan(0);
+    });
+    it('filters snippets by page type', () => {
+        const result = filterPageSnippets({ pageType: 'dashboard' });
+        expect(result.items.some((item) => item.id === 'dashboard-kpi-grid')).toBe(true);
+        expect(result.items.some((item) => item.id === 'list-filters')).toBe(false);
+    });
+});

package/dist/__tests__/tools.test.js

@@ -82,8 +82,84 @@ describe('@morya-ui/mcp handlers', () => {
         }));
         expect(result.matchedPattern).toBe('dashboard');
         expect(result.scaffold.files.component).toContain('MGrid');
+        expect(result.scaffold.files.component).toContain('MPageStat');
         expect(result.scaffold.files.component).toContain('MSkeleton');
     });
+    it('returns a golden page source sample', () => {
+        const result = read(handlers.getGoldenPage({ page: 'list-page' }));
+        expect(result.id).toBe('list-page');
+        expect(result.source).toContain('MPageContent');
+        expect(result.source).toContain('MPageFilters');
+    });
+    it('returns a page section snippet by keyword', () => {
+        const result = read(handlers.getPageSnippet({ section: 'filters' }));
+        expect(result.id).toBe('list-filters');
+        expect(result.template).toContain('MPageFilters');
+        expect(result.imports).toContain('MPageFilters');
+    });
+    it('lists page snippets filtered by page type', () => {
+        const result = read(handlers.listPageSnippets({ pageType: 'form', limit: 10 }));
+        expect(result.items.some((item) => item.id === 'form-actions')).toBe(true);
+        expect(result.items.some((item) => item.id === 'page-content-form')).toBe(true);
+        expect(result.items.some((item) => item.id === 'list-filters')).toBe(false);
+    });
+    it('searches page snippets scope', () => {
+        const result = read(handlers.search({ query: 'toolbar', scope: 'snippets', limit: 5 }));
+        expect(result.items.some((item) => item.type === 'snippet' && item.id === 'list-toolbar')).toBe(true);
+    });
+    it('suggests double-border page composition as advisory standard', () => {
+        const result = read(handlers.validatePage({
+            code: '<MLayoutContent><MCard><MTable bordered /></MCard></MLayoutContent>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.advisory).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'double-border')).toBe(true);
+    });
+    it('suggests MScrollbar over inline overflow scroll styles', () => {
+        const result = read(handlers.validatePage({
+            code: '<div style="overflow:auto;height:20rem"><MTable /></div>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'native-scroll' && item.standardId === 'scroll')).toBe(true);
+    });
+    it('suggests MScrollbar over overflow in style blocks', () => {
+        const result = read(handlers.validatePage({
+            code: '<template><div class="panel">x</div></template><style>.panel { max-height: 20rem; overflow-y: auto; }</style>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'native-scroll')).toBe(true);
+    });
+    it('returns scrollable-panel snippet for scroll queries', () => {
+        const result = read(handlers.getPageSnippet({ section: 'scrollable-panel' }));
+        expect(result.id).toBe('scrollable-panel');
+        expect(result.template).toContain('MScrollbar');
+        expect(result.imports).toContain('MScrollbar');
+    });
+    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.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.pageStandards).toBeUndefined();
+        expect(result.scrollStandards).toBeUndefined();
+    });
+    it('exposes page standards from get_design_rules', () => {
+        const result = read(handlers.getDesignRules({ mode: 'zh-CN' }));
+        expect(result.meta.nature).toBe('recommended');
+        expect(result.standards.some((item) => item.id === 'scroll')).toBe(true);
+        expect(result.standards.some((item) => item.id === 'feedback')).toBe(true);
+    });
+    it('reads page scroll decision guide by id', () => {
+        const result = read(handlers.recommendComponent({ decision: 'page-scroll-choice' }));
+        expect(result.id).toBe('page-scroll-choice');
+        expect(result.options.some((option) => option.component === 'MScrollbar')).toBe(true);
+    });
     it('lists component decision guides when query is omitted', () => {
         const result = read(handlers.recommendComponent({ limit: 5 }));
         expect(result.kind).toBe('decisions');
@@ -103,7 +179,10 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.counts.decisions).toBeGreaterThan(0);
         expect(result.counts.resources).toBeGreaterThan(100);
         expect(result.counts.resourceTemplates).toBe(3);
-        expect(result.tools).toHaveLength(13);
+        expect(result.tools).toHaveLength(18);
+        expect(result.tools).toContain('get_golden_page');
+        expect(result.tools).toContain('get_page_snippet');
+        expect(result.tools).toContain('validate_page');
         expect(result.tools).not.toContain('create_page');
     });
 });

package/dist/catalog.js

@@ -25,6 +25,20 @@ export const componentAliases = {
     layoutcontent: 'Layout',
     layoutfooter: 'Layout',
     griditem: 'Grid',
+    pagecontent: 'Page',
+    pagefilters: 'Page',
+    pagetoolbar: 'Page',
+    pageheader: 'Page',
+    pagesection: 'Page',
+    pagestat: 'Page',
+    pageplaceholder: 'Page',
+    mpagecontent: 'Page',
+    mpagefilters: 'Page',
+    mpagetoolbar: 'Page',
+    mpageheader: 'Page',
+    mpagesection: 'Page',
+    mpagestat: 'Page',
+    mpageplaceholder: 'Page',
 };
 const here = dirname(fileURLToPath(import.meta.url));
 export function loadCatalog() {