@morya-ui/mcp 0.2.8 → 0.2.9

package/data/example-coverage.json

@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-09-21T01:37:39.078Z",
-  "catalogGeneratedAt": "2026-09-21T01:37:31.355Z",
+  "generatedAt": "2026-09-21T09:57:51.741Z",
+  "catalogGeneratedAt": "2026-09-21T09:57:47.817Z",
   "components": [
     {
       "id": "Accordion",

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * 黄金样例：仪表盘页
- * @see DESIGN.md §3
+ * @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
  */
 import {
   MBreadcrumb,
@@ -16,6 +16,7 @@ import {
   MPageHeader,
   MPagePlaceholder,
   MPageStat,
+  MStatus,
   MTable,
   MTag,
   zhCN,
@@ -32,7 +33,7 @@ const recentColumns = [
   { key: 'id', label: '工单号', width: 96 },
   { key: 'title', label: '标题' },
   { key: 'priority', label: '优先级', width: 96 },
-  { key: 'status', label: '状态', width: 96 },
+  { key: 'status', label: '状态', width: 110 },
 ]
 
 const recentRows = [
@@ -47,11 +48,23 @@ function prioritySeverity(p: string) {
   return 'secondary'
 }
 
+function priorityLabel(p: string) {
+  if (p === 'high') return '高'
+  if (p === 'medium') return '中'
+  return '低'
+}
+
 function statusLabel(s: string) {
   if (s === 'open') return '待处理'
   if (s === 'progress') return '进行中'
   return '已完成'
 }
+
+function statusSeverity(s: string) {
+  if (s === 'open') return 'warn'
+  if (s === 'progress') return 'info'
+  return 'success'
+}
 </script>
 
 <template>
@@ -63,7 +76,10 @@ function statusLabel(s: string) {
 
       <MLayoutContent>
         <MPageContent density="spacious">
-          <MPageHeader title="仪表盘" />
+          <MPageHeader
+            title="运营概览"
+            description="关注今日活跃与待处理工单，异常优先下钻。"
+          />
 
           <MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
             <MGridItem v-for="item in stats" :key="item.label" :span="1">
@@ -77,20 +93,37 @@ function statusLabel(s: string) {
             </MGridItem>
           </MGrid>
 
-          <MGrid :cols="2" :x-gap="16" :y-gap="16">
+          <MGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen">
             <MGridItem :span="1">
               <MCard title="趋势概览">
-                <MPagePlaceholder aria-label="图表占位" description="图表区域（接入 ECharts / 业务组件）" />
+                <MPagePlaceholder
+                  aria-label="图表占位"
+                  description="接入图表组件后展示近 7 日活跃与转化。"
+                />
               </MCard>
             </MGridItem>
             <MGridItem :span="1">
               <MCard title="最近工单">
-                <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered>
+                <MTable
+                  :columns="recentColumns"
+                  :rows="recentRows"
+                  size="small"
+                  :paginator="false"
+                  bordered
+                  row-key="id"
+                  aria-label="最近工单"
+                >
                   <template #cell-priority="{ value }">
-                    <MTag :value="String(value)" :severity="prioritySeverity(String(value))" />
+                    <MTag
+                      :value="priorityLabel(String(value))"
+                      :severity="prioritySeverity(String(value))"
+                    />
                   </template>
                   <template #cell-status="{ value }">
-                    <MTag :value="statusLabel(String(value))" severity="info" />
+                    <MStatus
+                      :label="statusLabel(String(value))"
+                      :severity="statusSeverity(String(value))"
+                    />
                   </template>
                 </MTable>
               </MCard>

package/data/golden-pages/empty-state.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * 黄金样例：列表空状态（Flow）
- * @see DESIGN.md §3 · morya-ui-pages surfaces § Flow
+ * @see DESIGN.md · page-layouts.md · surfaces § Flow
  * 可嵌在列表页 MPageContent / MTable #empty 中；此处给出完整可运行骨架。
  */
 import {
@@ -53,6 +53,10 @@ import {
 
 <style scoped>
 .empty-state-shell {
+  display: grid;
+  place-items: center;
+  min-height: 18rem;
+  padding: var(--m-space-8) var(--m-space-6);
   border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, var(--m-color-primary));
   border-radius: var(--m-radius-md);
   background:
@@ -63,4 +67,21 @@ import {
     ),
     var(--m-color-surface);
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .empty-state-shell {
+    animation: empty-in 400ms ease both;
+  }
+}
+
+@keyframes empty-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.35rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * 黄金样例：表单页
- * @see DESIGN.md §3
+ * @see DESIGN.md · morya-ui-pages references/page-layouts.md
  */
 import {
   MBreadcrumb,

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * 黄金样例：营销落地页（Express）
- * @see DESIGN.md §3 · morya-ui-pages surfaces § Express
+ * @see DESIGN.md · page-layouts.md · surfaces § Express
  * 首屏单一任务；控件用 M*；色彩只走 --m-*；避开 AI 默认脸。
  */
 import { MAccordion, MButton, MConfigProvider, MTag, zhCN } from 'morya-ui'
@@ -219,6 +219,36 @@ const faqTabs = [
   font-weight: 600;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .landing-hero__track span {
+    animation: landing-fade-up 480ms ease both;
+  }
+
+  .landing-hero__track span:nth-child(2) {
+    animation-delay: 60ms;
+  }
+
+  .landing-hero__track span:nth-child(3) {
+    animation-delay: 120ms;
+  }
+
+  .landing-hero__track span:nth-child(4) {
+    animation-delay: 180ms;
+  }
+}
+
+@keyframes landing-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(0.4rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .landing-section {
   padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
   max-width: 72rem;

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 /**
  * 黄金样例：列表页
- * @see DESIGN.md §3
+ * @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
  */
 import {
   MBreadcrumb,
   MButton,
   MConfigProvider,
+  MEmpty,
   MInput,
   MLayout,
   MLayoutContent,
@@ -18,8 +19,8 @@ import {
   MPageToolbar,
   MSelect,
   MSpace,
+  MStatus,
   MTable,
-  MTag,
   zhCN,
 } from 'morya-ui'
 import { ref } from 'vue'
@@ -31,6 +32,7 @@ const siderCollapsed = ref(false)
 const menuModel = [
   { key: 'users', label: '用户管理', icon: 'user', to: '/users' },
   { key: 'roles', label: '角色管理', icon: 'shield', to: '/roles' },
+  { key: 'settings', label: '系统设置', icon: 'settings', to: '/settings' },
 ]
 
 const statusOptions = [
@@ -41,9 +43,9 @@ const statusOptions = [
 
 const columns = [
   { key: 'name', label: '名称' },
-  { key: 'status', label: '状态' },
-  { key: 'updatedAt', label: '更新时间' },
-  { key: 'actions', label: '操作', width: 128 },
+  { key: 'status', label: '状态', width: 120 },
+  { key: 'updatedAt', label: '更新时间', width: 140 },
+  { key: 'actions', label: '操作', width: 148 },
 ]
 
 const rows = [
@@ -104,7 +106,7 @@ const rows = [
             <MTable
               :columns="columns"
               :rows="rows"
-              :rows-per-page="3"
+              :rows-per-page="5"
               paginator
               striped
               bordered
@@ -112,22 +114,33 @@ const rows = [
               aria-label="用户列表"
             >
               <template #cell-status="{ value }">
-                <MTag :value="value === 'active' ? '启用' : '停用'" :severity="value === 'active' ? 'success' : 'secondary'" />
+                <MStatus
+                  :label="value === 'active' ? '启用' : '停用'"
+                  :severity="value === 'active' ? 'success' : 'secondary'"
+                />
               </template>
               <template #cell-actions>
                 <MSpace>
-                  <MButton severity="secondary" size="small">
+                  <MButton severity="secondary" size="small" text>
                     编辑
                   </MButton>
-                  <MButton severity="danger" size="small">
+                  <MButton severity="danger" size="small" text>
                     删除
                   </MButton>
                 </MSpace>
               </template>
               <template #empty>
-                <p style="margin: 0; padding: var(--m-space-8); text-align: center; color: var(--m-color-text-muted)">
-                  暂无用户数据
-                </p>
+                <MEmpty
+                  title="还没有用户"
+                  description="创建第一个用户后，即可分配角色与权限。"
+                  icon="user"
+                >
+                  <template #extra>
+                    <MButton severity="primary">
+                      新建用户
+                    </MButton>
+                  </template>
+                </MEmpty>
               </template>
             </MTable>
           </MPageContent>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * 黄金样例：登录页（Account + 轻量品牌）
- * @see DESIGN.md §3 · morya-ui-pages surfaces § Account
+ * @see DESIGN.md · surfaces § Account · visual-craft § Atmosphere
  */
 import {
   MButton,
@@ -56,7 +56,6 @@ async function onSubmit() {
             <p>使用工作邮箱进入后台。</p>
           </header>
 
-          <!-- 表单级常驻错误：token 样式告警条（字段错误优先用 errorMessage） -->
           <p v-if="formError" class="login-alert" role="alert">
             {{ formError }}
           </p>
@@ -82,7 +81,7 @@ async function onSubmit() {
             </MFormItem>
 
             <MSpace style="margin-top: var(--m-space-2)" alignment="center">
-              <MButton type="submit" label="登录" :loading="submitting" />
+              <MButton type="submit" label="登录" severity="primary" :loading="submitting" />
               <MButton type="button" label="忘记密码" severity="secondary" text />
             </MSpace>
           </MForm>
@@ -102,21 +101,45 @@ async function onSubmit() {
 }
 
 .login-brand {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   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) 18%, var(--m-color-surface)) 0%,
+      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%
     );
   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 {
+  position: relative;
+  z-index: 1;
+}
+
 .login-brand__mark {
   margin: 0;
   font-size: 0.8125rem;
@@ -177,6 +200,23 @@ async function onSubmit() {
   line-height: 1.45;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .login-panel {
+    animation: login-panel-in 420ms ease both;
+  }
+}
+
+@keyframes login-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 768px) {
   .login-shell {
     grid-template-columns: 1fr;

package/dist/__tests__/tools.test.js

@@ -199,6 +199,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);

package/dist/decisions.js

@@ -136,7 +136,7 @@ export const componentDecisions = [
         titleEn: 'Choosing a selection control',
         question: '选项是平面少量、层级结构、多选标签，还是需要输入搜索？',
         questionEn: 'Are options a small flat set, a hierarchy, multi-select tags, or searchable input?',
-        keywords: ['选择', '下拉', '多选', '树选择', '搜索选择', 'select', 'treeselect', 'autocomplete', 'dropdown'],
+        keywords: ['选择', '下拉', '多选', '树选择', '搜索选择', '级联', '列表选择', '按钮组', 'select', 'treeselect', 'autocomplete', 'cascadeselect', 'listbox', 'selectbutton', 'radio', 'dropdown'],
         options: [
             {
                 component: 'Select',
@@ -159,6 +159,34 @@ export const componentDecisions = [
                 avoidWhen: ['用户只能从固定枚举中选择', '不应该允许自由输入'],
                 avoidWhenEn: ['Users must choose from a fixed enum', 'Free input must not be allowed'],
             },
+            {
+                component: 'SelectButton',
+                when: ['选项很少且需要全部露出', '单选或多选都适合按钮组'],
+                whenEn: ['Only a few options, and all of them should stay visible', 'Single or multiple selection works as a button group'],
+                avoidWhen: ['选项超过大约 5 个', '选项很长或来自远程搜索'],
+                avoidWhenEn: ['More than about five options', 'Labels are long or options come from remote search'],
+            },
+            {
+                component: 'Radio',
+                when: ['少量互斥选项需要和表单文案一起阅读', '一次只能选一个'],
+                whenEn: ['A few mutually exclusive options should be read with the form copy', 'Only one value can be selected'],
+                avoidWhen: ['多选', '选项很多需要收进弹出层'],
+                avoidWhenEn: ['Multiple selection', 'Too many options for an always-visible list'],
+            },
+            {
+                component: 'Listbox',
+                when: ['选项需要始终以列表展示', '可筛选，但不希望收成下拉框'],
+                whenEn: ['Options should stay visible as a list', 'Filtering is useful, but a collapsed dropdown is not'],
+                avoidWhen: ['页面空间紧、只需要一个闭合的选择框'],
+                avoidWhenEn: ['Space is tight and a closed select is enough'],
+            },
+            {
+                component: 'CascadeSelect',
+                when: ['值要按多级分栏逐级点选', '层级是路径而不是可勾选的树'],
+                whenEn: ['The value is chosen column by column through levels', 'The hierarchy is a path, not a checkable tree'],
+                avoidWhen: ['需要勾选树节点或搜索整棵树'],
+                avoidWhenEn: ['Users need to check tree nodes or search the whole tree'],
+            },
         ],
     },
     {
@@ -452,6 +480,113 @@ export const componentDecisions = [
             },
         ],
     },
+    {
+        id: 'status-label-choice',
+        title: '如何选择状态与标签',
+        titleEn: 'Choosing status, tag, chip, or badge',
+        question: '这是行内业务状态、分类标签、可移除实体，还是挂在控件上的数量？',
+        questionEn: 'Is this an inline business status, a category label, a removable entity, or a count on another control?',
+        keywords: ['行内状态', '状态点', '角标', '徽章', '可关闭标签', '芯片', 'status', 'badge', 'chip', 'tag', 'closable'],
+        options: [
+            {
+                component: 'Status',
+                when: ['表格单元格或标题旁的业务状态', '需要圆点或语义图标加短文案'],
+                whenEn: ['Business status in a table cell or beside a title', 'A dot or semantic icon plus a short label'],
+                avoidWhen: ['可关闭的分类标签', '挂在按钮上的数字'],
+                avoidWhenEn: ['A closable category label', 'A count attached to a button'],
+            },
+            {
+                component: 'Tag',
+                when: ['分类、筛选结果或可关闭标签', '需要比 Status 更像芯片的表面'],
+                whenEn: ['A category, filter result, or closable label', 'A chip-like surface rather than an inline status'],
+                avoidWhen: ['只是一行里的轻量状态', '带图片且代表一个可移除实体'],
+                avoidWhenEn: ['A lightweight inline status', 'An entity with an image that can be removed'],
+            },
+            {
+                component: 'Chip',
+                when: ['短实体信息，可带图标、图片和移除'],
+                whenEn: ['A short entity that may include an icon, image, and remove action'],
+                avoidWhen: ['纯状态色点', '只是分类色块'],
+                avoidWhenEn: ['A status dot only', 'A category color block only'],
+            },
+            {
+                component: 'Badge',
+                when: ['角标数量或圆点，附着在按钮、头像等控件上'],
+                whenEn: ['A count or dot attached to a button, avatar, or other control'],
+                avoidWhen: ['独立成行的状态文案'],
+                avoidWhenEn: ['A standalone status sentence'],
+            },
+        ],
+    },
+    {
+        id: 'empty-result-choice',
+        title: '空态还是结果页',
+        titleEn: 'Empty state vs result page',
+        question: '这是没有数据，还是流程已经结束的成功、失败或 HTTP 状态？',
+        questionEn: 'Is there simply no data, or has a flow ended in success, failure, or an HTTP status?',
+        keywords: ['空状态', '无数据', '首次使用', '筛选无结果', '结果页', '404', '403', '500', 'empty', 'result'],
+        options: [
+            {
+                component: 'Empty',
+                when: ['列表没有行', '筛选没有命中', '首次使用，需要引导创建'],
+                whenEn: ['A list has no rows', 'Filters matched nothing', 'First use, and the next step is to create something'],
+                avoidWhen: ['接口失败', '无权限', '页面不存在', '提交成功回执'],
+                avoidWhenEn: ['The request failed', 'Permission was denied', 'The page does not exist', 'A submit-success receipt'],
+            },
+            {
+                component: 'Result',
+                when: ['提交成功或失败的终点页', '403 / 404 / 500 等阻断状态', '需要明确的下一步（返回、重试、回首页）'],
+                whenEn: ['A terminal success or failure page', 'A blocking 403 / 404 / 500 state', 'The next step must be explicit (back, retry, home)'],
+                avoidWhen: ['正常的无数据', '表格内部的空行'],
+                avoidWhenEn: ['A normal empty collection', 'The empty slot inside a table'],
+            },
+        ],
+    },
+    {
+        id: 'action-menu-choice',
+        title: '如何选择菜单',
+        titleEn: 'Choosing a menu',
+        question: '这是按钮上的操作项、侧栏导航、右键菜单，还是全局命令搜索？',
+        questionEn: 'Is this an action menu on a trigger, sider navigation, a context menu, or a global command search?',
+        keywords: ['动作菜单', '右键', '右键菜单', '命令面板', '导航菜单', 'context menu', 'command menu', 'menubar', '上下文菜单'],
+        options: [
+            {
+                component: 'Dropdown',
+                when: ['从按钮或图标打开一组操作', '编辑、删除、更多'],
+                whenEn: ['Actions open from a button or icon', 'Edit, delete, or more'],
+                avoidWhen: ['表单里选一个枚举值', '常驻侧栏导航'],
+                avoidWhenEn: ['Choosing an enum in a form', 'Persistent sider navigation'],
+            },
+            {
+                component: 'Menu',
+                when: ['后台侧栏或页面内的常驻导航', '需要选中项与路由同步'],
+                whenEn: ['Persistent navigation in an admin sider or page', 'Selection should stay in sync with the route'],
+                avoidWhen: ['一次性操作菜单', '右键弹出'],
+                avoidWhenEn: ['A one-shot action menu', 'A right-click popup'],
+            },
+            {
+                component: 'ContextMenu',
+                when: ['在指针位置弹出，通常由右键触发'],
+                whenEn: ['The menu opens at the pointer, usually from a right-click'],
+                avoidWhen: ['可见的导航', '表单选择'],
+                avoidWhenEn: ['Visible navigation', 'Form selection'],
+            },
+            {
+                component: 'CommandMenu',
+                when: ['全局搜索命令或跳转', '键盘优先，例如 Cmd/Ctrl+K'],
+                whenEn: ['Global command search or jump', 'Keyboard-first, such as Cmd/Ctrl+K'],
+                avoidWhen: ['少量固定操作放在按钮旁即可'],
+                avoidWhenEn: ['A few fixed actions fit next to a button'],
+            },
+            {
+                component: 'Menubar',
+                when: ['顶部应用菜单，项很多且分组'],
+                whenEn: ['A top application menu with many grouped items'],
+                avoidWhen: ['侧栏只有一层链接'],
+                avoidWhenEn: ['The sider is a single level of links'],
+            },
+        ],
+    },
 ];
 export function findDecision(name) {
     const key = name.trim().toLowerCase().replace(/[-_\s]/g, '');

package/dist/page-snippets.js

@@ -61,7 +61,7 @@ const statusOptions = [
         descriptionEn: 'Standard MTable placed directly in MPageContent without an extra Card wrapper.',
         pageTypes: ['list'],
         keywords: ['表格', 'table', 'pagination', 'paginator', 'empty', 'columns', 'rows'],
-        imports: ['MTable'],
+        imports: ['MTable', 'MEmpty', 'MButton'],
         scriptSetup: `const columns = [
   { key: 'name', label: '名称' },
   { key: 'status', label: '状态' },
@@ -82,13 +82,19 @@ const loading = ref(false)`,
   aria-label="数据列表"
 >
   <template #empty>
-    <p style="margin:0;padding:var(--m-space-8);text-align:center;color:var(--m-color-text-muted)">
-      暂无数据
-    </p>
+    <MEmpty
+      title="还没有数据"
+      description="创建第一条记录后，这里会列出结果。"
+      icon="inbox"
+    >
+      <template #extra>
+        <MButton severity="primary">新建</MButton>
+      </template>
+    </MEmpty>
   </template>
 </MTable>`,
-        rules: ['表格直接放在 MPageContent 内', '空态用 #empty，不要留空白区域'],
-        rulesEn: ['Place the table directly in MPageContent', 'Use #empty for zero-data states'],
+        rules: ['表格直接放在 MPageContent 内', '空态用 MEmpty，不要留空白或单行灰字'],
+        rulesEn: ['Place the table directly in MPageContent', 'Use MEmpty for zero-data states, not a blank or muted sentence'],
         avoid: ['不要用 MCard 包裹 bordered MTable'],
         avoidEn: ['Do not wrap a bordered MTable with MCard'],
     },
@@ -103,12 +109,12 @@ const loading = ref(false)`,
         imports: ['MSpace', 'MButton'],
         template: `<template #cell-actions>
   <MSpace>
-    <MButton severity="secondary" size="small">编辑</MButton>
-    <MButton severity="danger" size="small">删除</MButton>
+    <MButton severity="secondary" size="small" text>编辑</MButton>
+    <MButton severity="danger" size="small" text>删除</MButton>
   </MSpace>
 </template>`,
-        rules: ['行内操作用 size="small"', '危险操作使用 severity="danger" 并配合确认弹窗'],
-        rulesEn: ['Use size="small" for row actions', 'Use severity="danger" with confirmation for destructive actions'],
+        rules: ['行内操作用 size="small" + text/outlined，避免一排实心按钮', '危险操作使用 severity="danger" 并配合确认弹窗'],
+        rulesEn: ['Use size="small" with text/outlined row actions', 'Use severity="danger" with confirmation for destructive actions'],
         avoid: ['不要用 Dropdown 代替明确的行内按钮组，除非操作很多'],
         avoidEn: ['Do not replace explicit row buttons with Dropdown unless there are many actions'],
     },
@@ -116,8 +122,8 @@ const loading = ref(false)`,
         id: 'list-status-tag',
         title: '表格状态列 Tag',
         titleEn: 'Table status tag cell',
-        description: '在 #cell-status 中用 MTag 展示业务状态。',
-        descriptionEn: 'Render business status with MTag in #cell-status.',
+        description: '在 #cell-status 中用 MTag 展示分类标签（业务状态优先用 list-status-dot / MStatus）。',
+        descriptionEn: 'Render category labels with MTag in #cell-status (prefer MStatus for business status).',
         pageTypes: ['list'],
         keywords: ['状态', 'tag', 'status', 'cell-status'],
         imports: ['MTag'],
@@ -313,18 +319,22 @@ const submitting = ref(false)`,
         descriptionEn: 'Recent records in a small MTable inside MCard.',
         pageTypes: ['dashboard'],
         keywords: ['recent', '最近', 'table', 'card', 'list'],
-        imports: ['MCard', 'MTable', 'MTag'],
+        imports: ['MCard', 'MTable', 'MStatus'],
         scriptSetup: `const recentColumns = [
   { key: 'id', label: '工单号', width: 96 },
   { key: 'title', label: '标题' },
-  { key: 'status', label: '状态', width: 96 },
+  { key: 'status', label: '状态', width: 110 },
 ]
 const recentRows = ref<Record<string, unknown>[]>([])`,
         template: `<MCard title="最近工单">
-  <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered />
+  <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered row-key="id">
+    <template #cell-status="{ value }">
+      <MStatus :label="String(value ?? '')" severity="secondary" />
+    </template>
+  </MTable>
 </MCard>`,
-        rules: ['明细列表放 MCard 内合理', 'size="small" 适合卡片内表格'],
-        rulesEn: ['Detail lists inside MCard are appropriate', 'Use size="small" for in-card tables'],
+        rules: ['明细列表放 MCard 内合理', 'size="small" 适合卡片内表格', '行内业务状态用 MStatus'],
+        rulesEn: ['Detail lists inside MCard are appropriate', 'Use size="small" for in-card tables', 'Use MStatus for row business status'],
         avoid: ['卡片内表格不要再外包一层 MPageContent'],
         avoidEn: ['Do not wrap in-card tables with another MPageContent'],
     },