Files
DataMate/frontend
Jerry Yan 8f21798d57 feat(annotation): 实现自定义数据标注结果面板
实现功能:
- 替换 Label Studio 自带的侧边栏,使用自定义结果面板
- 支持通用区域关系标注(任意标注区域之间建立关系)
- 实时同步 Label Studio 的标注变更
- 双向联动:点击面板区域可高亮 LS 内对应区域,反之亦然
- 快捷标注关系:关系拾取模式、CRUD 操作、自动切换 Tab
- 保存联动:自动合并面板关系到标注结果,判断是否已标注

技术实现:
- 新增 5 个组件:
  - annotation-result.types.ts: TypeScript 类型定义
  - RegionList.tsx: 区域列表组件
  - RelationEditor.tsx: 关系编辑弹窗
  - RelationList.tsx: 关系列表组件
  - AnnotationResultPanel.tsx: 主面板组件(300px,可折叠,Tabs 切换)
- 修改 2 个文件:
  - lsf.html: 消息协议扩展、防抖广播、区域选择监听、事件绑定/解绑
  - LabelStudioTextEditor.tsx: 移除 LS 侧边栏、集成自定义面板、消息处理、taskId 校验

关键设计:
- 单向读取 + 保存时合并:避免复杂的双向同步
- _source: 'panel' 标记:区分面板创建的关系和 LS 原生关系
- 150ms 防抖广播:避免消息洪泛
- 幂等事件绑定:避免监听器累积
- taskId 校验:防止跨任务消息混乱

代码审查:
- 经过 3 轮 codex 审查,所有问题已修复
- 构建成功,Lint 检查通过
- 事件绑定/解绑结构清晰,幂等性处理合理
- 跨任务消息校验与状态更新路径一致性明显提升
2026-02-17 19:30:48 +08:00
..
2026-01-09 08:46:01 +08:00

🚀 快速开始

npm install       # 安装依赖
npm run dev       # 启动项目
npm run mock      # 启动后台Mock服务(可选)

📁 项目结构

frontend/
├── public/                               # 📖 文档中心
│   └── xxx/         # 标注工作台(可分离部署)
│
├── src/                                # 🎨 前端应用
│   ├── apps/                          # 多前端应用
│   │   ├── console/                   # 数据工作台&运营控制台
│   │   │   ├── next.config.js
│   │   │   ├── package.json
│   │   │   └── src/
│   │   └── annotation-studio/         # 标注工作台(可分离部署)
│   │
│   ├── assets/                      # 共享UI组件/SDK
│   │   ├── xxx/                   # 数据工作台&运营控制台
│   │   │   ├── next.config.js
│   │   │   └── src/
│   │   │
│   │   │
│   │   └── xxx/                   # 数据工作台&运营控制台
│   │       ├── package.json
│   │       └── src/
│   │
│   ├── components/                        # 构建与环境配置
│   │   ├── CardView.tsx                  # 数据工作台&运营控制台
│   │   ├── DetailHeader.tsx                   # 数据工作台&运营控制台
│   │   ├── RadioCard.tsx                   # 数据工作台&运营控制台
│   │   ├── SearchControls                   # 数据工作台&运营控制台
│   │   ├── TagList         # 标注工作台(可分离部署)
│   │   └── TaskPopover         # 标注工作台(可分离部署)
│   │
│   ├── hooks/                        # 构建与环境配置
│   │   ├── console/                   # 数据工作台&运营控制台
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   └── annotation-studio/         # 标注工作台(可分离部署)
│   │
│   ├── mock/                        # 构建与环境配置
│   │   ├── console/                   # 数据工作台&运营控制台
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   └── annotation-studio/         # 标注工作台(可分离部署)
│   │
│   ├── pages/                        # 构建与环境配置
│   │   ├── console/                   # 数据工作台&运营控制台
│   │   │   ├── next.config.js
│   │   │   ├── package.json
│   │   │   └── src/
│   │   └── annotation-studio/         # 标注工作台(可分离部署)
│   │
│   ├── providers/                        # 构建与环境配置
│   │   ├── console/                   # 数据工作台&运营控制台
│   │   │   ├── next.config.js
│   │   │   ├── package.json
│   │   │   └── src/
│   │   └── annotation-studio/         # 标注工作台(可分离部署)
│   │
│   ├── routes/                        # 构建与环境配置
│   │   └── next.config.js
│   │
│   ├── types/                        # 构建与环境配置
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   ├── next.config.js
│   │   └──  next.config.js
│   │
│   └── utils/                        # 构建与环境配置
│       ├── next.config.js
│       ├── next.config.js
│       └── next.config.js
│
├── eslint.config.js/                            # 🔧 后端服务架构
├── index.html/                            # 🔧 后端服务架构
├── package.json/                            # 🔧 后端服务架构
├── README.md                           # 项目说明
├── tailwind.config.ts                        # 更新日志
├── vite.config.ts                             # 开源协议
└── pom.xml                            # Maven根配置