# CMS2.0 外部控件

## 代码管理

- 代码应该存放于 `https://gitlab.syc-cms.com/fe` 前端分组下
- 现有一个 `cms2.0-widgets` 的仓库
- 可以分多个仓库，也可以单个仓库
- 也可以用分支划分不同的项目
- 一个仓库可以包含多个控件

## 打包机制

- 使用构建工具打包输出 js ，该 js 包含其导出的一个或多个控件，相当于一个控件包
- 打包之后的结果会排除 `Vue`，最终与基座使用同一个 `Vue`
- 所以 `Vue` 的版本应该操持一致，避免开发时与打包后因版本不同而导致不一致
- 输出的结果应如下
  - dist
    - Widget1
      - index.js
      - ...
    - Widget2
      - index.js
      - ...

## 加载机制

- 打包后的外部控件，应放置于服务器 `wwwroot/widgets` 目录下
- 基座会通过接口返回的外部控件 `WidgetX/index.js` url 列表，然后通过 `import('WidgetX/index.js')` 进行引入
- 基座将引入的控件包的控件注册到控件库
- 控件库中即可看到引入的控件，并且可以进行使用

## 示例代码

```
git clone https://gitlab.syc-cms.com:8443/fe/cms2.0-widgets.git
```

## 开发文档

- 一个控件包含以下内容

```typescript
type Widget = {
  is: string
  name: string
  category: string
  icon: string
  canvasView: DefineComponent // 画布视图 import X from 'X.vue'
  settingsView: DefineComponent // 设置视图 import XSettings from 'X.settings.vue'
}
```

- is 是控件的唯一标识，如果相同将会被覆盖
- 其它与内部控件相同