跳到主要内容

Tree item 间距 4px + 布局重构 + 渐变遮罩

Pre-release · 类型： ✨ 新功能

Linear: DES-75 / DES-76 / DES-77 / DES-78

相关文件​

  • src/components/Tree/styles.ts
  • src/components/Tree/Tree.tsx
  • packages/design-site/docs/components/patterns/tree.mdx

改动内容​

1. item 间距 4px​

TREE_ROOT_CLASS 和 TREE_CHILDREN_INNER_CLASS 各加 gap-1（4px），与 Figma 设计规范对齐。

2. title / action 布局重构​

移除 TREE_ITEM_CONTENT_CLASS 中间包裹层，title 和 actions 成为 treeitem flex row 的直接子级：

treeitem [flex items-center gap-12]
├── left  [shrink-0]
├── title [flex-1 overflow-hidden]   ← 撑满剩余空间
└── actions [shrink-0 max-w-0→96]   ← hover 时展开挤占 title

3. title 渐变遮罩​

TREE_ITEM_TITLE_CLASS 用 CSS mask-image 替代 truncate（省略号）：右侧 24px 渐变区域，超长时淡出表示有剩余字符；短文本时遮罩作用于空白区域，视觉无影响。

4. actions 布局策略​

TREE_ITEM_ACTIONS_CLASS 从 opacity-0 + ml-auto 改为 max-w-0 overflow-hidden + max-w-96：

  • 默认：max-w-0 不占布局空间，title 真正撑满
  • hover：max-w-96（384px）展开到自然宽度，title 因 flex-1 自动收缩
  • 同步过渡 max-width 和 opacity，保持 150ms 渐变动效
  • 可见态同步加 overflow-visible，防止内部 button 的 box-shadow / focus ring 被 overflow: hidden 裁剪

5. Long Titles demo（design-site）​

在 tree.mdx 新增 Long Titles section，展示：

  • 220px 容器宽度约束下多个超长 title 的渐变遮罩效果
  • hover 时 actions 出现并挤占 title 宽度
  • 短 title 不受遮罩影响

6. demo action button focus 样式（design-site）​

所有 demo 中的 ⋯ 按钮加 outline-none focus-visible:ring-1 focus-visible:ring-(--Labels-Primary)，替换浏览器默认 focus ring（Radix 关闭 dropdown 后 focus 回 trigger 时不再出现裸浏览器矩形轮廓）。