@hanology/cham-browser 0.2.2 → 0.3.0

package/template/src/composables/useI18n.ts

@@ -0,0 +1,174 @@
+import { ref, computed, watch } from 'vue'
+
+export type Locale = 'zh-Hant' | 'zh-Hans' | 'en'
+
+export const LOCALE_LABELS: Record<Locale, string> = {
+  'zh-Hant': '繁',
+  'zh-Hans': '简',
+  'en': 'EN',
+}
+
+const messages: Record<Locale, Record<string, string>> = {
+  'zh-Hant': {
+    'site.title': '古典詩文圖書館',
+    'site.subtitle': 'Classical Chinese Text Library',
+    'nav.back': '返回',
+    'nav.home': '首頁',
+    'settings.layout': '版面',
+    'settings.vertical': '直排',
+    'settings.horizontal': '橫排',
+    'settings.theme': '主題',
+    'settings.language': '語言',
+    'settings.mainFontSize': '正文字號',
+    'settings.bodyFontSize': '內文字號',
+    'settings.reading': '閱讀設定',
+    'settings.close': '關閉設定',
+    'piece.stanzas': '段',
+    'piece.notes': '注',
+    'piece.noNotes': '無注',
+    'piece.previous': '上一篇',
+    'piece.next': '下一篇',
+    'piece.enterLibrary': '進 入 文 庫',
+    'piece.loading': '載入中…',
+    'catalog.title': '篇 章 目 錄',
+    'catalog.total': '共 {count} 篇',
+    'catalog.search': '搜索詩題、作者…',
+    'author.biography': '作者簡介',
+    'author.collectedWorks': '收錄作品',
+    'author.worksCount': '{count} 篇收錄作品',
+    'author.unknownDynasty': '未知朝代',
+    'annotation.pronunciation': '音',
+    'annotation.semantic': '義',
+    'annotation.notes': '注釋',
+    'genre.poetry': '詩歌',
+    'genre.prose': '散文',
+    'genre.mixed': '綜合',
+    'genre.drama': '戲曲',
+    'genre.classicalText': '古典文本',
+    'genre.fourTreasuries': '四庫全書',
+    'genre.textbooks': '教材',
+    'stat.books': '部',
+    'stat.pieces': '篇',
+    'stat.pieceCount': '{count} 篇',
+    'stat.authorCount': '{count} 位作者',
+    'stat.piecePoems': '篇詩文',
+  },
+  'zh-Hans': {
+    'site.title': '古典诗文图书馆',
+    'site.subtitle': 'Classical Chinese Text Library',
+    'nav.back': '返回',
+    'nav.home': '首页',
+    'settings.layout': '版面',
+    'settings.vertical': '直排',
+    'settings.horizontal': '横排',
+    'settings.theme': '主题',
+    'settings.language': '语言',
+    'settings.mainFontSize': '正文字号',
+    'settings.bodyFontSize': '内文字号',
+    'settings.reading': '阅读设定',
+    'settings.close': '关闭设定',
+    'piece.stanzas': '段',
+    'piece.notes': '注',
+    'piece.noNotes': '无注',
+    'piece.previous': '上一篇',
+    'piece.next': '下一篇',
+    'piece.enterLibrary': '进 入 文 库',
+    'piece.loading': '载入中…',
+    'catalog.title': '篇 章 目 录',
+    'catalog.total': '共 {count} 篇',
+    'catalog.search': '搜索诗题、作者…',
+    'author.biography': '作者简介',
+    'author.collectedWorks': '收录作品',
+    'author.worksCount': '{count} 篇收录作品',
+    'author.unknownDynasty': '未知朝代',
+    'annotation.pronunciation': '音',
+    'annotation.semantic': '义',
+    'annotation.notes': '注释',
+    'genre.poetry': '诗歌',
+    'genre.prose': '散文',
+    'genre.mixed': '综合',
+    'genre.drama': '戏曲',
+    'genre.classicalText': '古典文本',
+    'genre.fourTreasuries': '四库全书',
+    'genre.textbooks': '教材',
+    'stat.books': '部',
+    'stat.pieces': '篇',
+    'stat.pieceCount': '{count} 篇',
+    'stat.authorCount': '{count} 位作者',
+    'stat.piecePoems': '篇诗文',
+  },
+  'en': {
+    'site.title': 'Classical Chinese Text Library',
+    'site.subtitle': 'Classical Chinese Text Library',
+    'nav.back': 'Back',
+    'nav.home': 'Home',
+    'settings.layout': 'Layout',
+    'settings.vertical': 'Vertical',
+    'settings.horizontal': 'Horizontal',
+    'settings.theme': 'Theme',
+    'settings.language': 'Language',
+    'settings.mainFontSize': 'Main Size',
+    'settings.bodyFontSize': 'Body Size',
+    'settings.reading': 'Reading Settings',
+    'settings.close': 'Close Settings',
+    'piece.stanzas': 'stanzas',
+    'piece.notes': 'notes',
+    'piece.noNotes': 'No notes',
+    'piece.previous': 'Previous',
+    'piece.next': 'Next',
+    'piece.enterLibrary': 'Enter Library',
+    'piece.loading': 'Loading…',
+    'catalog.title': 'Catalogue',
+    'catalog.total': '{count} works',
+    'catalog.search': 'Search titles, authors…',
+    'author.biography': 'Biography',
+    'author.collectedWorks': 'Collected Works',
+    'author.worksCount': '{count} collected works',
+    'author.unknownDynasty': 'Unknown dynasty',
+    'annotation.pronunciation': 'Pron',
+    'annotation.semantic': 'Def',
+    'annotation.notes': 'Notes',
+    'genre.poetry': 'Poetry',
+    'genre.prose': 'Prose',
+    'genre.mixed': 'Mixed',
+    'genre.drama': 'Drama',
+    'genre.classicalText': 'Classical Texts',
+    'genre.fourTreasuries': 'Four Treasuries',
+    'genre.textbooks': 'Textbooks',
+    'stat.books': 'books',
+    'stat.pieces': 'works',
+    'stat.pieceCount': '{count} works',
+    'stat.authorCount': '{count} authors',
+    'stat.piecePoems': 'works',
+  },
+}
+
+const AVAILABLE_LOCALES: Locale[] = ['zh-Hant', 'zh-Hans', 'en']
+
+const locale = ref<Locale>('zh-Hant')
+
+if (!import.meta.env.SSR) {
+  const saved = localStorage.getItem('cham-locale') as Locale | null
+  if (saved && AVAILABLE_LOCALES.includes(saved)) locale.value = saved
+
+  watch(locale, l => {
+    localStorage.setItem('cham-locale', l)
+    document.documentElement.setAttribute('lang', l === 'zh-Hans' ? 'zh-Hans' : l === 'en' ? 'en' : 'zh-Hant')
+  }, { immediate: true })
+}
+
+export function useI18n() {
+  function t(key: string, params?: Record<string, string | number>): string {
+    let msg = messages[locale.value]?.[key] || messages['zh-Hant']?.[key] || key
+    if (params) {
+      for (const [k, v] of Object.entries(params)) {
+        msg = msg.replace(`{${k}}`, String(v))
+      }
+    }
+    return msg
+  }
+
+  function setLocale(l: Locale) { locale.value = l }
+
+  return { locale, t, setLocale, availableLocales: AVAILABLE_LOCALES, localeLabels: LOCALE_LABELS }
+}

package/template/src/views/AboutView.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { useI18n } from '../composables/useI18n'
+import { useTitle } from '../composables/useTitle'
+import { useReadingMode } from '../composables/useReadingMode'
+import { useHorizontalScroll } from '../composables/useHorizontalScroll'
+import SideNav from '../components/SideNav.vue'
+import ReadingToolbar from '../components/ReadingToolbar.vue'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { t, locale } = useI18n()
+const { layout } = useReadingMode()
+const isVertical = computed(() => layout.value === 'vertical')
+const vPageRef = ref<HTMLElement | null>(null)
+const vScroll = useHorizontalScroll(vPageRef)
+const router = useRouter()
+
+useTitle(locale.value === 'en' ? 'About — Hanology' : '關於 — 漢流')
+
+function goBack() { router.push('/') }
+function goHome() { router.push('/') }
+</script>
+
+<template>
+  <div v-if="isVertical" class="v-root">
+    <SideNav @back="goBack" @home="goHome" />
+    <div ref="vPageRef" class="v-page">
+      <section class="v-about">
+        <h1 class="v-about-title">關 於 漢 流</h1>
+        <div class="v-divider"></div>
+        <div class="v-about-body">
+          <p><strong>漢流</strong>，粵音 Han-Lou，普音 Han-Liu，意為「漢學之流」。</p>
+          <p>經典如水，源遠流長，世代浸潤其中，前人開源，後人受益。每一代人都能在經典的長河中，找到屬於自己的領悟。</p>
+          <p><strong>Hanology</strong>，English portmanteau of <em>Han</em> + <em>anthology</em> + <em>-logy</em> (the study of). The sound "lou/liu" echoes the first syllable of "-logy" — a perfect phonetic and semantic fit.</p>
+          <p>Hanology is a digital library for classical Chinese texts, designed to make the wisdom of the ages accessible in the modern world.</p>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div v-else class="h-root">
+    <header class="h-header">
+      <button class="h-back" @click="goBack">← {{ t('nav.back') }}</button>
+      <h1 class="h-page-title">關於漢流 / About Hanology</h1>
+    </header>
+    <div class="h-content">
+      <div class="h-seal">漢流</div>
+      <div class="h-about-block">
+        <h2>漢流 · Hanology</h2>
+        <p><strong>漢流</strong>，粵音 Han-Lou，普音 Han-Liu，意為「漢學之流」。</p>
+        <p>經典如水，源遠流長，世代浸潤其中，前人開源，後人受益。每一代人都能在經典的長河中，找到屬於自己的領悟。</p>
+      </div>
+      <div class="h-about-block">
+        <h2>Hanology</h2>
+        <p>English portmanteau of <em>Han</em> + <em>anthology</em> + <em>-logy</em> (the study of).</p>
+        <p>The sound "lou/liu" echoes the first syllable of "-logy" — a perfect phonetic and semantic fit. Just as the classics flow through generations, Hanology aims to carry that stream into the digital age.</p>
+      </div>
+      <div class="h-about-block">
+        <h2>Our Mission</h2>
+        <p>Hanology is a digital library for classical Chinese texts. We believe that the wisdom of antiquity should not be locked behind impenetrable editions or forgotten in dusty shelves. By combining rigorous scholarship with thoughtful design, we make the classics accessible, beautiful, and alive for every reader.</p>
+      </div>
+    </div>
+    <ReadingToolbar />
+  </div>
+</template>
+
+<style scoped>
+/* ═══════ 直排模式 ═══════ */
+.v-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: row-reverse;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-right: var(--nav-width, 56px);
+  padding: 0 32px;
+  background: var(--paper);
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
+}
+.v-page::-webkit-scrollbar { height: 4px; }
+.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
+
+.v-about {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-shrink: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 40px 24px;
+}
+.v-about-title {
+  font-size: 48px; font-weight: 900;
+  letter-spacing: 16px; color: var(--ink);
+  margin-left: 20px; padding-left: 20px;
+  border-left: 4px solid var(--vermillion);
+  line-height: 1.6;
+}
+.v-divider {
+  width: 2px; height: 80px;
+  background: linear-gradient(180deg, transparent, var(--gold), transparent);
+  margin-left: 20px;
+}
+.v-about-body {
+  font-size: 16px; line-height: 2.4;
+  color: var(--ink-mid);
+  max-height: 80vh;
+  overflow-x: auto;
+}
+.v-about-body p {
+  margin-left: 16px;
+  text-indent: 0;
+}
+
+/* ═══════ 橫排模式 ═══════ */
+.h-root { max-width: 960px; margin: 0 auto; padding: 40px 24px 120px; }
+.h-header {
+  display: flex; align-items: center; gap: 16px;
+  margin-bottom: 40px; padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.h-back {
+  padding: 6px 16px; border: 1px solid var(--border);
+  border-radius: 2px; background: none;
+  font-family: var(--sans); font-size: 13px;
+  color: var(--ink-mid); cursor: pointer;
+  transition: all 0.2s;
+}
+.h-back:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+.h-page-title { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
+
+.h-content { max-width: 680px; margin: 0 auto; }
+.h-seal {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 56px; height: 72px;
+  border: 2px solid var(--vermillion);
+  color: var(--vermillion);
+  font-size: 24px; font-family: var(--serif);
+  font-weight: 900; letter-spacing: 2px;
+  margin: 0 auto 40px; border-radius: 4px;
+  line-height: 1;
+}
+.h-about-block {
+  margin-bottom: 40px; padding: 32px;
+  background: var(--surface);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+}
+.h-about-block:last-child { margin-bottom: 0; }
+.h-about-block h2 {
+  font-size: 20px; font-weight: 700;
+  letter-spacing: 3px; color: var(--ink);
+  margin-bottom: 16px; padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.h-about-block p {
+  font-size: 16px; line-height: 2.2;
+  color: var(--ink-mid); text-align: justify;
+  text-indent: 2em; margin-bottom: 12px;
+}
+.h-about-block p:last-child { margin-bottom: 0; }
+
+@media (max-width: 768px) {
+  .h-root { padding: 24px 16px 80px; }
+  .h-about-block { padding: 20px; }
+}
+</style>

package/template/src/views/PieceView.vue

@@ -5,13 +5,13 @@ import { useBook } from '../composables/useBook'
 import { useTitle } from '../composables/useTitle'
 import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
-import { useAnnotationTooltip } from '../composables/useAnnotationRenderer'
+import { useAnnotationInteraction } from '../composables/useAnnotationInteraction'
 import { useData } from '../composables/useData'
 import VerticalScroll from '../components/VerticalScroll.vue'
 import HorizontalDisplay from '../components/HorizontalDisplay.vue'
 import SectionBlock from '../components/SectionBlock.vue'
 import AnnotationTooltip from '../components/AnnotationTooltip.vue'
-import AnnotationLayerSelector from '../components/AnnotationLayerSelector.vue'
+import AnnotationControlBar from '../components/AnnotationControlBar.vue'
 import SideNav from '../components/SideNav.vue'
 import type { Piece, Annotation, AnnotationLayer } from '../types'
 
@@ -26,7 +26,7 @@ const vScroll = useHorizontalScroll(vPageRef)
 
 const authorPaneOpen = ref(false)
 const selectedAuthorId = ref('')
-const tooltip = reactive(useAnnotationTooltip())
+const interaction = useAnnotationInteraction()
 const titleCollapsed = ref(false)
 const vTitleRef = ref<HTMLElement | null>(null)
 
@@ -61,6 +61,7 @@ const isVertical = computed(() => layout.value === 'vertical')
 const annotationLayers = computed<AnnotationLayer[]>(() => piece.value?.annotationLayers || [])
 const hasLayers = computed(() => annotationLayers.value.length > 1)
 const activeLayerIds = ref<string[]>([])
+const annotationsVisible = ref(true)
 
 function initLayers() {
   if (hasLayers.value && activeLayerIds.value.length === 0) {
@@ -94,7 +95,7 @@ const layerLabels = computed(() => {
 })
 
 const layerAnnotationBlocks = computed(() => {
-  if (!hasLayers.value) return []
+  if (!hasLayers.value || !annotationsVisible.value) return []
   const result: { label: string; text: string }[] = []
   const activeLayers = annotationLayers.value.filter(l => activeLayerIds.value.includes(l.id) && l.id !== 'default')
   for (const layer of activeLayers) {
@@ -152,16 +153,7 @@ const proseSections = computed(() => {
   return result
 })
 
-function handleAnnotationHover(event: MouseEvent, annotations: Annotation[]) {
-  tooltip.show(event, annotations)
-}
-function handleAnnotationLeave() {
-  if (window.innerWidth >= 768) tooltip.hide()
-}
-function handleAnnotationTap(event: MouseEvent, annotations: Annotation[]) {
-  tooltip.toggle(event, annotations)
-}
-function dismissTooltip() { tooltip.hide() }
+
 const { getAuthor, loadShared } = useData()
 await loadShared()
 
@@ -252,41 +244,54 @@ function tcy(n: number): string {
             :verses="piece.verses"
             :author-initial="piece.author?.charAt(0) || '詩'"
             :annotations="mergedAnnotations"
-            @annotation-hover="handleAnnotationHover"
-            @annotation-leave="handleAnnotationLeave"
-            @annotation-tap="handleAnnotationTap"
+            @annotation-hover="interaction.onHover"
+            @annotation-leave="interaction.onLeave"
+            @annotation-tap="interaction.onTap"
             @open-author="openAuthorPane"
           />
         </section>
 
-        <div class="v-section">
+        <SectionBlock
+          v-if="annotationsVisible && piece.sections.annotations"
+          num=""
+          label="注釋"
+          :special="false"
+          :text="piece.sections.annotations"
+          :is-annotations="true"
+          :vertical="true"
+          class="v-section"
+        />
+        <template v-if="hasLayers">
+          <div class="v-layers-inline v-section">
+            <AnnotationControlBar
+              :layers="annotationLayers"
+              :has-annotations="piece.annotations.length > 0"
+              v-model:active-ids="activeLayerIds"
+              v-model:annotations-visible="annotationsVisible"
+            />
+          </div>
           <SectionBlock
+            v-for="block in visibleLayerBlocks"
+            :key="block.label"
             num=""
-            label="注釋"
+            :label="block.label"
             :special="false"
-            :text="piece.sections.annotations || ''"
+            :text="block.text"
             :is-annotations="true"
             :vertical="true"
+            class="v-section"
           />
-          <template v-if="hasLayers">
-            <div class="v-layers-inline">
-              <AnnotationLayerSelector
-                :layers="annotationLayers"
-                v-model:activeIds="activeLayerIds"
-              />
-            </div>
-            <SectionBlock
-              v-for="block in layerAnnotationBlocks"
-              :key="block.label"
-              num=""
-              :label="block.label"
-              :special="false"
-              :text="block.text"
-              :is-annotations="true"
-              :vertical="true"
-            />
-          </template>
-        </div>
+        </template>
+        <SectionBlock
+          v-else-if="piece.annotations.length > 0"
+          num=""
+          label="注釋"
+          :special="false"
+          :text="piece.sections.annotations || ''"
+          :is-annotations="true"
+          :vertical="true"
+          class="v-section"
+        />
 
         <SectionBlock
           v-for="(sec, idx) in proseSections"
@@ -316,11 +321,13 @@ function tcy(n: number): string {
       </div>
 
       <AnnotationTooltip
-        :visible="tooltip.visible"
-        :annotations="tooltip.items"
+        :visible="interaction.visible"
+        :annotations="interaction.items"
         :layer-labels="layerLabels"
-        :style="tooltip.style"
-        @close="dismissTooltip"
+        :style="interaction.style"
+        @close="interaction.dismiss"
+        @tooltip-enter="interaction.onTooltipEnter"
+        @tooltip-leave="interaction.onTooltipLeave"
       />
 
       <Teleport to="body">
@@ -376,16 +383,23 @@ function tcy(n: number): string {
               :author="piece.author"
               :verses="piece.verses"
               :annotations="mergedAnnotations"
-              @annotation-hover="handleAnnotationHover"
-              @annotation-leave="handleAnnotationLeave"
-              @annotation-tap="handleAnnotationTap"
+              @annotation-hover="interaction.onHover"
+              @annotation-leave="interaction.onLeave"
+              @annotation-tap="interaction.onTap"
             />
           </div>
 
           <div class="h-sections">
-            <div v-if="piece.sections.annotations || hasLayers" class="h-ann-section">
+            <div v-if="(piece.sections.annotations && annotationsVisible) || hasLayers" class="h-ann-section">
+              <AnnotationControlBar
+                :layers="annotationLayers"
+                :has-annotations="piece.annotations.length > 0"
+                v-model:active-ids="activeLayerIds"
+                v-model:annotations-visible="annotationsVisible"
+                style="margin-bottom: 16px"
+              />
               <SectionBlock
-                v-if="piece.sections.annotations"
+                v-if="annotationsVisible && piece.sections.annotations"
                 num=""
                 label="注釋"
                 :special="false"
@@ -393,12 +407,6 @@ function tcy(n: number): string {
                 :is-annotations="true"
               />
               <template v-if="hasLayers">
-                <div class="h-layers-inline">
-                  <AnnotationLayerSelector
-                    :layers="annotationLayers"
-                    v-model:activeIds="activeLayerIds"
-                  />
-                </div>
                 <SectionBlock
                   v-for="block in layerAnnotationBlocks"
                   :key="block.label"
@@ -438,11 +446,13 @@ function tcy(n: number): string {
       </div>
 
       <AnnotationTooltip
-        :visible="tooltip.visible"
-        :annotations="tooltip.items"
+        :visible="interaction.visible"
+        :annotations="interaction.items"
         :layer-labels="layerLabels"
-        :style="tooltip.style"
-        @close="dismissTooltip"
+        :style="interaction.style"
+        @close="interaction.dismiss"
+        @tooltip-enter="interaction.onTooltipEnter"
+        @tooltip-leave="interaction.onTooltipLeave"
       />
 
       <Teleport to="body">