@hanology/cham-browser 0.3.9 → 0.4.2

package/template/src/styles/main.css

@@ -15,6 +15,11 @@
   --gold: #9a7d3a;
   --gold-light: #c9a84c;
   --jade: #3a6b5e;
+  --ann-person: #3a5a8c;
+  --ann-place: #8b6914;
+  --ann-event: #6b4c8a;
+  --ann-date: #2a7a7a;
+  --ann-allusion: #b5651d;
   --border: #d8cdb8;
   --border-light: #e8e0d0;
   --shadow-rgb: 26,26,26;
@@ -36,6 +41,11 @@
   --gold: #8a6d2a;
   --gold-light: #b89540;
   --jade: #2d5a4e;
+  --ann-person: #3a5a8c;
+  --ann-place: #8b6914;
+  --ann-event: #6b4c8a;
+  --ann-date: #2a7a7a;
+  --ann-allusion: #b5651d;
   --border: #c9b896;
   --border-light: #d8cab0;
   --shadow-rgb: 74,63,46;
@@ -57,6 +67,11 @@
   --gold: #c9a84c;
   --gold-light: #d8b860;
   --jade: #5aaa98;
+  --ann-person: #6a8ab4;
+  --ann-place: #b8943a;
+  --ann-event: #9a7cb4;
+  --ann-date: #5ab4b4;
+  --ann-allusion: #d4843a;
   --border: #48484a;
   --border-light: #555557;
   --shadow-rgb: 0,0,0;
@@ -78,6 +93,11 @@
   --gold: #e8c840;
   --gold-light: #f0d860;
   --jade: #40c8a8;
+  --ann-person: #6a8ab4;
+  --ann-place: #b8943a;
+  --ann-event: #9a7cb4;
+  --ann-date: #5ab4b4;
+  --ann-allusion: #d4843a;
   --border: #333333;
   --border-light: #444444;
   --shadow-rgb: 0,0,0;
@@ -196,3 +216,71 @@ button { font-family: inherit; }
 @media (max-width: 768px) {
   :root { --nav-width: 44px; }
 }
+
+/* ===== VERTICAL PAGE LAYOUT ===== */
+.v-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: row-reverse;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-right: var(--nav-width, 56px);
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
+  scroll-snap-type: x proximity;
+}
+.v-page::-webkit-scrollbar { height: 4px; }
+.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
+
+/* ===== VIEW LOADING STATE ===== */
+.v-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 16px;
+}
+.v-loading .seal {
+  width: 72px; height: 72px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  animation: pulse 2s ease-in-out infinite;
+}
+.v-loading .char {
+  font-family: var(--serif);
+  font-size: 36px; font-weight: 900;
+  color: var(--vermillion);
+  line-height: 1;
+}
+.v-loading .label {
+  font-size: 13px;
+  color: var(--ink-faint);
+  letter-spacing: 4px;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; transform: scale(0.96); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+/* ===== FULL-PAGE LOADING (LibraryHome, PieceView redirect) ===== */
+.page-loading {
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  height: 100vh;
+}
+.page-loading-seal {
+  width: 56px; height: 56px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px; font-weight: 900;
+  color: var(--vermillion);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.page-loading-logo {
+  width: 56px; height: auto;
+  object-fit: contain;
+  animation: pulse 1.2s ease-in-out infinite;
+}

package/template/src/types.ts

@@ -140,7 +140,7 @@ export interface Piece {
   title: string
   author: string
   authorId: string
-  dynasty: string
+  era: string
   genre: BookGenre
   verses: VerseLine[]
   sections: Record<string, string>
@@ -162,9 +162,17 @@ export interface Author {
   '@id': string
   '@type': string
   name: string
-  dynasty: string
-  poemCount: number
+  era: string
+  workCount: number
   bio?: string
+  born?: string
+  died?: string
+  courtesyName?: string
+  artName?: string
+  wikidata?: string
+  ctextId?: string
+  wikipediaZh?: string
+  wikipediaEn?: string
 }
 
 export interface Dynasty {
@@ -172,5 +180,5 @@ export interface Dynasty {
   '@type': string
   name: string
   authors: string[]
-  poemCount: number
+  workCount: number
 }

package/template/src/views/AuthorView.vue

@@ -50,7 +50,7 @@ function goHome() { router.push('/') }
         <section class="v-author-info">
           <div class="v-seal">{{ authorName.charAt(0) }}</div>
           <h1 class="v-name">{{ authorName }}</h1>
-          <span v-if="author.dynasty" class="v-dynasty">{{ author.dynasty }}</span>
+          <span v-if="author.era" class="v-era">{{ author.era }}</span>
           <span class="v-count">{{ authorPieces.length }} 篇收錄作品</span>
         </section>
 
@@ -83,7 +83,7 @@ function goHome() { router.push('/') }
               <span class="h-author-name">{{ authorName }}</span>
             </div>
             <div class="h-controls">
-              <span class="h-tag">{{ author.dynasty || '未知朝代' }}</span>
+              <span class="h-tag">{{ author.era || '未知朝代' }}</span>
               <span class="h-tag">{{ authorPieces.length }} 篇</span>
             </div>
           </div>
@@ -95,7 +95,7 @@ function goHome() { router.push('/') }
             <div class="h-info">
               <h1 class="h-name">{{ authorName }}</h1>
               <div class="h-meta">
-                <span v-if="author.dynasty" class="h-dynasty">{{ author.dynasty }}</span>
+                <span v-if="author.era" class="h-era">{{ author.era }}</span>
                 <span class="h-count">{{ authorPieces.length }} 篇收錄作品</span>
               </div>
             </div>
@@ -174,7 +174,7 @@ function goHome() { router.push('/') }
   letter-spacing: 10px; color: var(--ink);
   margin-left: 20px;
 }
-.v-dynasty {
+.v-era {
   font-size: 20px; color: var(--gold);
   font-weight: 600; letter-spacing: 4px;
   margin-left: 12px;
@@ -286,7 +286,7 @@ function goHome() { router.push('/') }
 }
 .h-name { font-size: 36px; font-weight: 900; letter-spacing: 6px; color: var(--ink); }
 .h-meta { display: flex; gap: 16px; margin-top: 8px; font-family: var(--sans); font-size: 14px; }
-.h-dynasty { color: var(--gold); font-weight: 600; letter-spacing: 2px; }
+.h-era { color: var(--gold); font-weight: 600; letter-spacing: 2px; }
 .h-count { color: var(--ink-faint); letter-spacing: 1px; }
 
 .h-bio {

package/template/src/views/BookHome.vue

@@ -5,6 +5,7 @@ import { useBook } from '../composables/useBook'
 import { useTitle } from '../composables/useTitle'
 import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
+import { useI18n } from '../composables/useI18n'
 import PoemCard from '../components/PoemCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
@@ -22,6 +23,7 @@ const { layout } = useReadingMode()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
+const { t } = useI18n()
 
 const filtered = computed(() => {
   const q = searchQuery.value.toLowerCase()
@@ -72,11 +74,11 @@ function scrollToCatalog() {
       </section>
 
       <section class="v-catalog-col">
-        <span class="v-ch-title">篇 章 目 錄</span>
+        <span class="v-ch-title">{{ t('catalog.title') }}</span>
         <span class="v-ch-line"> </span>
-        <span class="v-count">共 {{ filtered.length }} 篇</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="搜索詩題、作者…" />
+          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" />
         </span>
       </section>
 
@@ -104,28 +106,28 @@ function scrollToCatalog() {
         <div class="h-stats">
           <div class="h-stat-block">
             <div class="h-stat-num">{{ pieces.length }}</div>
-            <div class="h-stat-label">篇詩文</div>
+            <div class="h-stat-label">{{ t('stat.piecePoems') }}</div>
           </div>
           <div class="h-stat-block">
             <div class="h-stat-num">{{ authorCount }}</div>
-            <div class="h-stat-label">位作者</div>
+            <div class="h-stat-label">{{ t('stat.authorsLabel') }}</div>
           </div>
         </div>
         <p v-if="meta?.publisher" class="h-publisher">{{ meta.publisher }}</p>
         <button class="h-cta" @click="scrollToCatalog">
-          進 入 文 庫 ↓
+          {{ t('catalog.enterLibrary') }}
         </button>
       </div>
     </section>
 
     <section class="h-catalog">
       <div class="h-catalog-header">
-        <h2>篇 章 目 錄</h2>
+        <h2>{{ t('catalog.title') }}</h2>
         <div class="h-line"></div>
         <p v-if="meta?.publisher">{{ meta.publisher }}</p>
       </div>
       <div class="h-filter">
-        <input v-model="searchQuery" class="h-search" placeholder="搜索詩題、作者…" />
+        <input v-model="searchQuery" class="h-search" :placeholder="t('catalog.search')" />
       </div>
       <div class="h-grid">
         <PoemCard
@@ -137,6 +139,10 @@ function scrollToCatalog() {
           @click="openPiece(piece.num)"
         />
       </div>
+      <div v-if="searchQuery && filtered.length === 0" class="h-empty">
+        <span class="h-empty-icon">🔍</span>
+        <p>{{ t('catalog.noResults', { query: searchQuery }) }}</p>
+      </div>
     </section>
 
     <BackToTop />
@@ -148,20 +154,9 @@ function scrollToCatalog() {
 /* ═══════ 直排模式 ═══════ */
 
 .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: linear-gradient(90deg, var(--paper) 0%, var(--paper-warm) 100%);
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
-  scroll-snap-type: x proximity;
 }
-.v-page::-webkit-scrollbar { height: 4px; }
-.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-hero {
   writing-mode: vertical-rl;
@@ -367,10 +362,31 @@ function scrollToCatalog() {
   animation: cardEnter 0.4s var(--ease-out-expo) both;
 }
 
+.h-empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--ink-faint);
+  font-family: var(--sans);
+  font-size: 15px;
+  letter-spacing: 1px;
+}
+.h-empty-icon {
+  display: block;
+  font-size: 40px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
 @media (max-width: 768px) {
-  .h-stats { gap: 24px; }
+  .h-hero { min-height: 80vh; height: auto; padding: 60px 16px; }
+  .h-ornament { font-size: 32px; letter-spacing: 12px; margin-bottom: 20px; }
+  .h-subtitle { margin-bottom: 32px; }
+  .h-divider { margin-bottom: 32px; }
+  .h-stats { gap: 24px; margin-bottom: 32px; }
   .h-stat-num { font-size: 28px; }
-  .h-catalog { padding: 40px 20px; }
+  .h-publisher { margin-bottom: 32px; }
+  .h-cta { padding: 12px 32px; font-size: 14px; letter-spacing: 2px; }
+  .h-catalog { padding: 40px 16px; }
   .h-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
   .h-search { width: 100%; }
   .v-page { padding: 0 16px; }
@@ -380,4 +396,12 @@ function scrollToCatalog() {
   }
   .v-search { height: 160px; }
 }
+
+@media (max-width: 480px) {
+  .h-hero { min-height: 70vh; }
+  .h-title { letter-spacing: 6px; }
+  .h-cta { width: 80%; justify-content: center; }
+  .h-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
+  .h-catalog-header h2 { font-size: 22px; }
+}
 </style>

package/template/src/views/LibraryHome.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { useLibrary } from '../composables/useLibrary'
 import { useBook } from '../composables/useBook'
 import { useTitle } from '../composables/useTitle'
 import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
+import { useI18n } from '../composables/useI18n'
 import BookCard from '../components/BookCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
@@ -13,10 +14,14 @@ import BackToTop from '../components/BackToTop.vue'
 import { useSiteConfig } from '../composables/useSiteConfig'
 import type { BookMeta } from '../types'
 
+const aboutPane = inject<{ toggleAbout: () => void; closeAbout: () => void }>('aboutPane')
+
 const { scale, books, singleBook, loadLibrary } = useLibrary()
 await loadLibrary()
 
-useTitle('古典詩文圖書館')
+const { siteTitle, siteSubtitle, aboutHtml, logoUrl } = useSiteConfig()
+const displayTitle = siteTitle || 'CHAM'
+useTitle(displayTitle)
 
 // Single-book: redirect to book home
 if (scale.value === 'single-book' && singleBook.value) {
@@ -37,27 +42,20 @@ if (scale.value === 'single-piece' && singleBook.value) {
 
 const router = useRouter()
 const { layout } = useReadingMode()
-const { logoUrl } = useSiteConfig()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
-
-const genreLabel: Record<string, string> = {
-  poetry: '詩歌',
-  prose: '散文',
-  mixed: '綜合',
-  drama: '戲曲',
-}
+const { t } = useI18n()
 
 function bookCategory(book: BookMeta): string {
-  if (book.id.startsWith('skqs-')) return '四庫全書'
-  if (book.id === 'primary' || book.id === 'primary-culture' || book.id === 'secondary' || book.id === 'nss') return '教材'
-  return '古典文本'
+  if (book.id.startsWith('skqs-')) return t('genre.fourTreasuries')
+  if (book.id === 'primary' || book.id === 'primary-culture' || book.id === 'secondary' || book.id === 'nss') return t('genre.textbooks')
+  return t('genre.classicalText')
 }
 
 const groupedBooks = computed(() => {
   const groups = new Map<string, BookMeta[]>()
-  const order = ['教材', '古典文本', '四庫全書']
+  const order = [t('genre.textbooks'), t('genre.classicalText'), t('genre.fourTreasuries')]
   for (const book of books.value) {
     const cat = bookCategory(book)
     if (!groups.has(cat)) groups.set(cat, [])
@@ -70,23 +68,29 @@ const groupedBooks = computed(() => {
 
 const totalPieces = computed(() => books.value.reduce((sum, b) => sum + b.count, 0))
 
+const spacedTitle = computed(() => displayTitle.split('').join(' '))
+
 function openBook(bookId: string) {
   router.push(`/${bookId}`)
 }
 </script>
 
 <template>
-  <div v-if="scale === 'library'">
+  <div v-if="scale !== 'library'" class="page-loading">
+    <img v-if="logoUrl" :src="logoUrl" alt="" class="page-loading-logo" />
+    <div v-else class="page-loading-seal">文</div>
+  </div>
+  <div v-else>
     <!-- ═══════ 直排模式 ═══════ -->
     <div v-if="isVertical" class="v-root">
       <SideNav @home="router.push('/')" @back="router.push('/')" />
       <div ref="vPageRef" class="v-page">
-        <div class="v-about-col">
-          <router-link to="/about" class="v-about-link">關 於</router-link>
+        <div v-if="aboutHtml" class="v-about-col">
+          <button class="v-about-link" @click="aboutPane?.toggleAbout()">{{ t('nav.about') }}</button>
         </div>
         <section class="v-hero">
-          <h1 class="v-title">古 典 詩 文 圖 書 館</h1>
-          <p class="v-subtitle">Classical Chinese Text Library</p>
+          <h1 class="v-title">{{ spacedTitle }}</h1>
+          <p v-if="siteSubtitle" class="v-subtitle">{{ siteSubtitle }}</p>
           <div class="v-divider"></div>
         </section>
 
@@ -101,7 +105,7 @@ function openBook(bookId: string) {
             <h2 class="v-book-title">{{ book.title }}</h2>
             <p v-if="book.subtitle" class="v-book-sub">{{ book.subtitle }}</p>
             <div class="v-book-stats">
-              <span class="v-book-count">{{ book.count }} 篇</span>
+              <span class="v-book-count">{{ t('stat.pieceCount', { count: book.count }) }}</span>
             </div>
           </div>
         </section>
@@ -112,15 +116,14 @@ function openBook(bookId: string) {
     <div v-else class="lib-root">
       <header class="lib-hero">
         <img v-if="logoUrl" :src="logoUrl" alt="" class="lib-logo" />
-        <div v-else class="lib-seal">漢流</div>
-        <h1>古典詩文圖書館</h1>
-        <p class="lib-subtitle">Classical Chinese Text Library</p>
+        <div v-else class="lib-seal">{{ displayTitle.slice(0, 2) }}</div>
+        <h1>{{ displayTitle }} <button v-if="aboutHtml" class="lib-about-link" @click="aboutPane?.toggleAbout()">{{ t('nav.about') }}</button></h1>
+        <p v-if="siteSubtitle" class="lib-subtitle">{{ siteSubtitle }}</p>
         <div class="lib-stats-bar">
-          <span class="lib-stat">{{ books.length }} 部</span>
+          <span class="lib-stat">{{ books.length }} {{ t('stat.books') }}</span>
           <span class="lib-stat-sep">·</span>
-          <span class="lib-stat">{{ totalPieces }} 篇</span>
+          <span class="lib-stat">{{ totalPieces }} {{ t('stat.pieces') }}</span>
         </div>
-        <router-link to="/about" class="lib-about-link">關於</router-link>
       </header>
       <div v-for="group in groupedBooks" :key="group.category" class="lib-group">
         <h2 class="lib-group-title">{{ group.category }}</h2>
@@ -136,11 +139,11 @@ function openBook(bookId: string) {
             <div class="lib-card-body">
               <div class="lib-card-top">
                 <h3 class="lib-card-title">{{ book.title }}</h3>
-                <span class="lib-card-genre">{{ genreLabel[book.genre] || book.genre }}</span>
+                <span class="lib-card-genre">{{ bookCategory(book) }}</span>
               </div>
               <p v-if="book.subtitle" class="lib-card-sub">{{ book.subtitle }}</p>
               <div class="lib-card-stats">
-                <span class="lib-card-count">{{ book.count }} 篇</span>
+                <span class="lib-card-count">{{ t('stat.pieceCount', { count: book.count }) }}</span>
               </div>
             </div>
           </div>
@@ -156,20 +159,9 @@ function openBook(bookId: string) {
 /* ═══════ 直排模式 ═══════ */
 
 .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: linear-gradient(90deg, var(--paper) 0%, var(--paper-warm) 100%);
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
-  scroll-snap-type: x proximity;
 }
-.v-page::-webkit-scrollbar { height: 4px; }
-.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-hero {
   writing-mode: vertical-rl;
@@ -201,6 +193,8 @@ function openBook(bookId: string) {
   padding: 12px 8px;
   border: 1px solid var(--border-light);
   border-radius: 2px;
+  background: none;
+  cursor: pointer;
   transition: all 0.2s;
 }
 .v-about-link:hover {
@@ -353,16 +347,17 @@ function openBook(bookId: string) {
 
 .lib-about-link {
   display: inline-block;
-  margin-top: 16px;
   font-family: var(--sans);
   font-size: 13px;
   color: var(--ink-faint);
   letter-spacing: 2px;
-  text-decoration: none;
   padding: 4px 12px;
   border: 1px solid var(--border-light);
   border-radius: 4px;
+  background: none;
+  cursor: pointer;
   transition: all 0.2s;
+  vertical-align: middle;
 }
 .lib-about-link:hover {
   color: var(--ink);
@@ -455,12 +450,15 @@ function openBook(bookId: string) {
   .v-page { padding: 0 16px; }
   .v-title { font-size: 36px; letter-spacing: 10px; }
   .lib-root { padding: 40px 16px 80px; }
+  .lib-hero { margin-bottom: 32px; }
   .lib-hero h1 { font-size: 28px; letter-spacing: 4px; }
+  .lib-logo { height: 48px; margin-bottom: 16px; }
   .lib-grid {
     grid-template-columns: 1fr 1fr;
     gap: 8px;
   }
   .lib-card { padding: 14px; }
+  .lib-card:active { transform: scale(0.98); }
   .lib-card-title { font-size: 18px; letter-spacing: 2px; }
   .lib-card-genre { display: none; }
   .lib-card-sub { font-size: 12px; margin-bottom: 8px; }