填充实际业务代码

api-v12/resources/css/components/_card-book.css

@@ -1,23 +1,199 @@
 /* resources/css/components/_card-book.css
-   书籍卡片组件。支持 vertical（封面上、标题下）和 horizontal（封面左、标题右）两种布局。
-   来源：main.css 的 .book-card / .book-cover 段落。
+   书籍封面组件（.book-cover）+ 纵向书籍卡片（.card-book）。
+   .book-cover 从 _anthology.css 提取，供 anthology / tipitaka 共用。
 */
 
-.book-card {
-    transition: transform 0.2s;
+/* ══════════════════════════════════════════
+   一、书籍封面（.book-cover）
+   ══════════════════════════════════════════ */
+
+.book-cover {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 尺寸 */
+.book-cover--sm { width: 34px;  min-width: 34px;  height: 46px; }
+.book-cover--md { width: 130px; min-width: 130px; height: 180px; }
+.book-cover--lg { width: 155px; min-width: 155px; height: 215px; border-radius: 3px 9px 9px 3px; }
+
+/* 3D 书脊 */
+.book-cover--3d {
+    box-shadow:
+        -4px 0 0 rgba(0,0,0,.3),
+        -6px 4px 14px rgba(0,0,0,.4),
+        4px 4px 18px rgba(0,0,0,.3);
+}
+
+.book-cover--3d::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 13px;
+    background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,.1));
+    border-radius: 3px 0 0 3px;
+    z-index: 2;
+}
+
+/* 纹理叠加 */
+.book-cover::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+        45deg, transparent, transparent 8px,
+        rgba(255,255,255,.015) 8px, rgba(255,255,255,.015) 9px
+    );
+    z-index: 1;
+}
+
+/* 图片封面 */
+.book-cover__img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 文字封面 */
+.book-cover__text {
+    position: relative;
+    z-index: 3;
+    text-align: center;
+    padding: 0 .5rem;
+}
+
+.book-cover__title {
+    font-family: 'Noto Serif SC', 'Noto Serif', Georgia, serif;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    line-height: 1.6;
+    letter-spacing: .12em;
+    word-break: break-all;
+}
+
+.book-cover--sm .book-cover__title {
+    font-size: .6rem;
+    letter-spacing: .04em;
+    line-height: 1.3;
+}
+
+.book-cover__divider {
+    width: 28px;
+    height: 1px;
+    background: var(--wp-brand);
+    margin: .5rem auto;
+}
+
+.book-cover__subtitle {
+    font-size: .65rem;
+    color: rgba(255,255,255,.45);
+    letter-spacing: .04em;
+}
+
+/* ══════════════════════════════════════════
+   二、纵向书籍卡片（.card-book）
+   tipitaka 列表页使用
+   ══════════════════════════════════════════ */
+
+.card-book {
+    transition: transform 0.2s, box-shadow 0.2s;
 }
 
-.book-card:hover {
+.card-book:hover {
     transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,.1);
 }
 
-.book-cover {
+.card-book__link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.card-book__link:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* 封面撑满卡片宽度 */
+.card-book .book-cover--md {
+    width: 100%;
+    min-width: unset;
     height: 200px;
-    object-fit: cover;
+    border-radius: var(--tblr-border-radius);
 }
 
 @media (max-width: 768px) {
-    .book-cover {
-        height: 150px;
+    .card-book .book-cover--md { height: 150px; }
+}
+
+.card-book__info { padding: .75rem 0 0; }
+
+.card-book__title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--tblr-body-color);
+    margin-bottom: .25rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.card-book:hover .card-book__title { color: var(--tblr-primary); }
+
+.card-book__author,
+.card-book__publisher {
+    font-size: .8125rem;
+    color: var(--tblr-secondary);
+    margin-bottom: .25rem;
+}
+
+.card-book__publisher-link {
+    color: var(--tblr-primary);
+    text-decoration: none;
+}
+
+.card-book__publisher-link:hover { text-decoration: underline; }
+
+.card-book__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: .375rem;
+}
+
+.card-book__badge {
+    display: inline-block;
+    padding: 2px 8px;
+    background: var(--tblr-bg-surface-secondary);
+    border: 1px solid var(--tblr-border-color);
+    border-radius: 20px;
+    font-size: .6875rem;
+    color: var(--tblr-secondary);
+}
+
+/* ══════════════════════════════════════════
+   三、书籍网格
+   ══════════════════════════════════════════ */
+
+.book-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1.25rem;
+}
+
+@media (max-width: 575px) {
+    .book-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: .875rem;
     }
 }

api-v12/resources/css/components/_card.css

@@ -1,5 +1,287 @@
 /* resources/css/components/_card.css
-   通用卡片（title + list 结构）。
-   wiki 专属卡片（.wiki-card、.wiki-sidebar-section）在 modules/_wiki.css 中定义。
-   此文件预留其他栏目卡片扩展。
+   全站通用卡片、侧边栏、列表组件。
+   从 _wiki.css 提取，供 wiki / tipitaka / anthology / search 共用。
+   wiki 专属样式（质量徽章、条目头部、term popover 等）保留在 modules/_wiki.css。
 */
+
+/* ══════════════════════════════════════════
+   一、通用卡片
+   ══════════════════════════════════════════ */
+
+.wiki-card {
+    background: var(--tblr-bg-surface);
+    border: 1px solid var(--tblr-border-color);
+    border-radius: var(--tblr-border-radius-lg);
+    padding: 1.5rem;
+}
+
+/* ══════════════════════════════════════════
+   二、侧边栏区块
+   ══════════════════════════════════════════ */
+
+.wiki-sidebar-section {
+    background: var(--tblr-bg-surface);
+    border: 1px solid var(--tblr-border-color);
+    border-radius: var(--tblr-border-radius-lg);
+    padding: 1rem 1.125rem;
+    margin-bottom: 1rem;
+}
+
+.wiki-sidebar-title {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--tblr-secondary);
+    margin-bottom: 0.75rem;
+}
+
+/* ══════════════════════════════════════════
+   三、分类列表
+   ══════════════════════════════════════════ */
+
+.wiki-cat-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.wiki-cat-list li {
+    margin-bottom: 2px;
+}
+
+.wiki-cat-list a {
+    display: flex;
+    align-items: center;
+    font-size: 0.8125rem;
+    color: var(--tblr-body-color);
+    text-decoration: none;
+    padding: 5px 8px;
+    border-radius: var(--tblr-border-radius);
+    transition: background 0.12s;
+}
+
+.wiki-cat-list a:hover {
+    background: var(--tblr-bg-surface-secondary);
+}
+
+.wiki-cat-list a.active {
+    background: var(--tblr-bg-surface-secondary);
+    font-weight: 500;
+    color: var(--tblr-primary);
+}
+
+.wiki-cat-count {
+    font-size: 0.6875rem;
+    background: var(--tblr-bg-surface-secondary);
+    border: 1px solid var(--tblr-border-color);
+    border-radius: 20px;
+    padding: 1px 7px;
+    color: var(--tblr-secondary);
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+/* ══════════════════════════════════════════
+   四、TOC 列表
+   ══════════════════════════════════════════ */
+
+.wiki-toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.wiki-toc-list li {
+    border-bottom: 1px solid var(--tblr-border-color);
+}
+
+.wiki-toc-list li:last-child {
+    border-bottom: none;
+}
+
+.wiki-toc-list a {
+    display: block;
+    font-size: 0.8125rem;
+    color: var(--tblr-secondary);
+    text-decoration: none;
+    padding: 5px 0;
+    transition: color 0.12s;
+}
+
+.wiki-toc-list a:hover  { color: var(--tblr-body-color); }
+.wiki-toc-list a.active { color: var(--tblr-body-color); font-weight: 500; }
+
+.wiki-toc-list .toc-level-2 a { padding-left: 0.5rem; }
+.wiki-toc-list .toc-level-3 a { padding-left: 1rem; }
+
+.wiki-toc-num {
+    color: var(--tblr-secondary);
+    margin-right: 5px;
+    font-size: 0.75rem;
+}
+
+/* ══════════════════════════════════════════
+   五、相关条目列表
+   ══════════════════════════════════════════ */
+
+.wiki-related-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.wiki-related-list li {
+    border-bottom: 1px solid var(--tblr-border-color);
+}
+
+.wiki-related-list li:last-child { border-bottom: none; }
+
+.wiki-related-list a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8125rem;
+    color: var(--tblr-primary);
+    text-decoration: none;
+    padding: 6px 0;
+}
+
+.wiki-related-zh {
+    font-size: 0.75rem;
+    color: var(--tblr-secondary);
+}
+
+/* ══════════════════════════════════════════
+   六、元信息表格
+   ══════════════════════════════════════════ */
+
+.wiki-meta-table {
+    width: 100%;
+    font-size: 0.8125rem;
+    border-collapse: collapse;
+}
+
+.wiki-meta-table td { padding: 3px 0; }
+
+.wiki-meta-table td:last-child {
+    text-align: right;
+    color: var(--tblr-secondary);
+}
+
+/* ══════════════════════════════════════════
+   七、条目头部（通用标题区）
+   ══════════════════════════════════════════ */
+
+.wiki-entry-header { margin-bottom: 1.25rem; }
+
+.wiki-entry-title {
+    font-family: "Noto Serif", Georgia, serif;
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.25;
+    margin: 0.375rem 0 0.75rem;
+    color: var(--tblr-body-color);
+}
+
+/* ══════════════════════════════════════════
+   八、精选卡片网格（tipitaka index / wiki index 共用）
+   ══════════════════════════════════════════ */
+
+.wiki-featured-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.wiki-featured-card {
+    border: 1px solid var(--tblr-border-color);
+    border-radius: var(--tblr-border-radius);
+    padding: 10px 12px;
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+    transition: background 0.12s;
+    color: var(--tblr-body-color);
+}
+
+.wiki-featured-card:hover {
+    background: var(--tblr-bg-surface-secondary);
+    color: var(--tblr-body-color);
+}
+
+.wiki-featured-label {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--tblr-secondary);
+    margin-bottom: 5px;
+}
+
+.wiki-featured-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 2px;
+}
+
+.wiki-featured-pali {
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--tblr-secondary);
+}
+
+@media (max-width: 768px) {
+    .wiki-featured-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+/* ══════════════════════════════════════════
+   九、作者头像组件（从 _anthology.css 提取）
+   ══════════════════════════════════════════ */
+
+.author-avatar {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.author-avatar__img,
+.author-avatar__initials {
+    border-radius: 50%;
+    flex-shrink: 0;
+    object-fit: cover;
+}
+
+.author-avatar--sm .author-avatar__img,
+.author-avatar--sm .author-avatar__initials { width: 24px; height: 24px; font-size: .65rem; }
+
+.author-avatar--md .author-avatar__img,
+.author-avatar--md .author-avatar__initials { width: 28px; height: 28px; font-size: .68rem; }
+
+.author-avatar--lg .author-avatar__img,
+.author-avatar--lg .author-avatar__initials { width: 48px; height: 48px; font-size: .95rem; }
+
+.author-avatar__initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: #fff;
+}
+
+.author-avatar__name {
+    font-size: .8rem;
+    color: var(--tblr-body-color);
+    font-weight: 500;
+    display: block;
+}
+
+.author-avatar--lg .author-avatar__name { font-size: .9rem; }
+
+.author-avatar__sub {
+    font-size: .72rem;
+    color: var(--tblr-secondary);
+    display: block;
+}

api-v12/resources/css/layout/_grid.css

@@ -1,9 +1,9 @@
 /* resources/css/layout/_grid.css
    全站断点定义 + 通用栏容器。
-   各栏目三栏/两栏 grid 在此定义基础变量，具体 grid-template 在各 module 实现。
+   包含从 _wiki.css 提取的三栏布局，供所有栏目复用。
 */
 
-/* ── 断点 token（与 Tabler Bootstrap 保持一致） ── */
+/* ── 断点 token ── */
 :root {
     --bp-sm:  576px;
     --bp-md:  768px;
@@ -11,36 +11,75 @@
     --bp-xl:  1200px;
 }
 
-/* ── 通用两栏容器 ── */
-.layout-2col {
-    display: grid;
-    grid-template-columns: 220px 1fr;
-    gap: 1.5rem;
-    align-items: start;
-    padding-top: 1.5rem;
-    padding-bottom: 3rem;
-}
+/* ══════════════════════════════════════════
+   三栏布局（原 .wiki-layout，全站通用）
+   ══════════════════════════════════════════ */
 
-/* ── 通用三栏容器 ── */
-.layout-3col {
+.wiki-layout {
     display: grid;
     grid-template-columns: 200px 1fr 200px;
+    grid-template-areas: "left main right";
     gap: 1.5rem;
     align-items: start;
     padding-top: 1.5rem;
     padding-bottom: 3rem;
 }
 
-/* ── 响应式降级 ── */
+.wiki-sidebar-left  { grid-area: left; }
+.wiki-sidebar-right { grid-area: right; }
+
+.wiki-main {
+    grid-area: main;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 @media (max-width: 992px) {
-    .layout-3col {
+    .wiki-layout {
         grid-template-columns: 180px 1fr;
+        grid-template-areas:
+            "left main"
+            "left right";
+    }
+
+    .wiki-sidebar-right {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .wiki-sidebar-right .wiki-sidebar-section {
+        flex: 1 1 180px;
+        margin-bottom: 0;
     }
 }
 
 @media (max-width: 768px) {
-    .layout-2col,
-    .layout-3col {
+    .wiki-layout {
+        grid-template-columns: 1fr;
+        grid-template-areas: "main" "right" "left";
+    }
+
+    .wiki-sidebar-left,
+    .wiki-sidebar-right {
+        display: none;
+    }
+}
+
+/* ── 通用两栏容器（预留） ── */
+.layout-2col {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    gap: 1.5rem;
+    align-items: start;
+    padding-top: 1.5rem;
+    padding-bottom: 3rem;
+}
+
+@media (max-width: 768px) {
+    .layout-2col {
         grid-template-columns: 1fr;
     }
 }