[216_29] 模版页面格式优化 (#3211)

Author: Yuki-Nagori

devel/216_29.md

@@ -0,0 +1,38 @@
+# 216_29 模板中心网格间距与边距调整
+
+## 如何测试
+
+1. 编译：`xmake b stem`
+2. 启动 Mogan，打开启动页的 "Template Center" 页面。
+3. **间距验证**：确认卡片之间的间距从 13px 增加到 16px，视觉上更舒展。
+4. **边距验证**：确认网格左右两侧有 10px 边距，上下有 5px 边距，不再贴边。
+
+## 2026/04/23 实现说明
+
+### What
+
+调整模板中心网格的间距与边距参数，使卡片排列更舒展、网格区域不再贴边：
+
+**src/Plugins/Qt/qt_template_page.cpp** (修改)
+- **网格间距增加**：
+  - `kGridSpacing`: 13 → **16**
+  - 卡片之间的间距略微增加，视觉上更宽松。
+
+- **网格边距拆分与调整**：
+  - 将原来的 `kGridMarginPx = 0`（仅控制上下边距）拆分为：
+    - `kGridMarginYPx = 5`：网格布局上下边距
+    - `kGridMarginXPx = 10`：网格布局左右边距
+  - `setContentsMargins` 从 `(0, margin, 0, margin)` 改为 `(marginX, marginY, marginX, marginY)`。
+  - 左右新增 10px 边距，上下新增 5px 边距，防止卡片贴到滚动区域边缘。
+
+### Why
+
+1. **间距过密**：13px 的卡片间距在 176px 宽卡片下显得略紧凑，增加至 16px 后视觉更舒展。
+2. **贴边问题**：旧实现中左右边距为 0，最左侧/最右侧卡片直接贴到滚动区域边界，不够美观。
+3. **边距精细化**：将单一 `kGridMarginPx` 拆分为 X/Y 两个独立常量，便于后续分别调整横向和纵向留白。
+
+### How
+
+1. 增加 `kGridSpacing` 数值，直接扩大卡片间隙。
+2. 引入 `kGridMarginXPx` 和 `kGridMarginYPx` 替换旧的 `kGridMarginPx`。
+3. 所有数值统一走 `DpiUtils::scaled()` 缩放，保证高 DPI 下显示一致。

src/Plugins/Qt/qt_template_page.cpp

@@ -49,7 +49,7 @@ constexpr int THUMBNAIL_HEIGHT= 227;
 constexpr int kPageMargin          = 16;  // 页面边距（减小边白）
 constexpr int kPageSpacing         = 24;  // 页面主布局间距
 constexpr int kCategorySpacing     = 8;   // 分类按钮间距
-constexpr int kGridSpacing         = 13;  // 模板网格间距
+constexpr int kGridSpacing         = 16;  // 模板网格间距
 constexpr int kCardWidth           = 176; // 模板卡片宽度
 constexpr int kCardHeight          = 243; // 模板卡片高度（仅缩略图区域）
 constexpr int kCardMargin          = 8;   // 卡片内边距
@@ -72,7 +72,8 @@ constexpr int kThumbBorderWidthPx  = 1;   // 缩略图边框宽度
 constexpr int kUseButtonRadiusPx   = 4;   // Use Template 按钮圆角
 constexpr int kUseButtonPadYPx     = 8;   // Use Template 按钮纵向内边距
 constexpr int kUseButtonPadXPx     = 24;  // Use Template 按钮横向内边距
-constexpr int kGridMarginPx        = 0;   // 网格布局上下边距
+constexpr int kGridMarginYPx       = 5;   // 网格布局上下边距
+constexpr int kGridMarginXPx       = 10;  // 网格布局左右边距
 constexpr int kCategoryBtnRadiusPx = 12;  // 分类按钮圆角
 constexpr int kCategoryBtnPadYPx   = 6;   // 分类按钮纵向内边距
 constexpr int kCategoryBtnPadXPx   = 14;  // 分类按钮横向内边距
@@ -173,8 +174,9 @@ QTTemplatePage::setupUI () {
   gridWidget_->setObjectName ("startup-tab-grid");
   gridLayout_= new QGridLayout (gridWidget_);
   gridLayout_->setSpacing (DpiUtils::scaled (kGridSpacing));
-  gridLayout_->setContentsMargins (0, DpiUtils::scaled (kGridMarginPx), 0,
-                                   DpiUtils::scaled (kGridMarginPx));
+  gridLayout_->setContentsMargins (
+      DpiUtils::scaled (kGridMarginXPx), DpiUtils::scaled (kGridMarginYPx),
+      DpiUtils::scaled (kGridMarginXPx), DpiUtils::scaled (kGridMarginYPx));
 
   scrollArea_->setWidget (gridWidget_);
   layout->addWidget (scrollArea_, 1);