@hanology/cham-browser 0.4.61 → 0.4.63

package/package.json

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

package/template/src/components/AnnotationControlBar.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { AnnotationLayer } from '../types'
+import { useI18n } from '../composables/useI18n'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   layers: AnnotationLayer[]
@@ -51,8 +54,8 @@ function toggleLayer(id: string) {
       class="ann-toggle"
       :class="{ on: annotationsVisible }"
       @click="toggleAnnotations"
-      :title="annotationsVisible ? '隱藏注釋' : '顯示注釋'"
-    >注</button>
+      :title="annotationsVisible ? t('annotation.hideAnnotations') : t('annotation.showAnnotations')"
+    >{{ t('annotation.notes').charAt(0) }}</button>
     <button
       v-for="layer in toggleableLayers"
       :key="layer.id"
@@ -90,7 +93,7 @@ function toggleLayer(id: string) {
 }
 
 .ann-toggle:hover {
-  box-shadow: 0 2px 8px rgba(194, 58, 43, 0.15);
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.15);
 }
 
 .ann-toggle:active {
@@ -99,7 +102,7 @@ function toggleLayer(id: string) {
 
 .ann-toggle.on {
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
 }
 
 .ann-layer-btn {

package/template/src/components/AnnotationPane.vue

@@ -3,6 +3,7 @@ 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'
 
@@ -22,8 +23,8 @@ 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 }
 
 // ─── Resize ───
@@ -158,9 +159,9 @@ 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="關閉">
+          <button class="ann-pane-close" @click="emit('close')" :aria-label="t('action.close')">
             <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>
           </button>
         </div>
@@ -171,7 +172,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">
@@ -289,6 +293,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);
 }
@@ -334,11 +343,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

@@ -3,9 +3,12 @@ import { computed, ref, watch, 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'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   visible: boolean
   annotations: Annotation[]
@@ -109,9 +112,9 @@ onBeforeUnmount(() => {
       >
         <div v-if="headword" class="ann-card-head" :class="dominantKind()">
           <div class="ann-headword">{{ headword }}</div>
-          <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}注</div>
+          <div class="ann-badge-count" v-if="annotations.length > 1">{{ t('annotation.noteCount', { count: toChineseNumber(annotations.length) }) }}</div>
         </div>
-        <button class="ann-card-close" @click="dismiss" aria-label="關閉">
+        <button class="ann-card-close" @click="dismiss" :aria-label="t('action.close')">
           <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
         <div class="ann-card-scroll">
@@ -136,13 +139,13 @@ onBeforeUnmount(() => {
         class="ann-sheet"
         :class="{ vertical }"
       >
-        <button class="ann-sheet-handle" @click="dismiss">
+        <button class="ann-sheet-handle" @click="dismiss" :aria-label="t('action.close')">
           <span class="ann-handle-bar" />
         </button>
         <div class="ann-sheet-body" :class="{ vertical }">
           <div v-if="headword" class="ann-sheet-head" :class="dominantKind()">
             <div class="ann-headword">{{ headword }}</div>
-            <div class="ann-badge-count" v-if="annotations.length > 1">{{ toChineseNumber(annotations.length) }}注</div>
+            <div class="ann-badge-count" v-if="annotations.length > 1">{{ t('annotation.noteCount', { count: toChineseNumber(annotations.length) }) }}</div>
           </div>
           <div class="ann-sheet-scroll">
             <div v-for="ann in annotations" :key="ann.id" class="ann-entry">
@@ -158,7 +161,7 @@ onBeforeUnmount(() => {
           </div>
           <div v-if="headword" class="ann-sheet-v-head" :class="dominantKind()">
             <span class="ann-sheet-v-word">{{ headword }}</span>
-            <span v-if="annotations.length > 1" class="ann-badge-count-v">{{ toChineseNumber(annotations.length) }}注</span>
+            <span v-if="annotations.length > 1" class="ann-badge-count-v">{{ t('annotation.noteCount', { count: toChineseNumber(annotations.length) }) }}</span>
           </div>
         </div>
       </div>
@@ -199,6 +202,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;
@@ -229,11 +233,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,13 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from '../composables/useI18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  vertical?: boolean
+  scrollContainer?: HTMLElement | null
+}>()
 
 const visible = ref(false)
 let ticking = false
@@ -8,22 +16,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="vertical ? t('action.backToStart') : t('action.backToStart')">
       <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,16 +90,22 @@ 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);
+}
 
 @media (max-width: 768px) {
   .btt { bottom: 88px; right: 16px; width: 36px; height: 36px; }
 }
 .btt:hover {
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   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" role="button" tabindex="0" @click="router.push(`/${props.book.id}`)" @keydown.enter="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}`)" @keydown.space.prevent="router.push(`/${props.book.id}`)">
     <div class="bc-accent"></div>
     <div class="bc-body">
       <h2 class="bc-title">{{ props.book.title }}</h2>
@@ -49,6 +49,7 @@ function genreLabel(genre: string): string {
   border-color: var(--gold-light);
 }
 .bc-root:hover .bc-accent { height: 100%; }
+.bc-root:active { transform: scale(0.98); }
 .bc-body { padding: 28px 24px; }
 .bc-title {
   font-size: 22px;

package/template/src/components/PoemCard.vue

@@ -15,7 +15,7 @@ const preview = computed(() => {
 </script>
 
 <template>
-  <div class="pc-root" :class="{ 'pc-vertical': vertical }" role="button" tabindex="0" @click="$emit('click')" @keydown.enter="$emit('click')">
+  <div class="pc-root" :class="{ 'pc-vertical': vertical }" role="button" tabindex="0" @click="$emit('click')" @keydown.enter="$emit('click')" @keydown.space.prevent="$emit('click')">
     <div class="pc-accent"></div>
     <div class="pc-body">
       <div class="pc-num">{{ String(poem.num).padStart(3, '0') }}</div>
@@ -128,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/ReadingToolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
+import { useReadingMode, THEMES, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
 
@@ -14,7 +14,7 @@ function close() { open.value = false }
 
 <template>
   <div class="rt" :class="{ open }">
-    <button class="rt-fab" @click="toggle" :aria-label="open ? '關閉設定' : '閱讀設定'">
+    <button class="rt-fab" @click="toggle" :aria-label="open ? t('settings.close') : t('settings.reading')">
       <span v-if="!open" class="rt-icon">設</span>
       <span v-else class="rt-icon">✕</span>
     </button>
@@ -73,7 +73,7 @@ function close() { open.value = false }
             class="rt-opt rt-theme"
             :class="{ active: theme === t, ['theme-' + t]: true }"
             @click="setTheme(t)"
-          >{{ THEME_LABELS[t] }}</button>
+          >{{ t('theme.' + t) }}</button>
         </div>
       </div>
       <div class="rt-group">
@@ -105,9 +105,9 @@ function close() { open.value = false }
         </div>
       </div>
       <div class="rt-shortcuts">
-        <div class="rt-sc"><kbd>V</kbd> 直/橫</div>
-        <div class="rt-sc"><kbd>T</kbd> 主題</div>
-        <div class="rt-sc"><kbd>Esc</kbd> 首頁</div>
+        <div class="rt-sc"><kbd>V</kbd> {{ t('shortcut.toggleLayout') }}</div>
+        <div class="rt-sc"><kbd>T</kbd> {{ t('shortcut.toggleTheme') }}</div>
+        <div class="rt-sc"><kbd>Esc</kbd> {{ t('shortcut.goHome') }}</div>
       </div>
     </div>
     <div v-if="open" class="rt-backdrop" @click="close" />

package/template/src/components/SideNav.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
+import { useReadingMode, THEMES, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
 import { useI18n, LOCALE_LABELS, type Locale } from '../composables/useI18n'
 import { useSiteConfig } from '../composables/useSiteConfig'
@@ -30,12 +30,12 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
 <template>
   <nav class="sidenav">
-    <button class="sn-brand" @click="emit('home')" title="首頁">
+    <button class="sn-brand" @click="emit('home')" :title="t('nav.home')">
       <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="返回">
+    <button class="sn-btn" @click="emit('back')" :title="t('nav.back')">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
     </button>
 
@@ -50,7 +50,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
     <div class="sn-spacer" />
 
-    <button v-if="aboutHtml" class="sn-btn" @click="aboutPane?.toggleAbout()" title="關於">
+    <button v-if="aboutHtml" class="sn-btn" @click="aboutPane?.toggleAbout()" :title="t('nav.about')">
       <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>
 
@@ -58,12 +58,12 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
       class="sn-btn"
       :class="{ active: settingsOpen }"
       @click="toggleSettings"
-      title="設定"
+      :title="t('settings.shortTitle')"
     >
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
     </button>
 
-    <div v-if="layout === 'vertical'" class="sn-layout-tag">直</div>
+    <div v-if="layout === 'vertical'" class="sn-layout-tag">{{ t('layout.verticalShort') }}</div>
 
     <Transition name="slide-left">
       <div v-if="settingsOpen" class="sn-settings" @click.stop>
@@ -83,7 +83,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
               class="ss-opt"
               :class="{ active: theme === t }"
               @click="setTheme(t)"
-            >{{ THEME_LABELS[t] }}</button>
+            >{{ t('theme.' + t) }}</button>
           </div>
         </div>
         <div class="ss-group">
@@ -115,9 +115,9 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
           </div>
         </div>
         <div class="ss-shortcuts">
-          <span class="ss-sc"><kbd>V</kbd> 直/橫</span>
-          <span class="ss-sc"><kbd>T</kbd> 主題</span>
-          <span class="ss-sc"><kbd>Esc</kbd> 首頁</span>
+          <span class="ss-sc"><kbd>V</kbd> {{ t('shortcut.toggleLayout') }}</span>
+          <span class="ss-sc"><kbd>T</kbd> {{ t('shortcut.toggleTheme') }}</span>
+          <span class="ss-sc"><kbd>Esc</kbd> {{ t('shortcut.goHome') }}</span>
         </div>
       </div>
     </Transition>

package/template/src/composables/useI18n.ts

@@ -73,6 +73,38 @@ const messages: Record<Locale, Record<string, string>> = {
     'section.preparation': '預習活動',
     'section.follow_up': '跟進活動',
     'section.think_questions': '想一想',
+    'annotation.showAnnotations': '顯示注釋',
+    'annotation.hideAnnotations': '隱藏注釋',
+    'annotation.noteCount': '{count}注',
+    'action.close': '關閉',
+    'action.backToStart': '回到起始',
+    'shortcut.toggleLayout': '直/橫',
+    'shortcut.toggleTheme': '主題',
+    'shortcut.goHome': '首頁',
+    'settings.shortTitle': '設定',
+    'layout.verticalShort': '直',
+    'author.courtesyName': '字{name}',
+    'author.artName': '號{name}',
+    'link.wikipedia': '維基百科',
+    'link.ctext': '文庫',
+    'role.defaultAuthor': '作者',
+    'piece.defaultAuthorInitial': '詩',
+    'theme.light': '亮',
+    'theme.sepia': '暖',
+    'theme.dark': '暗',
+    'theme.oled': '黑',
+    'annotation.kind.pronunciation': '讀音',
+    'annotation.kind.semantic': '釋義',
+    'annotation.kind.etymology': '詞源',
+    'annotation.kind.note': '備注',
+    'annotation.kind.definition': '釋義',
+    'annotation.kind.commentary': '注',
+    'annotation.kind.translation': '譯文',
+    'annotation.kind.person': '人名',
+    'annotation.kind.place': '地名',
+    'annotation.kind.event': '事件',
+    'annotation.kind.date': '紀年',
+    'annotation.kind.allusion': '典故',
   },
   'zh-Hans': {
     'site.title': '古典诗文图书馆',
@@ -138,6 +170,38 @@ const messages: Record<Locale, Record<string, string>> = {
     'section.preparation': '预习活动',
     'section.follow_up': '跟进活动',
     'section.think_questions': '想一想',
+    'annotation.showAnnotations': '显示注释',
+    'annotation.hideAnnotations': '隐藏注释',
+    'annotation.noteCount': '{count}注',
+    'action.close': '关闭',
+    'action.backToStart': '回到起始',
+    'shortcut.toggleLayout': '直/横',
+    'shortcut.toggleTheme': '主题',
+    'shortcut.goHome': '首页',
+    'settings.shortTitle': '设定',
+    'layout.verticalShort': '直',
+    'author.courtesyName': '字{name}',
+    'author.artName': '号{name}',
+    'link.wikipedia': '维基百科',
+    'link.ctext': '文库',
+    'role.defaultAuthor': '作者',
+    'piece.defaultAuthorInitial': '诗',
+    'theme.light': '亮',
+    'theme.sepia': '暖',
+    'theme.dark': '暗',
+    'theme.oled': '黑',
+    'annotation.kind.pronunciation': '读音',
+    'annotation.kind.semantic': '释义',
+    'annotation.kind.etymology': '词源',
+    'annotation.kind.note': '备注',
+    'annotation.kind.definition': '释义',
+    'annotation.kind.commentary': '注',
+    'annotation.kind.translation': '译文',
+    'annotation.kind.person': '人名',
+    'annotation.kind.place': '地名',
+    'annotation.kind.event': '事件',
+    'annotation.kind.date': '纪年',
+    'annotation.kind.allusion': '典故',
   },
   'en': {
     'site.title': 'Classical Chinese Text Library',
@@ -203,6 +267,38 @@ const messages: Record<Locale, Record<string, string>> = {
     'section.preparation': 'Pre-reading',
     'section.follow_up': 'Follow-up',
     'section.think_questions': 'Think About It',
+    'annotation.showAnnotations': 'Show annotations',
+    'annotation.hideAnnotations': 'Hide annotations',
+    'annotation.noteCount': '{count} notes',
+    'action.close': 'Close',
+    'action.backToStart': 'Back to start',
+    'shortcut.toggleLayout': 'V/H',
+    'shortcut.toggleTheme': 'Theme',
+    'shortcut.goHome': 'Home',
+    'settings.shortTitle': 'Settings',
+    'layout.verticalShort': 'V',
+    'author.courtesyName': 'Courtesy: {name}',
+    'author.artName': 'Art name: {name}',
+    'link.wikipedia': 'Wikipedia',
+    'link.ctext': 'CTEXT',
+    'role.defaultAuthor': 'Author',
+    'piece.defaultAuthorInitial': 'P',
+    'theme.light': 'Light',
+    'theme.sepia': 'Warm',
+    'theme.dark': 'Dark',
+    'theme.oled': 'Black',
+    'annotation.kind.pronunciation': 'Pronunciation',
+    'annotation.kind.semantic': 'Definition',
+    'annotation.kind.etymology': 'Etymology',
+    'annotation.kind.note': 'Note',
+    'annotation.kind.definition': 'Definition',
+    'annotation.kind.commentary': 'Commentary',
+    'annotation.kind.translation': 'Translation',
+    'annotation.kind.person': 'Person',
+    'annotation.kind.place': 'Place',
+    'annotation.kind.event': 'Event',
+    'annotation.kind.date': 'Date',
+    'annotation.kind.allusion': 'Allusion',
   },
 }
 

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;
@@ -222,10 +234,6 @@ button:focus-visible {
   from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: translateY(0); }
 }
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
 @keyframes scaleIn {
   from { opacity: 0; transform: scale(0.92); }
   to { opacity: 1; transform: scale(1); }

package/template/src/utils/annotationLabels.ts

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

package/template/src/views/AuthorView.vue

@@ -29,7 +29,7 @@ if (bookId) await load(bookId)
 const { layout } = useReadingMode()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
-const vScroll = useHorizontalScroll(vPageRef)
+useHorizontalScroll(vPageRef)
 
 const authorName = computed(() => decodeURIComponent(String(route.params.name || '')))
 const author = computed(() => getAuthor(authorName.value))
@@ -69,7 +69,7 @@ function goHome() { router.push('/') }
           role="button"
           tabindex="0"
           @click="openPiece(piece)"
-          @keydown.enter="openPiece(piece)"
+          @keydown.enter="openPiece(piece)" @keydown.space.prevent="openPiece(piece)"
         >
           <div class="v-work-num">{{ String(piece.num).padStart(3, '0') }}</div>
           <div class="v-work-title">{{ piece.title }}</div>
@@ -80,7 +80,7 @@ function goHome() { router.push('/') }
     <!-- ═══════ 橫排模式 ═══════ -->
     <div v-else class="h-root">
       <div class="h-page">
-        <nav class="h-nav">
+        <nav class="h-nav" aria-label="piece navigation">
           <div class="h-nav-inner">
             <button class="h-back" @click="goBack">← {{ t('nav.back') }}</button>
             <div class="h-breadcrumb">
@@ -122,7 +122,7 @@ function goHome() { router.push('/') }
                 role="button"
                 tabindex="0"
                 @click="openPiece(piece)"
-                @keydown.enter="openPiece(piece)"
+                @keydown.enter="openPiece(piece)" @keydown.space.prevent="openPiece(piece)"
               >
                 <div class="h-work-num">{{ String(piece.num).padStart(3, '0') }}</div>
                 <div class="h-work-title">{{ piece.title }}</div>
@@ -233,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;
@@ -332,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

@@ -22,7 +22,7 @@ useTitle(meta.value?.title || '')
 const { layout } = useReadingMode()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
-const vScroll = useHorizontalScroll(vPageRef)
+useHorizontalScroll(vPageRef)
 const { t } = useI18n()
 
 const filtered = computed(() => {
@@ -127,7 +127,7 @@ function scrollToCatalog() {
         <p v-if="meta?.publisher">{{ meta.publisher }}</p>
       </div>
       <div class="h-filter">
-        <input v-model="searchQuery" class="h-search" :placeholder="t('catalog.search')" />
+        <input v-model="searchQuery" class="h-search" :placeholder="t('catalog.search')" :aria-label="t('catalog.search')" />
       </div>
       <div class="h-grid">
         <PoemCard
@@ -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

@@ -107,8 +107,12 @@ function openBook(bookId: string) {
               :key="book.id"
               class="v-spine v-spine-anim"
               :data-cat="bookCategoryKey(book)"
+              role="button"
+              tabindex="0"
               :style="{ animationDelay: bi * 0.04 + 's' }"
               @click="openBook(book.id)"
+              @keydown.enter="openBook(book.id)"
+              @keydown.space.prevent="openBook(book.id)"
             >
               <span class="v-spine-accent"></span>
               <span class="v-spine-title">{{ book.title }}</span>
@@ -139,8 +143,12 @@ function openBook(bookId: string) {
             v-for="(book, bi) in group.books"
             :key="book.id"
             class="lib-card lib-card-anim"
+            role="button"
+            tabindex="0"
             :style="{ animationDelay: bi * 0.06 + 's' }"
             @click="openBook(book.id)"
+            @keydown.enter="openBook(book.id)"
+            @keydown.space.prevent="openBook(book.id)"
           >
             <div class="lib-card-accent"></div>
             <div class="lib-card-body">

package/template/src/views/PieceView.vue

@@ -325,7 +325,7 @@ const contributorGroups = computed(() => {
   if (!c || c.length <= 1) return []
   const groups = new Map<string, string[]>()
   for (const x of c) {
-    const t = x.title || ROLE_LABELS[x.role] || '作者'
+    const t = x.title || ROLE_LABELS[x.role] || t('role.defaultAuthor')
     if (!groups.has(t)) groups.set(t, [])
     groups.get(t)!.push(x.name)
   }
@@ -411,7 +411,7 @@ function tcy(n: number): string {
             :title="''"
             :author="''"
             :verses="piece.verses"
-            :author-initial="piece.author?.charAt(0) || '詩'"
+            :author-initial="piece.author?.charAt(0) || t('piece.defaultAuthorInitial')"
             :annotations="mergedAnnotations"
             @annotation-hover="onAnnotationHover"
             @annotation-leave="onAnnotationLeave"
@@ -472,7 +472,7 @@ function tcy(n: number): string {
           class="v-section"
         />
 
-        <nav class="v-nav">
+        <nav class="v-nav" aria-label="piece navigation">
           <button v-if="adjacent.prev !== null" class="v-nav-btn" @click="navigate(-1)">
             <span class="v-nav-dir">▲</span>
             <span class="v-nav-title">{{ getPiece(adjacent.prev)?.title }}</span>
@@ -510,13 +510,13 @@ function tcy(n: number): string {
                   <span v-if="selectedAuthorWorkCount" class="v-pane-count">{{ t('stat.pieceCount', { count: selectedAuthorWorkCount }) }}</span>
                 </div>
                 <div v-if="selectedAuthorData?.courtesyName || selectedAuthorData?.artName" class="v-pane-names">
-                  <span v-if="selectedAuthorData?.courtesyName">字{{ selectedAuthorData.courtesyName }}</span>
-                  <span v-if="selectedAuthorData?.artName">號{{ selectedAuthorData.artName }}</span>
+                  <span v-if="selectedAuthorData?.courtesyName">{{ t('author.courtesyName', { name: selectedAuthorData.courtesyName }) }}</span>
+                  <span v-if="selectedAuthorData?.artName">{{ t('author.artName', { name: selectedAuthorData.artName }) }}</span>
                 </div>
               </div>
               <div class="v-pane-links">
                 <a v-if="selectedAuthorData?.ctextId" :href="`https://ctext.org/wiki.pl?if=en&res=${selectedAuthorData.ctextId}`" target="_blank" rel="noopener" class="v-pane-link">CTEXT</a>
-                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="v-pane-link">維基</a>
+                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="v-pane-link">Wikipedia</a>
                 <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="v-pane-link">Wikipedia</a>
                 <a v-if="selectedAuthorData?.wikidata" :href="`https://www.wikidata.org/wiki/${selectedAuthorData.wikidata}`" target="_blank" rel="noopener" class="v-pane-link">Wikidata</a>
               </div>
@@ -530,13 +530,14 @@ function tcy(n: number): string {
           </div>
         </Transition>
       </Teleport>
+      <BackToTop vertical :scroll-container="vPageRef" />
     </div>
 
     <!-- ═══════ 橫排模式 ═══════ -->
     <div v-else class="h-root">
       <ReadingProgress />
       <div class="h-page">
-        <nav class="h-nav">
+        <nav class="h-nav" aria-label="piece navigation">
           <div class="h-nav-inner">
             <button class="h-back" @click="goBack">← {{ t('nav.back') }}</button>
             <div class="h-nav-title-row">
@@ -676,25 +677,17 @@ function tcy(n: number): string {
                 </div>
               </div>
               <div class="h-pane-links">
-                <a v-if="selectedAuthorData?.ctextId" :href="`https://ctext.org/wiki.pl?if=en&res=${selectedAuthorData.ctextId}`" target="_blank" rel="noopener" class="h-pane-link">
-                  <span class="link-icon">文</span> CTEXT
-                </a>
-                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="h-pane-link">
-                  <span class="link-icon">維</span> 維基百科
-                </a>
-                <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="h-pane-link">
-                  <span class="link-icon">W</span> Wikipedia
-                </a>
-                <a v-if="selectedAuthorData?.wikidata" :href="`https://www.wikidata.org/wiki/${selectedAuthorData.wikidata}`" target="_blank" rel="noopener" class="h-pane-link">
-                  <span class="link-icon">Q</span> Wikidata
-                </a>
+                <a v-if="selectedAuthorData?.ctextId" :href="`https://ctext.org/wiki.pl?if=en&res=${selectedAuthorData.ctextId}`" target="_blank" rel="noopener" class="h-pane-link">CTEXT</a>
+                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="h-pane-link">Wikipedia</a>
+                <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="h-pane-link">Wikipedia EN</a>
+                <a v-if="selectedAuthorData?.wikidata" :href="`https://www.wikidata.org/wiki/${selectedAuthorData.wikidata}`" target="_blank" rel="noopener" class="h-pane-link">Wikidata</a>
               </div>
               <div v-if="selectedAuthorBio" class="h-pane-bio">
                 <div v-for="p in selectedAuthorBio.split('\n').filter(l => l.trim())" :key="p" class="h-pane-p">
                   {{ 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>
@@ -900,7 +893,7 @@ function tcy(n: number): string {
   align-items: center;
   padding: 2px 8px;
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   font-family: var(--sans);
   font-size: 11px;
   font-weight: 700;
@@ -1054,12 +1047,16 @@ function tcy(n: number): string {
 /* Overlay transition */
 .overlay-enter-active { transition: opacity var(--dur-mid, 0.25s) ease; }
 .overlay-enter-active .h-pane { transition: transform var(--dur-mid, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1); }
+.overlay-enter-active .v-author-pane { transition: transform var(--dur-mid, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1); }
 .overlay-leave-active { transition: opacity var(--dur-fast, 0.15s) ease; }
 .overlay-leave-active .h-pane { transition: transform var(--dur-fast, 0.15s) ease; }
+.overlay-leave-active .v-author-pane { transition: transform var(--dur-fast, 0.15s) ease; }
 .overlay-enter-from { opacity: 0; }
 .overlay-enter-from .h-pane { transform: translateX(100%); }
+.overlay-enter-from .v-author-pane { transform: translateX(-100%); }
 .overlay-leave-to { opacity: 0; }
 .overlay-leave-to .h-pane { transform: translateX(40px); }
+.overlay-leave-to .v-author-pane { transform: translateX(-40px); }
 .h-pane-close {
   display: block; margin-left: auto;
   width: 36px; height: 36px;
@@ -1086,7 +1083,7 @@ function tcy(n: number): string {
   display: inline-flex;
   padding: 2px 8px;
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   font-family: var(--sans);
   font-size: 11px;
   font-weight: 700;
@@ -1330,10 +1327,6 @@ function tcy(n: number): string {
 :deep(.ann-flash) {
   animation: ann-flash-anim 1.5s ease-out;
 }
-@keyframes ann-flash-anim {
-  0% { background: rgba(194, 58, 43, 0.25); box-shadow: 0 0 12px rgba(194, 58, 43, 0.15); }
-  100% { background: transparent; box-shadow: none; }
-}
 
 /* ═══════ 行動裝置適配 ═══════ */