@morya-ui/setup 0.2.5

package/template/docs/golden-pages/landing-page.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：营销落地页（Express）
+ * @see DESIGN.md §3 · morya-ui-pages surfaces § Express
+ * 首屏单一任务；控件用 M*；色彩只走 --m-*；避开 AI 默认脸。
+ */
+import { MAccordion, MButton, MConfigProvider, MTag, zhCN } from 'morya-ui'
+
+const faqTabs = [
+  { value: 'stack', header: '必须用特定框架吗？' },
+  { value: 'hosting', header: '流水线跑在哪里？' },
+  { value: 'migrate', header: '如何从现有 CI 迁过来？' },
+]
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <div class="landing">
+      <header class="landing-nav">
+        <span class="landing-nav__brand">流水线 CI</span>
+        <nav class="landing-nav__links" aria-label="页面导航">
+          <a href="#why">为何选择</a>
+          <a href="#capabilities">能力</a>
+          <a href="#faq">常见问题</a>
+        </nav>
+        <MButton label="免费试用" size="small" />
+      </header>
+
+      <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">
+          为工程团队准备的构建与发布编排。少点配置，多看结果。
+        </p>
+        <div class="landing-hero__cta">
+          <MButton label="开始使用" />
+          <MButton label="查看文档" severity="secondary" text />
+        </div>
+        <div class="landing-hero__visual" role="img" aria-label="构建时间线示意">
+          <div class="landing-hero__track">
+            <span>检出</span>
+            <span>测试</span>
+            <span>制品</span>
+            <span>发布</span>
+          </div>
+        </div>
+      </section>
+
+      <section id="why" class="landing-section">
+        <h2>为何选择</h2>
+        <p class="landing-section__lead">面向真实仓库节奏，而不是演示用的仪表盘皮肤。</p>
+        <ul class="landing-points">
+          <li>
+            <strong>可回放</strong>
+            <span>每次运行保留完整日志与产物索引，失败可复现。</span>
+          </li>
+          <li>
+            <strong>少样板</strong>
+            <span>默认流水线覆盖检出、缓存与并行矩阵，按需覆盖。</span>
+          </li>
+          <li>
+            <strong>权限清楚</strong>
+            <span>环境、密钥与审批流按仓库边界隔离。</span>
+          </li>
+        </ul>
+      </section>
+
+      <section id="capabilities" class="landing-section landing-section--alt">
+        <h2>能力</h2>
+        <p class="landing-section__lead">用组件库控件表达交互，不引入第二套 UI。</p>
+        <div class="landing-cards">
+          <article>
+            <MTag value="构建" severity="info" />
+            <h3>并行矩阵</h3>
+            <p>按系统与 Node 版本展开任务，失败任务可单独重跑。</p>
+          </article>
+          <article>
+            <MTag value="发布" severity="success" />
+            <h3>环境门禁</h3>
+            <p>生产发布需要审批与变更说明，记录谁在何时放行。</p>
+          </article>
+          <article>
+            <MTag value="观测" />
+            <h3>耗时对比</h3>
+            <p>同分支历史耗时并排，找出突然变慢的步骤。</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="faq" class="landing-section">
+        <h2>常见问题</h2>
+        <MAccordion :tabs="faqTabs" default-value="stack">
+          <template #stack>
+            <p class="landing-faq">
+              任意可容器化的仓库即可。示例以 Vue / Node 为主，不绑定单一前端脚手架。
+            </p>
+          </template>
+          <template #hosting>
+            <p class="landing-faq">
+              可自托管 runner，也可使用托管队列。密钥不进入日志明文。
+            </p>
+          </template>
+          <template #migrate>
+            <p class="landing-faq">
+              从现有 YAML 映射阶段与缓存键；保留原有制品路径可降低切换成本。
+            </p>
+          </template>
+        </MAccordion>
+      </section>
+
+      <footer class="landing-footer">
+        <span>流水线 CI</span>
+        <MButton label="联系销售" severity="secondary" text />
+      </footer>
+    </div>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.landing {
+  min-height: 100vh;
+  background: var(--m-color-surface);
+  color: var(--m-color-text);
+}
+
+.landing-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--m-space-4);
+  padding: var(--m-space-4) clamp(1.25rem, 4vw, 3rem);
+  border-bottom: 1px solid var(--m-color-border);
+}
+
+.landing-nav__brand {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.landing-nav__links {
+  display: flex;
+  flex: 1;
+  gap: var(--m-space-4);
+  margin-left: var(--m-space-2);
+}
+
+.landing-nav__links a {
+  color: var(--m-color-text-muted);
+  text-decoration: none;
+  font-size: 0.9375rem;
+}
+
+.landing-nav__links a:hover {
+  color: var(--m-color-primary);
+}
+
+.landing-hero {
+  display: grid;
+  gap: var(--m-space-4);
+  padding: clamp(2.5rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem);
+  max-width: 72rem;
+}
+
+.landing-hero__brand {
+  margin: 0;
+  font-size: 0.8125rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--m-color-text-muted);
+}
+
+.landing-hero h1 {
+  margin: 0;
+  max-width: 14em;
+  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  font-weight: 700;
+  line-height: 1.12;
+  letter-spacing: -0.035em;
+}
+
+.landing-hero__lead {
+  margin: 0;
+  max-width: 36rem;
+  font-size: 1.125rem;
+  line-height: 1.55;
+  color: var(--m-color-text-muted);
+}
+
+.landing-hero__cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--m-space-3);
+  margin-top: var(--m-space-2);
+}
+
+.landing-hero__visual {
+  margin-top: var(--m-space-5);
+  padding: var(--m-space-5);
+  border: 1px solid var(--m-color-border);
+  border-radius: var(--m-radius-md);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--m-color-primary) 12%, var(--m-color-surface)),
+      var(--m-color-surface) 60%
+    );
+}
+
+.landing-hero__track {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--m-space-3);
+}
+
+.landing-hero__track span {
+  padding: var(--m-space-3) var(--m-space-4);
+  border-left: 3px solid var(--m-color-primary);
+  background: color-mix(in srgb, var(--m-color-surface) 80%, transparent);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.landing-section {
+  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
+  max-width: 72rem;
+}
+
+.landing-section--alt {
+  border-block: 1px solid var(--m-color-border);
+  background: color-mix(in srgb, var(--m-color-border) 18%, var(--m-color-surface));
+  max-width: none;
+}
+
+.landing-section h2 {
+  margin: 0 0 var(--m-space-3);
+  font-size: 1.75rem;
+  letter-spacing: -0.02em;
+}
+
+.landing-section__lead {
+  margin: 0 0 var(--m-space-5);
+  max-width: 36rem;
+  color: var(--m-color-text-muted);
+}
+
+.landing-points {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--m-space-4);
+}
+
+.landing-points li {
+  display: grid;
+  gap: var(--m-space-2);
+  max-width: 40rem;
+}
+
+.landing-points strong {
+  font-size: 1.0625rem;
+}
+
+.landing-points span {
+  color: var(--m-color-text-muted);
+  line-height: 1.55;
+}
+
+.landing-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--m-space-4);
+  max-width: 72rem;
+}
+
+.landing-cards article {
+  display: grid;
+  gap: var(--m-space-3);
+  padding: var(--m-space-5);
+  border: 1px solid var(--m-color-border);
+  border-radius: var(--m-radius-md);
+  background: var(--m-color-surface);
+}
+
+.landing-cards h3 {
+  margin: 0;
+  font-size: 1.125rem;
+}
+
+.landing-cards p {
+  margin: 0;
+  color: var(--m-color-text-muted);
+  line-height: 1.55;
+}
+
+.landing-faq {
+  margin: 0;
+  color: var(--m-color-text-muted);
+  line-height: 1.55;
+}
+
+.landing-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--m-space-4);
+  padding: var(--m-space-5) clamp(1.25rem, 4vw, 3rem);
+  border-top: 1px solid var(--m-color-border);
+  color: var(--m-color-text-muted);
+}
+
+@media (max-width: 900px) {
+  .landing-nav__links {
+    display: none;
+  }
+
+  .landing-hero__track,
+  .landing-cards {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .landing-hero__track,
+  .landing-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/template/docs/golden-pages/list-page.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：列表页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MLayoutSider,
+  MMenu,
+  MPageContent,
+  MPageFilters,
+  MPageToolbar,
+  MSelect,
+  MSpace,
+  MTable,
+  MTag,
+  zhCN,
+} from 'morya-ui'
+import { ref } from 'vue'
+
+const keyword = ref('')
+const status = ref<string | undefined>()
+
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '启用', value: 'active' },
+  { label: '停用', value: 'inactive' },
+]
+
+const columns = [
+  { key: 'name', label: '名称' },
+  { key: 'status', label: '状态' },
+  { key: 'updatedAt', label: '更新时间' },
+  { key: 'actions', label: '操作', width: 128 },
+]
+
+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>
+      <MLayoutSider bordered>
+        <MMenu :model="[{ label: '用户管理', key: 'users' }, { label: '角色管理', key: 'roles' }]" />
+      </MLayoutSider>
+
+      <MLayout>
+        <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+          <MBreadcrumb :model="[{ label: '首页', to: '/' }, { label: '用户管理' }]" />
+        </MLayoutHeader>
+
+        <MLayoutContent>
+          <MPageContent>
+            <MPageFilters aria-label="筛选">
+              <MSpace wrap>
+                <MInput v-model="keyword" placeholder="搜索名称" clearable style="width: 14rem" />
+                <MSelect
+                  v-model="status"
+                  :options="statusOptions"
+                  placeholder="状态"
+                  clearable
+                  style="width: 10rem"
+                />
+                <MButton severity="primary">
+                  查询
+                </MButton>
+                <MButton severity="secondary">
+                  重置
+                </MButton>
+              </MSpace>
+            </MPageFilters>
+
+            <MPageToolbar title="用户管理">
+              <template #actions>
+                <MButton severity="primary">
+                  新建用户
+                </MButton>
+              </template>
+            </MPageToolbar>
+
+            <MTable
+              :columns="columns"
+              :rows="rows"
+              :rows-per-page="3"
+              paginator
+              striped
+              bordered
+              row-key="id"
+              aria-label="用户列表"
+            >
+              <template #cell-status="{ value }">
+                <MTag :value="value === 'active' ? '启用' : '停用'" :severity="value === 'active' ? 'success' : 'secondary'" />
+              </template>
+              <template #cell-actions>
+                <MSpace>
+                  <MButton severity="secondary" size="small">
+                    编辑
+                  </MButton>
+                  <MButton severity="danger" size="small">
+                    删除
+                  </MButton>
+                </MSpace>
+              </template>
+              <template #empty>
+                <p style="margin: 0; padding: var(--m-space-8); text-align: center; color: var(--m-color-text-muted)">
+                  暂无用户数据
+                </p>
+              </template>
+            </MTable>
+          </MPageContent>
+        </MLayoutContent>
+      </MLayout>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/template/docs/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>