fix(descriptions): optimize borderless auto layout

[Seeridia]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

fix #2431

💡 需求背景和解决方案

内容较长见下条评论，总结：

• 不跟随 issue 的建议使用一个 td 来封装 label 和 value，当前方案更好
• 仅做出对 tableLayout: auto 下 并在 label 比 value 更长的情况下的布局优化

📝 更新日志

• fix(descriptions): 优化 tableLayout: auto 下 并在 label 比 value 更长的情况下的布局

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

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

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

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Seeridia]

我这边对比了 TDesign、Arco、Element-Plus、Ant-Design 国内四个组件库在这个问题上的处理：

目前已统一为同一个表格，默认不添加任何额外的样式和参数，具体的代码都可以见对应的 Playground

1. Element-Plus、Ant-Design：无边框水平态在 td.ant-descriptions-item 内部包 label/value

项目	Ant Design	Element Plus
Playground	CodeSandbox	Element Plus Playground
预览
结构

2. Tdesign、Arco 无边框时拆 label td + value td

项目	Tdesign	Arco
Playground	CodeSandbox	CodeSandbox
预览
结构

这边根据 issue 的图片和描述

Descriptions美感需要加强。比如基础显示，大部分需求是标题和内容需要对齐，而现在Descriptions只是简单的table布局。参考其它组件库同样的基础内容，就显得相当low，不美观，基础无边框其它组件库使用一个td来封装标题和内容，而tdesign只是简单放在td里，导致效果不佳。

这边的需求可以逐个分析：

• 大部分需求是标题（label）和内容（value）需要对齐
  • => 根据上面提供的四个不同组件库的图片，看出在 TD 和 Arco 这边其实才是有对齐的（如果这边指的是 label 和 value 这边单独的每列对齐下来），此时也更加美观和整齐。
• 基础无边框其它组件库使用一个td来封装标题和内容，而tdesign只是简单放在td里，导致效果不佳。
  • => 这边的效果不佳根据用户提供的截图，指的应该是 标题（label）和内容（value）之间间距过大
• 基础无边框其它组件库使用一个td来封装标题和内容，而 tdesign 只是简单放在td里，导致效果不佳。
  • => 这边将「效果不佳」归因 为没有使用一个td来封装标题和内容

关于将「效果不佳」归因 为没有使用一个td来封装标题和内容，这个是错误的，关于 label 和 value 间距过大，这个其实完全可以直接通过 tableLayout 来解决。

tableLayout 有两个可选值：

1. auto 下按照浏览器的自动布局算法，可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/table-layout
2. fixed 下的宽度可以简单理解为 每个 td 宽度 = table 总宽 / column*2（label 和 value 分两个）

附，另外有发现这个参数， td 的 react 默认值是 auto，但是 vue-next 是 fixed；vue 不暴露 tableLayout ，但是走的是默认的 table-layout: auto

用户提供的截图是由于 tdesign-vue-next 默认为 fixed 导致的，改为 auto 即可直接解决用户问题

---

另外，我不建议 使用一个td来封装标题和内容

如果采用用户建议的 Element-Plus、Ant-Design 的方案 使用一个td来封装标题和内容 会产生下面的问题：

1. 兼容性：这个修改将直接改变结构，导致出现兼容性问题，如用户自定义 CSS 选择器失效

2. 工程改动范围大，影响面广：

   为了同时满足无边框和有边框两种场景，两者的 DOM 结构需要分离（主要受 label 背景以及 border 模式下表格语义的限制）。这不仅涉及结构调整，还会引发一系列连锁影响，包括但不限于：

   • labelStyle、contentStyle 的作用对象发生变化；
   • tableLayout、itemLayout 等 API 的语义需要重新定义；
   • span 的布局计算逻辑需要重构；
   • 多处现有布局和渲染逻辑需要同步调整。

   因此，该方案不仅开发成本较高，而且会导致多个现有 API 的行为或语义发生变化，对已有项目的兼容性影响较大，用户升级成本也高。

所以我认为，不应该使用 Element-Plus、Ant-Design 的方案来合并 label 和 value

---

但是值得注意到的是

上面 tableLayout 改为 auto 能解决这个问题的前提是：label 的文本长度比 value 短（虽然绝大多数场景符合）

关于为什么 label 的文本长度比 value 短，就会出现间距问题，可以见 css 标准文档：https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm 和 https://github.com/chromium/chromium/blob/8c1ad5a70d904e084213920b03fd7609804fe4e7/third_party/blink/renderer/core/layout/table/table_layout_utils.cc#L463
可以得到：根据各个 auto 列的 max-content/preferred width 比例分配额外宽度。内容更长的列，不仅内容宽度更大，还会得到更多额外空白，造成我们场景下的间隔长度不合理。

如果label 的文本长度比 value 长，就会出现：

但是与此同时，Arco 就算是这种情况也能处理好间距问题：

我阅读 Arco 源码后也发现，Arco 的做法是给 label 单元格：

width: 1px;            // 这个 label 列请尽量窄
white-space: nowrap;   // label 文本不要换行

最终 label 单元格会被压到“刚好能放下 label 的最小宽度”，此时就能合理控制间距

所以，本 PR 的提交内是参照 Arco 的做法，以此对 tableLayout: auto 下 并在 label 比 value 更长的情况下的布局优化

[github-actions]

TDesign Component Repositories CI Test Open

Component	Lint	Test	Build	Preview
tdesign-vue	✅	✅	✅	👀
tdesign-vue-next	✅	✅	✅	👀
tdesign-react	✅	✅	✅	👀
tdesign-mobile-vue	✅	✅	✅	👀
tdesign-mobile-react	✅	✅	✅	👀