LabelingSystem/web/apps/lq_label/EDITOR_TEST.md

LabelStudio 编辑器测试页面

概述

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

访问方式

1. 启动开发服务器：

   cd web
   yarn nx serve lq_label
   

2. 访问测试页面：

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

测试页面功能

左侧：编辑器区域

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

右侧：调试面板

• 编辑器状态：显示编辑器是否成功加载
• 错误信息：显示任何加载或初始化错误
• 标注结果：实时显示标注数据的 JSON 格式

测试配置

<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 后端）：

cd web
yarn nx serve editor

这会在 http://localhost:8010/ 启动 editor，但它需要：

• Label Studio 后端服务器运行在 http://localhost:8080/
• 完整的 Label Studio 项目结构

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

样式加载策略

当前实现（推荐）

// 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. 实现完整的标注保存功能