You've already forked DataMate
实现功能: - 替换 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 检查通过 - 事件绑定/解绑结构清晰,幂等性处理合理 - 跨任务消息校验与状态更新路径一致性明显提升
🚀 快速开始
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根配置