From a9e4f7e86f9bad9484277e2791440b63ae1ccf40 Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Wed, 12 Aug 2026 15:29:28 +0800
Subject: [PATCH] feat(page): add song-ui demo showcase

---
 src/App.vue | 421 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.js |  11 ++
 2 files changed, 432 insertions(+)
 create mode 100644 src/App.vue
 create mode 100644 src/main.js

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..0f6dbd6
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,421 @@
+<script setup>
+import { ref, provide } from 'vue'
+import { useSongTheme } from './composables/useSongTheme'
+import { useMessage } from './composables/useMessage'
+import {
+  SongButton, SongCard, SongTag, SongInput, SongNav, SongTable,
+  SongBadge, SongProgress, SongModal, SongScrim, SongLogo, SongDisclaimer,
+  SongLoading, SongSeal
+} from './components/index'
+
+const theme = useSongTheme()
+provide('songTheme', theme)
+
+const message = useMessage()
+
+const navItems = ref([
+  { label: '美学', active: true },
+  { label: '色彩', active: false },
+  { label: '字体', active: false },
+  { label: '组件', active: false }
+])
+
+const modalOpen = ref(false)
+const showMaskLoading = ref(false)
+const btnLoading = ref(false)
+const name = ref('')
+const email = ref('')
+
+const patterns = ['ice', 'blind', 'tortoise', 'vine', 'water', 'cloud']
+const patternNames = { ice: '冰裂', blind: '直棂', tortoise: '龟背', vine: '缠枝', water: '水纹', cloud: '云纹' }
+const activePattern = ref('ice')
+
+let loadingTimer = null
+function simulate() {
+  btnLoading.value = true
+  clearTimeout(loadingTimer)
+  loadingTimer = setTimeout(() => {
+    btnLoading.value = false
+    message.success('登记已纳 · 章已钤')
+  }, 2200)
+}
+
+const columns = [
+  { key: 'id', title: '序号' },
+  { key: 'name', title: '藏品' },
+  { key: 'dynasty', title: '窑口' },
+  { key: 'glaze', title: '釉色' },
+  { key: 'status', title: '状态' },
+  { key: 'progress', title: '展线' }
+]
+
+const tableData = [
+  { id: 'A-011', name: '汝窑天青弦纹三足樽', dynasty: '汝窑', glaze: '天青', status: 'in', progress: 72 },
+  { id: 'A-024', name: '龙泉粉青贯耳瓶', dynasty: '龙泉', glaze: '粉青', status: 'review', progress: 46 },
+  { id: 'A-033', name: '哥窑冰裂纹胆瓶', dynasty: '哥窑', glaze: '月白', status: 'out', progress: 9 },
+  { id: 'A-047', name: '定窑白瓷童子枕', dynasty: '定窑', glaze: '牙白', status: 'ok', progress: 100 }
+]
+
+const STATUS = {
+  in: ['巡展中', 'primary'],
+  review: ['待审批', 'warning'],
+  out: ['出库', 'danger'],
+  ok: ['在库', 'success']
+}
+</script>
+
+<template>
+  <div class="demo">
+    <SongScrim :pattern="activePattern" :opacity="0.5" />
+
+    <header class="demo__brand">
+      <span class="demo__brand-mark"><SongLogo :size="36" /></span>
+      <span class="demo__brand-flag">
+        <span class="demo__brand-name display">SongUI</span>
+        <span class="demo__brand-sub caption">檐下 · 天青至简</span>
+      </span>
+    </header>
+
+    <SongNav :items="navItems" />
+
+    <main class="demo__main">
+      <!-- G4 空灵：展示区 -->
+      <section class="demo__hero">
+        <p class="demo__hero-kicker caption">马一角 · 夏半边</p>
+        <h1 class="demo__hero-title display">
+          雨过天晴云破处，<br />这般颜色做将来。
+        </h1>
+        <p class="demo__hero-desc">
+          以减柱造之疏朗、汝瓷之天青、宋画之留白为骨，
+          以现代极简之功架，塑一界安静、温润、有书卷气的界面语言。
+        </p>
+        <div class="demo__hero-actions">
+          <SongButton size="large" type="secondary">观览组件</SongButton>
+          <SongButton size="large">开始使用</SongButton>
+        </div>
+      </section>
+
+      <!-- G3 疏朗：色卡 -->
+      <section class="demo__section">
+        <h2 class="h2">宋韵色谱</h2>
+        <p class="caption demo__section-desc">语义与色名绑定 · 色相不可换，明度可校准（契约 §2）</p>
+        <div class="demo__swatches">
+          <div v-for="s in [
+            ['天青', '#88ADED'], ['月白', '#D6ECF0'], ['竹青', '#789262'],
+            ['缃色', '#C9A227'], ['茶褐', '#A8795B'], ['赭石', '#845A33'],
+            ['胭脂', '#A8493A'], ['墨灰', '#758A99'], ['墨色', '#3A4A52'], ['象牙白', '#F7F4EC']
+          ]" :key="s[0]" class="demo__swatch">
+            <span class="demo__swatch-block" :style="{ background: s[1] }" />
+            <span class="demo__swatch-name">{{ s[0] }}</span>
+            <span class="demo__swatch-hex caption tnum">{{ s[1] }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 底纹 · 某种选择 -->
+      <section class="demo__section">
+        <h2 class="h2">底纹 · 几何化 SVG</h2>
+        <p class="caption demo__section-desc">契约 §5：单屏主纹样 ≤ 1 种，占比受限，置于内容之下</p>
+        <div class="demo__pattern-row">
+          <button
+            v-for="p in patterns"
+            :key="p"
+            class="demo__pattern-btn"
+            :class="{ 'demo__pattern-btn--active': p === activePattern }"
+            @click="activePattern = p"
+          >{{ patternNames[p] }}</button>
+        </div>
+        <SongCard class="demo__pattern-preview">
+          <SongScrim :pattern="activePattern" />
+          <span class="demo__pattern-label">{{ patternNames[activePattern] }}</span>
+        </SongCard>
+      </section>
+
+      <!-- 组件展示 -->
+      <section class="demo__section">
+        <h2 class="h2">组件 · 檐下工坊</h2>
+
+        <div class="demo__grid">
+          <SongCard title="钮" class="demo__no-hover">
+            <div class="demo__row">
+              <SongButton>主钮</SongButton>
+              <SongButton type="secondary">次钮</SongButton>
+              <SongButton type="text">文钮</SongButton>
+              <SongButton type="danger">汰钮</SongButton>
+              <SongButton disabled>寸钮</SongButton>
+            </div>
+            <div class="demo__row">
+              <SongButton size="small">小字</SongButton>
+              <SongButton size="large">大字</SongButton>
+              <SongBadge type="danger" :count="3" dot>角标</SongBadge>
+            </div>
+          </SongCard>
+
+          <SongCard title="签">
+            <div class="demo__row">
+              <SongTag>默签</SongTag>
+              <SongTag type="primary">青签</SongTag>
+              <SongTag type="success">成签</SongTag>
+              <SongTag type="warning">审签</SongTag>
+              <SongTag type="danger">汰签</SongTag>
+            </div>
+            <div class="demo__row">
+              <SongProgress type="success" :percent="72" />
+            </div>
+            <div class="demo__row">
+              <SongProgress type="warning" :percent="46" bar=false />
+            </div>
+          </SongCard>
+
+          <SongCard title="墨痕" class="demo__no-hover">
+            <div class="demo__form">
+              <SongInput v-model="name" label="名签" placeholder="请书字号" required />
+              <SongInput v-model="email" label="款识" placeholder="人之署名（电子邮权）" />
+              <span class="demo__preview caption">
+                书：{{ name || '—' }} · 款：{{ email || '—' }}
+              </span>
+            </div>
+          </SongCard>
+        </div>
+
+        <div class="demo__grid">
+          <SongCard title="提示 · 雾隐">
+            <p class="caption demo__row">雾隐淡入，墨线 + 小章意象，三息自散</p>
+            <div class="demo__row">
+              <SongButton size="small" type="secondary" @click="message.success('纳签成功 · 已入展线')">纳 · 成</SongButton>
+              <SongButton size="small" type="secondary" @click="message.warning('待审 · 尚未钤印')">成 · 审</SongButton>
+              <SongButton size="small" type="secondary" @click="message.danger('此签出库 · 不符陈规')">汰 · 危</SongButton>
+              <SongButton size="small" type="secondary" @click="message.info('雨过天青 · 展线将启')">闻 · 讯</SongButton>
+            </div>
+          </SongCard>
+
+          <SongCard title="加载 · 水墨晕染">
+            <div class="demo__row">
+              <SongButton size="small" :loading="btnLoading" @click="simulate">如纳 · 待墨</SongButton>
+              <SongButton size="small" type="secondary" @click="showMaskLoading = true">全屏 · 罩墨</SongButton>
+            </div>
+            <SongLoading :text="btnLoading ? '倒墨中' : '墨迹未干'" />
+          </SongCard>
+
+          <SongCard title="章印 · 钤印意象">
+            <div class="demo__row">
+              <SongSeal text="檐下" :size="70" />
+              <SongSeal text="雅集" :size="70" rotate="-1" />
+              <SongSeal text="安" round :size="70" />
+              <SongSeal text="观" round :size="70" rotate="-3" />
+            </div>
+            <p class="caption">方印田字格 ≤ 4 字 · 圆印连珠单字 · SVG 自绘，非字库</p>
+          </SongCard>
+        </div>
+
+        <!-- G1 密集：中后台数据区 -->
+        <SongCard title="展签 · 名录" class="demo__table-card">
+          <SongTable :columns="columns" :data="tableData">
+            <template #status="{ row }">
+              <SongTag :type="STATUS[row.status][1]">{{ STATUS[row.status][0] }}</SongTag>
+            </template>
+            <template #progress="{ row }">
+              <SongProgress :type="row.progress > 80 ? 'success' : 'primary'" :percent="row.progress" />
+            </template>
+          </SongTable>
+          <template #header>
+            <div class="demo__card-head">
+              <span class="h3">展签 · 名录</span>
+              <div class="demo__card-actions">
+                <SongButton size="small" type="secondary">导入</SongButton>
+                <SongButton size="small" @click="modalOpen = true">登记</SongButton>
+              </div>
+            </div>
+          </template>
+        </SongCard>
+      </section>
+    </main>
+
+    <footer class="demo__foot">
+      <SongDisclaimer />
+      <SongDisclaimer text="本演示为 SongUI 研究契约的实现样本（Vue3 + Vite），全部纹样为几何化 SVG，字体遵循开源授权与回退策略。" />
+      <p class="demo__foot-mark caption tnum">SongUI © 2026 · 檐下 · 契约 v0.1</p>
+    </footer>
+
+    <SongModal v-model="modalOpen" title="登记 · 新签">
+      <div class="demo__form">
+        <SongInput label="藏品名" placeholder="如：汝窑天青碗" />
+        <SongInput label="窑口" placeholder="汝 / 龙泉 / 哥 / 定 / 钧" />
+      </div>
+      <template #footer>
+        <SongButton type="secondary" @click="modalOpen = false">止</SongButton>
+        <SongButton @click="modalOpen = false">纳</SongButton>
+      </template>
+    </SongModal>
+
+    <SongLoading mask :visible="showMaskLoading" text="展卷 · 墨色氤氲" @click="showMaskLoading = false" />
+  </div>
+</template>
+
+<style scoped>
+.demo {
+  min-height: 100vh;
+  position: relative;
+}
+.demo__brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 28px var(--song-space-6) 0;
+  position: relative;
+  z-index: 1;
+}
+.demo__brand-name {
+  font-size: 24px;
+  line-height: 1.2;
+}
+.demo__brand-sub {
+  display: block;
+  letter-spacing: 0.3em;
+  margin-top: 2px;
+}
+.demo__main {
+  max-width: 1020px;
+  margin: 0 auto;
+  padding: 0 var(--song-space-5);
+  position: relative;
+  z-index: 1;
+}
+.demo__hero {
+  padding: 72px 0 96px;
+  max-width: 620px;
+}
+.demo__hero-kicker {
+  letter-spacing: 0.5em;
+  color: var(--song-primary);
+}
+.demo__hero-title {
+  margin: 16px 0 20px;
+}
+.demo__hero-desc {
+  color: var(--song-text-secondary);
+  line-height: 2;
+}
+.demo__hero-actions {
+  margin-top: 32px;
+  display: flex;
+  gap: 14px;
+}
+.demo__section {
+  margin-bottom: 64px;
+}
+.demo__section-desc {
+  margin: 8px 0 20px;
+  letter-spacing: 0.08em;
+}
+.demo__swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: 14px;
+}
+.demo__swatch-block {
+  display: block;
+  height: 64px;
+  border-radius: var(--song-radius-s);
+  border: 1px solid var(--song-border);
+}
+.demo__swatch-name {
+  display: block;
+  margin-top: 8px;
+  font-size: 13px;
+}
+.demo__swatch-hex {
+  display: block;
+}
+.demo__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.demo__pattern-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.demo__pattern-btn {
+  height: 30px;
+  padding: 0 16px;
+  font-family: var(--song-font-serif);
+  font-size: 13px;
+  color: var(--song-text-secondary);
+  background: transparent;
+  border: 1px solid var(--song-border);
+  border-radius: var(--song-radius-s);
+  cursor: pointer;
+  transition: color var(--song-dur-1), border-color var(--song-dur-1), background var(--song-dur-1);
+}
+.demo__pattern-btn:hover {
+  color: var(--song-primary);
+  border-color: var(--song-primary);
+}
+.demo__pattern-btn--active {
+  color: var(--song-primary);
+  border-color: var(--song-primary);
+  background: var(--song-primary-bg);
+}
+.demo__pattern-preview {
+  position: relative;
+  height: 180px;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+.demo__pattern-label {
+  position: relative;
+  z-index: 1;
+  font-family: var(--song-font-display);
+  font-size: 30px;
+  letter-spacing: 0.6em;
+  color: var(--song-text);
+  text-shadow: 0 0 24px var(--song-bg-elevated);
+}
+.demo__row {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.demo__row:last-child {
+  margin-bottom: 0;
+}
+.demo__form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.demo__preview {
+  letter-spacing: 0.04em;
+}
+.demo__table-card {
+  margin-top: 20px;
+}
+.demo__card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.demo__card-actions {
+  display: flex;
+  gap: 10px;
+}
+.demo__foot {
+  border-top: 1px solid var(--song-border);
+  padding: 32px var(--song-space-6) 40px;
+  max-width: 1020px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+.demo__foot-mark {
+  margin-top: 20px;
+  letter-spacing: 0.2em;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..0c96f23
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { SongComponents } from './components/index'
+import { initSongTheme } from './composables/useSongTheme'
+import './styles/base.css'
+
+initSongTheme()
+
+createApp(App)
+  .use(SongComponents)
+  .mount('#app')
\ No newline at end of file