React 使用示例
基础用法
tsx
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带依赖关系
tsx
function WithDependencies() {
const tasks = [
{ id: "1", name: "需求分析", start: "2023-03-01", end: "2023-03-05" },
{ id: "2", name: "系统设计", start: "2023-03-06", end: "2023-03-08" },
{ id: "3", name: "详细设计", start: "2023-03-09", end: "2023-03-12" },
{ id: "4", name: "编码实现", start: "2023-03-13", end: "2023-03-20" },
{ id: "5", name: "测试验收", start: "2023-03-21", end: "2023-03-25" },
]
const dependencies = [
{ fromId: "1", toId: "2", type: "finish_to_start" },
{ fromId: "2", toId: "3", type: "finish_to_start" },
{ fromId: "3", toId: "4", type: "finish_to_start" },
{ fromId: "4", toId: "5", type: "finish_to_start" },
]
return (
<EnhancedGanttChart
tasks={tasks}
dependencies={dependencies}
viewMode="week"
/>
)
}里程碑示例
tsx
function WithMilestones() {
const tasks = [
{ id: "1", name: "项目启动", start: "2023-03-01", end: "2023-03-01", type: "milestone" },
{ id: "2", name: "需求分析", start: "2023-03-01", end: "2023-03-05", progress: 100 },
{ id: "3", name: "系统设计", start: "2023-03-06", end: "2023-03-10", progress: 80 },
{ id: "4", name: "编码开发", start: "2023-03-11", end: "2023-03-20", progress: 30 },
{ id: "5", name: "Alpha 发布", start: "2023-03-21", end: "2023-03-21", type: "milestone" },
{ id: "6", name: "测试修复", start: "2023-03-22", end: "2023-03-28" },
{ id: "7", name: "正式发布", start: "2023-03-30", end: "2023-03-30", type: "milestone" },
]
return <EnhancedGanttChart tasks={tasks} viewMode="week" />
}事件处理
tsx
function WithEventHandlers() {
const handleTaskClick = (task) => {
console.log("任务点击:", task.name)
// 打开任务详情弹窗
}
const handleTaskDrag = (task, event, newStart, newEnd) => {
console.log(`${task.name} 被拖动到 ${newStart} - ${newEnd}`)
}
const handleProgressChange = (task, progress) => {
console.log(`${task.name} 进度更新为 ${progress}%`)
// 更新后端数据
}
return (
<EnhancedGanttChart
tasks={tasks}
onTaskClick={handleTaskClick}
onTaskDrag={handleTaskDrag}
onProgressChange={handleProgressChange}
/>
)
}调用组件方法
tsx
import React, { useRef } from "react"
function WithRef() {
const ganttRef = useRef(null)
const handleExport = async () => {
const dataUrl = await ganttRef.current?.exportAsPNG()
// 下载图片
const link = document.createElement("a")
link.href = dataUrl
link.download = "gantt.png"
link.click()
}
return (
<div>
<div className="toolbar">
<button onClick={handleExport}>导出 PNG</button>
<button onClick={() => ganttRef.current?.setViewMode("month")}>
切换到月视图
</button>
<button onClick={() => ganttRef.current?.fitToScreen()}>
适应屏幕
</button>
<button onClick={() => ganttRef.current?.toggleTheme()}>
切换主题
</button>
</div>
<EnhancedGanttChart ref={ganttRef} tasks={tasks} />
</div>
)
}自定义样式
tsx
function CustomStyled() {
return (
<EnhancedGanttChart
tasks={tasks}
columnWidth={80}
rowHeight={50}
headerHeight={60}
modernUI={true}
showViewSwitcher={true}
style={{
borderRadius: "12px",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
overflow: "hidden"
}}
options={{
theme: "dark",
enableSnap: true,
guideColor: "#4f46e5"
}}
/>
)
}完整项目示例
tsx
import React, { useState, useRef } from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"
import type { Task, ViewMode, Dependency } from "@agions/gantt-flow"
const initialTasks: Task[] = [
{
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: 30,
},
{
id: "4",
name: "测试验收",
start: "2024-01-21",
end: "2024-01-25",
progress: 0,
},
]
function ProjectGantt() {
const ganttRef = useRef(null)
const [tasks, setTasks] = useState(initialTasks)
const [viewMode, setViewMode] = useState<ViewMode>("week")
const handleExport = async (format: "png" | "pdf") => {
let data
if (format === "png") {
data = await ganttRef.current?.exportAsPNG()
} else {
const blob = await ganttRef.current?.exportAsPDF()
data = URL.createObjectURL(blob)
}
const link = document.createElement("a")
link.href = data
link.download = `gantt.${format}`
link.click()
}
return (
<div className="project-gantt">
<div className="toolbar">
<h2>📊 项目甘特图</h2>
<div className="actions">
<select
value={viewMode}
onChange={(e) => setViewMode(e.target.value as ViewMode)}
>
<option value="day">日</option>
<option value="week">周</option>
<option value="month">月</option>
</select>
<button onClick={() => handleExport("png")}>导出 PNG</button>
<button onClick={() => handleExport("pdf")}>导出 PDF</button>
</div>
</div>
<div style={{ height: "calc(100vh - 120px)" }}>
<EnhancedGanttChart
ref={ganttRef}
tasks={tasks}
viewMode={viewMode}
onTaskDrag={(task, e, newStart, newEnd) => {
setTasks(prev =>
prev.map(t =>
t.id === task.id ? { ...t, start: newStart, end: newEnd } : t
)
)
}}
/>
</div>
</div>
)
}
export default ProjectGantt