alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.65k stars 2.55k forks source link

动态设置模拟器类型不生效 #1811

Closed gauseen closed 1 year ago

gauseen commented 1 year ago

Describe the bug (required) / 详细描述 bug(必填)

如下,设置初始模拟器类型,不生效

project.onSimulatorHostReady((simulator) => {
  simulator?.set('device', 'phone');
});

To Reproduce (required) / 如何复现 bug?(必填,非常重要)

git clone https://github.com/alibaba/lowcode-demo.git
cd demo-antd-pro-with-formily
tnpm i
tnpm start

在 src/plugin-component-panel/index.tsx 代码里增加 simulator?.set('device', 'phone') 逻辑,如下

import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';

const ComponentPanelPlugin = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      const { skeleton, project } = ctx;

      // 注册左边组件入口
      const componentsPane = skeleton.add({
        area: 'leftArea',
        type: 'PanelDock',
        name: 'componentsPane',
        content: ComponentsPane,
        contentProps: {},
        props: {
          align: 'top',
          icon: 'zujianku',
          description: '组件库',
        },
      });
      componentsPane?.disable?.();
      project.onSimulatorRendererReady(() => {
        componentsPane?.enable?.();
      });

      project.onSimulatorHostReady((simulator) => {
        simulator?.set('device', 'phone');
      });
    },
  };
};

ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin';
export default ComponentPanelPlugin;

Expected behavior (required) / 预期行为(必填,非常重要)

希望初始模拟器可配置移动类型

image


Screenshots (optional) / bug 截图(可选)

初始化设置模拟器为 phone 时不生效,模拟器画布依然很宽,不是移动端的画布

image


Environments (please complete the following information) (required): / 请提供如下信息(必填)

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息(可选)

Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题

gauseen commented 1 year ago
init(document.getElementById('lce-container')!, {
    device: 'phone',
    ...

这里设置即可