右键菜单溢出

该报错是 LobeChat Electron 桌面版中话题列表的“…“菜单溢出主窗体,主要原因是下拉菜单的弹出容器在桌面端没有正确锚定到侧边栏。优先排查 Actions 组件是否缺少 getPopupContainer 或 Electron 环境下 useOverlayDropdownPortalP

快速结论:该报错是 LobeChat Electron 桌面版中话题列表的“…“菜单溢出主窗体,主要原因是下拉菜单的弹出容器在桌面端没有正确锚定到侧边栏。优先排查 Actions 组件是否缺少 getPopupContainer 或 Electron 环境下 useOverlayDropdownPortalProps 未返回容器引用。

适用环境:LobeChat v2.2.11-canary.67,Electron 桌面应用,Windows 操作系统,官⽅云部署。

最快修复方案:暂无确认的一步修复方案。可能修复方式是给 Actions 组件的 portalProps 传入 getPopupContainer,或扩展 useOverlayDropdownPortalProps 使其在 Electron 环境也返回容器引用(可优先尝试)。

注意事项:上述方案是开发团队在 Issue 讨论中推测的解决方向,尚未经过代码验证。直接修改源码前请确保理解现有 portal 逻辑,避免影响移动端布局。

问题场景

在 LobeChat Electron 桌面版中,进入“助手-话题”列表,右键点击话题条目可以正常弹出上下文菜单,但点击话题条目上的“…“按钮触发下拉菜单时,菜单超出主窗体边界,发生溢出。

报错原文

助手-话题,如果鼠标右键触发菜单没问题,如果是点击...触发菜单则会溢出主窗体。
// 右键效果:正常显示在窗体范围内
// 点击...触发:菜单溢出主窗体

原因分析

可能原因是话题列表中的“…“按钮使用 DropdownMenu 并配合 useOverlayDropdownPortalProps() 的 portal 属性,但这个钩子只在移动端返回自定义容器,在桌面/Electron 环境返回 undefined,导致下拉菜单直接 portal 到 document.body,没有溢出约束。相比之下,右键菜单使用 ContextMenuTrigger,它有自己的定位逻辑,因此能保持在边界内。

环境排查

  • LobeChat 版本:确认是否为 v2.2.11-canary.67 或相近版本(该问题在 Electron 桌面版出现)。
  • 操作系统:Windows(Issue 报告中确认)。
  • 部署方式:官方云部署(Official Cloud)。
  • 运行时:Electron 桌面应用,非浏览器环境。
  • 相关代码路径:src/routes/(main)/agent/_layout/Sidebar/Topic/List/Item/Actions.tsxsrc/features/NavPanel/OverlayContainer.ts

解决步骤

  1. 定位到 src/routes/(main)/agent/_layout/Sidebar/Topic/List/Item/Actions.tsx 文件,检查其中 DropdownMenuportalProps 配置。
  2. 尝试在 Actions 组件的 portalProps 中传入 getPopupContainer,将弹出层的容器锚定到侧边栏容器上(参考项目历史 PR #14269、#16438、#15303 的实现方式)。
  3. 另一种可优先尝试的方案是修改 src/features/NavPanel/OverlayContainer.ts,让 useOverlayDropdownPortalProps 在 Electron 环境下也能返回一个容器引用,而不是返回 undefined
  4. 修改后重新构建或热更新 Electron 客户端,进入“助手-话题”列表验证菜单是否还在窗体边界内。

验证方法

在 Electron 桌面版中进入“助手-话题”列表,点击话题条目上的“…“按钮,确认下拉菜单不再超出主窗体边界,且菜单内容可正常点击和操作;同时用右键菜单回归验证,确保原有右键功能未被破坏。

参考来源

lobehub/lobe-chat #17516

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 18702

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注