@morya-ui/mcp 0.4.5 → 0.5.1

package/data/golden-pages/list-page-rail.vue

@@ -2,7 +2,8 @@
 /**
  * 黄金样例：列表页 · rail（侧栏强调）
  * structure: list · style: rail
- * 氛围只在 chrome（侧栏）；内容区保持克制。镜像区块顺序。
+ * 结构与 list-page.vue 完全相同；差异只在「侧栏 chrome」一处（品牌区 + 侧栏氛围），
+ * 内容区（筛选/表格/空态）与 list-page 一致。氛围跟 styleDirection / 参考走。
  * @see list-page.vue · style-presets.md · visual-craft § Atmosphere
  */
 import {
@@ -17,22 +18,18 @@ import {
   MLayoutSider,
   MMenu,
   MPageContent,
-  MPageFilterChips,
   MPageFilters,
   MPageHeader,
   MSelect,
   MSpace,
   MStatus,
   MTable,
-  MTag,
   zhCN,
 } from 'morya-ui'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 const keyword = ref('')
 const status = ref<string | undefined>()
-const department = ref<string | null>(null)
-const filtersExpanded = ref(false)
 const siderCollapsed = ref(false)
 
 const menuModel = [
@@ -47,37 +44,9 @@ const statusOptions = [
   { label: '停用', value: 'inactive' },
 ]
 
-const departmentOptions = [
-  { label: '研发', value: '研发' },
-  { label: '运营', value: '运营' },
-  { label: '市场', value: '市场' },
-]
-
-const activeFilters = computed(() => {
-  const items: Array<{ key: string; label: string }> = []
-  if (keyword.value.trim()) {
-    items.push({ key: 'keyword', label: `关键词：${keyword.value.trim()}` })
-  }
-  if (status.value) {
-    const label = statusOptions.find((o) => o.value === status.value)?.label ?? status.value
-    items.push({ key: 'status', label: `状态：${label}` })
-  }
-  if (department.value) {
-    items.push({ key: 'department', label: `部门：${department.value}` })
-  }
-  return items
-})
-
-function clearFilter(key: string) {
-  if (key === 'keyword') keyword.value = ''
-  if (key === 'status') status.value = undefined
-  if (key === 'department') department.value = null
-}
-
 function resetFilters() {
   keyword.value = ''
   status.value = undefined
-  department.value = null
 }
 
 const columns = [
@@ -91,14 +60,13 @@ const rows = [
   { id: '1', name: '示例项目 A', status: 'active', updatedAt: '2026-09-01' },
   { id: '2', name: '示例项目 B', status: 'inactive', updatedAt: '2026-08-28' },
   { id: '3', name: '示例项目 C', status: 'active', updatedAt: '2026-08-25' },
-  { id: '4', name: '示例项目 D', status: 'active', updatedAt: '2026-08-20' },
-  { id: '5', name: '示例项目 E', status: 'inactive', updatedAt: '2026-08-15' },
 ]
 </script>
 
 <template>
   <MConfigProvider :locale="zhCN">
     <MLayout has-sider fill-viewport>
+      <!-- rail 关键：侧栏承载品牌区 + 侧栏氛围；内容区保持克制 -->
       <MLayoutSider
         v-model:collapsed="siderCollapsed"
         bordered
@@ -107,7 +75,7 @@ const rows = [
       >
         <div class="gp-rail-sider__brand">
           <span class="gp-rail-sider__mark" aria-hidden="true" />
-          <span v-if="!siderCollapsed" class="gp-rail-sider__name">Acme Ops</span>
+          <span v-if="!siderCollapsed" class="gp-rail-sider__name">{{品牌名}}</span>
         </div>
         <MMenu
           :model="menuModel"
@@ -122,22 +90,18 @@ const rows = [
           <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理' }]" />
         </MLayoutHeader>
 
+        <!-- 内容区与 list-page 一致；视觉（variant/内联宽度）跟 styleDirection -->
         <MLayoutContent>
           <MPageContent fill>
-            <MPageHeader title="用户管理" description="维护账号、角色与权限。">
+            <MPageHeader title="{{页面标题}}" description="{{页面说明}}">
               <template #actions>
                 <MButton type="primary">
-                  新建用户
+                  {{主操作}}
                 </MButton>
               </template>
             </MPageHeader>
 
-            <MPageFilters
-              v-model:expanded="filtersExpanded"
-              aria-label="筛选"
-              variant="filled"
-              collapsible
-            >
+            <MPageFilters aria-label="筛选" collapsible>
               <MSpace wrap>
                 <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
                 <MSelect
@@ -156,41 +120,16 @@ const rows = [
                   重置
                 </MButton>
               </template>
-              <template #advanced>
-                <MSpace wrap>
-                  <MSelect
-                    v-model="department"
-                    :options="departmentOptions"
-                    placeholder="部门"
-                    clearable
-                    style="width: 10rem"
-                  />
-                </MSpace>
-              </template>
             </MPageFilters>
 
-            <MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
-              <MTag
-                v-for="item in activeFilters"
-                :key="item.key"
-                :value="item.label"
-                size="small"
-                bordered
-                closable
-                @close="clearFilter(item.key)"
-              />
-            </MPageFilterChips>
-
             <MTable
               :columns="columns"
               :rows="rows"
               :rows-per-page="5"
               fill
               paginator
-              striped
-              bordered
               row-key="id"
-              aria-label="用户列表"
+              aria-label="{{列表}}"
             >
               <template #cell-status="{ value }">
                 <MStatus
@@ -210,13 +149,13 @@ const rows = [
               </template>
               <template #empty>
                 <MEmpty
-                  title="还没有用户"
-                  description="创建第一个用户后，即可分配角色与权限。"
+                  title="{{空态标题}}"
+                  description="{{空态说明}}"
                   icon="user"
                 >
                   <template #extra>
                     <MButton type="primary">
-                      新建用户
+                      {{空态主操作}}
                     </MButton>
                   </template>
                 </MEmpty>
@@ -230,13 +169,9 @@ const rows = [
 </template>
 
 <style scoped>
+/* rail 关键：侧栏氛围（token-only，不默认渐变/发光） */
 .gp-rail-sider {
-  background:
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface)) 0%,
-      var(--m-color-surface) 42%
-    );
+  background: var(--m-color-surface);
 }
 
 .gp-rail-sider__brand {
@@ -267,6 +202,5 @@ const rows = [
 
 .gp-rail-header {
   border-bottom: 1px solid var(--m-color-border);
-  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--m-color-primary) 18%, transparent);
 }
-</style>
+</style>

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

@@ -116,7 +116,7 @@ const rows = [
 
         <MLayoutContent>
           <MPageContent fill>
-            <MPageHeader title="用户管理" description="维护账号、角色与权限。">
+            <MPageHeader title="{{页面标题}}" description="{{页面说明}}">
               <template #actions>
                 <MButton type="primary">
                   新建用户
@@ -124,13 +124,14 @@ const rows = [
               </template>
             </MPageHeader>
 
+            <!-- 筛选区：四选一（list-filters / collapsible / stack / dense）。variant 跟密度，不默认 filled。 -->
             <MPageFilters
               v-model:expanded="filtersExpanded"
               aria-label="筛选"
-              variant="filled"
               collapsible
             >
               <MSpace wrap>
+                <!-- 控件宽度可局部 inline；其余视觉跟 styleDirection -->
                 <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
                 <MSelect
                   v-model="status"
@@ -161,6 +162,7 @@ const rows = [
               </template>
             </MPageFilters>
 
+            <!-- 用折叠筛选栈时通常不再叠加独立 chips；以下为演示已选摘要的独立用法 -->
             <MPageFilterChips v-if="activeFilters.length" label="已选" aria-label="已选筛选">
               <MTag
                 v-for="item in activeFilters"
@@ -173,14 +175,13 @@ const rows = [
               />
             </MPageFilterChips>
 
+            <!-- 全视口主列表：fill + paginator 成对；striped/bordered 跟密度，非默认 -->
             <MTable
               :columns="columns"
               :rows="rows"
               :rows-per-page="5"
               fill
               paginator
-              striped
-              bordered
               row-key="id"
               aria-label="用户列表"
             >
@@ -201,14 +202,15 @@ const rows = [
                 </MSpace>
               </template>
               <template #empty>
+                <!-- 空态说明“接下来做什么” + 唯一主操作 -->
                 <MEmpty
-                  title="还没有用户"
-                  description="创建第一个用户后，即可分配角色与权限。"
+                  title="{{空态标题}}"
+                  description="{{空态说明}}"
                   icon="user"
                 >
                   <template #extra>
                     <MButton type="primary">
-                      新建用户
+                      {{空态主操作}}
                     </MButton>
                   </template>
                 </MEmpty>
@@ -219,4 +221,4 @@ const rows = [
       </MLayout>
     </MLayout>
   </MConfigProvider>
-</template>
+</template>

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

@@ -25,9 +25,9 @@ const model = reactive({
   password: '',
 })
 
-/** Brand seed for Account surfaces — prefer themeConfig over page-level hex. */
+/** Brand seed for Account surfaces — prefer themeConfig over page-level hex. 品牌色改主题覆盖，不写页面 hex。 */
 const themeConfig = {
-  seed: { colorPrimary: '#0b6e4f' },
+  seed: { colorPrimary: '#0b6e4f' }, // 演示：实际项目用 --m-color-primary 主题覆盖
 }
 
 async function onSubmit() {
@@ -51,12 +51,13 @@ async function onSubmit() {
     input-variant="filled"
     :theme-config="themeConfig"
   >
+    <!-- 品牌区渐变/氛围跟 styleDirection；结构：品牌区 + 表单面板 -->
     <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__mark">{{品牌名}}</p>
+        <h1 class="login-brand__title">{{品牌主张}}</h1>
         <p class="login-brand__lead">
-          店员与会员共用同一套账户。登录后继续进货、上架与会员服务。
+          {{品牌导语}}
         </p>
       </aside>
 
@@ -64,10 +65,10 @@ async function onSubmit() {
         <div class="login-panel">
           <header class="login-panel__header">
             <MTitle :level="3">
-              登录
+              {{登录标题}}
             </MTitle>
             <MParagraph type="secondary">
-              使用工作邮箱进入后台。
+              {{登录说明}}
             </MParagraph>
           </header>
 
@@ -123,31 +124,11 @@ async function onSubmit() {
   gap: var(--m-space-4);
   padding: clamp(2rem, 6vw, 4.5rem);
   overflow: hidden;
-  background:
-    radial-gradient(
-      80% 60% at 10% 20%,
-      color-mix(in srgb, var(--m-color-primary) 22%, transparent),
-      transparent 55%
-    ),
-    linear-gradient(
-      165deg,
-      color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface)) 0%,
-      var(--m-color-surface) 55%,
-      color-mix(in srgb, var(--m-color-border) 35%, var(--m-color-surface)) 100%
-    );
+  /* 品牌氛围（渐变/插画）跟 styleDirection；默认 token-only 平壳 */
+  background: var(--m-color-surface);
   border-right: 1px solid var(--m-color-border);
 }
 
-.login-brand::after {
-  content: '';
-  position: absolute;
-  inset: auto -10% -20% 40%;
-  height: 55%;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--m-color-primary) 12%, transparent);
-  pointer-events: none;
-}
-
 .login-brand__mark,
 .login-brand__title,
 .login-brand__lead {

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

@@ -34,20 +34,21 @@ import {
 
       <MLayoutContent>
         <MPageContent>
+          <!-- 结果壳：视觉（渐变/虚线边框）跟 styleDirection；此处保留 token-only 极简壳 -->
           <div class="result-shell">
             <MResult
               status="403"
-              title="没有权限查看该项目"
-              description="当前账号无权访问「青禾书房」工作区。可返回上一页，或联系管理员开通权限。"
+              title="{{结果标题}}"
+              description="{{结果说明}}"
               size="large"
             >
               <template #footer>
                 <MSpace>
                   <MButton type="primary">
-                    返回上一页
+                    {{主操作}}
                   </MButton>
                   <MButton type="text">
-                    联系管理员
+                    {{次操作}}
                   </MButton>
                 </MSpace>
               </template>
@@ -66,19 +67,7 @@ import {
   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);
-  }
+  background: var(--m-color-surface);
+  border: 1px solid var(--m-color-border);
 }
 </style>

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

@@ -8,6 +8,7 @@ import {
   MBreadcrumb,
   MButton,
   MConfigProvider,
+  message,
   MForm,
   MFormItem,
   MInput,
@@ -21,7 +22,6 @@ import {
   MSpace,
   MSwitch,
   MTabs,
-  message,
   zhCN,
 } from 'morya-ui'
 import { reactive, ref } from 'vue'
@@ -82,8 +82,8 @@ async function saveNotify() {
       <MLayoutContent>
         <MPageContent width="narrow">
           <MPageHeader
-            title="系统设置"
-            description="按域分组配置；切换 Tab 时保留未保存输入，保存成功用 message 一句话回执。"
+            title="{{设置页标题}}"
+            description="{{设置页说明}}"
           />
 
           <MTabs v-model="activeTab" :tabs="tabs">

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

@@ -89,8 +89,8 @@ async function finish() {
       <MLayoutContent>
         <MPageContent width="narrow">
           <MPageHeader
-            title="创建工作空间"
-            description="三步完成；每步只做一件事。Stepper 使用 steps（不是 items）。"
+            title="{{向导标题}}"
+            description="{{向导说明}}"
           />
 
           <MStepper v-model="activeStep" :steps="steps" linear />

package/dist/__tests__/tools.test.js

@@ -251,7 +251,9 @@ describe('@morya-ui/mcp handlers', () => {
         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');
+        // rail 变体差异集中在侧栏品牌 chrome；token-only，不再默认渐变
+        expect(rail.source).toContain('gp-rail-sider');
+        expect(rail.source).toContain('--m-color-primary');
     });
     it('exposes style direction rules without a preset catalog', () => {
         const result = read(handlers.getStyleDirection({ mode: 'zh-CN' }));
@@ -343,6 +345,27 @@ describe('@morya-ui/mcp handlers', () => {
         expect(result.ok).toBe(true);
         expect(result.suggestions.some((item) => item.type === 'status-cell-tag')).toBe(true);
     });
+    it('suggests a single filter region when multiple MPageFilters appear', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageFilters /><MPageFilters collapsible />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.craft.some((item) => item.type === 'multiple-filter-regions' && item.severity === 'craft')).toBe(true);
+    });
+    it('suggests dropping standalone chips when the collapsible stack already renders them', () => {
+        const result = read(handlers.validatePage({
+            code: '<MPageFilters collapsible><MInput /></MPageFilters><MPageFilterChips />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.craft.some((item) => item.type === 'redundant-filter-chips')).toBe(true);
+    });
+    it('suggests consistent density when compact and spacious are mixed', () => {
+        const result = read(handlers.validatePage({
+            code: '<MTable density="compact" /><MCard density="spacious" />',
+        }));
+        expect(result.ok).toBe(true);
+        expect(result.craft.some((item) => item.type === 'mixed-density')).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');