@hanology/cham-browser 0.3.9 → 0.4.2

package/template/src/App.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useReadingMode } from './composables/useReadingMode'
+import { useSiteConfig } from './composables/useSiteConfig'
 import ReadingToolbar from './components/ReadingToolbar.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, provide } from 'vue'
 
 const router = useRouter()
 const { toggleLayout, cycleTheme, layout } = useReadingMode()
+const { logoUrl, aboutHtml } = useSiteConfig()
 const isVertical = computed(() => layout.value === 'vertical')
 
+const aboutOpen = ref(false)
+function toggleAbout() { aboutOpen.value = !aboutOpen.value }
+function closeAbout() { aboutOpen.value = false }
+provide('aboutPane', { toggleAbout, closeAbout })
+
 function onKey(event: KeyboardEvent) {
   if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) return
-  if (event.key === 'Escape') router.push('/')
+  if (event.key === 'Escape') {
+    if (aboutOpen.value) { closeAbout(); return }
+    router.push('/')
+  }
   if (event.key === 'v' || event.key === 'V') toggleLayout()
   if (event.key === 't' || event.key === 'T') cycleTheme()
 }
@@ -18,29 +28,103 @@ function onKey(event: KeyboardEvent) {
 
 <template>
   <div @keydown="onKey">
-    <router-view v-slot="{ Component }">
-      <Transition name="page" mode="out-in">
-        <Suspense>
-          <component :is="Component" :key="$route.fullPath" />
-        </Suspense>
-      </Transition>
+    <router-view v-slot="{ Component, route }">
+      <Suspense :key="route.fullPath">
+        <component :is="Component" />
+        <template #fallback>
+          <div class="route-loading"></div>
+        </template>
+      </Suspense>
     </router-view>
     <!-- 橫排模式才顯示浮動設定鈕 -->
     <ReadingToolbar v-if="!isVertical" />
+
+    <!-- About overlay (only if about content is configured) -->
+    <Teleport v-if="aboutHtml" to="body">
+      <div v-if="aboutOpen" class="about-overlay" @click="closeAbout">
+        <div v-if="isVertical" class="about-pane-v" @click.stop>
+          <button class="about-close" @click="closeAbout">✕</button>
+          <div class="about-v-body" v-html="aboutHtml" />
+        </div>
+
+        <div v-else class="about-pane-h" @click.stop>
+          <button class="about-close" @click="closeAbout">✕</button>
+          <img v-if="logoUrl" :src="logoUrl" alt="" class="about-logo" />
+          <div class="about-h-body" v-html="aboutHtml" />
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <style>
-.page-enter-active,
-.page-leave-active {
-  transition: opacity 0.25s ease, transform 0.25s ease;
+.about-overlay {
+  position: fixed; inset: 0;
+  background: rgba(var(--shadow-rgb), 0.3);
+  z-index: 200;
+  display: flex; justify-content: center; align-items: center;
+  animation: aboutFadeIn 0.2s ease;
+}
+@keyframes aboutFadeIn { from { opacity: 0 } to { opacity: 1 } }
+
+.about-close {
+  position: absolute; top: 16px; right: 16px;
+  width: 36px; height: 36px;
+  border: 1px solid var(--border); border-radius: 4px;
+  background: none; font-size: 16px;
+  color: var(--ink-light); cursor: pointer;
+  transition: all 0.15s; z-index: 1;
+}
+.about-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }
+
+/* Horizontal pane */
+.about-pane-h {
+  position: relative;
+  width: min(600px, 90vw);
+  max-height: 85vh;
+  background: var(--paper);
+  border-radius: 12px;
+  padding: 40px;
+  overflow-y: auto;
+  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.15);
+  animation: aboutSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.page-enter-from {
-  opacity: 0;
-  transform: translateY(8px);
+@keyframes aboutSlideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
+
+.about-logo { height: 64px; width: auto; object-fit: contain; margin: 0 auto 32px; display: block }
+.about-h-body {
+  font-size: 15px; line-height: 2.2; color: var(--ink-mid);
+}
+.about-h-body :deep(h2) {
+  font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--ink);
+  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
+}
+.about-h-body :deep(p) {
+  text-align: justify; text-indent: 2em; margin-bottom: 10px;
+}
+.about-h-body :deep(p:last-child) { margin-bottom: 0 }
+.about-h-body :deep(.about-block) {
+  margin-bottom: 32px; padding: 28px;
+  background: var(--surface); border: 1px solid var(--border-light); border-radius: 8px;
+}
+.about-h-body :deep(.about-block:last-child) { margin-bottom: 0 }
+
+/* Vertical pane */
+.about-pane-v {
+  writing-mode: vertical-rl; text-orientation: mixed;
+  position: relative;
+  height: 100vh;
+  background: var(--paper);
+  padding: 32px 28px;
+  overflow-x: auto;
+  box-shadow: 8px 0 32px rgba(var(--shadow-rgb), 0.1);
+  animation: aboutSlideInV 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.page-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
+@keyframes aboutSlideInV { from { transform: translateX(-100%) } to { transform: translateX(0) } }
+.about-pane-v .about-close { position: static; margin-bottom: 20px }
+.about-v-body {
+  font-size: 16px; line-height: 2.4; color: var(--ink-mid);
+  max-height: 80vh; overflow-x: auto;
 }
+.about-v-body :deep(p) { margin-left: 16px; text-indent: 0 }
 </style>

package/template/src/components/AnnotationControlBar.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
   layers: AnnotationLayer[]
   hasAnnotations: boolean
   activeIds: string[]
+  annotationsVisible: boolean
 }>()
 
 const emit = defineEmits<{
@@ -12,16 +13,15 @@ const emit = defineEmits<{
   'update:annotationsVisible': [visible: boolean]
 }>()
 
-const allIds = () => props.layers.map(l => l.id)
-const noneIds = () => [] as string[]
+const hasLayers = () => props.layers.length > 1
 
 function toggleAnnotations() {
-  if (props.activeIds.length > 0) {
-    emit('update:activeIds', noneIds())
+  if (props.annotationsVisible) {
     emit('update:annotationsVisible', false)
+    if (hasLayers()) emit('update:activeIds', [])
   } else {
-    emit('update:activeIds', allIds())
     emit('update:annotationsVisible', true)
+    if (hasLayers()) emit('update:activeIds', props.layers.map(l => l.id))
   }
 }
 
@@ -40,85 +40,155 @@ function toggleLayer(id: string) {
 </script>
 
 <template>
-  <div v-if="hasAnnotations" class="ann-control-bar">
+  <div v-if="hasAnnotations" class="ann-bar">
     <button
-      class="ann-toggle"
-      :class="{ active: activeIds.length > 0 }"
+      class="ann-master"
+      :class="{ active: annotationsVisible }"
       @click="toggleAnnotations"
-    >注</button>
-    <template v-if="layers.length > 1">
-      <span class="ann-bar-sep" />
-      <button
-        v-for="layer in layers"
-        :key="layer.id"
-        :class="['ann-layer-btn', { active: activeIds.includes(layer.id) }]"
-        :title="layer.label"
-        @click="toggleLayer(layer.id)"
-      >
-        {{ layer.shortLabel }}
-      </button>
+    >
+      <span class="ann-master-icon">{{ annotationsVisible ? '✓' : '注' }}</span>
+      <span class="ann-master-text">{{ annotationsVisible ? '注釋' : '顯示注釋' }}</span>
+      <span v-if="hasLayers() && annotationsVisible" class="ann-count">{{ activeIds.length }}/{{ layers.length }}</span>
+    </button>
+    <template v-if="hasLayers() && annotationsVisible">
+      <div class="ann-chips">
+        <button
+          v-for="layer in layers"
+          :key="layer.id"
+          :class="['ann-chip', { active: activeIds.includes(layer.id) }]"
+          :title="layer.label"
+          @click="toggleLayer(layer.id)"
+        >
+          <span class="ann-chip-check">{{ activeIds.includes(layer.id) ? '✓' : '' }}</span>
+          {{ layer.shortLabel }}
+        </button>
+      </div>
     </template>
   </div>
 </template>
 
 <style scoped>
-.ann-control-bar {
+.ann-bar {
   display: flex;
-  align-items: center;
-  gap: 4px;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.ann-toggle {
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--vermillion);
-  border-radius: 4px;
+.ann-master {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  border: 1.5px solid var(--vermillion);
+  border-radius: 20px;
   background: none;
   color: var(--vermillion);
-  font-family: var(--serif);
-  font-size: 14px;
-  font-weight: 700;
+  font-family: var(--sans);
+  font-size: 13px;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.15s;
-  letter-spacing: 0;
+  transition: all 0.2s;
+  letter-spacing: 1px;
+  min-height: 44px;
+  align-self: flex-start;
 }
 
-.ann-toggle.active {
+.ann-master.active {
   background: var(--vermillion);
   color: #fff;
 }
 
-.ann-toggle:hover {
-  border-color: var(--vermillion-light);
+.ann-master:active {
+  transform: scale(0.97);
 }
 
-.ann-bar-sep {
-  width: 1px;
-  height: 16px;
-  background: var(--border);
-  margin: 0 2px;
+.ann-master:hover {
+  box-shadow: 0 2px 12px rgba(194, 58, 43, 0.15);
+}
+
+.ann-master-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  flex-shrink: 0;
 }
 
-.ann-layer-btn {
+.ann-master.active .ann-master-icon {
+  border-color: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.ann-master-text {
+  white-space: nowrap;
+}
+
+.ann-count {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-left: 2px;
+}
+
+.ann-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-left: 4px;
+}
+
+.ann-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
   border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 3px 10px;
-  font-size: 12px;
+  border-radius: 16px;
   background: var(--surface);
   color: var(--ink-mid);
-  cursor: pointer;
-  transition: all 0.15s;
   font-family: var(--sans);
+  font-size: 12px;
   letter-spacing: 1px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-height: 36px;
 }
 
-.ann-layer-btn:hover {
+.ann-chip:hover {
   border-color: var(--gold);
+  color: var(--ink);
 }
 
-.ann-layer-btn.active {
+.ann-chip.active {
   background: var(--ink);
   color: var(--paper);
   border-color: var(--ink);
 }
+
+.ann-chip:active {
+  transform: scale(0.96);
+}
+
+.ann-chip-check {
+  font-size: 11px;
+  width: 12px;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .ann-master {
+    padding: 10px 24px;
+    font-size: 14px;
+  }
+  .ann-chips {
+    gap: 6px;
+  }
+  .ann-chip {
+    padding: 8px 16px;
+    font-size: 13px;
+  }
+}
 </style>