LabelingSystem/web/apps/lq_label/RELATIONS_OVERLAY_FIX.md

Relations Overlay 橙色遮罩问题修复

问题描述

在 LabelStudio 编辑器中出现了一个橙色到粉色的渐变遮罩，覆盖了整个标注界面。

问题根源

这个遮罩是 LabelStudio 的 relations-overlay 组件，它是一个 SVG 覆盖层，用于显示关系标注的连接线。

相关文件：

• web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
• web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss

问题原因：

• 这个 SVG 元素有一个默认的背景色或填充色
• 样式没有正确加载，导致显示了不应该显示的背景

解决方案

在组件的样式文件中添加以下 CSS 规则，强制将 relations-overlay 和 lsf-container 的背景设置为透明：

// Fix for relations-overlay background (orange gradient issue)
:global(.relations-overlay) {
  background: transparent !important;
  fill: none !important;
}

:global(.lsf-container) {
  background: transparent !important;
}

修改的文件

1. 测试页面样式：

   • web/apps/lq_label/src/views/editor-test/editor-test.module.scss

2. 标注页面样式：

   • web/apps/lq_label/src/views/annotation-view/annotation-view.module.scss

验证方法

1. 访问测试页面：http://localhost:4200/editor-test
2. 检查是否还有橙色渐变遮罩
3. 使用浏览器开发者工具（F12）检查 .relations-overlay 元素
4. 确认该元素的 background 和 fill 属性为 transparent 或 none

技术细节

RelationsOverlay 组件

这是 LabelStudio 用于显示关系标注的组件：

const containerStyles = ["relations-overlay", styles.container];

return (
  <svg
    className={containerStyles.join(" ")}
    ref={this.rootNode}
    xmlns="http://www.w3.org/2000/svg"
    style={style}
  >
    {/* SVG content */}
  </svg>
);

样式定位

• 使用 :global() 选择器来覆盖全局样式
• 使用 !important 确保样式优先级最高
• 同时设置 background 和 fill 属性以确保完全透明

相关问题

如果将来遇到类似的样式问题：

1. 使用浏览器开发者工具：

   • 右键点击问题区域 → "检查元素"
   • 查看元素的类名和样式
   • 检查哪些样式被应用，哪些被覆盖

2. 搜索源代码：

   • 使用类名在代码库中搜索
   • 找到对应的组件和样式文件
   • 理解组件的用途和样式结构

3. 添加覆盖样式：

   • 在组件的 .module.scss 文件中添加全局样式覆盖
   • 使用 :global() 选择器
   • 必要时使用 !important 提高优先级

其他 LabelStudio 样式问题

如果遇到其他 LabelStudio 样式问题，可以参考以下常见类名：

• .lsf-wrapper - 编辑器主容器
• .lsf-editor - 编辑器内容区域
• .lsf-tabs-panel__body - 标签面板主体
• .lsf-panel-tabs__tab - 面板标签
• .lsf-sidepanels - 侧边栏面板
• .relations-overlay - 关系覆盖层（本次修复的问题）
• .lsf-container - 容器元素

所有这些类名都可以在 web/libs/editor 中找到对应的组件和样式定义。