# qsoft-x6-materials

一个面向 PC 的业务组件库
###
node： 16.x
## 调试

下载依赖

```
npm install
```

启动调试

```
npm run lowcode:dev             # 打开开发环境，运行所有组件
```

构建

```
npm run lowcode:build
```
## 组件开发
### 1. 切换镜像源
切换到npm官方镜像源
```
npm config set registry https://registry.npmjs.org/
```
淘宝镜像源
```
 npm config set registry https://registry.npmmirror.com
```

### 2. 创建动作库组件
#### 2.1 创建组件
在src/components目录下创建组件文件夹，文件夹下创建index.tsx文件，
index.tsx文件内容可以直接参考send-email组件或compo组件的写法，具
体扩展查看antv/x6官方文档：
https://x6.antv.vision/zh/examples/gallery

#### 2.2 创建mate.ts文件
在lowcode文件下自行创建与组件同名的文件，里面包含mate.ts文件，mate
中的参数其实都差不多，其中configure下的参数与主组件的index文件相关联
，可以查看不同组件的mate.ts文件，看看有什么区别。总之，mate.ts要通过
手动创建（我没有通过命令构建出来，所以我自己手动创建的），参照其他组件的
mate.ts文件书写方式，根据组件的index文件内容调整configure下的参数。

#### 2.3 修改package.json文件
根据需要，调整name（不能重名），修改版本（每次构建之前必须修改版本），
mate.ts中的组件版本可以修改也可以不修改。

#### 2.4 发布组件
构建
```
npm run lowcode:build
```
登录npm
```
npm login
```
发布
```
npm publish
```
## 组件使用
发布成功后，使用build/lowcode/render下的assets-prod.json，粘贴到我们的demo中的assets.json文件中，然后刷新页面即可看到新发布的组件。

## 注意
1. 组件的name不能重名，如果发布成功后，在下一次构建之前必须修改版本，否则会报错。
2. 组件的mate.ts文件需要手动创建，不能通过命令构建出来。
3. 组件的mate.ts文件中的参数与主组件的index文件相关联，需要根据组件的index文件内容调整configure下的参数。
4. 由于这个组件库试运行是设计器的界面，看不到具体修改后的效果，只有发布引用后才能看到具体的效果，所有开发难度很大。