@hanology/cham-browser 0.4.61 → 0.4.62

package/package.json

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

package/template/src/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,6 +23,7 @@ const emit = defineEmits<{
 
 const bodyRef = ref<HTMLElement | null>(null)
 
+const { t } = useI18n()
 const ww = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
 const isMobile = computed(() => ww.value < 768)
 function onResize() { ww.value = window.innerWidth }
@@ -158,7 +160,7 @@ onBeforeUnmount(() => {
         :style="{ width: paneWidth + 'px' }"
       >
         <div class="ann-pane-header">
-          <span class="ann-pane-title">注釋</span>
+          <span class="ann-pane-title">{{ t('annotation.all') }}</span>
           <span class="ann-pane-count">{{ annotations.length }}</span>
           <button class="ann-pane-close" @click="emit('close')" aria-label="關閉">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
@@ -171,7 +173,10 @@ onBeforeUnmount(() => {
             :data-ann-id="ann.id"
             class="ann-pane-entry"
             :class="{ active: activeId === ann.id, [ann.kind]: true }"
+            role="button"
+            tabindex="0"
             @click="emit('select', ann)"
+            @keydown.enter="emit('select', ann)"
           >
             <!-- Vertical: headword column on the right side -->
             <div v-if="vertical && headword(ann)" class="ann-pane-v-word">
@@ -289,6 +294,11 @@ onBeforeUnmount(() => {
   background: var(--surface);
 }
 
+.ann-pane-entry:focus-visible {
+  outline: 2px solid var(--vermillion);
+  outline-offset: -2px;
+}
+
 .ann-pane-entry.active.pronunciation {
   border-left-color: var(--jade);
 }
@@ -334,11 +344,11 @@ onBeforeUnmount(() => {
 
 .ann-pane-kind.pronunciation { background: var(--jade); color: #fff; }
 .ann-pane-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-pane-kind.etymology { background: #6b5b95; color: #fff; }
+.ann-pane-kind.etymology { background: var(--ann-etymology); color: #fff; }
 .ann-pane-kind.note,
 .ann-pane-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-pane-kind.commentary { background: #c0392b; color: #fff; }
-.ann-pane-kind.translation { background: #2c6e49; color: #fff; }
+.ann-pane-kind.commentary { background: var(--ann-commentary); color: #fff; }
+.ann-pane-kind.translation { background: var(--ann-translation); color: #fff; }
 .ann-pane-kind.person { background: var(--ann-person); color: #fff; }
 .ann-pane-kind.place { background: var(--ann-place); color: #fff; }
 .ann-pane-kind.event { background: var(--ann-event); color: #fff; }

package/template/src/components/AnnotationTooltip.vue

@@ -199,6 +199,7 @@ onBeforeUnmount(() => {
 /* ─── Annotation entry ─── */
 .ann-entry {
   border-bottom: 1px solid var(--border-light);
+  padding: 8px 0;
   font-size: 14px;
   color: var(--ink-mid);
   letter-spacing: 1.5px;
@@ -229,11 +230,11 @@ onBeforeUnmount(() => {
 }
 .ann-kind.pronunciation { background: var(--jade); color: #fff; }
 .ann-kind.semantic { background: var(--vermillion); color: #fff; }
-.ann-kind.etymology { background: #6b5b95; color: #fff; }
+.ann-kind.etymology { background: var(--ann-etymology); color: #fff; }
 .ann-kind.note,
 .ann-kind.definition { background: var(--ink); color: var(--paper); }
-.ann-kind.commentary { background: #c0392b; color: #fff; align-self: center; }
-.ann-kind.translation { background: #2c6e49; color: #fff; }
+.ann-kind.commentary { background: var(--ann-commentary); color: #fff; }
+.ann-kind.translation { background: var(--ann-translation); color: #fff; }
 .ann-kind.person { background: var(--ann-person); color: #fff; }
 .ann-kind.place { background: var(--ann-place); color: #fff; }
 .ann-kind.event { background: var(--ann-event); color: #fff; }

package/template/src/components/BackToTop.vue

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

package/template/src/components/PoemCard.vue

@@ -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/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;

package/template/src/views/AuthorView.vue

@@ -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

@@ -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/PieceView.vue

@@ -530,6 +530,7 @@ function tcy(n: number): string {
           </div>
         </Transition>
       </Teleport>
+      <BackToTop vertical :scroll-container="vPageRef" />
     </div>
 
     <!-- ═══════ 橫排模式 ═══════ -->
@@ -694,7 +695,7 @@ function tcy(n: number): string {
                   {{ p.trim() }}
                 </div>
               </div>
-              <div v-if="!selectedAuthorBio" class="h-pane-empty">暫無作者資料</div>
+              <div v-if="!selectedAuthorBio" class="h-pane-empty">{{ t('piece.noAuthorData') }}</div>
             </div>
           </div>
         </Transition>