Yang-RuiQi/ele-HeiXiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复首页三栏布局拖拽溢出 — 分隔条最大宽度约束 + 视口缩小自动收窄

Browse Source 
问题：切换视口大小或拖拽分隔条时，右侧预览面板甚至中右两栏被挤出视口。

  根因：flex 布局左/右列 flexShrink:0，拖拽无上限约束，视口缩小时不自动收窄，
  总宽度超出容器后 overflow:hidden 裁剪。

  修复（HomeContent.tsx）：
  - 拖拽时计算 maxLeft / maxRight 动态上限，确保中列≥300px、三栏均在视口内
  - ResizeObserver 监听容器缩小，优先收右侧面板→不够再收左侧，拖拽中自动跳过
  - leftWidthRef / rightWidthRef / draggingRef 避免闭包读到过期值

  变更：CHANGELOG.md / TODO.md / WORKLOG.md 同步更新

  影响文件：3 个（+60 -3）
  - src/pages/home/HomeContent.tsx
  - CHANGELOG.md
  - TODO.md
This commit is contained in:
YoungestSongMo
2026-06-07 05:56:00 +08:00
parent a01b3f259c
commit 952a723448
3 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@@ -66,6 +66,7 @@
| localStorage 依赖 | 所有持久化数据依赖 localStorage | 清理浏览器数据会丢失所有配置 |
| IPC 监听器 | useUpdater 已改为单例，其他 IPC hook 可能也有类似问题 | 长期运行可能内存泄漏 |
| ~~主题切换状态重置~~ | ✅ 已修复 — 根因：设置页 `navigate('/settings')` 导致路由 `/*` 仅匹配 index，HomePage 被卸载重挂载。修复：SettingsPage 改为事件总线驱动的 Modal 居中叠加，不走路由 | ~~用户体验差~~ |
| ~~三栏布局拖拽溢出~~ | ✅ 已修复 — 拖拽分隔条增加最大宽度约束（`maxLeft = containerWidth - 36 - 300 - rightWidth`）+ 视口缩小 ResizeObserver 自动收窄 | ~~布局可用性~~ |
| `test.py` | 仓库根目录残留测试文件 | 无实际作用，应清理 |
| `null` 文件 | 仓库根目录名为 null 的文件 | 构建产物或误操作残留 |