新对话按钮效果优化-11

Author: Yuki-Nagori

devel/1019.md

@@ -0,0 +1,114 @@
+# [1019] 优化 New chat 按钮及浮球按钮 UI
+
+## 1 相关文档
+- [dddd.md](dddd.md) - 任务文档模板
+- [1018.md](1018.md) - 优化 LLM Chat 侧边栏开关按钮 UI
+
+## 2 任务相关的代码文件
+- `src/Plugins/Qt/qt_chat_tab_widget.cpp`
+- `src/Plugins/Qt/qt_chat_tab_widget.hpp`
+- `TeXmacs/misc/images/llm-chat/addchat.svg`
+- `TeXmacs/misc/images/images.qrc`
+
+## 3 如何测试
+
+### 3.1 确定性测试（单元测试）
+```bash
+xmake b qt_chat_tab_widget_test
+xmake r qt_chat_tab_widget_test
+```
+
+### 3.2 非确定性测试（文档验证）
+```bash
+xmake b stem
+```
+运行后打开 LLM Chat 标签页，验证：
+
+1. **New chat 按钮样式**：
+   - 文本左侧有 addchat.svg 图标（18px）
+   - 按钮居中显示在侧边栏
+   - 固定尺寸 140x36px，pill 形状（圆角 18px）
+   - 无边框，白色背景，无 hover 背景色变化
+   - 有柔和阴影（blur=3, alpha=25, offset=1px）
+   - 鼠标悬停时阴影加深（blur=6, alpha=50, offset=2px）
+
+2. **收起态浮球按钮**：
+   - 点击收缩按钮后侧边栏隐藏
+   - 内容区左上角出现胶囊形容器，包含两个圆球按钮：
+     - 左侧：展开按钮（sidebar.svg）
+     - 右侧：新建聊天按钮（addchat.svg）
+   - 胶囊容器有 4px 内边距和圆角背景
+   - 点击新建聊天按钮可创建新会话
+
+3. **常量提取**：文件顶部所有魔法数字均已提取为 `constexpr` 常量
+
+## 4 如何提交
+
+提交前执行以下最少步骤：
+
+```bash
+xmake b qt_chat_tab_widget_test
+xmake r qt_chat_tab_widget_test
+xmake b stem
+```
+
+## 5 What
+
+优化 LLM Chat 标签页的 New chat 按钮及收起态浮球按钮 UI。
+
+1. **New chat 按钮视觉升级**：
+   - 添加 addchat.svg 图标到文本左侧
+   - 固定尺寸 140x36px，pill 圆角（高度的一半）
+   - 去掉边框和 hover 背景色
+   - 添加 `QGraphicsDropShadowEffect` 阴影效果
+   - 悬停时通过 eventFilter 动态加深阴影（替代背景色变化）
+   - 按钮在侧边栏水平居中
+
+2. **收起态添加浮球新建聊天按钮**：
+   - 在内容区左上角添加圆球新建聊天按钮（与展开按钮并排）
+   - 两个浮球按钮放入统一的胶囊形容器中
+   - 容器有灰色背景、4px 内边距、4px 按钮间距和圆角
+
+3. **提取魔法数字为常量**：
+   - 新增 17 个 `constexpr` 常量：按钮尺寸、阴影参数、间距、圆角等
+   - 删除 7 个不再使用的无用常量
+   - 所有 `DpiUtils::scaled()` 调用均使用命名常量
+
+## 6 Why
+
+1. New chat 按钮原为纯文本且无样式，视觉上不够突出，缺乏现代感
+2. 收起态只有展开按钮，用户需要展开侧边栏才能新建聊天，操作路径长
+3. 代码中存在大量裸魔法数字，不利于维护和 DPI 适配
+
+## 7 How
+
+### 7.1 New chat 按钮
+在 `setup_left_sidebar()` 中：
+- `setIcon(QIcon(":llm-chat/addchat.svg"))` 添加图标
+- `setFixedSize(QSize(140, 36))` 固定尺寸
+- QSS 中 `border: none` 去掉边框，`border-radius: 18px` 形成 pill 形状
+- 去掉 `QPushButton:hover` 背景色规则
+- 创建 `QGraphicsDropShadowEffect`，设置 blur=3、alpha=25、offset_y=1
+- `installEventFilter` 监听 `HoverEnter`/`HoverLeave`，动态调整阴影参数
+- `normalLayout->addWidget(newChatButton_, 0, Qt::AlignHCenter)` 居中
+
+### 7.2 浮球胶囊容器
+在 `setup_right_content()` 中：
+- 创建 `QWidget` 作为容器，使用 `QHBoxLayout` 水平排列两个按钮
+- 容器设置 `#e8e8e8` 背景色和圆角（按钮半径 + 内边距）
+- 两个按钮通过 `setup_floating_button()` 统一创建（透明背景，由容器提供底色）
+- 容器统一显示/隐藏，通过 `move()` 定位到内容区左上角
+
+### 7.3 常量提取
+新增常量示例：
+- `kNewChatButtonHeight = 36`, `kNewChatButtonWidth = 140`
+- `kNewChatShadowBlur = 3`, `kNewChatShadowAlpha = 25`
+- `kNewChatHoverShadowBlur = 6`, `kNewChatHoverShadowAlpha = 50`
+- `kSendButtonSize = 36`, `kSendButtonRadius = 18`
+- `kConversationBtnRadius = 6`, `kModelLabelMinHeight = 20`
+- 等 17 个常量
+
+删除无用常量：
+- `kSendButtonPadY`, `kSendButtonPadX`, `kSendButtonFontPx`
+- `kContentMarginX`, `kTopPanelMaxWidth`, `kInputFrameBorder`
+- `kFloatingNewChatBtnMarginX`

src/Plugins/Qt/qt_chat_tab_widget.cpp

@@ -164,6 +164,8 @@ constexpr int kFloatingBtnMarginX= 12;
 constexpr int kFloatingBtnMarginY= 130;
 /// 浮球容器内边距（像素）。
 constexpr int kFloatingContainerPad= 4;
+/// 浮球按钮间距（像素）。
+constexpr int kFloatingBtnSpacing= 4;
 /// New chat 按钮图标尺寸（像素）。
 constexpr int kNewChatIconSize= 18;
 /// New chat 按钮固定高度（像素）。
@@ -628,7 +630,7 @@ QTChatTabWidget::setup_right_content (QHBoxLayout* mainLayout) {
                                       DpiUtils::scaled (kFloatingContainerPad),
                                       DpiUtils::scaled (kFloatingContainerPad),
                                       DpiUtils::scaled (kFloatingContainerPad));
-  floatingLayout->setSpacing (0);
+  floatingLayout->setSpacing (DpiUtils::scaled (kFloatingBtnSpacing));
   floatingContainer->setStyleSheet (
       QString ("QWidget#chat-tab-floating-container { "
                "background-color: #e8e8e8; border-radius: %1px; }")