@morya-ui/mcp 0.3.4 → 0.3.6

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

@@ -1,182 +1,182 @@
-<script setup lang="ts">
-/**
- * 黄金样例：分步向导（wizard-form）
- * MStepper + 每步一个主任务；完成态可接 result-page。
- * @see DESIGN.md · surfaces § Flow · pattern wizard-form
- */
-import {
-  MBreadcrumb,
-  MButton,
-  MConfigProvider,
-  MForm,
-  MFormItem,
-  MInput,
-  MInputTags,
-  MLayout,
-  MLayoutContent,
-  MLayoutHeader,
-  MPageContent,
-  MPageHeader,
-  MPageSection,
-  MSelect,
-  MSpace,
-  MStepper,
-  message,
-  zhCN,
-} from 'morya-ui'
-import { computed, reactive, ref } from 'vue'
-
-const activeStep = ref(0)
-const submitting = ref(false)
-
-const steps = [
-  { label: '工作空间', description: '名称与地区' },
-  { label: '邀请成员', description: '可选邮箱' },
-  { label: '确认', description: '核对后创建' },
-]
-
-const model = reactive({
-  name: '',
-  region: undefined as string | undefined,
-  invites: [] as string[],
-})
-
-const regionOptions = [
-  { label: '中国大陆', value: 'cn' },
-  { label: '亚太', value: 'apac' },
-  { label: '北美', value: 'na' },
-]
-
-const canNext = computed(() => {
-  if (activeStep.value === 0) return Boolean(model.name && model.region)
-  return true
-})
-
-function back() {
-  if (activeStep.value > 0) activeStep.value -= 1
-}
-
-function next() {
-  if (!canNext.value) return
-  if (activeStep.value < steps.length - 1) activeStep.value += 1
-}
-
-async function finish() {
-  submitting.value = true
-  try {
-    // await api.createWorkspace(model)
-    message.success('工作空间已创建')
-    // 成功页可镜像 get_golden_page('result-page')，将 status 改为 success
-  } 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: '/workspaces' },
-            { label: '创建' },
-          ]"
-        />
-      </MLayoutHeader>
-
-      <MLayoutContent>
-        <MPageContent width="narrow">
-          <MPageHeader
-            title="创建工作空间"
-            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
-          />
-
-          <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" placeholder="例如：青禾书房" fluid />
-              </MFormItem>
-              <MFormItem label="地区" name="region" required>
-                <MSelect
-                  v-model="model.region"
-                  :options="regionOptions"
-                  placeholder="选择地区"
-                  fluid
-                />
-              </MFormItem>
-            </MForm>
-
-            <MForm v-else-if="activeStep === 1" @submit.prevent="next">
-              <MFormItem label="邀请邮箱" name="invites">
-                <MInputTags
-                  v-model="model.invites"
-                  placeholder="输入邮箱后回车"
-                />
-              </MFormItem>
-              <p class="wizard-hint">
-                可跳过；稍后也可在成员管理中邀请。
-              </p>
-            </MForm>
-
-            <div v-else class="wizard-summary">
-              <p><strong>名称</strong> {{ model.name || '—' }}</p>
-              <p><strong>地区</strong> {{ model.region || '—' }}</p>
-              <p><strong>邀请</strong> {{ model.invites.length ? model.invites.join('、') : '暂无' }}</p>
-            </div>
-
-            <MPageSection variant="actions">
-              <MSpace>
-                <MButton
-                  severity="secondary"
-                  text
-                  :disabled="activeStep === 0 || submitting"
-                  @click="back"
-                >
-                  上一步
-                </MButton>
-                <MButton
-                  v-if="activeStep < steps.length - 1"
-                  severity="primary"
-                  :disabled="!canNext"
-                  @click="next"
-                >
-                  下一步
-                </MButton>
-                <MButton
-                  v-else
-                  severity="primary"
-                  :loading="submitting"
-                  @click="finish"
-                >
-                  创建
-                </MButton>
-              </MSpace>
-            </MPageSection>
-          </MPageSection>
-        </MPageContent>
-      </MLayoutContent>
-    </MLayout>
-  </MConfigProvider>
-</template>
-
-<style scoped>
-.wizard-hint,
-.wizard-summary {
-  margin: 0;
-  color: var(--m-color-text-muted);
-  font-size: var(--m-font-size-sm);
-}
-
-.wizard-summary {
-  display: grid;
-  gap: var(--m-space-2);
-}
-
-.wizard-summary p {
-  margin: 0;
-}
-</style>
+<script setup lang="ts">
+/**
+ * 黄金样例：分步向导（wizard-form）
+ * MStepper + 每步一个主任务；完成态可接 result-page。
+ * @see DESIGN.md · surfaces § Flow · pattern wizard-form
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MInputTags,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MStepper,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { computed, reactive, ref } from 'vue'
+
+const activeStep = ref(0)
+const submitting = ref(false)
+
+const steps = [
+  { label: '工作空间', description: '名称与地区' },
+  { label: '邀请成员', description: '可选邮箱' },
+  { label: '确认', description: '核对后创建' },
+]
+
+const model = reactive({
+  name: '',
+  region: undefined as string | undefined,
+  invites: [] as string[],
+})
+
+const regionOptions = [
+  { label: '中国大陆', value: 'cn' },
+  { label: '亚太', value: 'apac' },
+  { label: '北美', value: 'na' },
+]
+
+const canNext = computed(() => {
+  if (activeStep.value === 0) return Boolean(model.name && model.region)
+  return true
+})
+
+function back() {
+  if (activeStep.value > 0) activeStep.value -= 1
+}
+
+function next() {
+  if (!canNext.value) return
+  if (activeStep.value < steps.length - 1) activeStep.value += 1
+}
+
+async function finish() {
+  submitting.value = true
+  try {
+    // await api.createWorkspace(model)
+    message.success('工作空间已创建')
+    // 成功页可镜像 get_golden_page('result-page')，将 status 改为 success
+  } 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: '/workspaces' },
+            { label: '创建' },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader
+            title="创建工作空间"
+            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
+          />
+
+          <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" placeholder="例如：青禾书房" fluid />
+              </MFormItem>
+              <MFormItem label="地区" name="region" required>
+                <MSelect
+                  v-model="model.region"
+                  :options="regionOptions"
+                  placeholder="选择地区"
+                  fluid
+                />
+              </MFormItem>
+            </MForm>
+
+            <MForm v-else-if="activeStep === 1" @submit.prevent="next">
+              <MFormItem label="邀请邮箱" name="invites">
+                <MInputTags
+                  v-model="model.invites"
+                  placeholder="输入邮箱后回车"
+                />
+              </MFormItem>
+              <p class="wizard-hint">
+                可跳过；稍后也可在成员管理中邀请。
+              </p>
+            </MForm>
+
+            <div v-else class="wizard-summary">
+              <p><strong>名称</strong> {{ model.name || '—' }}</p>
+              <p><strong>地区</strong> {{ model.region || '—' }}</p>
+              <p><strong>邀请</strong> {{ model.invites.length ? model.invites.join('、') : '暂无' }}</p>
+            </div>
+
+            <MPageSection variant="actions">
+              <MSpace>
+                <MButton
+                  severity="secondary"
+                  text
+                  :disabled="activeStep === 0 || submitting"
+                  @click="back"
+                >
+                  上一步
+                </MButton>
+                <MButton
+                  v-if="activeStep < steps.length - 1"
+                  severity="primary"
+                  :disabled="!canNext"
+                  @click="next"
+                >
+                  下一步
+                </MButton>
+                <MButton
+                  v-else
+                  severity="primary"
+                  :loading="submitting"
+                  @click="finish"
+                >
+                  创建
+                </MButton>
+              </MSpace>
+            </MPageSection>
+          </MPageSection>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.wizard-hint,
+.wizard-summary {
+  margin: 0;
+  color: var(--m-color-text-muted);
+  font-size: var(--m-font-size-sm);
+}
+
+.wizard-summary {
+  display: grid;
+  gap: var(--m-space-2);
+}
+
+.wizard-summary p {
+  margin: 0;
+}
+</style>

package/dist/__tests__/fidelity.test.d.ts

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

package/dist/__tests__/fidelity.test.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import { codeCoversBlock, mapReferenceBrief } from '../reference-brief.js';
+import { findStyleShell, listStyleShells } from '../style-shells.js';
+import { createToolHandlers } from '../tools.js';
+function read(result) {
+    return JSON.parse(result.content[0].text);
+}
+describe('reference brief mapping', () => {
+    it('maps list brief to filters/table/status snippets', () => {
+        const mapped = mapReferenceBrief({
+            intent: '油井管理列表',
+            surface: 'list',
+            density: 'compact',
+            requiredBlocks: ['filters', 'table', 'status'],
+            primaryAction: '新建油井',
+        });
+        expect(mapped.surface).toBe('ops-list');
+        expect(mapped.density).toBe('compact');
+        expect(mapped.suggestedSnippets).toContain('list-filters-dense');
+        expect(mapped.suggestedSnippets).toContain('list-table');
+        expect(mapped.suggestedShellId).toBe('ops-quiet');
+        expect(mapped.craftCuesZh.some((line) => line.includes('新建油井'))).toBe(true);
+    });
+    it('detects covered blocks in generated code', () => {
+        const code = '<MPageFilters /><MTable /><MStatus label="启用" />';
+        expect(codeCoversBlock(code, 'filters')).toBe(true);
+        expect(codeCoversBlock(code, 'table')).toBe(true);
+        expect(codeCoversBlock(code, 'status')).toBe(true);
+        expect(codeCoversBlock(code, 'kpi')).toBe(false);
+    });
+});
+describe('style shells', () => {
+    it('lists and finds account-split shell with CSS', () => {
+        expect(listStyleShells('account').some((s) => s.id === 'account-split')).toBe(true);
+        const shell = findStyleShell('account-split');
+        expect(shell?.css).toContain('--m-color-primary');
+        expect(shell?.css).not.toMatch(/#[0-9a-f]{3,8}/i);
+    });
+});
+describe('fidelity tools', () => {
+    const handlers = createToolHandlers();
+    it('map_reference returns mapping and shell', () => {
+        const result = read(handlers.mapReference({
+            description: '登录页左侧品牌栏，右侧邮箱密码表单',
+            surface: 'account',
+        }));
+        expect(result.suggestedSnippets).toContain('auth-split-shell');
+        expect(result.styleShell?.id).toBe('account-split');
+        expect(result.styleShell?.css).toContain('login-brand');
+    });
+    it('recommend_page accepts density and brief', () => {
+        const result = read(handlers.recommendPage({
+            intent: '设备台账列表',
+            pageType: 'list',
+            density: 'compact',
+            brief: {
+                description: '高密筛选 + 状态列',
+                requiredBlocks: ['filters', 'table', 'status'],
+            },
+        }));
+        expect(result.density).toBe('compact');
+        expect(result.suggestedSnippets).toContain('list-filters-dense');
+        expect(result.referenceMapping?.mapping.length).toBeGreaterThan(0);
+    });
+    it('validate_page fails contract when brief blocks are missing', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageContent><MTable :rows="[]" /></MPageContent>',
+            brief: {
+                surface: 'list',
+                requiredBlocks: ['filters', 'table', 'status'],
+            },
+        }));
+        expect(result.ok).toBe(false);
+        expect(result.contract.some((item) => item.type === 'brief-missing-block')).toBe(true);
+    });
+    it('validate_page flags placeholder copy as craft', () => {
+        const result = read(handlers.validatePage({
+            code: '<MEmpty title="暂无数据" description="示例" />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.craft.some((item) => item.type === 'placeholder-copy')).toBe(true);
+    });
+    it('get_style_shells returns pasteable css', () => {
+        const result = read(handlers.getStyleShells({ shell: 'express-hero' }));
+        expect(result.id).toBe('express-hero');
+        expect(result.css).toContain('landing-hero');
+    });
+});

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

@@ -1,6 +1,35 @@
 import { describe, expect, it } from 'vitest';
-import { filterPageSnippets, findPageSnippet, scorePageSnippet } from '../page-snippets.js';
+import { findPageSnippet, scorePageSnippet } from '../page-snippets.js';
 describe('page snippets catalog', () => {
+    it('finds composition-first snippets by id', () => {
+        for (const id of [
+            'form-in-dialog',
+            'form-in-drawer',
+            'confirm-delete',
+            'row-actions-menu',
+            'wizard-steps',
+            'auth-split-shell',
+            'page-header-actions',
+            'list-filters-stack',
+            'list-filters-dense',
+        ]) {
+            expect(findPageSnippet(id)?.id).toBe(id);
+        }
+    });
+    it('list-filters-stack includes chips, advanced, and #actions', () => {
+        const stack = findPageSnippet('list-filters-stack');
+        expect(stack.template).toContain('MPageFilterChips');
+        expect(stack.template).toContain('#advanced');
+        expect(stack.template).toContain('#actions');
+        expect(stack.template).toContain('collapsible');
+        expect(stack.scriptSetup).toContain('activeFilters');
+        expect(stack.scriptSetup).toContain('resetFilters');
+    });
+    it('scores filter stack keywords', () => {
+        const stack = findPageSnippet('list-filters-stack');
+        expect(scorePageSnippet(stack, '筛选组合')).toBeGreaterThan(0);
+        expect(scorePageSnippet(stack, 'filter stack')).toBeGreaterThan(0);
+    });
     it('finds snippet by exact id', () => {
         expect(findPageSnippet('form-actions')?.id).toBe('form-actions');
     });
@@ -9,9 +38,17 @@ describe('page snippets catalog', () => {
         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);
+    it('list-table includes status, numeric align, and domain empty copy', () => {
+        const table = findPageSnippet('list-table');
+        expect(table.template).toContain('MStatus');
+        expect(table.scriptSetup).toContain("align: 'end'");
+        expect(table.template).toContain('tabular-nums');
+        expect(table.template).toContain('还没有成员');
+        expect(table.imports).toContain('MStatus');
+    });
+    it('form-body sets label-width and domain placeholders', () => {
+        const form = findPageSnippet('form-body');
+        expect(form.template).toContain('label-width');
+        expect(form.template).toContain('MSelect');
     });
 });