@hanology/cham-browser 0.4.60 → 0.4.62

package/package.json

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

package/template/src/App.vue

@@ -52,12 +52,14 @@ function onKey(event: KeyboardEvent) {
 <template>
   <div @keydown="onKey">
     <router-view v-slot="{ Component, route }">
-      <Suspense :key="route.fullPath">
-        <component :is="Component" />
-        <template #fallback>
-          <div class="route-loading"></div>
-        </template>
-      </Suspense>
+      <Transition name="page-fade" mode="out-in">
+        <Suspense :key="route.fullPath">
+          <component :is="Component" />
+          <template #fallback>
+            <div class="route-loading"></div>
+          </template>
+        </Suspense>
+      </Transition>
     </router-view>
     <!-- 橫排模式才顯示浮動設定鈕 -->
     <ReadingToolbar v-if="!isVertical" />
@@ -81,6 +83,11 @@ function onKey(event: KeyboardEvent) {
 </template>
 
 <style>
+.page-fade-enter-active { transition: opacity 0.15s ease, transform 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); }
+.page-fade-leave-active { transition: opacity 0.1s ease; }
+.page-fade-enter-from { opacity: 0; transform: translateY(8px); }
+.page-fade-leave-to { opacity: 0; }
+
 .about-overlay {
   position: fixed; inset: 0;
   background: rgba(var(--shadow-rgb), 0.3);

package/template/src/components/AnnotationPane.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import { annotationToPronSegment } from '../utils/annotationParser'
+import { kindLabel } from '../utils/annotationLabels'
 import { toChineseNumber } from '../utils/chineseNumber'
+import { useI18n } from '../composables/useI18n'
 import PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
 
@@ -21,6 +23,7 @@ const emit = defineEmits<{
 
 const bodyRef = ref<HTMLElement | null>(null)
 
+const { t } = useI18n()
 const ww = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
 const isMobile = computed(() => ww.value < 768)
 function onResize() { ww.value = window.innerWidth }
@@ -98,24 +101,6 @@ function headword(ann: Annotation): string {
   return props.headwords[ann.id] || ''
 }
 
-function kindLabel(ann: Annotation): string {
-  const map: Record<string, string> = {
-    pronunciation: '讀音',
-    semantic: '釋義',
-    etymology: '詞源',
-    note: '備注',
-    definition: '釋義',
-    commentary: '注',
-    translation: '譯文',
-    person: '人名',
-    place: '地名',
-    event: '事件',
-    date: '紀年',
-    allusion: '典故',
-  }
-  return map[ann.kind] || ann.kind
-}
-
 function layerLabel(ann: Annotation): string {
   if (!props.layerLabels || !ann.id) return ''
   for (const [prefix, label] of Object.entries(props.layerLabels)) {
@@ -175,7 +160,7 @@ onBeforeUnmount(() => {
         :style="{ width: paneWidth + 'px' }"
       >
         <div class="ann-pane-header">
-          <span class="ann-pane-title">注釋</span>
+          <span class="ann-pane-title">{{ t('annotation.all') }}</span>
           <span class="ann-pane-count">{{ annotations.length }}</span>
           <button class="ann-pane-close" @click="emit('close')" aria-label="關閉">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
@@ -188,7 +173,10 @@ onBeforeUnmount(() => {
             :data-ann-id="ann.id"
             class="ann-pane-entry"
             :class="{ active: activeId === ann.id, [ann.kind]: true }"
+            role="button"
+            tabindex="0"
             @click="emit('select', ann)"
+            @keydown.enter="emit('select', ann)"
           >
             <!-- Vertical: headword column on the right side -->
             <div v-if="vertical && headword(ann)" class="ann-pane-v-word">
@@ -306,6 +294,11 @@ onBeforeUnmount(() => {
   background: var(--surface);
 }
 
+.ann-pane-entry:focus-visible {
+  outline: 2px solid var(--vermillion);
+  outline-offset: -2px;
+}
+
 .ann-pane-entry.active.pronunciation {
   border-left-color: var(--jade);
 }
@@ -351,11 +344,11 @@ onBeforeUnmount(() => {
 
 .ann-pane-kind.pronunciation { background: var(--jade); color: #fff; }
 .ann-pane-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-pane-kind.etymology { background: #6b5b95; color: #fff; }
+.ann-pane-kind.etymology { background: var(--ann-etymology); color: #fff; }
 .ann-pane-kind.note,
 .ann-pane-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-pane-kind.commentary { background: #c0392b; color: #fff; }
-.ann-pane-kind.translation { background: #2c6e49; color: #fff; }
+.ann-pane-kind.commentary { background: var(--ann-commentary); color: #fff; }
+.ann-pane-kind.translation { background: var(--ann-translation); color: #fff; }
 .ann-pane-kind.person { background: var(--ann-person); color: #fff; }
 .ann-pane-kind.place { background: var(--ann-place); color: #fff; }
 .ann-pane-kind.event { background: var(--ann-event); color: #fff; }

package/template/src/components/AnnotationTooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { annotationToPronSegment } from '../utils/annotationParser'
+import { kindLabel } from '../utils/annotationLabels'
 import { toChineseNumber } from '../utils/chineseNumber'
 import PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
@@ -48,24 +49,6 @@ function layerLabel(ann: Annotation): string {
   return ''
 }
 
-function kindLabel(ann: Annotation): string {
-  const map: Record<string, string> = {
-    pronunciation: '讀音',
-    semantic: '釋義',
-    etymology: '詞源',
-    note: '備注',
-    definition: '釋義',
-    commentary: '注',
-    translation: '譯文',
-    person: '人名',
-    place: '地名',
-    event: '事件',
-    date: '紀年',
-    allusion: '典故',
-  }
-  return map[ann.kind] || ann.kind
-}
-
 function dominantKind(): string {
   if (!props.annotations.length) return ''
   const counts: Record<string, number> = {}
@@ -216,6 +199,7 @@ onBeforeUnmount(() => {
 /* ─── Annotation entry ─── */
 .ann-entry {
   border-bottom: 1px solid var(--border-light);
+  padding: 8px 0;
   font-size: 14px;
   color: var(--ink-mid);
   letter-spacing: 1.5px;
@@ -246,11 +230,11 @@ onBeforeUnmount(() => {
 }
 .ann-kind.pronunciation { background: var(--jade); color: #fff; }
 .ann-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-kind.etymology { background: #6b5b95; color: #fff; }
+.ann-kind.etymology { background: var(--ann-etymology); color: #fff; }
 .ann-kind.note,
 .ann-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-kind.commentary { background: #c0392b; color: #fff; align-self: center; }
-.ann-kind.translation { background: #2c6e49; color: #fff; }
+.ann-kind.commentary { background: var(--ann-commentary); color: #fff; }
+.ann-kind.translation { background: var(--ann-translation); color: #fff; }
 .ann-kind.person { background: var(--ann-person); color: #fff; }
 .ann-kind.place { background: var(--ann-place); color: #fff; }
 .ann-kind.event { background: var(--ann-event); color: #fff; }

package/template/src/components/BackToTop.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+const props = defineProps<{
+  vertical?: boolean
+  scrollContainer?: HTMLElement | null
+}>()
 
 const visible = ref(false)
 let ticking = false
@@ -8,22 +13,52 @@ function onScroll() {
   if (ticking) return
   ticking = true
   requestAnimationFrame(() => {
-    visible.value = window.scrollY > 400
+    if (props.vertical && props.scrollContainer) {
+      visible.value = props.scrollContainer.scrollLeft > 400
+    } else {
+      visible.value = window.scrollY > 400
+    }
     ticking = false
   })
 }
 
 function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  if (props.vertical && props.scrollContainer) {
+    props.scrollContainer.scrollTo({ left: props.scrollContainer.scrollWidth, behavior: 'smooth' })
+  } else {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+function attach() {
+  if (props.vertical && props.scrollContainer) {
+    props.scrollContainer.addEventListener('scroll', onScroll, { passive: true })
+  } else {
+    window.addEventListener('scroll', onScroll, { passive: true })
+  }
+  onScroll()
 }
 
-onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
-onUnmounted(() => window.removeEventListener('scroll', onScroll))
+function detach() {
+  if (props.vertical && props.scrollContainer) {
+    props.scrollContainer.removeEventListener('scroll', onScroll)
+  } else {
+    window.removeEventListener('scroll', onScroll)
+  }
+}
+
+watch(() => props.scrollContainer, () => {
+  detach()
+  attach()
+})
+
+onMounted(attach)
+onUnmounted(detach)
 </script>
 
 <template>
   <Transition name="btt">
-    <button v-if="visible" class="btt" @click="scrollToTop" aria-label="回到頂部">
+    <button v-if="visible" class="btt" :class="{ 'btt-v': vertical }" @click="scrollToTop" aria-label="回到頂部">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M12 19V5M5 12l7-7 7 7"/>
       </svg>
@@ -52,6 +87,28 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll))
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
+.btt.btt-v {
+  bottom: auto;
+  top: 24px;
+  right: auto;
+  left: calc(var(--nav-width, 56px) + 12px);
+}
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--ink-light);
+  cursor: pointer;
+  z-index: 400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.1);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
 
 @media (max-width: 768px) {
   .btt { bottom: 88px; right: 16px; width: 36px; height: 36px; }
@@ -61,7 +118,7 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll))
   color: #fff;
   border-color: var(--vermillion);
   transform: translateY(-3px);
-  box-shadow: 0 8px 24px rgba(194, 58, 43, 0.2);
+  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.15);
 }
 
 .btt-enter-active { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

package/template/src/components/BookCard.vue

@@ -13,7 +13,7 @@ function genreLabel(genre: string): string {
 </script>
 
 <template>
-  <div class="bc-root" @click="router.push(`/${props.book.id}`)">
+  <div class="bc-root" role="button" tabindex="0" @click="router.push(`/${props.book.id}`)" @keydown.enter="router.push(`/${props.book.id}`)">
     <div class="bc-accent"></div>
     <div class="bc-body">
       <h2 class="bc-title">{{ props.book.title }}</h2>

package/template/src/components/HorizontalDisplay.vue

@@ -45,7 +45,7 @@ function onTap(event: MouseEvent) {
       v-for="(_, i) in verses"
       :key="i"
       class="h-display-line h-verse-anim"
-      :style="{ animationDelay: (0.15 + i * 0.08) + 's' }"
+      :style="{ animationDelay: Math.min(0.15 + i * 0.08, 1.2) + 's' }"
       v-html="verseHtml(i)"
     />
   </div>

package/template/src/components/PoemCard.vue

@@ -15,13 +15,13 @@ const preview = computed(() => {
 </script>
 
 <template>
-  <div class="pc-root" :class="{ 'pc-vertical': vertical }" @click="$emit('click')">
+  <div class="pc-root" :class="{ 'pc-vertical': vertical }" role="button" tabindex="0" @click="$emit('click')" @keydown.enter="$emit('click')">
     <div class="pc-accent"></div>
     <div class="pc-body">
       <div class="pc-num">{{ String(poem.num).padStart(3, '0') }}</div>
       <h3 class="pc-title">{{ poem.title }}</h3>
       <div class="pc-author">{{ poem.author }}</div>
-      <p class="pc-preview" style="white-space: pre-line">{{ preview }}</p>
+      <p class="pc-preview">{{ preview }}</p>
     </div>
   </div>
 </template>
@@ -78,6 +78,7 @@ const preview = computed(() => {
   font-size: 13px; color: var(--ink-faint);
   margin-top: 14px; line-height: 1.7;
   overflow: hidden;
+  white-space: pre-line;
 }
 
 /* ─── 直排卡片：固定寬度，最小高度 ─── */
@@ -127,7 +128,7 @@ const preview = computed(() => {
   top: auto; left: 0; bottom: 0;
   width: 0; height: 3px;
   background: linear-gradient(90deg, var(--gold), var(--vermillion));
-  transition: width 0.35s ease;
+  transition: width 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
 }
 .pc-vertical:hover {
   transform: translateX(-4px);

package/template/src/components/ReadingProgress.vue

@@ -75,12 +75,12 @@ onUnmounted(detach)
   top: 0; left: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--vermillion), var(--gold));
-  box-shadow: 0 0 8px rgba(194, 58, 43, 0.2);
+  box-shadow: 0 0 8px rgba(var(--shadow-rgb), 0.15);
 }
 .rp-v {
   top: 0; left: 0;
   width: 3px;
   background: linear-gradient(180deg, var(--vermillion), var(--gold));
-  box-shadow: 0 0 8px rgba(194, 58, 43, 0.2);
+  box-shadow: 0 0 8px rgba(var(--shadow-rgb), 0.15);
 }
 </style>

package/template/src/components/VerticalScroll.vue

@@ -48,7 +48,7 @@ function onTap(event: MouseEvent) {
         v-for="(_, i) in verses"
         :key="i"
         class="v-scroll-line v-verse-anim"
-        :style="{ animationDelay: (0.2 + i * 0.06) + 's' }"
+        :style="{ animationDelay: Math.min(0.2 + i * 0.06, 1.0) + 's' }"
         v-html="verseHtml(i)"
       />
     </div>

package/template/src/composables/useI18n.ts

@@ -68,6 +68,11 @@ const messages: Record<Locale, Record<string, string>> = {
     'role.editor': '編者',
     'role.translator': '譯者',
     'role.annotator': '注者',
+    'section.background': '背景資料',
+    'section.analysis': '賞析重點',
+    'section.preparation': '預習活動',
+    'section.follow_up': '跟進活動',
+    'section.think_questions': '想一想',
   },
   'zh-Hans': {
     'site.title': '古典诗文图书馆',
@@ -128,6 +133,11 @@ const messages: Record<Locale, Record<string, string>> = {
     'role.editor': '编者',
     'role.translator': '译者',
     'role.annotator': '注者',
+    'section.background': '背景资料',
+    'section.analysis': '赏析重点',
+    'section.preparation': '预习活动',
+    'section.follow_up': '跟进活动',
+    'section.think_questions': '想一想',
   },
   'en': {
     'site.title': 'Classical Chinese Text Library',
@@ -188,6 +198,11 @@ const messages: Record<Locale, Record<string, string>> = {
     'role.editor': 'Editor',
     'role.translator': 'Translator',
     'role.annotator': 'Annotator',
+    'section.background': 'Background',
+    'section.analysis': 'Analysis',
+    'section.preparation': 'Pre-reading',
+    'section.follow_up': 'Follow-up',
+    'section.think_questions': 'Think About It',
   },
 }
 

package/template/src/styles/main.css

@@ -22,6 +22,9 @@
   --ann-event: #6b4c8a;
   --ann-date: #2a7a7a;
   --ann-allusion: #b5651d;
+  --ann-etymology: #6b5b95;
+  --ann-commentary: #c0392b;
+  --ann-translation: #2c6e49;
   --border: #d8cdb8;
   --border-light: #e8e0d0;
   --shadow-rgb: 26,26,26;
@@ -48,6 +51,9 @@
   --ann-event: #6b4c8a;
   --ann-date: #2a7a7a;
   --ann-allusion: #b5651d;
+  --ann-etymology: #6b5b95;
+  --ann-commentary: #c0392b;
+  --ann-translation: #2c6e49;
   --border: #c9b896;
   --border-light: #d8cab0;
   --shadow-rgb: 74,63,46;
@@ -74,6 +80,9 @@
   --ann-event: #9a7cb4;
   --ann-date: #5ab4b4;
   --ann-allusion: #d4843a;
+  --ann-etymology: #9a8ab4;
+  --ann-commentary: #e06050;
+  --ann-translation: #5ab48a;
   --border: #48484a;
   --border-light: #555557;
   --shadow-rgb: 0,0,0;
@@ -100,6 +109,9 @@
   --ann-event: #9a7cb4;
   --ann-date: #5ab4b4;
   --ann-allusion: #d4843a;
+  --ann-etymology: #9a8ab4;
+  --ann-commentary: #ff5050;
+  --ann-translation: #40c890;
   --border: #333333;
   --border-light: #444444;
   --shadow-rgb: 0,0,0;
@@ -138,7 +150,6 @@ body {
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
-html[dir="rtl"] ::-webkit-scrollbar-thumb { background: var(--gold); }
 
 a { color: inherit; text-decoration: none; }
 button { font-family: inherit; }

package/template/src/utils/annotationLabels.ts

@@ -0,0 +1,20 @@
+import type { Annotation } from '../types'
+
+const KIND_LABELS: Record<string, string> = {
+  pronunciation: '讀音',
+  semantic: '釋義',
+  etymology: '詞源',
+  note: '備注',
+  definition: '釋義',
+  commentary: '注',
+  translation: '譯文',
+  person: '人名',
+  place: '地名',
+  event: '事件',
+  date: '紀年',
+  allusion: '典故',
+}
+
+export function kindLabel(ann: Annotation): string {
+  return KIND_LABELS[ann.kind] || ann.kind
+}

package/template/src/views/AuthorView.vue

@@ -7,11 +7,14 @@ import { useData } from '../composables/useData'
 import { useTitle } from '../composables/useTitle'
 import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
+import { useI18n } from '../composables/useI18n'
 import SideNav from '../components/SideNav.vue'
+import BackToTop from '../components/BackToTop.vue'
 import type { Piece } from '../types'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 const { loadLibrary, books, singleBook } = useLibrary()
 await loadLibrary()
@@ -51,11 +54,11 @@ function goHome() { router.push('/') }
           <div class="v-seal">{{ authorName.charAt(0) }}</div>
           <h1 class="v-name">{{ authorName }}</h1>
           <span v-if="author.era" class="v-era">{{ author.era }}</span>
-          <span class="v-count">{{ authorPieces.length }} 篇收錄作品</span>
+          <span class="v-count">{{ t('author.worksCount', { count: authorPieces.length }) }}</span>
         </section>
 
         <section v-if="author.bio" class="v-bio">
-          <div class="v-bio-label">作者簡介</div>
+          <div class="v-bio-label">{{ t('author.biography') }}</div>
           <div class="v-bio-text">{{ author.bio }}</div>
         </section>
 
@@ -63,7 +66,10 @@ function goHome() { router.push('/') }
           v-for="piece in authorPieces"
           :key="`${piece.bookId}-${piece.num}`"
           class="v-work"
+          role="button"
+          tabindex="0"
           @click="openPiece(piece)"
+          @keydown.enter="openPiece(piece)"
         >
           <div class="v-work-num">{{ String(piece.num).padStart(3, '0') }}</div>
           <div class="v-work-title">{{ piece.title }}</div>
@@ -76,15 +82,15 @@ function goHome() { router.push('/') }
       <div class="h-page">
         <nav class="h-nav">
           <div class="h-nav-inner">
-            <button class="h-back" @click="goBack">← 返回</button>
+            <button class="h-back" @click="goBack">← {{ t('nav.back') }}</button>
             <div class="h-breadcrumb">
-              <span class="h-sep">作者</span>
+              <span class="h-sep">{{ t('role.author') }}</span>
               <span class="h-sep">·</span>
               <span class="h-author-name">{{ authorName }}</span>
             </div>
             <div class="h-controls">
-              <span class="h-tag">{{ author.era || '未知朝代' }}</span>
-              <span class="h-tag">{{ authorPieces.length }} 篇</span>
+              <span class="h-tag">{{ author.era || t('author.unknownEra') }}</span>
+              <span class="h-tag">{{ t('stat.pieceCount', { count: authorPieces.length }) }}</span>
             </div>
           </div>
         </nav>
@@ -96,24 +102,27 @@ function goHome() { router.push('/') }
               <h1 class="h-name">{{ authorName }}</h1>
               <div class="h-meta">
                 <span v-if="author.era" class="h-era">{{ author.era }}</span>
-                <span class="h-count">{{ authorPieces.length }} 篇收錄作品</span>
+                <span class="h-count">{{ t('author.worksCount', { count: authorPieces.length }) }}</span>
               </div>
             </div>
           </div>
 
           <div v-if="author.bio" class="h-bio">
-            <h3>作者簡介</h3>
+            <h3>{{ t('author.biography') }}</h3>
             <p>{{ author.bio }}</p>
           </div>
 
           <div class="h-works">
-            <h3>收錄作品</h3>
+            <h3>{{ t('author.collectedWorks') }}</h3>
             <div class="h-grid">
               <div
                 v-for="piece in authorPieces"
                 :key="`${piece.bookId}-${piece.num}`"
                 class="h-work"
+                role="button"
+                tabindex="0"
                 @click="openPiece(piece)"
+                @keydown.enter="openPiece(piece)"
               >
                 <div class="h-work-num">{{ String(piece.num).padStart(3, '0') }}</div>
                 <div class="h-work-title">{{ piece.title }}</div>
@@ -123,11 +132,13 @@ function goHome() { router.push('/') }
           </div>
         </div>
       </div>
+
+      <BackToTop />
     </div>
   </div>
 
-  <div v-else style="text-align:center;padding-top:120px">
-    <p style="font-size:18px;color:var(--ink-faint)">載入中…</p>
+  <div v-else class="page-loading">
+    <div class="page-loading-seal">文</div>
   </div>
 </template>
 
@@ -222,6 +233,9 @@ function goHome() { router.push('/') }
   border-color: var(--gold);
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
 }
+.v-work:active {
+  transform: scale(0.97);
+}
 .v-work-num {
   font-size: 11px; color: var(--ink-faint);
   font-family: var(--sans); letter-spacing: 2px;
@@ -321,6 +335,9 @@ function goHome() { router.push('/') }
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
   transform: translateY(-2px);
 }
+.h-work:active {
+  transform: scale(0.98);
+}
 .h-work-num { font-size: 11px; color: var(--ink-faint); font-family: var(--sans); letter-spacing: 2px; }
 .h-work-title { font-size: 18px; font-weight: 700; letter-spacing: 2px; margin: 6px 0 4px; }
 .h-work-preview {

package/template/src/views/BookHome.vue

@@ -78,7 +78,7 @@ function scrollToCatalog() {
         <span class="v-ch-line"> </span>
         <span class="v-count">{{ t('catalog.total', { count: filtered.length }) }}</span>
         <span class="v-search-wrap">
-          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" />
+          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" aria-label="search" />
         </span>
       </section>
 
@@ -336,6 +336,10 @@ function scrollToCatalog() {
   transform: translateY(-2px);
   box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.12);
 }
+.h-cta:active {
+  transform: scale(0.97);
+  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.08);
+}
 
 .h-catalog { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
 .h-catalog-header { text-align: center; margin-bottom: 60px; }

package/template/src/views/LibraryHome.vue

@@ -53,6 +53,12 @@ function bookCategory(book: BookMeta): string {
   return t('genre.classicalText')
 }
 
+function bookCategoryKey(book: BookMeta): string {
+  if (book.id.startsWith('skqs-')) return 'fourTreasuries'
+  if (book.id === 'primary' || book.id === 'primary-culture' || book.id === 'secondary' || book.id === 'nss') return 'textbooks'
+  return 'classicalText'
+}
+
 const groupedBooks = computed(() => {
   const groups = new Map<string, BookMeta[]>()
   const order = [t('genre.textbooks'), t('genre.classicalText'), t('genre.fourTreasuries')]
@@ -100,7 +106,7 @@ function openBook(bookId: string) {
               v-for="(book, bi) in group.books"
               :key="book.id"
               class="v-spine v-spine-anim"
-              :class="'v-spine-' + bookCategory(book).replace(/\s/g, '-')"
+              :data-cat="bookCategoryKey(book)"
               :style="{ animationDelay: bi * 0.04 + 's' }"
               @click="openBook(book.id)"
             >
@@ -284,8 +290,8 @@ function openBook(bookId: string) {
 
 /* Accent colors per category */
 .v-spine .v-spine-accent { background: var(--vermillion); }
-.v-spine.v-spine-教科書 .v-spine-accent { background: var(--gold); }
-.v-spine.v-spine-四庫全書 .v-spine-accent { background: var(--jade); }
+.v-spine[data-cat="textbooks"] .v-spine-accent { background: var(--gold); }
+.v-spine[data-cat="fourTreasuries"] .v-spine-accent { background: var(--jade); }
 
 .v-spine-title {
   writing-mode: vertical-rl;
@@ -302,8 +308,8 @@ function openBook(bookId: string) {
 .v-spine:hover .v-spine-title {
   color: var(--vermillion);
 }
-.v-spine.v-spine-教科書:hover .v-spine-title { color: var(--gold); }
-.v-spine.v-spine-四庫全書:hover .v-spine-title { color: var(--jade); }
+.v-spine[data-cat="textbooks"]:hover .v-spine-title { color: var(--gold); }
+.v-spine[data-cat="fourTreasuries"]:hover .v-spine-title { color: var(--jade); }
 
 .v-spine-badge {
   writing-mode: horizontal-tb;
@@ -415,11 +421,6 @@ function openBook(bookId: string) {
   transition: all 0.3s var(--ease-out-expo, ease);
   position: relative;
   background: var(--surface);
-  animation: cardEnter 0.5s var(--ease-out-expo, ease) both;
-}
-@keyframes cardEnter {
-  from { opacity: 0; transform: translateY(12px); }
-  to { opacity: 1; transform: translateY(0); }
 }
 .lib-card:hover { border-color: var(--gold); box-shadow: 0 6px 24px rgba(var(--shadow-rgb), 0.1); transform: translateY(-2px); }
 .lib-card:active { transform: scale(0.98); }

package/template/src/views/PieceView.vue

@@ -232,12 +232,12 @@ 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 },
-  preparation: { label: '預習活動', special: true },
-  follow_up: { label: '跟進活動', special: true },
-  think_questions: { label: '想一想', special: true },
+const SECTION_META: Record<string, { special: boolean }> = {
+  background: { special: false },
+  analysis: { special: false },
+  preparation: { special: true },
+  follow_up: { special: true },
+  think_questions: { special: true },
 }
 
 const proseSections = computed(() => {
@@ -245,13 +245,12 @@ const proseSections = computed(() => {
   if (ss && ss.length > 0) {
     return ss.filter(s => s.key !== 'author_bio' && s.body)
   }
-  // Fallback to legacy sections record
   const sections = piece.value?.sections || {}
   const result: { key: string; title: string; body: string; order: number; special: boolean }[] = []
-  for (const [key, label] of Object.entries({ background: '背景資料', analysis: '賞析重點', preparation: '預習活動', follow_up: '跟進活動', think_questions: '想一想' })) {
+  for (const [key, i18nKey] of Object.entries({ background: 'section.background', analysis: 'section.analysis', preparation: 'section.preparation', follow_up: 'section.follow_up', think_questions: 'section.think_questions' })) {
     if (sections[key]) {
       const meta = SECTION_META[key]
-      result.push({ key, title: label, body: sections[key], order: meta ? (key === 'background' ? 1 : key === 'analysis' ? 2 : 3) : 99, special: meta?.special ?? false })
+      result.push({ key, title: t(i18nKey), body: sections[key], order: meta ? (key === 'background' ? 1 : key === 'analysis' ? 2 : 3) : 99, special: meta?.special ?? false })
     }
   }
   return result
@@ -531,6 +530,7 @@ function tcy(n: number): string {
           </div>
         </Transition>
       </Teleport>
+      <BackToTop vertical :scroll-container="vPageRef" />
     </div>
 
     <!-- ═══════ 橫排模式 ═══════ -->
@@ -695,7 +695,7 @@ function tcy(n: number): string {
                   {{ p.trim() }}
                 </div>
               </div>
-              <div v-if="!selectedAuthorBio" class="h-pane-empty">暫無作者資料</div>
+              <div v-if="!selectedAuthorBio" class="h-pane-empty">{{ t('piece.noAuthorData') }}</div>
             </div>
           </div>
         </Transition>