@hanology/cham-browser 0.3.8 → 0.4.1

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; }