@morya-ui/mcp 0.3.2 → 0.3.4

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__/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');
@@ -186,6 +205,60 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.nextStep).toContain('get_golden_page');
         expect(result.pageStandards).toBeUndefined();
         expect(result.scrollStandards).toBeUndefined();
+        expect(result.styleDirection?.candidates?.length).toBeGreaterThan(0);
+    });
+    it('resolves an explicit style preset on recommend_page', () => {
+        const result = read(handlers.recommendPage({ intent: '用户列表', pageType: 'list', style: 'soft' }));
+        expect(result.styleDirection.resolution).toBe('preset');
+        expect(result.styleDirection.preset?.id).toBe('soft');
+        expect(result.styleDirection.guidance).toContain('soft');
+        expect(result.goldenPage).toContain('list-page');
+    });
+    it('routes dense/rail styles to list craft 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');
+        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');
+    });
+    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('lists style presets with resolution priority', () => {
+        const result = read(handlers.listStylePresets({ mode: 'zh-CN' }));
+        expect(result.presets.map((item) => item.id)).toEqual(expect.arrayContaining(['quiet', 'soft', 'dense', 'rail', 'studio', 'ink']));
+        expect(result.resolution[0]).toContain('参考');
+    });
+    it('reads a style preset by alias', () => {
+        const result = read(handlers.getStylePreset({ style: '柔和留白', mode: 'zh-CN' }));
+        expect(result.id).toBe('soft');
+        expect(result.apply.length).toBeGreaterThan(0);
+    });
+    it('exposes style presets from get_design_rules', () => {
+        const result = read(handlers.getDesignRules({ mode: 'zh-CN' }));
+        expect(result.styles.presets.some((item) => item.id === 'dense')).toBe(true);
     });
     it('keeps get_golden_page focused on source code', () => {
         const result = read(handlers.getGoldenPage({ page: 'list-page' }));
@@ -282,6 +355,23 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.id).toBe('overlay-choice');
         expect(result.options.some((option) => option.component === 'Drawer')).toBe(true);
     });
+    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');
+        expect(table?.recipe?.props?.length).toBeGreaterThanOrEqual(3);
+        expect(table?.recipe?.props?.some((line) => /rows/i.test(line))).toBe(true);
+        expect(table?.antiPatterns?.length).toBeGreaterThan(0);
+    });
+    it('covers feedback and confirm decision guides', () => {
+        const feedback = read(handlers.recommendComponent({ decision: 'feedback-choice' }));
+        expect(feedback.options.map((option) => option.component)).toEqual(expect.arrayContaining(['message', 'toast', 'field errorMessage / role="alert"']));
+        expect(feedback.options.every((option) => (option.recipe?.props?.length ?? 0) >= 3)).toBe(true);
+        const confirm = read(handlers.recommendComponent({ decision: 'confirm-choice' }));
+        expect(confirm.options.map((option) => option.component)).toEqual([
+            'ConfirmDialog',
+            'ConfirmPopup',
+        ]);
+    });
     it('covers current selection, status, empty, and menu guides', () => {
         const selection = read(handlers.recommendComponent({ decision: 'selection-choice' }));
         expect(selection.options.map((option) => option.component)).toEqual(expect.arrayContaining(['Select', 'CascadeSelect', 'Listbox', 'SelectButton', 'Radio']));
@@ -300,9 +390,11 @@ 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(20);
         expect(result.tools).toContain('get_golden_page');
         expect(result.tools).toContain('get_page_snippet');
+        expect(result.tools).toContain('list_style_presets');
+        expect(result.tools).toContain('get_style_preset');
         expect(result.tools).toContain('validate_page');
         expect(result.tools).not.toContain('create_page');
     });

package/dist/decisions.d.ts

@@ -1,9 +1,21 @@
+export interface ComponentDecisionRecipe {
+    /** 3–8 critical props / usage notes (zh). Not a full API manual. */
+    props: string[];
+    propsEn: string[];
+    slots?: string[];
+    slotsEn?: string[];
+    events?: string[];
+    eventsEn?: string[];
+}
 export interface ComponentDecisionOption {
     component: string;
     when: string[];
     whenEn: string[];
     avoidWhen: string[];
     avoidWhenEn: string[];
+    recipe: ComponentDecisionRecipe;
+    antiPatterns: string[];
+    antiPatternsEn: string[];
 }
 export interface ComponentDecision {
     id: string;
@@ -17,3 +29,5 @@ export interface ComponentDecision {
 export declare const componentDecisions: ComponentDecision[];
 export declare function findDecision(name: string): ComponentDecision | undefined;
 export declare function scoreDecision(decision: ComponentDecision, query: string): number;
+/** Ensures every option carries a non-empty L2 recipe (used by tests / generate script). */
+export declare function assertDecisionRecipes(decisions?: ComponentDecision[]): void;