@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.9-beta.5

package/src/domain/BaseProjectDomain.ts

@@ -0,0 +1,1341 @@
+import { getImageUrls, getSchemaConfigByValue } from '../utils';
+import { getObjectPath } from '../utils/transform'
+import type {
+  ImageUrlResponse,
+  NavTreeData,
+  SchemaData,
+  Component,
+  ComponentTreeData,
+  ComponentItem,
+  MenuData,
+  Project,
+  GroupTree,
+  ComponentTree,
+  LowCodeKey,
+  ProjectData,
+  FunctionData,
+  FunctionConfig,
+  EditorConfig,
+} from '@jt/low-code-core';
+
+import { ComponentType } from '@jt/low-code-core';
+import { navTreeKey, componentTreeKey } from '../domain/ProjectDomain';
+import {
+  cloneDeep,
+  get,
+  isEqual,
+  set,
+  toPlainObject,
+  merge,
+  isEmpty,
+  log,
+} from '@jt/ark-util';
+import { decodeContent } from 'jm-jsruntime';
+
+import { getSchemaObjectAttribute } from '../utils';
+import { tipIcon } from '../utils/base64';
+import { transform } from '../utils/transform';
+import ComponentManager from './ComponentManager';
+const logTag = '[low-code-preview BaseProjectDomain]';
+const logInfo = log(logTag);
+
+/**
+ * @public
+ */
+export interface ProjectDomainState {
+  basePath?: string;
+  project: Project;
+  pageConfig: Record<string, any>; // 页面配置表单schema
+  componentConfigs: Component[]; // 组件配置表单schema
+  groupConfig: GroupTree[]; // 分组配置
+  functionConfig: FunctionConfig; //header配置
+}
+import ProjectDomain from '../domain/ProjectDomain';
+const statusOptions = {
+  0: '编辑中',
+  1: '已发布',
+  2: '已下线',
+  3: '审核中',
+  4: '发布失败',
+};
+/**
+ * @public
+ */
+export default class BaseProjectDomain extends ProjectDomain {
+
+  /**
+   *  @public
+   *  获取配置
+   */
+  get config(): EditorConfig {
+    const { navTreeData, componentTreeData, schemaData, functionData } = this;
+    return {
+      navTreeData: {
+        key: navTreeKey,
+        value: navTreeData,
+      },
+      componentTreeData: {
+        key: componentTreeKey,
+        value: componentTreeData,
+      },
+      functionData,
+      schemaData,
+    };
+  }
+  /**
+   * @public
+   */
+  staticPath = 'components.0.list';
+  /**
+   * @public
+   */
+  currentPageIndex = 0; // 当前编辑页面索引
+  /**
+   * @public
+   */
+  currentComponentPath = ''; // 当前编辑组件索引路径
+  // 这里的schema需要读取配置文件
+  /**
+   * @public
+   */
+  cManager: ComponentManager;
+
+  /**
+   *  @public
+   */
+  get basePath() {
+    return `${this.currentPageIndex}.${this.staticPath}`;
+  }
+  /**
+  *  @public
+  */
+  constructor(state: ProjectDomainState) {
+    super();
+    this.state = state;
+    // this.basePath = state.basePath || this.basePath;
+    this.cManager = ComponentManager.getInstance(state.componentConfigs);
+    this.setProject(state.project);
+  }
+
+
+  // generateComponentPath(id: number): string {
+  //     const index = this.components.findIndex(item=>item.componentId === id);
+  //     const paths =  index !== -1 ? `0.components.0.list.${index}` : ''
+  //     return paths;
+  // }
+  /**
+   * @public
+   */
+  private Id2ComponentPathMap = {};
+  /**
+   * 根据id在pages中找到组件 生成componentPath
+   * @param id - 组件ID
+   * @returns 组件路径
+   * @example
+   * const pages = [{components:[{list:[{componentId:1}]}]}];
+   * const componentId = 1;
+   * generateComponentPath(componentId)
+   * // => 0.components.0.list.0
+   */
+  /**
+ * @public
+ */
+  generateComponentPath(id: number, pageIndex?: number): string {
+    let componentPath = this.Id2ComponentPathMap[id];
+    if (componentPath) {
+      // 由于组件位置可能变化，所以这里要确认一下
+      const component = this.pathToData(componentPath);
+      if (component && component.componentId === id) {
+        return componentPath;
+      }
+    }
+
+    const paths = pageIndex !== undefined ? [pageIndex, this.staticPath] : [this.basePath];
+    const findComponent = (list: ComponentItem[]) => {
+      for (const i in list) {
+        const item = list[i];
+        if (item.componentId === id) {
+          paths.push(i);
+          return true;
+        } else if (item.children && item.children.length) {
+          paths.push(i, 'children');
+          if (findComponent(item.children as ComponentItem[])) {
+            return true;
+          }
+          // 未找到 删除最后两个
+          paths.splice(-2, 2);
+        }
+        //  else if (item.slot) {
+        //   const keys = Object.keys(item.slot);
+        //   if(keys.length){
+        //     for(let key of keys){
+        //       if (item.slot[key]?.componentId === id) {
+        //         paths.push(i, 'slot', key);
+        //         return true;
+        //       }
+        //     }
+
+        //   }
+        // }
+      }
+    };
+
+    if (findComponent(this.components)) {
+      componentPath = paths.join('.');
+      this.Id2ComponentPathMap[id] = componentPath;
+      return componentPath;
+    }
+    return '';
+  }
+
+  /**
+   * @public
+   * 获取父组件数据
+   * @param childPath - 子组件路径
+   * @returns 父组件数据
+   */
+  getParent(childPath?: string): number | null {
+    childPath = childPath || this.currentComponentPath;
+    if (childPath) {
+      const { parentComponentPath } = this.getIndexByKey(childPath);
+      if (parentComponentPath) {
+        return this.pathToData(parentComponentPath);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * @public
+   * 更新数据
+   * @param oldProject - 旧Project
+   * @returns true 新增记录  false 更新记录
+   */
+  needUpdateHistory(oldProject): boolean {
+    const { projectData } = oldProject;
+    let currentComponentPath = oldProject.currentComponentPath;
+    if (!projectData || !currentComponentPath) {
+      return false;
+    }
+
+    if (!currentComponentPath.includes('.')) {
+      // 如果，当前导航在页面上
+      // 新增页面兼容处理，页面配置formData初始为空，新增页面会设置默认值
+      const pageMeta = projectData?.pages[0]?.pageMeta;
+      if (isEmpty(pageMeta)) {
+        Object.assign(pageMeta, this.pageMeta);
+        return true;
+      }
+    }
+    if (this?.currentComponent?.immobile) {
+      const { parentComponentPath } = this.getIndexByKey(this.currentComponentPath);
+      currentComponentPath = parentComponentPath;
+    }
+    const oldComponentData = this.pathToData(
+      currentComponentPath,
+      projectData.pages
+    );
+    if (!(oldComponentData)) {
+      return false;
+    }
+
+    const newComponentData = this.pathToData(currentComponentPath);
+    // 点击新增组件先click新增历史记录，后form表单更新set新增历史记录
+    // 如果新组件的formData路径比旧的多于1个（1个可能是修改了值）则表示点击新增组件还没有到表单更新默认值
+    // 同时currentComponent有值，表示是表单更新设置值
+    if (isEqual(oldComponentData, newComponentData) || getObjectPath(oldComponentData.formData).length < getObjectPath(newComponentData?.formData).length - 1) {
+      Object.assign(oldComponentData, newComponentData);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @public
+   * 根据组件路径获取组件位置、组件所在列表路径、组件父组件路径以及组件数据
+   * @param path - 组件路径
+   * @returns
+   * @example
+   */
+  getIndexByKey(path: string): {
+    index: number;
+    pageIndex: number;
+    componentListPath: string;
+    parentComponentPath: string;
+    component: ComponentItem;
+  } {
+    const paths = path ? path.split('.') : [];
+    const hasContainer = path.includes('children');
+    return {
+      index: path ? +paths.slice(-1) : -1,
+      pageIndex: path ? +paths.slice(0, 1) : -1,
+      componentListPath: hasContainer
+        ? paths.slice(0, -1).join('.')
+        : this.basePath,
+      parentComponentPath: hasContainer ? paths.slice(0, -2).join('.') : null,
+      component: this.pathToData(path),
+    };
+  }
+
+  /**
+   * @public
+   * 判断是否符合插入容器组件的条件
+   * @param child - 子容器组件配置
+   * @param container - 容器组件数据
+   * @returns
+   * @example
+   */
+  canInsertContainer(child: Component, container: ComponentItem) {
+    const insertConfig =
+      container.insertConfig || this.cManager.get(container.name).insertConfig;
+    let errorMessage = '';
+    const context = { componentName: child.title };
+    if (!insertConfig?.allowList) {
+      return true;
+    }
+    // 判断该组件是否在允许拖入容器的组件范围
+    if (!insertConfig?.allowList?.includes(child.name)) {
+      errorMessage = decodeContent(insertConfig?.allowErrorMessage, {
+        params: context,
+      });
+    }
+    // 判断该组件是否在单独占据容器的组件范围
+    if (insertConfig?.aloneList.includes(child.name)) {
+      // 判断容器内是否存在组件
+      if (container?.children?.length) {
+        errorMessage = decodeContent(insertConfig.aloneErrorMessage, {
+          params: context,
+        });
+      }
+    } else {
+      // 判断容器内是否存在单独占据容器的组件
+      const aloneComponent = (container.children as ComponentItem[]).find(c =>
+        insertConfig?.aloneList.includes(c.name)
+      );
+      if (aloneComponent) {
+        errorMessage = decodeContent(insertConfig?.aloneErrorMessage, {
+          params: { componentName: aloneComponent.title },
+        });
+      }
+    }
+    if (errorMessage) {
+      this.publishEditor(
+        'action',
+        toPlainObject({
+          key: 'error',
+          value: errorMessage,
+        })
+      );
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * @public
+   * @param name - 组件名
+   * @param data - 数据
+   */
+  action(name: string, data: any): void {
+    try {
+      console.log('action:', name, data);
+      if ('componentListSplice' === name) {
+        this.componentListSplice(data.insertIndex,
+          data.deleteNum,
+          // 不需要this.cManager.copy, 管理端复制的时候已经设置
+          data.component,
+          data.componentListPath,
+        );
+        // 因为maxId不一样了,需要重新init
+        this.cManager.initComponens(this.components);
+      }
+    } catch (error) {
+      console.log('action error:', error);
+    }
+  }
+  /**
+   * @public
+   */
+  get title() {
+    const { categoryName, projectName } = this.state.project || {};
+    return (categoryName ? `${categoryName}/` : '') + projectName || '';
+  }
+  /**
+ * @public
+ */
+  get isNoLogin() {
+    return this.state.project?.isNoLogin ?? false;
+  }
+  /**
+   * @public
+   */
+  get pages(): ProjectData {
+    return this.state.project?.pages ?? [];
+  }
+  /**
+   * @public
+   */
+  get components(): ComponentItem[] {
+    return this.pages?.[this.currentPageIndex]?.components?.[0]?.list ?? [];
+  }
+
+  /**
+ * @public
+ * 含包含config的数据
+ */
+  get componentsWithConfig() {
+    const joinConfig = (c: ComponentItem) => {
+      const comp = cloneDeep({
+        ...this.cManager.get(c.name),
+        ...c,
+      });
+      if (comp.children?.length) {
+        comp.children = comp.children.map(joinConfig);
+      }
+      return comp;
+    }
+    return this.components.map(joinConfig);
+  }
+
+  /**
+   *  @public
+   */
+  get pageMeta() {
+    return this.state.project?.pages?.[this.currentPageIndex]?.pageMeta ?? {};
+  }
+  //ComponentItem
+  /**
+  *  @public
+  */
+  get currentComponent(): any {
+    return this.currentComponentPath
+      ? this.pathToData(this.currentComponentPath)
+      : null;
+  }
+  /**
+  *  @public
+  *  获取导航树数据
+  */
+  get navTreeData(): NavTreeData[] {
+    let navTreeData: NavTreeData[] = [];
+    // 根据path确定激活的组件
+    const activatedComponentId = this.currentComponent?.componentId;
+    const buildOptions = (list: ComponentItem[]): NavTreeData[] => {
+      const treeData: NavTreeData[] = [];
+      list.forEach((c, index) => {
+        const name = c.name;
+        const schema = this.cManager.get(name);
+        const path = this.generateComponentPath(c.componentId);
+        let title = c.title || schema.title;
+        if (schema.immobile) {
+          title = schema.title + (index + 1);
+        }
+        const tree: NavTreeData = {
+          title,
+          // path是对应组件数据的路径 可以用dot-object包映射到对应的组件数据
+          key: {
+            module: 'navTree',
+            action: 'activate',
+            component: name,
+            path,
+          },
+          type: c.type,
+          icon: c.icon || schema.icon,
+          immobile: schema.immobile,
+          // 当前激活的组件activity为true
+          activity: c.componentId === activatedComponentId ? true : false,
+
+          componentId: c.componentId, // 导航树需要显示组件ID
+        };
+        if (!schema.immobile) {
+          tree.rightIcon = {
+            icon: 'Delete',
+            key: {
+              module: 'menu',
+              action: 'componentDeleteWithConfirm',
+              component: name,
+              path,
+            },
+          };
+        }
+
+        // 如果组件数据有children
+        if (c.children && c.children.length) {
+          tree.children = buildOptions(c.children as ComponentItem[]);
+        }
+        treeData.push(tree);
+      });
+      return treeData;
+    };
+    // 没有添加组件时 默认返回空树 有组件时生成组件树
+    if (this.state.project.pages) {
+      this.state.project.pages.forEach((page, idx) => {
+        const path = idx + '';
+        const tree: NavTreeData = {
+          title: page.title || '页面内容',
+          key: { module: 'navTree', action: 'activate', path },
+          icon: '', // TODO:
+          activity:
+            this.currentComponentPath === path && this.currentPageIndex === idx
+              ? true
+              : false,
+        };
+        tree.children = buildOptions(page.components[0].list);
+        navTreeData.push(tree);
+      });
+    }
+    return navTreeData;
+  }
+  /**
+   * @public
+   * 获取当前配置表单数据
+   */
+  get schemaData(): SchemaData {
+    if (!this.state.project.pages) {
+      // 未初始化
+      return {};
+    }
+    // 若为免登录 过滤事件和中间件
+    const filterEvents = (eventConfig: any) => {
+      Object.keys(eventConfig ?? {}).forEach(key => {
+        // 过滤掉isNoLogin为false的情况 如果事件和中间件没增加免登录配置 则isNoLogin默认为false！！
+        try {
+          if (key === 'handler' && eventConfig[key]) {
+            eventConfig[key].properties.name.enum = eventConfig[
+              key
+            ].properties.name.enum.filter(item => item.isNoLogin);
+          } else if (key === 'middlewares' && eventConfig[key]) {
+            eventConfig[key].items.properties.name.enum = eventConfig[
+              key
+            ].items.properties.name.enum.filter(it => it.isNoLogin);
+          }
+        } catch (error) {
+          console.log('schemaData', error);
+        }
+      });
+    };
+
+    // 没有选中组件或选中组件不存在 默认返回页面表单数据
+    if (!this.pathToData(this.currentComponentPath)?.componentId) {
+      const schemaConfig = cloneDeep(this.state.pageConfig);
+      if (this.isNoLogin) {
+        const eventConfig = getSchemaObjectAttribute(schemaConfig, 'event');
+        if (eventConfig) filterEvents(eventConfig?.properties);
+      }
+      return {
+        key: {
+          module: 'schema',
+          action: 'setPathDataWithValidate',
+          path: this.currentPageIndex + '.pageMeta',
+        },
+        title: '页面信息',
+        schema: schemaConfig,
+        data: cloneDeep(this.pageMeta),
+      };
+    }
+
+    // 选中组件 返回对应组件表单数据 -> 根据path找到组件
+    let component = this.currentComponent;
+    //为自创建组件，则用父组件的配置项
+    if (component.immobile) {
+      const parentComponent = this.getParent();
+      if (parentComponent) {
+        component = parentComponent;
+      }
+    }
+    const componentSchema = this.cManager.get(component?.name);
+    if (!componentSchema) return {};
+
+    let schemaConfig: any = cloneDeep(componentSchema.config);
+    if (this.isNoLogin) {
+      const eventConfig = getSchemaObjectAttribute(schemaConfig, 'event');
+      if (eventConfig) {
+        filterEvents(eventConfig?.properties?.list?.items?.properties);
+      }
+      // 热区
+      const hotAreaConfig = getSchemaObjectAttribute(schemaConfig, 'hotArea');
+      if (hotAreaConfig) {
+        filterEvents(
+          hotAreaConfig?.['ui:options']?.event?.properties?.list?.items
+            ?.properties
+        );
+      }
+      // 如果当前非免登录组件被隐藏了 右侧区域的配置为空
+      // if (!component.isNoLogin) return {};
+    }
+
+    // 替换配置中的占位词
+    schemaConfig = transform(schemaConfig, this.getFlagWordMap());
+
+    return {
+      key: {
+        module: 'schema',
+        action: 'setPathDataWithValidate',
+        component: component.name,
+        path: this.generateComponentPath(component.componentId) + '.formData',
+      },
+      title: '基础配置',
+      schema: schemaConfig,
+      data: cloneDeep(component?.formData),
+      componentId: component?.componentId,
+    };
+  }
+  /**
+   * @public
+   * 获取组件树数据
+   */
+  get componentTreeData(): ComponentTreeData {
+    const componentTree: ComponentTreeData = [];
+
+    const buildTree = (groupList: GroupTree[], trees: ComponentTree[]) => {
+      groupList.forEach((v, i) => {
+        trees.push({
+          title: v.name,
+          list: [],
+        });
+        if (v.children) {
+          buildTree(v.children, trees[i].list as ComponentTree[]);
+        } else {
+          trees[i].list = [
+            ...this.state.componentConfigs
+              .filter(
+                c =>
+                  c.group === v.name &&
+                  (!this.isNoLogin || (this.isNoLogin && c.isNoLogin)) &&
+                  !c.invalid
+              )
+              .map(c => ({
+                title: c.title,
+                icon: c.icon as string,
+                name: c.name,
+                type: c.type,
+                isNoLogin: c.isNoLogin,
+                guideConfig: c?.guideConfig || {},
+                key: {
+                  module: 'componentTree',
+                  action: 'componentInsert',
+                  component: c.name,
+                },
+              })),
+          ];
+        }
+      });
+    };
+    buildTree(this.state.groupConfig, componentTree);
+    return componentTree;
+  }
+  /**
+   * @public
+   * 获取右键菜单数据 没有考虑有容器组件的情况
+   */
+  get menuData(): MenuData {
+    if (!this.currentComponentPath) {
+      return [];
+    }
+    const component = this.currentComponent;
+    //为自创建组件，不展示右键菜单
+    if (component.immobile) {
+      return [];
+    }
+    const key = (action: string) => ({
+      module: 'menu',
+      action,
+      component: component?.name,
+      path: this.currentComponentPath,
+    });
+    const menus: MenuData = [
+      {
+        key: key('setPathData'),
+        title: '重命名',
+        color: '#666666',
+      },
+      {
+        key: key('componentCopy'),
+        title: '复制组件',
+        color: '#666666',
+      },
+
+      {
+        key: key('componentDeleteWithConfirm'),
+        title: '删除组件',
+        color: '#c16e6c',
+      },
+    ];
+    const { index, componentListPath } = this.getIndexByKey(
+      this.currentComponentPath
+    );
+    const length = get(this.pages, componentListPath).length;
+    if (length > 1) {
+      if (index != 0) {
+        menus.push({
+          key: key('componentMoveUp'),
+          title: '组件上移',
+          color: '#666666',
+        });
+      }
+      if (index != length - 1) {
+        menus.push({
+          key: key('componentMoveDown'),
+          title: '组件下移',
+          color: '#666666',
+        });
+      }
+    }
+    // 单图片组件添加一个上传图片的icon菜单放在第一位
+    if (component.name === 'ComponentImage') {
+      menus.unshift({
+        key: key('componentImageOpen'),
+        title: '上传图片',
+        color: '#666666',
+      });
+    }
+    return menus;
+  }
+
+  /**
+   * @public
+   * 生成占位词对应的真实数据
+   * @param index - 校验时需要传入的组件位置
+   * @returns
+   */
+  // 所有组件的选择器选项（不包括当前组件）
+  getComponentSelectors(index?: number): { label: string; value: string }[] {
+    return this.components
+      .filter(
+        (cc, i) =>
+          (index !== undefined
+            ? index !== i
+            : cc.componentId !== this.currentComponent?.componentId) ||
+          !this.cManager.get(cc.name)?.unlinkable
+      )
+      .map(c => ({ label: c.title, value: `${c.name}-${c.componentId}` }));
+  }
+
+  /**
+   *  @public
+   * 当前组件之后的选择器选项（不包括当前组件）
+   * @param index - 下标
+   * @returns 
+   */
+  getAfterComponentSelectors(
+    index?: number
+  ): { label: string; value: string }[] {
+    const currentIndex =
+      index !== undefined
+        ? index
+        : this.components.findIndex(
+          c => c.componentId === this.currentComponent?.componentId
+        );
+    // 若未找到当前组件或者当前组件是最后一个组件 则返回空数组
+    if (currentIndex === -1 || currentIndex === this.components.length - 1)
+      return [];
+    const availableComponents = this.components.slice(currentIndex + 1);
+    return availableComponents
+      .filter(cc => !this.cManager.get(cc.name)?.unlinkable)
+      .map(c => ({ label: c.title, value: `${c.name}-${c.componentId}` }));
+  }
+
+  /**
+   * @public
+   * 占位词映射表
+   * @param index - 下标
+   * @returns 
+   */
+  getFlagWordMap(index?: number) {
+    return {
+      $componentSelectors: this.getComponentSelectors(index),
+      $afterComponentSelectors: this.getAfterComponentSelectors(index),
+      $componentId: this.currentComponent?.componentId || this.components[index]?.componentId,
+      $componentName: this.currentComponent?.name || this.components[index]?.name,
+      $components: this.components
+    };
+  }
+
+  /**
+   * @public
+   * 激活导航树
+   * @param key - 组件LowCodeKey
+   */
+  activate(key: LowCodeKey): void {
+    // 设置索引
+    this.currentComponentPath = key.path as string;
+  }
+
+  /**
+   * @public
+   * 生成编辑器删除操作二次确认弹出框所需的数据
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentDeleteWithConfirm(key: LowCodeKey) {
+    if (!key.path) {
+      return;
+    }
+    const component = this.pathToData(key.path);
+    const value = {
+      type: 'warning',
+      title: '提示',
+      schema: {
+        type: 'object',
+        properties: {
+          text: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'PreviewText.Input',
+            default: `是否删除组件: ${component.title}`,
+          },
+        },
+      },
+      confirmButton: {
+        text: '确认',
+        key: {
+          module: 'menu',
+          component: component.name,
+          action: 'componentDelete',
+          path: key.path,
+        },
+      },
+      cancelButton: {
+        text: '取消',
+      },
+    };
+    this.publishEditor('action', toPlainObject({ key: 'confirm', value }));
+  }
+  /**
+   * @public
+   * 组件列表元素处理
+   * @param start - 组件插入的位置
+   * @param deleteNum - 删除的组件个数
+   * @param item - 组件数据
+   * @param componentListPath - 组件所在列表的路径
+   * @returns
+   * @example
+   */
+  componentListSplice(
+    start: number,
+    deleteNum: number,
+    item?: ComponentItem | Component,
+    componentListPath?: string
+  ) {
+    const components = componentListPath
+      ? get(this.pages, componentListPath)
+      : this.components;
+    // 插入操作
+    if (deleteNum === 0 && componentListPath && /\.children$/.test(componentListPath)) {
+      // 容器组件
+      if (!this.canInsertContainer(item, this.pathToData(componentListPath.replace(/\.children$/, '')))) return;
+    }
+    let deleteList = [];
+    if (item) {
+      deleteList = components.splice(
+        start,
+        deleteNum,
+        this.cManager.buildItemData(item)
+      );
+      this.currentComponentPath = componentListPath
+        ? `${componentListPath}.${start}`
+        : `${this.basePath}.${start}`;
+    } else {
+      deleteList = components.splice(start, deleteNum);
+    }
+    return deleteList;
+  }
+
+  /**
+   * @public
+   * 移动组件到某个位置
+   * @param originPath - 原路径
+   * @param newPath - 目标路径
+   * @example
+   * moveTo('0.components.0.list.0', '0.components.0.list.1')
+   **/
+  moveTo(originPath, newPath) {
+    console.log('moveTo', originPath, newPath);
+    const originPathMap = this.getIndexByKey(originPath);
+    let newPathhMap = this.getIndexByKey(newPath);
+    if (newPathhMap.component && newPathhMap.component?.immobile) {
+      // newPath = '0.components.0.list.0.children.0' 的场景 
+      // 避免插在tab容器中间
+      if (newPathhMap.component.type === ComponentType.Container) {
+        newPathhMap = this.getIndexByKey(newPath + '.children.0');
+      } else {
+        newPathhMap = this.getIndexByKey(newPath.replace('\.children.\d+$', ''));
+      }
+    }
+    const targetParentPath = newPathhMap.parentComponentPath;
+    const component = originPathMap.component;
+    let container;
+    console.log('newPath', newPath, targetParentPath)
+    if (targetParentPath) {
+      container = this.getIndexByKey(targetParentPath).component;
+      if (container && !this.canInsertContainer(component, container)) {
+        this.publishEditor('action', toPlainObject({ key: 'forceUpdate' }));
+        return;
+      }
+    }
+
+    // 删除被移动的组件（必须是先删除再插入，不然可能导致混乱。）
+    this.componentListSplice(
+      originPathMap.index,
+      1,
+      undefined,
+      originPathMap.componentListPath
+    );
+    let afterMoveComponentListPath = newPathhMap.componentListPath;
+    // 删除后可能导致路径发生变化，需重新计算目标路径
+    // 重新获取组件路径
+    if (container) {
+      // 插入到容器中
+      const afterMoveComponentPath = this.generateComponentPath(
+        container.componentId
+      );
+      afterMoveComponentListPath = `${afterMoveComponentPath}.children`;
+    }
+    // 在新组件列表中插入被移动的组件
+    this.componentListSplice(
+      newPathhMap.index,
+      0,
+      component,
+      afterMoveComponentListPath
+    );
+    console.log(this.components);
+  }
+
+  /**
+   * @public
+   * 删除组件
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentDelete(key: LowCodeKey): void {
+    if (!key?.path) {
+      return;
+    }
+    const { index, componentListPath, component } = this.getIndexByKey(
+      key.path
+    );
+    if (index === -1) return;
+    // 清除当前索引
+    this.currentComponentPath = '';
+    this.componentListSplice(index, 1, undefined, componentListPath);
+    // 若计数为0则重新计数 只针对有单独配置的对象
+    const recount = (component: ComponentItem) => {
+      this.cManager.delete(component.name);
+      ((component.children as ComponentItem[]) || []).forEach(c => recount(c));
+    };
+    recount(component);
+  }
+
+  /**
+   * @public
+   * 复制组件
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentCopy(key: LowCodeKey): void {
+    if (!key?.path) {
+      return;
+    }
+    const { index, componentListPath, component } = this.getIndexByKey(
+      key.path
+    );
+    if (index === -1) return;
+    const componentConfig = this.cManager.get(component.name)
+    // 是否走自定义拷贝
+    if (componentConfig?.customCopy) {
+      this.publishEditor('message', {
+        type: 'copy',
+        data: {
+          component,
+          newId: this.cManager.getImxId() + 1,
+          componentListPath,
+          insertIndex: index + 1,
+          deleteCount: 0,
+        },
+      });
+    } else {
+      this.componentListSplice(
+        index + 1,
+        0,
+        this.cManager.copy(component),
+        componentListPath
+      );
+    }
+  }
+
+  /**
+   * @public
+   * 拖动组件
+   * @param key - 组件LowCodeKey
+   * @param value - 数据
+   */
+  componentDrag(
+    key: LowCodeKey,
+    value: { x: number; y: number; name: string }
+  ) {
+    const elements = document.elementsFromPoint(value.x, value.y);
+    // 找到坐标落在里面的最近的那个组件
+    const element = elements.find(
+      // @ts-ignore
+      (el: HTMLDivElement) => el.dataset.id && el.dataset?.component
+    );
+    const component = this.cManager.get(value.name);
+    let start = 0;
+    let componentListPath: string = '';
+    if (element) {
+      const targetComponentId = +((element as any)?.dataset?.id || 0);
+      const targetComponentPath = this.generateComponentPath(targetComponentId);
+      const targetComponent = this.pathToData(targetComponentPath);
+      // 容器组件
+      if (targetComponent.type === ComponentType.Container) {
+        componentListPath = `${targetComponentPath}.children`;
+      }
+      // 非容器组件
+      else {
+        const rect = element.getBoundingClientRect();
+        const { componentListPath: path, index } =
+          this.getIndexByKey(targetComponentPath);
+        componentListPath = path;
+        // 判断坐标在该组件的上半部分还是下半部分
+        start = value.y < rect.top + rect.height / 2 ? index : index + 1;
+      }
+    } else {
+      // 页面
+      start = this.components.length;
+    }
+    this.componentListSplice(start, 0, component, componentListPath);
+  }
+
+  /**
+   * @public
+   * 点击时插入组件 直接插到模拟器最后
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentInsert(key: LowCodeKey): void {
+    if (!key.component) {
+      return;
+    }
+    let length = this.components.length;
+    let listPath = undefined;
+
+    const component = this.cManager.get(key.component);
+
+    if (this.currentComponent) {
+      const currentComponentConfig = this.cManager.get(this.currentComponent.name);
+      if (currentComponentConfig.immobile) {
+        if (currentComponentConfig.type === ComponentType.Container) {
+          listPath = this.currentComponentPath + '.children';
+          // 选择了容器，则插在容器内部
+          length = this.pathToData(listPath)?.length;
+        }
+      } else {
+        listPath = this.currentComponentPath.replace(/\.\d+$/, '');
+        // 插在当前选择的组件后面
+        length = (parseInt(this.currentComponentPath.substring(listPath.length + 1)) || 0) + 1;
+      }
+    }
+    this.componentListSplice(length, 0, component, listPath);
+  }
+
+  /**
+   * @public
+   * 组件上移
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentMoveUp(key: LowCodeKey): void {
+    if (!key.path) {
+      return;
+    }
+    const { index, componentListPath } = this.getIndexByKey(key.path);
+    this.moveTo(key.path, componentListPath + '.' + Math.max(index - 1, 0));
+  }
+
+  /**
+   * @public
+   * 组件下移
+   * @param key - 组件LowCodeKey
+   * @returns 
+   */
+  componentMoveDown(key: LowCodeKey): void {
+    if (!key.path) {
+      return;
+    }
+    const { index, componentListPath } = this.getIndexByKey(key.path);
+    const afterMoveIndex = Math.min(
+      index + 1,
+      get(this.pages, componentListPath).length - 1
+    );
+    this.moveTo(key.path, componentListPath + '.' + afterMoveIndex);
+  }
+
+  /**
+  * @public
+  * 打开图片上传
+  * @param key - 组件LowCodeKey
+  * @returns 
+  */
+  componentImageOpen(key: LowCodeKey): void {
+    if (!key.path) {
+      return;
+    }
+    const { index, componentListPath, component } = this.getIndexByKey(key.path);
+    console.log('打开图片组件：', component);
+    if (index === -1) return;
+    // 打开云组件进行上传图片
+    this.publishEditor('message', {
+      type: 'openUpload',
+      data: {
+        field: {}
+      },
+    });
+
+  }
+
+  /**
+   * @public
+   * 修改表单更新项目数据
+   * @param path - 路径
+   * @param value - 值
+   */
+  setPathDataWithValidate(path: string, value: any): void {
+    const data = this.setPathData(path, value);
+    console.log('setPathDataWithValidate', data);
+    // TODO 挪走
+    // 先更新模拟器
+    this.publishPreview('updateProject', this);
+    // 校验图片
+    const imgUrls: ImageUrlResponse[] = [];
+    getImageUrls({
+      // TODO 这里没考虑到页面配置的情况
+      data: this.currentComponent?.formData?.props,
+      path: [],
+      result: imgUrls,
+    });
+    imgUrls.forEach(imgItem => {
+      // 通过某个值获取对应属性的配置
+      const config = getSchemaConfigByValue(
+        this.cManager.get(this.currentComponent.name)?.config as Record<
+          string,
+          any
+        >,
+        this.currentComponent?.formData,
+        imgItem?.url
+      );
+      if (config && config['x-validator']?.upload?.expectWidth) {
+        //不存在expectWidth 不需要模拟器校验
+        return;
+      }
+      this.publishPreview('validateImage', imgItem?.url, result => {
+        const res = this.validateImage(result, imgItem?.path, imgItem?.url);
+        if (res) {
+          this.publishEditor(
+            'action',
+            toPlainObject({ key: 'doubleImage', value: res })
+          );
+          this.publishPreview('updateProject', this);
+          this.publishEditor('update', true);
+        }
+      });
+    });
+  }
+
+  /**
+   * @public
+   * 设置project数据 构造函数里和init时调用
+   * @param project - 项目数据
+   */
+  setProject(project) {
+    this.state.project = merge(
+      {
+        categoryName: '',
+        projectName: '无题',
+        status: 0,
+        isNoLogin: false,
+        meta: { width: 414, height: 736 },
+        pages: [
+          {
+            components: [
+              {
+                list: [],
+                strategy: '',
+              },
+            ],
+            pageMeta: {},
+          },
+        ],
+      },
+      project
+    );
+    this.cManager.initComponens(this.components);
+  }
+
+  /**
+   * @public
+   * 替换project数据 undo，redo
+   * @param project - project数据
+   */
+  replaceProject(project) {
+    const { currentComponentPath, projectData } = project;
+    const { categoryName, projectName, isNoLogin, status } = this.state.project;
+    this.state.project = {
+      ...projectData,
+      projectName: projectName,
+      categoryName: categoryName,
+      isNoLogin: isNoLogin,
+      status: status,
+    };
+    this.activate({
+      path: currentComponentPath,
+    });
+  }
+
+  /**
+   * @public
+   * @param result - 模拟器校验二倍图的结果
+   * @param path - 图片地址的路径
+   * @returns
+   */
+  validateImage(result: boolean, path: string, imgUrl: string) {
+    if (!result) {
+      // 清空图片  // todo 撤销恢复原来的图片
+      set(this.currentComponent?.formData?.props, path, '');
+      // 返回错误结果
+      return this.validateImageFail(imgUrl);
+    }
+    // 校验通过返回null
+    return null;
+  }
+
+  /**
+   * @public
+   * todo: 挪走
+   * 二倍图校验失败需要返回的弹窗配置
+   * @returns
+   */
+  validateImageFail(imgUrl: string) {
+    try {
+      if (!imgUrl) {
+        return {};
+      }
+      // 通过某个值获取对应属性的配置
+      const config = getSchemaConfigByValue(
+        this.cManager.get(this.currentComponent.name)?.config as any,
+        this.currentComponent?.formData,
+        imgUrl
+      );
+
+      const { upload } = config?.['x-validator'] ?? { upload: {} };
+
+      return {
+        text: upload?.doubleImageTip || '图片清晰度过低,请使用上传2倍图',
+        icon: tipIcon,
+        guide: upload?.guide,
+      };
+    } catch (e) {
+      console.log('validateImageFail catch', e);
+    }
+  }
+
+  /**
+   * @public
+   * 获取功能数据
+   */
+  get functionData(): FunctionData {
+    if (!this.state.functionConfig) {
+      // @ts-ignore
+      return null;
+    }
+    // key规则: module:function， action是功能按钮的key 如undo或redo
+    const data = {} as FunctionData;
+    const { status, meta } = this.state.project;
+    const createFunctionData = (key, value) => ({
+      key: {
+        module: 'function',
+        action: key,
+      },
+      value,
+      clickable: undefined,
+    });
+    Object.entries(this.state.functionConfig).forEach(([key, value]) => {
+      // 如果布尔值为false 表示关闭这个功能 所以不添加这个字段
+      if (typeof value === 'boolean') {
+        if (value) {
+          data[key] = createFunctionData(key, value);
+          if (key === 'undo') {
+            // 配套
+            data['redo'] = createFunctionData('redo', value);
+          }
+        }
+      } else {
+        let val: any = value;
+        if (key === 'title') {
+          val = this.title;
+        } else if (key === 'status') {
+          val = statusOptions[status ?? value];
+        } else if (key === 'simulatorSizeList') {
+          val = {
+            ...val,
+            data: { ...val.data, ...meta },
+          };
+        }
+        data[key] = createFunctionData(key, val);
+      }
+    });
+    return data;
+  }
+
+  /**
+   *  @public
+   * @param componentId - 组件id
+   * @param newValue - 新的值
+   * @param oldValue - 旧的值
+   */
+  syncChildren(componentId: number, newValue?: any[], oldValue?: any[]) {
+    const componentPath = this.generateComponentPath(componentId);
+    const component = this.pathToData(componentPath);
+    console.log('syncChildren', componentId, component);
+    if (component?.name) {
+      const config = this.cManager.get(component.name)
+      const { syncChildrenProp, syncChildrenName } = config?.insertConfig || {};
+      if (syncChildrenProp && syncChildrenName) {
+        //         如果syncChildren.tabs比syncChildren.children长，则往children中插入差额的syncChildrenName组件，并把componentId更新到syncChildren.tabs中没有componentId属性的元素上；如果syncChildren.tabs比syncChildren.children短，则删除syncChildren.children中componentId不在syncChildren.tabs中的组件再同步一次。
+        // 最后，如果currentComponentPath路径为不存在的路径，则把currentComponentPath路径更新为最后一个syncChildren.children的componentId对应的路径
+        const childPath = componentPath + '.children';
+        const children = component.children = component.children || [];
+        const childSetting = get(component.formData, syncChildrenProp) || [];
+        console.log('syncChildren2', children, childSetting)
+        const childLen = children.length;
+        const childrenComponent = this.cManager.get(syncChildrenName);
+        if (childLen < childSetting.length) {
+          // 添加的情况
+          for (let i = childLen; i < childSetting?.length; i++) {
+            this.componentListSplice(i, 0, childrenComponent, childPath);
+          }
+          console.log('syncChildren3', childLen, childSetting?.length, this.pathToData(childPath));
+          // 对于初始化的情况
+          if (childLen === 0) {
+            this.activate({ path: childPath + '.0' });
+          }
+        } else if (childLen > childSetting.length) {
+          // 删除的情况
+          if (newValue && oldValue) {
+            const newChildren = [];
+            const hasIn = {};
+            newValue.forEach((item, index) => {
+              const oldIndex = oldValue.findIndex((o, oldIdx) => isEqual(item, o) && !hasIn[oldIdx]);
+              hasIn[oldIndex] = true;
+              newChildren[index] = children[oldIndex];
+            });
+            component.children = newChildren;
+          } else {
+            component.children = component.children.slice(0, childSetting.length)
+          }
+          this.activate({ path: componentPath });
+        }
+        this.emit('updateHistory');
+      }
+    }
+  }
+}