Skip to content

feat: 实现消息区域和全局界面的独立缩放管理#51

Open
Afeng01 wants to merge 4 commits intoErlichLiu:mainfrom
Afeng01:feat/independent-zoom-levels
Open

feat: 实现消息区域和全局界面的独立缩放管理#51
Afeng01 wants to merge 4 commits intoErlichLiu:mainfrom
Afeng01:feat/independent-zoom-levels

Conversation

@Afeng01
Copy link
Contributor

@Afeng01 Afeng01 commented Feb 26, 2026

功能概述

实现了消息区域和全局界面两种独立的缩放模式,用户可以根据需求选择只缩放聊天内容区域或缩放整个应用窗口。

主要变更

核心功能

  • 添加两种缩放模式:
    • 消息区域模式:仅缩放聊天内容区域(使用 CSS zoom 属性)
    • 全局界面模式:缩放整个应用窗口(使用 Electron setZoomFactor)
  • 支持快捷键操作:
    • Cmd/Ctrl + Plus:放大
    • Cmd/Ctrl + -:缩小
    • Cmd/Ctrl + 0:重置缩放
  • 在设置页面添加缩放模式切换和当前缩放级别显示
  • 支持 Chat 模式(普通/并排)和 Agent 模式的独立缩放

技术实现

  • 使用自定义 IPC 事件(zoom:in/zoom:out/zoom:reset)替代 Electron 内置缩放角色
  • 通过 Jotai atoms 管理缩放状态
  • 缩放设置持久化到 ~/.proma/settings.json 并使用 localStorage 缓存
  • 添加 IPC 通道(SET_ZOOM_FACTOR、GET_ZOOM_FACTOR)支持 Electron 原生缩放

修改的文件

  • apps/electron/src/main/ipc.ts:添加 setZoomFactor 和 getZoomFactor IPC 处理器
  • apps/electron/src/main/lib/settings-service.ts:添加 zoom 相关设置字段
  • apps/electron/src/main/menu.ts:自定义缩放菜单项,使用 IPC 事件
  • apps/electron/src/preload/index.ts:暴露 zoom IPC 事件监听器
  • apps/electron/src/renderer/atoms/index.ts:导出 zoom-atoms
  • apps/electron/src/renderer/atoms/zoom-atoms.ts:新增缩放状态管理(220行)
  • apps/electron/src/renderer/components/agent/AgentMessages.tsx:应用 Agent 模式缩放
  • apps/electron/src/renderer/components/chat/ChatMessages.tsx:应用消息区域缩放
  • apps/electron/src/renderer/components/chat/ParallelChatMessages.tsx:应用并排模式缩放
  • apps/electron/src/renderer/components/settings/AppearanceSettings.tsx:添加缩放模式切换 UI
  • apps/electron/src/renderer/components/settings/primitives/SettingsRow.tsx:支持 ReactNode 类型的 description
  • apps/electron/src/renderer/main.tsx:添加 ZoomInitializer 组件
  • apps/electron/src/types/settings.ts:添加 zoom 相关类型定义

测试情况

  • 消息区域缩放模式正常工作
  • 全局界面缩放模式正常工作
  • 快捷键操作正常
  • 设置持久化正常
  • Chat 模式(普通/并排)缩放正常
  • Agent 模式缩放正常

其他

邮箱:fkufeng01@gmail.com

Afeng01 and others added 4 commits February 26, 2026 20:22
- 添加 globalZoomLevel 字段到 AppSettings
- 创建独立的 globalZoomLevelAtom 状态管理
- 修改 ZoomInitializer 支持两个独立的缩放级别
- 在 AppearanceSettings 中显示当前模式对应的缩放级别
- 全局模式使用 CSS zoom 样式(App.tsx)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 添加 SET_ZOOM_FACTOR 和 GET_ZOOM_FACTOR IPC 通道
- 在主进程中实现 webContents.setZoomFactor 处理器
- 在 preload 中暴露 setZoomFactor 和 getZoomFactor API
- 修改 zoom-atoms.ts 使用 Electron 原生缩放
- 从 App.tsx 移除全局模式的 CSS zoom 样式

使用 Electron 原生缩放避免了滚动条问题,提供更好的用户体验。

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 在 ParallelChatMessages 组件中应用消息区域缩放
- 支持简单布局和分段布局两种模式的缩放
- 确保并排模式下缩放与普通模式保持一致

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 添加消息区域和全局界面两种缩放模式
- 消息区域模式:仅缩放聊天内容区域(使用 CSS zoom)
- 全局界面模式:缩放整个应用窗口(使用 Electron setZoomFactor)
- 支持快捷键:Cmd/Ctrl + Plus(放大)、Cmd/Ctrl + -(缩小)、Cmd/Ctrl + 0(重置)
- 在设置页面添加缩放模式切换和当前缩放级别显示
- 支持 Chat 模式(普通/并排)和 Agent 模式的独立缩放
- 使用自定义 IPC 事件替代 Electron 内置缩放角色,实现更灵活的缩放控制
- 缩放设置持久化到 ~/.proma/settings.json 并使用 localStorage 缓存
@Afeng01
Copy link
Contributor Author

Afeng01 commented Feb 26, 2026

设置界面:
image
chat模式下,消息区域字体正常缩放:
image
chat模式下,消息区域并排正常缩放:
image
agent模式下,消息区域正常缩放:
image
切换到全局界面,缩放级别持久化保存:
image
image
切换到全局界面,整体界面缩放正常:
image

@Afeng01 Afeng01 changed the title feat: 实现消息区域和全局界面的独立缩放级别管理 feat: 实现消息区域和全局界面的独立缩放管理 Feb 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant