# 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` 的背景设置为透明：

```scss
// 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 用于显示关系标注的组件：

```jsx
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` 中找到对应的组件和样式定义。