Network Graph 详细技术参数

功能特点

开箱即用：内置完整的UI逻辑，及配套扩展，和丰富的快捷键，如Ctrl + Z/X/C/V、（Shift）Tab、（Shift）Enter、操作工具栏等。
数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑。
事件驱动：可以监听图表内发生的任何事件，并更好地进行自定义扩展。简单直观易用的界面：用户可以轻松地通过拖放方式移动任务和更改时间表创建项目、添加任务、分配资源、设置进度等。
多种视图模式自由切换：提供了多种展示模式，如日历视图、资源视图和进度视图等。这些模式能够以不同的方式呈现任务和资源的分配情况，帮助用户更好地进行资源管理和任务调度。
易于集成和扩展性：支持与其他项目管理工具和平台的集成，如与日历应用、任务管理工具和团队协作平台的同步；它也提供了灵活的扩展性，用户可以根据自己的需求开发定制化的插件和功能扩展。
支持10W+数据不卡顿：大批量数据分段加载，平滑滚动不卡顿，给您丝滑的操作体验，无论是大型企业还是小型团队的项目进度计划都能游刃有余。
高度自定义定制化：用户可以根据自己的需求和偏好，添加新的功能或扩展现有功能。可以调整任务条形图的颜色、形状和大小，添加自定义字段和标记，以及定义不同任务状态的显示方式，以满足个性化的需求。
多维度的视图和筛选：支持多种视图，用户可以根据需要切换不同的视图模式，如甘特图视图、网络图视图等。此外，用户还可以根据任务的属性进行筛选和排序，以便更好地分析和管理项目。
高级依赖管理：提供了灵活而强大的依赖管理功能，用户可以设置不同类型的依赖关系，如开始-开始（SS）、开始-结束（SF）、结束-开始（FS）和结束-结束（FF）。还可以定义延迟和提前时间，以及设置关键路径和关键任务，确保项目的关键部分得到有效管理和控制。
高级分析和模拟：提供了高级分析和模拟功能，帮助您评估和优化项目计划。您可以进行时间和资源的约束分析，识别潜在的瓶颈和风险，并进行“如果/那么”模拟，以便对不同的情况进行预测和规划。用户可以根据自己的需求和偏好，进行数据分析和可视化。
资源管理和任务分配：飞椽网络图一体化不仅可以管理任务，还可以有效管理和分配项目所需的资源。您可以定义资源、设置其可用性和工作量，并将其分配给相应的任务。这样，您可以更好地掌握资源的利用情况，避免过度或不足分配，提高资源利用效率。实时协作和共享：支持多用户实时协作，团队成员可以同时编辑和查看项目，实现更高效的协作。用户还可以将项目导出为图片或文件，并与团队成员或利益相关方共享。
多数据格式导入和导出：支持从MPP、Excel、XML或其他项目管理工具和电子表格应用程序导入数据，方便您迁移项目信息。同时，您也可以将项目数据导出为不同的文件格式，如PDF、Excel、图像等，以便与他人共享或进行进一步的数据处理。
多平台支持及常用前端框架集成：支持在多种平台上使用，包括桌面电脑、Web浏览器和移动设备。这意味着您可以随时随地访问和管理您的项目，与团队成员进行实时协作；支持Vue、React，提供Vue与React NPM插件包。
丰富的扩展和API：具有丰富的扩展和API，用户可以根据自己的需求和偏好，添加新的功能或扩展现有功能。此外，该工具还提供了API，使得用户可以将其与其他工具集成。
支持多语言：支持多种语言，如中文、英文、俄语等。这使得用户可以更好地使用和理解工具，并更好地协调跨国项目。

功能清单

甘特图：支持Project/P6 (MPP、XER)、XML、Excel导入
甘特图：自定义任务标题栏显示字段
甘特图：任务标题栏宽度拖拽
甘特图：任务栏数据行内编辑
甘特图：任务栏拖动调整顺序，升级降级
甘特图：任务栏无限级、任务横道展开收起联动
甘特图：WBS任务自动编码
甘特图：任务栏/横道图显示隐藏，分割面板左右拖动改变宽度
甘特图：日、周、月、年4级切换
甘特图：快捷键：Enter 新增一行数据
甘特图：快捷键：Shift+Tab 升级 Tab 降级
甘特图：快捷键：Ctrl + Z、X、C、V 撤销、剪切、复制、粘贴
甘特图：快捷键：Ctrl + D、Delete删除
甘特图：鼠标移入横道任务气泡概览
甘特图：大数据无卡顿虚拟滚动
甘特图：鼠标长按画布移动画布
甘特图：自动保存、历史版本选择
甘特图：双击任务栏定位
甘特图：项目、任务、里程碑
甘特图：实际进度拖拽
甘特图：横道自由拖拽（任务日期联动修改）
甘特图：甘特图事件回调扩展
甘特图：Vue2/Vue3/React npm插件
甘特图：快捷工具栏（升级降级，自动、手动任务，上下移动，任务、里程碑新增，版本选择，检查线、前锋线、进度曲线等快捷按钮）
甘特图：MPP文件导入
甘特图：检查点标记线
甘特图：进度前锋线
甘特图：连线拖拽
甘特图：非工作日标识
甘特图：SF、SS、FS、FF依赖关系
甘特图：进度S曲线
甘特图：关键路径、关键路径动画模拟
甘特图：进度模拟播放
甘特图：预估完成时间计算
甘特图：预计提前与滞后工期计算
甘特图：基线计划对比
甘特图：自定义任务颜色
甘特图：多套样式切换，一键换肤
甘特图：自定义告警规则
甘特图：Project（MPP文件）导出、PDF导出、Excel（XML）导入导出
网络图：快捷工具栏，自定义工具栏，功能升级扩展
网络图：任务栏分组（按人员、自定义字段、自定义业务字段）
网络图：网络图模板
网络图：工序节点自由拖拽新增
网络图：首尾节点拖动，连线，同步修改依赖关系与日期（XY坐标）
网络图：布局算法优化，虚活动与实活动连线重合，设置偏移量
网络图：网络图鼠标左键长按移动网络图画布
网络图：选中左侧任务，定位并选中双代号连线
网络图：网络图ctrl+鼠标滚动放大缩小网络图
网络图：框选选中任务及连线（左右选中同步并定位）
网络图：选中连线上下左右移动，调整连线拐点
网络图：网络图打印设置，导入导出（图片、PDF、MPP）
网络图：右键菜单操作（网络图样式、图注、特殊格式）
网络图：父子级包含色块标识，层级横道分组（类斑马进度分组方式）
网络图：Ctrl+F 弹出输入框查找并定位任务，查找结果特殊颜色标注
网络图：Ctrl+R 弹出替换输入框，任务名称替换，查找结果特殊颜色标注
网络图：网络图本地打开，本地化保存，定义数据标准后缀名（迭代升级计划）
网络图：网络图制图说明（类似CAD）（迭代升级计划）
网络图：网络图资源管理面板视图（迭代升级计划）
网络图：工程标尺（时标刻度）优化（按网络图比例缩小或放大刻度）智能调图（迭代升级计划）
网络图：节点连线交叉点桥洞线处理（迭代升级计划）
网络图：日历、日程任务视图切换（迭代升级计划）
网络图：移动端兼容，手机看图（迭代升级计划）
网络图：多端跨平台兼容，客户端、APP（迭代升级计划）
PERT图：PDF导出、PNG图片导出
PERT图：甘特图+PERT图相互转换
PERT图：最早开始、最早完成、最晚开始、最晚完成、持续时间、自由活动时间、总浮动时间
PERT图：PERT关键路径标识
PERT图：节点拖动、拖拽连线

项目概况

参数	内容
项目名称	`network-graph`
当前版本	`2.6.1`
项目描述	4 合一网络图组件库，支持甘特图、双代号网络图、时标网络图、单代号网络图/PERT 图
作者	`zw1995`
输出形态	前端图形组件库
主入口	`src/index.ts`
类型入口	`src/types/index.d.ts`
样式入口	`src/assets/index.scss`
构建输出目录	`build`

技术栈

类型	技术
开发语言	TypeScript
构建工具	Vite
文档工具	VitePress
支持框架	JQuery/Vue2/Vue3/React/Angular 等主流前端框架，新老项目都可集成
样式预处理	Sass / SCSS
打包压缩	Terser
模块格式	ES Module、CommonJS、UMD
DOM 构建	自研 `Markup.JSONMarkup` 结构化渲染
图形绘制	DOM + SVG + Canvas 混合，网络图视图主要使用 Canvas
快捷键	Mousetrap
工具库	lodash-es、nanoid、file-saver

源码目录结构

.
├─ docs                             //文档目录
│  ├─ .vitepress                    //配置文件
│  │  └─ config.js                  //文档配置
│  └─ index.md                      //文档入口
├─ public                           //公共目录(文件夹里面的资源打包后会在根目录下)
├─ src
│  ├─ assets                        //静态资源
│  │  ├─ images                     //图片目录   
│  │  ├─ themes                     //主题样式文件
│  │  ├─ svg-icon                   //本地svg图标
│  │  └─ font                       //字体文件
│  ├─ config                        
│  │  └─ Config.ts                  //全局常量配置
│  ├─ common                        //公共类      
│  │  ├─ BaseCoast.ts               //基础类
│  │  ├─ Event.ts                   //事件绑定触发封装
│  ├─ constants                     //常量配置
│  │  ├─ Constant.ts                //全局常量
│  │  └─ Enum.ts                    //枚举常量
│  ├─ graph                         //网络图核心
│  │  ├─ Base.ts                    //核心基类 
│  │  ├─ Clipboard.ts               //剪切板管理类
│  │  ├─ Graph.ts                   //网络图主类
│  │  ├─ Hook.ts                    //类管理容器钩子
│  │  ├─ Options.ts                 //网络图配置选项
│  │  └─ index.ts
│  ├─ interface                     //接口类型定义
│  ├─ layouts                       //布局
│  ├─ locales                       //国际化配置
│  ├─ model                         //节点基类
│  │  ├─ Model.ts                   //核心基类 
│  │  ├─ Cell.ts                    //任务节点连线抽象类
│  │  ├─ Node.ts                    //任务类 
│  │  ├─ Edge.ts                    //连线类 
│  │  ├─ TaskBar.ts                 //甘特图横道类
│  │  ├─ LinkLine.ts                //甘特图连线类
│  │  ├─ ArrowCircel.ts             //双代号序号类
│  │  ├─ ArrowLine.ts               //双代号箭线类
│  │  ├─ DashedLine.ts              //虚活动类
│  │  ├─ PertCircel.ts              //Pert活动类
│  │  ├─ PertLine.ts                //Pert连线类
│  ├─ plugins                       //插件
│  │  ├─ Clipboard.ts               //剪切板类
│  │  ├─ Draggable.ts               //拖动类
│  │  ├─ Highlight.ts               //高亮类
│  │  ├─ History.ts                 //历史操作类
│  │  ├─ Keyboard.ts                //快捷键类
│  │  ├─ Marker.ts                  //标记类
│  │  ├─ Minimap.ts                 //小地图类
│  │  ├─ Mousewheel.ts              //鼠标滚动类
│  │  ├─ Selection.ts               //框选类
│  │  ├─ Toolbar.ts                 //工具栏
│  │  ├─ Tooltip.ts                 //提示  
│  │  ├─ Dialog.ts                  //弹窗
│  │  ├─ Overlay.ts                 //叠加层级
│  │  ├─ Watermark.ts               //水印
│  │  ├─ Scurve.ts                  //s曲线
│  │  └─ index.ts
│  ├─ utils                         //常用工具
│  │  └─ index.ts
│  ├─ themes                        //主题
│  │  └─ index.ts
│  ├─ view                         //视图
│  │  ├─ NetGraphView.ts           //主视图
│  │  ├─ GanttGraphView.ts         //甘特图视图
│  │  ├─ AdmGraphView.ts           //双代号网络图视图
│  │  ├─ TimeGraphView.ts          //时标网络图视图
│  │  ├─ PdmGraphView.ts           //PERT视图
│  ├─ widget                       
│  │  ├─ component                 //常用组件
│  └─ index.ts
├─ tsconfig.json                    //typescirpt配置
├─ README.md                        
├─ package.json                     //依赖管理
└─ vite.config.ts                   //Vite打包配置

构建参数

参数	内容
开发命令	`npm run dev`
构建命令	`npm run build`
文档开发	`npm run docs:dev`
文档构建	`npm run docs:build`
构建目标	`es2015`
库名称	`NetGraph`
输出文件名	`network-graph`
输出格式	`es`、`cjs`、`umd`
压缩器	`terser`
压缩策略	删除 `console`、删除 `debugger`

TypeScript 参数

参数	内容
target	`ESNext`
module	`ESNext`
moduleResolution	`Node`
strict	`true`
noImplicitOverride	`true`
isolatedModules	`true`
allowJs	`false`
sourceMap	`false`
rootDir	`src`
outDir	`build`
lib	`ESNext`、`DOM`、`DOM.Iterable`

构建产物

文件	说明
`build/network-graph.mjs`	ES Module 产物
`build/network-graph.umd.js`	UMD 产物
`build/network-graph.js`	CommonJS/兼容产物
`build/style.css`	样式文件

导出 API

项目入口 src/index.ts 当前导出：

export {
  NetworkGraph,
  preTasks,
  ScaleMode,
  ViewMode
}

导出项	说明
`NetworkGraph`	核心图组件类，即 `Graph`
`preTasks`	任务数据预处理方法
`ScaleMode`	时间刻度枚举
`ViewMode`	视图模式枚举

支持视图

视图	枚举值	文件	当前实现
甘特图	`ViewMode.GanttViewer = "Gantt"`	`src/view/GanttGraphView.ts`	DOM/SVG/组件化任务条
时标网络图	`ViewMode.TimeViewer = "Time"`	`src/view/TimeGraphView.ts`	Canvas
双代号网络图/箭线图	`ViewMode.AdmViewer = "ADM"`	`src/view/AdmGraphView.ts`	Canvas
单代号网络图/PERT 图	`ViewMode.PdmViewer = "PDM"`	`src/view/PdmGraphView.ts`	Canvas

时间刻度

刻度	枚举值	默认宽度
全年/全计划	`AllYear`	`339`
年	`Year`	`400`
季	`QuarterYear`	`320`
月	`Month`	`260`
周	`Week`	`144`
日	`Day`	`36`

当前支持：当日、周、月、季、年数据量不足以铺满右侧可视区域时，自动放大列宽适配可视宽度；内容超出一屏时保留滚动。

默认配置

参数	默认值	说明
`autoResize`	`true`	容器尺寸变化时自动重绘
`editable`	`true`	是否允许编辑
`predict`	`true`	是否启用预测字段
`planMode`	`PlanMode.All`	计划/实际展示模式
`hideRight`	`false`	是否隐藏右侧图形区域
`sideWidth`	`475`	左侧任务表默认宽度
`rowHeight`	`41`	行高
`barHeight`	`30`	甘特条高度
`activeId`	`[]`	当前选中任务 ID
`tooltip.enabled`	`true`	是否启用 tooltip
`toolbar.enabled`	`true`	是否启用工具栏
`clipboard.enabled`	`true`	是否启用剪贴板
`history.enabled`	`true`	是否启用历史记录
`keyboard.enabled`	`true`	是否启用快捷键
`mousewheel.enabled`	`true`	是否启用鼠标滚轮
`draggable.enabled`	`false`	默认拖拽插件关闭

核心数据结构

Task

字段	类型	说明
`id`	`string \| number`	任务唯一 ID
`type`	`string`	任务类型
`name`	`string`	任务名称
`level`	`number`	层级
`parent_id`	`string \| number`	父级 ID
`duration`	`number`	工期
`start`	`Date`	开始时间
`end`	`Date`	结束时间
`progress`	`number`	进度
`dependencies`	`string[]`	紧前任务 ID
`children`	`Task[]`	子任务
`actual_start`	`Date \| string`	实际开始
`actual_end`	`Date \| string`	实际结束
`color`	`string`	自定义颜色
`predict`	`number`	预测值
`business`	`any`	业务扩展字段

ITaskBar

字段	说明
`index`	渲染序号
`x1`	图形开始横坐标
`x2`	图形结束横坐标
`y`	图形纵坐标
`bg_x1`	实际/背景开始坐标
`bg_x2`	实际/背景结束坐标
`actual_end_date`	实际结束日期字符串

Graph 主要 API

API	说明
`addTask(task, taskId?)`	新增任务
`updateTask(taskId, task)`	更新任务
`deleteTask(taskId)`	删除任务
`addLink(link)`	新增依赖关系
`deleteLink(link)`	删除依赖关系
`changeViewMode(viewMode)`	切换视图
`changeScaleMode(scaleMode)`	切换时间刻度
`changeGridColumn(columns)`	修改表格列
`showHideTaskGrid(show)`	显示/隐藏任务表
`showHideTaskData(show)`	显示/隐藏任务数据区域
`changeTreeLevel(data)`	修改树形层级数据
`changeOptions(field, data)`	动态修改配置项
`addForwardLine(date, text?)`	添加前锋线
`removeForwardLine()`	移除前锋线
`toggleCriticalPath()`	切换关键路径
`enableTooltip()` / `disableTooltip()`	启用/禁用提示
`enableMarker()` / `disableMarker()`	启用/禁用标记
`undo()` / `redo()`	撤销/重做
`copy()` / `cut()` / `paste()`	剪贴板操作
`bindKey()` / `unbindKey()`	快捷键绑定
`render()`	重新渲染

插件机制

项目采用“内置插件/管理器 + Hook 工厂方法 + options 配置”的插件化机制。Graph 初始化时会先创建 HookManager，再通过 Hook 统一创建模型、视图和各类插件实例。

初始化顺序

Graph 构造函数中的核心初始化顺序如下：

this.hook = new HookManager(this)
this.model = this.hook.createModel()
this.tooltip = this.hook.createTooltip()
this.marker = this.hook.createMarker()
this.clipboard = this.hook.createClipboardManager()
this.history = this.hook.createHistoryManager()
this.keyboard = this.hook.createKeyboard()
this.draggable = this.hook.createDraggable()
this.mousewheel = this.hook.createMousewheel()
this.toolbar = this.hook.createToolbar()
this.view = this.hook.createViewer()
this.chat = new Chat(this)

内置插件/管理器

插件/管理器	文件	Graph 属性	作用
Model	`src/model/Model.ts`	`graph.model`	任务、节点、边等核心数据模型
NetGraphView	`src/view/NetGraphView.ts`	`graph.view`	主视图容器，管理甘特图、ADM、Time、PDM 视图切换
Tooltip	`src/plugins/Tooltip.ts`	`graph.tooltip`	鼠标提示层
Marker	`src/plugins/Marker.ts`	`graph.marker`	时间标记、前锋线
ClipboardManager	`src/graph/Clipboard.ts`	`graph.clipboard`	复制、剪切、粘贴任务
HistoryManager	`src/plugins/History.ts`	`graph.history`	撤销、重做和批量命令记录
Keyboard	`src/plugins/Keyboard.ts`	`graph.keyboard`	快捷键绑定
MouseWheel	`src/plugins/Mousewheel.ts`	`graph.mousewheel`	鼠标滚轮能力
Draggable	`src/plugins/Draggable.ts`	`graph.draggable`	拖拽能力
Toolbar	`src/plugins/Toolbar.ts`	`graph.toolbar`	工具栏
Chat	`src/widget/component/ai_chat/chat.ts`	`graph.chat`	AI Chat 组件

插件配置

插件配置通过初始化参数传入，最终由 Options.get() 与默认配置合并。

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  tooltip: {
    enabled: true,
    template: 'gantt'
  },
  marker: {
    enabled: true
  },
  clipboard: {
    enabled: true
  },
  history: {
    enabled: true
  },
  keyboard: {
    enabled: true,
    global: true
  },
  mousewheel: {
    enabled: true
  },
  draggable: {
    enabled: false
  },
  toolbar: {
    enabled: true
  }
})

插件启停 API

插件	启用	禁用	切换	状态
Tooltip	`enableTooltip()`	`disableTooltip()`	`toggleTooltip(enabled?)`	`isTooltipEnabled()`
Marker	`enableMarker()`	`disableMarker()`	`toggleMarker(enabled?)`	`isMarkerEnabled()`
Clipboard	`enableClipboard()`	`disableClipboard()`	`toggleClipboard(enabled?)`	`isClipboardEnabled()`
History	`enableHistory()`	`disableHistory()`	`toggleHistory(enabled?)`	`isHistoryEnabled()`
Keyboard	`enableKeyboard()`	`disableKeyboard()`	`toggleKeyboard(enabled?)`	`isKeyboardEnabled()`
Draggable	`enableDrag()`	`disableDrag()`	`toggleDrag(enabled?)`	`isDragEnabled()`

Hook 扩展机制

src/graph/Hook.ts 中的 Decorator.hook() 会在执行默认工厂方法前，检查 options 中是否存在同名方法。如果存在，则以 graph 作为 this 调用该方法；当自定义方法返回非空值时，使用自定义返回值，否则回退到默认实现。

可覆盖的 Hook 方法如下：

Hook 方法	默认返回
`createModel()`	`new Model(graph)`
`createViewer()`	`new NetGraphView(graph)`
`createRenderer()`	`new Renderer(graph)`
`createClipboard()`	`new Clipboard()`
`createClipboardManager()`	`new ClipboardManager(graph)`
`createHistoryManager()`	`new HistoryManager(...)`
`createTooltip()`	`new Tooltip(...)`
`createMarker()`	`new Marker(...)`
`createKeyboard()`	`new Keyboard(...)`
`createMousewheel()`	`new MouseWheel(...)`
`createDraggable()`	`new Draggable(...)`
`createToolbar()`	`new Toolbar(...)`

示例：

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  createTooltip() {
    // this 指向 Graph 实例
    return new CustomTooltip({ graph: this })
  }
})

适合通过 Hook 扩展的场景：

场景	建议
替换默认 Tooltip	覆盖 `createTooltip()`
替换默认工具栏	覆盖 `createToolbar()`
接入自定义数据模型	覆盖 `createModel()` 或传入 `model`
扩展视图容器行为	覆盖 `createViewer()`
替换历史、剪贴板、快捷键实现	覆盖对应 `createXxx()` 方法

事件体系

项目事件系统由 src/common/Events.ts 提供，Graph 继承链路为：

Graph -> BaseCoat -> Events

因此 Graph 实例本身就是事件总线，视图、模型、插件之间通过 graph.trigger() 派发事件，通过 graph.on() 订阅事件。

事件 API

API	说明
`on(name, handler, context?)`	订阅事件
`once(name, handler, context?)`	订阅一次性事件，触发后自动解绑
`off(name?, handler?, context?)`	解绑事件；不传参数时清空全部事件
`trigger(name, ...args)`	触发事件
`emit(name, ...args)`	`trigger` 的 protected 别名
`on('*', handler)`	订阅所有事件，回调第一个参数为事件名

示例：

graph.on('graph:ready', ({ instance }) => {
  console.log(instance)
})

const onTaskClick = (taskId: string | number) => {
  console.log(taskId)
}

graph.on('task:click', onTaskClick)
graph.off('task:click', onTaskClick)

graph.once('marker:scale', (date) => {
  console.log(date)
})

graph.on('*', (eventName, ...args) => {
  console.log(eventName, args)
})

graph.trigger('custom:event', { value: 1 })

事件返回值

事件回调的返回值会通过 FunctionExt.toAsyncBoolean() 聚合，支持同步或异步布尔结果。这个机制适合用于后续扩展“事件拦截”“异步校验”等流程。

常用事件列表

事件名	触发来源	参数/含义
`graph:ready`	`NetGraphView`	`{ instance }`，主视图渲染完成
`graph:click`	`NetGraphView`	`{ e }`，画布/容器点击
`graph:dblclick`	`NetGraphView`	`{ e }`，画布/容器双击
`graph:contextmenu`	`NetGraphView`	`{ e }`，画布/容器右键
`graph:mousewheel`	`NetGraphView`	`{ e }`，鼠标滚轮
`graph:mousedown`	`GanttGraphView`	`{ e, x, y }`
`graph:mousemove`	`GanttGraphView`	`{ e, x, y }`
`graph:mouseup`	`GanttGraphView`	`{ e, x, y }`
`task:click`	甘特图、ADM、Time、PDM、树表、AI Chat	`taskId`
`task:mouseover`	任务条、PDM	`taskId`
`task:mouseleave`	任务条、PDM	`taskId`
`task:barFold`	任务条	`task`，任务折叠/展开
`task:toggle`	树表	`task`，树节点展开状态变化
`activity:click`	ADM、Time Canvas	`activityId` 或 `nodeId`
`node:click`	任务条节点	`{ e, x, y, node }`
`node:dblclick`	任务条节点	`{ e, node }`
`node:contextmenu`	任务条节点	`{ e, node }`
`node:mousedown`	任务条节点	`{ e, x, y, node }`
`node:mousemove`	任务条节点	`{ e, x, y, node }`
`node:mouseup`	任务条节点	`{ e, x, y, node }`
`node:move`	任务条节点	`{ e, x, y, node }`
`node:moving`	任务拖动中	`{ e, x, y, node }`
`node:moved`	任务拖动结束	`{ e, x, y, node }`
`node:change`	甘特图	`task`，任务数据变化
`link:click`	甘特图连线	`el`，连线元素
`bar:view:scroll`	甘特右侧视图	`scrollTop`
`tree:view:scroll`	树表	`flatTaskData, scrollTop`
`scroll:top`	树表	无参数，滚动到顶部
`cell:change`	树表	`taskBar` 或任务条数据
`checked:change`	树表	`dataId`
`on-enter`	树表单元格	`task`
`marker:scale`	Marker	`date`，标记移动后的日期
`clipboard:changed`	ClipboardManager	`{ tasks }`
`on-save`	Toolbar	`tasks`，点击保存
`dragstart`	Draggable	`{ e, ...params }`
`dragging`	Draggable	`{ e, ...params }`
`drop`	Draggable	`{ e, ...params }`

自定义能力与主题

项目支持通过数据字段、列模板、插件配置、CSS 覆盖和 Hook 替换等方式扩展内容与样式。当前 theme 是配置字段和工具栏入口预留项，尚未形成完整的主题注册/切换机制；实际主题落地主要依赖覆盖 src/assets/index.scss 中的 .nw-* 样式。

自定义数据字段

当业务数据字段名与默认 Task 字段不一致时，可以通过 customField 映射树表所需字段。

字段	说明
`customField.id`	任务唯一 ID 字段
`customField.parent_id`	父级 ID 字段
`customField.children`	子级集合字段
`customField.open`	展开状态字段
`customField.checked`	勾选状态字段

示例：

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  customField: {
    id: 'taskId',
    parent_id: 'parentTaskId',
    children: 'children',
    open: 'expanded',
    checked: 'selected'
  }
})

任务对象还支持业务扩展字段：

字段	说明
`business`	任意业务数据
`datas`	模型、资源等关联数据
`color`	单个任务条颜色
`prepend`	任务前置状态文字
`append`	任务后置状态文字
`remain_rate`	剩余比例文字
`predict`	预测值，正值表示提前，负值表示延期

自定义列内容

左侧任务表通过 columns 配置列。列支持普通字段渲染、树列、固定列、按钮列和模板列。

字段	说明
`name`	对应任务字段名
`label`	表头名称
`tree`	是否作为树形列
`width`	列宽
`align`	对齐方式：`left`、`center`、`right`
`hide`	是否隐藏
`resize`	是否允许拖拽调整列宽
`fixed`	固定列：`left` 或 `right`
`template(task)`	自定义单元格内容，可返回字符串或 `HTMLElement`
`btnList`	操作按钮列表
`callback(event, task)`	按钮点击回调

示例：

const columns = [
  {
    name: 'name',
    label: '任务名称',
    tree: true,
    width: 240,
    align: 'left'
  },
  {
    name: 'model_info',
    label: '模型绑定',
    align: 'center',
    width: 120,
    template: (task) => {
      const element = document.createElement('span')
      element.className = 'nw-btn-action'
      element.textContent = '模型绑定'
      element.onclick = () => console.log(task)
      return element
    }
  },
  {
    name: 'action',
    label: '操作',
    width: 180,
    btnList: [
      { name: '新增', event: 'add' },
      { name: '详情', event: 'detail' },
      { name: '删除', event: 'del', className: 'btn-action-del' }
    ],
    callback: (eventName, task) => {
      console.log(eventName, task)
    }
  }
]

Tooltip 通过 tooltip.template 控制，内置模板包括：

模板	说明
`gantt`	甘特图任务提示
`pert`	PERT 节点提示
`Function`	自定义模板函数

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  tooltip: {
    enabled: true,
    template: 'gantt'
  }
})

如需完全替换提示层行为，建议通过 Hook 覆盖 createTooltip()。

自定义任务颜色与标记线

方式	说明
`task.color`	控制单个任务条颜色
`actualColor`	控制实际进度条颜色
`addMarker({ color })`	控制标记线和标记旗颜色
`updateMarker(markerId, { color })`	更新已有标记线颜色

示例：

const tasks = [
  {
    id: 1,
    name: '施工准备',
    type: 'task',
    color: '#337eff',
    children: []
  }
]

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  tasks,
  actualColor: '#92B6FB'
})

graph.addMarker({
  date: new Date('2026-06-09'),
  text: '关键节点',
  color: '#00B3B2'
})

自定义工具栏

工具栏通过 toolbar.enabled 控制显示，通过 toolbar.tool 控制启用哪些按钮。按钮字符串使用逗号分隔，默认值包含视图切换、缩放、撤销重做、剪贴板、任务操作、前锋线、关键路径和 AI 等能力。

const graph = new NetworkGraph({
  container,
  appKey: 'xxx',
  secretKey: 'xxx',
  toolbar: {
    enabled: true,
    tool: 'Gantt,Time,Double,Pert,Scale,Redo,Undo,Save,Plus,Minus,Forward,Critical'
  }
})

当前工具栏中 theme、bold、italic、color、colorBg、baseline、export 等按钮入口存在，但点击后提示“功能暂未开放”。

自定义样式

项目样式入口为 src/assets/index.scss，构建后输出为 build/style.css。组件 DOM 类名前缀由 src/config/Config.ts 中的 prefixCls = 'nw' 决定，主要样式类均以 .nw- 开头。

区域	常用类名
根容器	`.nw-graph-container`
主布局	`.nw-graph-wrapper`
左侧表格	`.nw-graph-grid`、`.nw-graph-tree-grid`
表格头部	`.nw-grid-scale`
表格内容	`.nw-grid-data`、`.nw-grid-row`、`.nw-grid-column`
右侧任务区	`.nw-graph-task`、`.nw-graph-data-area`
日历栏	`.nw-calendar-wrapper`、`.nw-scale-top`、`.nw-scale-bottom`
甘特图	`.nw-gantt-container`、`.nw-gantt-view`、`.nw-gantt-bar`
甘特任务条	`.nw-gantt-bar-item`、`.nw-gantt-task-primary`、`.nw-gantt-task-pro`
连线	`.nw-gantt-link`、`.nw-gantt-path`、`.nw-gantt-arrow`
标记线	`.nw-graph-marker`、`.nw-marker-line`、`.nw-marker-flag`
Tooltip	`.nw-graph-tooltip`、`.nw-pert-tip`
Canvas 视图	`.nw-adm-container`、`.nw-adm-canvas`、`.nw-pdm-container`、`.nw-pdm-canvas`
工具栏	`.toolbar`、`.btn-group-wrapper`、`.btn`

覆盖示例：

scss

.nw-graph-container {
  font-family: Inter, "Microsoft YaHei", sans-serif;
}

.nw-grid-scale {
  background: #f7f9fc;
  color: #1f2937;
}

.nw-grid-row:hover {
  background: #eef5ff;
}

.nw-gantt-task-primary {
  background: #337eff;
}

.nw-marker-flag {
  background: #00b3b2;
}

.nw-graph-tooltip {
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

主题状态

项	当前状态
`options.theme`	字段存在，当前未驱动主题切换
`src/assets/themes/index.scss`	文件存在，当前为空
工具栏主题按钮	入口存在，点击后提示功能暂未开放
推荐主题方式	引入组件默认样式后，再通过业务侧 CSS/SCSS 覆盖 `.nw-*` 类
深度定制方式	通过 Hook 替换插件或视图实现

交互能力

能力	说明
视图切换	甘特图、双代号、时标网络图、PERT 图
时间尺度切换	日、周、月、季、年、全计划
左侧任务表	树形表格、固定列、列宽调整
横向时间轴	日历栏、底部滚动条同步
拖拽分栏	左右区域宽度调整
快捷键	删除、Tab 降级、Shift+Tab 升级、Ctrl+Z、Ctrl+Shift+Z 等
剪贴板	支持复制、剪切、粘贴任务
历史记录	支持撤销、重做
Tooltip	甘特/PERT 模板
Marker	时间标记/前锋线
Canvas 缩放拖拽	双代号、时标、PERT 图支持 Canvas 平移/缩放

Canvas 图形能力

视图	能力
双代号网络图	事件节点、实活动直线箭头、文字跟随箭线方向、关键路径高亮、Canvas 缩放/拖拽
时标网络图	节点合并、虚活动、L 型波浪纹虚线、实线到 `x2`、剩余时距虚线连接、顶部时标、Canvas 缩放/拖拽
单代号/PERT 图	节点卡片、ES/DU/EF/LS/TF/LF、关键节点/关键连线、Canvas 缩放/拖拽

项目模块结构

目录	说明
`src/graph`	核心 Graph、Options、Hook、Clipboard
`src/view`	主视图和各图形视图
`src/model`	任务条、节点、边、线条等模型
`src/plugins`	插件：工具栏、历史、剪贴板、快捷键、Tooltip、Marker 等
`src/widget`	UI 组件：树表、日历、消息、工具栏、AI Chat 等
`src/utils`	日期、布局、树数据、任务转换、工具函数
`src/interface`	核心 TypeScript 接口
`src/constants`	枚举和常量
`src/assets`	样式和图片资源
`src/types`	类型声明文件

运行与构建

bash

npm install
npm run dev
npm run build

授权参数

当前 Graph 初始化要求传入：

参数	说明
`appKey`	授权应用 Key
`secretKey`	授权密钥

如果缺失，会显示授权缺失提示。当前远程授权校验逻辑在代码中存在，但主体请求逻辑处于注释状态。

Network Graph 详细技术参数 ​

功能特点 ​

功能清单 ​

项目概况 ​

技术栈 ​

源码目录结构 ​

构建参数 ​

TypeScript 参数 ​

构建产物 ​

导出 API ​

支持视图 ​

时间刻度 ​

默认配置 ​

核心数据结构 ​

Task ​

ITaskBar ​

Graph 主要 API ​

插件机制 ​

初始化顺序 ​

内置插件/管理器 ​

插件配置 ​

插件启停 API ​

Hook 扩展机制 ​

事件体系 ​

事件 API ​

事件返回值 ​

常用事件列表 ​

自定义能力与主题 ​

自定义数据字段 ​

自定义列内容 ​

自定义 Tooltip ​

自定义任务颜色与标记线 ​

自定义工具栏 ​

自定义样式 ​

主题状态 ​

交互能力 ​

Canvas 图形能力 ​

项目模块结构 ​

运行与构建 ​

授权参数 ​