@morya-ui/mcp 0.2.8 → 0.3.0

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

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：详情页
+ * @see DESIGN.md · morya-ui-pages references/page-layouts.md · visual-craft § Ops polish
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MCard,
+  MConfigProvider,
+  MDivider,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSpace,
+  MStatus,
+  MTable,
+  MTag,
+  zhCN,
+} from 'morya-ui'
+
+const profile = {
+  name: '林晓',
+  email: 'linxiao@example.com',
+  role: '成员',
+  dept: '产品设计',
+  joinedAt: '2025-03-12',
+  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' },
+  { id: '3', time: '2026-09-12 18:41', action: '加入「产品设计」部门', channel: 'Admin' },
+]
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb
+          :model="[
+            { label: '首页', to: '/' },
+            { label: '用户管理', to: '/users' },
+            { label: profile.name },
+          ]"
+        />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent>
+          <MPageHeader
+            :title="profile.name"
+            description="查看账号摘要、属性与近期活动。编辑走同页弹窗或独立表单页，勿做成营销落地。"
+          >
+            <template #actions>
+              <MSpace>
+                <MStatus
+                  :label="profile.status === 'active' ? '启用' : '停用'"
+                  :severity="profile.status === 'active' ? 'success' : 'secondary'"
+                />
+                <MButton severity="primary">
+                  编辑
+                </MButton>
+                <MButton severity="secondary">
+                  返回
+                </MButton>
+                <MButton severity="danger" text>
+                  删除
+                </MButton>
+              </MSpace>
+            </template>
+          </MPageHeader>
+
+          <MPageSection title="摘要">
+            <MSpace wrap style="gap: var(--m-space-2)">
+              <MTag :value="profile.role" />
+              <MTag :value="profile.dept" severity="info" />
+            </MSpace>
+            <p class="detail-lead">
+              工作邮箱 {{ profile.email }} · 入职 {{ profile.joinedAt }}
+            </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>
+
+          <MDivider />
+
+          <MCard title="近期活动">
+            <MTable
+              :columns="activityColumns"
+              :rows="activityRows"
+              row-key="id"
+              striped
+              bordered
+              aria-label="近期活动"
+            />
+          </MCard>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.detail-lead {
+  margin: var(--m-space-3) 0 0;
+  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

@@ -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-in-dialog.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：列表内短表单弹窗（form-in-dialog）
+ * 留在列表页，用 MDialog 承载 ≤8 字段的新建/编辑；长表单仍走 form-page / Drawer。
+ * @see DESIGN.md · page-layouts.md · pattern form-in-dialog
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MDialog,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageToolbar,
+  MSelect,
+  MSpace,
+  MStatus,
+  MTable,
+  message,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const dialogOpen = ref(false)
+const submitting = ref(false)
+const editingId = ref<string | null>(null)
+
+const model = reactive({
+  name: '',
+  email: '',
+  role: undefined as string | undefined,
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]
+
+const columns = [
+  { key: 'name', label: '姓名' },
+  { key: 'email', label: '邮箱' },
+  { key: 'status', label: '状态', width: 100 },
+  { key: 'actions', label: '操作', width: 120 },
+]
+
+const rows = ref([
+  { id: '1', name: '林晓', email: 'linxiao@example.com', status: 'active', role: 'member' },
+  { id: '2', name: '周然', email: 'zhouran@example.com', status: 'inactive', role: 'admin' },
+])
+
+const dialogTitle = () => (editingId.value ? '编辑用户' : '新建用户')
+
+function resetModel() {
+  model.name = ''
+  model.email = ''
+  model.role = undefined
+  editingId.value = null
+}
+
+function openCreate() {
+  resetModel()
+  dialogOpen.value = true
+}
+
+function openEdit(row: (typeof rows.value)[number]) {
+  editingId.value = row.id
+  model.name = row.name
+  model.email = row.email
+  model.role = row.role
+  dialogOpen.value = true
+}
+
+function closeDialog() {
+  dialogOpen.value = false
+  resetModel()
+}
+
+async function onSave() {
+  submitting.value = true
+  try {
+    // await api.save(model)
+    message.success(editingId.value ? '已保存' : '已创建')
+    closeDialog()
+  } 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>
+          <MPageToolbar title="用户管理">
+            <template #actions>
+              <MButton severity="primary" @click="openCreate">
+                新建用户
+              </MButton>
+            </template>
+          </MPageToolbar>
+
+          <MTable
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            striped
+            bordered
+            aria-label="用户列表"
+          >
+            <template #cell-status="{ value }">
+              <MStatus
+                :label="value === 'active' ? '启用' : '停用'"
+                :severity="value === 'active' ? 'success' : 'secondary'"
+              />
+            </template>
+            <template #cell-actions="{ row }">
+              <MButton severity="secondary" size="small" text @click="openEdit(row)">
+                编辑
+              </MButton>
+            </template>
+          </MTable>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+
+    <MDialog
+      v-model="dialogOpen"
+      :header="dialogTitle()"
+      width="32rem"
+      @close="resetModel"
+    >
+      <MForm @submit.prevent="onSave">
+        <MFormItem label="姓名" name="name" required>
+          <MInput v-model="model.name" placeholder="请输入姓名" fluid />
+        </MFormItem>
+        <MFormItem label="邮箱" name="email" required>
+          <MInput v-model="model.email" type="email" placeholder="name@example.com" fluid />
+        </MFormItem>
+        <MFormItem label="角色" name="role" required>
+          <MSelect v-model="model.role" :options="roleOptions" placeholder="请选择角色" fluid />
+        </MFormItem>
+      </MForm>
+
+      <template #footer>
+        <MSpace style="justify-content: flex-end; width: 100%">
+          <MButton severity="secondary" text :disabled="submitting" @click="closeDialog">
+            取消
+          </MButton>
+          <MButton severity="primary" :loading="submitting" @click="onSave">
+            保存
+          </MButton>
+        </MSpace>
+      </template>
+    </MDialog>
+  </MConfigProvider>
+</template>

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;