gpt

2026-01-09 01:28:23 +08:00
parent eb8c097777
commit 90fc16fbc3
241 changed files with 26518 additions and 3570 deletions
--- a/code/public/static/css/modules/global_base.css
+++ b/code/public/static/css/modules/global_base.css
@@ -20,8 +20,8 @@ time, mark, audio, video {
 body {
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
-    background: #f7f7f7;
-    color: #333;
+    /* background: #f7f7f7;
+    color: #333; */
 }

 img {
@@ -29,7 +29,7 @@ img {
    width:100%;
    height:auto;
    object-fit:cover;
-    background:#eee;
+    /* background:#eee; */
 }

 a {
--- a/code/public/static/css/modules/list/item/_item_base.css
+++ b/code/public/static/css/modules/list/item/_item_base.css
@@ -2,6 +2,7 @@

 .__PFX__-item{
    width:100%;
+    color: var(--text-color);
 }

 .__PFX__-item-link{
@@ -53,3 +54,9 @@
    font-size:12px;
    color:var(--text-muted-color);
 }
+.lazyload-img{
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+  }
+  
--- a/code/public/static/css/modules/list/item/_item_media.css
+++ b/code/public/static/css/modules/list/item/_item_media.css
@@ -18,14 +18,25 @@
    gap:12px;
    align-items:flex-start; */
 }
+.__PFX__-itv-media01{ --itv-cover-ratio: 16/9; --itv-cover-radius: 12px; }
+.__PFX__-itv-media02{ --itv-cover-ratio: 4/3;  --itv-cover-radius: 10px; }
+.__PFX__-itv-media03{ --itv-cover-ratio: 3/2;  --itv-cover-radius: 14px; }
+.__PFX__-itv-media04{ --itv-cover-ratio: 21/9; --itv-cover-radius: 18px; }
+.__PFX__-itv-media05{ --itv-cover-ratio: 5/3;  --itv-cover-radius: 8px;  --itv-cover-outline: 1px solid rgba(0,0,0,.12); }
+.__PFX__-itv-media06{ --itv-cover-ratio: 1/1;  --itv-cover-radius: 12px; }
+

 /* 封面偏宽 */
 .__PFX__-item.media .__PFX__-item-cover , .__PFX__-item.media img{
    flex:0 0 38%;
-    aspect-ratio:16 / 9;
-    border-radius:10px;
    overflow:hidden;
+
    background:var(--bg-soft-color);
+    aspect-ratio: var(--itv-cover-ratio, 16/9);
+    border-radius: var(--itv-cover-radius, 12px);
+    background: var(--itv-cover-bg, var(--bg-soft-color));
+    outline: var(--itv-cover-outline, none);
+    box-shadow: var(--itv-cover-shadow, none);
 }

 /* 信息区居中 */
--- a/code/public/static/css/modules/list/item/_item_poster.css
+++ b/code/public/static/css/modules/list/item/_item_poster.css
@@ -8,14 +8,29 @@
    gap:6px;
 }

+.__PFX__-itv-poster01{ --itv-cover-ratio: 2/3; --itv-cover-radius: 12px; }
+.__PFX__-itv-poster02{ --itv-cover-ratio: 4/5; --itv-cover-radius: 14px; }
+.__PFX__-itv-poster03{ --itv-cover-ratio: 3/4; --itv-cover-radius: 10px; }
+.__PFX__-itv-poster04{ --itv-cover-ratio: 9/16; --itv-cover-radius: 16px; }
+
+.__PFX__-itv-poster05{ --itv-cover-ratio: 1/1; --itv-cover-radius: 12px; }
+.__PFX__-itv-poster06{ --itv-cover-ratio: 2/3; --itv-cover-radius: 0px;  --itv-cover-outline: 1px solid rgba(0,0,0,.10); }
+.__PFX__-itv-poster07{ --itv-cover-ratio: 4/5; --itv-cover-radius: 20px; --itv-cover-shadow: 0 10px 24px rgba(0,0,0,.12); }
+.__PFX__-itv-poster08{ --itv-cover-ratio: 3/4; --itv-cover-radius: 8px;  --itv-cover-outline: 1px solid rgba(0,0,0,.14); }
+
+
 /* 封面容器 */
 .__PFX__-item.poster .__PFX__-item-cover{
    position:relative;
    width:100%;
-    aspect-ratio:2/3;
    overflow:hidden;
-    border-radius:12px;
+
    background:var(--bg-soft-color);
+    aspect-ratio: var(--itv-cover-ratio, 2 / 3);
+    border-radius: var(--itv-cover-radius, 12px);
+    background: var(--itv-cover-bg, var(--bg-soft-color));
+    outline: var(--itv-cover-outline, none);
+    box-shadow: var(--itv-cover-shadow, none);
 }

 /* 封面图 */
--- a/code/public/static/css/modules/list/item/_item_rank.css
+++ b/code/public/static/css/modules/list/item/_item_rank.css
@@ -17,7 +17,7 @@
    display:flex;
    align-items:center;
    gap:10px;
-    padding:6px 0;
+    padding:6px;
 }

 /* 序号 */
--- a/code/public/static/css/modules/list/title/title_F.css
+++ b/code/public/static/css/modules/list/title/title_F.css
@@ -1,45 +1,415 @@
-/* ================================
- * Title_F｜分类区块标题（带更多）
- * ================================ */
+/* =========================================================
+ * Title_F (Family F) — 20 variants compatible CSS
+ * - 只依赖 class 命名：.__PFX__-titleF + .__PFX__-titleF-v00..v19
+ * - 目标：任何 variant 的结构都不会被“全局 flex”误伤
+ * - 你只需要把 __PFX__ 替换为 {$TpStyle.dom_prefix}
+ * ========================================================= */

- .__PFX__-titleF{
-    display:flex;
-    align-items:center;
-    justify-content:space-between;
-    gap:12px;
-    margin:18px 0 10px;
+/* -------- Base Reset / Tokens -------- */
+.__PFX__-titleF {
+    margin: 18px 0 10px;
+    position: relative;
+    text-align: left;
 }

-/* 左侧标题区 */
-.__PFX__-titleF-left{
-    display:flex;
-    align-items:baseline;
-    gap:8px;
+.__PFX__-titleF :where(h1, h2, h3, h4, h5, h6, p, div, span, small, em, i, strong) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }

-.__PFX__-titleF-main{
-    font-size:16px;
-    font-weight:700;
-    color:var(--text-color);
-    line-height:1.2;
+.__PFX__-titleF :where(a) {
+    color: inherit;
+    text-decoration: none;
 }

-.__PFX__-titleF-sub{
-    font-size:12px;
-    color:var(--text-muted-color);
+.__PFX__-titleF :where(h3.__PFX__-titleF-main) {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--text-color);
+    min-width: 0;
+    word-break: break-word;
 }

-/* 右侧“更多” */
-.__PFX__-titleF-more a{
-    font-size:12px;
-    color:var(--primary-color);
-    text-decoration:none;
-    padding:4px 8px;
-    border-radius:999px;
-    background:var(--bg-soft-color);
-    border:1px solid var(--border-color);
+.__PFX__-titleF :where(.__PFX__-titleF-sub) {
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--text-muted-color);
+    min-width: 0;
+    word-break: break-word;
 }

-.__PFX__-titleF-more a:hover{
-    opacity:.85;
+/* 左侧常见容器：统一“纵向堆叠”，避免被 align-items:center 造成“居中错觉” */
+.__PFX__-titleF :where(.__PFX__-titleF-left,
+    .__PFX__-titleF-head,
+    .__PFX__-titleF-text,
+    .__PFX__-titleF-stack,
+    .__PFX__-titleF-l,
+    .__PFX__-titleF-cell,
+    .__PFX__-titleF-caption,
+    .__PFX__-titleF-txtBox) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    min-width: 0;
 }
+
+/* “更多”链接：兼容三种写法
+   * 1) <a class="...-titleF-more">
+   * 2) <div class="...-titleF-more"><a>...</a>
+   * 3) <div class="...-titleF-cta"><a>...</a>
+   */
+.__PFX__-titleF a.__PFX__-titleF-more,
+.__PFX__-titleF .__PFX__-titleF-more>a,
+.__PFX__-titleF .__PFX__-titleF-cta>a,
+.__PFX__-titleF .__PFX__-titleF-nav>a,
+.__PFX__-titleF .__PFX__-titleF-tail>a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-size: 12px;
+    line-height: 1;
+    color: var(--primary-color);
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: var(--bg-soft-color);
+    border: 1px solid var(--border-color);
+    white-space: nowrap;
+}
+
+.__PFX__-titleF a.__PFX__-titleF-more:hover,
+.__PFX__-titleF .__PFX__-titleF-more>a:hover,
+.__PFX__-titleF .__PFX__-titleF-cta>a:hover,
+.__PFX__-titleF .__PFX__-titleF-nav>a:hover,
+.__PFX__-titleF .__PFX__-titleF-tail>a:hover {
+    opacity: .86;
+}
+
+/* 为了避免某些布局“撑开后挤压标题”，给右侧按钮一个最小尺寸与不换行策略 */
+.__PFX__-titleF :where(.__PFX__-titleF-more, .__PFX__-titleF-cta, .__PFX__-titleF-nav, .__PFX__-titleF-tail) {
+    flex: 0 0 auto;
+}
+
+/* -------- Decorative bits (safe defaults) -------- */
+.__PFX__-titleF .__PFX__-titleF-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 99px;
+    background: var(--primary-color);
+    display: inline-block;
+    margin-right: 8px;
+    transform: translateY(-1px);
+}
+
+.__PFX__-titleF .__PFX__-titleF-kicker {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: var(--primary-color);
+    flex: 0 0 auto;
+}
+
+.__PFX__-titleF .__PFX__-titleF-mark {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: var(--primary-color);
+    display: inline-block;
+    margin-right: 8px;
+    transform: translateY(-1px);
+}
+
+.__PFX__-titleF .__PFX__-titleF-sfx {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 99px;
+    background: var(--color_bg_soft, var(--bg-soft-color));
+    border: 1px solid var(--border-color);
+    margin-left: 8px;
+    transform: translateY(-1px);
+}
+
+.__PFX__-titleF .__PFX__-titleF-rail,
+.__PFX__-titleF .__PFX__-titleF-line {
+    width: 3px;
+    border-radius: 99px;
+    background: var(--primary-color);
+    opacity: .9;
+}
+
+/* -------- Variant Layouts -------- */
+
+/* v00 / v05 / v08：root 直接左右分栏 */
+.__PFX__-titleF.__PFX__-titleF-v00,
+.__PFX__-titleF.__PFX__-titleF-v05,
+.__PFX__-titleF.__PFX__-titleF-v08 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+/* v01：row 才是主 flex（修复你提到的“左边居中”问题） */
+.__PFX__-titleF.__PFX__-titleF-v01 .__PFX__-titleF-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v01 .__PFX__-titleF-stack {
+    gap: 2px;
+}
+
+/* v02：meta 行左右分布 */
+.__PFX__-titleF.__PFX__-titleF-v02 .__PFX__-titleF-main {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v02 .__PFX__-titleF-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 6px;
+}
+
+/* v03：top 行左右 */
+.__PFX__-titleF.__PFX__-titleF-v03 .__PFX__-titleF-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v03 .__PFX__-titleF-more>a {
+    padding: 4px 8px;
+    min-width: 0;
+}
+
+/* v04：grid 两列 */
+.__PFX__-titleF.__PFX__-titleF-v04 .__PFX__-titleF-grid {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v04 .__PFX__-titleF-cell--more {
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* v06：body 行左右；line 为装饰 */
+.__PFX__-titleF.__PFX__-titleF-v06 {
+    display: flex;
+    gap: 10px;
+    align-items: stretch;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v06 .__PFX__-titleF-body {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v06 .__PFX__-titleF-line {
+    margin-top: 2px;
+}
+
+/* v07：wrap 左右 */
+.__PFX__-titleF.__PFX__-titleF-v07 .__PFX__-titleF-wrap {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+/* v09：bar 左右 */
+.__PFX__-titleF.__PFX__-titleF-v09 .__PFX__-titleF-bar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v09 .__PFX__-titleF-r {
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* v10：head 左右；foot 在下 */
+.__PFX__-titleF.__PFX__-titleF-v10 .__PFX__-titleF-head {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v10 .__PFX__-titleF-foot {
+    margin-top: 6px;
+}
+
+/* v11：rail + content；content 左右 */
+.__PFX__-titleF.__PFX__-titleF-v11 {
+    display: flex;
+    gap: 10px;
+    align-items: stretch;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v11 .__PFX__-titleF-content {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v11 .__PFX__-titleF-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+/* v12：shell 左右；badge 装饰 */ 
+.__PFX__-titleF.__PFX__-titleF-v12 .__PFX__-titleF-right {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v12 .__PFX__-titleF-badge {
+    width: 10px;
+    height: 10px;
+    border-radius: 99px;
+    background: var(--primary-color);
+    opacity: .7;
+    flex: 0 0 auto;
+}
+
+/* v13：inner 左右；hint 可在下 */
+.__PFX__-titleF.__PFX__-titleF-v13  {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v13 .__PFX__-titleF-hint {
+    margin-top: 4px;
+}
+
+/* v14：frame 左右；tag 装饰 */
+.__PFX__-titleF.__PFX__-titleF-v14 .__PFX__-titleF-inner{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v14 .__PFX__-titleF-tag {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    background: var(--primary-color);
+    opacity: .7;
+    flex: 0 0 auto;
+}
+
+/* v15：core 左右；subline 在下 */ 
+.__PFX__-titleF.__PFX__-titleF-v15 .__PFX__-titleF-right {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v15 .__PFX__-titleF-subline {
+    margin-top: 6px;
+}
+
+/* v16：hero 左右；note 在下 */
+.__PFX__-titleF.__PFX__-titleF-v16 .__PFX__-titleF-hero {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v16 .__PFX__-titleF-note {
+    margin-top: 4px;
+}
+
+/* v17：flex 左右；pill 装饰 */ 
+.__PFX__-titleF.__PFX__-titleF-v17 .__PFX__-titleF-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v17 .__PFX__-titleF-pill {
+    width: 12px;
+    height: 6px;
+    border-radius: 99px;
+    background: var(--primary-color);
+    opacity: .7;
+    flex: 0 0 auto;
+}
+
+/* v18：split 左右（root 不做 flex，防止你提到的“居中”再出现） */
+.__PFX__-titleF.__PFX__-titleF-v18 .__PFX__-titleF-body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v18 .__PFX__-titleF-sign {
+    width: 8px;
+    height: 8px;
+    border-radius: 99px;
+    background: var(--primary-color);
+    opacity: .7;
+    flex: 0 0 auto;
+}
+
+/* v19：pane 左右；badge/mini 装饰 */
+.__PFX__-titleF.__PFX__-titleF-v19 {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.__PFX__-titleF.__PFX__-titleF-v19 .__PFX__-titleF-badge {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: var(--primary-color);
+    opacity: .75;
+    flex: 0 0 auto;
+}
+
+/* -------- Small screens safety -------- */
+@media (max-width:420px) {
+
+    .__PFX__-titleF a.__PFX__-titleF-more,
+    .__PFX__-titleF .__PFX__-titleF-more>a,
+    .__PFX__-titleF .__PFX__-titleF-cta>a,
+    .__PFX__-titleF .__PFX__-titleF-nav>a,
+    .__PFX__-titleF .__PFX__-titleF-tail>a {
+        padding: 5px 9px;
+    }
+}
--- a/code/public/static/css/modules/pinlun/_pinlun_base.css
+++ b/code/public/static/css/modules/pinlun/_pinlun_base.css
@@ -0,0 +1,25 @@
+/* ===== pinlun base ===== */
+.__PFX__-cmt {
+    margin: 24px 0;
+    font-size: 14px;
+    color: var(--text-color);
+  }
+  
+  .__PFX__-cmt-title {
+    margin-bottom: 12px;
+  }
+  
+  .__PFX__-cmt-text {
+    line-height: 1.65;
+  }
+  
+  .__PFX__-cmt-meta {
+    font-size: 12px;
+    color: var(--text-muted-color);
+  }
+  
+  .__PFX__-cmt-item,
+  .__PFX__-cmt-card {
+    margin-bottom: 10px;
+  }
+  
--- a/code/public/static/css/modules/pinlun/_pinlun_layout_A.css
+++ b/code/public/static/css/modules/pinlun/_pinlun_layout_A.css
@@ -0,0 +1,153 @@
+/* ===== Layout A ===== */
+.__PFX__-cmt.layout-a {
+  background: var(--bg-main-color);
+  padding: 16px;
+  border: 1px solid var(--border-color);
+}
+
+.__PFX__-cmt.layout-a .__PFX__-cmt-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.__PFX__-cmt.layout-a .__PFX__-cmt-item {
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-a .__PFX__-cmt-item:last-child {
+  border-bottom: none;
+}
+
+.__PFX__-cmt.layout-a .__PFX__-cmt-meta {
+  margin-bottom: 6px;
+}
+
+.__PFX__-cmt.layout-a blockquote {
+  margin: 6px 0;
+  padding-left: 10px;
+  border-left: 3px solid var(--border-color);
+}
+
+/* variants */
+.__PFX__-cmt.layout-a.v1 .__PFX__-cmt-title {
+  font-weight: 500;
+}
+
+.__PFX__-cmt.layout-a.v2 .__PFX__-cmt-item {
+  padding: 14px 0;
+}
+
+.__PFX__-cmt.layout-a.v3 .__PFX__-cmt-item {
+  border-bottom-style: dashed;
+}
+
+.__PFX__-cmt.layout-a.v4 {
+  padding: 20px;
+}
+
+.__PFX__-cmt.layout-a.v5 .__PFX__-cmt-meta {
+  font-style: italic;
+}
+
+/* G1 minimal */
+.__PFX__-cmt.layout-a.v0,
+.__PFX__-cmt.layout-a.v1,
+.__PFX__-cmt.layout-a.v2,
+.__PFX__-cmt.layout-a.v3 {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.__PFX__-cmt.layout-a.v0 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v1 .__PFX__-cmt-item {
+  border: none;
+  padding: 4px 0;
+}
+
+.__PFX__-cmt.layout-a.v2 .__PFX__-cmt-text,
+.__PFX__-cmt.layout-a.v3 .__PFX__-cmt-text {
+  font-size: 13px;
+}
+
+/* G2 article */
+.__PFX__-cmt.layout-a.v4,
+.__PFX__-cmt.layout-a.v5,
+.__PFX__-cmt.layout-a.v6,
+.__PFX__-cmt.layout-a.v7 {
+  background: var(--bg-main-color);
+  padding: 18px;
+  border-left: 4px solid var(--border-color);
+}
+
+.__PFX__-cmt.layout-a.v4 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v5 .__PFX__-cmt-item {
+  padding: 12px 0;
+}
+
+.__PFX__-cmt.layout-a.v6 .__PFX__-cmt-meta,
+.__PFX__-cmt.layout-a.v7 .__PFX__-cmt-meta {
+  font-style: italic;
+}
+
+/* G3 community */
+.__PFX__-cmt.layout-a.v8,
+.__PFX__-cmt.layout-a.v9,
+.__PFX__-cmt.layout-a.v10,
+.__PFX__-cmt.layout-a.v11 {
+  background: transparent;
+  padding: 8px 0;
+}
+
+.__PFX__-cmt.layout-a.v8 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v9 .__PFX__-cmt-item {
+  border-bottom: 1px dotted var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-a.v10 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v11 .__PFX__-cmt-item {
+  border-bottom: 1px dashed var(--border-light-color);
+}
+
+/* G4 card */
+.__PFX__-cmt.layout-a.v12,
+.__PFX__-cmt.layout-a.v13,
+.__PFX__-cmt.layout-a.v14,
+.__PFX__-cmt.layout-a.v15 {
+  background: var(--bg-soft-color);
+  padding: 16px;
+  border-radius: 10px;
+}
+
+.__PFX__-cmt.layout-a.v12 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v13 .__PFX__-cmt-item {
+  background: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.__PFX__-cmt.layout-a.v14 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-a.v15 .__PFX__-cmt-item {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
+}
+
+/* G5 raw */
+.__PFX__-cmt.layout-a.v16,
+.__PFX__-cmt.layout-a.v17,
+.__PFX__-cmt.layout-a.v18,
+.__PFX__-cmt.layout-a.v19 {
+  background: none;
+  border: none;
+  padding: 12px 0;
+}
+
+.__PFX__-cmt.layout-a.v16 .__PFX__-cmt-meta,
+.__PFX__-cmt.layout-a.v17 .__PFX__-cmt-meta {
+  display: none;
+}
+
+.__PFX__-cmt.layout-a.v18 .__PFX__-cmt-text,
+.__PFX__-cmt.layout-a.v19 .__PFX__-cmt-text {
+  font-size: 15px;
+}
--- a/code/public/static/css/modules/pinlun/_pinlun_layout_B.css
+++ b/code/public/static/css/modules/pinlun/_pinlun_layout_B.css
@@ -0,0 +1,151 @@
+/* ===== Layout B ===== */
+.__PFX__-cmt.layout-b {
+  padding: 0;
+}
+
+.__PFX__-cmt.layout-b .__PFX__-cmt-title {
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+
+.__PFX__-cmt.layout-b .__PFX__-cmt-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.__PFX__-cmt.layout-b .__PFX__-cmt-item {
+  padding: 8px 0;
+  border-bottom: 1px dotted var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-b .__PFX__-cmt-item:last-child {
+  border-bottom: none;
+}
+
+.__PFX__-cmt.layout-b .__PFX__-cmt-meta {
+  margin-top: 4px;
+}
+
+/* variants */
+.__PFX__-cmt.layout-b.v1 .__PFX__-cmt-item {
+  padding: 6px 0;
+}
+
+.__PFX__-cmt.layout-b.v2 .__PFX__-cmt-item {
+  border-bottom-style: dashed;
+}
+
+.__PFX__-cmt.layout-b.v3 .__PFX__-cmt-meta {
+  display: none;
+}
+
+.__PFX__-cmt.layout-b.v4 .__PFX__-cmt-item {
+  padding-left: 6px;
+}
+
+.__PFX__-cmt.layout-b.v5 .__PFX__-cmt-text {
+  font-size: 13px;
+}
+
+/* B-G1 forum */
+.__PFX__-cmt.layout-b.v0,
+.__PFX__-cmt.layout-b.v1,
+.__PFX__-cmt.layout-b.v2,
+.__PFX__-cmt.layout-b.v3 {
+  background: #f7f7f7;
+  padding: 6px;
+  border: 1px solid var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-b.v0 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v1 .__PFX__-cmt-item {
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-b.v2 .__PFX__-cmt-meta,
+.__PFX__-cmt.layout-b.v3 .__PFX__-cmt-meta {
+  font-size: 11px;
+}
+
+/* B-G2 resource list */
+.__PFX__-cmt.layout-b.v4,
+.__PFX__-cmt.layout-b.v5,
+.__PFX__-cmt.layout-b.v6,
+.__PFX__-cmt.layout-b.v7 {
+  background: transparent;
+  padding: 0;
+}
+
+.__PFX__-cmt.layout-b.v4 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v5 .__PFX__-cmt-item {
+  padding: 10px 0;
+  border-bottom: 1px dotted var(--border-light-color);
+}
+
+.__PFX__-cmt.layout-b.v6 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v7 .__PFX__-cmt-item {
+  border-bottom-style: dashed;
+}
+
+/* B-G3 minimal list */
+.__PFX__-cmt.layout-b.v8,
+.__PFX__-cmt.layout-b.v9,
+.__PFX__-cmt.layout-b.v10,
+.__PFX__-cmt.layout-b.v11 {
+  background: none;
+  padding: 4px 0;
+}
+
+.__PFX__-cmt.layout-b.v8 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v9 .__PFX__-cmt-item {
+  border: none;
+  padding: 4px 0;
+}
+
+.__PFX__-cmt.layout-b.v10 .__PFX__-cmt-text,
+.__PFX__-cmt.layout-b.v11 .__PFX__-cmt-text {
+  font-size: 13px;
+}
+
+/* B-G4 module */
+.__PFX__-cmt.layout-b.v12,
+.__PFX__-cmt.layout-b.v13,
+.__PFX__-cmt.layout-b.v14,
+.__PFX__-cmt.layout-b.v15 {
+  background: var(--bg-soft-color);
+  padding: 12px;
+}
+
+.__PFX__-cmt.layout-b.v12 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v13 .__PFX__-cmt-item {
+  background: #fff;
+  padding: 8px;
+  margin-bottom: 6px;
+}
+
+.__PFX__-cmt.layout-b.v14 .__PFX__-cmt-item,
+.__PFX__-cmt.layout-b.v15 .__PFX__-cmt-item {
+  border-radius: 6px;
+}
+
+/* B-G5 raw */
+.__PFX__-cmt.layout-b.v16,
+.__PFX__-cmt.layout-b.v17,
+.__PFX__-cmt.layout-b.v18,
+.__PFX__-cmt.layout-b.v19 {
+  background: none;
+  border: none;
+  padding: 8px 0;
+}
+
+.__PFX__-cmt.layout-b.v16 .__PFX__-cmt-meta,
+.__PFX__-cmt.layout-b.v17 .__PFX__-cmt-meta {
+  display: none;
+}
+
+.__PFX__-cmt.layout-b.v18 .__PFX__-cmt-text,
+.__PFX__-cmt.layout-b.v19 .__PFX__-cmt-text {
+  font-size: 15px;
+}
--- a/code/public/static/css/modules/pinlun/_pinlun_layout_C.css
+++ b/code/public/static/css/modules/pinlun/_pinlun_layout_C.css
@@ -0,0 +1,121 @@
+/* ===== Layout C ===== */
+.__PFX__-cmt.layout-c {
+  padding: 10px 0;
+}
+
+.__PFX__-cmt.layout-c .__PFX__-cmt-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.__PFX__-cmt.layout-c .__PFX__-cmt-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.__PFX__-cmt.layout-c .__PFX__-cmt-card {
+  padding: 12px;
+  background: var(--bg-soft-color);
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
+}
+
+.__PFX__-cmt.layout-c .__PFX__-cmt-meta {
+  margin-top: 6px;
+}
+
+/* variants */
+.__PFX__-cmt.layout-c.v1 .__PFX__-cmt-card {
+  border-radius: 4px;
+}
+
+.__PFX__-cmt.layout-c.v2 .__PFX__-cmt-card {
+  box-shadow: none;
+  border: 1px solid var(--border-color);
+}
+
+.__PFX__-cmt.layout-c.v3 .__PFX__-cmt-card {
+  padding: 16px;
+}
+
+.__PFX__-cmt.layout-c.v4 .__PFX__-cmt-cards {
+  gap: 6px;
+}
+
+.__PFX__-cmt.layout-c.v5 .__PFX__-cmt-meta {
+  display: none;
+}
+
+/* C-G1 recommend */
+.__PFX__-cmt.layout-c.v0,
+.__PFX__-cmt.layout-c.v1,
+.__PFX__-cmt.layout-c.v2,
+.__PFX__-cmt.layout-c.v3 {
+  padding: 8px 0;
+}
+
+.__PFX__-cmt.layout-c.v0 .__PFX__-cmt-card,
+.__PFX__-cmt.layout-c.v1 .__PFX__-cmt-card {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
+  border-radius: 12px;
+}
+
+/* C-G2 hot */
+.__PFX__-cmt.layout-c.v4,
+.__PFX__-cmt.layout-c.v5,
+.__PFX__-cmt.layout-c.v6,
+.__PFX__-cmt.layout-c.v7 {
+  background: var(--bg-main-color);
+  padding: 12px;
+}
+
+.__PFX__-cmt.layout-c.v4 .__PFX__-cmt-card,
+.__PFX__-cmt.layout-c.v5 .__PFX__-cmt-card {
+  border-left: 4px solid var(--border-color);
+}
+
+/* C-G3 light */
+.__PFX__-cmt.layout-c.v8,
+.__PFX__-cmt.layout-c.v9,
+.__PFX__-cmt.layout-c.v10,
+.__PFX__-cmt.layout-c.v11 {
+  padding: 4px 0;
+}
+
+.__PFX__-cmt.layout-c.v8 .__PFX__-cmt-card,
+.__PFX__-cmt.layout-c.v9 .__PFX__-cmt-card {
+  box-shadow: none;
+  border: 1px dashed var(--border-light-color);
+}
+
+/* C-G4 content */
+.__PFX__-cmt.layout-c.v12,
+.__PFX__-cmt.layout-c.v13,
+.__PFX__-cmt.layout-c.v14,
+.__PFX__-cmt.layout-c.v15 {
+  background: var(--bg-soft-color);
+  padding: 16px;
+}
+
+.__PFX__-cmt.layout-c.v12 .__PFX__-cmt-card,
+.__PFX__-cmt.layout-c.v13 .__PFX__-cmt-card {
+  background: #fff;
+  padding: 14px;
+}
+
+/* C-G5 raw */
+.__PFX__-cmt.layout-c.v16,
+.__PFX__-cmt.layout-c.v17,
+.__PFX__-cmt.layout-c.v18,
+.__PFX__-cmt.layout-c.v19 {
+  background: none;
+  padding: 6px 0;
+}
+
+.__PFX__-cmt.layout-c.v16 .__PFX__-cmt-card,
+.__PFX__-cmt.layout-c.v17 .__PFX__-cmt-card {
+  box-shadow: none;
+  border: none;
+}
--- a/code/public/static/css/modules/pinlun/_pinlun_layout_D.css
+++ b/code/public/static/css/modules/pinlun/_pinlun_layout_D.css
@@ -0,0 +1,85 @@
+/* pinlun base: __PFX__ replaced by CssBuilder */
+.__PFX__-cmt{
+    margin: 22px 0 10px;
+    color: var(--text-color);
+    font-size: 14px;
+  }
+  
+  /* header */
+  .__PFX__-cmt-hd{
+    display:flex;
+    align-items:baseline;
+    justify-content:space-between;
+    gap:10px;
+    margin: 0 0 10px;
+  }
+  
+  .__PFX__-cmt-title{
+    font-size: 16px;
+    font-weight: 650;
+    margin: 0;
+  }
+  
+  .__PFX__-cmt-count,
+  .__PFX__-cmt-meta,
+  .__PFX__-cmt-user,
+  .__PFX__-cmt-time{
+    font-size: 12px;
+    color: var(--text-muted-color);
+  }
+  
+  /* list */
+  .__PFX__-cmt-list{
+    margin:0;
+    padding:0;
+  }
+  
+  .__PFX__-cmt-item,
+  .__PFX__-cmt-card{
+    background: var(--bg-soft-color);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 10px 12px;
+    margin: 0 0 10px;
+  }
+  
+  .__PFX__-cmt-text{
+    line-height: 1.65;
+    margin: 0;
+  }
+  
+  /* layout differences */
+  .__PFX__-cmt.layout-b .__PFX__-cmt-list{ list-style:none; }
+  .__PFX__-cmt.layout-b .__PFX__-cmt-item{
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  
+  .__PFX__-cmt.layout-c .__PFX__-cmt-card{
+    border-radius: 14px;
+    box-shadow: 0 4px 14px rgba(0,0,0,.06);
+  }
+  
+  /* variant knobs (v0..v19) */
+  .__PFX__-cmt.v0  {}
+  .__PFX__-cmt.v1  .__PFX__-cmt-item{ border-radius: 14px; }
+  .__PFX__-cmt.v2  .__PFX__-cmt-item{ background: color-mix(in srgb, var(--bg-soft-color) 86%, transparent); }
+  .__PFX__-cmt.v3  .__PFX__-cmt-item{ border-style:dashed; }
+  .__PFX__-cmt.v4  .__PFX__-cmt-title{ letter-spacing:.5px; }
+  .__PFX__-cmt.v5  .__PFX__-cmt-text{ font-size: 13px; }
+  .__PFX__-cmt.v6  .__PFX__-cmt-item{ padding: 12px 14px; }
+  .__PFX__-cmt.v7  .__PFX__-cmt-item{ border-radius: 999px; }
+  .__PFX__-cmt.v8  .__PFX__-cmt-item{ border-width: 2px; }
+  .__PFX__-cmt.v9  .__PFX__-cmt-hd{ justify-content:flex-start; }
+  .__PFX__-cmt.v10 .__PFX__-cmt-title{ font-weight: 500; }
+  .__PFX__-cmt.v11 .__PFX__-cmt-item{ background: transparent; }
+  .__PFX__-cmt.v12 .__PFX__-cmt-item{ border-radius: 6px; }
+  .__PFX__-cmt.v13 .__PFX__-cmt-text{ line-height: 1.8; }
+  .__PFX__-cmt.v14 .__PFX__-cmt-item{ padding: 8px 10px; }
+  .__PFX__-cmt.v15 .__PFX__-cmt-item{ border-color: color-mix(in srgb, var(--border-color) 60%, transparent); }
+  .__PFX__-cmt.v16 .__PFX__-cmt-title{ font-size: 15px; }
+  .__PFX__-cmt.v17 .__PFX__-cmt-item{ box-shadow: 0 2px 8px rgba(0,0,0,.05); }
+  .__PFX__-cmt.v18 .__PFX__-cmt-item{ border-radius: 18px; }
+  .__PFX__-cmt.v19 .__PFX__-cmt-title{ text-transform: none; }
+