快速开始

本指南将帮助你在最短时间内上手 GanttFlow。无论你使用 React 还是 Vue，都能快速集成。

环境要求

要求	版本
Node.js	>= 18.0.0
React	>= 16.8.0 (推荐 18+)
Vue	>= 3.0.0
TypeScript	>= 5.0+

安装

npm

npm install @agions/gantt-flow

yarn

yarn add @agions/gantt-flow

pnpm

pnpm add @agions/gantt-flow

React 使用

基础示例

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

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

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

export default App

完整示例（带 Ref 和事件）

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

function App() {
  const ganttRef = useRef(null)

  const tasks = [
    {
      id: "1",
      name: "需求分析",
      start: "2023-03-01",
      end: "2023-03-05",
      progress: 100,
      type: "task",
    },
    {
      id: "2",
      name: "设计阶段",
      start: "2023-03-06",
      end: "2023-03-10",
      progress: 80,
      type: "task",
    },
    {
      id: "3",
      name: "发布里程碑",
      start: "2023-03-15",
      end: "2023-03-15",
      progress: 0,
      type: "milestone",
    },
  ]

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

  return (
    <div style={{ height: "500px" }}>
      <EnhancedGanttChart
        ref={ganttRef}
        tasks={tasks}
        dependencies={dependencies}
        viewMode="week"
        onTaskClick={(task) => console.log("任务点击:", task)}
        options={{
          theme: "light",
          enableDragGuides: true,
          adaptiveDensity: true,
        }}
      />
    </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: "2023-03-01",
    end: "2023-03-05",
    progress: 100,
  },
  {
    id: "2",
    name: "系统设计",
    start: "2023-03-06",
    end: "2023-03-10",
    progress: 80,
  },
  {
    id: "3",
    name: "编码实现",
    start: "2023-03-11",
    end: "2023-03-20",
    progress: 50,
  },
]
</script>

完整示例（带 Ref 和事件）

<template>
  <div style="height: 500px">
    <GanttChart
      ref="ganttChart"
      :tasks="tasks"
      :dependencies="dependencies"
      view-mode="week"
      @task-click="onTaskClick"
    />
  </div>
</template>

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

const ganttChart = ref(null)

const tasks = [
  {
    id: "1",
    name: "需求分析",
    start: "2023-03-01",
    end: "2023-03-05",
    progress: 100,
    type: "task",
  },
  {
    id: "2",
    name: "设计阶段",
    start: "2023-03-06",
    end: "2023-03-10",
    progress: 80,
    type: "task",
  },
  {
    id: "3",
    name: "发布里程碑",
    start: "2023-03-15",
    end: "2023-03-15",
    progress: 0,
    type: "milestone",
  },
]

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

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

注意事项

WARNING

样式导入 务必引入 GanttFlow 的样式文件，否则组件将没有默认样式：

import "@agions/gantt-flow/style"

TIP

TypeScript 支持 GanttFlow 完全使用 TypeScript 编写，提供完整的类型定义。推荐搭配 TypeScript 使用以获得最佳开发体验。

INFO

CSS 变量 GanttFlow 使用 CSS 变量实现主题定制。详见 主题系统。

在线演示

查看完整在线演示 →

下一步

• 核心概念 - 了解 GanttFlow 的核心设计
• 5 分钟快速上手 - 更简洁的上手教程
• API 参考 - 查看完整的组件属性
• 主题系统 - 自定义组件外观