@hanology/cham-browser 0.4.62 → 0.4.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.62",
+  "version": "0.4.64",
   "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

@@ -168,4 +168,11 @@ function onKey(event: KeyboardEvent) {
   color: var(--ink-faint);
   letter-spacing: 1px;
 }
+
+.route-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
 </style>

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

@@ -25,7 +25,6 @@ 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 ───
@@ -147,7 +146,7 @@ onBeforeUnmount(() => {
   <Teleport to="body">
     <Transition name="ann-dim">
       <div
-        v-if="visible && annotations.length && vertical && isMobile"
+        v-if="visible && annotations.length && vertical && ww < 768"
         class="ann-pane-dim"
         @click="emit('close')"
       />
@@ -162,7 +161,7 @@ onBeforeUnmount(() => {
         <div class="ann-pane-header">
           <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>
@@ -342,18 +341,18 @@ onBeforeUnmount(() => {
   line-height: 1.5;
 }
 
-.ann-pane-kind.pronunciation { background: var(--jade); color: #fff; }
-.ann-pane-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-pane-kind.etymology { background: var(--ann-etymology); color: #fff; }
+.ann-pane-kind.pronunciation { background: var(--jade); color: var(--paper); }
+.ann-pane-kind.semantic { background: var(--vermillion); color: var(--paper); }
+.ann-pane-kind.etymology { background: var(--ann-etymology); color: var(--paper); }
 .ann-pane-kind.note,
 .ann-pane-kind.definition { background: var(--ink); color: var(--paper); }
-.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; }
-.ann-pane-kind.date { background: var(--ann-date); color: #fff; }
-.ann-pane-kind.allusion { background: var(--ann-allusion); color: #fff; }
+.ann-pane-kind.commentary { background: var(--ann-commentary); color: var(--paper); }
+.ann-pane-kind.translation { background: var(--ann-translation); color: var(--paper); }
+.ann-pane-kind.person { background: var(--ann-person); color: var(--paper); }
+.ann-pane-kind.place { background: var(--ann-place); color: var(--paper); }
+.ann-pane-kind.event { background: var(--ann-event); color: var(--paper); }
+.ann-pane-kind.date { background: var(--ann-date); color: var(--paper); }
+.ann-pane-kind.allusion { background: var(--ann-allusion); color: var(--paper); }
 
 .ann-pane-layer {
   font-size: 10px;

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>
@@ -228,18 +231,18 @@ onBeforeUnmount(() => {
   letter-spacing: 1px;
   line-height: 1.5;
 }
-.ann-kind.pronunciation { background: var(--jade); color: #fff; }
-.ann-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-kind.etymology { background: var(--ann-etymology); color: #fff; }
+.ann-kind.pronunciation { background: var(--jade); color: var(--paper); }
+.ann-kind.semantic { background: var(--vermillion); color: var(--paper); }
+.ann-kind.etymology { background: var(--ann-etymology); color: var(--paper); }
 .ann-kind.note,
 .ann-kind.definition { background: var(--ink); color: var(--paper); }
-.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; }
-.ann-kind.date { background: var(--ann-date); color: #fff; }
-.ann-kind.allusion { background: var(--ann-allusion); color: #fff; }
+.ann-kind.commentary { background: var(--ann-commentary); color: var(--paper); }
+.ann-kind.translation { background: var(--ann-translation); color: var(--paper); }
+.ann-kind.person { background: var(--ann-person); color: var(--paper); }
+.ann-kind.place { background: var(--ann-place); color: var(--paper); }
+.ann-kind.event { background: var(--ann-event); color: var(--paper); }
+.ann-kind.date { background: var(--ann-date); color: var(--paper); }
+.ann-kind.allusion { background: var(--ann-allusion); color: var(--paper); }
 
 .ann-layer {
   font-size: 10px;
@@ -393,6 +396,34 @@ onBeforeUnmount(() => {
   background: rgba(58, 90, 140, 0.12) !important;
   box-shadow: 0 0 0 2px rgba(58, 90, 140, 0.15);
 }
+:global(.ann-target.ann-active.place) {
+  background: rgba(139, 105, 20, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.15);
+}
+:global(.ann-target.ann-active.event) {
+  background: rgba(107, 76, 138, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(107, 76, 138, 0.15);
+}
+:global(.ann-target.ann-active.date) {
+  background: rgba(42, 122, 122, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(42, 122, 122, 0.15);
+}
+:global(.ann-target.ann-active.allusion) {
+  background: rgba(181, 101, 29, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(181, 101, 29, 0.15);
+}
+:global(.ann-target.ann-active.etymology) {
+  background: rgba(107, 91, 149, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(107, 91, 149, 0.15);
+}
+:global(.ann-target.ann-active.commentary) {
+  background: rgba(192, 57, 43, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
+}
+:global(.ann-target.ann-active.translation) {
+  background: rgba(44, 110, 73, 0.12) !important;
+  box-shadow: 0 0 0 2px rgba(44, 110, 73, 0.15);
+}
 
 @media (min-width: 768px) {
   .ann-sheet { display: none; }

package/template/src/components/BackToTop.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from '../composables/useI18n'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   vertical?: boolean
@@ -58,7 +61,7 @@ onUnmounted(detach)
 
 <template>
   <Transition name="btt">
-    <button v-if="visible" class="btt" :class="{ 'btt-v': vertical }" @click="scrollToTop" aria-label="回到頂部">
+    <button v-if="visible" class="btt" :class="{ 'btt-v': vertical }" @click="scrollToTop" :aria-label="vertical ? t('action.backToStart') : t('action.backToTop')">
       <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>
@@ -93,29 +96,13 @@ onUnmounted(detach)
   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; }
 }
 .btt:hover {
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   border-color: var(--vermillion);
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.15);

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>

package/template/src/components/PronunciationGroup.vue

@@ -39,7 +39,7 @@ defineProps<{
 }
 .pron-yue {
   background: var(--jade);
-  color: #fff;
+  color: var(--paper);
 }
 .pron-cmn {
   background: var(--ink);

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,8 +14,8 @@ function close() { open.value = false }
 
 <template>
   <div class="rt" :class="{ open }">
-    <button class="rt-fab" @click="toggle" :aria-label="open ? '關閉設定' : '閱讀設定'">
-      <span v-if="!open" class="rt-icon">設</span>
+    <button class="rt-fab" @click="toggle" :aria-label="open ? t('settings.close') : t('settings.reading')">
+      <span v-if="!open" class="rt-icon">{{ t('settings.shortTitle').charAt(0) }}</span>
       <span v-else class="rt-icon">✕</span>
     </button>
     <div v-if="open" class="rt-panel" @click.stop>
@@ -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/SectionBlock.vue

@@ -104,7 +104,7 @@ const paragraphsHtml = computed(() => {
 .sb-num {
   display: inline-flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; border-radius: 50%;
-  background: var(--vermillion); color: #fff;
+  background: var(--vermillion); color: var(--paper);
   font-family: var(--sans); font-size: 13px; font-weight: 700;
   flex-shrink: 0;
 }
@@ -142,7 +142,7 @@ const paragraphsHtml = computed(() => {
   height: 22px;
   border-radius: 4px;
   background: var(--vermillion);
-  color: #fff;
+  color: var(--paper);
   font-family: var(--sans);
   font-size: 12px;
   font-weight: 700;

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,39 @@ 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': '回到起始',
+    'action.backToTop': '回到頂部',
+    '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 +171,39 @@ 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': '回到起始',
+    'action.backToTop': '回到顶部',
+    '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 +269,39 @@ 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',
+    'action.backToTop': 'Back to top',
+    '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/composables/useReadingMode.ts

@@ -5,13 +5,6 @@ export type LayoutMode = 'horizontal' | 'vertical'
 
 export const THEMES: Theme[] = ['light', 'sepia', 'dark', 'oled']
 
-export const THEME_LABELS: Record<Theme, string> = {
-  light: '亮',
-  sepia: '暖',
-  dark: '暗',
-  oled: '黑',
-}
-
 export const FONT_SIZES = [12, 14, 16, 18, 20, 22, 24, 28, 32] as const
 export type FontSize = typeof FONT_SIZES[number]
 

package/template/src/styles/annotation-targets.css

@@ -45,6 +45,18 @@
   background: rgba(181, 101, 29, 0.1);
   box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(181, 101, 29, 0.08);
 }
+.ann-target.etymology:hover {
+  background: rgba(107, 91, 149, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(107, 91, 149, 0.08);
+}
+.ann-target.commentary:hover {
+  background: rgba(192, 57, 43, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(192, 57, 43, 0.08);
+}
+.ann-target.translation:hover {
+  background: rgba(44, 110, 73, 0.1);
+  box-shadow: 0 var(--ann-shadow-y, 2px) 8px rgba(44, 110, 73, 0.08);
+}
 
 /* ─── Annotation number ─── */
 .ann-num {

package/template/src/styles/main.css

@@ -234,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); }
@@ -332,3 +328,13 @@ button:focus-visible {
 [data-theme="oled"] .sb-vertical {
   border-right-color: var(--border-light);
 }
+
+/* ===== REDUCED MOTION ===== */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/template/src/utils/annotationLabels.ts

@@ -1,20 +1,24 @@
 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 { t } = useI18n()
+
+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]
+  return key ? t(key) : 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>
@@ -177,8 +177,7 @@ function goHome() { router.push('/') }
   display: flex; align-items: center; justify-content: center;
   font-size: 28px; font-weight: 900;
   color: var(--vermillion);
-  margin-left: 24px; padding-left: 20px;
-  border-left: 3px solid var(--vermillion);
+  margin-left: 24px;
 }
 .v-name {
   font-size: 48px; font-weight: 900;
@@ -251,7 +250,7 @@ function goHome() { router.push('/') }
 .h-page { min-height: 100vh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
-  background: var(--paper); opacity: 0.97;
+  background: var(--paper);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-light);
   padding: 0 40px;

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(() => {
@@ -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')" aria-label="search" />
+          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" :aria-label="t('catalog.search')" />
         </span>
       </section>
 
@@ -92,6 +92,9 @@ function scrollToCatalog() {
           @click="openPiece(piece.num)"
         />
       </div>
+      <div v-if="searchQuery && filtered.length === 0" class="v-empty">
+        <span class="v-empty-text">{{ t('catalog.noResults', { query: searchQuery }) }}</span>
+      </div>
     </div>
   </div>
 
@@ -127,7 +130,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
@@ -379,6 +382,23 @@ function scrollToCatalog() {
   opacity: 0.5;
 }
 
+.v-empty {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-shrink: 0;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+}
+.v-empty-text {
+  font-size: 14px;
+  color: var(--ink-faint);
+  letter-spacing: 2px;
+  font-family: var(--sans);
+}
+
 @media (max-width: 768px) {
   .h-hero { min-height: 80vh; height: auto; padding: 60px 16px; }
   .h-ornament { font-size: 32px; letter-spacing: 12px; margin-bottom: 20px; }

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

@@ -312,20 +312,20 @@ function navigate(delta: number) {
   if (target !== null) router.push(`/${props.bookId}/${target}`)
 }
 
-const ROLE_LABELS: Record<string, string> = {
+const ROLE_LABELS = computed(() => ({
   author: t('role.author'),
   commentator: t('role.commentator'),
   editor: t('role.editor'),
   translator: t('role.translator'),
   annotator: t('role.annotator'),
-}
+}))
 
 const contributorGroups = computed(() => {
   const c = piece.value?.contributors
   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.value[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,14 +510,14 @@ 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?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="v-pane-link">Wikipedia</a>
+                <a v-if="selectedAuthorData?.wikipediaZh" :href="selectedAuthorData.wikipediaZh" target="_blank" rel="noopener" class="v-pane-link">Wikipedia ZH</a>
+                <a v-if="selectedAuthorData?.wikipediaEn" :href="selectedAuthorData.wikipediaEn" target="_blank" rel="noopener" class="v-pane-link">Wikipedia EN</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>
               <div v-if="selectedAuthorBio" class="v-pane-bio">
@@ -537,7 +537,7 @@ function tcy(n: number): string {
     <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">
@@ -671,24 +671,16 @@ function tcy(n: number): string {
                     <span v-if="selectedAuthorWorkCount" class="h-pane-count">{{ t('piece.collected', { count: selectedAuthorWorkCount }) }}</span>
                   </div>
                   <div v-if="selectedAuthorData?.courtesyName || selectedAuthorData?.artName" class="h-pane-alt-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>
               <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">
@@ -865,7 +857,7 @@ function tcy(n: number): string {
 .h-page { min-height: 100vh; }
 .h-nav {
   position: sticky; top: 0; z-index: 100;
-  background: var(--paper); opacity: 0.97;
+  background: var(--paper);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-light);
   padding: 0 40px;
@@ -901,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;
@@ -1055,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;
@@ -1087,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;
@@ -1331,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; }
-}
 
 /* ═══════ 行動裝置適配 ═══════ */