@@ -621,7 +621,7 @@ component
621621| docUrl | 组件文档链接 | String | 否 |
622622| screenshot | 组件快照 | String | 否 |
623623| icon | 组件的小图标 | String (URL) | 是 |
624- | tags | 组件标签 | String | 是 |
624+ | tags | 组件标签 | String[ ] | 是 |
625625| keywords | 组件关键词,用于搜索联想 | String | 是 |
626626| devMode | 组件研发模式 | String (proCode,lowCode) | 是 |
627627| npm | npm 源引入完整描述对象 | Object | 否 |
@@ -634,7 +634,7 @@ component
634634| snippets | 内容为组件不同状态下的低代码 schema (可以有多个),用户从组件面板拖入组件到设计器时会向页面 schema 中插入 snippets 中定义的组件低代码 schema | Object[ ] | 否 |
635635| group | 用于描述当前组件位于组件面板的哪个 tab | String | 否 |
636636| category | 用于描述组件位于组件面板同一 tab 的哪个区域 | String | 否 |
637- | priority | 用于描述组件在同一 category 中的排序 | String | 否 |
637+ | priority | 用于描述组件在同一 category 中的排序 | number | 否 |
638638
639639##### 2.2.2.3 组件属性信息 props (A)
640640
@@ -1177,132 +1177,6 @@ export interface ComponentDescription { // 组件描述协议,通过 npm 中
11771177}
11781178```
11791179
1180- #### 2.2.3 资产包协议
1181-
1182- ##### 2.2.3.1 协议结构
1183-
1184- 协议最顶层结构如下,包含 5 方面的描述内容:
1185-
1186- - version { String } 当前协议版本号
1187- - packages{ Array } 低代码编辑器中加载的资源列表
1188- - components { Array } 所有组件的描述协议列表
1189- - sort { Object } 用于描述组件面板中的 tab 和 category
1190-
1191- ##### 2.2.3.2 version (A)
1192-
1193- 定义当前协议 schema 的版本号;
1194-
1195- | 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 |
1196- | ---------- | ------ | ---------- | -------- | ------ |
1197- | version | String | 协议版本号 | - | 1.0.0 |
1198-
1199- ##### 2.2.3.3 packages (A)
1200-
1201- 定义低代码编辑器中加载的资源列表,包含公共库和组件 (库) cdn 资源等;
1202-
1203- | 字段 | 字段描述 | 字段类型 | 备注 |
1204- | ----------------------- | --------------------------------------------------- | --------------- | -------------------------------- |
1205- | packages[ ] .title? (A) | 资源标题 | String | 资源标题 |
1206- | packages[ ] .package (A) | npm 包名 | String | 组件资源唯一标识 |
1207- | packages[ ] .version(A) | npm 包版本号 | String | 组件资源版本号 |
1208- | packages[ ] .library(A) | 作为全局变量引用时的名称,用来定义全局变量名 | String | 低代码引擎通过该字段获取组件实例 |
1209- | packages[ ] .editUrls (A) | 组件编辑态视图打包后的 CDN url 列表,包含 js 和 css | Array\< String\> | 低代码引擎编辑器会加载这些 url |
1210- | packages[ ] .urls (AA) | 组件渲染态视图打包后的 CDN url 列表,包含 js 和 css | Array\< String\> | 低代码引擎渲染模块会加载这些 url |
1211-
1212- 描述举例:
1213-
1214- ``` json
1215- {
1216- "packages" : [
1217- {
1218- "package" : " moment" ,
1219- "version" : " 2.24.0" ,
1220- "urls" : [" https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" ],
1221- "library" : " moment"
1222- },
1223- {
1224- "package" : " lodash" ,
1225- "library" : " _" ,
1226- "urls" : [" https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" ]
1227- },
1228- {
1229- "title" : " fusion 组件库" ,
1230- "package" : " @alifd/next" ,
1231- "version" : " 1.24.18" ,
1232- "urls" : [
1233- " https://g.alicdn.com/code/lib/alifd__next/1.24.18/next.min.css" ,
1234- " https://g.alicdn.com/code/lib/alifd__next/1.24.18/next-with-locales.min.js"
1235- ],
1236- "library" : " Next"
1237- },
1238- {
1239- "package" : " @alilc/lowcode-materials" ,
1240- "version" : " 1.0.0" ,
1241- "library" : " AlilcLowcodeMaterials" ,
1242- "urls" : [
1243- " https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.0/dist/AlilcLowcodeMaterials.js" ,
1244- " https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.0/dist/AlilcLowcodeMaterials.css"
1245- ],
1246- "editUrls" : [
1247- " https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.0/build/lowcode/view.js" ,
1248- " https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.0/build/lowcode/view.css"
1249- ]
1250- },
1251- {
1252- "package" : " @alifd/fusion-ui" ,
1253- "version" : " 1.0.0" ,
1254- "library" : " AlifdFusionUi" ,
1255- "urls" : [
1256- " https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.0/build/lowcode/view.js" ,
1257- " https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.0/build/lowcode/view.css"
1258- ],
1259- "editUrls" : [
1260- " https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.0/build/lowcode/view.js" ,
1261- " https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.0/build/lowcode/view.css"
1262- ]
1263- }
1264- ]
1265- }
1266- ```
1267-
1268- ##### 2.2.3.4 components (A)
1269-
1270- 定义所有组件的描述协议列表,组件描述协议遵循本规范章节 2.2.2 的定义;
1271-
1272- ##### 2.2.3.5 sort (A)
1273-
1274- 定义组件列表分组
1275-
1276- | 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 |
1277- | ----------------- | -------- | -------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
1278- | sort.groupList | String[ ] | 组件分组,用于组件面板 tab 展示 | - | [ '精选组件', '原子组件'] |
1279- | sort.categoryList | String[ ] | 组件面板中同一个 tab 下的不同区间用 category 区分,category 的排序依照 categoryList 顺序排列 | - | [ '通用', '数据展示', '表格类', '表单类'] |
1280-
1281- ##### 2.2.3.6 TypeScript 定义
1282-
1283- ``` TypeScript
1284- export interface ComponentSort {
1285- groupList? : String []; // 用于描述组件面板的 tab 项及其排序,例如:["精选组件", "原子组件"]
1286- categoryList? : String []; // 组件面板中同一个 tab 下的不同区间用 category 区分,category 的排序依照 categoryList 顺序排列;
1287- }
1288-
1289- export interface Assets {
1290- version: string ; // 资产包协议版本号
1291- packages? : Array <Package >; // 大包列表,external与package的概念相似,融合在一起
1292- components: Array <ComponentDescription > | Array <RemoteComponentDescription >; // 所有组件的描述协议列表
1293- componentList? : ComponentCategory []; // 【待废弃】组件分类列表,用来描述物料面板
1294- sort: ComponentSort ; // 新增字段,用于描述组件面板中的 tab 和 category
1295- }
1296-
1297- export interface RemoteComponentDescription {
1298- exportName: string ; // 组件描述导出名字,可以通过 window[exportName] 获取到组件描述的 Object 内容;
1299- url: string ; // 组件描述的资源链接;
1300- package: { // 组件(库)的 npm 信息;
1301- npm: string ;
1302- }
1303- }
1304- ```
1305-
13061180## 3 物料规范 - 区块规范
13071181
13081182### 3.1 源码规范
@@ -1313,10 +1187,11 @@ export interface RemoteComponentDescription {
13131187
13141188``` html
13151189block/ ├── build │ ├── index.css // 【编译生成】 │ ├── index.html //
1316- 【编译生成】【必选】可直接预览文件 │ ├── index.js // 【编译生成】 │ └── views // 【3A
1317- 编译生成】html2sketch │ ├── block_view1.html // 【3A 编译生成】给 sketch 用的 html │ └──
1318- block_view1.png // 【3A 编译生成】截图 ├── src // 【必选】区块源码 │ ├── index.jsx // 【必选】入口 │
1319- └── index.module.scss // 【可选】如有样式请使用 CSS Modules 避免冲突 ├── README.md //
1190+ 【编译生成】【必选】可直接预览文件 │ ├── index.js // 【编译生成】 │ └──
1191+ views // 【3A 编译生成】html2sketch │ ├── block_view1.html // 【3A
1192+ 编译生成】给 sketch 用的 html │ └── block_view1.png // 【3A 编译生成】截图 ├──
1193+ src // 【必选】区块源码 │ ├── index.jsx // 【必选】入口 │ └── index.module.scss
1194+ // 【可选】如有样式请使用 CSS Modules 避免冲突 ├── README.md //
13201195【可选】无格式要求 └── package.json // 【必选】
13211196```
13221197
@@ -1471,23 +1346,28 @@ block_view1.png // 【3A 编译生成】截图 ├── src // 【必选】区
14711346与标准源码 build-scripts 对齐
14721347
14731348``` html
1474- ├── META/ # 低代码元数据信息,用于多分支冲突解决、数据回滚等功能 ├── build │ ├── index.css #
1475- 【编译生成】 │ ├── index.html # 【编译生成】【必选】可直接预览文件 │ ├── index.js # 【编译生成】
1476- │ └── views # 【3A 编译生成】html2sketch │ ├── page1.html # 【3A 编译生成】给 sketch 用的 html
1477- │ └── page1.png # 【3A 编译生成】截图 ├── public/ # 静态文件,构建时会 copy 到 build/ 目录 │ ├──
1478- index.html # 应用入口 HTML │ └── favicon.png # Favicon ├── src/ │ ├── components/ #
1479- 应用内的低代码业务组件 │ │ └── GuideComponent/ │ │ ├── index.js # 组件入口 │ │ ├── components.js #
1480- 组件依赖的其他组件 │ │ ├── schema.js # schema 描述 │ │ └── index.scss # css 样式 │ ├── pages/ # 页面
1481- │ │ └── HomePage/ # Home 页面 │ │ ├── index.js # 页面入口 │ │ └── index.scss # css 样式 │ ├──
1482- layouts/ │ │ └── BasicLayout/ # layout 组件名称 │ │ ├── index.js # layout 入口 │ │ ├── components.js
1483- # layout 组件依赖的其他组件 │ │ ├── schema.js # layout schema 描述 │ │ └── index.scss # layout css
1484- 样式 │ ├── config/ # 配置信息 │ │ ├── components.js # 应用上下文所有组件 │ │ ├── routes.js #
1485- 页面路由列表 │ │ └── constants.js # 全局常量定义 │ │ └── app.js # 应用配置文件 │ ├── utils/ # 工具库
1486- │ │ └── index.js # 应用第三方扩展函数 │ ├── stores/ # [可选] 全局状态管理 │ │ └── user.js │ ├──
1487- locales/ # [可选] 国际化资源 │ │ ├── en-US │ │ └── zh-CN │ ├── global.scss # 全局样式 │ └──
1488- index.jsx # 应用入口脚本,依赖 config/routes.js 的路由配置动态生成路由; ├── webpack.config.js #
1489- 项目工程配置,包含插件配置及自定义 `webpack` 配置等 ├── README.md ├── package.json ├── .editorconfig
1490- ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .stylelintignore └── .stylelintrc.js
1349+ ├── META/ # 低代码元数据信息,用于多分支冲突解决、数据回滚等功能 ├── build │
1350+ ├── index.css # 【编译生成】 │ ├── index.html #
1351+ 【编译生成】【必选】可直接预览文件 │ ├── index.js # 【编译生成】 │ └── views
1352+ # 【3A 编译生成】html2sketch │ ├── page1.html # 【3A 编译生成】给 sketch 用的
1353+ html │ └── page1.png # 【3A 编译生成】截图 ├── public/ # 静态文件,构建时会
1354+ copy 到 build/ 目录 │ ├── index.html # 应用入口 HTML │ └── favicon.png # Favicon
1355+ ├── src/ │ ├── components/ # 应用内的低代码业务组件 │ │ └── GuideComponent/ │ │
1356+ ├── index.js # 组件入口 │ │ ├── components.js # 组件依赖的其他组件 │ │ ├──
1357+ schema.js # schema 描述 │ │ └── index.scss # css 样式 │ ├── pages/ # 页面 │ │
1358+ └── HomePage/ # Home 页面 │ │ ├── index.js # 页面入口 │ │ └── index.scss # css
1359+ 样式 │ ├── layouts/ │ │ └── BasicLayout/ # layout 组件名称 │ │ ├── index.js #
1360+ layout 入口 │ │ ├── components.js # layout 组件依赖的其他组件 │ │ ├── schema.js
1361+ # layout schema 描述 │ │ └── index.scss # layout css 样式 │ ├── config/ #
1362+ 配置信息 │ │ ├── components.js # 应用上下文所有组件 │ │ ├── routes.js #
1363+ 页面路由列表 │ │ └── constants.js # 全局常量定义 │ │ └── app.js # 应用配置文件 │
1364+ ├── utils/ # 工具库 │ │ └── index.js # 应用第三方扩展函数 │ ├── stores/ # [可选]
1365+ 全局状态管理 │ │ └── user.js │ ├── locales/ # [可选] 国际化资源 │ │ ├── en-US │
1366+ │ └── zh-CN │ ├── global.scss # 全局样式 │ └── index.jsx # 应用入口脚本,依赖
1367+ config/routes.js 的路由配置动态生成路由; ├── webpack.config.js #
1368+ 项目工程配置,包含插件配置及自定义 `webpack` 配置等 ├── README.md ├──
1369+ package.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore
1370+ ├── .stylelintignore └── .stylelintrc.js
14911371```
14921372
14931373##### 入口文件
0 commit comments