# LabelStudio 编辑器测试页面

## 概述

创建了一个独立的测试页面 `/editor-test`，用于验证 LabelStudio 编辑器的集成和样式。

## 访问方式

1. 启动开发服务器：
   ```bash
   cd web
   yarn nx serve lq_label
   ```

2. 访问测试页面：
   - 主页：http://localhost:4200/
   - 点击 "🧪 编辑器测试" 按钮
   - 或直接访问：http://localhost:4200/editor-test

## 测试页面功能

### 左侧：编辑器区域
- 显示 LabelStudio 编辑器
- 使用简单的情感分析配置
- 测试文本："这是一个测试文本，用于验证 LabelStudio 编辑器是否正常工作。"

### 右侧：调试面板
- **编辑器状态**：显示编辑器是否成功加载
- **错误信息**：显示任何加载或初始化错误
- **标注结果**：实时显示标注数据的 JSON 格式

## 测试配置

```xml
<View>
  <Text name="text" value="$text"/>
  <Choices name="sentiment" toName="text" choice="single">
    <Choice value="Positive"/>
    <Choice value="Negative"/>
    <Choice value="Neutral"/>
  </Choices>
</View>
```

## 验证要点

### ✅ 样式检查
- [ ] 标签按钮有正确的颜色和样式
- [ ] 按钮有正确的悬停效果
- [ ] 侧边栏和面板正常显示
- [ ] 没有橙色到粉色的渐变遮罩
- [ ] 文本清晰可读

### ✅ 功能检查
- [ ] 可以点击选择情感标签
- [ ] 标注结果实时更新在右侧面板
- [ ] 编辑器交互流畅
- [ ] 控制按钮（提交、更新等）正常工作

### ✅ 控制台检查
打开浏览器开发者工具（F12），查看：
- [ ] 没有 CSS 加载错误
- [ ] 没有 JavaScript 错误
- [ ] `libs_editor_src_index_js.css` 文件已加载
- [ ] 控制台输出显示编辑器初始化成功

## Editor 库独立启动

Editor 库可以独立启动（但需要完整的 Label Studio 后端）：

```bash
cd web
yarn nx serve editor
```

这会在 http://localhost:8010/ 启动 editor，但它需要：
- Label Studio 后端服务器运行在 http://localhost:8080/
- 完整的 Label Studio 项目结构

**注意**：我们的测试页面不需要这个独立服务器，它直接在我们的应用中集成编辑器。

## 样式加载策略

### 当前实现（推荐）
```typescript
// main.tsx
import '../../../libs/ui/src/styles.scss';
import '../../../libs/ui/src/tailwind.css';
// Editor 样式会在动态导入 @humansignal/editor 时自动加载
```

### 关键点
1. **不要**静态导入 `editor/src/assets/styles/global.scss`
2. **依赖**动态导入时的自动样式加载
3. **参考** playground 和 labelstudio 应用的实现方式

## 文件结构

```
web/apps/lq_label/src/views/editor-test/
├── editor-test.tsx           # 测试页面组件
├── editor-test.module.scss   # 样式文件
└── index.ts                   # 导出文件
```

## 故障排除

### 问题：样式不显示
**解决方案**：
1. 检查 `main.tsx` 是否只导入了 UI 库样式
2. 确认没有静态导入 editor 的全局样式
3. 清除浏览器缓存并刷新

### 问题：编辑器无法加载
**解决方案**：
1. 检查控制台是否有错误
2. 确认 `@humansignal/editor` 包已正确安装
3. 检查 webpack 配置是否正确

### 问题：出现橙色渐变遮罩
**解决方案**：
1. 这通常是 Tailwind 的 preflight 样式冲突
2. 确认 tailwind.config.js 配置正确
3. 检查是否有自定义样式覆盖了编辑器样式

## 下一步

如果测试页面工作正常，说明编辑器集成没有问题，可以：
1. 将相同的实现应用到 AnnotationView
2. 添加更多的编辑器配置选项
3. 实现完整的标注保存功能