@morya-ui/mcp 0.2.4 → 0.2.6

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：登录页（Account + 轻量品牌）
+ * @see DESIGN.md §3 · morya-ui-pages surfaces § Account
+ */
+import {
+  MButton,
+  MConfigProvider,
+  MForm,
+  MFormItem,
+  MInput,
+  MInputPassword,
+  MSpace,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const submitting = ref(false)
+const formError = ref('')
+
+const model = reactive({
+  email: '',
+  password: '',
+})
+
+async function onSubmit() {
+  formError.value = ''
+  submitting.value = true
+  try {
+    // await api.login(model)
+    if (!model.email || !model.password) {
+      formError.value = '请输入邮箱和密码后再试。'
+      return
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <div class="login-shell">
+      <aside class="login-brand" aria-label="品牌">
+        <p class="login-brand__mark">青禾书房</p>
+        <h1 class="login-brand__title">把好书留在手边</h1>
+        <p class="login-brand__lead">
+          店员与会员共用同一套账户。登录后继续进货、上架与会员服务。
+        </p>
+      </aside>
+
+      <main class="login-main">
+        <div class="login-panel">
+          <header class="login-panel__header">
+            <h2>登录</h2>
+            <p>使用工作邮箱进入后台。</p>
+          </header>
+
+          <!-- 表单级常驻错误：token 样式告警条（字段错误优先用 errorMessage） -->
+          <p v-if="formError" class="login-alert" role="alert">
+            {{ formError }}
+          </p>
+
+          <MForm @submit="onSubmit">
+            <MFormItem label="邮箱" name="email" required>
+              <MInput
+                v-model="model.email"
+                type="email"
+                placeholder="name@qinghe.example"
+                autocomplete="username"
+                fluid
+              />
+            </MFormItem>
+
+            <MFormItem label="密码" name="password" required>
+              <MInputPassword
+                v-model="model.password"
+                placeholder="请输入密码"
+                autocomplete="current-password"
+                fluid
+              />
+            </MFormItem>
+
+            <MSpace style="margin-top: var(--m-space-2)" alignment="center">
+              <MButton type="submit" label="登录" :loading="submitting" />
+              <MButton type="button" label="忘记密码" severity="secondary" text />
+            </MSpace>
+          </MForm>
+        </div>
+      </main>
+    </div>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.login-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  min-height: 100vh;
+  background: var(--m-color-surface);
+  color: var(--m-color-text);
+}
+
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--m-space-4);
+  padding: clamp(2rem, 6vw, 4.5rem);
+  background:
+    linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--m-color-primary) 18%, var(--m-color-surface)) 0%,
+      var(--m-color-surface) 55%,
+      color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
+    );
+  border-right: 1px solid var(--m-color-border);
+}
+
+.login-brand__mark {
+  margin: 0;
+  font-size: 0.8125rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--m-color-text-muted);
+}
+
+.login-brand__title {
+  margin: 0;
+  max-width: 12em;
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 650;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+.login-brand__lead {
+  margin: 0;
+  max-width: 28rem;
+  color: var(--m-color-text-muted);
+  line-height: 1.6;
+}
+
+.login-main {
+  display: grid;
+  place-items: center;
+  padding: var(--m-space-6);
+}
+
+.login-panel {
+  width: min(100%, 22rem);
+}
+
+.login-panel__header {
+  margin-bottom: var(--m-space-5);
+}
+
+.login-panel__header h2 {
+  margin: 0 0 var(--m-space-2);
+  font-size: 1.5rem;
+  font-weight: 650;
+}
+
+.login-panel__header p {
+  margin: 0;
+  color: var(--m-color-text-muted);
+}
+
+.login-alert {
+  margin: 0 0 var(--m-space-4);
+  padding: var(--m-space-3) var(--m-space-4);
+  border: 1px solid color-mix(in srgb, var(--m-color-danger) 40%, var(--m-color-border));
+  border-radius: var(--m-radius-md);
+  background: color-mix(in srgb, var(--m-color-danger) 10%, var(--m-color-surface));
+  color: var(--m-color-danger);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+@media (max-width: 768px) {
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    border-right: 0;
+    border-bottom: 1px solid var(--m-color-border);
+    min-height: 12rem;
+  }
+}
+</style>

package/dist/__tests__/resources.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
+import { countCatalogResources, countCatalogResourceTemplates } from '../resources.js';
 import { createToolHandlers } from '../tools.js';
-import { countCatalogResourceTemplates, countCatalogResources } from '../resources.js';
 describe('@morya-ui/mcp resources', () => {
     const handlers = createToolHandlers();
     it('registers static resources and resource templates', () => {

package/dist/__tests__/tools.test.js

@@ -160,6 +160,34 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.id).toBe('page-scroll-choice');
         expect(result.options.some((option) => option.component === 'MScrollbar')).toBe(true);
     });
+    it('suggests redundant wrappers around MPage blocks', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageContent><div style="padding:24px"><MPageFilters /></div></MPageContent>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'redundant-wrapper' && item.standardId === 'page-sections')).toBe(true);
+    });
+    it('suggests height-chain when MLayout is used without shell CSS', () => {
+        const result = read(handlers.validatePage({
+            code: '<MLayout fill-viewport has-sider><MLayoutContent /></MLayout>',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'height-chain')).toBe(true);
+    });
+    it('suggests menu icons when MMenu model has no icon fields', () => {
+        const result = read(handlers.validatePage({
+            code: `<MMenu :model="[{ key: 'users', label: 'Users', to: '/users' }]" />`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'menu-missing-icons')).toBe(true);
+    });
+    it('does not suggest menu icons when model items include icon', () => {
+        const result = read(handlers.validatePage({
+            code: `<MMenu :model="[{ key: 'users', label: 'Users', icon: 'user', to: '/users' }]" />`,
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.suggestions.some((item) => item.type === 'menu-missing-icons')).toBe(false);
+    });
     it('lists component decision guides when query is omitted', () => {
         const result = read(handlers.recommendComponent({ limit: 5 }));
         expect(result.kind).toBe('decisions');

package/dist/decisions.js

@@ -1,4 +1,46 @@
 export const componentDecisions = [
+    {
+        id: 'form-surface-choice',
+        title: '新建/编辑用弹窗还是独立表单页',
+        titleEn: 'Dialog vs dedicated form page for create/edit',
+        question: '表单是从列表触发的短录入，还是多分组/长流程的独立配置？',
+        questionEn: 'Is this a short create/edit from a list, or a multi-section dedicated form flow?',
+        keywords: ['新建', '编辑', '表单', '弹窗', '路由', 'create', 'edit', 'form', 'dialog', 'page'],
+        options: [
+            {
+                component: 'Dialog',
+                when: [
+                    '从列表/工具栏打开新建或编辑',
+                    '字段大约 ≤8 个、单段表单',
+                    '希望保存后仍停留在列表上下文',
+                ],
+                whenEn: [
+                    'Create/edit is launched from a list or toolbar',
+                    'About ≤8 fields in a single section',
+                    'User should stay in the list context after save',
+                ],
+                avoidWhen: ['多步骤向导', '多分组长配置页'],
+                avoidWhenEn: ['Multi-step wizards', 'Long multi-section configuration pages'],
+            },
+            {
+                component: 'Drawer',
+                when: ['表单比 Dialog 更长但仍需对照列表', '详情+编辑侧滑'],
+                whenEn: ['Form is longer than a dialog but list context matters', 'Detail plus edit in a side panel'],
+                avoidWhen: ['字段极少的确认式录入'],
+                avoidWhenEn: ['Tiny confirmation-style forms'],
+            },
+            {
+                component: 'Form',
+                when: ['用户明确要求独立表单页', '多分组、长校验、离开需确认的配置流'],
+                whenEn: [
+                    'The user explicitly asked for a dedicated form page',
+                    'Multi-section, heavy validation, or leave-confirm configuration flows',
+                ],
+                avoidWhen: ['列表上的常规短 CRUD'],
+                avoidWhenEn: ['Routine short CRUD from a list'],
+            },
+        ],
+    },
     {
         id: 'overlay-choice',
         title: '如何选择浮层组件',
@@ -9,10 +51,23 @@ export const componentDecisions = [
         options: [
             {
                 component: 'Dialog',
-                when: ['需要用户聚焦完成一项短到中等任务', '需要确认危险操作', '内容不适合直接放在页面流中'],
-                whenEn: ['The user should focus on a short or medium-sized task', 'A destructive action needs confirmation', 'Content should not interrupt the page flow'],
-                avoidWhen: ['内容接近完整页面', '用户需要持续查看底层页面上下文'],
-                avoidWhenEn: ['The content is effectively a full page', 'The user must continuously reference the underlying page'],
+                when: [
+                    '需要用户聚焦完成一项短到中等任务',
+                    '列表页上的新建/编辑短表单（约 ≤8 个字段）',
+                    '需要确认危险操作',
+                    '内容不适合直接放在页面流中',
+                ],
+                whenEn: [
+                    'The user should focus on a short or medium-sized task',
+                    'Create/edit short forms launched from a list (~≤8 fields)',
+                    'A destructive action needs confirmation',
+                    'Content should not interrupt the page flow',
+                ],
+                avoidWhen: ['内容接近完整多分组页面', '用户需要持续查看底层页面上下文且表单很长'],
+                avoidWhenEn: [
+                    'The content is effectively a multi-section full page',
+                    'The user must continuously reference the underlying page and the form is long',
+                ],
             },
             {
                 component: 'Drawer',

package/dist/golden-pages.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 export const goldenPageCatalog = [
@@ -23,6 +23,27 @@ export const goldenPageCatalog = [
         titleEn: 'Dashboard golden sample',
         patternId: 'dashboard',
     },
+    {
+        id: 'login-page',
+        file: 'login-page.vue',
+        title: '登录页黄金样例',
+        titleEn: 'Login page golden sample',
+        patternId: 'auth-page',
+    },
+    {
+        id: 'landing-page',
+        file: 'landing-page.vue',
+        title: '营销落地页黄金样例',
+        titleEn: 'Marketing landing golden sample',
+        patternId: 'marketing-landing',
+    },
+    {
+        id: 'empty-state',
+        file: 'empty-state.vue',
+        title: '空状态黄金样例',
+        titleEn: 'Empty state golden sample',
+        patternId: 'empty-state',
+    },
 ];
 const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
 const bundledDir = join(pkgRoot, 'data/golden-pages');

package/dist/index.js

@@ -102,7 +102,7 @@ register('recommend_component', 'List, read, or recommend component selection gu
     offset: z.number().int().min(0).optional(),
 }, async (args) => handlers.recommendComponent(args));
 register('list_golden_pages', 'List golden page samples for list, form, and dashboard layouts.', { mode: z.string().optional() }, async (args) => handlers.listGoldenPageCatalog(args));
-register('get_golden_page', 'Read a golden page Vue source sample (list-page, form-page, dashboard-page).', {
+register('get_golden_page', 'Read a golden page Vue source sample (list-page, form-page, dashboard-page, login-page, landing-page, empty-state).', {
     page: z.string().min(1),
     mode: z.string().optional(),
 }, async (args) => handlers.getGoldenPage(args));

package/dist/page-snippets.js

@@ -127,11 +127,75 @@ const loading = ref(false)`,
     :severity="value === 'active' ? 'success' : 'secondary'"
   />
 </template>`,
-        rules: ['状态用 MTag，不要用 Button 颜色表达状态'],
-        rulesEn: ['Use MTag for status, not Button colors'],
+        rules: ['分类/强调态用 MTag；更轻的圆点+文案用 MStatus', '不要用 Button 颜色表达状态'],
+        rulesEn: ['Use MTag for chip-like status; use MStatus for lighter dot+label', 'Do not use Button colors for status'],
         avoid: ['不要用裸文本颜色区分状态'],
         avoidEn: ['Do not rely on raw text color for status'],
     },
+    {
+        id: 'list-status-dot',
+        title: '表格状态列 Status',
+        titleEn: 'Table status dot cell',
+        description: '在 #cell-status 中用 MStatus 展示轻量业务状态。',
+        descriptionEn: 'Render lightweight business status with MStatus in #cell-status.',
+        pageTypes: ['list'],
+        keywords: ['状态', 'status', 'dot', 'cell-status', '在线'],
+        imports: ['MStatus'],
+        template: `<template #cell-status="{ value }">
+  <MStatus
+    :label="value === 'online' ? '在线' : '离线'"
+    :severity="value === 'online' ? 'success' : 'secondary'"
+  />
+</template>`,
+        rules: ['行内轻量状态优先 MStatus', '不要用 Button 颜色表达状态'],
+        rulesEn: ['Prefer MStatus for lightweight inline status', 'Do not use Button colors for status'],
+        avoid: ['不要用裸文本颜色区分状态'],
+        avoidEn: ['Do not rely on raw text color for status'],
+    },
+    {
+        id: 'empty-block',
+        title: '空状态 MEmpty',
+        titleEn: 'Empty state with MEmpty',
+        description: '列表或内容区无数据时使用 MEmpty，操作放在 #extra。',
+        descriptionEn: 'Use MEmpty for no-data regions; put actions in #extra.',
+        pageTypes: ['list', 'common'],
+        keywords: ['空状态', '无数据', 'empty', 'zero state', 'no data'],
+        imports: ['MEmpty', 'MButton'],
+        template: `<MEmpty
+  title="还没有数据"
+  description="创建第一条记录后即可在此查看。"
+  icon="database"
+>
+  <template #extra>
+    <MButton label="新建" />
+    <MButton label="导入" severity="secondary" text />
+  </template>
+</MEmpty>`,
+        rules: ['正常无数据用 MEmpty，不要用错误色', '主 CTA 用 primary，次动作用 text/secondary'],
+        rulesEn: ['Use MEmpty for normal emptiness, not error colors', 'Primary CTA + secondary/text for lesser actions'],
+        avoid: ['不要用手写 div 拼空态', '不要用 MResult 表达无数据'],
+        avoidEn: ['Do not hand-roll empty markup', 'Do not use MResult for no-data'],
+    },
+    {
+        id: 'result-block',
+        title: '结果页 MResult',
+        titleEn: 'Result page with MResult',
+        description: '提交成功、失败或 403/404/500 使用 MResult。',
+        descriptionEn: 'Use MResult for submit outcomes and 403/404/500 pages.',
+        pageTypes: ['common'],
+        keywords: ['结果', '成功', '失败', '404', '403', 'result', 'success', 'error'],
+        imports: ['MResult', 'MButton'],
+        template: `<MResult status="success" description="订单已创建，可在列表中查看详情。">
+  <template #extra>
+    <MButton label="查看订单" />
+    <MButton label="返回列表" severity="secondary" text />
+  </template>
+</MResult>`,
+        rules: ['流程终点用 MResult', '提供明确下一步操作'],
+        rulesEn: ['Use MResult for terminal outcomes', 'Provide clear next-step actions'],
+        avoid: ['不要用 MEmpty 表达 403/404/失败', '不要只靠颜色表达结果'],
+        avoidEn: ['Do not use MEmpty for 403/404/failure', 'Do not rely on color alone'],
+    },
     {
         id: 'form-header',
         title: '表单页标题区',
@@ -330,23 +394,51 @@ const recentRows = ref<Record<string, unknown>[]>([])`,
         descriptionEn: 'Minimal MLayout fillViewport shell with header and content.',
         pageTypes: ['common'],
         keywords: ['layout', 'shell', 'breadcrumb', 'sider', 'app'],
-        imports: ['MLayout', 'MLayoutHeader', 'MLayoutContent', 'MBreadcrumb', 'MConfigProvider', 'zhCN'],
+        imports: [
+            'MLayout',
+            'MLayoutHeader',
+            'MLayoutContent',
+            'MLayoutSider',
+            'MMenu',
+            'MBreadcrumb',
+            'MPageContent',
+            'MConfigProvider',
+            'zhCN',
+        ],
         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>
-        <!-- page sections -->
-      </MPageContent>
-    </MLayoutContent>
+  <MLayout fill-viewport has-sider>
+    <MLayoutSider v-model:collapsed="siderCollapsed" bordered :collapsed-width="72">
+      <MMenu
+        :model="[
+          { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
+          { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
+        ]"
+        :collapsed="siderCollapsed"
+        :collapsed-width="72"
+      />
+    </MLayoutSider>
+    <MLayout>
+      <MLayoutHeader :padding="'var(--m-space-4) var(--m-space-6)'">
+        <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '当前页' }]" />
+      </MLayoutHeader>
+      <MLayoutContent>
+        <MPageContent>
+          <!-- page sections -->
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
   </MLayout>
 </MConfigProvider>`,
-        rules: ['根布局用 fillViewport', '面包屑放 MLayoutHeader'],
-        rulesEn: ['Use fillViewport on the root layout', 'Place breadcrumb in MLayoutHeader'],
-        avoid: ['不要手写 min-height: 100vh'],
-        avoidEn: ['Do not hand-write min-height: 100vh'],
+        rules: [
+            '根布局用 fillViewport',
+            '面包屑放 MLayoutHeader',
+        ],
+        rulesEn: [
+            'Use fillViewport on the root layout',
+            'Place breadcrumb in MLayoutHeader',
+        ],
+        avoid: ['不要在 MLayoutContent 上写 padding'],
+        avoidEn: ['Do not put padding on MLayoutContent'],
     },
     {
         id: 'scrollable-panel',

package/dist/patterns.d.ts

@@ -68,7 +68,7 @@ export declare const designRules: {
             readonly do: readonly ["MLayoutHeader bordered (default)", "MPageFilters for filter regions", "MPageSection variant=\"form\" for forms", "MTable bordered when table needs grid lines"];
             readonly avoid: readonly ["MCard wrapping MTable that is already bordered", "Nested MCard with bordered=true on both levels", "Hand-written section borders when MPageFilters or MPageSection applies", "Double borders on filter + table wrapper"];
         };
-        readonly goldenPages: readonly ["list-page", "form-page", "dashboard-page"];
+        readonly goldenPages: readonly ["list-page", "form-page", "dashboard-page", "login-page", "landing-page", "empty-state"];
     };
     readonly actions: {
         readonly primary: {
@@ -90,13 +90,15 @@ export declare const designRules: {
         };
     };
     readonly status: {
-        readonly component: "MTag";
+        readonly preferred: "MStatus";
+        readonly chip: "MTag";
         readonly mapping: {
             readonly active: "success";
             readonly pending: "warn";
             readonly disabled: "secondary";
             readonly error: "danger";
         };
+        readonly note: "行内轻量状态用 MStatus；芯片/可关闭标签用 MTag";
     };
     readonly feedback: {
         readonly default: "message";
@@ -110,13 +112,23 @@ export declare const designRules: {
             readonly when: readonly ["同时需要标题与补充说明", "后台任务/批量结果含统计", "异步通知感、角落堆叠"];
             readonly avoid: readonly ["仅有单行文案时不要使用 Toast"];
         };
+        readonly empty: {
+            readonly component: "MEmpty";
+            readonly when: readonly ["列表无数据", "筛选无结果", "首次使用"];
+            readonly avoid: readonly ["不要用错误色表达正常空态", "不要用 MResult 表达无数据"];
+        };
+        readonly result: {
+            readonly component: "MResult";
+            readonly when: readonly ["提交成功/失败页", "403 / 404 / 500", "流程终点回执"];
+            readonly avoid: readonly ["不要用手写图标+文案替代 MResult", "不要用 MEmpty 表达阻断错误"];
+        };
         readonly inlineMessage: {
-            readonly component: "MMessage";
-            readonly when: readonly ["登录/表单区常驻错误", "页面级错误需与表单同区展示"];
+            readonly api: "field errorMessage | token-styled role=alert";
+            readonly when: readonly ["登录/表单区常驻错误：优先字段 errorMessage", "表单级总结：使用 --m-* 样式的 role=alert 条（见 login-page 黄金样例）", "MMessage 组件当前主要为 message 服务宿主，勿臆造 severity 子节点 API"];
         };
         readonly doc: "docs/feedback-message-vs-toast.md";
     };
-    readonly global: readonly ["优先使用组件库组件和 --m-* Token", "操作反馈默认 message；仅一行文案时优先于 toast", "图标按钮建议提供 aria-label；表单字段建议有可见 label", "浮层默认 Teleport 到 body；有明确布局约束时再改 appendTo", "优先使用组件 documented variant，少写深层 CSS 覆盖"];
+    readonly global: readonly ["优先使用组件库组件和 --m-* Token", "操作反馈默认 message；仅一行文案时优先于 toast", "空态用 MEmpty；结果/阻断页用 MResult；行内状态优先 MStatus", "图标按钮建议提供 aria-label；表单字段建议有可见 label", "浮层默认 Teleport 到 body；有明确布局约束时再改 appendTo", "优先使用组件 documented variant，少写深层 CSS 覆盖"];
 };
 export declare function findPattern(input: string): PagePattern | undefined;
 export declare function scorePattern(pattern: PagePattern, query: string): number;