{"_id":"@blueking/bkbase-flow-graph","_rev":"4-9432ac14c0153c07d1f00b49393031c1","name":"@blueking/bkbase-flow-graph","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.2":{"name":"@blueking/bkbase-flow-graph","version":"0.0.2","author":{"name":"Tencent BlueKing"},"license":"MIT","_id":"@blueking/bkbase-flow-graph@0.0.2","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"651f6a4fe7692bf58cf2387a48aeae128771bc50","tarball":"https://registry.npmjs.org/@blueking/bkbase-flow-graph/-/bkbase-flow-graph-0.0.2.tgz","fileCount":21,"integrity":"sha512-mQbEMU9S5wNmq7U8VaJDNRsXPupNy/882c5GsbeBhY3uvKdmkkvysmMV00jnB3mWi/uMdtTzC40yBFDah7xZXA==","signatures":[{"sig":"MEUCIQD3jV0P9nRMg+hIg07/ppuQJvFvXJeKX869Nm7CSQWl2wIgZdaydwh70kx3tSOPCcRTumPMl4i8KcVXsGa3ib9IKw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4833318},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","module":"./dist/index.es.js","gitHead":"8c8f184c22be3c50022bbaac1b826ffb225037d7","scripts":{"dev":"vite --mode development -c scripts/vite.dev.ts","build":"vite build && tsc --emitDeclarationOnly","type-check":"tsc --noEmit"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.2.4","description":"BKBASE Flow Graph","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@blueking/bkflow.js":"^0.1.11","@tencent/bk-icon-bkdata":"^0.8.17"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.4","vite":"^latest","typescript":"^latest","@types/node":"^20.0.0","vite-plugin-dts":"^latest"},"_npmOperationalInternal":{"tmp":"tmp/bkbase-flow-graph_0.0.2_1736826307451_0.7312064353909615","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@blueking/bkbase-flow-graph","version":"0.0.3","author":{"name":"Tencent BlueKing"},"license":"MIT","_id":"@blueking/bkbase-flow-graph@0.0.3","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"a70559d2cfc993555cff975d523c8d23e0e8da58","tarball":"https://registry.npmjs.org/@blueking/bkbase-flow-graph/-/bkbase-flow-graph-0.0.3.tgz","fileCount":19,"integrity":"sha512-eIiGLYcEOfbL1STy8NgCae9vYTX+c/Jvo3hc9RmyVug6KKy98ET7UlU5lXQ33IVRUrOF2ZI7vGruHq3aPoJpQQ==","signatures":[{"sig":"MEUCIQDFs9OumkAXv4zhhtm0SfW18WQvPi9O46ZRY8FKocsxiAIgOOLb+QNZNVGlc7tWBufSF1FXxsQptg5JsM59EiahYCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2017911},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","module":"./dist/index.es.js","gitHead":"3aa3a68baedae48d4707d3da99aa46c61402ac31","scripts":{"dev":"vite --mode development -c scripts/vite.dev.ts","build":"vite build -c scripts/vite.build.ts","type-check":"tsc --noEmit"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.2.4","description":"BKBASE Flow Graph","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@tencent/bk-icon-bkdata":"^0.8.17"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.4","vite":"^latest","typescript":"^latest","@types/node":"^20.0.0","vite-plugin-dts":"^latest"},"peerDependencies":{"@blueking/bkflow.js":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/bkbase-flow-graph_0.0.3_1736837776258_0.8892345346755544","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@blueking/bkbase-flow-graph","version":"0.0.4","author":{"name":"Tencent BlueKing"},"license":"MIT","_id":"@blueking/bkbase-flow-graph@0.0.4","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"82cb62ee5fabbe35e5d4348287fcbdf8d866df46","tarball":"https://registry.npmjs.org/@blueking/bkbase-flow-graph/-/bkbase-flow-graph-0.0.4.tgz","fileCount":23,"integrity":"sha512-iyaqNDKz6L8b8TXYbJnWD02UL5yXUybJzRs3wsAK+VnT0GkeYLIUOqwHvVP4Y0XNpdR8KiBBSjL+5ICOGKoR4w==","signatures":[{"sig":"MEYCIQDPBQ7xw75qgO6/cFF4ReH0z2eBoFrYT4kakYHaMZ0LkgIhAMPkGH7rHp5y7anFUd29fKTzvAMRNOm4ReVRA0tWxp4c","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2018668},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","module":"./dist/index.es.js","gitHead":"f6d585474aed81f3b8502c18039cf29c0d0a5db7","scripts":{"dev":"vite --mode development -c scripts/vite.dev.ts","build":"vite build -c scripts/vite.build.ts","type-check":"tsc --noEmit"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.2.4","description":"BKBASE Flow Graph","directories":{},"_nodeVersion":"20.11.1","dependencies":{"@tencent/bk-icon-bkdata":"^0.8.17"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.4","vite":"^latest","typescript":"^latest","@types/node":"^20.0.0","vite-plugin-dts":"^latest"},"peerDependencies":{"@blueking/bkflow.js":"^0.1.11"},"_npmOperationalInternal":{"tmp":"tmp/bkbase-flow-graph_0.0.4_1737531284033_0.04275452175882233","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-01-14T03:45:07.381Z","modified":"2026-01-15T04:03:43.211Z","0.0.2":"2025-01-14T03:45:07.701Z","0.0.3":"2025-01-14T06:56:16.477Z","0.0.4":"2025-01-22T07:34:44.263Z"},"author":{"name":"Tencent BlueKing"},"license":"MIT","description":"BKBASE Flow Graph","maintainers":[{"email":"contactus_bk@tencent.com","name":"blueking-magicbox"}],"readme":"# BKBase Flow Graph\n\n蓝鲸基础流程图组件，提供任务流程可视化展示能力。\n\n## 安装\n\n```bash\npnpm add @bkui-vue/bkbase-flow-graph\npnpm add @blueking/bkflow.js # 流程图相关功能依赖此包，必须安装\n```\n\n## 使用方法\n\n### 基础用法\n\n```typescript\nimport FlowGraph from '@bkui-vue/bkbase-flow-graph';\nimport '@bkui-vue/bkbase-flow-graph/dist/style.css';\n\nconst container = document.getElementById('container');\nconst graph = new FlowGraph({\n  container,\n  flowGraphData: {\n    locations: [], // 节点数据\n    lines: [], // 连线数据\n    version: '1.0', // 版本号\n  },\n  isReadonly: false, // 是否只读模式\n});\n\ngraph.init();\n```\n\n### 数据结构\n\n```typescript\ninterface ComponentOptions {\n  container: string;\n  flowGraphData: FlowGraphData;\n  isReadonly: boolean;\n}\n\ninterface FlowGraphData {\n  locations: Location[]; // 节点数据\n  lines: Line[]; // 连线数据\n  version: string; // 版本号\n}\n\ninterface Location {\n  flow_id: number; // 流程ID\n  node_id: number; // 节点ID\n  node_name: string; // 节点名称\n  node_type: string; // 节点类型\n  status: string; // 节点状态\n  version: string; // 版本\n  frontend_info: {\n    // 前端展示信息\n    x: number; // 节点x坐标\n    y: number; // 节点y坐标\n  };\n  running_info: {\n    // 运行信息\n    status: 'failed' | 'running' | 'stop'; // 运行状态\n    error_messages?: string[]; // 错误信息\n    recent_execute_success_rate?: number; // 最近执行成功率\n    history?: string[]; // 历史记录\n  };\n}\n\ninterface Line {\n  from_node_id: number; // 起始节点ID\n  to_node_id: number; // 目标节点ID\n  frontend_info: {\n    // 前端展示信息\n    source: {\n      id: string;\n      arrow: string;\n    };\n    target: {\n      id: string;\n      arrow: string;\n    };\n  };\n}\n```\n\n## API\n\n### 构造函数选项\n\n| 参数          | 类型          | 必填 | 默认值 | 说明           |\n| ------------- | ------------- | ---- | ------ | -------------- |\n| container     | string        | 是   | -      | 图形渲染容器ID |\n| flowGraphData | FlowGraphData | 是   | -      | 流程图数据     |\n| isReadonly    | boolean       | 是   | -      | 是否只读模式   |\n\n### 实例方法\n\n| 方法名     | 说明           |\n| ---------- | -------------- |\n| init       | 初始化流程图   |\n| render     | 重新渲染流程图 |\n| destroy    | 销毁实例       |\n| bindEvents | 绑定事件       |\n| on         | 绑定事件监听器 |\n\n### 事件\n\n通过 `on` 方法监听节点事件：\n\n```typescript\nconst graph = new FlowGraph({\n  container: '#app',\n  flowGraphData: {\n    locations: [\n      {\n        flow_id: 155,\n        node_id: 1102,\n        node_name: '蓝鲸监控告警数据',\n        node_type: 'stream_source',\n        status: 'running',\n        frontend_info: {\n          x: 218,\n          y: 145,\n        },\n        running_info: {\n          status: 'running',\n          error_messages: [],\n        },\n      },\n    ],\n    lines: [\n      {\n        from_node_id: 1102,\n        to_node_id: 1103,\n        frontend_info: {\n          source: {\n            node_id: 1102,\n            id: 'bk_node_1',\n            arrow: 'Right',\n          },\n          target: {\n            id: 'bk_node_2',\n            arrow: 'Left',\n          },\n        },\n      },\n    ],\n    version: 'V1.0',\n  },\n  isReadonly: false,\n}).on('nodeDblClick', (node, event) => {\n  console.log('节点双击', node, event);\n});\n```\n\n支持的事件类型：\n\n| 事件名       | 回调参数         | 说明         |\n| ------------ | ---------------- | ------------ |\n| nodeDblClick | (node: Location) | 节点双击事件 |\n| nodeClick    | (node: Location) | 节点点击事件 |\n\n### 完整示例\n\n```typescript\nimport FlowGraph from '@bkui-vue/bkbase-flow-graph';\n\nconst graph = new FlowGraph({\n  container: '#app',\n  flowGraphData: {\n    locations: [\n      {\n        flow_id: 155,\n        node_id: 1102,\n        node_name: '蓝鲸监控告警数据',\n        node_type: 'stream_source',\n        status: 'running',\n        frontend_info: {\n          x: 218,\n          y: 145,\n        },\n        running_info: {\n          status: 'running',\n          error_messages: [],\n        },\n      },\n    ],\n    lines: [\n      {\n        from_node_id: 1102,\n        to_node_id: 1103,\n        frontend_info: {\n          source: {\n            node_id: 1102,\n            id: 'bk_node_1',\n            arrow: 'Right',\n          },\n          target: {\n            id: 'bk_node_2',\n            arrow: 'Left',\n          },\n        },\n      },\n    ],\n    version: 'V1.0',\n  },\n  isReadonly: false,\n})\n  .on('nodeDblClick', node => {\n    console.log('节点双击', node);\n  })\n  .on('nodeClick', node => {\n    console.log('节点点击', node);\n  });\n\ngraph.render();\n```\n\n## 本地开发\n\n### 环境准备\n\n1. 安装依赖\n\n```bash\npnpm install\n```\n\n2. 启动开发服务器\n\n```bash\npnpm run dev\n```\n\n开发服务器启动后，访问：\n\n```\nhttp://localhost:3500/playground/index.html\n```\n\n### 开发注意事项\n\n1. 国际化\n\n- 组件默认使用中文\n- 通过 cookie 中的 `blueking_language` 判断语言\n- 支持中文和英文两种语言\n\n2. 节点状态说明\n\n- `failed`: 执行异常\n- `running`: 正在执行\n- `stop`: 已停止\n\n3. 本地开发\n\n- 开发服务器默认端口为 3500\n- 需要通过 `/playground/index.html` 路径访问开发页面\n- 支持热更新\n","readmeFilename":"README.md"}