Skip to content

Commit 8652bba

Browse files
author
mazhaobo
committed
refactor(components-pane): 适配新引擎版本并优化组件面板
- 更新 API 适配以支持最新引擎版本 - 移除旧版本引擎的兼容代码 - 优化组件列表初始化逻辑 - 调整事件监听注册方式 - 更新样式和脚本引用
1 parent a5ae1ee commit 8652bba

File tree

9 files changed

+35
-202
lines changed

9 files changed

+35
-202
lines changed

‎packages/plugin-components-pane/demo/component.md‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/plugin-components-pane/demo/demo.hbs‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/plugin-components-pane/demo/epoch.md‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/plugin-components-pane/demo/index.scss‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/plugin-components-pane/demo/usage.md‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎packages/plugin-components-pane/package.json‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@felce/lowcode-plugin-components-pane",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "低代码组件面板",
55
"files": [
66
"dist"
@@ -29,19 +29,10 @@
2929
"plugin",
3030
"components"
3131
],
32-
"authors": [
33-
{
34-
"name": "gray.wjf"
35-
},
36-
{
37-
"name": "金禅"
38-
}
39-
],
4032
"license": "ISC",
4133
"dependencies": {
4234
"@alifd/next": "^1.27.30",
43-
"@felce/lowcode-types": "^1.5.0-beta.4",
44-
"@felce/lowcode-engine": "^1.5.0-beta.4",
35+
"@felce/lowcode-types": "latest",
4536
"classnames": "^2.5.1",
4637
"lodash.debounce": "^4.0.8",
4738
"react": "^18.3.1",

‎packages/plugin-components-pane/src/index.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,32 @@ import ComponentsPane from './pane';
33
const ComponentPanelPlugin = (ctx: IPublicModelPluginContext) => {
44
return {
55
async init() {
6-
const { skeleton, project } = ctx;
6+
const { skeleton, common, event, material, project } = ctx;
77
// 注册组件面板
88
const componentsPane = skeleton.add({
99
area: 'leftArea',
1010
type: 'PanelDock',
1111
name: 'componentsPane',
12-
content: ComponentsPane,
13-
contentProps: {},
12+
content: [
13+
{
14+
name: 'componentsPane',
15+
type: 'Panel',
16+
contentProps: {
17+
common,
18+
event,
19+
material,
20+
project,
21+
},
22+
content: ComponentsPane,
23+
},
24+
],
1425
props: {
1526
align: 'top',
1627
icon: 'zujianku',
1728
description: '组件库',
1829
},
1930
});
31+
2032
componentsPane?.disable?.();
2133
project.onSimulatorRendererReady(() => {
2234
componentsPane?.enable?.();

‎packages/plugin-components-pane/src/pane/index.tsx‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Search } from '@alifd/next';
2-
import { common, event, material, project } from '@felce/lowcode-engine';
32
import { PluginProps } from '@felce/lowcode-types';
43
import cls from 'classnames/bind';
54
import debounce from 'lodash.debounce';
@@ -20,8 +19,6 @@ import transform, {
2019
} from '../utils/transform';
2120
import style from './index.module.scss';
2221

23-
const isNewEngineVersion = !!material;
24-
2522
const store = new ComponentManager();
2623

2724
const cx = cls.bind(style);
@@ -110,35 +107,29 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
110107
}
111108

112109
componentDidMount() {
113-
const { editor } = this.props;
110+
const { editor, event, material } = this.props;
114111
if (!editor) {
115112
this.initComponentList();
116113
return;
117114
}
118-
const assets = isNewEngineVersion ? material.getAssets() : editor.get('assets');
115+
const assets = material.getAssets();
119116
if (assets) {
120117
this.initComponentList();
121118
} else {
122119
console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.');
123120
}
124121

125-
if (isNewEngineVersion) {
126-
event.on('trunk.change', this.initComponentList.bind(this));
127-
material.onChangeAssets(this.initComponentList.bind(this));
128-
} else {
129-
editor.on('trunk.change', this.initComponentList.bind(this));
130-
editor.once('editor.ready', this.initComponentList.bind(this));
131-
editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this));
132-
}
122+
event.on('trunk.change', this.initComponentList.bind(this));
123+
material.onChangeAssets(this.initComponentList.bind(this));
133124
}
134125

135126
/**
136127
* 初始化组件列表
137128
* TODO: 无副作用，可多次执行
138129
*/
139130
initComponentList() {
140-
const { editor } = this.props;
141-
const rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets');
131+
const { material } = this.props;
132+
const rawData = material.getAssets();
142133

143134
const meta = transform(rawData, this.t);
144135

@@ -170,10 +161,9 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
170161
return null;
171162
}
172163

173-
const { editor } = this.props;
174-
const designer = !isNewEngineVersion ? editor?.get('designer') : null;
175-
const _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer?.dragon;
176-
if (!_dragon || (!isNewEngineVersion && !designer)) {
164+
const { common, project } = this.props;
165+
const _dragon = common.designerCabin.dragon;
166+
if (!_dragon) {
177167
return;
178168
}
179169

@@ -183,7 +173,7 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
183173
shell.addEventListener('click', click);
184174

185175
_dragon.from(shell, (e: Event) => {
186-
const doc = isNewEngineVersion ? project.getCurrentDocument() : designer?.currentDocument;
176+
const doc = project.getCurrentDocument();
187177
const id = getSnippetId(e.target);
188178
if (!doc || !id) {
189179
return false;

‎packages/plugin-components-pane/vite.config.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import { libInjectCss } from 'vite-plugin-lib-inject-css';
66

77
export default defineConfig({
88
plugins: [
9-
// external({
10-
// externals: {
11-
// react: 'React',
12-
// },
13-
// }),
9+
external({
10+
development: {
11+
externals: {
12+
react: 'React',
13+
},
14+
},
15+
}),
1416
React({}),
1517
dts(),
1618
libInjectCss(),
@@ -31,7 +33,7 @@ export default defineConfig({
3133
output: {
3234
exports: 'named',
3335
},
34-
external: ['react', '@alifd/next', '@felce/lowcode-types', '@felce/lowcode-engine'],
36+
external: ['react', '@alifd/next', '@felce/lowcode-types'],
3537
},
3638
},
3739
css: {

0 commit comments

Comments
 (0)