Skip to content

fix(minimax-pet): 0.8.1 桌面卡片长标题/长回复不再挤掉底部操作 - #129

Closed
MyPrototypeWhat wants to merge 1 commit into
mainfrom
fix/minimax-pet-desktop-card
Closed

MyPrototypeWhat wants to merge 1 commit into
mainfrom
fix/minimax-pet-desktop-card

Conversation

@MyPrototypeWhat

@MyPrototypeWhat MyPrototypeWhat commented Nov 12, 2026 •

Copy link
Copy Markdown
Collaborator

修一个桌面卡片的显示问题:任务标题太长时会把内容区顶下来,卡片里出现两个滚动条,「返回任务 / 打开对话」被挤到卡片外。现在标题单行截断,只有回复区滚动,底部操作固定可见;展开卡片时窗口同步变高,回复不再被压成一行。

只改桌面卡片的布局与高度,面板、权限、Host API 调用都没有变化。

Written by Claude Opus 5.5

原因

截图里的现象有三个独立来源:

  1. 标题换行:.compact-detail-title 是行内 <strong>,text-overflow: ellipsis 与 white-space: nowrap 对行内元素不生效,长标题会折成两行,把下面整体顶下去。
  2. 两个滚动条:.compact-body 整体 overflow: auto,里面的回复区又有 max-height: 126px; overflow: auto,于是出现了外层和回复区两个滚动条。
  3. 底部被挡:.workbench 固定 max-height: 216px,内容(头部 + 两行标题 + 回复 + 底部)超过 216px 后,底部操作被裁在卡片外;而展开卡片时窗口高度 340px 里已经放了 208px 的宠物,卡片只剩约 110px,回复区被压到一行。

改了什么

  • 结构(compact-pet-view.mjs):详情区拆成 .compact-detail-head(标题 + 状态)、.compact-detail-body(唯一滚动区,放回复与 Markdown 渲染结果)、固定底部。头部与底部不进滚动区。
  • 标题:放进 flex 行,flex: 1; min-width: 0,单行 ellipsis,状态文字 flex: none 不再被挤。
  • 高度:.workbench 的 max-height 从固定 216px 改为 max(216px, calc(100% - 宠物高度 - 24px)),展开卡片时用满窗口上方空间。
  • 窗口尺寸(pet-app.js):展开卡片时把窗口临时调到 300×520(原来是 300×340),并根据缩放计算宠物高度;收起后恢复原尺寸。
  • .desk 改为 overflow: visible,透明窗口里卡片可以向上溢出而不是被裁掉。
  • 底部操作加了一条分隔线,滚动与固定区的边界更清楚。
  • 版本 0.8.1;README(中英)补一段说明。

验证

  • npm test 252 通过(新增 1 个回归用例:长标题单行、头部与底部在滚动区外、长回复完整保留)。
  • npm run test:smoke 70/70;npm run check:package 41 个文件逐字节一致;根 npm run check 报 plugins/minimax-ai/minimax-pet: OK。
  • 模拟 Host 在 300×520 的无头 Chromium 里量过:卡片 340px、标题单行且触发 ellipsis、唯一滚动容器是 .compact-detail-body、底部 bottom 不超过卡片底边。截图见 PR 描述外的本地记录。

未验证

  • 真实 MiniMax Code 桌面窗口里的观感(本机只有 3.1.1 与 3.1.10-preview,无法运行 3.1.11 的窗口 API)。
  • 不同缩放档位(小/中/大)与超大标题组合的实测,只按公式推算了高度。
  • Windows。

Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

- 详情区拆成固定头部、唯一滚动区、固定底部:标题与「返回任务 / 打开对话」不再随内容滚动或溢出卡片。
- 标题改为弹性单行截断(inline 的 strong 之前拿不到 ellipsis,两行标题会把内容区顶下去)。
- 卡片最大高度改用窗口可用空间,展开卡片时回复区真正变高,不再被压成一行。
- 0.8.0 版本号 → 0.8.1,README(中英)补充说明,补一项回归测试。

@MyPrototypeWhat MyPrototypeWhat left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

审查基于 head 9bd2506。我在本地跑了 npm ci 和 npm test,252 个测试全部通过,plugins/ 和 sources/ 两份 client 文件内容一致。

挡合并(1 处)

  • sources/minimax-ai/minimax-pet/package-lock.json:718:cssstyle/node_modules/rrweb-cssom 的 version 被一起改成了 0.8.1,但 resolved 和 integrity 还是 0.8.0 的包,npm ci 实际装上的也是 0.8.0。请改回 0.8.0,只保留顶层 minimax-pet-source 写 0.8.1。

已确认没问题

  • 三块布局(compact-pet-view.mjs):拆成 head / body / footer 后,回复区只剩 .compact-detail-body 一个滚动容器,切换任务时会重置它的滚动位置。全局 [hidden] 带了 !important,所以 .compact-detail { display:flex } 不会让被隐藏的面板重新显示出来。
  • flex CSS:title 用 flex:1; min-width:0 加省略号,status 和 footer 都是 flex:none,body 用 flex:1; min-height:0,长标题和长回复都挤不掉底部按钮。新测试只检查了 DOM 结构,没有测真实的渲染高度,jsdom 也测不了这个。
  • 窗口尺寸:520 这个初始值基本用不上,renderScale() 启动时就会把高度改写成 max(380, 208×scale+332),小、中、大三档分别是 436、488、540。展开时以右下角为锚点,并且会被限制在屏幕范围内。收起时恢复的是记下来的原尺寸,pet-app.js 里 280×340 那几处硬编码不受影响。

不挡合并

  • 卡片打开时 app.workbenchOpen 会让整个窗口都不穿透。窗口变高以后,回复很短时卡片上方那块透明区域也会挡住桌面点击,比以前多出约 100px。
  • .desk 改成 overflow: visible 基本没效果,见下方行内评论。

},
"node_modules/cssstyle/node_modules/rrweb-cssom": {
"version": "0.8.0",
"version": "0.8.1",

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里是依赖 rrweb-cssom 自己的版本号,应保持 0.8.0(resolved 和 integrity 仍指向 0.8.0)。

overflow: hidden;
/* The window is transparent and frameless: the card may overflow it upward so a
long reply keeps a readable body instead of a single line. */
overflow: visible;

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不挡合并:html.mode-window body 仍是 overflow: hidden,而且窗口外的内容本来也画不出来,所以卡片实际不能向上溢出,这行注释跟实际不符。如果展开失败、窗口还是 340 高,卡片顶部仍会被裁掉,但这个问题以前就有。建议删掉这行改动或者改一下注释,sources/ 里那份也一样。

MyPrototypeWhat pushed a commit that referenced this pull request Nov 13, 2026
窗口以右下角为锚点,展开尺寸是 300×488 而紧凑是 280×340,于是窗口左边缘
左移 10px,居中的桌宠在屏幕上跟着平移,收起时再弹回去——用户看到的就是
点一下闪一下。展开宽度改为与紧凑一致的 280,只增高,桌宠屏幕坐标不变。

同时处理 #129 的两条评论:
- package-lock.json 里 cssstyle 依赖的 rrweb-cssom 版本改回 0.8.0,
  与 resolved/integrity 指向的包一致;
- .desk 回退为 overflow: hidden,原先那行 overflow: visible 与注释
  并不成立,因为 html.mode-window body 本身就是 overflow: hidden。
@MyPrototypeWhat

Copy link
Copy Markdown
Collaborator Author

两条评审意见都已在 #131 里修好,这个 PR 不再单独合并。

  • sources/minimax-ai/minimax-pet/package-lock.json:718:cssstyle/node_modules/rrweb-cssom 的 version 已改回 0.8.0,与 resolved/integrity 指向的包一致。只保留顶层 minimax-pet-source 写新版本号。另外加了一道自检:遍历 lockfile 所有条目,比对 version 与 resolved 里的 tarball 版本,当前 0 处不一致。
  • plugins/minimax-ai/minimax-pet/miniapp/client/pet.css:624:按建议回退为 overflow: hidden 并删掉那段注释,sources/ 那份同步修改。你说得对——html.mode-window body 本身就是 overflow: hidden,窗口外的内容画不出来,那行 visible 和注释都不成立。

关于"不挡合并"的第二点(卡片打开时 app.workbenchOpen 让整个窗口都不穿透):#131 已改成按实际覆盖的像素判定,卡片外恢复 clickThrough: true;拖拽和菜单仍占用整窗,用键盘打开卡片(尚无指针采样)时保持可点击。

#131 包含本 PR 的全部提交,所以合并 #131 之后这里的内容都会落到 main。为避免同一份 0.8.1 走两次合并、也避免这个 lockfile 错误先落进 main,我把本 PR 关掉,作为被 #131 取代处理。有异议的话告诉我,我可以重新打开并先在这里补一个修正提交。

MyPrototypeWhat added a commit that referenced this pull request Nov 13, 2026
* fix(minimax-pet): 0.8.1 桌面卡片长标题/长回复不再挤掉底部操作

- 详情区拆成固定头部、唯一滚动区、固定底部:标题与「返回任务 / 打开对话」不再随内容滚动或溢出卡片。
- 标题改为弹性单行截断(inline 的 strong 之前拿不到 ellipsis,两行标题会把内容区顶下去)。
- 卡片最大高度改用窗口可用空间,展开卡片时回复区真正变高,不再被压成一行。
- 0.8.0 版本号 → 0.8.1,README(中英)补充说明,补一项回归测试。

* feat(minimax-pet): 0.9.0 桌面卡片自动收起与中英文界面

桌面通知卡片默认显示 10 秒后自动收起,设置页用数字框调整,填 0 表示一直
显示。收起只隐藏卡片,不会把任务标记为已读;需要你回答的卡片不会自动收起,
鼠标悬停或焦点停留时暂停计时。

界面文案全部收进 i18n.mjs,支持简体中文和英文,默认跟随 MiniMax Code 的
界面语言(host.ui.subscribe),也可在设置页固定。对话标题和回复保持原文。

* fix(minimax-pet): 点击宠物不再闪烁,卡片外的透明区域恢复点击穿透

左键点击桌宠时,desiredAnimation 因为 workbenchOpen 变成 true 而立刻放弃
悬停动画,animationGate 从第 0 帧重播基础行,看上去就是闪一下。卡片打开
不再打断悬停动画,菜单仍然会让宠物回到基础动画。

clickThrough 之前把 workbenchOpen 当成整窗可交互,而展开窗口是 300×488、
卡片只有 284×147,卡片上方和两侧的透明区域因此挡住点击。现在只按实际
覆盖的像素判定,拖拽和菜单仍可占用整窗;用键盘打开卡片(尚无指针采样)
时保持可点击。

* fix(minimax-pet): 展开卡片只增高不变宽,桌宠不再左右滑动

窗口以右下角为锚点,展开尺寸是 300×488 而紧凑是 280×340,于是窗口左边缘
左移 10px,居中的桌宠在屏幕上跟着平移,收起时再弹回去——用户看到的就是
点一下闪一下。展开宽度改为与紧凑一致的 280,只增高,桌宠屏幕坐标不变。

同时处理 #129 的两条评论:
- package-lock.json 里 cssstyle 依赖的 rrweb-cssom 版本改回 0.8.0,
  与 resolved/integrity 指向的包一致;
- .desk 回退为 overflow: hidden,原先那行 overflow: visible 与注释
  并不成立,因为 html.mode-window body 本身就是 overflow: hidden。

* fix(minimax-pet): 桌面窗口改为固定尺寸,点开卡片不再移动窗口

上一版把展开宽度改回 280,横向位移没了,但仍然会闪。用户实测后确认是
"往左和往上"两个方向。用模拟 Host 逐帧量过:窗口 340 高变 520 高时,桌宠
到底边的距离一直是 4px,页面内没有跳动——所以位移来自原生窗口本身被移动
的那一刻。窗口以右下角为锚点增高,原点上移 180px,内容若晚一帧重排,旧
布局就画在新原点,整幅上跳。

现在窗口只有一个尺寸(280 x deskHeight(scale)),本来就放得下展开的卡片:
点开和关闭卡片只切 DOM,不碰窗口几何。桌宠上方的透明区域会穿透点击,所以
常驻的高度不会挡住桌面。

- 删除 workbench-window.mjs 及其测试:不再有任何展开/收起的窗口尺寸切换;
- 改缩放大小时按右下角锚点同时更新宽高,桌宠保持原位;
- 存档位置仍按 280x340 参考窗口记录,旧存档继续可用;
- 测试改为断言 openWorkbench / closeWorkbench 不触碰几何,并检查三个缩放档位
  的固定高度都放得下卡片。

---------

Co-authored-by: dazhi <dazhi@minimaxi.com>
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