@hanology/cham-browser 0.3.9 → 0.4.1

package/template/src/components/AnnotationTooltip.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { useReadingMode } from '../composables/useReadingMode'
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { annotationToPronSegment } from '../utils/annotationParser'
 import PronunciationGroup from './PronunciationGroup.vue'
 import type { Annotation } from '../types'
 
+type DisplayMode = 'pane' | 'popup' | 'sheet'
+
 const props = defineProps<{
   visible: boolean
   annotations: Annotation[]
@@ -17,8 +18,34 @@ const emit = defineEmits<{
   tooltipEnter: []
   tooltipLeave: []
 }>()
-const { layout } = useReadingMode()
-const isMobile = computed(() => typeof window !== 'undefined' && window.innerWidth < 768)
+
+const ww = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+
+function onResize() { ww.value = window.innerWidth }
+
+const mode = computed<DisplayMode>(() => {
+  const w = ww.value
+  if (w < 768) return 'sheet'
+  if (w >= 1024) return 'pane'
+  return 'popup'
+})
+
+// Pane/sheet modes: stay visible until explicitly dismissed
+const stickyVisible = ref(false)
+
+watch(() => props.visible, (v) => {
+  if (v) stickyVisible.value = true
+  else if (mode.value === 'popup') stickyVisible.value = false
+})
+
+watch(mode, () => {
+  if (mode.value === 'popup' && !props.visible) stickyVisible.value = false
+})
+
+function dismiss() {
+  stickyVisible.value = false
+  emit('close')
+}
 
 function getSegment(ann: Annotation) {
   return annotationToPronSegment(ann)
@@ -32,26 +59,47 @@ function layerLabel(ann: Annotation): string {
   return ''
 }
 
+function kindLabel(ann: Annotation): string {
+  const map: Record<string, string> = {
+    pronunciation: '讀音',
+    semantic: '釋義',
+    etymology: '詞源',
+    note: '備注',
+    definition: '釋義',
+    commentary: '評註',
+    translation: '譯文',
+    person: '人名',
+    place: '地名',
+    event: '事件',
+    date: '紀年',
+    allusion: '典故',
+  }
+  return map[ann.kind] || ann.kind
+}
+
 function onDocClick(e: MouseEvent) {
-  if (!props.visible) return
-  const tooltip = (e.target as HTMLElement).closest('.ann-tooltip')
-  if (tooltip) return
-  emit('close')
+  if (!stickyVisible.value) return
+  const el = (e.target as HTMLElement)
+  if (el.closest('.ann-left-pane, .ann-bottom-sheet, .ann-popup')) return
+  if (el.closest('.ann-target')) return
+  dismiss()
 }
 
 function onDocTouchMove(e: TouchEvent) {
-  if (!props.visible || !isMobile.value) return
-  const tooltip = (e.target as HTMLElement).closest('.ann-tooltip')
-  if (tooltip) return
-  emit('close')
+  if (!stickyVisible.value || ww.value >= 768) return
+  const el = (e.target as HTMLElement)
+  if (el.closest('.ann-bottom-sheet')) return
+  dismiss()
 }
 
 onMounted(() => {
+  window.addEventListener('resize', onResize, { passive: true })
   document.addEventListener('click', onDocClick, true)
   document.addEventListener('touchmove', onDocTouchMove, { passive: true })
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
   document.removeEventListener('click', onDocClick, true)
   document.removeEventListener('touchmove', onDocTouchMove)
 })
@@ -59,28 +107,72 @@ onBeforeUnmount(() => {
 
 <template>
   <Teleport to="body">
+    <!-- Desktop left pane (>= 1024px) -->
+    <Transition name="ann-slide-right">
+      <div
+        v-if="mode === 'pane' && stickyVisible && annotations.length"
+        class="ann-left-pane"
+        @mouseenter="emit('tooltipEnter')"
+        @mouseleave="emit('tooltipLeave')"
+      >
+        <button class="ann-pane-close" @click="dismiss" aria-label="關閉">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+        <div class="ann-pane-inner">
+          <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
+            <div class="ann-detail-head">
+              <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
+              <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
+            </div>
+            <div class="ann-detail-body">
+              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" class="ann-pron-block" />
+              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- Tablet popup (768–1023px) -->
     <Transition name="ann-fade">
       <div
-        v-if="visible && annotations.length"
-        class="ann-tooltip"
-        :class="{ 'ann-vertical': layout === 'vertical', 'ann-mobile-bottom': isMobile }"
+        v-if="mode === 'popup' && visible && annotations.length"
+        class="ann-popup"
         :style="style"
         @mouseenter="emit('tooltipEnter')"
         @mouseleave="emit('tooltipLeave')"
       >
-        <button v-if="isMobile" class="ann-handle" @click="emit('close')">
+        <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
+          <div class="ann-detail-head">
+            <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
+            <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
+          </div>
+          <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
+          <span v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</span>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- Mobile bottom sheet (< 768px) -->
+    <Transition name="ann-sheet">
+      <div
+        v-if="mode === 'sheet' && stickyVisible && annotations.length"
+        class="ann-bottom-sheet"
+      >
+        <button class="ann-sheet-handle" @click="dismiss">
           <span class="ann-handle-bar" />
         </button>
-        <div
-          v-for="ann in annotations"
-          :key="ann.id"
-          class="ann-entry"
-          :class="ann.kind"
-        >
-          <span class="ann-kind">{{ ann.kind === 'pronunciation' ? '音' : '義' }}</span>
-          <span v-if="layerLabel(ann)" class="ann-layer">{{ layerLabel(ann) }}</span>
-          <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" />
-          <span v-else class="ann-body">{{ ann.text }}</span>
+        <div class="ann-sheet-inner">
+          <div v-for="ann in annotations" :key="ann.id" class="ann-detail" :class="ann.kind">
+            <div class="ann-detail-head">
+              <span class="ann-kind-tag" :class="ann.kind">{{ kindLabel(ann) }}</span>
+              <span v-if="layerLabel(ann)" class="ann-layer-tag">{{ layerLabel(ann) }}</span>
+            </div>
+            <div class="ann-detail-body">
+              <PronunciationGroup v-if="getSegment(ann)" :segment="getSegment(ann)!" class="ann-pron-block" />
+              <div v-if="ann.text && ann.kind !== 'pronunciation'" class="ann-text-block">{{ ann.text }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </Transition>
@@ -88,121 +180,188 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.ann-tooltip {
+/* ─── Shared Entry Styles ─── */
+.ann-detail {
+  margin-bottom: 16px;
+  letter-spacing: 1px;
+  font-size: 15px;
+  color: var(--ink-mid);
+}
+.ann-detail:last-child { margin-bottom: 0; }
+
+.ann-detail-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.ann-kind-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: var(--sans);
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.ann-kind-tag.pronunciation { background: var(--jade); color: #fff; }
+.ann-kind-tag.semantic { background: var(--vermillion); color: #fff; }
+.ann-kind-tag.etymology { background: #6b5b95; color: #fff; }
+.ann-kind-tag.note,
+.ann-kind-tag.definition { background: var(--ink); color: var(--paper); }
+.ann-kind-tag.commentary { background: #c0392b; color: #fff; }
+.ann-kind-tag.translation { background: #2c6e49; color: #fff; }
+.ann-kind-tag.person { background: var(--ann-person); color: #fff; }
+.ann-kind-tag.place { background: var(--ann-place); color: #fff; }
+.ann-kind-tag.event { background: var(--ann-event); color: #fff; }
+.ann-kind-tag.date { background: var(--ann-date); color: #fff; }
+.ann-kind-tag.allusion { background: var(--ann-allusion); color: #fff; }
+
+.ann-layer-tag {
+  font-size: 11px;
+  font-family: var(--sans);
+  color: var(--ink-faint);
+  padding: 2px 6px;
+  border: 1px solid var(--border-light);
+  border-radius: 3px;
+  letter-spacing: 1px;
+}
+
+.ann-detail-body {
+  padding-left: 4px;
+}
+
+.ann-pron-block {
+  margin-bottom: 6px;
+}
+
+.ann-text-block {
+  line-height: 1.9;
+  white-space: pre-line;
+}
+
+/* ─── Desktop Left Pane ─── */
+.ann-left-pane {
   position: fixed;
-  padding: 12px 16px;
+  top: 72px;
+  left: 20px;
+  width: 300px;
+  max-height: calc(100vh - 100px);
   background: var(--surface-warm);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.14);
+  border-radius: 12px;
+  box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.12);
+  z-index: 1000;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.ann-pane-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink-light);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  z-index: 1;
+}
+.ann-pane-close:hover {
+  background: var(--ink);
+  color: var(--paper);
+  border-color: var(--ink);
+}
+
+.ann-pane-inner {
+  padding: 16px;
+  padding-top: 14px;
+}
+
+/* ─── Tablet Popup ─── */
+.ann-popup {
+  position: fixed;
+  padding: 14px 18px;
+  background: var(--surface-warm);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.16);
   max-width: 320px;
   max-height: 60vh;
   overflow-y: auto;
   z-index: 1000;
 }
 
-/* ─── Mobile bottom sheet ─── */
-.ann-mobile-bottom {
+/* ─── Mobile Bottom Sheet ─── */
+.ann-bottom-sheet {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  max-width: none;
-  max-height: 50vh;
+  max-height: 55vh;
+  background: var(--surface-warm);
+  border-top: 1px solid var(--border);
   border-radius: 16px 16px 0 0;
-  padding: 8px 20px 20px;
+  box-shadow: 0 -4px 32px rgba(var(--shadow-rgb), 0.15);
+  z-index: 1000;
+  overflow-y: auto;
   overscroll-behavior: contain;
 }
 
-.ann-handle {
+.ann-sheet-handle {
   display: flex;
   justify-content: center;
-  padding: 8px 0 4px;
+  padding: 12px 0 6px;
   width: 100%;
   border: none;
   background: none;
   cursor: pointer;
 }
+
 .ann-handle-bar {
   display: block;
-  width: 36px;
+  width: 40px;
   height: 4px;
   border-radius: 2px;
   background: var(--border);
 }
 
-.ann-entry {
-  margin-bottom: 10px;
-  letter-spacing: 1px;
-  font-size: 15px;
-  color: var(--ink-mid);
-}
-.ann-entry:last-child { margin-bottom: 0; }
-
-.ann-kind {
-  display: inline-block;
-  font-size: 10px;
-  font-family: var(--sans);
-  padding: 1px 3px;
-  border-radius: 2px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  margin-right: 3px;
-  line-height: 1;
-  vertical-align: middle;
-}
-.ann-header {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.ann-layer {
-  font-size: 11px;
-  font-family: var(--sans);
-  color: var(--ink-faint);
-  letter-spacing: 1px;
-}
-.pronunciation .ann-kind {
-  background: var(--jade);
-  color: #fff;
-}
-.semantic .ann-kind {
-  background: var(--vermillion);
-  color: #fff;
+.ann-sheet-inner {
+  padding: 0 20px 28px;
 }
 
-.ann-body {
-  line-height: 1.8;
-}
+/* ─── Transitions ─── */
 
-/* ─── 直排模式 tooltip ─── */
-.ann-vertical {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  max-width: none;
-  max-height: 60vh;
-  padding: 16px 12px;
+/* Left pane slide from left */
+.ann-slide-right-enter-active {
+  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.ann-vertical .ann-entry {
-  margin-bottom: 0;
-  margin-left: 12px;
-  display: inline;
+.ann-slide-right-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
 }
-.ann-vertical .ann-kind {
-  margin-right: 0;
-  text-combine-upright: all;
-  vertical-align: baseline;
+.ann-slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-24px);
 }
-.ann-vertical .ann-body {
-  margin-left: 6px;
+.ann-slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-16px);
 }
 
-/* ─── Transition ─── */
+/* Popup fade */
 .ann-fade-enter-active {
-  transition: opacity var(--dur-fast, 0.15s) ease, transform var(--dur-mid, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .ann-fade-leave-active {
-  transition: opacity var(--dur-fast, 0.15s) ease, transform var(--dur-fast, 0.15s) ease;
+  transition: opacity 0.15s ease, transform 0.15s ease;
 }
 .ann-fade-enter-from {
   opacity: 0;
@@ -212,4 +371,24 @@ onBeforeUnmount(() => {
   opacity: 0;
   transform: scale(0.96);
 }
+
+/* Bottom sheet slide up */
+.ann-sheet-enter-active {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.ann-sheet-leave-active {
+  transition: transform 0.2s ease;
+}
+.ann-sheet-enter-from,
+.ann-sheet-leave-to {
+  transform: translateY(100%);
+}
+
+@media (max-width: 1023px) {
+  .ann-left-pane { display: none; }
+}
+
+@media (min-width: 1024px) {
+  .ann-bottom-sheet { display: none; }
+}
 </style>

package/template/src/components/BackToTop.vue

@@ -50,6 +50,10 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll))
   box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.1);
   transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+
+@media (max-width: 768px) {
+  .btt { bottom: 88px; right: 16px; width: 36px; height: 36px; }
+}
 .btt:hover {
   background: var(--ink);
   color: var(--paper);

package/template/src/components/BookCard.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
 import type { BookMeta } from '../types'
 import { useRouter } from 'vue-router'
+import { useI18n } from '../composables/useI18n'
 
-defineProps<{ book: BookMeta }>()
+const props = defineProps<{ book: BookMeta }>()
 const router = useRouter()
+const { t } = useI18n()
 
-const genreLabel: Record<string, string> = {
-  poetry: '詩歌',
-  prose: '散文',
-  mixed: '綜合',
-  drama: '戲曲',
+function genreLabel(genre: string): string {
+  return t(`genre.${genre}` as 'genre.poetry') || genre
 }
 </script>
 
 <template>
-  <div class="bc-root" @click="router.push(`/${book.id}`)">
+  <div class="bc-root" @click="router.push(`/${props.book.id}`)">
     <div class="bc-accent"></div>
     <div class="bc-body">
-      <h2 class="bc-title">{{ book.title }}</h2>
-      <p v-if="book.subtitle" class="bc-subtitle">{{ book.subtitle }}</p>
+      <h2 class="bc-title">{{ props.book.title }}</h2>
+      <p v-if="props.book.subtitle" class="bc-subtitle">{{ props.book.subtitle }}</p>
       <div class="bc-stats">
-        <span class="bc-count">{{ book.count }} 篇</span>
-        <span class="bc-genre">{{ genreLabel[book.genre] || book.genre }}</span>
+        <span class="bc-count">{{ t('stat.pieceCount', { count: props.book.count }) }}</span>
+        <span class="bc-genre">{{ genreLabel(props.book.genre) }}</span>
       </div>
     </div>
   </div>

package/template/src/components/HorizontalDisplay.vue

@@ -97,4 +97,56 @@ function onTap(event: MouseEvent) {
 :deep(.ann-target.pronunciation) {
   border-bottom-color: var(--jade);
 }
+:deep(.ann-target.person) {
+  border-bottom-color: var(--ann-person);
+}
+:deep(.ann-target.place) {
+  border-bottom-color: var(--ann-place);
+}
+:deep(.ann-target.event) {
+  border-bottom-color: var(--ann-event);
+}
+:deep(.ann-target.date) {
+  border-bottom-color: var(--ann-date);
+}
+:deep(.ann-target.allusion) {
+  border-bottom-color: var(--ann-allusion);
+}
+:deep(.ann-target.person:hover) {
+  background: rgba(58, 90, 140, 0.08);
+}
+:deep(.ann-target.place:hover) {
+  background: rgba(139, 105, 20, 0.08);
+}
+:deep(.ann-target.event:hover) {
+  background: rgba(107, 76, 138, 0.08);
+}
+:deep(.ann-target.date:hover) {
+  background: rgba(42, 122, 122, 0.08);
+}
+:deep(.ann-target.allusion:hover) {
+  background: rgba(181, 101, 29, 0.08);
+}
+
+@media (max-width: 768px) {
+  .h-display {
+    padding: 24px 20px;
+    border-radius: 6px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .h-display-title {
+    font-size: 24px;
+    letter-spacing: 4px;
+  }
+  .h-display-author {
+    font-size: 14px;
+    margin-bottom: 16px;
+  }
+  .h-display-line {
+    font-size: var(--main-font-size, 20px);
+    line-height: 2.4;
+    letter-spacing: 2px;
+  }
+}
 </style>

package/template/src/components/PoemCard.vue

@@ -49,6 +49,7 @@ const preview = computed(() => {
   border-color: var(--gold);
 }
 .pc-root:hover .pc-accent { height: 100%; }
+.pc-root:active { transform: scale(0.98); }
 .pc-body { padding: 24px; }
 .pc-num {
   font-size: 11px; color: var(--ink-faint);

package/template/src/components/PronunciationGroup.vue

@@ -8,38 +8,47 @@ defineProps<{
 
 <template>
   <span class="pron-group">
-    <span class="ann-pron" :class="segment.lang === 'yue' ? 'ann-yue' : 'ann-cmn'">
+    <span class="pron-badge" :class="segment.lang === 'yue' ? 'pron-yue' : 'pron-cmn'">
       {{ segment.label }}
     </span>
-    <span
-      v-for="(part, i) in segment.parts"
-      :key="i"
-      class="ann-phonetic"
-    >{{ part }}</span>
+    <span class="pron-text">{{ segment.parts.join(' ') }}</span>
   </span>
 </template>
 
 <style scoped>
 .pron-group {
   display: inline-flex;
-  align-items: baseline;
-  gap: 0.3em;
+  align-items: center;
+  gap: 5px;
   white-space: nowrap;
 }
-.ann-pron {
-  display: inline-block;
-  font-size: 0.75em;
+.pron-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  font-size: 11px;
   font-family: var(--sans);
-  font-weight: 600;
-  padding: 1px 3px;
-  border-radius: 2px;
-  vertical-align: middle;
+  font-weight: 700;
+  letter-spacing: 0.5px;
   line-height: 1;
+  flex-shrink: 0;
+}
+.pron-yue {
+  background: var(--jade);
+  color: #fff;
+}
+.pron-cmn {
+  background: var(--ink);
+  color: var(--paper);
 }
-.ann-yue { background: var(--jade); color: #fff; }
-.ann-cmn { background: var(--ink); color: var(--paper); }
-.ann-phonetic {
+.pron-text {
   font-family: var(--sans);
+  font-size: 13px;
   color: var(--ink-light);
+  letter-spacing: 0.5px;
 }
 </style>

package/template/src/components/ReadingToolbar.vue

@@ -91,6 +91,26 @@ function close() { open.value = false }
   right: 24px;
   z-index: 500;
 }
+
+@media (max-width: 768px) {
+  .rt { bottom: 16px; right: 16px; }
+  .rt-panel {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: auto;
+    border-radius: 16px 16px 0 0;
+    max-height: 60vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    animation: slideUpMobile 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  }
+  @keyframes slideUpMobile {
+    from { opacity: 0; transform: translateY(100%); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
 .rt-fab {
   width: 44px; height: 44px;
   border-radius: 50%;