@morya-ui/mcp 0.3.8 → 0.4.0

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

@@ -4,6 +4,7 @@
  * @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
  */
 import {
+  MAlert,
   MBreadcrumb,
   MCard,
   MConfigProvider,
@@ -16,6 +17,7 @@ import {
   MEmpty,
   MPageHeader,
   MPageStat,
+  MStatistic,
   MStatus,
   MTable,
   MTag,
@@ -81,6 +83,13 @@ function statusSeverity(s: string) {
             description="关注今日活跃与待处理工单，异常优先下钻。"
           />
 
+          <MAlert
+            severity="info"
+            title="报表管道延迟约 15 分钟"
+            description="实时告警仍可用；看板数字以管道落库为准。"
+            closable
+          />
+
           <MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
             <MGridItem v-for="item in stats" :key="item.label" :span="1">
               <MPageStat
@@ -99,13 +108,18 @@ function statusSeverity(s: string) {
             <MGridItem :span="1">
               <MCard title="趋势概览" shadow="always">
                 <MEmpty
-                  description="接入图表组件后展示近 7 日活跃与转化。"
-                  icon="chart-bar"
+                  title="还没有趋势数据"
+                  description="接入图表后将展示近 7 日活跃与转化。"
+                  illustration="activity-low"
                 />
               </MCard>
             </MGridItem>
             <MGridItem :span="1">
               <MCard title="最近工单" shadow="always">
+                <div class="dashboard-plain-stats">
+                  <MStatistic title="本周新建" :value="128" />
+                  <MStatistic title="平均处理时长" :value="2.4" suffix="h" :precision="1" />
+                </div>
                 <MTable
                   :columns="recentColumns"
                   :rows="recentRows"
@@ -136,3 +150,12 @@ function statusSeverity(s: string) {
     </MLayout>
   </MConfigProvider>
 </template>
+
+<style scoped>
+.dashboard-plain-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--m-space-6);
+  margin-bottom: var(--m-space-4);
+}
+</style>

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

@@ -8,16 +8,20 @@ import {
   MButton,
   MCard,
   MConfigProvider,
+  MDescriptions,
+  MDescriptionsItem,
   MDivider,
   MLayout,
   MLayoutContent,
   MLayoutHeader,
+  MList,
+  MListItem,
+  MListItemMeta,
   MPageContent,
   MPageHeader,
   MPageSection,
   MSpace,
   MStatus,
-  MTable,
   MTag,
   zhCN,
 } from 'morya-ui'
@@ -31,12 +35,6 @@ const profile = {
   status: 'active' as const,
 }
 
-const activityColumns = [
-  { key: 'time', label: '时间', width: 160 },
-  { key: 'action', label: '动作' },
-  { key: 'channel', label: '来源', width: 100 },
-]
-
 const activityRows = [
   { id: '1', time: '2026-09-20 14:22', action: '更新了个人资料', channel: 'Web' },
   { id: '2', time: '2026-09-18 09:05', action: '重置了登录密码', channel: 'Web' },
@@ -92,51 +90,47 @@ const activityRows = [
             </p>
           </MPageSection>
 
-          <MCard title="基本信息">
-            <dl class="detail-props">
-              <div>
-                <dt>姓名</dt>
-                <dd>{{ profile.name }}</dd>
-              </div>
-              <div>
-                <dt>邮箱</dt>
-                <dd>{{ profile.email }}</dd>
-              </div>
-              <div>
-                <dt>角色</dt>
-                <dd>{{ profile.role }}</dd>
-              </div>
-              <div>
-                <dt>部门</dt>
-                <dd>{{ profile.dept }}</dd>
-              </div>
-              <div>
-                <dt>入职日期</dt>
-                <dd>{{ profile.joinedAt }}</dd>
-              </div>
-              <div>
-                <dt>状态</dt>
-                <dd>
-                  <MStatus
-                    :label="profile.status === 'active' ? '启用' : '停用'"
-                    :severity="profile.status === 'active' ? 'success' : 'secondary'"
-                  />
-                </dd>
-              </div>
-            </dl>
-          </MCard>
+          <MDescriptions title="基本信息" bordered :column="2">
+            <MDescriptionsItem label="姓名">
+              {{ profile.name }}
+            </MDescriptionsItem>
+            <MDescriptionsItem label="邮箱">
+              {{ profile.email }}
+            </MDescriptionsItem>
+            <MDescriptionsItem label="角色">
+              {{ profile.role }}
+            </MDescriptionsItem>
+            <MDescriptionsItem label="部门">
+              {{ profile.dept }}
+            </MDescriptionsItem>
+            <MDescriptionsItem label="入职日期">
+              {{ profile.joinedAt }}
+            </MDescriptionsItem>
+            <MDescriptionsItem label="状态">
+              <MStatus
+                :label="profile.status === 'active' ? '启用' : '停用'"
+                :severity="profile.status === 'active' ? 'success' : 'secondary'"
+              />
+            </MDescriptionsItem>
+          </MDescriptions>
 
           <MDivider />
 
           <MCard title="近期活动">
-            <MTable
-              :columns="activityColumns"
-              :rows="activityRows"
+            <MList
+              :items="activityRows"
               row-key="id"
-              striped
-              bordered
-              aria-label="近期活动"
-            />
+              size="small"
+            >
+              <template #item="{ item }">
+                <MListItem>
+                  <MListItemMeta
+                    :title="item.action"
+                    :description="`${item.time} · ${item.channel}`"
+                  />
+                </MListItem>
+              </template>
+            </MList>
           </MCard>
         </MPageContent>
       </MLayoutContent>
@@ -150,29 +144,4 @@ const activityRows = [
   color: var(--m-color-text-muted);
   font-size: var(--m-font-size-sm);
 }
-
-.detail-props {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--m-space-4) var(--m-space-6);
-  margin: 0;
-}
-
-.detail-props dt {
-  margin: 0 0 var(--m-space-1);
-  color: var(--m-color-text-muted);
-  font-size: var(--m-font-size-xs);
-}
-
-.detail-props dd {
-  margin: 0;
-  color: var(--m-color-text);
-  font-size: var(--m-font-size-md);
-}
-
-@media (max-width: 640px) {
-  .detail-props {
-    grid-template-columns: 1fr;
-  }
-}
 </style>

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

@@ -38,7 +38,7 @@ import {
           <MEmpty
             title="还没有课程"
             description="创建第一门课程后，学员就能在目录里看到它。也可以稍后从模板导入。"
-            icon="book"
+            illustration="no-content"
           >
             <template #extra>
               <MButton severity="primary">

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

@@ -4,7 +4,15 @@
  * @see DESIGN.md · page-layouts.md · surfaces § Express
  * 首屏单一任务；控件用 M*；色彩只走 --m-*；避开 AI 默认脸。
  */
-import { MAccordion, MButton, MConfigProvider, MTag, zhCN } from 'morya-ui'
+import {
+  MAccordion,
+  MButton,
+  MConfigProvider,
+  MParagraph,
+  MTag,
+  MTitle,
+  zhCN,
+} from 'morya-ui'
 
 const faqTabs = [
   { value: 'stack', header: '必须用特定框架吗？' },
@@ -28,10 +36,12 @@ const faqTabs = [
 
       <section class="landing-hero" aria-labelledby="hero-title">
         <p class="landing-hero__brand">流水线 CI</p>
-        <h1 id="hero-title">把每次提交变成可回放的交付</h1>
-        <p class="landing-hero__lead">
+        <MTitle id="hero-title" class="landing-hero__title">
+          把每次提交变成可回放的交付
+        </MTitle>
+        <MParagraph class="landing-hero__lead" type="secondary">
           为工程团队准备的构建与发布编排。少点配置，多看结果。
-        </p>
+        </MParagraph>
         <div class="landing-hero__cta">
           <MButton label="开始使用" />
           <MButton label="查看文档" severity="secondary" text />
@@ -47,8 +57,12 @@ const faqTabs = [
       </section>
 
       <section id="why" class="landing-section">
-        <h2>为何选择</h2>
-        <p class="landing-section__lead">面向真实仓库节奏，而不是演示用的仪表盘皮肤。</p>
+        <MTitle :level="2">
+          为何选择
+        </MTitle>
+        <MParagraph class="landing-section__lead" type="secondary">
+          面向真实仓库节奏，而不是演示用的仪表盘皮肤。
+        </MParagraph>
         <ul class="landing-points">
           <li>
             <strong>可回放</strong>
@@ -66,44 +80,62 @@ const faqTabs = [
       </section>
 
       <section id="capabilities" class="landing-section landing-section--alt">
-        <h2>能力</h2>
-        <p class="landing-section__lead">用组件库控件表达交互，不引入第二套 UI。</p>
+        <MTitle :level="2">
+          能力
+        </MTitle>
+        <MParagraph class="landing-section__lead" type="secondary">
+          用组件库控件表达交互，不引入第二套 UI。
+        </MParagraph>
         <div class="landing-cards">
           <article>
             <MTag value="构建" severity="info" />
-            <h3>并行矩阵</h3>
-            <p>按系统与 Node 版本展开任务，失败任务可单独重跑。</p>
+            <MTitle :level="3">
+              并行矩阵
+            </MTitle>
+            <MParagraph type="secondary">
+              按系统与 Node 版本展开任务，失败任务可单独重跑。
+            </MParagraph>
           </article>
           <article>
             <MTag value="发布" severity="success" />
-            <h3>环境门禁</h3>
-            <p>生产发布需要审批与变更说明，记录谁在何时放行。</p>
+            <MTitle :level="3">
+              环境门禁
+            </MTitle>
+            <MParagraph type="secondary">
+              生产发布需要审批与变更说明，记录谁在何时放行。
+            </MParagraph>
           </article>
           <article>
             <MTag value="观测" />
-            <h3>耗时对比</h3>
-            <p>同分支历史耗时并排，找出突然变慢的步骤。</p>
+            <MTitle :level="3">
+              耗时对比
+            </MTitle>
+            <MParagraph type="secondary">
+              同分支历史耗时并排，找出突然变慢的步骤。
+            </MParagraph>
           </article>
         </div>
       </section>
 
       <section id="faq" class="landing-section">
-        <h2>常见问题</h2>
+        <MTitle :level="2">
+          常见问题
+        </MTitle>
         <MAccordion :tabs="faqTabs" default-value="stack">
           <template #stack>
-            <p class="landing-faq">
+            <MParagraph class="landing-faq" type="secondary">
               任意可容器化的仓库即可。示例以 Vue / Node 为主，不绑定单一前端脚手架。
-            </p>
+            </MParagraph>
           </template>
           <template #hosting>
-            <p class="landing-faq">
+            <MParagraph class="landing-faq" type="secondary">
               可自托管 runner，也可使用托管队列。密钥不进入日志明文。
-            </p>
+            </MParagraph>
           </template>
           <template #migrate>
-            <p class="landing-faq">
+            <MParagraph class="landing-faq" type="secondary">
               从现有 YAML 映射阶段与缓存键；保留原有制品路径可降低切换成本。
-            </p>
+            </MParagraph>
           </template>
         </MAccordion>
       </section>
@@ -168,10 +200,10 @@ const faqTabs = [
   color: var(--m-color-text-muted);
 }
 
-.landing-hero h1 {
+.landing-hero__title {
   margin: 0;
   max-width: 14em;
-  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -0.035em;
@@ -182,7 +214,6 @@ const faqTabs = [
   max-width: 36rem;
   font-size: 1.125rem;
   line-height: 1.55;
-  color: var(--m-color-text-muted);
 }
 
 .landing-hero__cta {
@@ -260,7 +291,7 @@ const faqTabs = [
   max-width: none;
 }
 
-.landing-section h2 {
+.landing-section :deep(.m-typography-title--h2) {
   margin: 0 0 var(--m-space-3);
   font-size: 1.75rem;
   letter-spacing: -0.02em;
@@ -269,7 +300,6 @@ const faqTabs = [
 .landing-section__lead {
   margin: 0 0 var(--m-space-5);
   max-width: 36rem;
-  color: var(--m-color-text-muted);
 }
 
 .landing-points {
@@ -311,20 +341,14 @@ const faqTabs = [
   background: var(--m-color-surface);
 }
 
-.landing-cards h3 {
+.landing-cards :deep(.m-typography-title--h3) {
   margin: 0;
   font-size: 1.125rem;
 }
 
-.landing-cards p {
-  margin: 0;
-  color: var(--m-color-text-muted);
-  line-height: 1.55;
-}
-
+.landing-cards :deep(.m-typography),
 .landing-faq {
   margin: 0;
-  color: var(--m-color-text-muted);
   line-height: 1.55;
 }
 

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

@@ -10,7 +10,9 @@ import {
   MFormItem,
   MInput,
   MInputPassword,
+  MParagraph,
   MSpace,
+  MTitle,
   zhCN,
 } from 'morya-ui'
 import { reactive, ref } from 'vue'
@@ -23,6 +25,11 @@ const model = reactive({
   password: '',
 })
 
+/** Brand seed for Account surfaces — prefer themeConfig over page-level hex. */
+const themeConfig = {
+  seed: { colorPrimary: '#0b6e4f' },
+}
+
 async function onSubmit() {
   formError.value = ''
   submitting.value = true
@@ -39,7 +46,11 @@ async function onSubmit() {
 </script>
 
 <template>
-  <MConfigProvider :locale="zhCN">
+  <MConfigProvider
+    :locale="zhCN"
+    input-variant="filled"
+    :theme-config="themeConfig"
+  >
     <div class="login-shell">
       <aside class="login-brand" aria-label="品牌">
         <p class="login-brand__mark">青禾书房</p>
@@ -52,8 +63,12 @@ async function onSubmit() {
       <main class="login-main">
         <div class="login-panel">
           <header class="login-panel__header">
-            <h2>登录</h2>
-            <p>使用工作邮箱进入后台。</p>
+            <MTitle :level="3">
+              登录
+            </MTitle>
+            <MParagraph type="secondary">
+              使用工作邮箱进入后台。
+            </MParagraph>
           </header>
 
           <p v-if="formError" class="login-alert" role="alert">
@@ -178,15 +193,13 @@ async function onSubmit() {
   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 :deep(.m-typography-title),
+.login-panel__header :deep(.m-typography) {
+  margin: 0;
 }
 
-.login-panel__header p {
-  margin: 0;
-  color: var(--m-color-text-muted);
+.login-panel__header :deep(.m-typography-title) {
+  margin-bottom: var(--m-space-2);
 }
 
 .login-alert {

package/dist/__tests__/page-snippets.test.js

@@ -12,10 +12,25 @@ describe('page snippets catalog', () => {
             'page-header-actions',
             'list-filters-stack',
             'list-filters-dense',
+            'detail-descriptions',
+            'empty-block',
         ]) {
             expect(findPageSnippet(id)?.id).toBe(id);
         }
     });
+    it('empty-block prefers illustration', () => {
+        const empty = findPageSnippet('empty-block');
+        expect(empty.template).toContain('illustration=');
+    });
+    it('auth-split-shell uses filled inputs', () => {
+        const auth = findPageSnippet('auth-split-shell');
+        expect(auth.template).toContain('input-variant="filled"');
+    });
+    it('detail-descriptions uses MDescriptions', () => {
+        const detail = findPageSnippet('detail-descriptions');
+        expect(detail.template).toContain('MDescriptions');
+        expect(detail.imports).toContain('MDescriptionsItem');
+    });
     it('list-filters-stack includes chips, advanced, and #actions', () => {
         const stack = findPageSnippet('list-filters-stack');
         expect(stack.template).toContain('MPageFilterChips');

package/dist/decisions.js

@@ -1104,7 +1104,7 @@ export const componentDecisions = [
                 ],
                 recipe: recipe([
                     ['title + description', 'title + description'],
-                    ['icon 或 illustration 按需（默认即可）', 'icon or illustration as needed (default OK)'],
+                    ['主区域优先 illustration（no-content / no-result…）', 'Prefer illustration on main regions (no-content / no-result…)'],
                     ['表格内放在 #empty', 'Inside tables: #empty slot'],
                 ], [['#extra 放下一步按钮（创建…）', '#extra for next-step button (Create…)']]),
                 relatedSnippets: ['empty-block'],