gpttemp

2025-12-31 00:49:32 +08:00
parent ae57b68f99
commit eb8c097777
709 changed files with 39727 additions and 1041 deletions
--- a/code/public/static/css/modules/list/base/_base.css
+++ b/code/public/static/css/modules/list/base/_base.css
@@ -0,0 +1,2 @@
+/* base/_base.css */
+.__PFX__-item{ box-sizing:border-box; }
--- a/code/public/static/css/modules/list/behavior/behavior.css
+++ b/code/public/static/css/modules/list/behavior/behavior.css
@@ -0,0 +1,27 @@
+/* list/behavior.css | 通用行为状态（容器级） */
+
+/* 折叠：默认隐藏第 6 条及之后（可按模块自行调 N） */
+.collapsed .__PFX__-shellA-list > *:nth-child(n+6),
+.collapsed .__PFX__-shellB-grid > *:nth-child(n+7),
+.collapsed .__PFX__-shellC-list > *:nth-child(n+11){
+    display:none;
+}
+
+/* 分组grouped：如果某些 shell 未自带 grouped，可用这个兜底 */
+.grouped{
+    border:1px solid var(--border-color);
+    background:var(--bg-soft-color);
+}
+
+
+/* 密度 */
+.compact { gap:8px; }
+.loose   { gap:16px; }
+
+/* 强调：给容器一点“模块感” */
+.emphasis{
+    border-radius:14px;
+    padding: 12px;
+    background:var(--bg-soft-color);
+}
+
--- a/code/public/static/css/modules/list/behavior/density.css
+++ b/code/public/static/css/modules/list/behavior/density.css
@@ -0,0 +1,15 @@
+/* ===============================
+ * Density - 列表密度
+ * =============================== */
+
+/* 默认（什么都不写） */
+
+/* 紧凑型 */
+.compact .__PFX__-item{
+    margin-bottom:8px;
+}
+
+/* 松散型 */
+.loose .__PFX__-item{
+    margin-bottom:20px;
+}
--- a/code/public/static/css/modules/list/behavior/emphasis.css
+++ b/code/public/static/css/modules/list/behavior/emphasis.css
@@ -0,0 +1,17 @@
+/* ===============================
+ * Emphasis - 强调模块
+ * =============================== */
+
+/* 强强调 */
+.emphasis{
+    background:var(--bg-soft-color);
+    border-radius:12px;
+    padding:12px;
+}
+
+/* 轻强调 */
+.soft{
+    background:rgba(0,0,0,.03);
+    border-radius:10px;
+    padding:10px;
+}
--- a/code/public/static/css/modules/list/behavior/fold.css
+++ b/code/public/static/css/modules/list/behavior/fold.css
@@ -0,0 +1,32 @@
+/* ===============================
+ * Fold - 折叠行为
+ * =============================== */
+
+ .collapsed .__PFX__-shell-list{
+    max-height:420px;
+    overflow:hidden;
+    position:relative;
+}
+
+/* 渐隐遮罩，防止“硬切” */
+.collapsed .__PFX__-shell-list::after{
+    content:'';
+    position:absolute;
+    left:0;
+    right:0;
+    bottom:0;
+    height:80px;
+    background:linear-gradient(
+        to bottom,
+        rgba(255,255,255,0),
+        var(--bg-color)
+    );
+}
+
+/* 展开后 */
+.collapsed.open .__PFX__-shell-list{
+    max-height:none;
+}
+.collapsed.open .__PFX__-shell-list::after{
+    display:none;
+}
--- a/code/public/static/css/modules/list/behavior/order.css
+++ b/code/public/static/css/modules/list/behavior/order.css
@@ -0,0 +1,13 @@
+/* ===============================
+ * Order - 排序表现
+ * =============================== */
+
+/* Top 榜前 3 强化 */
+.top .__PFX__-shell-item:nth-child(-n+3){
+    font-weight:700;
+}
+
+/* 斑马纹 */
+.zebra .__PFX__-shell-item:nth-child(odd){
+    background:rgba(0,0,0,.02);
+}
--- a/code/public/static/css/modules/list/item/_item_base.css
+++ b/code/public/static/css/modules/list/item/_item_base.css
@@ -0,0 +1,55 @@
+/* ========== item 基础结构 ========== */
+
+.__PFX__-item{
+    width:100%;
+}
+
+.__PFX__-item-link{
+    display:block;
+    color:inherit;
+    text-decoration:none;
+}
+
+.__PFX__-item-cover{
+    position:relative;
+    background:var(--bg-soft-color);
+    overflow:hidden;
+}
+
+.__PFX__-item-cover img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+}
+
+.__PFX__-item-score{
+    position:absolute;
+    right:6px;
+    top:6px;
+    padding:2px 6px;
+    font-size:12px;
+    background:rgba(0,0,0,.65);
+    color:#fff;
+    border-radius:4px;
+}
+
+.__PFX__-item-info{
+    padding:6px 4px;
+}
+
+.__PFX__-item-title{
+    font-size:14px;
+    line-height:1.4;
+    font-weight:600;
+}
+
+.__PFX__-item-meta{
+    font-size:12px;
+    color:var(--text-muted-color);
+}
+
+.__PFX__-item-extra{
+    font-size:12px;
+    color:var(--text-muted-color);
+}
--- a/code/public/static/css/modules/list/item/_item_media.css
+++ b/code/public/static/css/modules/list/item/_item_media.css
@@ -0,0 +1,78 @@
+/* ===================================================
+ * Item Mother B - Media Row
+ * =================================================== */
+/* ========== media：横向信息流 ========== */
+.item-media{
+    /* display:flex;
+    gap:12px;
+    align-items:center; */
+}
+.item-media img{
+    width:120px;
+    aspect-ratio:16/9;
+    object-fit:cover;
+}
+
+.__PFX__-item.media{
+    /* display:flex;
+    gap:12px;
+    align-items:flex-start; */
+}
+
+/* 封面偏宽 */
+.__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);
+}
+
+/* 信息区居中 */
+.__PFX__-item.media .__PFX__-item-info{
+    padding:6px 4px;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+}
+
+.__PFX__-item.media .__PFX__-item-cover img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+}
+
+/* 右侧内容 */
+.__PFX__-item.media .__PFX__-item-body{
+    flex:1;
+    display:flex;
+    flex-direction:column;
+    gap:4px;
+}
+
+/* 标题 */
+.__PFX__-item.media .__PFX__-item-title{
+    font-size:14px;
+    font-weight:700;
+    line-height:1.3;
+    color:var(--text-color);
+
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    overflow:hidden;
+}
+
+/* 描述 */
+.__PFX__-item.media .__PFX__-item-desc{
+    font-size:12px;
+    line-height:1.4;
+    color:var(--text-muted-color);
+
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    overflow:hidden;
+}
+
--- a/code/public/static/css/modules/list/item/_item_poster.css
+++ b/code/public/static/css/modules/list/item/_item_poster.css
@@ -0,0 +1,62 @@
+/* ===================================================
+ * Item Mother A - Poster Card
+ * =================================================== */
+
+ .__PFX__-item.poster{
+    display:flex;
+    flex-direction:column;
+    gap:6px;
+}
+
+/* 封面容器 */
+.__PFX__-item.poster .__PFX__-item-cover{
+    position:relative;
+    width:100%;
+    aspect-ratio:2/3;
+    overflow:hidden;
+    border-radius:12px;
+    background:var(--bg-soft-color);
+}
+
+/* 封面图 */
+.__PFX__-item.poster .__PFX__-item-cover img{
+    position:absolute;
+    inset:0;
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+}
+
+/* 标题 */
+.__PFX__-item.poster .__PFX__-item-title{
+    font-size:14px;
+    line-height:1.3;
+    font-weight:700;
+    color:var(--text-color);
+
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    overflow:hidden;
+}
+
+/* 元信息 */
+.__PFX__-item.poster .__PFX__-item-meta{
+    font-size:12px;
+    color:var(--text-muted-color);
+}
+
+/* 强调态（评分 / 热度） */
+.__PFX__-item.poster.emphasis{
+    position:relative;
+}
+
+.__PFX__-item.poster.emphasis::after{
+    content:'';
+    position:absolute;
+    inset:0;
+    border-radius:12px;
+    box-shadow:0 8px 18px var(--shadow-color);
+    pointer-events:none;
+}
--- a/code/public/static/css/modules/list/item/_item_rank.css
+++ b/code/public/static/css/modules/list/item/_item_rank.css
@@ -0,0 +1,49 @@
+/* ===================================================
+ * Item Mother C - Rank / Text
+ * =================================================== */
+/* ========== rank：排行榜 ========== */
+
+.__PFX__-item.rank::before{
+    content:attr(data-rank);
+    font-size:18px;
+    font-weight:700;
+    color:var(--primary-color);
+    width:28px;
+    text-align:center;
+}
+
+
+ .__PFX__-item.rank{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    padding:6px 0;
+}
+
+/* 序号 */
+.__PFX__-item.rank .rank-no{
+    flex:0 0 24px;
+    text-align:center;
+    font-weight:900;
+    font-size:14px;
+    color:var(--text-muted-color);
+}
+
+/* Top 强化 */
+.__PFX__-item.rank.top .rank-no{
+    color:var(--primary-color);
+    font-size:16px;
+}
+
+/* 标题 */
+.__PFX__-item.rank .rank-title{
+    flex:1;
+    font-size:14px;
+    line-height:1.3;
+    font-weight:600;
+    color:var(--text-color);
+
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+}
--- a/code/public/static/css/modules/list/item/_item_text.css
+++ b/code/public/static/css/modules/list/item/_item_text.css
@@ -0,0 +1,12 @@
+/* ========== text：极简文本 ========== */
+.__PFX__-item.text .__PFX__-item-cover{
+    display:none;
+}
+
+.__PFX__-item.text .__PFX__-item-info{
+    padding:10px 0;
+}
+
+.__PFX__-item.text{
+    border-bottom:1px solid var(--border-color);
+}
--- a/code/public/static/css/modules/list/item/_item_title_clamp.css
+++ b/code/public/static/css/modules/list/item/_item_title_clamp.css
@@ -0,0 +1,92 @@
+/* ======================================================
+ * Title Clamp Packs (opt-in by .__PFX__-tclamp)
+ * ====================================================== */
+
+/* 统一命中 title（覆盖 poster/media 里已有的 clamp） */
+.__PFX__-tclamp .__PFX__-item-title,
+.__PFX__-tclamp .__PFX__-rank-title,
+.__PFX__-tclamp .rank-title{
+  line-height: var(--tc-lh, 1.35);
+  margin: var(--tc-m, 0);
+  font-weight: var(--tc-fw, inherit);
+
+  /* 统一改为可换行，避免 item_04 那种 nowrap 造成高度不可控:contentReference[oaicite:4]{index=4} */
+  white-space: normal;
+  text-overflow: clip;
+
+  overflow: hidden;
+  height: var(--tc-h, 2.7em);
+  max-height: var(--tc-h, 2.7em);
+
+  /* 默认走多行 clamp（ln1 会被下面覆盖） */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--tc-lines, 2);
+
+  word-break: break-word;
+}
+
+/* ln1：强制单行省略号（比 -webkit-line-clamp:1 更“可控”） */
+.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-item-title,
+.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-rank-title,
+.__PFX__-tclamp.__PFX__-tclamp-l1 .rank-title{
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: unset;
+  max-height: var(--tc-h, 1.35em);
+  height: var(--tc-h, 1.35em);
+}
+
+/* =========================
+ * Pack 0：紧凑型（偏短行高）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p0{ --tc-lh:1.25; --tc-fw:600; --tc-m:0; }
+.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.25em; }
+.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.50em; }
+.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.75em; }
+
+/* =========================
+ * Pack 1：舒展型（更易读）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p1{ --tc-lh:1.40; --tc-fw:700; --tc-m:0 0 4px; }
+.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.40em; }
+.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.80em; }
+.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.20em; }
+
+/* =========================
+ * Pack 2：强调标题（行高略小 + 字重更高）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p2{ --tc-lh:1.30; --tc-fw:800; --tc-m:0 0 2px; }
+.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.30em; }
+.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.60em; }
+.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.90em; }
+
+/* =========================
+ * Pack 3：网格对齐优先（高度更“硬”）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p3{ --tc-lh:1.28; --tc-fw:650; --tc-m:0; }
+.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.28em; }
+.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.56em; }
+.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.84em; }
+
+/* =========================
+ * Pack 4：更适合英文/混排（行高更大，断词更激进）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p4{ --tc-lh:1.45; --tc-fw:700; --tc-m:0; }
+.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-item-title,
+.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-rank-title,
+.__PFX__-tclamp.__PFX__-tclamp-p4 .rank-title{
+  overflow-wrap: anywhere;
+}
+.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.45em; }
+.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.90em; }
+.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.35em; }
+
+/* =========================
+ * Pack 5：极简文本/榜单更合适（轻字重 + 更小 margin）
+ * ========================= */
+.__PFX__-tclamp.__PFX__-tclamp-p5{ --tc-lh:1.32; --tc-fw:600; --tc-m:0; }
+.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.32em; }
+.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.64em; }
+.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.96em; }
--- a/code/public/static/css/modules/list/item/item_01.css
+++ b/code/public/static/css/modules/list/item/item_01.css
@@ -0,0 +1,58 @@
+/* ========== item_01 基础 ========== */
+.__PFX__-item{
+    background:var(--bg-soft-color);
+    border-radius:12px;
+    overflow:hidden;
+}
+
+.__PFX__-item-link{
+    display:block;
+    color:inherit;
+}
+
+.__PFX__-item-cover{
+    position:relative;
+    overflow:hidden;
+    background:#000;
+}
+
+.__PFX__-item-cover img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    object-position:center center;
+    display:block;
+}
+
+.__PFX__-item-info{
+    padding:10px 12px;
+}
+
+.__PFX__-item-title{
+    font-size:14px;
+    font-weight:600;
+    line-height:1.35;
+}
+
+.__PFX__-item-meta{
+    font-size:12px;
+    color:var(--text-muted-color);
+    margin-top:4px;
+}
+
+.__PFX__-item-desc{
+    font-size:12px;
+    color:var(--text-muted-color);
+    margin-top:6px;
+}
+
+.__PFX__-item-score{
+    position:absolute;
+    top:6px;
+    right:6px;
+    font-size:12px;
+    padding:2px 6px;
+    border-radius:6px;
+    background:rgba(0,0,0,.65);
+    color:#fff;
+}
--- a/code/public/static/css/modules/list/item/item_02.css
+++ b/code/public/static/css/modules/list/item/item_02.css
@@ -0,0 +1,103 @@
+/* item_02：封面横向信息流
+ * 继承：_item_media.css
+ * 无额外样式
+ */
+/* ========== item_02 个性微调（可选） */
+
+.__PFX__-item.item02 .__PFX__-item-title{
+    font-size:15px;
+}
+
+/* item_media.css | item_02 专用（在通用 item 基础上补齐 media 布局） */
+
+.__PFX__-item.item02{
+    width:100%;
+}
+
+/* 横向信息流：默认左右布局（由 shell 控制列数） */
+.__PFX__-item.item02 .__PFX__-item-link{
+    display:flex;
+    gap:12px;
+    align-items:flex-start;
+    text-decoration:none;
+}
+
+/* 封面：横向信息流用 16:9 更稳（宽>高） */
+.__PFX__-item.item02 .__PFX__-item-cover{
+    flex:0 0 42%;
+    max-width:42%;
+    aspect-ratio:16/9;
+    position:relative;
+    overflow:hidden;
+    border-radius:12px;
+    background:var(--bg-soft-color);
+}
+
+.__PFX__-item.item02 .__PFX__-item-cover img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+}
+
+/* 评分角标 */
+.__PFX__-item.item02 .__PFX__-item-score{
+    position:absolute;
+    right:8px;
+    top:8px;
+    padding:2px 6px;
+    font-size:12px;
+    border-radius:999px;
+    background:rgba(0,0,0,.55);
+    color:#fff;
+}
+
+/* 信息区 */
+.__PFX__-item.item02 .__PFX__-item-info{
+    flex:1;
+    min-width:0;
+}
+
+.__PFX__-item.item02 .__PFX__-item-title{
+    font-size:14px;
+    line-height:1.25;
+    margin:0 0 6px;
+    color:var(--text-color);
+}
+
+.__PFX__-item.item02 .__PFX__-item-meta{
+    font-size:12px;
+    color:var(--text-muted-color);
+    margin:0 0 6px;
+}
+
+.__PFX__-item.item02 .__PFX__-item-extra{
+    font-size:12px;
+    color:var(--text-muted-color);
+    margin:0 0 4px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+}
+
+
+
+/* PC：稍微压缩封面占比，提升信息量 */
+@media (min-width: 1024px){
+    .__PFX__-item.item02 .__PFX__-item-cover{
+        flex-basis:36%;
+        max-width:36%;
+        border-radius:14px;
+    }
+    .__PFX__-item.item02 .__PFX__-item-title{
+        font-size:15px;
+    }
+}
+
+/* item02-5*/
+.__PFX__-item.__PFX__-item02  {
+    display: block;
+}
+.__PFX__-item.item02 .__PFX__-item-cover{
+    max-width: 100%;
+}
--- a/code/public/static/css/modules/list/item/item_03.css
+++ b/code/public/static/css/modules/list/item/item_03.css
@@ -0,0 +1,81 @@
+/* ======================================================
+ * item_03 | 极简文本 / 榜单型
+ * ====================================================== */
+
+ .__PFX__-item{
+    display:block;
+}
+
+/* 点击区域 */
+.__PFX__-item-link{
+    display:flex;
+    align-items:flex-start;
+    gap:12px;
+    padding:10px 6px;
+    text-decoration:none;
+    color:var(--text-color);
+}
+
+/* 序号 */
+.__PFX__-item-index{
+    min-width:22px;
+    font-size:14px;
+    font-weight:700;
+    color:var(--text-muted-color);
+    text-align:right;
+}
+
+/* 主体 */
+.__PFX__-item-main{
+    flex:1;
+    min-width:0;
+}
+
+/* 标题 */
+.__PFX__-item-title{
+    font-size:14px;
+    line-height:1.4;
+    font-weight:500;
+    margin:0 0 4px;
+    color:var(--text-color);
+}
+
+/* 元信息 */
+.__PFX__-item-meta{
+    display:flex;
+    flex-wrap:wrap;
+    gap:8px;
+    font-size:12px;
+    color:var(--text-muted-color);
+}
+
+/* ===== 行为适配 ===== */
+
+/* 紧凑 */
+.compact .__PFX__-item-link{
+    padding:6px 4px;
+}
+.compact .__PFX__-item-title{
+    font-size:13px;
+}
+
+/* 宽松 */
+.loose .__PFX__-item-link{
+    padding:14px 8px;
+}
+
+/* Top 榜单 */
+.top .__PFX__-item-index{
+    color:var(--primary-color);
+}
+
+/* 强调 */
+.emphasis .__PFX__-item-link{
+    background:var(--bg-soft-color);
+    border-radius:8px;
+}
+
+/* hover */
+.__PFX__-item-link:hover .__PFX__-item-title{
+    color:var(--primary-color);
+}
--- a/code/public/static/css/modules/list/item/item_04.css
+++ b/code/public/static/css/modules/list/item/item_04.css
@@ -0,0 +1,93 @@
+/* ======================================================
+ * item_04 | 评分 / 热度强化型
+ * ====================================================== */
+
+ .__PFX__-item.poster.score{
+    display:block;
+}
+
+/* 链接 */
+.__PFX__-item-link{
+    display:flex;
+    flex-direction:column;
+    gap:6px;
+    color:var(--text-color);
+    text-decoration:none;
+}
+
+/* ===== 封面 ===== */
+.__PFX__-item-cover{
+    position:relative;
+    width:100%;
+    aspect-ratio: 3 / 4;   /* 比 item_01 稍宽，更利于列表 */
+    overflow:hidden;
+    border-radius:12px;
+    background:var(--bg-soft-color);
+}
+
+.__PFX__-item-cover img{
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+}
+
+/* ===== 评分角标 ===== */
+.__PFX__-item-score{
+    position:absolute;
+    right:6px;
+    top:6px;
+    padding:2px 6px;
+    font-size:12px;
+    font-weight:700;
+    color:#fff;
+    background:var(--accent-color);
+    border-radius:6px;
+    line-height:1;
+}
+
+/* ===== 信息区 ===== */
+.__PFX__-item-info{
+    padding:0 2px;
+}
+
+/* 标题 */
+.__PFX__-item-title{
+    font-size:14px;
+    font-weight:600;
+    line-height:1.4;
+    margin:0;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+}
+
+/* 元信息 */
+.__PFX__-item-meta{
+    display:flex;
+    gap:6px;
+    font-size:12px;
+    color:var(--text-muted-color);
+}
+
+/* ===== 行为适配 ===== */
+
+/* 紧凑 */
+.compact .__PFX__-item-title{
+    font-size:13px;
+}
+
+/* 宽松 */
+.loose .__PFX__-item-link{
+    gap:10px;
+}
+
+/* 强调 */
+.emphasis .__PFX__-item-cover{
+    box-shadow:0 6px 18px var(--shadow-color);
+}
+
+/* hover */
+.__PFX__-item-link:hover .__PFX__-item-title{
+    color:var(--primary-color);
+}
--- a/code/public/static/css/modules/list/item/item_05.css
+++ b/code/public/static/css/modules/list/item/item_05.css
@@ -0,0 +1,94 @@
+/* ======================================================
+ * item_05 | Top 强化榜单型
+ * ====================================================== */
+
+ .__PFX__-item.rank{
+    display:block;
+}
+
+/* 主链接 */
+.__PFX__-rank-link{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    padding:10px 8px;
+    text-decoration:none;
+    color:var(--text-color);
+}
+
+/* ===== 排名数字 ===== */
+.__PFX__-rank-no{
+    min-width:28px;
+    font-size:16px;
+    font-weight:700;
+    text-align:center;
+    color:var(--text-muted-color);
+}
+
+/* Top 1-3 强化 */
+.__PFX__-rank-no.rank-1{
+    color:#d32f2f;
+    font-size:18px;
+}
+.__PFX__-rank-no.rank-2{
+    color:#f57c00;
+}
+.__PFX__-rank-no.rank-3{
+    color:#fbc02d;
+}
+
+/* 主体 */
+.__PFX__-rank-main{
+    flex:1;
+    min-width:0;
+}
+
+/* 标题 */
+.__PFX__-rank-title{
+    font-size:14px;
+    font-weight:600;
+    margin:0 0 4px;
+    line-height:1.4;
+}
+
+/* 元信息 */
+.__PFX__-rank-meta{
+    display:flex;
+    gap:8px;
+    font-size:12px;
+    color:var(--text-muted-color);
+    flex-wrap:wrap;
+}
+
+/* 评分 / 热度 */
+.__PFX__-rank-score{
+    font-size:13px;
+    font-weight:600;
+    color:var(--accent-color);
+}
+
+/* ===== 行为适配 ===== */
+
+/* 紧凑 */
+.compact .__PFX__-rank-link{
+    padding:6px 6px;
+}
+.compact .__PFX__-rank-title{
+    font-size:13px;
+}
+
+/* 宽松 */
+.loose .__PFX__-rank-link{
+    padding:14px 10px;
+}
+
+/* 强调模块 */
+.emphasis .__PFX__-rank-link{
+    background:var(--bg-soft-color);
+    border-radius:10px;
+}
+
+/* hover */
+.__PFX__-rank-link:hover .__PFX__-rank-title{
+    color:var(--primary-color);
+}
--- a/code/public/static/css/modules/list/list_base.css
+++ b/code/public/static/css/modules/list/list_base.css
@@ -0,0 +1,10 @@
+.__PFX__-list{
+    display: grid;
+    gap: var(--list-gap, 16px);
+    align-items: stretch;
+}
+ol.__PFX__-list{
+    list-style: none;
+    padding-left: 0;
+}
+
--- a/code/public/static/css/modules/list/list_cols.css
+++ b/code/public/static/css/modules/list/list_cols.css
@@ -0,0 +1,28 @@
+
+/* LG */
+@media (min-width:1200px){
+.__PFX__-list{
+  grid-template-columns:repeat(var(--cols-lg),1fr);
+}
+}
+
+/* MD */
+@media (min-width:768px) and (max-width:1199px){
+.__PFX__-list{
+  grid-template-columns:repeat(var(--cols-md),1fr);
+}
+}
+
+/* SM */
+@media (min-width:576px) and (max-width:767px){
+.__PFX__-list{
+  grid-template-columns:repeat(var(--cols-sm),1fr);
+}
+}
+
+/* H5 */
+@media (max-width:575px){
+.__PFX__-list{
+  grid-template-columns:repeat(var(--cols-h5),1fr);
+}
+}
--- a/code/public/static/css/modules/list/list_rows.css
+++ b/code/public/static/css/modules/list/list_rows.css
@@ -0,0 +1,29 @@
+@media (min-width:1200px){
+  .__PFX__-list[data-max-lg="18"] > .__PFX__-item:nth-child(n+19),
+  .__PFX__-list[data-max-lg="24"] > .__PFX__-item:nth-child(n+25),
+  .__PFX__-list[data-max-lg="36"] > .__PFX__-item:nth-child(n+37){
+    display:none;
+  }
+}
+@media (min-width:768px) and (max-width:1199px){
+  .__PFX__-list[data-max-md="10"] > .__PFX__-item:nth-child(n+11),
+  .__PFX__-list[data-max-md="15"] > .__PFX__-item:nth-child(n+16),
+  .__PFX__-list[data-max-md="20"] > .__PFX__-item:nth-child(n+21){
+    display:none;
+  }
+}
+@media (min-width:576px) and (max-width:767px){
+  .__PFX__-list[data-max-sm="6"]  > .__PFX__-item:nth-child(n+7),
+  .__PFX__-list[data-max-sm="9"]  > .__PFX__-item:nth-child(n+10),
+  .__PFX__-list[data-max-sm="12"] > .__PFX__-item:nth-child(n+13){
+    display:none;
+  }
+}
+@media (max-width:575px){
+  .__PFX__-list[data-max-h5="4"]  > .__PFX__-item:nth-child(n+5),
+  .__PFX__-list[data-max-h5="6"]  > .__PFX__-item:nth-child(n+7),
+  .__PFX__-list[data-max-h5="8"]  > .__PFX__-item:nth-child(n+9),
+  .__PFX__-list[data-max-h5="10"] > .__PFX__-item:nth-child(n+11){
+    display:none;
+  }
+}
--- a/code/public/static/css/modules/list/shell/shell_A.css
+++ b/code/public/static/css/modules/list/shell/shell_A.css
@@ -0,0 +1,75 @@
+/* shell_A_flow.css | 基础流式 Flow Shell */
+
+.__PFX__-shellA {
+    width: 100%;
+}
+
+/* 列表容器 */
+/* .__PFX__-shellA-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+} */
+
+/*
+ * Shell-A 只控制：
+ * - Item 之间的间距
+ * - 整体流式节奏
+ * 不控制：
+ * - Item 内部结构
+ * - Item 字段样式
+ */
+
+/* 可选：高密度模式（给 Behavior 用） */
+.__PFX__-shellA.compact .__PFX__-shellA-list {
+    gap: 6px;
+}
+
+/* 可选：分组弱分隔（Behavior-E 用） */
+.__PFX__-shellA.grouped .__PFX__-shellA-list>* {
+    padding-bottom: 6px;
+    border-bottom: 1px dashed var(--border-color);
+}
+
+.__PFX__-shellA.grouped .__PFX__-shellA-list>*:last-child {
+    border-bottom: none;
+}
+
+/* shell_A - Flow */
+/* .__PFX__-shellA-list{
+    display:grid;
+    grid-template-columns: repeat(var(--cols-h5), 1fr);
+    gap:14px;
+} */
+
+/* H5 多列 */
+/* .h5-col-2 .__PFX__-shellA-list{
+    grid-template-columns:repeat(2,1fr);
+} */
+
+/* .h5-col-3 .__PFX__-shellA-list{
+    grid-template-columns:repeat(3,1fr);
+} */
+
+/* PC - sm */
+/* @media (min-width: 768px){
+    .__PFX__-shellA-list{
+        grid-template-columns: repeat(var(--cols-pc-sm), 1fr);
+    }
+} */
+
+/* PC - md */
+/* @media (min-width: 1024px){
+    .__PFX__-shellA-list{
+        grid-template-columns: repeat(var(--cols-pc-md), 1fr);
+        gap:18px 20px;
+    }
+} */
+
+/* PC - lg */
+/* @media (min-width: 1440px){
+    .__PFX__-shellA-list{
+        grid-template-columns: repeat(var(--cols-pc-lg), 1fr);
+        gap:20px 24px;
+    }
+} */
--- a/code/public/static/css/modules/list/shell/shell_B.css
+++ b/code/public/static/css/modules/list/shell/shell_B.css
@@ -0,0 +1,49 @@
+/* shell_B_card.css | 卡片栅格 Card Grid Shell */
+
+.__PFX__-shellB{
+    width:100%;
+}
+
+/* 栅格容器 */
+/* .__PFX__-shellB-grid{
+    display:grid;
+    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
+    gap:14px;
+} */
+
+/*
+ * Shell-B 只控制：
+ * - grid 列数策略
+ * - 卡片之间的间距
+ * - 响应式节奏
+ *
+ * 不控制：
+ * - Item 内部宽高
+ * - Item 字体 / 图片 / meta
+ */
+
+/* 中密度（默认） */
+
+/* 高密度模式（Behavior-C1） */
+/* .__PFX__-shellB.compact .__PFX__-shellB-grid{
+    gap:10px;
+    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
+} */
+
+/* 低密度模式（Behavior-C3） */
+/* .__PFX__-shellB.loose .__PFX__-shellB-grid{
+    gap:18px;
+    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
+} */
+
+/* 移动端优化 */
+/* @media (max-width: 768px){
+    .__PFX__-shellB-grid{
+        grid-template-columns:repeat(2,1fr);
+        gap:12px;
+    }
+
+    .__PFX__-shellB.compact .__PFX__-shellB-grid{
+        gap:8px;
+    }
+} */
--- a/code/public/static/css/modules/list/shell/shell_C.css
+++ b/code/public/static/css/modules/list/shell/shell_C.css
@@ -0,0 +1,50 @@
+/* shell_C_ranking.css | 榜单序列 Ranking Shell */
+
+.__PFX__-shellC{
+    width:100%;
+}
+
+/* 榜单列表 */
+.__PFX__-shellC-list{
+    list-style:none;
+    margin:0;
+    padding:0;
+    display:flex;
+    flex-direction:column;
+}
+
+/*
+ * Shell-C 只负责：
+ * - 榜单的整体序列结构
+ * - item 之间的分隔节奏
+ * - Top 区域的整体区分
+ *
+ * 不负责：
+ * - Item 内部的序号样式
+ * - Item 的字段显示
+ */
+
+/* 每一行榜单 */
+.__PFX__-shellC-item{
+    padding:2px 0;
+}
+
+/* 分隔线（默认） */
+.__PFX__-shellC-item + .__PFX__-shellC-item{
+    border-top:1px solid var(--border-color);
+}
+
+/* Top 区域强化（Behavior-B 用） */
+.__PFX__-shellC.top .__PFX__-shellC-item:nth-child(-n+3){
+    background:var(--bg-soft-color);
+}
+
+/* 高密度榜单（Behavior-C1） */
+.__PFX__-shellC.compact .__PFX__-shellC-item{
+    padding:0;
+}
+
+/* 松散榜单（Behavior-C3） */
+.__PFX__-shellC.loose .__PFX__-shellC-item{
+    padding:6px 0;
+}
--- a/code/public/static/css/modules/list/shell/shell_D.css
+++ b/code/public/static/css/modules/list/shell/shell_D.css
@@ -0,0 +1,68 @@
+/* shell_D_grouped.css | 分组区块 Grouped Shell */
+
+.__PFX__-shellD{
+    width:100%;
+    display:flex;
+    flex-direction:column;
+    gap:20px;
+}
+
+/* 单个分组 */
+.__PFX__-shellD-group{
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+    padding:12px;
+    background:var(--bg-soft-color);
+    border-radius:12px;
+}
+
+/* 分组头 */
+.__PFX__-shellD-head{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+}
+
+/* 标题 */
+.__PFX__-shellD-title{
+    margin:0;
+    font-size:16px;
+    font-weight:700;
+    color:var(--text-color);
+}
+
+/* 分组内容 */
+.__PFX__-shellD-body{
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+}
+
+/*
+ * Shell-D 只控制：
+ * - 分组块结构
+ * - 分组之间的层级关系
+ * - 分组内部的 Item 间距
+ *
+ * 不控制：
+ * - Item 布局
+ * - Item 结构
+ */
+
+/* 高密度分组（Behavior-C1） */
+.__PFX__-shellD.compact .__PFX__-shellD-group{
+    padding:8px;
+    gap:6px;
+}
+
+/* 松散分组（Behavior-C3） */
+.__PFX__-shellD.loose .__PFX__-shellD-group{
+    padding:16px;
+    gap:14px;
+}
+
+/* 可选：分组强调（Behavior-B） */
+.__PFX__-shellD.emphasis .__PFX__-shellD-group{
+    box-shadow:0 6px 18px var(--shadow-color);
+}
--- a/code/public/static/css/modules/list/title/title_A.css
+++ b/code/public/static/css/modules/list/title/title_A.css
@@ -0,0 +1,13 @@
+.__PFX__-titleA{
+    margin:18px 0 12px;
+}
+.__PFX__-titleA-main{
+    font-size:18px;
+    font-weight:700;
+    color:var(--text-color);
+}
+.__PFX__-titleA-sub{
+    margin-top:4px;
+    font-size:13px;
+    color:var(--text-muted-color);
+}
--- a/code/public/static/css/modules/list/title/title_B.css
+++ b/code/public/static/css/modules/list/title/title_B.css
@@ -0,0 +1,14 @@
+.__PFX__-titleB{
+    text-align:center;
+    margin:24px 0 16px;
+}
+.__PFX__-titleB h2{
+    font-size:20px;
+    font-weight:700;
+}
+.__PFX__-titleB span{
+    display:block;
+    margin-top:6px;
+    font-size:13px;
+    color:var(--text-muted-color);
+}
--- a/code/public/static/css/modules/list/title/title_C.css
+++ b/code/public/static/css/modules/list/title/title_C.css
@@ -0,0 +1,11 @@
+.__PFX__-titleC{
+    margin:16px 0 10px;
+}
+.__PFX__-titleC h2{
+    display:inline-block;
+    padding:6px 12px;
+    font-size:16px;
+    border-radius:6px;
+    background:var(--primary-color);
+    color:#fff;
+}
--- a/code/public/static/css/modules/list/title/title_D.css
+++ b/code/public/static/css/modules/list/title/title_D.css
@@ -0,0 +1,16 @@
+.__PFX__-titleD{
+    display:flex;
+    align-items:center;
+    gap:8px;
+    margin:18px 0 12px;
+}
+.__PFX__-titleD-icon{
+    width:6px;
+    height:18px;
+    border-radius:3px;
+    background:var(--primary-color);
+}
+.__PFX__-titleD h2{
+    font-size:17px;
+    font-weight:700;
+}
--- a/code/public/static/css/modules/list/title/title_E.css
+++ b/code/public/static/css/modules/list/title/title_E.css
@@ -0,0 +1,15 @@
+.__PFX__-titleE{
+    display:flex;
+    align-items:baseline;
+    gap:6px;
+    margin:20px 0 14px;
+}
+.__PFX__-titleE-rank{
+    font-size:14px;
+    font-weight:700;
+    color:var(--accent-color);
+}
+.__PFX__-titleE h2{
+    font-size:18px;
+    font-weight:700;
+}
--- a/code/public/static/css/modules/list/title/title_F.css
+++ b/code/public/static/css/modules/list/title/title_F.css
@@ -0,0 +1,45 @@
+/* ================================
+ * Title_F｜分类区块标题（带更多）
+ * ================================ */
+
+ .__PFX__-titleF{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:12px;
+    margin:18px 0 10px;
+}
+
+/* 左侧标题区 */
+.__PFX__-titleF-left{
+    display:flex;
+    align-items:baseline;
+    gap:8px;
+}
+
+.__PFX__-titleF-main{
+    font-size:16px;
+    font-weight:700;
+    color:var(--text-color);
+    line-height:1.2;
+}
+
+.__PFX__-titleF-sub{
+    font-size:12px;
+    color:var(--text-muted-color);
+}
+
+/* 右侧“更多” */
+.__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-more a:hover{
+    opacity:.85;
+}