@hanology/cham-browser 0.4.59 → 0.4.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.59",
+  "version": "0.4.61",
   "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,6 +1,7 @@
 <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 PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
@@ -98,24 +99,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)) {

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> = {}

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>
@@ -88,70 +88,17 @@ function onTap(event: MouseEvent) {
 }
 
 :deep(.ann-target) {
-  border-bottom: 2px solid var(--vermillion);
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 :deep(.ann-target.ann-overlap) {
   border-bottom-width: 3px;
   border-bottom-style: double;
 }
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 2px 8px 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:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.pronunciation) {
-  border-bottom-color: var(--jade);
-}
-:deep(.ann-target.person) {
-  border-bottom-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-bottom-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-bottom-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-bottom-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-bottom-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 2px 8px rgba(181, 101, 29, 0.08);
 }
 
 @media (max-width: 768px) {

package/template/src/components/PartBlock.vue

@@ -75,6 +75,9 @@ const sourceLabel = (() => {
 .part-block--vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px dashed var(--border-light);
 }
 
 .part-source {
@@ -125,75 +128,23 @@ const sourceLabel = (() => {
 }
 
 :deep(.ann-target) {
-  border-bottom: 2px solid var(--vermillion);
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
 }
 :deep(.ann-target.ann-overlap) {
   border-bottom-width: 3px;
   border-bottom-style: double;
 }
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 2px 8px 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.1);
-  box-shadow: 0 2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.person) {
-  border-bottom-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-bottom-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-bottom-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-bottom-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-bottom-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 2px 8px rgba(181, 101, 29, 0.08);
 }
 
 .part-block--vertical :deep(.ann-target) {
   border-bottom: none;
-  border-left: 2px solid var(--vermillion);
+  border-left-width: 2px;
+  border-left-style: solid;
   padding-left: 2px;
 }
 .part-block--vertical :deep(.ann-target.ann-overlap) {
@@ -201,59 +152,9 @@ const sourceLabel = (() => {
   border-left-style: double;
   padding-left: 3px;
 }
-.part-block--vertical :deep(.ann-target.pronunciation) {
-  border-left-color: var(--jade);
-}
-.part-block--vertical :deep(.ann-target.pronunciation.semantic) {
-  border-left-color: var(--gold);
-}
-.part-block--vertical :deep(.ann-target.person) {
-  border-left-color: var(--ann-person);
-}
-.part-block--vertical :deep(.ann-target.place) {
-  border-left-color: var(--ann-place);
-}
-.part-block--vertical :deep(.ann-target.event) {
-  border-left-color: var(--ann-event);
-}
-.part-block--vertical :deep(.ann-target.date) {
-  border-left-color: var(--ann-date);
-}
-.part-block--vertical :deep(.ann-target.allusion) {
-  border-left-color: var(--ann-allusion);
-}
-.part-block--vertical :deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 -2px 8px rgba(194, 58, 43, 0.08);
-}
-.part-block--vertical :deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 107, 94, 0.08);
-}
-.part-block--vertical :deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 90, 140, 0.08);
-}
-.part-block--vertical :deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 -2px 8px rgba(139, 105, 20, 0.08);
-}
-.part-block--vertical :deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 -2px 8px rgba(107, 76, 138, 0.08);
-}
-.part-block--vertical :deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 -2px 8px rgba(42, 122, 122, 0.08);
-}
-.part-block--vertical :deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 -2px 8px rgba(181, 101, 29, 0.08);
-}
 .part-block--vertical :deep(.ann-num) {
   font-size: 0.45em;
   text-align: end;
-  letter-spacing: 0;
   vertical-align: baseline;
 }
 

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;
 }
 
 /* ─── 直排卡片：固定寬度，最小高度 ─── */
@@ -85,8 +86,8 @@ const preview = computed(() => {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   direction: ltr;
-  width: 180px;
-  min-height: 240px;
+  width: 140px;
+  min-height: 180px;
   flex-shrink: 0;
   align-self: start;
   justify-self: start;
@@ -121,13 +122,7 @@ const preview = computed(() => {
   display: block;
 }
 .pc-vertical .pc-preview {
-  margin-top: 0;
-  margin-left: 6px;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: 2;
-  display: block;
-  overflow: hidden;
+  display: none;
 }
 .pc-vertical .pc-accent {
   top: auto; left: 0; bottom: 0;

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>
@@ -57,22 +57,18 @@ function onTap(event: MouseEvent) {
 
 <style scoped>
 .v-scroll {
+  --ann-shadow-y: -2px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   height: calc(100vh - 100px);
-  overflow-x: auto; overflow-y: hidden;
   padding: 32px 24px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.08);
   position: relative;
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
   animation: poemRevealV 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
-.v-scroll::-webkit-scrollbar { height: 3px; }
-.v-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-scroll-title {
   font-size: 36px; font-weight: 900; color: var(--ink);
@@ -104,12 +100,9 @@ function onTap(event: MouseEvent) {
 }
 
 :deep(.ann-target) {
-  border-left: 2px solid var(--vermillion);
+  border-left-width: 2px;
+  border-left-style: solid;
   padding-left: 2px;
-  cursor: help;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
 }
 :deep(.ann-target.ann-overlap) {
   border-left-width: 3px;
@@ -118,63 +111,9 @@ function onTap(event: MouseEvent) {
 }
 :deep(.ann-num) {
   font-size: 0.45em;
-  font-family: var(--sans);
-  font-weight: 600;
-  color: var(--vermillion);
   text-align: end;
-  letter-spacing: 0;
 }
 :deep(.ann-num-long) {
   font-size: 0.38em;
-  letter-spacing: -1px;
-}
-:deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.1);
-  box-shadow: 0 -2px 8px rgba(194, 58, 43, 0.08);
-}
-:deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 107, 94, 0.08);
-}
-:deep(.ann-target.pronunciation) {
-  border-left-color: var(--jade);
-}
-:deep(.ann-target.pronunciation.semantic) {
-  border-left-color: var(--gold);
-}
-:deep(.ann-target.person) {
-  border-left-color: var(--ann-person);
-}
-:deep(.ann-target.place) {
-  border-left-color: var(--ann-place);
-}
-:deep(.ann-target.event) {
-  border-left-color: var(--ann-event);
-}
-:deep(.ann-target.date) {
-  border-left-color: var(--ann-date);
-}
-:deep(.ann-target.allusion) {
-  border-left-color: var(--ann-allusion);
-}
-:deep(.ann-target.person:hover) {
-  background: rgba(58, 90, 140, 0.1);
-  box-shadow: 0 -2px 8px rgba(58, 90, 140, 0.08);
-}
-:deep(.ann-target.place:hover) {
-  background: rgba(139, 105, 20, 0.1);
-  box-shadow: 0 -2px 8px rgba(139, 105, 20, 0.08);
-}
-:deep(.ann-target.event:hover) {
-  background: rgba(107, 76, 138, 0.1);
-  box-shadow: 0 -2px 8px rgba(107, 76, 138, 0.08);
-}
-:deep(.ann-target.date:hover) {
-  background: rgba(42, 122, 122, 0.1);
-  box-shadow: 0 -2px 8px rgba(42, 122, 122, 0.08);
-}
-:deep(.ann-target.allusion:hover) {
-  background: rgba(181, 101, 29, 0.1);
-  box-shadow: 0 -2px 8px rgba(181, 101, 29, 0.08);
 }
 </style>

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/annotation-targets.css

@@ -0,0 +1,58 @@
+/* ─── Annotation target base ─── */
+.ann-target {
+  cursor: help;
+  border-color: var(--vermillion);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* ─── Annotation kind border colors ─── */
+.ann-target.pronunciation { border-color: var(--jade); }
+.ann-target.pronunciation.semantic { border-color: var(--gold); }
+.ann-target.person { border-color: var(--ann-person); }
+.ann-target.place { border-color: var(--ann-place); }
+.ann-target.event { border-color: var(--ann-event); }
+.ann-target.date { border-color: var(--ann-date); }
+.ann-target.allusion { border-color: var(--ann-allusion); }
+
+/* ─── Annotation kind hover states ─── */
+.ann-target:hover {
+  background: rgba(194, 58, 43, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(194, 58, 43, 0.08);
+}
+.ann-target.pronunciation:hover {
+  background: rgba(58, 107, 94, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(58, 107, 94, 0.08);
+}
+.ann-target.person:hover {
+  background: rgba(58, 90, 140, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(58, 90, 140, 0.08);
+}
+.ann-target.place:hover {
+  background: rgba(139, 105, 20, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(139, 105, 20, 0.08);
+}
+.ann-target.event:hover {
+  background: rgba(107, 76, 138, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(107, 76, 138, 0.08);
+}
+.ann-target.date:hover {
+  background: rgba(42, 122, 122, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(42, 122, 122, 0.08);
+}
+.ann-target.allusion:hover {
+  background: rgba(181, 101, 29, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(181, 101, 29, 0.08);
+}
+
+/* ─── Annotation number ─── */
+.ann-num {
+  color: var(--vermillion);
+  font-family: var(--sans);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+.ann-num-long {
+  letter-spacing: -1px;
+}

package/template/src/styles/main.css

@@ -1,3 +1,5 @@
+@import './annotation-targets.css';
+
 /* ===== THEME DEFINITIONS ===== */
 :root,
 [data-theme="light"] {
@@ -136,7 +138,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>
 

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>
 
@@ -259,13 +259,11 @@ function scrollToCatalog() {
   flex-shrink: 0;
   display: grid;
   grid-auto-flow: column;
-  grid-template-rows: repeat(auto-fill, 240px);
-  gap: 12px;
+  grid-template-rows: repeat(auto-fill, 180px);
+  gap: 10px;
   padding: 24px 16px;
   height: 100vh;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
   direction: rtl;
   align-items: start;
 }

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')]
@@ -97,10 +103,11 @@ function openBook(bookId: string) {
               <span class="v-cat-label">{{ group.category }}</span>
             </div>
             <div
-              v-for="book in group.books"
+              v-for="(book, bi) in group.books"
               :key="book.id"
-              class="v-spine"
-              :class="'v-spine-' + bookCategory(book).replace(/\s/g, '-')"
+              class="v-spine v-spine-anim"
+              :data-cat="bookCategoryKey(book)"
+              :style="{ animationDelay: bi * 0.04 + 's' }"
               @click="openBook(book.id)"
             >
               <span class="v-spine-accent"></span>
@@ -261,6 +268,14 @@ function openBook(bookId: string) {
   transform: scale(0.97);
 }
 
+.v-spine-anim {
+  animation: spineEnter 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+@keyframes spineEnter {
+  from { opacity: 0; transform: scaleX(0.6); }
+  to { opacity: 1; transform: scaleX(1); }
+}
+
 .v-spine-accent {
   position: absolute;
   top: 0;
@@ -275,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;
@@ -293,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;
@@ -406,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
@@ -791,16 +790,9 @@ function tcy(n: number): string {
   gap: 0;
   height: 100vh;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
   padding: 20px 16px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
 }
 
-.v-multipart::-webkit-scrollbar { height: 3px; }
-.v-multipart::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
-
 .v-section {
   flex-shrink: 0;
 }