feat(menu): 横向菜单支持宽度压缩弹窗显示剩余菜单 (ellipsis)

[Copilot]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

• [HeadMenu] 支持横向菜单溢出时自动隐藏并显示更多按钮 #3394
• [t-head-menu] 可否支持响应式 #3423
• [Menu] head-menu在插槽封装成组件的场景下计算缩略异常 #2779

💡 需求背景和解决方案

横向菜单在容器宽度不足时，溢出的菜单项应自动收纳到省略号弹窗中显示。此功能在 Element、Ant Design、Arco Design 等主流组件库中均已支持。

实现方案：

• 新增 ellipsis 属性（默认 true），控制是否启用溢出收纳
• 使用 ResizeObserver 实时监测容器宽度变化
• 计算可用空间，将溢出项渲染到省略号子菜单中
• 组件卸载时正确清理 observer

API：

<!-- 默认启用 -->
<t-head-menu ellipsis>
  <t-menu-item value="1">菜单1</t-menu-item>
  <t-menu-item value="2">菜单2</t-menu-item>
  <!-- 宽度不足时，后续菜单项自动收纳到 ... 弹窗 -->
</t-head-menu>

<!-- 禁用省略 -->
<t-head-menu :ellipsis="false">...</t-head-menu>

效果对比：

Before	After

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• feat(menu): HeadMenu 新增 ellipsis 属性，支持横向菜单宽度不足时自动收纳溢出项到弹窗显示

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[t-head-menu] 横向菜单支持宽度压缩弹窗显示剩余菜单</issue_title>
<issue_description>### 这个功能解决了什么问题

过往的issues: #3394 (comment)
在23年就有人提过这个问题，目前为止还没有处理
目前的效果：

预期效果：

宽度压缩，自动隐藏剩余菜单，以弹窗展示

官方的文档上我看了一遍，貌似是不支持的，这在横向布局中应该是常见功能了吧，对应的组件库都支持
参考链接：
element: https://www.cwgj.xyz/zh-CN/component/menu.html#%E5%BC%B9%E5%87%BA%E5%B1%82%E5%81%8F%E7%A7%BB%E9%87%8F
ant-design: https://ant.design/components/menu-cn#menu-demo-horizontal
arco.design: https://arco.design/vue/component/menu

你建议的方案是什么

左侧logo和右侧operations的插槽宽度可以是固定的，仅压缩中间菜单的宽度
针对横向布局的菜单，增加一个配置项：ellipsis
ellipsis：是否省略多余的子项（仅在横向模式生效） 类型boolean，默认true</issue_description>

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

@Wesley-0808 @uyarn 佬～支持这个新特性需要再出设计不？ @uyarn > [@uyarn](https://github.com/uyarn) 佬～支持这个新特性需要再出设计不？

不需要 超出就展示省略图标 就是一直没处理好 之前有PR的 但是还是有问题</comment_new>
<comment_new>@uyarn
#3394
#3423
#2779</comment_new>
<comment_new>@Wesley-0808

@uyarn 你好，问下这个功能后续会跟进吗，存在的确实时间比较久了

会处理</comment_new>

• Fixes [t-head-menu] 横向菜单支持宽度压缩弹窗显示剩余菜单 #6145

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[pkg-pr-new]

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@6202

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6202

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6202

commit: 58bdaf4

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat