@lcpcode/logic-layout

@lcpcode/logic-layout.

See our website @lcpcode/logic-layout for more information.逻辑编排包

Install

Using npm:

$ npm install --save  @lcpcode/logic-layout

or using yarn:

$ yarn add @lcpcode/logic-layout

实际方案

• 逻辑编排最主要是分为三块
  • 元件
    • 基础元件
      • 开始
      • if
      • switch
      • 结束
      • 并列
    • 业务元件
      • 设置状态
      • 发送请求
      • 数据处理
      • 表单
        • 设置表单值
        • 获取表单值
        • 重置表单
        • 校验
      • 消息提示
      • 对话框
      • 页面及路由跳转
    • 元件触发时机
      • 流程传导
      • useEffect
      • unmount
      • 值变化
      • 单击
      • 双击
      • 右击
  • 编排器
  • runtime -> logic-runtime

技术实现及灵感来源：

• x6.antv 🚀 JavaScript diagramming library that uses SVG and HTML for rendering. X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。在线文档

  • examples
    • x6-app-draw 在线示例
      • 初始化代码
    • x6-app-dag 在线示例
      • 初始化代码
    • 图表示例
      • 组织架构自动布局
  • SVG 元素参考
  • @antv/layout Layout algorithms for graphs.
    • 文档
    • 基础技术原理dagre Directed graph layout for JavaScript

• imove Move your mouse, generate code from flow chart. iMove 是一个逻辑可复用的，面向函数的，流程可视化的 JavaScript 工具库。

  • 流程可视化：上手简单，绘图方便，逻辑表达更直观，易于理解
  • 逻辑复用：iMove 节点支持复用，单节点支持参数配置
  • 灵活可扩展：仅需写一个函数，节点可扩展，支持插件集成
  • 适用于 JavaScript 所有场景：比如前端点击事件，Ajax 请求和 Node.js 后端 API 等
  • 多语言编译：无语言编译出码限制（例：支持 JavaScript, Java 编译出码）

• UI 设计灵感

  • beeart
  • bpmn.io

• 文章

  • 从低代码到无代码：可视化逻辑编排
  • 逻辑编排在优酷可视化搭建中的实践之上
  • 2B 领域下的低代码探索之路

• 逻辑编排

  1. 交互逻辑
  2. 表单校验
  3. 表单取值
  4. setState
  5. 刷新数据源
  6. 条件判断
  7. 发送请求
  8. message
  9. dialog
  10. 数据处理
  11. 路由跳转
  12. 表单
      1. 校验
      2. 取/赋值
      3. 提交
  13. 列表
      1. 搜索
      2. 重置
      3. 分页
      4. CRUD
  14. 详情
      1. 字段映射
  15. 逻辑编排节点
      1. 表单
         1. 设置表单值
         2. 获取表单值
         3. 重置
         4. 校验
      2. 方法调用
         1. 数据处理
            1. 时间处理(dayjs 类)
            2. map/filter/reduce...
            3. 自定义
         2. utils
            1. 日志埋点
            2. exceptChecker
         3. 刷新
            1. reloadDataSource
            2. 列表数据源刷新
         4. 设置状态(setState)
            1. key
            2. value
      3. 发送请求
         1. 选择数据源
         2. 输入参数
            1. key
            2. value
               1. queryString
               2. state
               3. 自定义
      4. 消息提示
         1. 标题
         2. 类型
         3. 内容
      5. 对话框
         1. 类型(alert/confirm/show)
         2. 标题
         3. 内容
      6. 条件分支
         1. 条件表达式
         2. 条件成立
         3. 条件不成立
      7. 路由跳转
         1. 路由类型
            1. 应用内(下拉选择)
            2. 外链(输入)
         2. 路由参数
      8. 抽屉
      9. 辅助技术
         1. 逻辑节点自动化布局
            1. 用 DFS 深度优先遍历算法实现自动布局
         2. 交互要求
            1. 不需要节点连线、无限嵌套的条件控制可视化编排
            2. 把拖拽全部改成添加和上下移动