feat: 对话流定位高亮复用化与高亮样式优化#3990
Merged
Merged
Conversation
- 新增 useChatStreamLocateHighlight hook，任务规划与自由对话共用定位+高亮逻辑 - 自由对话 AIReActChatContents 接入定位高亮 - 高亮改用 DOM classList 驱动，避免 React state 变更导致列表项 remount 冲掉内部展开态 - 高亮框由 .item-inner outline 改为 ::after 伪元素，收紧框选范围并避免遮挡点击 - 调整自由对话列表左间距（容器 padding-left 迁移到 item-wrapper）
Contributor
PR CI 汇总状态：全部通过
由 pull_request test workflow 自动生成 |
EmbraceAn
approved these changes
Jul 13, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
本 PR 将“对话流定位 + 高亮”能力抽成可复用 hook，并在任务规划流与自由对话流中统一接入；同时把高亮从 React state 驱动改为 DOM classList 驱动，以避免 Virtuoso 列表项因状态变化发生重建/ remount 而丢失内部展开态，并优化高亮框样式与点击遮挡问题。
Changes:
- 新增
useChatStreamLocateHighlight，封装滚动定位后等待可视再高亮的逻辑，并支持通过listRootRef缩小查询范围避免同页 Virtuoso 的data-index撞车 - 自由对话
AIReActChatContents与任务规划AIAgentChatStream统一接入定位高亮（移除旧的 state 高亮实现） - 高亮样式迁移到独立 CSS module，并调整自由对话 item-wrapper 的左侧内边距以配合新框选范围
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| app/renderer/src/main/src/pages/ai-re-act/hooks/useChatStreamLocateHighlight.ts | 新增定位并在元素进入视口后再高亮的复用 hook，DOM classList 驱动高亮以避免 remount 丢状态 |
| app/renderer/src/main/src/pages/ai-re-act/hooks/aiChatItemHighlight.module.scss | 新增独立高亮样式（::after 伪元素框选 + 动画），用于跨页面复用 |
| app/renderer/src/main/src/pages/ai-re-act/aiReActChatContents/AIReActChatContents.tsx | 自由对话流接入定位高亮 hook，并用 listRootRef 限定查询范围 |
| app/renderer/src/main/src/pages/ai-re-act/aiReActChatContents/AIReActChatContents.module.scss | 自由对话列表 item-wrapper 左间距调整（padding-left 迁移到 item-wrapper） |
| app/renderer/src/main/src/pages/ai-agent/chatTemplate/AIAgentChatTemplate.tsx | 任务规划流移除 state 高亮逻辑，改用复用 hook；并增加 listRootRef 以避免多 Virtuoso 场景误命中 |
| app/renderer/src/main/src/pages/ai-agent/chatTemplate/AIAgentChatTemplate.module.scss | 移除旧的高亮 class 与 keyframes（由新共享样式接管） |
Comment on lines
+59
to
+61
| const tryObserve = () => { | ||
| if (++attempts > 120) return | ||
| // Virtuoso Item 的 data-index 是 originalIndex（相对下标） |
Comment on lines
+88
to
+94
| useEffect(() => { | ||
| return () => { | ||
| cleanupHighlightWatcher() | ||
| clearHighlight() | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []) |
b1rdfree
approved these changes
Jul 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
详情：
合并方式：
2