基础使用

本节介绍 GanttFlow 的基础使用方式，包括任务数据配置、视图切换和常见交互。

基础示例

React

import React from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

function App() {
  const tasks = [
    {
      id: "1",
      name: "需求分析",
      start: "2024-01-01",
      end: "2024-01-05",
      progress: 100,
    },
    {
      id: "2",
      name: "系统设计",
      start: "2024-01-06",
      end: "2024-01-10",
      progress: 80,
    },
    {
      id: "3",
      name: "编码开发",
      start: "2024-01-11",
      end: "2024-01-20",
      progress: 50,
    },
    {
      id: "4",
      name: "测试验收",
      start: "2024-01-21",
      end: "2024-01-25",
      progress: 0,
    },
  ]

  return (
    <div style={{ height: "500px" }}>
      <EnhancedGanttChart tasks={tasks} viewMode="week" />
    </div>
  )
}

export default App

Vue

<template>
  <div style="height: 500px">
    <GanttChart :tasks="tasks" view-mode="week" />
  </div>
</template>

<script setup lang="ts">
import { GanttChart } from "@agions/gantt-flow/vue"
import "@agions/gantt-flow/style"

const tasks = [
  {
    id: "1",
    name: "需求分析",
    start: "2024-01-01",
    end: "2024-01-05",
    progress: 100,
  },
  {
    id: "2",
    name: "系统设计",
    start: "2024-01-06",
    end: "2024-01-10",
    progress: 80,
  },
  {
    id: "3",
    name: "编码开发",
    start: "2024-01-11",
    end: "2024-01-20",
    progress: 50,
  },
]
</script>

任务数据

任务（Task）是甘特图的核心数据单元：

interface Task {
  id: string              // 唯一标识符
  name: string           // 任务名称
  start: string | Date   // 开始时间
  end: string | Date     // 结束时间
  progress?: number      // 进度 0-100
  type?: 'task' | 'milestone' | 'project'
  color?: string         // 自定义颜色
}

完整任务示例

const tasks = [
  {
    id: "task-1",
    name: "后端开发",
    start: "2024-01-01",
    end: "2024-01-10",
    progress: 60,
    color: "#10b981",  // 可选：自定义颜色
  },
  {
    id: "milestone-1",
    name: "Alpha 发布",
    start: "2024-01-15",
    end: "2024-01-15",
    type: "milestone",  // 里程碑
  },
]

视图模式

支持五种视图模式：

// 通过 props 设置
<EnhancedGanttChart viewMode="month" />

// 通过 ref 动态切换
ganttRef.current?.setViewMode('day')
ganttRef.current?.setViewMode('week')
ganttRef.current?.setViewMode('month')
ganttRef.current?.setViewMode('quarter')
ganttRef.current?.setViewMode('year')

React 完整示例

import React, { useRef } from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

function App() {
  const ganttRef = useRef(null)
  const [viewMode, setViewMode] = React.useState("week")

  const tasks = [
    { id: "1", name: "任务一", start: "2024-01-01", end: "2024-01-05", progress: 100 },
    { id: "2", name: "任务二", start: "2024-01-06", end: "2024-01-12", progress: 60 },
    { id: "3", name: "任务三", start: "2024-01-13", end: "2024-01-20", progress: 30 },
  ]

  return (
    <div>
      {/* 视图切换按钮 */}
      <div style={{ marginBottom: 16 }}>
        <button onClick={() => setViewMode("day")}>日</button>
        <button onClick={() => setViewMode("week")}>周</button>
        <button onClick={() => setViewMode("month")}>月</button>
        <button onClick={() => ganttRef.current?.fitToScreen()}>适应屏幕</button>
      </div>

      {/* 甘特图 */}
      <div style={{ height: "400px" }}>
        <EnhancedGanttChart
          ref={ganttRef}
          tasks={tasks}
          viewMode={viewMode}
        />
      </div>
    </div>
  )
}

事件处理

常用事件

<EnhancedGanttChart
  tasks={tasks}
  onTaskClick={(task) => {
    console.log("任务点击:", task)
  }}
  onTaskDrag={(task, e, newStart, newEnd) => {
    console.log(`拖拽: ${task.name} -> ${newStart} ~ ${newEnd}`)
  }}
  onTaskResize={(task, e, newStart, newEnd) => {
    console.log(`调整大小: ${task.name} -> ${newStart} ~ ${newEnd}`)
  }}
  onViewChange={(mode) => {
    console.log("视图切换:", mode)
  }}
  onProgressChange={(task, progress) => {
    console.log(`进度更新: ${task.name} -> ${progress}%`)
  }}
/>

Vue 事件绑定

<template>
  <div style="height: 500px">
    <GanttChart
      :tasks="tasks"
      view-mode="week"
      @task-click="onTaskClick"
      @task-drag="onTaskDrag"
      @task-resize="onTaskResize"
    />
  </div>
</template>

<script setup>
const onTaskClick = (task) => {
  console.log("任务点击:", task)
}

const onTaskDrag = (task, e, newStart, newEnd) => {
  console.log(`拖拽: ${task.name}`)
}
</script>

任务操作方法

通过 ref 调用组件方法：

const ganttRef = useRef(null)

// 切换视图
ganttRef.current?.setViewMode('month')

// 适应屏幕
ganttRef.current?.fitToScreen()

// 滚动到指定日期
ganttRef.current?.scrollToDate('2024-01-15')

// 选中任务
ganttRef.current?.selectTask('task-1')

// 获取选中的任务
const selectedTask = ganttRef.current?.getSelectedTask()

// 取消选中
ganttRef.current?.clearSelection()

任务条拖拽

任务条支持拖拽移动和边缘调整大小：

<EnhancedGanttChart
  tasks={tasks}
  enableDrag={true}      // 启用拖拽
  enableResize={true}    // 启用调整大小
  snapTo guides={true}   // 磁吸辅助线
/>

TIP

默认情况下，拖拽和调整大小功能是启用的。如需禁用，请设置 enableDrag={false} 或 enableResize={false}。

添加依赖关系

任务之间可以添加依赖关系：

const dependencies = [
  { fromId: "1", toId: "2", type: "finish_to_start" },
  { fromId: "2", toId: "3", type: "finish_to_start" },
]

<EnhancedGanttChart
  tasks={tasks}
  dependencies={dependencies}
  enableDependencies={true}
/>

主题切换

内置亮色/暗色主题：

// 亮色主题
<EnhancedGanttChart options={{ theme: "light" }} />

// 暗色主题
<EnhancedGanttChart options={{ theme: "dark" }} />

// 跟随系统
<EnhancedGanttChart options={{ theme: "auto" }} />

下一步

• 高级用法 - 拖拽、依赖、虚拟滚动
• 主题定制 - 自定义主题颜色
• API 参考 - 完整属性列表