@hanology/cham-browser 0.4.57 → 0.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.4.57",
+  "version": "0.4.59",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/components/PartBlock.vue

@@ -127,17 +127,18 @@ const sourceLabel = (() => {
 :deep(.ann-target) {
   border-bottom: 2px solid var(--vermillion);
   cursor: help;
-  transition: background 0.15s;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 :deep(.ann-target.ann-overlap) {
   border-bottom-width: 3px;
   border-bottom-style: double;
 }
-
 :deep(.ann-target:hover) {
-  background: rgba(194, 58, 43, 0.08);
+  background: rgba(194, 58, 43, 0.1);
+  box-shadow: 0 2px 8px rgba(194, 58, 43, 0.08);
 }
-
 :deep(.ann-num) {
   font-size: 10px;
   color: var(--vermillion);
@@ -147,13 +148,47 @@ const sourceLabel = (() => {
   margin-right: 1px;
   letter-spacing: 0;
 }
-
 :deep(.ann-target.pronunciation) {
   border-bottom-color: var(--jade);
 }
-
 :deep(.ann-target.pronunciation:hover) {
-  background: rgba(58, 107, 94, 0.08);
+  background: rgba(58, 107, 94, 0.1);
+  box-shadow: 0 2px 8px rgba(58, 107, 94, 0.08);
+}
+: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.1);
+  box-shadow: 0 2px 8px rgba(58, 90, 140, 0.08);
+}
+:deep(.ann-target.place:hover) {
+  background: rgba(139, 105, 20, 0.1);
+  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
+}
+:deep(.ann-target.event:hover) {
+  background: rgba(107, 76, 138, 0.1);
+  box-shadow: 0 2px 8px rgba(107, 76, 138, 0.08);
+}
+:deep(.ann-target.date:hover) {
+  background: rgba(42, 122, 122, 0.1);
+  box-shadow: 0 2px 8px rgba(42, 122, 122, 0.08);
+}
+:deep(.ann-target.allusion:hover) {
+  background: rgba(181, 101, 29, 0.1);
+  box-shadow: 0 2px 8px rgba(181, 101, 29, 0.08);
 }
 
 .part-block--vertical :deep(.ann-target) {
@@ -166,14 +201,57 @@ const sourceLabel = (() => {
   border-left-style: double;
   padding-left: 3px;
 }
-
 .part-block--vertical :deep(.ann-target.pronunciation) {
   border-left-color: var(--jade);
 }
-
+.part-block--vertical :deep(.ann-target.pronunciation.semantic) {
+  border-left-color: var(--gold);
+}
+.part-block--vertical :deep(.ann-target.person) {
+  border-left-color: var(--ann-person);
+}
+.part-block--vertical :deep(.ann-target.place) {
+  border-left-color: var(--ann-place);
+}
+.part-block--vertical :deep(.ann-target.event) {
+  border-left-color: var(--ann-event);
+}
+.part-block--vertical :deep(.ann-target.date) {
+  border-left-color: var(--ann-date);
+}
+.part-block--vertical :deep(.ann-target.allusion) {
+  border-left-color: var(--ann-allusion);
+}
+.part-block--vertical :deep(.ann-target:hover) {
+  background: rgba(194, 58, 43, 0.1);
+  box-shadow: 0 -2px 8px rgba(194, 58, 43, 0.08);
+}
+.part-block--vertical :deep(.ann-target.pronunciation:hover) {
+  background: rgba(58, 107, 94, 0.1);
+  box-shadow: 0 -2px 8px rgba(58, 107, 94, 0.08);
+}
+.part-block--vertical :deep(.ann-target.person:hover) {
+  background: rgba(58, 90, 140, 0.1);
+  box-shadow: 0 -2px 8px rgba(58, 90, 140, 0.08);
+}
+.part-block--vertical :deep(.ann-target.place:hover) {
+  background: rgba(139, 105, 20, 0.1);
+  box-shadow: 0 -2px 8px rgba(139, 105, 20, 0.08);
+}
+.part-block--vertical :deep(.ann-target.event:hover) {
+  background: rgba(107, 76, 138, 0.1);
+  box-shadow: 0 -2px 8px rgba(107, 76, 138, 0.08);
+}
+.part-block--vertical :deep(.ann-target.date:hover) {
+  background: rgba(42, 122, 122, 0.1);
+  box-shadow: 0 -2px 8px rgba(42, 122, 122, 0.08);
+}
+.part-block--vertical :deep(.ann-target.allusion:hover) {
+  background: rgba(181, 101, 29, 0.1);
+  box-shadow: 0 -2px 8px rgba(181, 101, 29, 0.08);
+}
 .part-block--vertical :deep(.ann-num) {
   font-size: 0.45em;
-  text-combine-upright: all;
   text-align: end;
   letter-spacing: 0;
   vertical-align: baseline;

package/template/src/views/LibraryHome.vue

@@ -91,20 +91,23 @@ function openBook(bookId: string) {
           <div class="v-divider"></div>
         </section>
 
-        <section class="v-cards-col">
-          <div
-            v-for="book in books"
-            :key="book.id"
-            class="v-book-card"
-            @click="openBook(book.id)"
-          >
-            <div class="v-book-accent"></div>
-            <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">{{ t('stat.pieceCount', { count: book.count }) }}</span>
+        <section class="v-shelf">
+          <template v-for="group in groupedBooks" :key="group.category">
+            <div class="v-shelf-cat">
+              <span class="v-cat-label">{{ group.category }}</span>
             </div>
-          </div>
+            <div
+              v-for="book in group.books"
+              :key="book.id"
+              class="v-spine"
+              :class="'v-spine-' + bookCategory(book).replace(/\s/g, '-')"
+              @click="openBook(book.id)"
+            >
+              <span class="v-spine-accent"></span>
+              <span class="v-spine-title">{{ book.title }}</span>
+              <span class="v-spine-badge">{{ book.count }}</span>
+            </div>
+          </template>
         </section>
       </div>
     </div>
@@ -189,71 +192,126 @@ function openBook(bookId: string) {
   margin-left: 20px;
 }
 
-.v-cards-col {
+.v-shelf {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  gap: 0;
-  padding: 40px 16px;
   height: 100vh;
   box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
-  align-items: flex-start;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
 }
+.v-shelf::-webkit-scrollbar { height: 3px; }
+.v-shelf::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
-.v-book-card {
+/* ─── Category separator ─── */
+.v-shelf-cat {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 24px 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 6px;
+  flex-shrink: 0;
+}
+.v-cat-label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 4px;
+  color: var(--ink-faint);
+  padding: 8px 3px;
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+  white-space: nowrap;
+}
+
+/* ─── Book spine ─── */
+.v-spine {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100vh;
+  width: 44px;
+  padding: 16px 0;
   border-left: 1px solid var(--border-light);
   cursor: pointer;
-  transition: all 0.3s ease;
   position: relative;
+  box-sizing: border-box;
+  transition: background 0.25s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+  flex-shrink: 0;
 }
-.v-book-card:hover {
-  background: var(--surface);
+.v-spine:hover {
+  background: linear-gradient(90deg, rgba(var(--shadow-rgb), 0.04), rgba(var(--shadow-rgb), 0.01));
+  width: 56px;
+}
+.v-spine:active {
+  transform: scale(0.97);
 }
-.v-book-accent {
+
+.v-spine-accent {
   position: absolute;
-  top: 0; right: 0;
-  width: 0; height: 3px;
-  background: var(--vermillion);
-  transition: width 0.35s ease;
-}
-.v-book-card:hover .v-book-accent { width: 100%; }
-.v-book-title {
-  font-size: 32px; font-weight: 900;
-  letter-spacing: 8px; color: var(--ink);
-  margin-left: 16px; padding-left: 16px;
-  border-left: 3px solid var(--vermillion);
-  line-height: 1.6;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 0;
+  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.v-book-sub {
+.v-spine:hover .v-spine-accent {
+  height: 100%;
+}
+
+/* Accent colors per category */
+.v-spine .v-spine-accent { background: var(--vermillion); }
+.v-spine.v-spine-教科書 .v-spine-accent { background: var(--gold); }
+.v-spine.v-spine-四庫全書 .v-spine-accent { background: var(--jade); }
+
+.v-spine-title {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
   font-size: 14px;
-  color: var(--ink-light);
+  font-weight: 700;
   letter-spacing: 3px;
-  margin-left: 12px;
-  font-family: var(--sans);
+  color: var(--ink);
+  line-height: 1.6;
+  margin: 12px 0;
+  white-space: nowrap;
+  transition: color 0.2s ease;
 }
-.v-book-stats {
-  margin-left: 12px;
-  padding-left: 12px;
-  border-left: 1px solid var(--border);
+.v-spine:hover .v-spine-title {
+  color: var(--vermillion);
 }
-.v-book-count {
-  font-size: 13px;
-  color: var(--ink-faint);
-  letter-spacing: 2px;
+.v-spine.v-spine-教科書:hover .v-spine-title { color: var(--gold); }
+.v-spine.v-spine-四庫全書:hover .v-spine-title { color: var(--jade); }
+
+.v-spine-badge {
+  writing-mode: horizontal-tb;
   font-family: var(--sans);
-  padding: 2px 8px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--ink-faint);
   background: var(--surface-warm);
-  border-radius: 4px;
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  padding: 1px 6px;
+  margin-top: auto;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.v-spine:hover .v-spine-badge {
+  opacity: 1;
 }
 
 /* ═══════ 橫排模式 ═══════ */
@@ -403,6 +461,9 @@ function openBook(bookId: string) {
 @media (max-width: 768px) {
   .v-page { padding: 0 16px; }
   .v-title { font-size: 36px; letter-spacing: 10px; }
+  .v-spine { width: 38px; }
+  .v-spine:hover { width: 48px; }
+  .v-spine-title { font-size: 13px; letter-spacing: 2px; }
   .lib-root { padding: 40px 16px 80px; }
   .lib-hero { margin-bottom: 32px; }
   .lib-hero h1 { font-size: 28px; letter-spacing: 4px; }

package/template/src/views/PieceView.vue

@@ -789,7 +789,8 @@ function tcy(n: number): string {
   flex-direction: row-reverse;
   align-items: flex-start;
   gap: 0;
-  max-height: calc(100vh - 100px);
+  height: 100vh;
+  box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 20px 16px;