@hanology/cham-browser 0.3.2 → 0.3.4

package/dist/cli.js

@@ -11,6 +11,7 @@ function loadConfig(configPath) {
         nameEn: raw.nameEn,
         subtitle: raw.subtitle,
         subtitleEn: raw.subtitleEn,
+        logo: raw.logo,
         libraryDir: raw.libraryDir || 'library/content',
         authorsFile: raw.authorsFile,
         outputDir: raw.outputDir || 'dist',
@@ -125,14 +126,32 @@ function generateData(config, configDir) {
 async function buildSite(config, configDir) {
     const templateDir = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'template');
     const outputDir = resolve(configDir, config.outputDir || 'dist');
+    // Copy logo to dist if configured
+    let logoUrl;
+    if (config.logo) {
+        const logoSrc = resolve(configDir, config.logo);
+        if (existsSync(logoSrc)) {
+            const assetsDir = join(outputDir, 'assets');
+            mkdirSync(assetsDir, { recursive: true });
+            const ext = logoSrc.endsWith('.svg') ? 'svg' : logoSrc.endsWith('.png') ? 'png' : 'bin';
+            const logoName = `logo.${ext}`;
+            writeFileSync(join(assetsDir, logoName), readFileSync(logoSrc));
+            logoUrl = `/assets/${logoName}`;
+            console.log(`Logo: ${config.logo} → ${logoUrl}`);
+        }
+        else {
+            console.warn(`Logo not found: ${logoSrc}`);
+        }
+    }
     const { build: ssgBuild } = await import('vite-ssg/node');
     const vue = (await import('@vitejs/plugin-vue')).default;
     process.env.CHAM_DATA_DIR = join(outputDir, 'data');
+    process.env.CHAM_LOGO_URL = logoUrl || '';
     await ssgBuild({
         script: 'async',
         formatting: 'minify',
         includedRoutes(paths, routes) {
-            const result = ['/'];
+            const result = ['/', '/about'];
             const library = JSON.parse(readFileSync(join(outputDir, 'data', 'library.json'), 'utf-8'));
             const authors = JSON.parse(readFileSync(join(outputDir, 'data', 'authors.json'), 'utf-8'));
             for (const book of library.books) {
@@ -155,6 +174,9 @@ async function buildSite(config, configDir) {
                 '@': resolve(templateDir, 'src'),
             },
         },
+        define: {
+            'import.meta.env.CHAM_LOGO_URL': JSON.stringify(logoUrl || ''),
+        },
         build: {
             outDir: outputDir,
             emptyOutDir: false,

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/index.html

@@ -15,14 +15,23 @@
     })();
   </script>
   <style>
-    #app-loading{position:fixed;inset:0;background:var(--paper,#faf6ee);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;font-family:'Noto Serif TC',serif}
-    #app-loading .char{font-size:64px;font-weight:900;color:var(--ink,#1a1a1a);animation:pulse 1.2s ease-in-out infinite}
-    #app-loading .text{font-size:13px;color:var(--ink-faint,#a89b8a);letter-spacing:4px;margin-top:16px;font-family:'Noto Sans TC',sans-serif}
-    @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
+    #app-loading{position:fixed;inset:0;background:var(--paper,#faf6ee);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;font-family:'Noto Serif TC',serif;transition:opacity .4s ease}
+    #app-loading.fade-out{opacity:0;pointer-events:none}
+    #app-loading .seal{width:72px;height:72px;border:2px solid var(--vermillion,#c23a2b);border-radius:4px;display:flex;align-items:center;justify-content:center;animation:sealReveal .8s cubic-bezier(.16,1,.3,1) forwards;opacity:0}
+    #app-loading .char{font-size:36px;font-weight:900;color:var(--vermillion,#c23a2b);line-height:1}
+    #app-loading .line{width:1px;height:40px;background:linear-gradient(180deg,var(--vermillion,#c23a2b),transparent);margin-top:24px;animation:lineGrow .6s .3s cubic-bezier(.16,1,.3,1) forwards;transform:scaleY(0);transform-origin:top}
+    #app-loading .text{font-size:11px;color:var(--ink-faint,#a89b8a);letter-spacing:6px;margin-top:16px;animation:fadeIn .5s .5s ease forwards;opacity:0;font-family:'Noto Sans TC',sans-serif}
+    @keyframes sealReveal{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
+    @keyframes lineGrow{to{transform:scaleY(1)}}
+    @keyframes fadeIn{to{opacity:1}}
   </style>
 </head>
 <body>
-  <div id="app-loading"><div class="char">詩</div><div class="text">載入中</div></div>
+  <div id="app-loading">
+    <div class="seal"><div class="char">詩</div></div>
+    <div class="line"></div>
+    <div class="text">載 入 中</div>
+  </div>
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
 </body>

package/template/src/App.vue

@@ -2,7 +2,7 @@
 import { useRouter } from 'vue-router'
 import { useReadingMode } from './composables/useReadingMode'
 import ReadingToolbar from './components/ReadingToolbar.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const router = useRouter()
 const { toggleLayout, cycleTheme, layout } = useReadingMode()
@@ -19,11 +19,28 @@ function onKey(event: KeyboardEvent) {
 <template>
   <div @keydown="onKey">
     <router-view v-slot="{ Component }">
-      <Suspense>
-        <component :is="Component" :key="$route.fullPath" />
-      </Suspense>
+      <Transition name="page" mode="out-in">
+        <Suspense>
+          <component :is="Component" :key="$route.fullPath" />
+        </Suspense>
+      </Transition>
     </router-view>
     <!-- 橫排模式才顯示浮動設定鈕 -->
     <ReadingToolbar v-if="!isVertical" />
   </div>
 </template>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/template/src/components/PartBlock.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { Annotation, VerseLine, PieceSource } from '../types'
+import { buildVerseAnnotations, renderAnnotatedText, resolveHoveredAnnotations, countVerseSpans } from '../composables/useAnnotationRenderer'
+
+const props = defineProps<{
+  num: number
+  verses: VerseLine[]
+  annotations: Annotation[]
+  vertical?: boolean
+  source?: PieceSource
+}>()
+
+const emit = defineEmits<{
+  annotationHover: [event: MouseEvent, annotations: Annotation[]]
+  annotationLeave: []
+  annotationTap: [event: MouseEvent, annotations: Annotation[]]
+}>()
+
+function verseHtml(index: number): string {
+  const useRuby = props.vertical
+  let offset = 0
+  for (let i = 0; i < index; i++) offset += countVerseSpans(props.annotations, i)
+  const spans = buildVerseAnnotations(props.annotations, index)
+  return renderAnnotatedText(props.verses[index].text, spans, useRuby, offset)
+}
+
+function onHover(event: MouseEvent) {
+  const matched = resolveHoveredAnnotations(event, props.annotations)
+  if (matched) emit('annotationHover', event, matched)
+}
+
+function onLeave() { emit('annotationLeave') }
+
+function onTap(event: MouseEvent) {
+  const matched = resolveHoveredAnnotations(event, props.annotations)
+  if (matched) emit('annotationTap', event, matched)
+}
+
+const sourceLabel = (() => {
+  const r = props.source?.range as Record<string, string> | undefined
+  return r?.chapter || ''
+})()
+</script>
+
+<template>
+  <div class="part-block" :class="{ 'part-block--vertical': vertical }">
+    <div v-if="sourceLabel" class="part-source">
+      {{ sourceLabel }}
+    </div>
+    <div class="part-text" @mouseover="onHover" @mouseleave="onLeave" @click="onTap">
+      <span
+        v-for="(_, i) in verses"
+        :key="i"
+        :class="vertical ? 'part-line-v' : 'part-line-h'"
+        v-html="verseHtml(i)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.part-block {
+  padding: 20px 0;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.part-block:last-child {
+  border-bottom: none;
+}
+
+.part-block--vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.part-source {
+  font-family: var(--sans);
+  font-size: 12px;
+  letter-spacing: 1px;
+  color: var(--ink-faint);
+  background: var(--surface);
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 3px;
+  margin-bottom: 12px;
+  border: 1px solid var(--border-light);
+}
+
+.part-text {
+  line-height: 1;
+}
+
+.part-line-h {
+  font-size: var(--main-font-size, 22px);
+  line-height: 2.4;
+  letter-spacing: 3px;
+  color: var(--ink);
+  display: block;
+}
+
+.part-line-v {
+  font-size: var(--main-font-size, 22px);
+  line-height: 2.4;
+  letter-spacing: 6px;
+  color: var(--ink);
+  display: block;
+}
+
+:deep(.ann-target) {
+  border-bottom: 2px solid var(--vermillion);
+  cursor: help;
+  transition: background 0.15s;
+}
+
+:deep(.ann-target:hover) {
+  background: rgba(194, 58, 43, 0.08);
+}
+
+:deep(.ann-num) {
+  font-size: 10px;
+  color: var(--vermillion);
+  font-family: var(--sans);
+  font-weight: 600;
+  vertical-align: super;
+  margin-right: 1px;
+  letter-spacing: 0;
+}
+
+:deep(.ann-target.pronunciation) {
+  border-bottom-color: var(--jade);
+}
+
+:deep(.ann-target.pronunciation:hover) {
+  background: rgba(58, 107, 94, 0.08);
+}
+
+/* Vertical mode overrides */
+.part-block--vertical :deep(.ann-target) {
+  border-bottom: none;
+  border-left: 2px solid var(--vermillion);
+  padding-left: 2px;
+}
+
+.part-block--vertical :deep(.ann-target.pronunciation) {
+  border-left-color: var(--jade);
+}
+
+.part-block--vertical :deep(.ann-num) {
+  font-size: 0.45em;
+  text-combine-upright: all;
+  text-align: end;
+  letter-spacing: 0;
+  vertical-align: baseline;
+}
+
+.part-block--vertical .part-source {
+  margin-bottom: 0;
+  margin-left: 8px;
+}
+</style>

package/template/src/components/PartGroup.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { Annotation, Part } from '../types'
+import PartBlock from './PartBlock.vue'
+
+defineProps<{
+  label: string
+  parts: Part[]
+  vertical?: boolean
+}>()
+
+const emit = defineEmits<{
+  annotationHover: [event: MouseEvent, annotations: Annotation[]]
+  annotationLeave: []
+  annotationTap: [event: MouseEvent, annotations: Annotation[]]
+}>()
+</script>
+
+<template>
+  <div class="part-group" :class="{ 'part-group--vertical': vertical }">
+    <div class="part-group-label">{{ label }}</div>
+    <PartBlock
+      v-for="part in parts"
+      :key="part.num"
+      :num="part.num"
+      :verses="part.verses"
+      :annotations="part.annotations"
+      :vertical="vertical"
+      :source="part.source"
+      @annotation-hover="(e, a) => emit('annotationHover', e, a)"
+      @annotation-leave="emit('annotationLeave')"
+      @annotation-tap="(e, a) => emit('annotationTap', e, a)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.part-group {
+  margin-bottom: 40px;
+}
+
+.part-group:last-child {
+  margin-bottom: 0;
+}
+
+.part-group-label {
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: var(--ink);
+  padding-bottom: 12px;
+  margin-bottom: 8px;
+  border-bottom: 3px solid var(--vermillion);
+  display: inline-block;
+}
+
+.part-group--vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.part-group--vertical .part-group-label {
+  font-size: 28px;
+  letter-spacing: 10px;
+  border-bottom: none;
+  border-left: 3px solid var(--vermillion);
+  padding-bottom: 0;
+  padding-left: 16px;
+  margin-bottom: 0;
+  margin-left: 12px;
+  display: block;
+}
+</style>

package/template/src/components/PoemCard.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 defineEmits<{ click: [] }>()
 
 const preview = computed(() => {
-  const max = props.vertical ? 2 : 2
+  const max = 2
   return props.poem.verses.slice(0, max).map(v => v.text).join('\n')
 })
 </script>
@@ -33,7 +33,7 @@ const preview = computed(() => {
   border: 1px solid var(--border-light);
   border-radius: 8px;
   cursor: pointer;
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
 .pc-accent {
@@ -41,12 +41,12 @@ const preview = computed(() => {
   top: 0; left: 0;
   width: 3px; height: 0;
   background: var(--vermillion);
-  transition: height 0.35s ease;
+  transition: height 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
 }
 .pc-root:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.1);
-  border-color: var(--gold-light);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.08);
+  border-color: var(--gold);
 }
 .pc-root:hover .pc-accent { height: 100%; }
 .pc-body { padding: 24px; }

package/template/src/components/ReadingToolbar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useReadingMode, THEMES, THEME_LABELS } from '../composables/useReadingMode'
-import type { LayoutMode } from '../composables/useReadingMode'
+import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
+import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
 
-const { theme, layout, setTheme, setLayout } = useReadingMode()
+const { theme, layout, mainFontSize, bodyFontSize, setTheme, setLayout, setMainFontSize, setBodyFontSize } = useReadingMode()
 const { t, setLocale, locale, availableLocales, localeLabels } = useI18n()
 const open = ref(false)
 
@@ -46,6 +46,22 @@ function close() { open.value = false }
           >{{ THEME_LABELS[t] }}</button>
         </div>
       </div>
+      <div class="rt-group">
+        <div class="rt-label">{{ t('settings.mainFontSize') }}</div>
+        <div class="rt-size-row">
+          <button class="rt-size-btn" @click="setMainFontSize(FONT_SIZES[Math.max(0, FONT_SIZES.indexOf(mainFontSize) - 1)] as FontSize)">−</button>
+          <span class="rt-size-val">{{ mainFontSize }}</span>
+          <button class="rt-size-btn" @click="setMainFontSize(FONT_SIZES[Math.min(FONT_SIZES.length - 1, FONT_SIZES.indexOf(mainFontSize) + 1)] as FontSize)">+</button>
+        </div>
+      </div>
+      <div class="rt-group">
+        <div class="rt-label">{{ t('settings.bodyFontSize') }}</div>
+        <div class="rt-size-row">
+          <button class="rt-size-btn" @click="setBodyFontSize(FONT_SIZES[Math.max(0, FONT_SIZES.indexOf(bodyFontSize) - 1)] as FontSize)">−</button>
+          <span class="rt-size-val">{{ bodyFontSize }}</span>
+          <button class="rt-size-btn" @click="setBodyFontSize(FONT_SIZES[Math.min(FONT_SIZES.length - 1, FONT_SIZES.indexOf(bodyFontSize) + 1)] as FontSize)">+</button>
+        </div>
+      </div>
       <div class="rt-group">
         <div class="rt-label">{{ t('settings.language') }}</div>
         <div class="rt-options">
@@ -79,13 +95,14 @@ function close() { open.value = false }
   font-size: 16px;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.12);
-  transition: all 0.2s;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex; align-items: center; justify-content: center;
 }
 .rt-fab:hover {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
+  transform: scale(1.05);
 }
 .rt-icon {
   font-family: var(--sans);
@@ -102,7 +119,7 @@ function close() { open.value = false }
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.16);
   padding: 16px;
-  animation: slideUp 0.2s ease;
+  animation: slideUp 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
 }
 @keyframes slideUp {
   from { opacity: 0; transform: translateY(8px); }
@@ -138,6 +155,29 @@ function close() { open.value = false }
   color: var(--paper);
   border-color: var(--ink);
 }
+.rt-size-row {
+  display: flex; align-items: center; gap: 6px; justify-content: center;
+}
+.rt-size-btn {
+  width: 28px; height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: none;
+  font-family: var(--sans);
+  font-size: 14px;
+  color: var(--ink-mid);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: all 0.15s;
+}
+.rt-size-btn:hover { border-color: var(--ink); color: var(--ink); }
+.rt-size-val {
+  font-family: var(--sans);
+  font-size: 13px;
+  color: var(--ink);
+  min-width: 32px;
+  text-align: center;
+}
 .rt-backdrop {
   position: fixed; inset: 0;
   z-index: -1;

package/template/src/components/SideNav.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
-import logoSvg from '../assets/hanology-logo.svg'
+import { useSiteConfig } from '../composables/useSiteConfig'
 
 defineProps<{
   context?: string
@@ -19,6 +20,8 @@ const emit = defineEmits<{
 
 const { theme, layout, mainFontSize, bodyFontSize, setTheme, setLayout, setMainFontSize, setBodyFontSize } = useReadingMode()
 const { t, setLocale, locale, availableLocales, localeLabels } = useI18n()
+const { logoUrl } = useSiteConfig()
+const router = useRouter()
 const settingsOpen = ref(false)
 
 function toggleSettings() { settingsOpen.value = !settingsOpen.value }
@@ -27,7 +30,8 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 <template>
   <nav class="sidenav">
     <button class="sn-brand" @click="emit('home')" title="首頁">
-      <img :src="logoSvg" alt="漢流" class="sn-logo" />
+      <img v-if="logoUrl" :src="logoUrl" alt="" class="sn-logo" />
+      <span v-else class="sn-seal">漢流</span>
     </button>
 
     <button class="sn-btn" @click="emit('back')" title="返回">
@@ -45,6 +49,10 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
     <div class="sn-spacer" />
 
+    <button class="sn-btn" @click="router.push('/about')" title="關於">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+    </button>
+
     <button
       class="sn-btn"
       :class="{ active: settingsOpen }"
@@ -128,7 +136,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
 .sn-brand {
   width: 40px; height: 48px;
-  border: none;
+  border: 2px solid var(--vermillion);
   border-radius: 3px;
   background: none;
   display: flex; align-items: center; justify-content: center;
@@ -143,6 +151,18 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
   width: auto;
   object-fit: contain;
 }
+.sn-brand:has(.sn-logo) { border: none; }
+.sn-seal {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-family: var(--serif);
+  font-size: 14px; font-weight: 900;
+  color: var(--vermillion);
+  display: flex;
+  align-items: center;
+  letter-spacing: 2px;
+  line-height: 1;
+}
 
 .sn-btn {
   width: 36px; height: 36px;
@@ -292,6 +312,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 @media (max-width: 768px) {
   .sidenav { width: 44px; padding: 8px 0; gap: 6px; }
   .sn-brand { width: 32px; height: 38px; }
+  .sn-seal { font-size: 15px; }
   .sn-btn { width: 30px; height: 30px; }
   .sn-context { font-size: 10px; max-height: 80px; }
 }

package/template/src/composables/useSiteConfig.ts

@@ -0,0 +1,11 @@
+export interface SiteConfig {
+  logoUrl?: string
+}
+
+const config: SiteConfig = {
+  logoUrl: import.meta.env.CHAM_LOGO_URL || undefined,
+}
+
+export function useSiteConfig(): SiteConfig {
+  return config
+}

package/template/src/main.ts

@@ -17,6 +17,10 @@ export async function createApp() {
 if (!import.meta.env.SSR) {
   createApp().then(({ app, router }) => {
     app.mount('#app')
-    document.getElementById('app-loading')?.remove()
+    const loader = document.getElementById('app-loading')
+    if (loader) {
+      loader.classList.add('fade-out')
+      loader.addEventListener('transitionend', () => loader.remove())
+    }
   })
 }

package/template/src/router.ts

@@ -8,9 +8,11 @@ import LibraryHome from './views/LibraryHome.vue'
 import BookHome from './views/BookHome.vue'
 import PieceView from './views/PieceView.vue'
 import AuthorView from './views/AuthorView.vue'
+import AboutView from './views/AboutView.vue'
 
 export const routes: RouteRecordRaw[] = [
   { path: '/', component: LibraryHome },
+  { path: '/about', component: AboutView },
   { path: '/author/:name', component: AuthorView, props: true },
   { path: '/:bookId', component: BookHome, props: true },
   { path: '/:bookId/:num', component: PieceView, props: true },

package/template/src/styles/main.css

@@ -89,6 +89,7 @@
   --serif: 'Noto Serif TC', '宋體-繁', serif;
   --sans: 'Noto Sans TC', 'PingFang TC', sans-serif;
   --nav-width: 56px;
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 }
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
@@ -103,6 +104,7 @@ body {
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
 
 a { color: inherit; text-decoration: none; }
 
@@ -113,21 +115,56 @@ a { color: inherit; text-decoration: none; }
   display: flex; flex-direction: column;
   align-items: center; justify-content: center;
   z-index: 9999;
+  transition: opacity 0.4s ease;
+}
+#app-loading.fade-out {
+  opacity: 0;
+  pointer-events: none;
+}
+#app-loading .seal {
+  width: 72px; height: 72px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  animation: sealReveal 0.8s var(--ease-out-expo) forwards;
+  opacity: 0;
 }
 #app-loading .char {
   font-family: var(--serif);
-  font-size: 64px; font-weight: 900;
-  color: var(--ink);
-  animation: pulse 1.2s ease-in-out infinite;
+  font-size: 36px; font-weight: 900;
+  color: var(--vermillion);
+  line-height: 1;
+}
+#app-loading .line {
+  width: 1px; height: 40px;
+  background: linear-gradient(180deg, var(--vermillion), transparent);
+  margin-top: 24px;
+  animation: lineGrow 0.6s 0.3s var(--ease-out-expo) forwards;
+  transform: scaleY(0);
+  transform-origin: top;
 }
 #app-loading .text {
   font-family: var(--sans);
-  font-size: 13px; color: var(--ink-faint);
-  letter-spacing: 4px; margin-top: 16px;
+  font-size: 11px; color: var(--ink-faint);
+  letter-spacing: 6px; margin-top: 16px;
+  animation: fadeIn 0.5s 0.5s ease forwards;
+  opacity: 0;
 }
-@keyframes pulse {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 1; }
+@keyframes sealReveal {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes lineGrow {
+  to { transform: scaleY(1); }
+}
+@keyframes fadeIn {
+  to { opacity: 1; }
+}
+
+/* ===== CONTENT ENTRANCE ANIMATION ===== */
+@keyframes enterUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* ===== RESPONSIVE ===== */

package/template/src/types.ts

@@ -123,6 +123,15 @@ export interface ProseSection {
   order: number
 }
 
+export interface Part {
+  num: number
+  group?: string
+  title?: string
+  source?: PieceSource
+  verses: VerseLine[]
+  annotations: Annotation[]
+}
+
 export interface Piece {
   bookId: string
   num: number
@@ -139,6 +148,7 @@ export interface Piece {
   annotationLayers?: AnnotationLayer[]
   source?: PieceSource
   contributors?: PieceContributor[]
+  parts?: Part[]
 }
 
 // Backward compatibility alias

package/template/src/views/AboutView.vue

@@ -5,12 +5,13 @@ import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
-import logoSvg from '../assets/hanology-logo.svg'
+import { useSiteConfig } from '../composables/useSiteConfig'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { t, locale } = useI18n()
 const { layout } = useReadingMode()
+const { logoUrl } = useSiteConfig()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
@@ -45,7 +46,8 @@ function goHome() { router.push('/') }
       <h1 class="h-page-title">關於漢流 / About Hanology</h1>
     </header>
     <div class="h-content">
-      <img :src="logoSvg" alt="漢流" class="h-logo" />
+      <img v-if="logoUrl" :src="logoUrl" alt="" class="h-logo" />
+      <div v-else class="h-seal">漢流</div>
       <div class="h-about-block">
         <h2>漢流 · Hanology</h2>
         <p><strong>漢流</strong>，粵音 Han-Lou，普音 Han-Liu，意為「漢學之流」。</p>
@@ -141,6 +143,19 @@ function goHome() { router.push('/') }
   margin: 0 auto 40px;
   display: block;
 }
+.h-seal {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 56px; height: 72px;
+  border: 2px solid var(--vermillion);
+  color: var(--vermillion);
+  font-size: 24px; font-family: var(--serif);
+  font-weight: 900; letter-spacing: 2px;
+  margin: 0 auto 40px; border-radius: 4px;
+  line-height: 1;
+}
 .h-about-block {
   margin-bottom: 40px; padding: 32px;
   background: var(--surface);

package/template/src/views/LibraryHome.vue

@@ -9,7 +9,7 @@ import { useHorizontalScroll } from '../composables/useHorizontalScroll'
 import BookCard from '../components/BookCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
-import logoSvg from '../assets/hanology-logo.svg'
+import { useSiteConfig } from '../composables/useSiteConfig'
 import type { BookMeta } from '../types'
 
 const { scale, books, singleBook, loadLibrary } = useLibrary()
@@ -36,6 +36,7 @@ if (scale.value === 'single-piece' && singleBook.value) {
 
 const router = useRouter()
 const { layout } = useReadingMode()
+const { logoUrl } = useSiteConfig()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
@@ -79,6 +80,9 @@ function openBook(bookId: string) {
     <div v-if="isVertical" class="v-root">
       <SideNav @home="router.push('/')" @back="router.push('/')" />
       <div ref="vPageRef" class="v-page">
+        <div class="v-about-col">
+          <router-link to="/about" class="v-about-link">關 於</router-link>
+        </div>
         <section class="v-hero">
           <h1 class="v-title">古 典 詩 文 圖 書 館</h1>
           <p class="v-subtitle">Classical Chinese Text Library</p>
@@ -106,7 +110,8 @@ function openBook(bookId: string) {
     <!-- ═══════ 橫排模式 ═══════ -->
     <div v-else class="lib-root">
       <header class="lib-hero">
-        <img :src="logoSvg" alt="漢流" class="lib-logo" />
+        <img v-if="logoUrl" :src="logoUrl" alt="" class="lib-logo" />
+        <div v-else class="lib-seal">漢流</div>
         <h1>古典詩文圖書館</h1>
         <p class="lib-subtitle">Classical Chinese Text Library</p>
         <div class="lib-stats-bar">
@@ -114,6 +119,7 @@ function openBook(bookId: string) {
           <span class="lib-stat-sep">·</span>
           <span class="lib-stat">{{ totalPieces }} 篇</span>
         </div>
+        <router-link to="/about" class="lib-about-link">關於</router-link>
       </header>
       <div v-for="group in groupedBooks" :key="group.category" class="lib-group">
         <h2 class="lib-group-title">{{ group.category }}</h2>
@@ -172,6 +178,31 @@ function openBook(bookId: string) {
   justify-content: center;
   padding: 40px 20px;
 }
+.v-about-col {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-shrink: 0;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  border-right: 1px solid var(--border-light);
+}
+.v-about-link {
+  font-size: 14px;
+  color: var(--ink-faint);
+  letter-spacing: 6px;
+  font-family: var(--sans);
+  padding: 12px 8px;
+  border: 1px solid var(--border-light);
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.v-about-link:hover {
+  color: var(--ink);
+  border-color: var(--ink);
+}
 .v-title {
   font-size: 48px; font-weight: 900;
   letter-spacing: 16px; color: var(--ink);
@@ -274,6 +305,22 @@ function openBook(bookId: string) {
   object-fit: contain;
   margin-bottom: 24px;
 }
+.lib-seal {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px; height: 56px;
+  border: 2px solid var(--vermillion);
+  color: var(--vermillion);
+  font-size: 20px;
+  font-family: var(--serif);
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  border-radius: 4px;
+  line-height: 1;
+}
 .lib-hero h1 {
   font-size: 36px;
   font-weight: 700;
@@ -300,6 +347,24 @@ function openBook(bookId: string) {
 }
 .lib-stat-sep { color: var(--border); }
 
+.lib-about-link {
+  display: inline-block;
+  margin-top: 16px;
+  font-family: var(--sans);
+  font-size: 13px;
+  color: var(--ink-faint);
+  letter-spacing: 2px;
+  text-decoration: none;
+  padding: 4px 12px;
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+.lib-about-link:hover {
+  color: var(--ink);
+  border-color: var(--ink);
+}
+
 .lib-group { margin-bottom: 40px; }
 .lib-group-title {
   font-size: 15px;

package/template/src/views/PieceView.vue

@@ -13,7 +13,8 @@ import SectionBlock from '../components/SectionBlock.vue'
 import AnnotationTooltip from '../components/AnnotationTooltip.vue'
 import AnnotationControlBar from '../components/AnnotationControlBar.vue'
 import SideNav from '../components/SideNav.vue'
-import type { Piece, Annotation, AnnotationLayer } from '../types'
+import PartGroup from '../components/PartGroup.vue'
+import type { Piece, Annotation, AnnotationLayer, Part } from '../types'
 
 const props = defineProps<{ bookId: string; num: string | number }>()
 const router = useRouter()
@@ -128,6 +129,29 @@ function getHeadword(ann: Annotation): string {
 // Initialize layers when piece loads
 watch(() => piece.value, () => initLayers(), { immediate: true })
 
+// ─── Multi-part ───────────────────────────────────────────────
+const isMultiPart = computed(() => (piece.value?.parts?.length ?? 0) > 0)
+
+const partGroups = computed<{ label: string; parts: Part[] }[]>(() => {
+  if (!piece.value?.parts?.length) return []
+  const groupMap = new Map<string, Part[]>()
+  for (const part of piece.value.parts) {
+    const key = part.group || ''
+    if (!groupMap.has(key)) groupMap.set(key, [])
+    groupMap.get(key)!.push(part)
+  }
+  return [...groupMap.entries()].map(([label, parts]) => ({ label, parts }))
+})
+
+const allPartAnnotations = computed<Annotation[]>(() => {
+  if (!piece.value?.parts) return []
+  return piece.value.parts.flatMap(p => p.annotations)
+})
+
+const totalPartAnnotationCount = computed(() => {
+  return piece.value?.parts?.reduce((sum, p) => sum + p.annotations.length, 0) ?? 0
+})
+
 const SECTION_META: Record<string, { label: string; special: boolean }> = {
   background: { label: '背景資料', special: false },
   analysis: { label: '賞析重點', special: false },
@@ -232,12 +256,31 @@ function tcy(n: number): string {
             ← {{ meta?.title }}
           </div>
           <div class="v-poem-meta">
-            <span class="v-meta-item" v-html="tcy(piece.verses.length) + ' 段'" />
-            <span class="v-meta-item" v-html="piece.annotations.length > 0 ? tcy(piece.annotations.length) + ' 注' : '無注'" />
+            <template v-if="isMultiPart">
+              <span class="v-meta-item" v-html="tcy(piece.parts!.length) + ' 段'" />
+              <span class="v-meta-item" v-html="totalPartAnnotationCount > 0 ? tcy(totalPartAnnotationCount) + ' 注' : '無注'" />
+            </template>
+            <template v-else>
+              <span class="v-meta-item" v-html="tcy(piece.verses.length) + ' 段'" />
+              <span class="v-meta-item" v-html="piece.annotations.length > 0 ? tcy(piece.annotations.length) + ' 注' : '無注'" />
+            </template>
           </div>
         </section>
 
-        <section class="v-poem-col">
+        <section v-if="isMultiPart" class="v-poem-col v-multipart">
+          <PartGroup
+            v-for="group in partGroups"
+            :key="group.label"
+            :label="group.label"
+            :parts="group.parts"
+            :vertical="true"
+            @annotation-hover="interaction.onHover"
+            @annotation-leave="interaction.onLeave"
+            @annotation-tap="interaction.onTap"
+          />
+        </section>
+
+        <section v-else class="v-poem-col">
           <VerticalScroll
             :title="''"
             :author="''"
@@ -252,7 +295,7 @@ function tcy(n: number): string {
         </section>
 
         <SectionBlock
-          v-if="annotationsVisible && piece.sections.annotations"
+          v-if="!isMultiPart && annotationsVisible && piece.sections.annotations"
           num=""
           label="注釋"
           :special="false"
@@ -370,14 +413,32 @@ function tcy(n: number): string {
               <span v-else class="h-author-link" @click="openAuthorPane">{{ piece.author }}</span>
             </div>
             <div class="h-controls">
-              <span class="h-tag">{{ piece.verses.length }} 段</span>
-              <span class="h-tag">{{ piece.annotations.length > 0 ? piece.annotations.length + ' 注' : '無注' }}</span>
+              <template v-if="isMultiPart">
+                <span class="h-tag">{{ piece.parts!.length }} 段</span>
+                <span class="h-tag">{{ totalPartAnnotationCount > 0 ? totalPartAnnotationCount + ' 注' : '無注' }}</span>
+              </template>
+              <template v-else>
+                <span class="h-tag">{{ piece.verses.length }} 段</span>
+                <span class="h-tag">{{ piece.annotations.length > 0 ? piece.annotations.length + ' 注' : '無注' }}</span>
+              </template>
             </div>
           </div>
         </nav>
 
         <div class="h-content">
-          <div class="h-poem-block">
+          <div v-if="isMultiPart" class="h-multipart">
+            <PartGroup
+              v-for="group in partGroups"
+              :key="group.label"
+              :label="group.label"
+              :parts="group.parts"
+              @annotation-hover="interaction.onHover"
+              @annotation-leave="interaction.onLeave"
+              @annotation-tap="interaction.onTap"
+            />
+          </div>
+
+          <div v-else class="h-poem-block">
             <HorizontalDisplay
               :title="piece.title"
               :author="piece.author"
@@ -551,6 +612,22 @@ function tcy(n: number): string {
   padding: 24px;
 }
 
+.v-multipart {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  gap: 0;
+  max-height: calc(100vh - 120px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 24px 16px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) var(--paper);
+}
+
+.v-multipart::-webkit-scrollbar { height: 4px; }
+.v-multipart::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
+
 .v-section {
   flex-shrink: 0;
 }
@@ -564,7 +641,7 @@ function tcy(n: number): string {
 
 .v-source-link {
   font-size: 12px;
-  color: var(--c-brand);
+  color: var(--vermillion);
   cursor: pointer;
   margin-top: 4px;
   opacity: 0.8;
@@ -663,6 +740,16 @@ function tcy(n: number): string {
 .h-poem-block {
   margin-bottom: 60px; display: flex; justify-content: center;
 }
+
+.h-multipart {
+  max-width: min(680px, calc(100vw - 80px));
+  margin: 0 auto 60px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 32px 40px;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
+}
 .h-sections {
   max-width: min(680px, calc(100vw - 80px));
   margin: 0 auto; padding-bottom: 80px;
@@ -678,7 +765,7 @@ function tcy(n: number): string {
 }
 
 .h-source-link {
-  color: var(--c-brand);
+  color: var(--vermillion);
   cursor: pointer;
   font-size: 13px;
 }

package/template/src/components/AnnotationLayerSelector.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { AnnotationLayer } from '../types'
-
-const props = defineProps<{
-  layers: AnnotationLayer[]
-  activeIds: string[]
-}>()
-
-const emit = defineEmits<{
-  'update:activeIds': [ids: string[]]
-}>()
-
-function toggle(id: string) {
-  const current = props.activeIds
-  if (current.includes(id)) {
-    emit('update:activeIds', current.filter(x => x !== id))
-  } else {
-    emit('update:activeIds', [...current, id])
-  }
-}
-</script>
-
-<template>
-  <div v-if="layers.length > 1" class="layer-selector">
-    <button
-      v-for="layer in layers"
-      :key="layer.id"
-      :class="['layer-btn', { active: activeIds.includes(layer.id) }]"
-      :title="layer.label"
-      @click="toggle(layer.id)"
-    >
-      {{ layer.shortLabel }}
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.layer-selector {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.layer-btn {
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 4px 12px;
-  font-size: 13px;
-  background: var(--surface);
-  color: var(--ink-mid);
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: var(--sans);
-  letter-spacing: 1px;
-}
-
-.layer-btn:hover {
-  border-color: var(--gold);
-}
-
-.layer-btn.active {
-  background: var(--ink);
-  color: var(--paper);
-  border-color: var(--ink);
-}
-</style>

package/template/src/composables/usePageLayout.ts

@@ -1,25 +0,0 @@
-import { computed, ref, type Ref } from 'vue'
-import { useReadingMode } from './useReadingMode'
-import { useHorizontalScroll } from './useHorizontalScroll'
-
-export interface PageLayoutConfig {
-  mode: 'vertical' | 'horizontal'
-  navSide: 'top' | 'right'
-  contentDirection: 'ltr' | 'rtl'
-  isVertical: boolean
-}
-
-export function usePageLayout() {
-  const { layout } = useReadingMode()
-  const scrollRef = ref<HTMLElement | null>(null)
-  const scroll = useHorizontalScroll(scrollRef)
-
-  const config = computed<PageLayoutConfig>(() => ({
-    mode: layout.value,
-    navSide: layout.value === 'vertical' ? 'right' : 'top',
-    contentDirection: layout.value === 'vertical' ? 'rtl' : 'ltr',
-    isVertical: layout.value === 'vertical',
-  }))
-
-  return { config, scrollRef, ...scroll }
-}