fix(sequence-interaction): resolve lifeline penetration issues using SVG masks instead of white overlays

[xxMudCloudxx]

背景与问题：

此前，为了处理生命线（Lifeline）穿透半透明节点的问题，我简单地在节点处叠加了白色矩形进行遮挡。但这一做法忽略了 SVG 背景颜色的多样性：当背景并非纯白，或者节点具有半透明属性时，这些白色遮挡条在浅色背景下会显得非常突兀，导致明显的 UI “白条”视觉缺陷。

改进方案：

为了彻底修复该 UI 瑕疵，我重构了遮挡逻辑：

• 废弃物理遮挡： 移除了节点处的硬编码白色窄条。

• 引入 SVG Mask： 改用蒙版（Mask）技术，根据节点位置动态地在生命线上“挖空”对应区域。

预期收益：

通过这种方式，生命线在节点处会实现物理意义上的断开而非视觉上的覆盖。这不仅完美适配了半透明节点的渲染需求，也确保了在任何背景颜色下，节点周围的视觉表现都能保持一致且自然。

[gemini-code-assist]

Summary of Changes

Hello @xxMudCloudxx, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决序列图中生命线穿透半透明节点导致的 UI 瑕疵。此前通过叠加白色矩形进行遮挡的方案，在背景色多样或节点半透明时会产生明显的“白条”问题。本次重构废弃了这种物理遮挡方式，转而利用 SVG 蒙版技术，在生命线经过节点时动态地“挖空”相应区域，从而实现生命线的物理断开，确保了在各种视觉条件下都能提供精确且自然的渲染效果。

Highlights

• 废弃物理遮挡: 移除了之前用于遮挡生命线穿透节点的白色矩形窄条，解决了在非白色背景或半透明节点下出现的“白条”视觉缺陷。
• 引入 SVG Mask: 改用 SVG 蒙版技术，根据节点位置动态地在生命线上创建“挖空”区域，实现了生命线的物理断开而非简单覆盖。
• 提升视觉一致性: 确保生命线在半透明节点处也能正确显示，并在任何背景颜色下保持节点周围的视觉表现一致且自然。

Changelog

• src/designs/structures/sequence-interaction.tsx
  • 移除了旧的生命线绘制逻辑，该逻辑通过白色矩形遮挡生命线。
  • 引入了 LIFELINE_MASK_GAP 常量，用于控制蒙版挖空区域的间距。
  • 重新实现了生命线绘制，现在通过动态创建 SVG 蒙版来精确地在节点区域“挖空”生命线，避免穿透问题。

Activity

• 目前没有与此拉取请求相关的活动。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

本次 PR 通过使用 SVG mask 替代原有的白色矩形遮挡，巧妙地解决了生命线穿透半透明节点时的视觉缺陷问题。这个方案更加健壮，能够适应不同的背景颜色和节点透明度，值得称赞。

代码重构清晰地移除了旧逻辑，并引入了新的生命线绘制方法。我发现一处可以优化性能的地方：在为每条生命线收集节点时，目前的实现存在嵌套循环，这在节点和泳道数量较多时可能会影响性能。我已在具体的代码行提出了改进建议，通过预先将节点按泳道分组来避免不必要的遍历，从而提高效率。

[codecov-commenter]

Codecov Report

❌ Patch coverage is 1.29870% with 76 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.15%. Comparing base (1a3662e) to head (dc4f8b9).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/designs/structures/sequence-interaction.tsx	1.29%	76 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #214      +/-   ##
==========================================
+ Coverage   46.14%   46.15%   +0.01%     
==========================================
  Files         341      341              
  Lines       27930    28003      +73     
  Branches     2282     2289       +7     
==========================================
+ Hits        12887    12924      +37     
- Misses      15031    15067      +36     
  Partials       12       12              

Flag	Coverage Δ
infographic	46.15% <1.29%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/designs/structures/sequence-interaction.tsx	4.90% <1.29%> (-0.15%)	⬇️

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[hustcc]

@xxMudCloudxx 可以多尝试使用 ai 写代码。

[xxMudCloudxx]

@xxMudCloudxx 可以多尝试使用 ai 写代码。

我用得应该比较多，让ai分析需求，cr什么的

[hustcc]

@xxMudCloudxx 可以多尝试使用 ai 写代码。

我用得应该比较多，让ai分析需求，cr什么的

嗯嗯，也让 ai 去 coding~ 然后也想想怎么做一些措施，让项目更容易被 ai 维护和迭代，比如一些 skill 约束等。