From: wang.yu <wang.yu@advantech.com>
Date: Mon, 17 Aug 2026 14:20:42 +0000 (+0800)
Subject: UI: 页面样式库缩略图加高，整页可见（3 列 + 16:9 自适应）
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=39c11522b4c8e26fa13c18c0bd1e856b72c2ee74;p=StationBuilder.git

UI: 页面样式库缩略图加高，整页可见（3 列 + 16:9 自适应）

- 样式卡片网格由 4 列改为 3 列，单卡更宽
- 缩略图去掉固定 150px 高度，改为 aspect-ratio:16/9 + min-height:200px，配合 object-fit:contain 展示完整页面，不再截断底部
- 灯箱大图 max-height 72vh -> 88vh
- 同步更新 design-doc 第 5.11 节说明
---

diff --git a/app/globals.css b/app/globals.css
index 27dde68..509b512 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -139,16 +139,16 @@
 .project-grid article{position:relative}
 .card-del{position:absolute;top:8px;right:8px;border:1px solid #f0c4bd;background:#fff;color:var(--red);border-radius:4px;height:26px;padding:0 9px;font-size:11px;cursor:pointer}
 .card-del:hover{background:#fdeae6;border-color:var(--red)}
-.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:14px 0 4px}
+.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 0 4px}
 .style-card{border:1px solid var(--line);background:white;display:flex;flex-direction:column}
-.style-card .style-thumb{position:relative;height:150px;background:#f2f5f7;display:grid;place-items:center;cursor:zoom-in;overflow:hidden}
+.style-card .style-thumb{position:relative;aspect-ratio:16/9;min-height:200px;background:#f2f5f7;display:grid;place-items:center;cursor:zoom-in;overflow:hidden}
 .style-card .style-thumb img{width:100%;height:100%;object-fit:contain}
 .style-card .style-thumb .zoom{position:absolute;right:8px;bottom:8px;background:#0008;color:#fff;width:24px;height:24px;border-radius:3px;display:grid;place-items:center;font-size:13px}
 .style-info{padding:11px 12px 2px}
 .style-info h3{font-size:14px;margin:0}
 .style-info small{color:#999;font-size:10px}
 .style-card footer{display:flex;justify-content:flex-end;gap:14px;padding:8px 12px}
-.style-lightbox{max-width:90vw;max-height:72vh}
+.style-lightbox{max-width:92vw;max-height:88vh}
 .style-upload-row{display:flex;gap:12px;align-items:stretch}
 .style-upload-prev{width:150px;height:120px;border:1px solid #d8dde0;display:grid;place-items:center;background:#f7f9fa;overflow:hidden}
 .style-upload-prev img{width:100%;height:100%;object-fit:contain}
diff --git a/public/design-doc.html b/public/design-doc.html
index bb897cd..1043cef 100644
--- a/public/design-doc.html
+++ b/public/design-doc.html
@@ -283,7 +283,7 @@
   <h3>5.11 页面样式库（styleLibrary）</h3>
   <table>
     <tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
-    <tr><td>样式卡片网格（缩略图 + 名称 + 编辑/删除）</td><td>浏览已有样式</td><td>GET /api/db/page-styles</td><td>缩略图点开大图预览；编辑/删除生效</td></tr>
+    <tr><td>样式卡片网格（缩略图 + 名称 + 编辑/删除）</td><td>浏览已有样式</td><td>GET /api/db/page-styles</td><td>3 列布局，缩略图按 16:9 比例自适应高度（object-fit:contain，整页完整可见、不被截断）；缩略图点开大图预览；编辑/删除生效</td></tr>
     <tr><td>「＋ 新增样式」</td><td>上传样式（JSON + 预览图）</td><td>POST /api/db/page-styles</td><td>打开编辑模态，填写名称/预览图/JSON 后保存</td></tr>
     <tr><td>样式大图预览（StylePreview）</td><td>查看样式原图</td><td>GET /api/db/page-styles/:id/image</td><td>模态展示</td></tr>
   </table>