跳到主要内容

Tree 拖拽源行 actions 区域上下描边不再被遮挡 (WEB-1323)

版本： 0.9.1 · 类型： 🐛 Bug 修复

WEB-1323

问题​

拖拽一个同时渲染了 hover-only actions（如 + 新建按钮 + ⋯ 更多菜单）的 Tree 行时，拖拽源行 inset 描边的上下横边消失——描边看起来正好在 + / ⋯ 按钮下被截断。

根因​

拖拽源行的描边由 TREE_ITEM_DRAGGING_CLASS（inset-ring）绘制，本质是画在行元素自身的 1px inset box-shadow。actions 容器是 absolute inset-y-0 bg-inherit（TREE_ITEM_ACTIONS_CLASS）：上下贴满整行、用行背景色填充，用于遮住 title 右侧渐变遮罩区下方的文字。作为带背景的子元素，它的绘制层级高于父行的 inset box-shadow，满高铺满时其背景填充盖住了按钮区域内描边的上下横边。拖拽通常从 hover 态发起，因此拖拽进行中 actions 处于显示态、描边被遮挡可见。行右侧 right-(--Spacing_4) 让出的 4px 未被覆盖，故右侧圆角描边仍在——与现象一致。

改动文件​

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

改动内容​

  • styles.ts：TREE_ITEM_ACTIONS_CLASS 增加 group-data-[dragging]/pd-tree-item:inset-y-px——仅在拖拽态给 actions 容器上下各内收 1px，让 inset-ring 的上下横边透出。正常（非拖拽）态遮罩满高不变。
  • Tree.tsx：拖拽源行元素补 data-dragging={dragKey === node.key || undefined}，作为上面 group variant 的开关。
  • Tree.test.tsx：新增单测，断言拖拽源行带 data-dragging 且 actions 容器带内收 variant。
  • tree.mdx：Drag and Drop 章节新增「Drag a row that has actions」case（每行右侧 3+ 个 icon 按钮），复现并验证修复行为。

影响​

  • 仅影响拖拽源行视觉；描边现在在按钮区域完整显示。
  • 非拖拽态遮罩与 title 渐变遮罩不变；drop = inside（整行高亮、无描边）不受影响。