gpttemp

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;
+    }
+} */

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;
+    }
+} */

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;
+}

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);
+}