open-index/open-npm huggingface dataset:
npm package: @lcpcode/affix
Description: 固钉
Latest version: 0.0.4

# @lcpcode/affix

> @lcpcode/affix.

See our website [@lcpcode/affix]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/affix
```

or using yarn:

```bash
$ yarn add @lcpcode/affix
```
npm package: @lcpcode/button
Description: 按钮
Latest version: 0.0.4

# @lcpcode/button

> @lcpcode/button.

See our website [@lcpcode/button](https://umijs.org/plugins/button) for more information.

## Install

Using npm:

```bash
$ npm install -S button
```

or using yarn:

```bash
$ yarn add button
```
npm package: @lcpcode/calendar
Description: 日历
Latest version: 0.0.4

# @lcpcode/calendar

> @lcpcode/calendar.

See our website [@lcpcode/calendar]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/calendar
```

or using yarn:

```bash
$ yarn add @lcpcode/calendar
```
npm package: @lcpcode/ccs
Description: lcp ccs library
Latest version: 0.0.4

# ccs

> ccs.

See our website [ccs]() for more information. ccs 库存放跨包使用的公共组件

## Install

Using npm:

```bash
$ npm install -S ccs
```

or using yarn:

```bash
$ yarn add ccs
```
npm package: @lcpcode/checkbox
Description: 多选框
Latest version: 0.0.4

# @lcpcode/checkbox

> @lcpcode/checkbox.

See our website [@lcpcode/checkbox](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/checkbox
```

or using yarn:

```bash
$ yarn add @lcpcode/checkbox
```
npm package: @lcpcode/col
Description: 竖向布局
Latest version: 0.0.4

# @lcpcode/col

> @lcpcode/col.

See our website [@lcpcode/col]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/col
```

or using yarn:

```bash
$ yarn add @lcpcode/col
```
npm package: @lcpcode/dynamic
Description: 动态组件
Latest version: 0.0.4

# @lcpcode/dynamic

> @lcpcode/dynamic.

See our website [@lcpcode/dynamic]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/dynamic
```

or using yarn:

```bash
$ yarn add @lcpcode/dynamic
```

动态组件目标：提供容器动态展示事先配置好的组件。

方案设计：

- 状态清单 statusList 存储可枚举的状态值
npm package: @lcpcode/each-group
Description: 遍历器
Latest version: 0.0.4

# @lcpcode/each-group

> @lcpcode/each-group.

See our website [@lcpcode/each-group]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/each-group
```

or using yarn:

```bash
$ yarn add @lcpcode/each-group
```
npm package: @lcpcode/editor-panel
Description: 编辑面板
Latest version: 0.0.4

# @lcpcode/editor-panel

> @lcpcode/editor-panel.

See our website [@lcpcode/editor-panel](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/editor-panel
```

or using yarn:

```bash
$ yarn add @lcpcode/editor-panel
```
npm package: @lcpcode/events
Description: 事件系统
Latest version: 0.0.4

# @lcpcode/events

> @lcpcode/events.

See our website [@lcpcode/events]() for more information. 事件系统

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/events
```

or using yarn:

```bash
$ yarn add @lcpcode/events
```
npm package: @lcpcode/flex-box
Description: 弹性盒子
Latest version: 0.0.4

# @lcpcode/flex-box

> @lcpcode/flex-box.

See our website [@lcpcode/flex-box](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/flex-box
```

or using yarn:

```bash
$ yarn add @lcpcode/flex-box
```
npm package: @lcpcode/fold
Description: 折叠器
Latest version: 0.0.4

# @lcpcode/fold

> @lcpcode/fold.

See our website [@lcpcode/fold]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/fold
```

or using yarn:

```bash
$ yarn add @lcpcode/fold
```
npm package: @lcpcode/formula
Description: 公式编辑器
Latest version: 0.0.4

# @lcpcode/formula

> @lcpcode/formula.

See our website [@lcpcode/formula]() for more information.

## Install

Using npm:

```bash
$ npm install -S @lcpcode/formula
```

or using yarn:

```bash
$ yarn add @lcpcode/formula
```
npm package: @lcpcode/icon
Description: 图标
Latest version: 0.0.4

# @lcpcode/icon

> @lcpcode/icon.

See our website [@lcpcode/icon]() for more information.

## Install

Using npm:

```bash
$ npm install -S @lcpcode/icon
```

or using yarn:

```bash
$ yarn add @lcpcode/icon
```
npm package: @lcpcode/image
Description: 图片
Latest version: 0.0.4

# @lcpcode/image

> @lcpcode/image.

See our website [@lcpcode/image]() for more information.

## Install

Using npm:

```bash
$ npm install -S @lcpcode/image
```

or using yarn:

```bash
$ yarn add @lcpcode/image
```
npm package: @lcpcode/input
Description: 输入框
Latest version: 0.0.4

# @lcpcode/input

> @lcpcode/input.

See our website [@lcpcode/input]() for more information.

## Install

Using npm:

```bash
$ npm install -S @lcpcode/input
```

or using yarn:

```bash
$ yarn add @lcpcode/input
```
npm package: @lcpcode/logic-runtime
Description: 逻辑运行时
Latest version: 0.0.4

# @lcpcode/logic-runtime

> @lcpcode/logic-runtime.

See our website [@lcpcode/logic-runtime]() for more information.逻辑运行时包

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/logic-runtime
```

or using yarn:

```bash
$ yarn add @lcpcode/logic-runtime
```

实际方案

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

技术实现及灵感来源：

- [imove](https://hub.fastgit.org/ykfe/imove) Move your mouse, generate code from flow chart. iMove 是一个逻辑可复用的，面向函数的，流程可视化的 JavaScript 工具库。

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

- 文章
  - [从低代码到无代码：可视化逻辑编排](https://mp.weixin.qq.com/s/LL8rZl-Ee8HYOs3375usVA)
  - [逻辑编排在优酷可视化搭建中的实践之上](https://blog.csdn.net/qq_36208030/article/details/114880240)
  - [2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)
- 逻辑编排
  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. 把拖拽全部改成添加和上下移动
npm package: @lcpcode/menu
Description: 导航菜单
Latest version: 0.0.4

# @lcpcode/menu

> @lcpcode/menu.

See our website [@lcpcode/menu]() for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/menu
```

or using yarn:

```bash
$ yarn add @lcpcode/menu
```

导航菜单目标：为页面和功能提供导航的菜单列表。

应用路由管理是由一系列组件的配合完成的功能：

- 页面布局构建 layout
- 导航菜单管理应用页面跳转
- 路由器承载页面容器
- 页头承载页面基础信息

方案设计：

- 开发布局页面，跟普通页面同样等级
- 布局页面里可以拖放页面布局、导航菜单、路由器、页头组件
- 导航菜单管理应用页面跳转
- 路由器承载对应的页面渲染
- 页头承载页面面包屑等页面信息渲染

技术资料： - [react-router](https://hub.fastgit.org/remix-run/react-router/tree/main/packages) Declarative routing for React [文档](https://reactrouter.com/web/guides/quick-start) - [examples](https://reactrouter.com/web/example/basic) - [nesting](https://reactrouter.com/web/example/nesting) - [recursive-paths](https://reactrouter.com/web/example/recursive-paths) 递归路径 - [route-config](https://reactrouter.com/web/example/route-config) - antd 组件 - [Menu 组件](https://ant.design/components/menu-cn/) - [PageHeader](https://ant.design/components/page-header-cn/) - [Layout 布局](https://ant.design/components/layout-cn/)
npm package: @lcpcode/page
Description: 页面根
Latest version: 0.0.4

# @lcpcode/page

> @lcpcode/page.

See our website [@lcpcode/page](https://procomponent.ant.design/) for more information.

## Install

Using npm:

```bash
$ npm install --save  @lcpcode/page
```

or using yarn:

```bash
$ yarn add @lcpcode/page
```
npm package: @lcpcode/parser
Description: 解析器
Latest version: 0.0.4

# parser

> parser.

See our website [parser](https://umijs.org/plugins/parser) for more information.

## Install

Using npm:

```bash
$ npm install -S parser
```

or using yarn:

```bash
$ yarn add parser
```

使用说明：parser 提供四种使用模式(isPreview 的优先级高于 isUsedByUrl，有 isPreview 时，isUsedByUrl 失效)

- 设计器使用时，预览模式
  - 访问链接示例：http://host?appId=aid_0WOKDK870fEdRHphHQSd4&isPreview=true
- 通过 url 访问模式
  - 分为两种模式
    - 通过访问 id 访问（提供分享链接，输入密码访问）
      - 访问链接示例：http://host?appId=accessid_28Q-axOra-NnleF3yd3gt&isUsedByUrl=true
    - 通过资产 id 访问
      - 访问链接示例：http://host?appId=aid_0WOKDK870fEdRHphHQSd4&isUsedByUrl=true
- dist 私有服务器部署模式
  - 访问链接示例：http://host?appId=aid_0WOKDK870fEdRHphHQSd4
- SDK 集成到代码开发模式
  - import Parser from '@lcpcode/parser'
  - <Parser DSL={DSL} />