npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lcpcode/logic-layout

v0.0.4

Published

逻辑编排

Downloads

3

Readme

@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 图等图应用。在线文档

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

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

  • 文章

  • 逻辑编排

    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. 把拖拽全部改成添加和上下移动