数据模型

Vue / Core

interface GanttTask {
  id: string
  title: string
  start: string | Date
  end?: string | Date
  progress?: number
  status?: 'planned' | 'active' | 'blocked' | 'done'
  kind?: 'task' | 'project' | 'milestone'
  parentId?: string
  owner?: { name: string; avatar?: string; color?: string }
  color?: string
  meta?: Record<string, unknown>
}

Web 端依赖关系使用独立的 GanttLink[]，不要把前置任务写进 GanttTask。任务顺序就是行顺序，parentId 与 level 用于表达宿主管理的层级。

const links: GanttLink[] = [
  { id: 'design-dev', source: 'design', target: 'dev', type: 'finish-start' },
]

Flutter

Flutter 使用不可变 YgTask。完成度为 0...1，日期使用 DateTime，业务字段放在 metadata：

dart

YgTask(
  id: 'api',
  title: '接口联调',
  start: DateTime(2026, 8, 10),
  end: DateTime(2026, 8, 18),
  progress: .55,
  dependencies: const ['design'],
  metadata: const {'ticket': 'YG-42'},
)

交互不会直接修改传入对象。Vue 发出 task-change，React 调用 onTaskChange，Flutter 发出 YgTaskChange，由宿主决定是否提交到状态管理或后端。

数据模型 ​

Vue / Core ​

Flutter ​

数据模型

Vue / Core

Flutter