低代码阿里lowcode使用教程

清扬_br

已于 2024-07-24 17:21:20 修改

阅读量956

点赞数 30

文章标签：低代码

于 2024-07-24 16:58:33 首次发布

本文链接：https://blog.csdn.net/qq_15123471/article/details/140667251

版权

0.常用
github地址： https://github.com/alibaba/lowcode-engine
演示demo github地址：https://github.com/alibaba/lowcode-demo
文档地址： https://www.yuque.com/lce/doc/ 语雀文档 https://www.yuque.com/lce/usage 语雀文档使用文档
https://lowcode-engine.cn/site/docs/guide/quickStart/intro
lowcode文档
演示地址：https://lowcode-engine.cn/demo/demo-general/index.html
官方二次开发组件演示项目地址：https://www.bilibili.com/read/cv17552091/?spm_id_from=333.999.0.0
官方物料项目github地址： https://github.com/alibaba/lowcode-materials
fusion UI : https://fusion.design/pc/
npm官网： https://www.npmjs.com/
推包参考： https://blog.csdn.net/weixin_46682277/article/details/123009648
参考：搭建及自定义组件：http://www.icodebang.com/article/309921.html
制作表格： https://lowcode-engine.cn/site/docs/demoUsage/makeStuff/table
lowcode增删改查: https://www.cnblogs.com/hoager/p/16758303.html

页面管理开发视频：https://www.bilibili.com/video/BV17a411i73f/
https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget#panel
修改数据源面板：
https://lowcode-engine.cn/site/docs/demoUsage/panels/datasource
开发自定义组件并发布： https://www.icodebang.com/article/309921.html
1.项目启动
安装cnpm
npm install -g cnpm
（npm建议使用 18 版本）下载项目并运行 git clone https://github.com/alibaba/lowcode-demo.git cd demo-general cnpm
install --force cnpm i @alilc/lowcode-utils cnpm i lodash cnpm
install regenerator-runtime
cnpm install html-webpack-plugin@3 或者4 cnpm install webpack@4 --save-dev cnpm install --save axios npm run start

2.项目结构介绍

plugins 目录，存放的都是示例插件，方便用户从中看到一个插件是如何实现的
services 目录，模拟数据请求、提供默认 schema、默认资产包等，此目录下内容在真实项目中应替换成真实的与服务端交互的服务
预览页面入口文件 preview.tsx
3.新增插件介绍
三种方式 ;1.在lowcode-demo中使用插件创建（3.1）（此种方式不推荐），
2.创建组件库编辑项目material 在material项目中编辑和创建（3.2）（推荐此种方式，适合单组件开发，但新手建议使用第3种）
3. 在低代码组件库继续开发自己的组件。（4.修改已有物料）
（推荐此种方式，最优，有写好的其他组件做参考。当想发布一个组件时，可写好自己的组件后，注释其他组件。
建议使用其中的antdesign组件）
3.1. 在lowcode-demo中使用插件创建
3.1.1.安装 build-scripts 和它的低代码开发插件：
npm install -D @alifd/build-plugin-lowcode @alib/build-scripts --save-dev
3.1.2.新增 build-scripts 配置文件：build.lowcode.js
const { library } = require(‘./build.json’);
module.exports = {
alias: {
‘@’: ‘./src’,
},
plugins: [
[
“@alifd/build-plugin-lowcode”,
{
engineScope: ‘@alilc’,
}
]
],
};
3.1.3.在 package.json 中scripts定义低代码开发相关命令
“lowcode:dev”: “build-scripts start --config ./build.lowcode.js”,
“lowcode:build”: “build-scripts build --config ./build.lowcode.js”,
3.1.4.开发调试

启动低代码开发调试环境

npm run lowcode:dev

构建低代码产物

npm run lowcode:build

发布组件
npm publish //自己用本项目就不用发布
问题：windows下启动报错： https://zhuanlan.zhihu.com/p/503131420

3.2.创建物料编辑项目并创建物料   （此种方法是发布到npm, 需要有npm账号）
          3.2.1.创建物料项目

安装cnpm
npm install cnpm
先安装官方的命令行工具
cnpm install -g @alilc/create-element@latest
cnpm init @alilc/element lowcode-app-material // lowcode-app-material项目名称
选1 组件/物料 2中间默认值 3 react-组件库

cnpm i
cnpm i @alilc/lowcode-react-renderer
cnpm i @alilc/lowcode-utils
cnpm i @alilc/lowcode-types
cnpm i lodash
cnpm install webpack@4 --save-dev
cnpm install style-loader@1 --save-dev
cnpm install template-component-demo
cnpm install regenerator-runtime
cnpm install react-scripts --save-dev
cnpm install react
export NODE_OPTIONS=–openssl-legacy-provider //如果使用的 node npm版本较新命令行输入此命令（使用旧版的openssl），不行则使用node版本17以下的版本重试，windows下 export改成 set
如果不好使在项目的 package.json 的 scripts中 dumi 和 dumi:build 都添加变量 NODE_OPTIONS=–openssl-legacy-provider
例如： “dumi”: “cross-env APP_ROOT=docs NODE_OPTIONS=–openssl-legacy-provider dumi dev”,
“dumi:build”: “cross-env APP_ROOT=docs NODE_OPTIONS=–openssl-legacy-provider dumi build”,

尝试启动
npm run lowcode:dev
备注:
// npm audit fix --force 强制解决所有安全漏洞
// npm cache clean --force 清理缓存
成功启动的package备注：启动不起来时参考此package版本进行修改
“dependencies”: {
“@alifd/next”: “^1.24.14”,
“@alilc/lowcode-react-renderer”: “^1.3.1”,
“@alilc/lowcode-types”: “^1.3.1”,
“@alilc/lowcode-utils”: “^1.3.1”,
“@babel/runtime”: “^7.0.0”,
“@types/react”: “^16.14.0”,
“big.js”: “^6.2.1”,
“classnames”: “^2.5.1”,
“lodash”: “^4.17.21”,
“moment”: “^2.29.4”,
“regenerator-runtime”: “^0.14.1”,
“template-component-demo”: “^2.0.5”
},
“devDependencies”: {
“@alib/build-scripts”: “^0.1.23”,
“@alifd/build-plugin-lowcode”: “^0.4.1”,
“@alifd/theme-2”: “^0.4.4”,
“@types/big.js”: “^6.1.6”,
“@types/lodash”: “^4.14.191”,
“build-plugin-component”: “^1.3.3”,
“build-plugin-fusion”: “^0.1.3”,
“build-plugin-moment-locales”: “^0.1.0”,
“moment”: “^2.20.1”,
“react”: “^16.14.0”,
“react-dom”: “^16.14.0”,
“style-loader”: “^1.3.0”,
“typescript”: “^3.9.3”,
“webpack”: “^4.47.0”
},
3.3.2.开发步骤
# 启动 lowcode 环境进行调试预览
npm run lowcode:dev
备注：新增一个组件后，需要重新执行命令：
npm run lowcode:dev 否则看不到效果
# 构建低代码产物
npm run lowcode:build
（删除demo文件夹下的所有.md文件）否则可能发布不成功
3.2.3.物料开发说明
( 使用fusionUI开发时在src下添加组件，执行npm run lowcode:build 后会自动在lowcode目录下生成低代码代码，然后修改其中的代码
使用fusionUI开发时在src下添加组件，执行npm run lowcode:build 后会不会自动在lowcode目录下生成低代码，
只会在其他目录添加环境，需自己在lowcode目录下添加文件并编写
)
3.2.3.1.组件开发：在src的components下新建组件文件夹进行开发。
在组件文件夹下新建组件名.tsx 文件进行编写代码，
新建 index.tsx文件导出编辑的组件。
UI语法参照 fusion: https://fusion.design/pc/component
其他详细设置参照创建项目时给出的2个组件colorful-button 和 colorful-input。
react语法参考： https://www.runoob.com/react/
react函数组件参考： https://blog.csdn.net/weixin_73577920/article/details/128537767
React—函数组件与类组件区别：
https://blog.csdn.net/weixin_68160847/article/details/128647799
React.FC使用说明： https://blog.csdn.net/qq_52421092/article/details/127628465
react 的 forwardRef 用法: https://www.cnblogs.com/operate/p/16190141.html
官方自带例子说明：如下代码，创建 ColorfulInput变量 =一个函数，
入参是 ColorfulInputProps类型
最后导出这个函数。
const ColorfulInput: React.FC = function ColorfulInput({//定义一个函数变量
color,
style = {},
…otherProps
}) {
const _style = style || {};
if (color) {
_style.backgroundColor = color;
}
const _otherProps = otherProps || {};
_otherProps.style = _style;
return (
<Input { …_otherProps } />
);
};
export interface ColorfulInputProps {//入参
color?: string;
style?: object;
}
export default ColorfulInput; //导出
fusionUI在代码中使用说明：
fusion官方的按钮组件示例代码
import { Button, Box } from ‘@alifd/next’;
const props = {
component: “a”,
href: “http://www.alibaba.com”,
target: “_blank”
};

ReactDOM.render(

<Button {…props} type=“primary”>
alibaba.com

<Button {…props} type=“secondary”>
alibaba.com

<Button {…props} type=“normal”>
alibaba.com

<Button {…props} loading>
alibaba.com loading

,
mountNode
);
将其用于低代码前做如下转换：将上面的代码转换成 class的形式起名叫 Test
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Button, Box } from ‘@alifd/next’;

const props = {
component: “a”,
href: “http://www.alibaba.com”,
target: “_blank”
};

class Test extends React.Component {
render(
) {
return (

<Button {…props} type=“primary”>
alibaba.com

<Button {…props} type=“secondary”>
alibaba.com

<Button {…props} type=“normal”>
alibaba.com

<Button {…props} loading>
alibaba.com loading

);
}
}

ReactDOM.render(, mountNode);
然后最后一句ReactDOM.render去掉，其余部分复制到低代码组件中。
最后一句添加 export default Test; //导出添加 index.tsx文件导出编辑的组件即可。
(详情参照给出的两个例子colorful-input，和colorful-button)
然后npm run lowcode:dev
（写完新组件后，需杀到命令行，重新执行npm run lowcode:dev 才会生效，
才会在lowcode文件夹下生成对应的低代码）
修改 lowcode 中的json.
备注：删除组件时，需删除 src的组件文件夹，
删除在lowcode中生成组件文件夹，
删除在lowcode_es目录下的 meta.js中的组件相关变量
删除在lowcode_lib目录下的 meta.js中的组件相关变量
antdesignUI在代码中使用说明：
例如在新创建的项目中使用官方物料中提供的button,
复制 button目录到自己创建的项目中
然后执行 cnpm install antd ，
cnpm i @ant-design/icons
cnpm i typescript
（如使用的组件 import 了其他工具，请自行 cnpm i xx 进行安装）
执行 npm run lowcode:build 会报错，
The above error occurred in the <ForwardRef(AntButton1)>
component: xxx 组件渲染异常, 异常原因:
createElement is not defined%s
这是由于没有正确转换JSX语法导致的。
在React中使用JSX语法需要先将其编译为JavaScript代码才能在浏览器中运行，
安装Type转换插件即可
cnpm install tsconfig-paths-webpack-plugin --save-dev
在执行执行 npm run lowcode:build 时
即使文件中没有引入 import { createElement } from ‘react’; 也不会发生报错了。
此时npm run lowcode:dev 继续启动调试即可。
3.2.3.2.组件setter和快照修改：创建完组件后执行 npm run lowcode:dev 或 npm run lowcode:build 后，
会在根目录下生成一个lowcode，组件的setter和快照会以json描述文件的形式保存
修改对应组件的json描述文件，进行相应开发。
json描述语法参照：
https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec
3.2.4.发布
新创建的组件库在本地调试过后，需要发布到 npm 上之后才能集成到项目中。
npm publish 发布组件 //material项目和 lowcode-demo两个项目需使用相同的npm

  如果是首次publish需先执行 
  登陆  npm login      // souhu_npm      souhu_npm_password   邮箱： wh736749722@163.com
  //根据提示输入用户名密码 邮箱 ，会提示输入一次性密码，查看邮箱中的一次性号码
  //如果报错是淘宝镜像则执行命令换回：  npm config set registry https://registry.npmjs.org/
  //清理缓存    npm cache clean --force
  //发布成功后登陆npm官网      https://www.npmjs.com/      查看
  //如果命令行登录不上，浏览器登录npm成功后重新尝试
  //在 package.json 的private字段   "private": true, // true为私有   false为公有
  //  npm logout  登出
  //私有npm: 可以使用的命令为`npm login --registry=https://your_private_npm_address [username] [password]`。如果需要，可以在命令中使用`--registry`参数指定私有npm地址。
  //npm 一直登录和发包失败： npm config set registry https://registry.npmjs.com/         org 改成com
    参考：npm发布步骤 参考：https://blog.csdn.net/Beconcentrated/article/details/132043259
               发包修改版本和加@名称 参考：https://blog.csdn.net/an_julia/article/details/134777407    
               如何引用拖出来默认展示项 snippets 参考： https://blog.csdn.net/wangqiaojie/article/details/126227741
               npm登录失败，发布失败 参考： https://www.jianshu.com/p/2642aff6b9ff

3.2.5.使用
在lowcode-demo的 assets.json 中
在npm网站上，npm发布的包下翻到code标签点击build 文件夹，再点击 lowcode文件夹，找到 assets-prod.json 文件
将其中的配置，要倒入的需要改 packages、 components ，把要导入组件的packages部分和 components 复制合并过来，
然后将倒入的内容中的你发的包 https://alifd.alicdn.com/npm/替换成 https://unpkg.com 即可
修改示例：（合并时可将 https://alifd.alicdn.com/npm/替换成 https://unpkg.com，
否则加载不出来，因为你发的包是发到 https://unpkg.com 而不是阿里的地址）
{
“version”: “1.1.13”,
“packages”: [
//新添加里面是组件
{
“title”: “我的自定义组件”,
“package”: “mini-elements”,
“version”: “0.1.1”,
“library”: “MiniElements”,
“urls”: [
“https://unpkg.com/mini-elements@0.1.1/build/lowcode/view.js”,
“https://unpkg.com/mini-elements@0.1.1/build/lowcode/view.css”
]
}
],
“components”: [
//新添加里面是描述 setter、默认设置等。
{
“exportName”: “MiniElementsMeta”,
“npm”: {
“package”: “mini-elements”,
“version”: “0.1.1”
},
“url”: “https://unpkg.com/mini-elements@0.1.1/build/lowcode/meta.js”,
“urls”: {
“default”: “https://unpkg.com/mini-elements@0.1.1/build/lowcode/meta.js”
}
}
],
“componentList”: [？ //没效果
{
“title”: “我的自定义组件”,
“icon”: “”,
“children”: [
{
“componentName”: “ChartDemo”,
“library”: “MiniElements”,
“title”: “图表Demo”,
“icon”: “”
},
{
“componentName”: “ColorfulButton”,
“title”: “多彩按钮”,
“description”: “这里是多彩按钮的介绍”,
“library”: “MiniElements”
},
{
“componentName”: “ColorfulInput”,
“title”: “多彩Input”,
“description”: “这里是多彩按钮ColorfulInput的介绍”,
“library”: “MiniElements”
}
]
},
]
}
参考：自定义物料1 参考： http://www.icodebang.com/article/309921.html
自定义物料2 参考： http://www.zlprogram.com/Show/19/DDBA9F42.shtml
自定义物料3 参考： https://blog.csdn.net/wangqiaojie/article/details/126227741
4.修改已有物料
4.1. 下载官方物料项目， github地址： https://github.com/alibaba/lowcode-materials
4.1.0.在根目录
package.json 的 dependencies 下添加 “moment”: “^2.29.1”
执行 cnpm i --force
4.1.1.例如修改fusion组件
cd 进入 packages
cd fusion-lowcode-materials
cnpm i --force
cnpm i @alilc/lowcode-react-renderer
cnpm i @alilc/lowcode-utils
cnpm i @alilc/lowcode-types
cnpm i lodash
cnpm install webpack@4 --save-dev
cnpm install style-loader@1 --save-dev
cnpm install template-component-demo
cnpm install regenerator-runtime
cnpm i classnames
npm run build //在 lowcode:build 前执行，否则执行lowcode:build时会报错
npm run lowcode:build
尝试启动
npm run lowcode:dev
（在src下添加组件，执行npm run lowcode:build 后会自动在lowcode目录下生成低代码代码，然后修改其中的代码）
4.1.2.如果使用antdesign组件则
cd 进入 packages
cd antd-lowcode-materials
cnpm i --force
cnpm i @alilc/lowcode-react-renderer
cnpm i @alilc/lowcode-utils
cnpm i @alilc/lowcode-types
cnpm i lodash
修改组件 menu ,这个组件有bug 需要使用备份中的menu做替换。
尝试启动
npm run lowcode:dev
添加组件
（在src下添加组件，执行npm run lowcode:build 后会不会自动在lowcode目录下生成低代码，
只会在其他目录添加环境，需自己在lowcode目录下添加文件并编写）
备注：如遇到 (undefined)ERR! ./.tmp/view.js 等 from 'D:\4.work_project
临时解决1：修改对应view.js 中的 \ 改成 \ 即可，不要重新执行npm run lowcode:dev 否则会重置（不推荐使用）
临时解决2：\node_modules@alifd\build-plugin-lowcode\src\index.js是生成view.js的逻辑（推荐使用）
如下代码:（注释那两行是需要修改的地方）找到下面的代码并修改 viewJsPath 在849行。
let viewJsPath = path.resolve(rootDir, ${lowcodeDir}/${componentNameFolder}/view); // const改为let
viewJsPath = viewJsPath.replace(/\/g, ‘\\’); // 添加此行
临时解决异步setter问题： @alifd/build-plugin-lowcode 这个包下 src /templates/index.jsx 加（metanew文件的路径）
import { addcomponentMetas } from 'import { addcomponentMetas } from ‘…/lowcode/utils/metanew.js’

                                            async init() {方法里加这个         黄色原有，绿色新加。
                                            if (typeof setterMap === 'object' && Object.keys(setterMap).length) {
                                                   setters.registerSetter(setterMap); 
                                           }
                                           const componentMetas1 = await addcomponentMetas();
                                           console.log("componentMetas1 ",componentMetas1); 
                                          assets.components=componentMetas1.components; 
                                          assets.componentList=componentMetas1.componentList;

其中metanew.js为.tmp下的meta.js 放在文尾部备注处
在官方demo中引用时，修改 src/plugins/plugin-lowcode-component/index.ts 找到 async init方法
async init() {
const { material } = ctx;
const newAssets= material.getAssets();
let componentsArr = newAssets.components;
for (let i = 0; i < componentsArr.length; i++) {
let items = componentsArr[i];
if (Promise.resolve(items.snippets) === items.snippets) {
console.log(“Table2Meta.snippets is a Promise object”,items);
const resultsnippets = await items.snippets;
items.snippets=resultsnippets;
console.log(“items.snippets :”,items.snippets);
}
}
console.log(“componentsArr ----”, componentsArr);
let componentList = generateComponentList(componentsArr);
console.log(“componentList ----”, componentList);
newAssets.components=componentsArr;
newAssets.componentList=componentList;
material.setAssets(newAssets);
console.log(“material ----”, material);
material.loadIncrementalAssets({
4.2. 组件开发
项目src 下component 下为对应的组件修改组件代码即可
修改后重新执行 npm run lowcode:dev ，在项目的lowcode目录下会生成对应的组件。（fusionUI会，ant需手动创建）
使用该组件即可
删除组件需修改最外层index.tsx ,把相应组件的 export删除，需同时删除lowcode下的生成的组件文件夹
npm run lowcode:build
常用开发文档：
react官方文档: https://react.docschina.org/learn
react 菜鸟教程： https://www.runoob.com/react/react-install.html
fusion UI : https://fusion.design/pc/
antdesignUI react : https://4x.ant.design/docs/react/introduce-cn/
4.3.发布
同 3.2.4.发布
4.4.使用
同 3.2.5.使用
5.物料开发生成说明
1.生成的json只描述页面组件之间的结构关系还有哪个字段使用那种setter
2.页面js，组件dom仍然保留在react页面里
3. 自带的setter： MixedSetter （多种设置器，下面是一个数组，选择使用哪种setter）
StringSetter (字符串setter)
ArraySetter (数组setter)
SlotSetter(插槽setter，可往里面拖拽组件)
JsonSetter （弹出对话框输入 json）
ExpressionSetter(表达式setter)
BoolSetter(二选一开关setter)
RadioGroupSetter (单选框setter)
CheckboxGroupSetter (多选框setter)
FunctionSetter （函数setter）变量输入setter 自带 VariableSetter
参考：setter设置 -以及联动 : https://www.yuque.com/lce/doc/cl03wo_nmhznb
4.使用已有属性设置参考物料项目 next-table 中的代码大部分无需手动编写，
导入后修改暴露的属性 // import { ColumnProps, TableProps } from ‘@alifd/next/types/table’;
参考：低代码协议文档 https://lowcode-engine.cn/site/docs/specs/lowcode-spec

备注处
import AffixMeta from ‘…/affix/meta’
import AlertMeta from ‘…/alert/meta’
import AnchorlinkMeta from ‘…/anchor.link/meta’
import AutoCompleteMeta from ‘…/auto-complete/meta’
import AvatarMeta from ‘…/avatar/meta’
import BackTopMeta from ‘…/back-top/meta’
import BadgeMeta from ‘…/badge/meta’
import BreadcrumbMeta from ‘…/breadcrumb/meta’
import ButtonMeta from ‘…/button/meta’
import CalendarMeta from ‘…/calendar/meta’
import CardMeta from ‘…/card/meta’
import CarouselMeta from ‘…/carousel/meta’
import CascaderMeta from ‘…/cascader/meta’
import CheckboxgroupMeta from ‘…/checkbox.group/meta’
import CheckboxMeta from ‘…/checkbox/meta’
import CollapsepaneMeta from ‘…/collapse.pane/meta’
import CollapseMeta from ‘…/collapse/meta’
import CommentMeta from ‘…/comment/meta’
import ConfigProviderMeta from ‘…/config-provider/meta’
import CrudtableMeta from ‘…/crudtable/meta’
import DatePickerrangePickerMeta from ‘…/date-picker.range-picker/meta’
import DatePickerMeta from ‘…/date-picker/meta’
import DescriptionsitemMeta from ‘…/descriptions.item/meta’
import DescriptionsMeta from ‘…/descriptions/meta’
import DividerMeta from ‘…/divider/meta’
import DrawerMeta from ‘…/drawer/meta’
import DropdownMeta from ‘…/dropdown/meta’
import EmptyMeta from ‘…/empty/meta’
import FormitemMeta from ‘…/form.item/meta’
import FormlistMeta from ‘…/form.list/meta’
import FormMeta from ‘…/form/meta’
import GridcolMeta from ‘…/grid.col/meta’
import GridrowMeta from ‘…/grid.row/meta’
import IconMeta from ‘…/icon/meta’
import ImageMeta from ‘…/image/meta’
import InputNumberMeta from ‘…/input-number/meta’
import InputgroupMeta from ‘…/input.group/meta’
import InputpasswordMeta from ‘…/input.password/meta’
import InputsearchMeta from ‘…/input.search/meta’
import InputtextAreaMeta from ‘…/input.text-area/meta’
import InputMeta from ‘…/input/meta’
import ListitemmetaMeta from ‘…/list.item.meta/meta’
import ListitemMeta from ‘…/list.item/meta’
import ListMeta from ‘…/list/meta’
import ManagersMeta from ‘…/managers/meta’
import MentionsMeta from ‘…/mentions/meta’
import MenuitemGroupMeta from ‘…/menu.item-group/meta’
import MenuitemMeta from ‘…/menu.item/meta’
import MenusubMenuMeta from ‘…/menu.sub-menu/meta’
import MenuMeta from ‘…/menu/meta’
import ModalMeta from ‘…/modal/meta’
import PageHeaderMeta from ‘…/page-header/meta’
import PaginationMeta from ‘…/pagination/meta’
import PopconfirmMeta from ‘…/popconfirm/meta’
import PopoverMeta from ‘…/popover/meta’
import ProgressMeta from ‘…/progress/meta’
import RadiogroupMeta from ‘…/radio.group/meta’
import RadioMeta from ‘…/radio/meta’
import RateMeta from ‘…/rate/meta’
import ResultMeta from ‘…/result/meta’
import SelectMeta from ‘…/select/meta’
import SkeletonMeta from ‘…/skeleton/meta’
import SliderMeta from ‘…/slider/meta’
import SlotMeta from ‘…/slot/meta’
import SpaceMeta from ‘…/space/meta’
import SpinMeta from ‘…/spin/meta’
import StatisticMeta from ‘…/statistic/meta’
import StepsstepMeta from ‘…/steps.step/meta’
import StepsMeta from ‘…/steps/meta’
import SwitchMeta from ‘…/switch/meta’
import TableMeta from ‘…/table/meta’
import Table2Meta from ‘…/table2/meta’
import TabstabPaneMeta from ‘…/tabs.tab-pane/meta’
import TabsMeta from ‘…/tabs/meta’
import TagMeta from ‘…/tag/meta’
import TestMenuMeta from ‘…/test-menu/meta’
import TimePickerMeta from ‘…/time-picker/meta’
import TimelineitemMeta from ‘…/timeline.item/meta’
import TimelineMeta from ‘…/timeline/meta’
import TooltipMeta from ‘…/tooltip/meta’
import TransferMeta from ‘…/transfer/meta’
import TreeSelectMeta from ‘…/tree-select/meta’
import TreeMeta from ‘…/tree/meta’
import TypographylinkMeta from ‘…/typography.link/meta’
import TypographyparagraphMeta from ‘…/typography.paragraph/meta’
import TypographytextMeta from ‘…/typography.text/meta’
import TypographytitleMeta from ‘…/typography.title/meta’
import UploadMeta from ‘…/upload/meta’

const componentCategorySort = {};
[“通用”,“导航”,“信息输入”,“信息展示”,“信息反馈”]
.reverse()
.forEach((item, index) => {
componentCategorySort[item] = ++index;
});

function generateComponentList(components) {
const componentList = [
{
title: ‘常用’,
icon: ‘’,
children: [],
},
{
title: ‘容器’,
icon: ‘’,
children: [],
},
{
title: ‘导航’,
icon: ‘’,
children: [],
},
{
title: ‘内容’,
icon: ‘’,
children: [],
},
{
title: ‘Feedback 反馈’,
icon: ‘’,
children: [],
},
];

const groupMap = {
原子组件: true,
};
const compGroup = {};

components.forEach((comp) => {
const category = comp.category || ‘其他’;
if (comp.group && !compGroup[comp.componentName]) {
compGroup[comp.componentName] = comp.group;
}
if (comp.group && !groupMap[comp.group]) {
groupMap[comp.group] = true;
}
let target = componentList.find((item) => item.title === category);
if (!target) {
target = {
title: category,
icon: ‘’,
children: [],
};

  componentList.push(target);
}

if (comp.snippets && comp.snippets.length) {
  target.children.push({
    componentName: comp.componentName,
    title: comp.title || comp.componentName,
    sort: {
      category: target.title,
      group: compGroup[comp.componentName] || '原子组件',
      priority: componentCategorySort[target.title] || 0,
    },
    icon: '',
    package: comp.npm.pkg,
    snippets: comp.snippets || [],
  });
}

});
return componentList;
}

export async function addcomponentMetas() {

  const componentMetas = [AffixMeta,AlertMeta,AnchorlinkMeta,AutoCompleteMeta,AvatarMeta,BackTopMeta,BadgeMeta,BreadcrumbMeta,ButtonMeta,CalendarMeta,CardMeta,CarouselMeta,CascaderMeta,CheckboxgroupMeta,CheckboxMeta,CollapsepaneMeta,CollapseMeta,CommentMeta,ConfigProviderMeta,CrudtableMeta,DatePickerrangePickerMeta,DatePickerMeta,DescriptionsitemMeta,DescriptionsMeta,DividerMeta,DrawerMeta,DropdownMeta,EmptyMeta,FormitemMeta,FormlistMeta,FormMeta,GridcolMeta,GridrowMeta,IconMeta,ImageMeta,InputNumberMeta,InputgroupMeta,InputpasswordMeta,InputsearchMeta,InputtextAreaMeta,InputMeta,ListitemmetaMeta,ListitemMeta,ListMeta,ManagersMeta,MentionsMeta,MenuitemGroupMeta,MenuitemMeta,MenusubMenuMeta,MenuMeta,ModalMeta,PageHeaderMeta,PaginationMeta,PopconfirmMeta,PopoverMeta,ProgressMeta,RadiogroupMeta,RadioMeta,RateMeta,ResultMeta,SelectMeta,SkeletonMeta,SliderMeta,SlotMeta,SpaceMeta,SpinMeta,StatisticMeta,StepsstepMeta,StepsMeta,SwitchMeta,TableMeta,Table2Meta,TabstabPaneMeta,TabsMeta,TagMeta,TestMenuMeta,TimePickerMeta,TimelineitemMeta,TimelineMeta,TooltipMeta,TransferMeta,TreeSelectMeta,TreeMeta,TypographylinkMeta,TypographyparagraphMeta,TypographytextMeta,TypographytitleMeta,UploadMeta];

  //把有Promise的对象变成正常对象
  for(var itemMetas of componentMetas){
    if (Promise.resolve(itemMetas.snippets) === itemMetas.snippets) {
      console.log("Table2Meta.snippets is a Promise object");
      const resultsnippets = await itemMetas.snippets;
      itemMetas.snippets=resultsnippets;
    }
  }
  console.log("componentMetas new ",componentMetas);


  const components = [];
  const npmInfo = {"package":"sohu001-antd-lowcode-materials-online","version":"1.1.9"};
  componentMetas.forEach(meta => {
    if (Array.isArray(meta)) {
      components.push(
        ...meta.map((item) => {
          if (!item.npm) {
            const { componentName } = item;
            const names = componentName.split('.');
            const [exportName, subName] = names;
            item.npm = {
              exportName: exportName,
              main: '',
              destructuring: true,
              subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
            };
          }
          item.npm = { ...npmInfo, ...(item.npm || {}) };
          return fillRealVersion(item);
        }),
      );
    } else if (meta.components) {
      components.push(
        ...meta.components.map((item) => {
          if (!item.npm) {
            const { componentName } = item;
            const names = componentName.split('.');
            const [exportName, subName] = names;
            item.npm = {
              exportName: exportName,
              main: '',
              destructuring: true,
              subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
            };
          }
          item.npm = { ...npmInfo, ...(item.npm || {}) };
          return fillRealVersion(item);
        }),
      );
    } else {
      if (!meta.npm) {
        const { componentName } = meta;
        const names = componentName.split('.');
        const [exportName, subName] = names;
        meta.npm = {
          exportName: exportName,
          main: '',
          destructuring: true,
          subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName,
        };
      }
      meta.npm = { ...npmInfo, ...(meta.npm || {}) };
      components.push(fillRealVersion(meta));
    }
  });

  const componentList = generateComponentList(components);

  

  const execCompile = !!false;

  if (!execCompile) {
    window.Sohu001AntdLowcodeMaterialsOnlineMeta = { components, componentList };
  }

  return { "components":components, "componentList":componentList };

}