Runtime button overflow detection for record detail header

[Copilot]

Header buttons overflow horizontally at small resolutions (1280×800), breaking the hardcoded calc(100% - 65px) body height in flow.js. Previous schema-time maxButtons approach failed fundamentally—DOM doesn't exist yet, visibleOn isn't evaluated, i18n label widths are unknown.

This moves all overflow handling to runtime using actual DOM measurements.

CSS (AmisRecordDetailHeader.less)

• overflow: hidden; min-width: 0 on button column — hard guarantee header never exceeds 65px
• flex-wrap: nowrap !important on button flex container
• Styles for the "more" dropdown trigger and menu

Runtime overflow handler (AmisRecordDetailHeader.tsx)

• addButtonContainerClasses() traverses the schema JSON post-generation to inject .steedos-header-buttons / .steedos-header-buttons-col class names for CSS targeting
• Injects an amis custom component with onMount/onUnmount scripts:
  • ResizeObserver on button container for window/layout changes
  • MutationObserver for amis visibleOn toggling buttons post-render
  • When scrollWidth > clientWidth: hides buttons right-to-left, populates a "more" dropdown
  • Dropdown items proxy-click the original hidden buttons — preserves all amis event handlers
  • MutationObserver disconnected during DOM updates to prevent infinite loops, reconnected next frame

Not modified

• buttons.js, header.js — schema generation unchanged

Key difference from reverted approach

Previous: estimate button widths from schema labels → greedy pack → maxButtons. Fails on i18n, visibleOn, DOM-less context.

This: render everything → measure real DOM → collapse what doesn't fit. Zero estimation error, works with any language/permission/resolution.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /usr/local/bin/yarn install --frozen-lockfile dos-�� (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /usr/local/bin/yarn install 53 -j ACCEPT (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>审批单详情页按钮栏小分辨率溢出根本解决方案议题（关联 #584, steedos-plugins#311）</issue_title>
<issue_description>## 背景与历史问题

• 原始问题（@steedos/steedos-widgetsBug] 审批单详情页顶部按钮在小分辨率（1280×800）下溢出 #584 / @steedos/steedos-plugins#311）：

  审批单详情页在 1280×800 小分辨率下顶部按钮横向溢出，header 高度超过 65px，破坏滚动逻辑。

• 之前尝试过「schema 生成阶段通过 JS 动态计算 maxButtons」的贪心法（PR Fix approval detail header button overflow on small resolutions #585/Fix empty dropdown on wide screens and over-estimated button area width on approval pages #586），但因计算时拿不到真实 DOM 和最终按钮是否 visible（i18n/权限/表单依赖等），带来了严重回归（空 dropdown、按钮数偏差），已彻底还原。

新的技术方案

根据经验及业界通用做法，**推荐方案为：

1. 用 CSS 限死按钮容器高度 & overflow: hidden（始终保证 header 不换行/撑高）
2. 在运行时（浏览器端）用 ResizeObserver/MutationObserver 监听实际宽度、动态调整按钮折叠/收起（用 clientWidth/scrollWidth、display:none/ellipsis、dropdown）
3. 组件解耦 schema 生成与实际渲染，所有横向溢出检测必须在渲染后、非 schema 阶段做处理

TODO

• 评估 amis/steedos-header 是否支持运行时折叠按钮，抽象 dropdown 触发逻辑
• 草拟 DEMO，用 CSS + JS 方式原型实现，仅控制 DOM/样式，不动按钮 schema
• 技术调研：amis、antd、element-ui 等桌面 UI 如何做 toolbar 溢出折叠
• 迁移老 header 逻辑，保证 65px 高度、所有功能按钮均可达到、兼顾多国语言与权限
• 充分测试不同分辨率/多语言/按钮数量组合

重要历史分支/PR/Issue 关联

• steedos-widgets#584（本议题替代）
• steedos-plugins#311（上游 issue）
• Fix approval detail header button overflow on small resolutions #585 Fix empty dropdown on wide screens and over-estimated button area width on approval pages #586：已废弃的 maxButtons 方案

关键代码结构与约束（补充）

按钮容器 DOM 结构

header.js 的 getObjectRecordDetailHeader 函数最终将按钮数组包裹在 amis flex 组件中：

gridBody.push({
    "body": {
        "type": "flex",
        "items": amisButtonsSchema,   // ← 所有按钮在此横向排列
    },
    "md": "auto",
    "columnClassName": "flex justify-center items-center"
})

外层最终输出的 class 为 steedos-object-record-detail-header。

已有的按钮间距样式

packages/@steedos-widgets/amis-object/src/styles/object.less：

.steedos-object-record-detail-header {
    button[class~="steedos-object-button"] {
        margin-left: 4px;
    }
}

可修改的样式文件

文件	说明
packages/@steedos-widgets/amis-object/src/amis/AmisRecordDetailHeader.less	header 组件专用样式，含 compact-layouts、mobile 响应式
packages/@steedos-widgets/amis-object/src/styles/object.less	通用对象样式，含按钮间距
packages/@steedos-widgets/amis-object/src/amis/AmisInstanceDetail.less	审批页面专用样式

硬约束���不可破坏）

1. header 高度 65px — flow.js 中 calc(100% - 65px) 写死了 body 高度，不能让按钮换行撑高 header
2. 滚动触发审批 drawer — flow.js 依赖 .steedos-amis-instance-view-body 的 scrollHeight/clientHeight/scrollTop
3. 不能用 flex-wrap — 换行会破坏上述两个约束

之前方案失败的根因总结

问题	根因
贪心算法在 schema 阶段运行	DOM 未渲染，offsetWidth 始终为 0，fallback 估算偏差 196-406px
用全量 action 计算宽度	uiSchema 返回 24 个 action，但运行时 visibleOn 会隐藏大部分，实际只显示 ~8 个
字符宽度估算不可靠	uiSchema 返回中文 label（如"保存"），但 UI 显示英文（如"Save"），宽度完全不同
moreButtonsVisibleOn 拼接逻辑	空字符串 '' 被 amis 视为始终显示，导致空 dropdown

推荐的新方案思路

核心原则：schema 阶段不做任何宽度限制，全部交给运行时处理。

1. CSS 兜底：给按钮容器加 overflow: hidden; max-height: 65px; flex-wrap: nowrap;，确保无论如��� header 不撑高
2. 运行时检测：在 AmisRecordDetailHeader 组件的 React 生命周期（或 amis 的 onMount 事件）中，用 ResizeObserver 监听按钮容器
3. 动态折叠：当 scrollWidth > clientWidth 时，从右往左将按钮移入一个运行时创建的 dropdown，直到不再溢出
4. 响应式恢复：窗口放大时，从 dropdown 中取出按钮放回容器，直到再次溢出

这个方案的优势：

• 完全基于真实渲染后的 DOM 宽度，零估算误差
• 自动适配 i18n（中/英/日文按钮宽度不同）
• 自动适配 visibleOn（只计算实际可见的按钮）
• 自动适配任意分辨率，包括浏览器缩放

需要修改的文件

文件	修改内容
AmisRecordDetailHeader.less 或 object.less	添加按钮容器 overflow: hidden 兜底样式
AmisRecordDetailHeader.tsx	添加 ResizeObserver 运行时折叠逻辑
buttons.js	不需要修改（保持还原后的原始逻辑）
header.js	不需要修改（保持还原后的原始逻辑）

Comments on the Issue (you are @copilot in this section)

@yinlianghui copilot chat链接 https://github.com/copilot/c/17a40701-1251-4db5-b913-883c4d107094

• Fixes 审批单详情页按钮栏小分辨率溢出根本解决方案议题（关联 #584, steedos-plugins#311） #592

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.