源码

标注员标注数据 → 质检员审核 → 合格数据进入训练集 → 模型迭代 → AI 效果提升

┌───────────────────────────────────────────────┐
│                  前端层                         │
│  Vue3 + Vite + Element Plus + Fabric.js        │
│                                                 │
│  任务中心 → 标注作业 → 质检管理                 │
│   （领取）   （标注）   （审核/打回）            │
└───────────────────┬───────────────────────────┘
                    │ Pinia 状态共享
                    ▼
┌───────────────────────────────────────────────┐
│              任务状态机（stores/task.js）        │
│  pending → in_progress → reviewing →          │
│                        approved / rejected     │
└───────────────────────────────────────────────┘

src/
├── stores/
│   └── task.js          ← 任务状态机（唯一的全局状态）
├── utils/
│   └── mockData.js      ← 所有 Mock 数据
├── components/layout/
│   └── BasicLayout.vue  ← 侧边栏 + Header + 快捷键说明
└── views/
    ├── task-list/       ← 任务中心（总览、领取、进度）
    ├── rlhf/            ← 对话偏好标注
    ├── classification/  ← 文本分类标注
    ├── ner/             ← 命名实体识别
    ├── image-annotation/← 图片目标检测（Canvas 核心模块）
    └── quality-check/   ← 质检管理

领取任务
  [pending] ──────────────────→ [in_progress]
  待领取                         标注中
                                    │
                                    │ 提交批次
                                    ▼
                              [reviewing]
                               待质检
                              ╱         ╲
                    质检通过 ╱           ╲ 质检打回
                           ▼             ▼
                      [approved]      [rejected]
                       已通过          已打回
                                         │
                                         │ 标注员修改后重提交
                                         ▼
                                     [reviewing]

// stores/task.js
export const useTaskStore = defineStore('task', () => {
  const tasks = ref([...mockTasks])

  // 领取任务：pending → in_progress
  function claimTask(taskId) {
    const task = tasks.value.find(t => t.id === taskId)
    if (task && task.status === 'pending') {
      task.status = 'in_progress'
    }
  }

  // 提交任务：in_progress → reviewing（进入质检队列）
  function submitTask(taskId) {
    const task = tasks.value.find(t => t.id === taskId)
    if (task) {
      task.status = 'reviewing'
      task.done = task.total  // 标记全部完成
    }
  }

  // 质检通过：reviewing → approved
  function approveTask(taskId, passRate) {
    const task = tasks.value.find(t => t.id === taskId)
    if (task) {
      task.status = 'approved'
      task.passRate = passRate  // 记录通过率
    }
  }

  // 质检打回：reviewing → rejected（标注员需要重新处理）
  function rejectTask(taskId, passRate) {
    const task = tasks.value.find(t => t.id === taskId)
    if (task) {
      task.status = 'rejected'
      task.passRate = passRate
    }
  }

  return { tasks, claimTask, submitTask, approveTask, rejectTask, updateProgress }
})

// history 是撤销栈，存储每次提交前的状态
const history = ref([])

function submitCurrent() {
  if (!canSubmit.value) return

  // 提交前先把当前状态压栈
  history.value.push({
    index: currentIndex.value,
    choice: choice.value,
    comment: comment.value,
    scores: { ...scores.value }  // 深拷贝，否则引用会被后续修改
  })

  // 保存标注结果
  const item = items.value[currentIndex.value]
  item.choice = choice.value
  item.comment = comment.value
  item.scores = { ...scores.value }
  item.status = 'done'

  // 重置状态进入下一条
  choice.value = null
  comment.value = ''
  scores.value = {}
  moveToNext()
}

// 撤销：弹出栈顶状态，恢复到上一步
function undo() {
  if (!history.value.length) return
  const last = history.value.pop()

  // 恢复数据
  items.value[last.index].choice = null
  items.value[last.index].status = 'pending'

  // 跳回到被撤销的条目
  currentIndex.value = last.index
  choice.value = null  // 不恢复 choice，让标注员重新选
  comment.value = last.comment
  scores.value = { ...last.scores }
}

function handleKeydown(e) {
  // 关键：输入框聚焦时禁用快捷键
  // 否则在批注框里打字 "A" 会触发选择 A 的操作
  const tag = document.activeElement?.tagName
  if (tag === 'TEXTAREA' || tag === 'INPUT') return

  const key = e.key.toUpperCase()
  if (key === 'A') { e.preventDefault(); selectChoice('A') }
  else if (key === 'B') { e.preventDefault(); selectChoice('B') }
  else if (key === 'S') { e.preventDefault(); selectChoice('S') }
  else if (e.code === 'Space') { e.preventDefault(); skip() }
  else if (e.key === 'Enter') { e.preventDefault(); submitCurrent() }
  else if (e.ctrlKey && key === 'Z') { e.preventDefault(); undo() }
}

// 挂载和卸载时注册/注销事件监听
onMounted(() => window.addEventListener('keydown', handleKeydown))
onUnmounted(() => window.removeEventListener('keydown', handleKeydown))

// 找下一个"未完成且未跳过"的条目
function moveToNext() {
  for (let i = currentIndex.value + 1; i < items.value.length; i++) {
    if (items.value[i].choice === null && !skippedItems.value.includes(i)) {
      currentIndex.value = i
      return
    }
  }
  // 没有找到下一条，说明全部完成或全部跳过
  currentIndex.value = items.value.length  // 触发"全部完成"状态
}

张伟于2024年11月在北京协和医院确诊为2型糖尿病
↓ 标注后
[张伟](人名) 于 [2024年11月](时间) 在 [北京协和医院](机构) 确诊为 [2型糖尿病](疾病)

function handleSelection() {
  const selection = window.getSelection()
  if (!selection || selection.isCollapsed) return  // 没有选中任何内容

  const selectedText = selection.toString().trim()
  if (!selectedText) return

  const range = selection.getRangeAt(0)
  const container = textRef.value  // 标注文本区域的 DOM 元素

  // 确保选区在标注区域内，防止用户选中页面其他地方的文字
  if (!container || !container.contains(range.commonAncestorContainer)) return

  // 计算选区在原始文本中的字符位置
  // 思路：创建一个从文本起点到选区起点的 Range，取其文本长度
  const preRange = document.createRange()
  preRange.selectNodeContents(container)
  preRange.setEnd(range.startContainer, range.startOffset)
  const start = preRange.toString().length
  const end = start + selectedText.length

  // 检查是否和已有实体重叠
  const overlap = current.value.entities.some(e =>
    (start >= e.start && start < e.end) ||   // 新实体起点在已有实体内
    (end > e.start && end <= e.end) ||         // 新实体终点在已有实体内
    (start <= e.start && end >= e.end)         // 新实体完全包含已有实体
  )

  if (overlap) {
    ElMessage.warning('选区与已有实体重叠，请先删除再重新标注')
    selection.removeAllRanges()
    return
  }

  // 添加实体
  current.value.entities.push({
    start, end,
    text: selectedText,
    type: activeType.value  // 使用当前选中的实体类型
  })

  selection.removeAllRanges()  // 清除选区高亮
}

// 把文本按已标注实体切成若干段，有实体的段加高亮样式
const renderedSegments = computed(() => {
  if (!current.value) return []

  const text = current.value.text
  // 按起始位置排序，保证从左到右渲染
  const entities = [...current.value.entities].sort((a, b) => a.start - b.start)

  const segments = []
  let pos = 0  // 当前处理到的位置

  for (const ent of entities) {
    // 实体前面的普通文本
    if (ent.start > pos) {
      segments.push({ text: text.slice(pos, ent.start), entity: null })
    }
    // 实体本身
    const typeInfo = entityTypes.find(t => t.value === ent.type)
    segments.push({
      text: text.slice(ent.start, ent.end),
      entity: typeInfo,
      entityIndex: current.value.entities.indexOf(ent)
    })
    pos = ent.end
  }

  // 最后一段普通文本
  if (pos < text.length) {
    segments.push({ text: text.slice(pos), entity: null })
  }

  return segments
})

// Fabric 默认的控制锚点是方块，视觉上不够精准
// 重写为圆点，并删除旋转控制点

fabric.Object.prototype.set({
  cornerStyle: 'circle',      // 锚点形状改为圆形
  cornerSize: 8,              // 锚点大小
  cornerColor: '#fff',        // 锚点填充色（白色）
  cornerStrokeColor: '#409eff', // 锚点边框（蓝色）
  transparentCorners: false,  // 不透明
  borderColor: '#409eff',     // 选中时的边框颜色
  borderScaleFactor: 1.5      // 边框线宽
})

// 删除旋转控制点（标注框不需要旋转）
// mtr 是 Fabric 内置的旋转控件的 key 名
fabric.Object.prototype.controls.mtr = new fabric.Control({ visible: false })

// mousedown：记录起点，创建临时预览矩形
fabricCanvas.on('mouse:down', (opt) => {
  if (opt.target) return  // 点击已有对象，进入选择模式，不绘制

  isDrawing = true
  const pointer = fabricCanvas.getPointer(opt.e)
  startPoint = { x: pointer.x, y: pointer.y }

  // 临时预览矩形用虚线边框，视觉上区分"绘制中"和"已完成"
  activeRect = new fabric.Rect({
    left: startPoint.x, top: startPoint.y,
    width: 0, height: 0,
    fill: 'rgba(64,158,255,0.1)',
    stroke: getLabel(activeLabel.value)?.color,
    strokeWidth: 2,
    strokeDashArray: [5, 3],   // 虚线：[线段长度, 间隔长度]
    selectable: false,          // 绘制过程中不可选中
    evented: false              // 绘制过程中不响应事件
  })
  fabricCanvas.add(activeRect)
})

// mousemove：实时更新矩形大小，处理反向绘制
fabricCanvas.on('mouse:move', (opt) => {
  if (!isDrawing || !activeRect) return
  const pointer = fabricCanvas.getPointer(opt.e)
  const width = pointer.x - startPoint.x
  const height = pointer.y - startPoint.y

  // 处理反向绘制（鼠标向左上方拖动时，left/top 需要更新）
  activeRect.set({
    left: width < 0 ? pointer.x : startPoint.x,
    top: height < 0 ? pointer.y : startPoint.y,
    width: Math.abs(width),
    height: Math.abs(height)
  })

  // requestRenderAll 比 renderAll 性能更好，它会在下一帧统一渲染
  fabricCanvas.requestRenderAll()
})

// mouseup：完成绘制，替换为正式矩形
fabricCanvas.on('mouse:up', () => {
  if (!isDrawing) return
  isDrawing = false

  // 过滤掉太小的框（宽高都小于 10px 视为误触）
  if (!activeRect || activeRect.width < 10 || activeRect.height < 10) {
    if (activeRect) fabricCanvas.remove(activeRect)
    activeRect = null
    return
  }

  const labelInfo = getLabel(activeLabel.value)

  // 移除临时虚线矩形，添加正式实线矩形
  fabricCanvas.remove(activeRect)
  const rect = new fabric.Rect({
    left: activeRect.left, top: activeRect.top,
    width: activeRect.width, height: activeRect.height,
    fill: labelInfo.color + '20',    // 颜色 + 20% 透明度（十六进制 20 ≈ 12%）
    stroke: labelInfo.color,
    strokeWidth: 2,
    strokeDashArray: null,           // 正式矩形用实线
    label: activeLabel.value,        // 自定义属性，存储标注类型
    hasRotatingPoint: false          // 禁用旋转
  })

  fabricCanvas.add(rect)
  fabricCanvas.setActiveObject(rect)  // 绘制完成后自动选中新框
  syncAnnotations()    // 同步到 annotations 数组
  pushSnapshot()       // 压快照（用于撤销）
  activeRect = null
  fabricCanvas.requestRenderAll()
})

// 初始化时关闭自动渲染
fabricCanvas = new fabric.Canvas(canvasRef.value, {
  width: CANVAS_WIDTH,
  height: CANVAS_HEIGHT,
  renderOnAddRemove: false  // 关键：关闭每次 add/remove 后的自动重绘
})

// 好处：批量 add 多个对象时，不会触发多次重绘
// 只在最后手动调一次 requestRenderAll()
// 对于有几百个标注框的图片，性能差距非常明显

let snapshotStack = []  // 快照栈

// 每次操作完成（mouseup）后压栈
function pushSnapshot() {
  // canvas.toJSON(['label']) 序列化整个 Canvas 状态
  // 传入 ['label'] 是为了把自定义属性 label 也序列化进去
  // 否则恢复快照后 label 信息丢失，导致标注类型消失
  const json = fabricCanvas.toJSON(['label'])
  snapshotStack.push(json)
  if (snapshotStack.length > 30) snapshotStack.shift()  // 最多 30 帧
}

// 撤销
function undoBox() {
  if (snapshotStack.length > 1) {
    snapshotStack.pop()  // 丢弃当前状态
    const prevJson = snapshotStack[snapshotStack.length - 1]

    // 从快照恢复 Canvas
    fabricCanvas.loadFromJSON(prevJson, () => {
      fabricCanvas.requestRenderAll()
      syncAnnotations()  // 同步到 annotations 数组
    })
  } else if (snapshotStack.length === 1) {
    // 只剩一帧，清空所有标注框（保留底图）
    const objects = fabricCanvas.getObjects().filter(obj => obj.label)
    objects.forEach(obj => fabricCanvas.remove(obj))
    fabricCanvas.requestRenderAll()
    annotations.value = []
    snapshotStack = []
  }
}

// Fabric 对象和 annotations 数组要保持同步
// annotations 是给 Vue 模板渲染标注列表用的
function syncAnnotations() {
  // 只取有 label 属性的对象（排除底图等非标注对象）
  const objects = fabricCanvas.getObjects().filter(obj => obj.label)

  annotations.value = objects.map(obj => ({
    label: obj.label,
    left: obj.left,
    top: obj.top,
    // 注意：obj.width 是原始宽度，scaleX 是缩放比例
    // 实际显示宽度 = width * scaleX
    width: obj.width * obj.scaleX,
    height: obj.height * obj.scaleY
  }))
}

质检员看到待质检任务 → 逐条审核标注结果 → 标记通过/不通过 → 统计通过率
  → 通过率 ≥ 80%：整批通过 → 进入训练集
  → 通过率 < 80%：打回 → 标注员重新处理不通过的条目

// 随着质检员逐条标记，实时更新通过率
const passRatePreview = computed(() => {
  if (!selectedTask.value || !reviewedCount.value) return 0

  // 已标记通过的条目数 / 已审核总数
  const passed = selectedTask.value.items.filter(i => i.qcResult === 'pass').length
  return Math.round(passed / reviewedCount.value * 100)
})

// 标记通过
function markPass(item) {
  item.qcResult = 'pass'
  // computed 自动重新计算 passRatePreview
}

// 标记不通过（必须填写原因）
function markFail(item) {
  if (!item.qcComment) {
    ElMessage.warning('请填写不通过原因')
    return
  }
  item.qcResult = 'fail'
}

// 当前
import { mockTasks } from '@/utils/mockData.js'
const tasks = ref([...mockTasks])

// 替换为
onMounted(async () => {
  const { data } = await axios.get('/api/tasks', {
    params: { assignee: currentUser.id }
  })
  tasks.value = data
})

// RLHF 标注结果提交（当前是本地状态更新）
// 替换为
async function submitCurrent() {
  await axios.post('/api/annotations/rlhf', {
    taskId: currentTaskId,
    itemId: current.value.id,
    choice: choice.value,
    scores: scores.value,
    comment: comment.value
  })
  // 提交成功后再更新本地状态
  item.choice = choice.value
}

// 当前是导出 JSON 文件
// 真实项目改为提交到后端
async function submitCurrent() {
  await axios.post('/api/annotations/image', {
    taskId: currentTaskId,
    imageId: images.value[currentIndex.value].id,
    annotations: annotations.value.map(ann => ({
      label: ann.label,
      bbox: [Math.round(ann.left), Math.round(ann.top),
             Math.round(ann.width), Math.round(ann.height)]
    }))
  })
  images.value[currentIndex.value].status = 'done'
}

// 在 main.js 里初始化 WebSocket 连接
const ws = new WebSocket('wss://your-api/ws')
ws.onmessage = (event) => {
  const { type, taskId } = JSON.parse(event.data)
  if (type === 'TASK_REJECTED') {
    ElNotification({
      title: '任务被打回',
      message: `任务 ${taskId} 质检未通过，请修改后重新提交`,
      type: 'warning'
    })
    // 同步更新 Pinia 状态
    taskStore.rejectTask(taskId)
  }
}