@morya-ui/mcp 0.2.8 → 0.3.0

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：结果 / 阻断页（System）
+ * 默认展示 403；换成 success / 404 / 500 时只改 status + 文案 + #footer 动作。
+ * 无数据空态请用 empty-state / MEmpty，不要用 MResult。
+ * @see DESIGN.md · surfaces § System · MResult API（操作用 #footer）
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MResult,
+  MSpace,
+  zhCN,
+} from 'morya-ui'
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb
+          :model="[
+            { label: '首页', to: '/' },
+            { label: '项目管理', to: '/projects' },
+            { label: '无权限' },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent>
+          <div class="result-shell">
+            <MResult
+              status="403"
+              title="没有权限查看该项目"
+              description="当前账号无权访问「青禾书房」工作区。可返回上一页，或联系管理员开通权限。"
+              size="large"
+            >
+              <template #footer>
+                <MSpace>
+                  <MButton severity="primary">
+                    返回上一页
+                  </MButton>
+                  <MButton severity="secondary" text>
+                    联系管理员
+                  </MButton>
+                </MSpace>
+              </template>
+            </MResult>
+          </div>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.result-shell {
+  display: grid;
+  place-items: center;
+  min-height: min(28rem, 70vh);
+  padding: var(--m-space-8) var(--m-space-4);
+  border-radius: var(--m-radius-lg);
+  background:
+    radial-gradient(
+      70% 55% at 50% 0%,
+      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
+      transparent 60%
+    ),
+    var(--m-color-surface);
+  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .result-shell {
+    background: var(--m-color-surface);
+  }
+}
+</style>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：设置 / 配置页
+ * 窄栏 + Tabs 分组 + MPageSection form；保存用 message 单行回执。
+ * @see DESIGN.md · page-layouts.md § Settings · visual-craft § Ops polish
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MSwitch,
+  MTabs,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const activeTab = ref('profile')
+const submitting = ref(false)
+
+const tabs = [
+  { label: '资料', value: 'profile' },
+  { label: '通知', value: 'notify' },
+  { label: '安全', value: 'security' },
+]
+
+const profile = reactive({
+  displayName: '林晓',
+  email: 'linxiao@example.com',
+  language: 'zh-CN' as string | undefined,
+})
+
+const notify = reactive({
+  emailDigest: true,
+  productUpdates: false,
+})
+
+const languageOptions = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+]
+
+async function saveProfile() {
+  submitting.value = true
+  try {
+    // await api.saveProfile(profile)
+    message.success('资料已保存')
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function saveNotify() {
+  submitting.value = true
+  try {
+    // await api.saveNotify(notify)
+    message.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: '系统设置' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader
+            title="系统设置"
+            description="按域分组配置；切换 Tab 时保留未保存输入，保存成功用 message 一句话回执。"
+          />
+
+          <MTabs v-model="activeTab" :tabs="tabs">
+            <template #default="{ activeValue }">
+              <MPageSection v-if="activeValue === 'profile'" variant="form" title="个人资料">
+                <MForm @submit.prevent="saveProfile">
+                  <MFormItem label="显示名称" name="displayName" required>
+                    <MInput v-model="profile.displayName" fluid />
+                  </MFormItem>
+                  <MFormItem label="工作邮箱" name="email" required>
+                    <MInput v-model="profile.email" type="email" fluid />
+                  </MFormItem>
+                  <MFormItem label="界面语言" name="language">
+                    <MSelect
+                      v-model="profile.language"
+                      :options="languageOptions"
+                      placeholder="选择语言"
+                      fluid
+                    />
+                  </MFormItem>
+                  <MPageSection variant="actions">
+                    <MSpace>
+                      <MButton native-type="submit" severity="primary" :loading="submitting">
+                        保存资料
+                      </MButton>
+                      <MButton severity="secondary" text native-type="button">
+                        恢复默认
+                      </MButton>
+                    </MSpace>
+                  </MPageSection>
+                </MForm>
+              </MPageSection>
+
+              <MPageSection v-else-if="activeValue === 'notify'" variant="form" title="通知">
+                <MForm @submit.prevent="saveNotify">
+                  <MFormItem label="邮件摘要" name="emailDigest">
+                    <MSwitch v-model="notify.emailDigest" />
+                  </MFormItem>
+                  <MFormItem label="产品动态" name="productUpdates">
+                    <MSwitch v-model="notify.productUpdates" />
+                  </MFormItem>
+                  <MPageSection variant="actions">
+                    <MButton native-type="submit" severity="primary" :loading="submitting">
+                      保存通知
+                    </MButton>
+                  </MPageSection>
+                </MForm>
+              </MPageSection>
+
+              <MPageSection v-else variant="form" title="安全">
+                <p class="settings-hint">
+                  修改密码、两步验证等敏感操作放在此区；危险动作使用 severity="danger" 并配合确认。
+                </p>
+                <MSpace>
+                  <MButton severity="secondary">
+                    修改密码
+                  </MButton>
+                  <MButton severity="danger" text>
+                    注销账号
+                  </MButton>
+                </MSpace>
+              </MPageSection>
+            </template>
+          </MTabs>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.settings-hint {
+  margin: 0 0 var(--m-space-4);
+  color: var(--m-color-text-muted);
+  font-size: var(--m-font-size-sm);
+}
+</style>

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

@@ -0,0 +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>

package/dist/__tests__/tools.test.js

@@ -74,16 +74,60 @@ describe('@morya-ui/mcp handlers', () => {
         }));
         expect(result.matchedPattern).toBe('admin-list');
     });
-    it('returns a dashboard scaffold when includeScaffold is true', () => {
+    it('returns golden-page source as scaffold when available', () => {
         const result = read(handlers.recommendPage({
             intent: '生产监控仪表盘',
             pageType: 'dashboard',
             includeScaffold: true,
         }));
         expect(result.matchedPattern).toBe('dashboard');
+        expect(result.scaffold.source).toBe('golden-page');
+        expect(result.scaffold.goldenPage).toBe('dashboard-page');
         expect(result.scaffold.files.component).toContain('MGrid');
         expect(result.scaffold.files.component).toContain('MPageStat');
-        expect(result.scaffold.files.component).toContain('MSkeleton');
+        expect(result.scaffold.files.component).toContain('黄金样例');
+        expect(result.nextStep).toContain('validate_usage');
+    });
+    it('prefers list-status-dot for status cell queries', () => {
+        const result = read(handlers.getPageSnippet({ section: '状态' }));
+        expect(result.id).toBe('list-status-dot');
+        expect(result.template).toContain('MStatus');
+    });
+    it('returns result-page golden sample with MResult footer slot', () => {
+        const result = read(handlers.getGoldenPage({ page: 'result-page' }));
+        expect(result.id).toBe('result-page');
+        expect(result.source).toContain('MResult');
+        expect(result.source).toContain('status="403"');
+        expect(result.source).toContain('<template #footer>');
+        expect(result.source).not.toContain('<template #extra>');
+    });
+    it('returns settings-page and wizard-form golden samples with correct APIs', () => {
+        const settings = read(handlers.getGoldenPage({ page: 'settings-page' }));
+        expect(settings.id).toBe('settings-page');
+        expect(settings.source).toContain('MTabs');
+        expect(settings.source).toContain(':tabs=');
+        expect(settings.source).not.toContain(':items=');
+        const wizard = read(handlers.getGoldenPage({ page: 'wizard-form' }));
+        expect(wizard.id).toBe('wizard-form');
+        expect(wizard.source).toContain('MStepper');
+        expect(wizard.source).toContain(':steps=');
+        expect(wizard.source).not.toContain(':items=');
+    });
+    it('scaffolds settings from golden page source', () => {
+        const result = read(handlers.recommendPage({
+            intent: '系统设置页',
+            pageType: 'settings',
+            includeScaffold: true,
+        }));
+        expect(result.scaffold.source).toBe('golden-page');
+        expect(result.scaffold.goldenPage).toBe('settings-page');
+        expect(result.scaffold.files.component).toContain(':tabs=');
+    });
+    it('flags MTabs items and MStepper items as contract advisories', () => {
+        const tabs = read(handlers.validatePage({ code: `<MTabs :items="[]" />` }));
+        expect(tabs.suggestions.some((item) => item.type === 'tabs-items-prop')).toBe(true);
+        const stepper = read(handlers.validatePage({ code: `<MStepper :items="['a']" />` }));
+        expect(stepper.suggestions.some((item) => item.type === 'stepper-items-prop')).toBe(true);
     });
     it('returns a golden page source sample', () => {
         const result = read(handlers.getGoldenPage({ page: 'list-page' }));
@@ -138,14 +182,15 @@ describe('@morya-ui/mcp handlers', () => {
     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.nextStep).toContain('validate_usage');
+        expect(result.nextStep).toContain('get_golden_page');
         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.nextStep).toContain('validate_usage');
         expect(result.pageStandards).toBeUndefined();
         expect(result.scrollStandards).toBeUndefined();
     });
@@ -188,6 +233,44 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.ok).toBe(true);
         expect(result.suggestions.some((item) => item.type === 'menu-missing-icons')).toBe(false);
     });
+    it('flags MTable data prop as contract advisory', () => {
+        const result = read(handlers.validatePage({
+            code: '<MTable :columns="columns" :data="rows" />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'table-data-prop')).toBe(true);
+    });
+    it('flags MMessage severity as inline-alert misuse', () => {
+        const result = read(handlers.validatePage({
+            code: '<MMessage severity="error">登录失败</MMessage>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'mmessage-as-alert')).toBe(true);
+    });
+    it('flags one-line toast string as message preference', () => {
+        const result = read(handlers.validatePage({
+            code: `toast.success('已保存')`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'toast-one-liner')).toBe(true);
+    });
+    it('flags MTag in cell-status when MStatus is missing', () => {
+        const result = read(handlers.validatePage({
+            code: `<template #cell-status="{ value }"><MTag :value="value" /></template>`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'status-cell-tag')).toBe(true);
+    });
+    it('returns detail-page and form-in-dialog golden samples', () => {
+        const detail = read(handlers.getGoldenPage({ page: 'detail-page' }));
+        expect(detail.id).toBe('detail-page');
+        expect(detail.source).toContain('MPageHeader');
+        expect(detail.source).toContain('MStatus');
+        const dialog = read(handlers.getGoldenPage({ page: 'form-in-dialog' }));
+        expect(dialog.id).toBe('form-in-dialog');
+        expect(dialog.source).toContain('MDialog');
+        expect(dialog.source).toContain('message.success');
+    });
     it('lists component decision guides when query is omitted', () => {
         const result = read(handlers.recommendComponent({ limit: 5 }));
         expect(result.kind).toBe('decisions');
@@ -199,6 +282,16 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.id).toBe('overlay-choice');
         expect(result.options.some((option) => option.component === 'Drawer')).toBe(true);
     });
+    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']));
+        const status = read(handlers.recommendComponent({ decision: 'status-label-choice' }));
+        expect(status.id).toBe('status-label-choice');
+        const empty = read(handlers.recommendComponent({ decision: 'empty-result-choice' }));
+        expect(empty.options.map((option) => option.component)).toEqual(['Empty', 'Result']);
+        const menu = read(handlers.recommendComponent({ decision: 'action-menu-choice' }));
+        expect(menu.options.some((option) => option.component === 'ContextMenu')).toBe(true);
+    });
     it('exposes catalog health in version metadata', () => {
         const result = read(handlers.version());
         expect(result.health.ok).toBe(true);