@morya-ui/mcp 0.3.3 → 0.3.5

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__/page-snippets.test.js

@@ -1,6 +1,35 @@
 import { describe, expect, it } from 'vitest';
 import { filterPageSnippets, 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');
     });

package/dist/__tests__/tools.test.js

@@ -173,6 +173,25 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.ok).toBe(true);
         expect(result.suggestions.some((item) => item.type === 'native-scroll')).toBe(true);
     });
+    it('suggests list fill height only for fillViewport admin lists missing fill', () => {
+        const result = read(handlers.validatePage({
+            code: '<MLayout fill-viewport><MPageContent><MTable :columns="c" :rows="r" paginator /></MPageContent></MLayout>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'list-fill-height' && item.standardId === 'page-sections')).toBe(true);
+    });
+    it('does not suggest list fill when PageContent and Table already fill', () => {
+        const result = read(handlers.validatePage({
+            code: '<MLayout fill-viewport><MPageContent fill><MTable fill paginator :columns="c" :rows="r" /></MPageContent></MLayout>',
+        }));
+        expect(result.suggestions.some((item) => item.type === 'list-fill-height')).toBe(false);
+    });
+    it('does not suggest list fill for paginator tables outside fillViewport shells', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageContent><MTable :columns="c" :rows="r" paginator /></MPageContent>',
+        }));
+        expect(result.suggestions.some((item) => item.type === 'list-fill-height')).toBe(false);
+    });
     it('returns scrollable-panel snippet for scroll queries', () => {
         const result = read(handlers.getPageSnippet({ section: 'scrollable-panel' }));
         expect(result.id).toBe('scrollable-panel');
@@ -183,9 +202,72 @@ describe('@morya-ui/mcp handlers', () => {
         const result = read(handlers.recommendPage({ intent: '用户列表页', pageType: 'list' }));
         expect(result.matchedPattern).toBe('admin-list');
         expect(result.nextStep).toContain('validate_usage');
+        expect(result.nextStep).toMatch(/get_page_snippet|suggestedSnippets|relatedSnippets/);
         expect(result.nextStep).toContain('get_golden_page');
+        expect(result.nextStep).toMatch(/可选|Optional/);
+        expect(result.suggestedSnippets?.length).toBeGreaterThan(0);
+        expect(result.suggestedSnippets).toContain('list-filters-stack');
+        expect(result.suggestedSnippets).toContain('list-table');
         expect(result.pageStandards).toBeUndefined();
         expect(result.scrollStandards).toBeUndefined();
+        expect(result.styleDirection?.resolution).toBeTruthy();
+    });
+    it('resolves an explicit free-text style on recommend_page', () => {
+        const result = read(handlers.recommendPage({ intent: '用户列表', pageType: 'list', style: '简洁留白，少装饰' }));
+        expect(result.styleDirection.resolution).toBe('explicit');
+        expect(result.styleDirection.summary).toContain('简洁留白');
+        expect(result.goldenPage).toContain('list-page');
+    });
+    it('routes dense/rail craft cues to list golden variants', () => {
+        const dense = read(handlers.recommendPage({
+            intent: '监控告警列表',
+            pageType: 'list',
+            style: 'dense',
+            includeScaffold: true,
+        }));
+        expect(dense.goldenPage).toContain('list-page-dense');
+        expect(dense.scaffold.goldenPage).toBe('list-page-dense');
+        expect(dense.scaffold.files.component).toContain('density="compact"');
+        expect(dense.nextStep).toContain('list-page-dense');
+        expect(dense.suggestedSnippets).toContain('list-filters-dense');
+        expect(dense.suggestedSnippets).not.toContain('list-filters-stack');
+        const rail = read(handlers.recommendPage({
+            intent: '品牌色后台列表',
+            pageType: 'list',
+            style: 'rail',
+            includeScaffold: true,
+        }));
+        expect(rail.goldenPage).toContain('list-page-rail');
+        expect(rail.scaffold.goldenPage).toBe('list-page-rail');
+        expect(rail.scaffold.files.component).toContain('gp-rail-sider');
+        expect(rail.suggestedSnippets).toContain('list-filters-stack');
+    });
+    it('returns dense and rail golden page sources', () => {
+        const dense = read(handlers.getGoldenPage({ page: 'list-page-dense' }));
+        expect(dense.id).toBe('list-page-dense');
+        expect(dense.style).toBe('dense');
+        expect(dense.variantOf).toBe('list-page');
+        expect(dense.source).toContain('size="small"');
+        const rail = read(handlers.getGoldenPage({ page: 'list-page-rail' }));
+        expect(rail.id).toBe('list-page-rail');
+        expect(rail.style).toBe('rail');
+        expect(rail.source).toContain('color-mix');
+    });
+    it('exposes style direction rules without a preset catalog', () => {
+        const result = read(handlers.getStyleDirection({ mode: 'zh-CN' }));
+        expect(result.resolution).toBe('ask');
+        expect(result.priority[0]).toContain('参考');
+        expect(result.hardRules.some((rule) => rule.includes('没有命名风格预设'))).toBe(true);
+        expect(result.note).toContain('没有命名风格预设');
+        const explicit = read(handlers.getStyleDirection({ style: '毛玻璃一点', mode: 'zh-CN' }));
+        expect(explicit.resolution).toBe('explicit');
+        expect(explicit.summary).toContain('毛玻璃');
+    });
+    it('exposes style direction from get_design_rules', () => {
+        const result = read(handlers.getDesignRules({ mode: 'zh-CN' }));
+        expect(result.styles.resolution[0]).toContain('参考');
+        expect(result.styles.presets).toBeUndefined();
+        expect(result.styles.note).toContain('没有命名风格预设');
     });
     it('keeps get_golden_page focused on source code', () => {
         const result = read(handlers.getGoldenPage({ page: 'list-page' }));
@@ -282,6 +364,14 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.id).toBe('overlay-choice');
         expect(result.options.some((option) => option.component === 'Drawer')).toBe(true);
     });
+    it('exposes relatedSnippets on decision options', () => {
+        const result = read(handlers.recommendComponent({ decision: 'confirm-choice' }));
+        const confirm = result.options.find((option) => option.component === 'ConfirmDialog');
+        expect(confirm?.relatedSnippets).toContain('confirm-delete');
+        const formSurface = read(handlers.recommendComponent({ decision: 'form-surface-choice' }));
+        const dialog = formSurface.options.find((option) => option.component === 'Dialog');
+        expect(dialog?.relatedSnippets).toContain('form-in-dialog');
+    });
     it('returns L2 recipes and antiPatterns on decision reads', () => {
         const result = read(handlers.recommendComponent({ decision: 'data-display-choice' }));
         const table = result.options.find((option) => option.component === 'Table');
@@ -317,9 +407,12 @@ 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(18);
+        expect(result.tools).toHaveLength(19);
         expect(result.tools).toContain('get_golden_page');
         expect(result.tools).toContain('get_page_snippet');
+        expect(result.tools).toContain('get_style_direction');
+        expect(result.tools).not.toContain('list_style_presets');
+        expect(result.tools).not.toContain('get_style_preset');
         expect(result.tools).toContain('validate_page');
         expect(result.tools).not.toContain('create_page');
     });

package/dist/decisions.d.ts

@@ -16,6 +16,8 @@ export interface ComponentDecisionOption {
     recipe: ComponentDecisionRecipe;
     antiPatterns: string[];
     antiPatternsEn: string[];
+    /** Page-snippet ids to compose after choosing this option (composition-first). */
+    relatedSnippets?: string[];
 }
 export interface ComponentDecision {
     id: string;