[222_74] 优化标签栏比例和样式 (#3237)

Author: Yuki-Nagori

TeXmacs/misc/images/images.qrc

@@ -5,13 +5,19 @@
         <file>ocr-button/right-align.svg</file>
         <file>ocr-button/ocr.svg</file>
 
+        <file>tabpage/add.svg</file>
+        <file>tabpage/close.svg</file>
+
 
         <!-- dark theme -->
         <file>ocr-button/left-align-white.svg</file>
         <file>ocr-button/middle-align-white.svg</file>
         <file>ocr-button/right-align-white.svg</file>
         <file>ocr-button/ocr-white.svg</file>
 
+        <file>tabpage/add-white.svg</file>
+        <file>tabpage/close-white.svg</file>
+
         <!-- tutorial -->
         <file>tutorial/ocr-tutorial.gif</file>
         <file>tutorial/magic-paste-tutorial.gif</file>

TeXmacs/misc/images/tabpage/add-white.svg

@@ -354,14 +354,9 @@ QDockWidget::title {
 ****************************************************************************/
 /* Tab Page 基础样式 */
 QTMTabPage {
-  padding: 8px 12px;
   color: #FFFFFF;
   background-color: transparent;
   border: 1px solid transparent;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
 QTMTabPage:hover {
@@ -372,65 +367,35 @@ QTMTabPage:hover {
 QTMTabPage:checked {
   background-color: #333333;
   border: 1px solid #4c4c4c;
-  border-bottom: none;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
   color: #FFFFFF;
 }
 
-QTMTabPage QToolButton#tabpage-close-button {
+QTMTabPage QPushButton#tabpage-close-button {
   background-color: transparent;
   border: none;
-  padding: 0;
-  margin-left: 6px;
-  border-radius: 4px;
-  min-width: 20px;
-  min-height: 20px;
-  max-width: 20px;
-  max-height: 20px;
-  color: #ffffff;
-}
-
-QTMTabPage QToolButton#tabpage-close-button[platform="mac"] {
-  min-width: 16px;
-  min-height: 16px;
-  max-width: 16px;
-  max-height: 16px;
-  font-size: 12pt;
+  qproperty-iconNormal: url(":/tabpage/close-white.svg");
+  qproperty-iconHovered: url(":/tabpage/close-white.svg");
 }
 
-QTMTabPage QToolButton#tabpage-close-button:hover {
+QTMTabPage QPushButton#tabpage-close-button:hover {
   background-color: #E81123;
-  color: #FFFFFF;
 }
 
-QTMTabPage QToolButton#tabpage-close-button:pressed {
+QTMTabPage QPushButton#tabpage-close-button:pressed {
   background-color: #C50F1F;
 }
 
-QTMTabPageContainer QToolButton#add-tab-button {
+QTMTabPageContainer QPushButton#add-tab-button {
   background-color: transparent;
   border: none;
-  color: #FFFFFF;
-  font-weight: bold;
-  border-radius: 6px;
-  padding: 0;
-  font-size: 12pt;
-}
-
-QTMTabPageContainer QToolButton#add-tab-button[platform="mac"] {
-  min-width: 20px;
-  min-height: 20px;
-  max-width: 20px;
-  max-height: 20px;
-  font-size: 11pt;
+  qproperty-iconNormal: url(":/tabpage/add-white.svg");
 }
 
-QTMTabPageContainer QToolButton#add-tab-button:hover {
+QTMTabPageContainer QPushButton#add-tab-button:hover {
   background-color: rgba(255, 255, 255, 0.06);
 }
 
-QTMTabPageContainer QToolButton#add-tab-button:pressed {
+QTMTabPageContainer QPushButton#add-tab-button:pressed {
   background-color: rgba(255, 255, 255, 0.10);
 }
 

TeXmacs/misc/images/tabpage/add.svg

@@ -344,14 +344,9 @@ QDockWidget::title {
 ****************************************************************************/
 /* Tab Page 基础样式 */
 QTMTabPage {
-  padding: 8px 12px;
   color: #000000;
   background-color: transparent;
   border: 1px solid transparent;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
 QTMTabPage:hover {
@@ -362,63 +357,34 @@ QTMTabPage:hover {
 QTMTabPage:checked {
   background-color: #FFFFFF;
   border: 1px solid #CFCFCF;
-  border-bottom: none;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
 }
 
-QTMTabPage QToolButton#tabpage-close-button {
+QTMTabPage QPushButton#tabpage-close-button {
   background-color: transparent;
   border: none;
-  padding: 0;
-  margin-left: 6px;
-  border-radius: 4px;
-  min-width: 20px;
-  min-height: 20px;
-  max-width: 20px;
-  max-height: 20px;
-}
-
-QTMTabPage QToolButton#tabpage-close-button[platform="mac"] {
-  min-width: 16px;
-  min-height: 16px;
-  max-width: 16px;
-  max-height: 16px;
-  font-size: 12pt;
+  qproperty-iconNormal: url(":/tabpage/close.svg");
+  qproperty-iconHovered: url(":/tabpage/close-white.svg");
 }
 
-QTMTabPage QToolButton#tabpage-close-button:hover {
+QTMTabPage QPushButton#tabpage-close-button:hover {
   background-color: #E81123;
-  color: #FFFFFF;
 }
 
-QTMTabPage QToolButton#tabpage-close-button:pressed {
+QTMTabPage QPushButton#tabpage-close-button:pressed {
   background-color: #C50F1F;
 }
 
-QTMTabPageContainer QToolButton#add-tab-button {
+QTMTabPageContainer QPushButton#add-tab-button {
   background-color: transparent;
   border: none;
-  color: #2c2c2c;
-  font-weight: bold;
-  border-radius: 6px;
-  padding: 0;
-  font-size: 12pt;
-}
-
-QTMTabPageContainer QToolButton#add-tab-button[platform="mac"] {
-  min-width: 20px;
-  min-height: 20px;
-  max-width: 20px;
-  max-height: 20px;
-  font-size: 11pt;
+  qproperty-iconNormal: url(":/tabpage/add.svg");
 }
 
-QTMTabPageContainer QToolButton#add-tab-button:hover {
+QTMTabPageContainer QPushButton#add-tab-button:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
 
-QTMTabPageContainer QToolButton#add-tab-button:pressed {
+QTMTabPageContainer QPushButton#add-tab-button:pressed {
   background-color: rgba(0, 0, 0, 0.12);
 }
 

TeXmacs/misc/images/tabpage/close-white.svg

@@ -45,6 +45,6 @@
         ((balloon (eval `(verbatim ,tab-title))
                   (eval `(verbatim ,doc-path)))
          (window-set-view view-win view #t)) ;; #t stansd for focus
-        ((balloon "✕" "Close") (safely-kill-tabpage-by-url view-win view buf))
+        ((balloon "" "Close") (safely-kill-tabpage-by-url view-win view buf))
         (eval active?)
       ))))

TeXmacs/misc/images/tabpage/close.svg

@@ -0,0 +1,78 @@
+# 222_75 TabPage UI 重构：统一跨平台样式并引入 SVG 图标
+
+## 如何测试
+
+1. 编译：`xmake b stem`
+2. 启动 Mogan，确认标签页栏（TabPage Bar）视觉正常。
+3. 确认关闭按钮和添加按钮显示为 SVG 图标（`×` 和 `+`），而非文字或原生按钮。
+4. 确认关闭按钮仅在鼠标 Hover 或标签处于选中状态时显示，移出后隐藏。
+5. 确认启动页（Startup Tab）标签文字居中对齐。
+6. 分别验证亮色/暗色主题下图标颜色正常（亮色主题关闭按钮 hover 变红，暗色主题图标为白色）。
+7. 验证标签页拖拽排序功能正常。
+8. 分别测试 macOS / Windows / Linux 下的标签页高度和按钮尺寸一致性。
+
+## 2026/04/28 实现说明
+
+### What
+
+对 TabPage 组件进行全面 UI 重构，将关闭按钮和添加按钮从 `QToolButton` 迁移到 `QWK::WindowButton`，引入 SVG 图标资源，并彻底移除 macOS / Windows / Linux 三平台硬编码差异，实现跨平台样式统一。
+
+#### 修改文件
+
+**src/Plugins/Qt/QTMTabPage.cpp / hpp**
+- 关闭按钮 `m_closeBtn` 和添加按钮 `m_addTabButton` 类型从 `QToolButton*` 改为 `QWK::WindowButton*`。
+- 移除全部 `#ifdef Q_OS_MAC` 分支：包括 `TAB_CONTENT_VERTICAL_OFFSET`、`getScaledSystemBarHeight`、`getScaledSystemButtonHeight`、`getScaledTabCloseButtonSize` 等。
+- DPI 缩放统一使用 `DpiUtils::scaled()`，新增 `getScaledAddButtonHeight()` / `getScaledCloseButtonHeight()` 替代旧函数。
+- 新增 `ADD_BUTTON_SIZE = 20`、`CLOSE_BUTTON_SIZE = 18` 常量。
+- `STARTUP_TAB_MAX_WIDTH_BASE` 区分社区版（`IS_COMMUNITY`）和商业版：120 / 90。
+- 关闭按钮连接逻辑改为 `QPointer<QAction>` 保护，防止 action 被释放后悬空触发。
+- `paintEvent` 中启动页标签文字改为 `Qt::AlignCenter`，普通标签保持 `Qt::AlignLeft`。
+- `updateCloseButtonVisibility` 增加条件：仅在 `underMouse() || isChecked()` 时显示关闭按钮。
+- 默认构造函数不再调用 `initializeCloseButton()`（`dummyTabPage` 不需要关闭按钮），并在所有访问 `m_closeBtn` 处补充空指针检查。
+- `m_closeBtn` 成员添加 `= nullptr` 默认初始化。
+- `enterEvent` 补充 `override` 关键字。
+- 移除未使用的全局变量 `g_hiddentTabIndex`。
+- `QTMTabPageContainer` 析构函数移除冗余的 `delete m_addTabButton`。
+- `arrangeTabPages` 中 `addButtonWidth` 语义修正：`height()` → `width()`。
+
+**src/Plugins/Qt/qt_tm_widget.cpp**
+- 标题栏高度统一为 `42 * scale`（macOS 原特殊值 20 移除）。
+- 系统按钮尺寸统一为 `60 * scale` 宽、`42 * scale` 高（移除 macOS 特殊逻辑）。
+- 图标基础尺寸统一为 `16 * scale`（macOS 原特殊值 20 移除）。
+- 工具栏高度统一为 `DpiUtils::scaled(32)`，tab row 高度统一为 `DpiUtils::scaled(38)`（移除 macOS 特殊值 30）。
+- 登录按钮图标尺寸统一为 `12`（macOS 原特殊值 20 移除）。
+- 登出按钮图标尺寸统一为 `20`（macOS 原特殊值 30 移除）。
+
+**TeXmacs/misc/themes/liii.css / liii-night.css**
+- `QTMTabPage` 移除硬编码 `padding`、`border-radius` 和 `border-bottom: none`，改为由 C++ 动态计算。
+- 关闭按钮和添加按钮选择器从 `QToolButton` 改为 `QPushButton`。
+- 移除全部 `[platform="mac"]` 规则。
+- 关闭按钮通过 `qproperty-iconNormal` / `qproperty-iconHovered` 设置图标（亮色：`close.svg` / `close-white.svg`；暗色：`close-white.svg`）。
+- 添加按钮通过 `qproperty-iconNormal` 设置图标（亮色：`add.svg`；暗色：`add-white.svg`）。
+- 移除关闭按钮的 `min-width`、`max-width`、`margin-left` 等硬编码尺寸。
+- 移除添加按钮的 `font-weight: bold`、`font-size`、`color` 等文字样式。
+
+**TeXmacs/misc/images/images.qrc**
+- 新增 4 个 SVG 资源文件：`tabpage/add.svg`、`tabpage/close.svg`、`tabpage/add-white.svg`、`tabpage/close-white.svg`。
+
+**TeXmacs/misc/images/tabpage/*.svg**
+- 新增 4 个 SVG 图标文件，基于 48×48 viewBox，提供亮色/暗色两版。
+
+**TeXmacs/progs/texmacs/menus/tabpage-menu.scm**
+- 关闭按钮文字从 `"✕"` 改为 `""`（空字符串），因为图标已由 CSS/C++ 接管。
+
+### Why
+
+1. **跨平台统一**：旧代码中 macOS 拥有大量独立分支（标题栏高度、按钮尺寸、字体大小等），维护成本高且视觉不一致。统一后三平台代码完全一致。
+2. **图标化**：关闭按钮和添加按钮从纯文字（`✕`、`+`）升级为 SVG 图标，视觉更现代，且支持亮色/暗色主题自动切换。
+3. **样式解耦**：将 `padding`、`border-radius` 等从 CSS 硬编码移至 C++ 动态计算（通过 `DpiUtils::scaled()`），确保高 DPI 下尺寸正确。
+4. **交互优化**：关闭按钮仅在需要时显示（hover/选中），减少标签页视觉噪音，更接近现代浏览器标签页体验。
+5. **安全性**：`QPointer<QAction>` 防护避免 action 生命周期问题；空指针检查使 `dummyTabPage` 不初始化关闭按钮的逻辑更安全。
+
+### How
+
+- 引入 `QWK::WindowButton`（已存在于项目中，用于系统标题栏按钮）替代 `QToolButton`，复用其 `iconNormal` / `iconHovered` 属性支持。
+- 新增 `tabpage/` SVG 资源目录，通过 `.qrc` 编译进二进制。
+- CSS 中通过 `qproperty-*` 语法将图标路径与按钮绑定。
+- 全面替换 `int (base * getDPIScaleFactor())` 为 `DpiUtils::scaled(base)`，消除浮点截断误差。
+- 移除 `dummyTabPage` 的关闭按钮初始化，并在所有 `m_closeBtn` 访问点做空指针守卫。