feat: 合集区支持「全部平铺 / 标签页折叠」两种展示方式

后台「设置 → 合集显示方式」一键切换,只影响底部「合集」区,
中间那些普通网格板块不受影响:

- tabs(默认,标签页折叠):一次只平铺当前这一个合集(原行为)。
- flat(全部平铺):每个合集各占一块,和网格板块同构,一眼看全、不用点。
  适合「每个合集里条目都不多」的情况;合集一多就切回标签页折叠。

实现:
- index.php 先收集「有内容的合集」,空合集不再占位(标签页模式下也不会
  多出一个空标签),再按设置渲染成标签页或平铺区块;
  输出 data-layout="tabs|flat" 便于断言与排查。
- admin/index.php 新增选择框 + 说明;admin/actions.php 白名单校验,
  非法值一律回退成 tabs。
- style.css 新增 3 条 .collections.flat 规则(平铺区块间距、最后一块不留底边距)。
- README 更新「页面结构」与特点说明。

验证:
- e2e 新增场景 6(93/93 通过):两种模式各自的结构断言、非法值回退、
  保存该项不会弄丢其它设置、空合集不占位。
- 真实几何检查(flat / tabs 各 5 个视口,30/30 通过):无横向溢出、正文列宽度正常。
- 部署诊断段在线上真机切 flat → 抓首页 → 断言 → 切回 tabs 并断言已复原。
This commit is contained in:
2026-09-28 17:51:10 +08:00
parent 4ba512b147
commit c3ba71c4ac
5 changed files with 62 additions and 19 deletions
+4
View File
@@ -162,6 +162,10 @@ a { text-decoration: none; color: inherit; }
}
.tab-panel { display: none; }
.tab-panel.active { display: flex; animation: fadeUp .28s ease both; }
/* 「全部平铺」模式:每个合集各占一块,与上面的网格板块一致(此时没有 .tabs) */
.collections.flat .collections-title { margin-bottom: 16px; }
.collections.flat .mylist { margin: 0 0 16px; }
.collections.flat .mylist:last-child { margin-bottom: 0; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }