yarn run dev

使用npm

hy-logic-flow (hy-flow-design)

简体中文 | English (partial)

简介

hy-logic-flow（仓库名：smart-flow-design）是一个基于 Vue 2 + Ant Design Vue + Logic-Flow 的流程设计与流程组件库，封装了流程设计器、流程执行与常见工作流功能，方便在企业级应用中集成可视化流程管理能力。

主要功能摘要：流程定义/设计、节点表单配置、任务办理、退回/转办/委托、会签/或签、并行分支、流程跟踪、流程版本管理等。

仓库地址（码云）： https://gitee.com/nirunfa/smart-flow-design

目录结构（简要）

• packages/：库入口与 mini 版本实现
• FlowDesign/：流程设计相关视图与逻辑
• FlowNode/：各类流程节点实现
• Common/、Component/：可复用组件
• examples/：示例用法和演示页面

更多目录请参阅仓库根目录。

快速开始

安装（npm / yarn）：

# 使用 npm
npm install

# 或使用 yarn
yarn install

本地开发：

npm run dev
# 或
yarn run dev

构建分发库（生成 dist）：

# 构建主库
npm run lib

# 构建 mini 版本（仅库，体积更小，需项目已引入 antd 组件）
npm run mini

发布到 npm（示例）：

npm login
npm publish

（仓库还提供 scripts/publish.js 与 scripts/publish-mini.js 可选的发布自动化脚本）

在项目中使用

安装已发布的包：

# 完整包：
npm i hy-logic-flow --save

# 或 mini 包（前提：项目中已包含 Ant Design Vue）：
npm i hy-logic-flow-mini --save

在 main.js 中引入并注册：

import Vue from 'vue'
import HyFlowDesign from 'hy-logic-flow'
import 'hy-logic-flow/styles/hy-logic-flow.less'

Vue.use(HyFlowDesign)

// 可选：将内部提供的 flow store 注册到你的 Vuex
const flowStore = HyFlowDesign.flowStore
if (flowStore && !$store.state.flow) {
  // 假设你的 Vuex 实例为 store
  store.registerModule('flow', flowStore)
}

在组件中使用：

<template>
  <div>
    <FlowDesign ref="FlowDesign" />
  </div>
</template>

示例请参考 examples/ 目录。

可用脚本（来自 package.json）

• npm run dev：本地开发（vue-cli 服务）
• npm run build：构建示例/站点
• npm run lib：构建为库（lib）并同时触发 mini 构建
• npm run mini：生成 mini 包库文件
• npm run lint：运行 ESLint
• npm run pub：自定义发布脚本（scripts/publish.js）

完整脚本请查看 package.json。

注意与建议

• 本项目基于 Vue 2.x（使用 [email protected] 与 [email protected]）。
• 如果你的项目已使用 Ant Design Vue，建议使用 hy-logic-flow-mini（mini 包）以减小 bundle 体积。
• 如果要定制节点、表单或事件脚本，请阅读 FlowDesign/ 与 FlowNode/ 下的实现并结合 examples/ 调试。

贡献

欢迎提 PR 和 issue。建议先在本地运行并按照仓库代码风格提交（项目包含 ESLint / Prettier / Stylelint 配置）。

常见贡献流程：

1. Fork 本仓库并创建分支
2. 编写代码并遵循现有代码风格
3. 提交 PR 并在 PR 描述中说明变更点

许可证

Apache License

更多信息请查看仓库 LICENSE 文件。

文件位置： README.md