@morya-ui/mcp 0.3.3 → 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' }));
@@ -317,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.js

@@ -226,6 +226,7 @@ export const componentDecisions = [
                 recipe: recipe([
                     ['columns + rows（没有 data prop）', 'columns + rows (no data prop)'],
                     ['row-key 默认 id；不稳定时显式指定', 'row-key defaults to id; set explicitly when needed'],
+                    ['全视口主列表可 MPageContent fill + MTable fill；嵌入/短页跳过', 'Full-viewport main lists may use fill; skip for embedded/short pages'],
                     ['分页：paginator + rows-per-page 或 v-model:page', 'Paging: paginator + rows-per-page or v-model:page'],
                     ['行选择：selectionMode + v-model:selection', 'Row select: selectionMode + v-model:selection'],
                 ], [
@@ -235,6 +236,7 @@ export const componentDecisions = [
                 ...anti([
                     [':data → :rows', ':data → :rows'],
                     ['手写 <table> → MTable', 'Hand-rolled <table> → MTable'],
+                    ['嵌入表硬套 fill → 去掉 fill', 'Forced fill on embedded table → remove fill'],
                 ]),
             },
             {
@@ -725,10 +727,45 @@ export const componentDecisions = [
                 recipe: recipe([
                     ['MLayout fill-viewport（或 :fill-viewport="true"）', 'MLayout fill-viewport (or :fill-viewport="true")'],
                     ['内容放 MLayoutContent', 'Content in MLayoutContent'],
+                    ['是否再 fill 表格：见下方「MPageContent fill + MTable fill」判断', 'Whether to fill the table: see “MPageContent fill + MTable fill” below'],
                     ['侧栏用 MLayoutSider + MMenu，不是随便一个 Drawer', 'Sider: MLayoutSider + MMenu, not a random Drawer'],
                 ]),
                 ...anti([['在 Layout 外再包一层 100vh 滚动 → 去掉', 'Extra 100vh scroll wrapper outside Layout → remove']]),
             },
+            {
+                component: 'MPageContent fill + MTable fill',
+                when: [
+                    '全视口后台列表，页面主任务就是浏览一张表',
+                    '内容高度表格会留下大块空白、分页悬在中间不好看',
+                    '希望只有表体滚动、分页贴在页面最下方',
+                ],
+                whenEn: [
+                    'Full-viewport admin list whose main job is browsing one table',
+                    'A content-sized table would leave a large empty band with mid-page pagination',
+                    'Only the table body should scroll; pagination should stay at the page bottom',
+                ],
+                avoidWhen: [
+                    '仪表盘/详情里的嵌入小表',
+                    '内容本身很短、内容高度即可',
+                    '整页应作为文档滚动（长筛选+说明+表格）',
+                    'Dialog / Drawer 内表格',
+                ],
+                avoidWhenEn: [
+                    'Embedded tables on dashboards or detail pages',
+                    'Short content where a content-sized table is fine',
+                    'Whole page should scroll as a document',
+                    'Tables inside Dialog / Drawer',
+                ],
+                recipe: recipe([
+                    ['先判断是否适合 fill，再写 MPageContent fill + MTable fill', 'Decide fill first, then MPageContent fill + MTable fill'],
+                    ['paginator 或同级 MPagination', 'paginator or sibling MPagination'],
+                    ['适合时不要手写 min-height / calc', 'When fill fits, do not hand-write min-height / calc'],
+                ]),
+                ...anti([
+                    ['嵌入/短页硬套 fill → 去掉', 'Forced fill on embedded/short page → remove'],
+                    ['适合 fill 却手写 calc → 改用 fill', 'Hand-written calc when fill fits → use fill'],
+                ]),
+            },
             {
                 component: 'MScrollbar',
                 when: [
@@ -796,9 +833,13 @@ export const componentDecisions = [
                 recipe: recipe([
                     ['MPageContent > MPageFilters + MTable', 'MPageContent > MPageFilters + MTable'],
                     ['表格直接放 PageContent，不套 Card', 'Table directly under PageContent, no Card'],
+                    ['高度：全视口主列表再考虑 fill；嵌入/短页跳过', 'Height: consider fill only for full-viewport main lists'],
                     ['空态用 Table #empty + MEmpty', 'Empty: Table #empty + MEmpty'],
                 ]),
-                ...anti([['Table 外包 MCard → 去掉 Card', 'MCard around Table → remove Card']]),
+                ...anti([
+                    ['Table 外包 MCard → 去掉 Card', 'MCard around Table → remove Card'],
+                    ['嵌入表硬套 fill → 去掉 fill', 'Forced fill on embedded table → remove fill'],
+                ]),
             },
             {
                 component: 'MCard',

package/dist/golden-pages.d.ts

@@ -4,10 +4,23 @@ export interface GoldenPageRecord {
     title: string;
     titleEn: string;
     patternId: string;
+    /** Visual style preset this sample demonstrates (structure may be shared). */
+    style?: string;
+    /** Canonical structure id when this is a craft variant. */
+    variantOf?: string;
 }
 export declare const goldenPageCatalog: GoldenPageRecord[];
 export declare function listGoldenPages(): GoldenPageRecord[];
 export declare function findGoldenPage(id: string): GoldenPageRecord | undefined;
+/**
+ * Pick the best golden for a pattern + optional style preset.
+ * Falls back to the pattern's canonical sample when no style variant exists.
+ */
+export declare function resolveGoldenPageId(args: {
+    patternId?: string | null;
+    canonicalGoldenId?: string | null;
+    styleId?: string | null;
+}): string | null;
 export declare function readGoldenPageSource(id: string): {
     record: GoldenPageRecord;
     source: string;

package/dist/golden-pages.js

@@ -5,9 +5,28 @@ export const goldenPageCatalog = [
     {
         id: 'list-page',
         file: 'list-page.vue',
-        title: '列表页黄金样例',
-        titleEn: 'List page golden sample',
+        title: '列表页黄金样例（soft）',
+        titleEn: 'List page golden sample (soft)',
         patternId: 'admin-list',
+        style: 'soft',
+    },
+    {
+        id: 'list-page-dense',
+        file: 'list-page-dense.vue',
+        title: '列表页黄金样例（dense）',
+        titleEn: 'List page golden sample (dense)',
+        patternId: 'admin-list',
+        style: 'dense',
+        variantOf: 'list-page',
+    },
+    {
+        id: 'list-page-rail',
+        file: 'list-page-rail.vue',
+        title: '列表页黄金样例（rail）',
+        titleEn: 'List page golden sample (rail)',
+        patternId: 'admin-list',
+        style: 'rail',
+        variantOf: 'list-page',
     },
     {
         id: 'form-page',
@@ -80,6 +99,15 @@ export const goldenPageCatalog = [
         patternId: 'wizard-form',
     },
 ];
+/** Map style preset → list golden craft variant (same structure). */
+const listStyleGolden = {
+    soft: 'list-page',
+    quiet: 'list-page',
+    studio: 'list-page',
+    ink: 'list-page',
+    dense: 'list-page-dense',
+    rail: 'list-page-rail',
+};
 const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
 const bundledDir = join(pkgRoot, 'data/golden-pages');
 const repoDir = join(pkgRoot, '../../design-kit/docs/golden-pages');
@@ -97,6 +125,31 @@ export function findGoldenPage(id) {
     const key = id.trim().toLowerCase().replace(/\.vue$/i, '').replace(/[-_\s]/g, '');
     return goldenPageCatalog.find((item) => item.id.replace(/[-_\s]/g, '') === key);
 }
+/**
+ * Pick the best golden for a pattern + optional style preset.
+ * Falls back to the pattern's canonical sample when no style variant exists.
+ */
+export function resolveGoldenPageId(args) {
+    const style = args.styleId?.trim().toLowerCase() || '';
+    const canonical = args.canonicalGoldenId?.split('/').pop()?.replace(/\.vue$/i, '') ||
+        (args.patternId
+            ? goldenPageCatalog.find((item) => item.patternId === args.patternId && !item.variantOf)?.id
+            : null) ||
+        null;
+    if (args.patternId === 'admin-list' || canonical === 'list-page' || canonical?.startsWith('list-page')) {
+        const styled = style ? listStyleGolden[style] : null;
+        if (styled && findGoldenPage(styled))
+            return styled;
+        return 'list-page';
+    }
+    if (canonical && findGoldenPage(canonical))
+        return canonical;
+    if (args.patternId) {
+        const match = goldenPageCatalog.find((item) => item.patternId === args.patternId && !item.variantOf);
+        return match?.id ?? null;
+    }
+    return null;
+}
 export function readGoldenPageSource(id) {
     const record = findGoldenPage(id);
     if (!record)