@morya-ui/setup 0.2.5

package/template/scripts/check-raw-colors.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/**
+ * Scan source files for raw color literals outside design-tokens/ and theme/.
+ * Usage: node scripts/check-raw-colors.mjs [dir...]
+ * Exit 1 if violations found.
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import path from 'node:path'
+
+const roots = process.argv.slice(2).length ? process.argv.slice(2) : ['src']
+const IGNORE_DIRS = new Set(['node_modules', 'dist', 'coverage', 'design-tokens', 'theme', '.git'])
+const EXT = new Set(['.vue', '.css', '.scss', '.ts', '.tsx', '.js', '.jsx'])
+
+const HEX = /#[0-9a-f]{3,8}\b/gi
+const RGB = /\brgb\s*\(/g
+const HSL = /\bhsl\s*\(/g
+
+/** Allow transparent, currentColor, inherit in CSS values */
+const ALLOW_LINE = /var\s*\(\s*--m-|color-mix\s*\(|transparent|currentColor|inherit|none/
+
+/** Skip demo IDs like '#1024' or 'WO-1024' in script/template strings */
+const DEMO_ID = /['"]#?[A-Z0-9-]{2,}['"]/
+
+const violations = []
+
+function walk(dir) {
+  for (const name of readdirSync(dir)) {
+    const full = path.join(dir, name)
+    const st = statSync(full)
+    if (st.isDirectory()) {
+      if (IGNORE_DIRS.has(name)) continue
+      walk(full)
+      continue
+    }
+    const ext = path.extname(name)
+    if (!EXT.has(ext)) continue
+    const normalized = full.replace(/\\/g, '/')
+    if (normalized.includes('design-tokens/') || normalized.includes('/theme/')) continue
+    if (normalized.includes('.test.') || normalized.includes('/__tests__/')) continue
+
+    const text = readFileSync(full, 'utf8')
+    const lines = text.split(/\r?\n/)
+    lines.forEach((line, index) => {
+      if (ALLOW_LINE.test(line)) return
+      if (DEMO_ID.test(line)) return
+      if (HEX.test(line) || RGB.test(line) || HSL.test(line)) {
+        HEX.lastIndex = 0
+        RGB.lastIndex = 0
+        HSL.lastIndex = 0
+        violations.push({ file: full, line: index + 1, text: line.trim() })
+      }
+    })
+  }
+}
+
+for (const root of roots) {
+  try {
+    walk(path.resolve(root))
+  } catch (error) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') continue
+    throw error
+  }
+}
+
+if (violations.length) {
+  console.error(`Found ${violations.length} raw color literal(s). Use --m-* tokens instead:\n`)
+  for (const v of violations) {
+    console.error(`  ${v.file}:${v.line}`)
+    console.error(`    ${v.text}\n`)
+  }
+  process.exit(1)
+}
+
+console.log('No raw color literals found.')

package/template/src/examples/DashboardPageExample.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：仪表盘页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MCard,
+  MConfigProvider,
+  MGrid,
+  MGridItem,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPagePlaceholder,
+  MPageStat,
+  MTable,
+  MTag,
+  zhCN,
+} from 'morya-ui'
+
+const stats = [
+  { label: '总用户', value: '12,480', trend: '+8.2%', icon: 'users' },
+  { label: '今日活跃', value: '1,926', trend: '+3.1%', icon: 'activity' },
+  { label: '待处理工单', value: '47', trend: '-12%', trendSeverity: 'warn' as const, icon: 'clipboard' },
+  { label: '系统健康', value: '99.9%', trend: '稳定', trendSeverity: 'secondary' as const, icon: 'heart' },
+]
+
+const recentColumns = [
+  { key: 'id', label: '工单号', width: 96 },
+  { key: 'title', label: '标题' },
+  { key: 'priority', label: '优先级', width: 96 },
+  { key: 'status', label: '状态', width: 96 },
+]
+
+const recentRows = [
+  { id: 'WO-1024', title: '登录异常反馈', priority: 'high', status: 'open' },
+  { id: 'WO-1023', title: '导出任务超时', priority: 'medium', status: 'progress' },
+  { id: 'WO-1022', title: '权限配置咨询', priority: 'low', status: 'done' },
+]
+
+function prioritySeverity(p: string) {
+  if (p === 'high') return 'danger'
+  if (p === 'medium') return 'warn'
+  return 'secondary'
+}
+
+function statusLabel(s: string) {
+  if (s === 'open') return '待处理'
+  if (s === 'progress') return '进行中'
+  return '已完成'
+}
+</script>
+
+<template>
+  <MConfigProvider :locale="zhCN">
+    <MLayout fill-viewport>
+      <MLayoutHeader padding="var(--m-space-4) var(--m-space-6)">
+        <MBreadcrumb :model="[{ label: '首页' }, { label: '仪表盘' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent density="spacious">
+          <MPageHeader title="仪表盘" />
+
+          <MGrid :cols="4" :x-gap="16" :y-gap="16" responsive="screen">
+            <MGridItem v-for="item in stats" :key="item.label" :span="1">
+              <MPageStat
+                :label="item.label"
+                :value="item.value"
+                :trend="item.trend"
+                :trend-severity="item.trendSeverity ?? 'primary'"
+                :icon="item.icon"
+              />
+            </MGridItem>
+          </MGrid>
+
+          <MGrid :cols="2" :x-gap="16" :y-gap="16">
+            <MGridItem :span="1">
+              <MCard title="趋势概览">
+                <MPagePlaceholder aria-label="图表占位" description="图表区域（接入 ECharts / 业务组件）" />
+              </MCard>
+            </MGridItem>
+            <MGridItem :span="1">
+              <MCard title="最近工单">
+                <MTable :columns="recentColumns" :rows="recentRows" size="small" :paginator="false" bordered>
+                  <template #cell-priority="{ value }">
+                    <MTag :value="String(value)" :severity="prioritySeverity(String(value))" />
+                  </template>
+                  <template #cell-status="{ value }">
+                    <MTag :value="statusLabel(String(value))" severity="info" />
+                  </template>
+                </MTable>
+              </MCard>
+            </MGridItem>
+          </MGrid>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/template/src/examples/EmptyStateExample.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：列表空状态（Flow）
+ * @see DESIGN.md §3 · morya-ui-pages surfaces § Flow
+ * 可嵌在列表页 MPageContent / MTable #empty 中；此处给出完整可运行骨架。
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MEmpty,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageToolbar,
+  zhCN,
+} from 'morya-ui'
+</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 label="新建课程" />
+            </template>
+          </MPageToolbar>
+
+          <div class="empty-state-shell">
+            <MEmpty
+              title="还没有课程"
+              description="创建第一门课程后，学员就能在目录里看到它。也可以稍后从模板导入。"
+              icon="book"
+            >
+              <template #extra>
+                <MButton label="创建第一门课程" />
+                <MButton label="从模板导入" severity="secondary" text />
+              </template>
+            </MEmpty>
+          </div>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>
+
+<style scoped>
+.empty-state-shell {
+  border: 1px dashed color-mix(in srgb, var(--m-color-border) 80%, var(--m-color-primary));
+  border-radius: var(--m-radius-md);
+  background:
+    radial-gradient(
+      120% 80% at 50% 0%,
+      color-mix(in srgb, var(--m-color-primary) 10%, transparent),
+      transparent 55%
+    ),
+    var(--m-color-surface);
+}
+</style>

package/template/src/examples/FormPageExample.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * 黄金样例：表单页
+ * @see DESIGN.md §3
+ */
+import {
+  MBreadcrumb,
+  MButton,
+  MConfigProvider,
+  MDatePicker,
+  MForm,
+  MFormItem,
+  MInput,
+  MLayout,
+  MLayoutContent,
+  MLayoutHeader,
+  MPageContent,
+  MPageHeader,
+  MPageSection,
+  MSelect,
+  MSpace,
+  MSwitch,
+  MTextarea,
+  zhCN,
+} from 'morya-ui'
+import { reactive, ref } from 'vue'
+
+const submitting = ref(false)
+
+const model = reactive({
+  name: '',
+  email: '',
+  role: undefined as string | undefined,
+  active: true,
+  joinedAt: null as string | null,
+  bio: '',
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '成员', value: 'member' },
+]
+
+async function onSubmit() {
+  submitting.value = true
+  try {
+    // await api.save(model)
+  } 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: '用户管理', to: '/users' }, { label: '新建用户' }]" />
+      </MLayoutHeader>
+
+      <MLayoutContent>
+        <MPageContent width="narrow">
+          <MPageHeader title="新建用户" description="填写基本信息并分配角色。" />
+
+          <MPageSection variant="form">
+            <MForm @submit="onSubmit">
+              <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>
+
+              <MFormItem label="入职日期" name="joinedAt">
+                <MDatePicker v-model="model.joinedAt" placeholder="选择日期" fluid />
+              </MFormItem>
+
+              <MFormItem label="启用账号" name="active">
+                <MSwitch v-model="model.active" />
+              </MFormItem>
+
+              <MFormItem label="简介" name="bio">
+                <MTextarea v-model="model.bio" :rows="4" placeholder="可选" fluid />
+              </MFormItem>
+
+              <MPageSection variant="actions">
+                <MSpace>
+                  <MButton native-type="submit" severity="primary" :loading="submitting">
+                    保存
+                  </MButton>
+                  <MButton severity="secondary">
+                    取消
+                  </MButton>
+                </MSpace>
+              </MPageSection>
+            </MForm>
+          </MPageSection>
+        </MPageContent>
+      </MLayoutContent>
+    </MLayout>
+  </MConfigProvider>
+</template>

package/template/src/examples/LandingPageExample.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>