@@ -3,23 +3,57 @@ title: skeleton - 面板 API
33sidebar_position : 1
44---
55## 模块简介
6- 面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。<br /><br />页面上可以扩展的区域共 5 个，具体如下：<br />
6+ 面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。
7+
8+ ![ image.png] ( https://cdn.nlark.com/yuque/0/2022/png/110793/1645442085447-d1822e7f-9e5a-4e06-a770-04b1023d5daf.png#clientId=u9aca70b6-1a98-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=498&id=u2dd3deb2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=996&originWidth=1780&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1549904&status=done&style=none&taskId=u28659b69-981c-416e-bed6-b2f06b8e6fc&title=&width=890 )
9+
10+ 页面上可以扩展的区域共 5 个，具体如下：
11+ ![ image.png] ( https://cdn.nlark.com/yuque/0/2022/png/110793/1645431386085-2710d33d-0652-450a-a993-c804368da1ce.png#clientId=u1724eb73-4c0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=487&id=ud138f866&margin=%5Bobject%20Object%5D&name=image.png&originHeight=974&originWidth=1892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=228235&status=done&style=none&taskId=u265d50a5-3700-406e-84b2-0158ebadaae&title=&width=946 )
712### 基本概念
8- #### 扩展区域位置(area)
13+ #### 扩展区域位置 (area)
914##### topArea
10- 展示在设计器的顶部区域，常见的相关区域的插件主要是：<br />1）注册设计器 Logo；<br />2）设计器操作回退和撤销按钮；<br />3）全局操作按钮，例如：保存、预览等；
15+
16+ 展示在设计器的顶部区域，常见的相关区域的插件主要是：
17+ 1 . 注册设计器 Logo；
18+ 2 . 设计器操作回退和撤销按钮；
19+ 3 . 全局操作按钮，例如：保存、预览等；
1120##### leftArea
12- 左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。<br />该区域相关插件的主要有：<br />1）大纲树展示，展示该设计器设计页面的大纲。<br />2）组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。<br />3）数据源面板<br />4）JS 等代码面板。<br />可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
21+
22+ 左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。
23+
24+ 该区域相关插件的主要有：
25+ 1 . 大纲树展示，展示该设计器设计页面的大纲。
26+ 2 . 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。
27+ 3 . 数据源面板
28+ 4 . JS 等代码面板。
29+
30+ 可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
31+
1332##### centerArea
14- 画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：<br />1）画布大小修改<br />2）物料选中扩展区域修改
33+
34+ 画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：
35+ 1 . 画布大小修改
36+ 2 . 物料选中扩展区域修改
1537##### rightArea
38+
1639右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。
1740##### toolbar
41+
1842跟 topArea 类似，按需放置面板插件~
19- #### 展示类型(type)
20- 展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为PanelDock、Widget、Dock，另有Panel类型目前不推荐使用。
43+ #### 展示类型 (type)
44+
45+ 展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为 PanelDock、Widget、Dock，另有 Panel 类型目前不推荐使用。
2146##### PanelDock
22- PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。<br />下图是组件库插件的展示效果。<br />![ Feb-08-2022 19-44-15.gif] ( https://cdn.nlark.com/yuque/0/2022/gif/242652/1644320663827-ee9c54a1-f684-40e2-8a6b-875103d04b31.gif#clientId=u221f0bd4-c19e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=555&id=u5292d9cc&margin=%5Bobject%20Object%5D&name=Feb-08-2022%2019-44-15.gif&originHeight=790&originWidth=1536&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1381641&status=done&style=stroke&taskId=ub28a13a4-3d80-4a02-bcaa-cc9d6127243&title=&width=1080 ) <br />其中右上角可以进行固定，可以对弹出的宽度做设定<br />接入可以参考代码
47+
48+ PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。
49+
50+ 下图是组件库插件的展示效果。
51+
52+ ![ Feb-08-2022 19-44-15.gif] ( https://img.alicdn.com/imgextra/i2/O1CN01i66G5O27bK37nlpxV_!!6000000007815-1-tps-1536-790.gif )
53+
54+ 其中右上角可以进行固定，可以对弹出的宽度做设定
55+
56+ 接入可以参考代码
2357``` javascript
2458import { skeleton } from " @alilc/lowcode-engine"
2559
@@ -31,30 +65,35 @@ skeleton.add({
3165 props: {
3266 align: " left"
3367 icon: " wenjian"
34- description: " JS面板 "
68+ description: " JS 面板 "
3569 },
3670 panelProps: {
3771 floatable: true , // 是否可浮动
3872 height: 300 ,
3973 hideTitleBar: false ,
4074 maxHeight: 800 ,
4175 maxWidth: 1200 ,
42- title: " JS面板 "
76+ title: " JS 面板 "
4377 width: 600 ,
4478 },
4579});
4680```
4781##### Widget
48- Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。<br />![ image.png] ( https://cdn.nlark.com/yuque/0/2022/png/242652/1644320068765-47efc836-30c2-452f-8104-b98b1ea3533d.png#clientId=u221f0bd4-c19e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=51&id=P60UE&margin=%5Bobject%20Object%5D&name=image.png&originHeight=94&originWidth=1988&originalType=binary&ratio=1&rotation=0&showTitle=false&size=58410&status=done&style=stroke&taskId=u4eadd643-2e63-4be7-8736-b27b9c82b81&title=&width=1080 ) <br />接入可以参考代码：
82+ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。
83+
84+ ![ image.png] ( https://img.alicdn.com/imgextra/i3/O1CN01IRQIZp1m5AJPwBKDv_!!6000000004902-2-tps-1988-94.png )
85+
86+ 接入可以参考代码：
87+
4988``` javascript
5089import {skeleton } from " @alilc/lowcode-engine"
5190// 注册 logo 面板
5291skeleton .add ({
5392 area: " topArea"
5493 type: " Widget"
5594 name: " logo"
56- content: Logo, // Widget 组件实例
57- contentProps: { // Widget 插件props
95+ content: Logo, // Widget 组件实例
96+ contentProps: { // Widget 插件 props
5897 logo:
5998 " https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png"
6099 href: " /"
@@ -66,7 +105,9 @@ skeleton.add({
66105});
67106```
68107##### Dock
69- 一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景
108+
109+ 一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。
110+
70111``` javascript
71112import { skeleton } from " @alilc/lowcode-engine"
72113
@@ -75,7 +116,7 @@ skeleton.add({
75116 type: " Dock"
76117 name: " opener"
77118 content: Opener, // Widget 组件实例
78- contentProps: { // Widget 插件props
119+ contentProps: { // Widget 插件 props
79120 xxx: " 1"
80121 },
81122 props: {
@@ -89,11 +130,14 @@ skeleton.add({
89130 }
90131});
91132```
92- #### < br />
133+
93134## 变量（variables）
135+
94136无
95137## 方法签名（functions）
138+
96139### 1. add
140+
97141``` tsx
98142add (config : IWidgetBaseConfig & {
99143 area?: string ;
@@ -116,8 +160,6 @@ IWidgetBaseConfig 定义如下：
116160| index | 面板的位置，不传默认按插件注册顺序 | |
117161
118162
119-
120-
121163### 2. remove
122164
123165remove(config: IWidgetBaseConfig)
@@ -150,13 +192,17 @@ hideWidget(name: string)
150192
151193enableWidget(name: string)
152194
153- 将 widget 启用。<br />注：该函数将会触发全局事件 'skeleton.widget.enable'
195+ 将 widget 启用。
196+
197+ 注：该函数将会触发全局事件 'skeleton.widget.enable'
154198
155199### 8. disableWidget
156200
157201disableWidget(name: string)
158202
159- 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。<br />适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。
203+ 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。
204+
205+ 适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。
160206
161207## 事件（events）
162208### 1. onShowPanel
@@ -166,7 +212,8 @@ onShowPanel(listener: (...args: unknown[]) => void)
166212监听 Panel 实例显示事件
167213
168214### 2. onHidePanel
169- <br />onHidePanel(listener: (...args: unknown[ ] ) => void)
215+
216+ onHidePanel(listener: (...args: unknown[ ] ) => void)
170217
171218监听 Panel 实例隐藏事件
172219
@@ -177,10 +224,12 @@ onShowWidget(listener: (...args: unknown[]) => void)
177224监听 Widget 实例显示事件
178225
179226### 4. onHideWidget
180- <br />onHideWidget(listener: (...args: unknown[ ] ) => void)
227+
228+ onHideWidget(listener: (...args: unknown[ ] ) => void)
181229
182230监听 Widget 实例隐藏事件
183231## 使用示例
232+
184233``` typescript
185234import { skeleton } from ' @alilc/lowcode-engine'
186235
@@ -199,7 +248,7 @@ skeleton.add({
199248 props: {
200249 align: ' top'
201250 icon: ' wenjian'
202- description: ' JS面板 '
251+ description: ' JS 面板 '
203252 },
204253 panelProps: {
205254 floatable: true ,
@@ -208,7 +257,7 @@ skeleton.add({
208257 hideTitleBar: false ,
209258 maxHeight: 800 ,
210259 maxWidth: 1200 ,
211- title: ' JS面板 '
260+ title: ' JS 面板 '
212261 width: 600 ,
213262 },
214263 content: SourceEditor ,
0 commit comments