ibsp-fg-page 4.0.2

package/src/models/useComponentModel.js

@@ -0,0 +1,1271 @@
+/* eslint-disable no-unused-expressions */
+
+import { onMounted, onBeforeMount, onBeforeUnmount, onUnmounted, reactive, defineComponent, ref, nextTick, markRaw, defineAsyncComponent, toRaw, computed, watch } from 'vue';
+import { v4 as getUuid4 } from 'uuid';
+
+import {builtinComponents} from '@ibsp-config'
+import { useEvent } from './tools/ComponentEvent';
+import useContextData from '@ibsp-component-lib/src/componentLibs/components/middleware/useContextModel';
+// import usePlatformLibStore from '@/stores/usePlatformLibStore';
+// import usePlatformStore from '@/stores/usePlatformStore';
+// import useComponentStore, { defineNameStore as defineNameComponentStore } from '@/stores/useComponentStore';
+import { treePropsToData, getComponents, getUuid } from '@/utils'
+import { AnalysisScript } from '@/models/useJavascriptAnalysis'
+import { historyStackModel, ActionType } from '@/models/useHistoryStackModel';
+
+const handlePxType = (value) => (typeof value === 'number' || !isNaN(value)) ? `${value}px` : value
+/**
+ * @description 页面组件列表
+ *
+ * @type {Object.<string, LocalComponentConfig>}
+ */
+export const localComponents = {
+
+};
+
+const existNameStores = new Map()
+
+// export const store = {
+//   localComponents,
+//   // platformStore: usePlatformStore(),
+//   // platformLibStore: usePlatformLibStore(),
+//   // componentStore: useComponentStore(),
+// }
+
+// export const previewStore = {
+//   // platformStore: usePlatformStore(),
+//   // platformLibStore: usePlatformLibStore(),
+// }
+
+// export const initStore = () => {
+//   store.platformLibStore = usePlatformLibStore()
+//   store.platformStore = usePlatformStore()
+//   store.componentStore = useComponentStore()
+//   previewStore.platformLibStore = usePlatformLibStore()
+//   previewStore.platformStore = usePlatformStore()
+// }
+
+
+// export const getNameStore = (name)=>{
+//   if (existNameStores.has(name)) return existNameStores.get(name)
+//   const stores = {
+//     componentStore: defineNameComponentStore(name),
+//   }
+//   existNameStores.set(name, stores)
+//   return stores
+// }
+
+// export const initPreviewStore = (name) => {
+//   const stores = getNameStore(name)
+//   // eslint-disable-next-line guard-for-in
+//   for (const key in stores) {
+//     previewStore[key] = stores[key]
+//   }
+//   return previewStore
+// }
+
+
+export function updateLocalComponentValue(componentValue, newComponentValue) {
+  if (!componentValue || !Object.keys(componentValue)?.length) {
+    return newComponentValue;
+  }
+  const mergedObj = { ...componentValue };
+  for (const key in newComponentValue) {
+    if (!Object.hasOwn(componentValue, key)) {
+      mergedObj[key] = newComponentValue[key];
+    } else if (
+      typeof componentValue[key] === 'object' &&
+      typeof newComponentValue[key] === 'object' &&
+      !Array.isArray(componentValue[key]) &&
+      !Array.isArray(newComponentValue[key])
+    ) {
+      mergedObj[key] = updateLocalComponentValue(componentValue[key], newComponentValue[key]);
+    }
+  }
+  return mergedObj;
+}
+
+
+function updateComponentEvent(componentEventConfig, component) {
+
+  if (!component) {
+    return componentEventConfig
+  }
+  const eventConfig = component.componentConfig?.event || []
+  const config = componentEventConfig?.filter?.(item => {
+    return !item.initLoad;
+  }) || []
+  const exitConfig = component.interactionDataList?.filter?.(item => {
+    return !config.find(item2 => item2.key === item.key)
+  })?.map(item=>({
+    key: item.key,
+    label: item.label,
+    category: item.category
+  })) || []
+  return config.concat(eventConfig).concat(exitConfig)
+
+}
+
+
+/**
+ *  生成事件列表
+ * @param {*} componentInfo
+ */
+export const generateEventList = (eventConfig, categoryName = '基础事件') => {
+
+  return eventConfig?.map(item => {
+    return {
+
+      /** 是否激活 */
+      active: false,
+      /** 事件分类名称 */
+      category: item.category || categoryName,
+      /** 事件id */
+      id: getUuid(),
+      /** 事件key, 对应组件写的事件 */
+      key: item.key,
+      /** 事件名称, 用于显示 */
+      label: item.label,
+      /** 事件值, 为一个函数, 对应组件的处理函数 */
+      value: item?.value || (()=>{}),
+      /** 事件对应的条件以及动作 */
+      whereActions: item.whereActions || [
+        {
+          id: getUuid(),
+          active: false,
+          where: {
+            label: '',
+            value: '',
+            expression: {
+              type: ''
+            }
+          },
+          list: []
+        }
+      ]
+    }
+  }) || []
+}
+
+
+export const handleLayoutStyle = (componentValue)=>{
+  const layoutConfig = componentValue?.props?.layoutConfig || {}
+  let styles = {
+    ...(layoutConfig || {})
+  };
+  let overflowStyle = {}
+
+  if (layoutConfig['content-exceeds'] === 'scroll') {
+    if (layoutConfig.scrollPosition === 'auto') {
+      overflowStyle = {
+        overflow: 'auto'
+      }
+    } else {
+      overflowStyle = {
+        'overflow-x': layoutConfig.scrollPosition === 'overflow-x' ? 'scroll' : 'hidden',
+        'overflow-y': layoutConfig.scrollPosition === 'overflow-y' ? 'scroll' : 'hidden'
+      }
+    }
+  }
+  if (layoutConfig.gapNumber > 0) {
+    styles.gap = layoutConfig.gapNumber + 'px'
+  }
+  return {
+    ...styles,
+    ...overflowStyle,
+    'flex-shrink': '0 !important'
+
+  };
+}
+
+export const handleComponentStyle = (component)=>{
+  return {
+    display: component.show ? 'block' : 'none !important',
+    'flex-shrink': '0 !important',
+    'position': component.parentSectionId ? 'absolute' : 'relative'
+  };
+}
+
+let pervActiveComponents = new Set()
+
+class BaseComponent {
+
+  ref = {
+    dom: null
+  }
+  componentRef = null;
+  baseStyle = {
+    color: '',
+    fontSize: 14,
+    '--backgroundType': 'none',
+    backgroundImage: '',
+    backgroundColor: '',
+    '--visibilityWidth': 'left,right,top,bottom',
+    '--originalWidth': '0px',
+    borderStyle: 'none',
+    borderColor: 'rgba(229, 229, 229, 1)',
+    borderRadius: '0px',
+    paddingLeft: '0px',
+    paddingRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    marginLeft: '0px',
+    marginRight: '0px',
+    marginTop: '0px',
+    marginBottom: '0px',
+    visibility: true,
+    borderWidth: '0px',
+    backgroundRepeat: 'no-repeat',
+    '--backgroundSize-w': '',
+    '--backgroundSize-h': '',
+    '--backgroundPosition-x': '',
+    '--backgroundPosition-y': '',
+    '--backgroundSize-type': '',
+    '--show-visibility': '1',
+    '--bg-resource': ''
+  }
+  methods = {}
+  interactionDataList = []
+  customResources = {
+    css: {
+      state: false,
+      content: ''
+    },
+    js: {
+      state: false,
+      content: ''
+    }
+  }
+  setRef(el) {
+    this.componentRef = el;
+  }
+
+  addData(props, value) {
+    this.data[props] = value;
+  }
+
+
+}
+
+
+const getParentIds = (component, componentStore) => {
+  const paths = [];
+  let handle = (_component) => {
+    if (_component.parentId && componentStore?.componentDataMap?.[_component.parentId]) {
+      paths.push(_component.parentId)
+      handle(componentStore.componentDataMap[_component.parentId])
+    }
+  }
+  handle(component);
+  return paths;
+}
+export const componentInForm = (component, componentStore) => {
+  if (component.type !== 'form' && component.componentMetaId !== 'subFormContainer') {
+    return false;
+  }
+  const paths = getParentIds(component, componentStore);
+  const components = componentStore.componentData.filter(item => paths.includes(item.id)).map(item => item.source.id);
+  return components.includes('formContainer');
+}
+
+
+export class DesignComponent extends BaseComponent {
+  mode = 'Design'
+
+  dynamicValueMap = new Map()
+
+  data = {}
+  isShow = true;
+  tempActive = false;
+  showInPrecis = true;
+
+  form = {
+    model: '',
+    dataType: '',
+    mexLength: 0,
+    decimalPlaces: 2,
+    key: ''
+  }
+  inForm = false;
+  showLabel = true;
+
+  formConfig = {
+    showLabel: true,
+    labelPosition: 'left',
+    labelWidth: '80px',
+    subFormType: 'table'
+  }
+  jsRun;
+  eventInstance = useEvent(this);
+  dropType = '';
+
+  excludeTabModules = []
+
+  /**
+   *
+   * @param {{
+   *  id: string
+   *  lib: string
+   *  type: string
+   *  [key: string]: any
+   * }} configComponent
+   * @param {*} param1
+   * @returns
+   */
+  constructor(configComponent, {
+    component,
+    parentId,
+    addCallbackFn,
+    mountedCallbackFn,
+    page,
+    isPageInit,
+    showInPrecis
+  } = {}) {
+    super()
+    if (!configComponent) return
+    const targetComponent = configComponent
+    if (!targetComponent) {
+      console.error('组件不存在')
+      return
+    }
+    if (!page) {
+      throw new Error('page不存在')
+    }
+    this.dropType = !component ? 'source' : 'copy';
+    const pageStore = page.store
+    this.store = pageStore
+    const jsRun = this.jsRun = new AnalysisScript(page);
+
+    this.createdCallBack = []
+    const created = (callBackFn) => {
+      this.createdCallBack.push(callBackFn)
+    }
+
+    const getModel = (c, created, store, page) => {
+
+      // 如果有父级数据容器, 则使用父级数据容器的数据
+      const parentDataContainer = store.componentStore.queryParentDataContainer(c)
+      if (parentDataContainer) {
+        if (parentDataContainer.id === c.parentId) {
+          return computed(()=>this.data.contextModel)
+        }
+        return computed(()=>useContextData({
+          parentId: c.parentId,
+          store: store
+        }, page))
+      }
+
+      const _model = ref({
+        model: {},
+        item: {
+          data: {},
+          fields: []
+        },
+        target: 'data'
+      })
+
+      created((component) => {
+        const dataModelValue = component.componentValue?.data?.dataModel
+        if (dataModelValue && !component.dataContainer) {
+          _model.value.model = page.useDataModel(component.componentValue.data?.dataModel, ({
+            watch: ()=>component.componentValue.data?.dataModel,
+            loaded: (res)=>{
+              _model.value.item.fields = res.selectFields.value
+              _model.value.item.data = (Array.isArray(res.data.value) ? res.data.value[0] : res.data.value)
+            }
+          }))
+        }
+      })
+
+      return _model
+    }
+
+
+    const {
+      config: optionConfig,
+      data,
+      mounted,
+      beforeMount,
+      beforeDestroy,
+      destroyed,
+      methods,
+      baseStyle
+    } = targetComponent.setup({
+      store: pageStore,
+      component,
+      configComponent: component,
+      page,
+      app: page.app,
+      created,
+      dataModel: getModel({
+        parentId: parentId || component?.parentId
+      }, created, pageStore, page)
+    })
+    const propsConfig = this._bindChange(optionConfig?.props || [], 'props');
+    const dataConfig = optionConfig?.data || [];
+
+
+    const propsValue = component?.componentValue?.props || {}
+    const dataValue = component?.componentValue?.data || {}
+    const eventValue = component?.componentValue?.event || {}
+    const eventConfig = updateComponentEvent(optionConfig?.event || [], component)
+
+    const type = targetComponent?.type || 'component'
+    const label = targetComponent.label || '未命别名'
+
+    this.showInPrecis = showInPrecis ?? true;
+    this.source = targetComponent.source
+    this.type = type
+    this.label = label
+    this.icon = {
+      ...targetComponent.icon
+    }
+    this._key = component?._key || getUuid4()
+    this.show = Object.hasOwn(component || {}, 'show') ? component.show : true
+    this.id = component?.id || `${type}-${getUuid()}-${ Date.now() }`
+    this.uId = component?.uId || this.id;
+    this.form = Object.assign(this.form, component?.form, {
+      dataType: component?.form?.dataType ? component?.form?.dataType : (configComponent?.dataType?.[0]?.value ?? 'Text')
+    });
+    this.formConfig = Object.assign(this.formConfig, component?.formConfig);
+    this.parentId = component?.parentId || parentId
+    this.componentMetaId = component?.componentMetaId || targetComponent.id
+    this.name = component?.name || label
+    this.active = component ? false : true
+    this._isActiveSection = false
+    this.inForm = component?.inForm ?? componentInForm(this, pageStore.componentStore);
+    this.position = reactive({
+      x: 0,
+      y: 0,
+      w: '100%',
+      h: '100%',
+      z: 1,
+      ...(targetComponent?.position || []),
+      ...(component?.position || [])
+    })
+    if (component?.customResources) {
+      this.customResources = component.customResources
+    }
+
+    this.oldPosition = JSON.parse(JSON.stringify(toRaw(this.position)));
+
+    const setBaseStyle = (_baseStyle)=>{
+
+      const baseStyle = {
+        ...(this.baseStyle || []),
+        ...(component?.baseStyle || []),
+        opacity: 1,
+        ...(component?.baseStyle ? [] : (_baseStyle || []))
+      }
+      if (baseStyle.padding) {
+        const padding = baseStyle.padding.split(' ');
+        if (padding.length === 1) {
+          baseStyle.paddingLeft = baseStyle.paddingRight = baseStyle.paddingTop = baseStyle.paddingBottom = padding[0]
+        } else if (padding.length === 2) {
+          baseStyle.paddingTop = baseStyle.paddingBottom = padding[0]
+          baseStyle.paddingLeft = baseStyle.paddingRight = padding[1]
+        } else if (padding.length === 3) {
+          baseStyle.paddingTop = padding[0]
+          baseStyle.paddingLeft = baseStyle.paddingRight = padding[1]
+          baseStyle.paddingBottom = padding[2]
+        } else if (padding.length === 4) {
+          baseStyle.paddingTop = padding[0]
+          baseStyle.paddingRight = padding[1]
+          baseStyle.paddingBottom = padding[2]
+          baseStyle.paddingLeft = padding[3]
+        }
+      }
+
+      return baseStyle
+    }
+    this.baseStyle = setBaseStyle(baseStyle)
+
+    this.sort = targetComponent?.sort || 0;
+    this.setup = targetComponent.setup
+    if (targetComponent?.options) {
+      this.options = targetComponent.options;
+    }
+    this.componentConfig = {
+      props: propsConfig,
+      data: dataConfig,
+      event: eventConfig
+    }
+    this.componentValue = {
+      props: updateLocalComponentValue(propsValue, treePropsToData(propsConfig, {initDefaultConfig: !propsValue, builtinComponents})),
+      data: updateLocalComponentValue(dataValue, treePropsToData(dataConfig, {initDefaultConfig: !dataValue, builtinComponents})),
+      event: updateLocalComponentValue(eventValue, treePropsToData(eventConfig))
+    }
+    // watch(() => this.inForm.value , () => {
+    //   this.resetConfig();
+    // })
+    this.oldComponentValue = JSON.parse(JSON.stringify(this.componentValue));
+    this.ref = {
+      dom: null
+    }
+    if (component?.parentSectionId) {
+      this.parentSectionId = component.parentSectionId
+    }
+    if (targetComponent.dialog) {
+      this.dialog = targetComponent.dialog;
+    }
+
+    this.render = targetComponent.render
+
+    if (targetComponent.contentContainer) {
+      this.contentContainer = true;
+    }
+
+    if (targetComponent.excludeTabModules) {
+      this.excludeTabModules = targetComponent.excludeTabModules
+    }
+
+    component && (this.active = false)
+    methods && (this.methods = {
+      ...(this.methods || []),
+      ...methods
+    })
+
+    mounted && (this.mounted = mounted)
+    destroyed && (this.destroyed = destroyed)
+    beforeMount && (this.beforeMount = beforeMount)
+    beforeDestroy && (this.beforeDestroy = beforeDestroy)
+
+    this.data = {
+      staticData: [],
+      dynamicData: [],
+      componentData: [],
+      exportDataValues: reactive({}),
+      exportDataOptions: [],
+      ...(data?.(this) || []),
+      ...(component?.data || [])
+    }
+
+    if (this.dialog) {
+      this.parentId = ''
+    }
+
+    if (targetComponent.dataContainer) {
+      this.dataContainer = true;
+      this.data.context = {}
+    }
+
+
+    this.interactionDataList = component?.interactionDataList ? component?.interactionDataList : generateEventList(eventConfig?.filter?.((item)=>item.initLoad) || []);
+
+    !component && this.setActiveComponent()
+
+    addCallbackFn ? addCallbackFn(this, pageStore) : pageStore.componentStore.componentData.push(this)
+
+    mountedCallbackFn && (this.__mountedCallbackFn = mountedCallbackFn)
+    const componentScript = this.componentScript = pageStore.platformLibStore.getScriptByComponentId(this.id);
+    const JsRun = () => {
+      componentScript.forEach(
+        item => {
+          jsRun.run(item.scriptContent, page, this);
+        }
+      )
+    };
+    const componentSetup = () => {
+      JsRun();
+      this.init(true, pageStore);
+    }
+    const c = targetComponent.render({ component: this, page })
+    let _this = this;
+    if (c.constructor.name === 'Promise') {
+      this.component = markRaw(defineAsyncComponent({
+        loader: async () => {
+          let _componentModule = await c;
+          let _setup = _componentModule.default.setup
+          _componentModule.default.setup = function setup(props, ctx) {
+            let result = _setup?.(props, ctx);
+            componentSetup()
+            return result
+          }
+          return _componentModule
+        }
+      }))
+    } else {
+      this.component = markRaw(c);
+      let _setup = this.component.setup;
+      this.component.setup = function setup(props, ctx) {
+        let result = _setup(props, ctx);
+        componentSetup();
+        return result
+      }
+    }
+
+    if (isPageInit !== true) {
+      historyStackModel.push({
+        actionType: ActionType.AddComponent,
+        changes: [
+          {
+            id: this.id,
+            index: pageStore.componentStore.componentData.findIndex(item => item.id === this.id),
+            component: JSON.parse(JSON.stringify(this.generatePreviewData()))
+          }
+        ],
+        label: `添加${this.name}`
+      })
+    }
+
+    // if (this.is)
+    // return this;
+
+  }
+
+  // resetConfig(){
+  //   (this.componentConfig.props || (this.componentConfig.props = [])).unshift({
+  //     label: '表单字段配置',
+  //     key: 'columnConfig',
+  //     componentType: 'Collapse',
+  //     componentProps: {
+  //       // noCollapse: true,
+  //       defaultOpen: true
+  //     },
+  //     children: [
+  //       {
+  //         label: '字段标识',
+  //         key: 'model',
+  //         componentType: 'Input',
+  //         value: `Field_${getUuid4().split('-').shift().toLocaleUpperCase()}`
+  //       }
+  //     ]
+  //   });
+  //   this.componentValue.props = updateLocalComponentValue(this.componentValue.props , treePropsToData(this.componentConfig.props, {initDefaultConfig: !this.componentValue.props, builtinComponents}))
+
+  // }
+
+  // useContext = (component)=>computed(()=>useContextData({
+  //   parentId: component?.parentId || this.parentId,
+  //   store: component?.store || this.store
+  // }))
+
+  useContextModel(component, page) {
+    // const model = reactive({
+    //   model:{},
+    //   item: {},
+    // })
+    // this.createdCallBack.push((component) => {
+    //   const
+    // })
+    // // return computed(()=>{
+    // //   return useContextData(component, page)
+    // // })
+
+    // return model
+  }
+
+  propChange(prop, oldProp, label, actionType) {
+    let value = prop.split('.').reduce((curr, prev) => {
+      return curr[prev];
+    }, this);
+    let oldValue = oldProp.split('.').reduce((curr, prev, index, arr) => {
+      const val = curr[prev];
+      if (index >= arr.length - 1) {
+        if (typeof value === 'object') {
+          curr[prev] = JSON.parse(JSON.stringify(value));
+        } else {
+          curr[prev] = value;
+        }
+      }
+      return val;
+    }, this);
+    historyStackModel.push({
+      actionType: actionType,
+      changes: {
+        id: this.id,
+        prop: prop,
+        value: typeof oldValue === 'object' ? JSON.parse(JSON.stringify(value)) : value,
+        oldValue: typeof oldValue === 'object' ? JSON.parse(JSON.stringify(oldValue)) : oldValue
+      },
+      label: label
+    })
+  }
+
+  _bindChange(props, type) {
+    return props.map(item => {
+      let _componentEvent = item.componentEvent || {};
+      let _change = _componentEvent.change;
+      _componentEvent.change = (opts) => {
+        historyStackModel.push({
+          actionType: ActionType.UpdateComponent,
+          changes: {
+            id: opts.activeComponent.id,
+            prop: `componentValue.${type}`,
+            event: _change && typeof _change === 'function' ? ()=>{
+              _change(opts)
+            } : null,
+            value: JSON.parse(JSON.stringify(opts.activeComponent.componentValue[type])),
+            oldValue: JSON.parse(JSON.stringify(opts.activeComponent.oldComponentValue[type]))
+          },
+          label: `${opts.activeComponent.name}修改${opts.config.label}`
+        })
+        opts.activeComponent.oldComponentValue = JSON.parse(JSON.stringify(opts.activeComponent.componentValue));
+        if (_change && typeof _change === 'function') {
+          _change(opts)
+        }
+      }
+      if (item.children && Array.isArray(item.children)) {
+        item.children = this._bindChange(item.children, type)
+      }
+      if (item.tabChildren && Array.isArray(item.tabChildren)) {
+        item.tabChildren = this._bindChange(item.tabChildren, type)
+      }
+      item.componentEvent = _componentEvent;
+      return item;
+    })
+  }
+
+  reload() {
+    this.isShow = false;
+    nextTick(() => {
+      this.isShow = true;
+    })
+  }
+
+  /**
+   * @description 设置组件激活状态
+   * @date 2024/1/28 - 17:54:16
+   *
+   * @param {*} [targetComponent] - 目标组件 , 如果不传, 则为当前组件
+   */
+  setActiveComponent(targetComponent) {
+    const target = targetComponent || this
+    const activeComponent = this.store.componentStore?.activeComponent
+    if (activeComponent?.id === target.id) return
+    if (activeComponent?.active) {
+      activeComponent.active = false
+    }
+    document.getElementById('ibspTextarea').focus();
+    target.active = true
+  }
+
+  /**
+   * 清除组件激活
+   */
+  clearActiveComponent() {
+    const store = this.store
+    store.componentStore.activeComponent?.active && (store.componentStore.activeComponent.active = false)
+  }
+
+
+  /**
+   * @description 添加组件, 用于快捷添加组件
+   * @date 2024/1/29 - 14:45:29
+   *
+   * @param {...{}} args
+   * @returns {DesignComponent}
+   */
+  addComponent(...args) {
+    return new DesignComponent(...args)
+  }
+
+  /**
+   * @description 组件点击事件
+   * @date 2024/1/28 - 17:37:53
+   *
+   * @param {*} [targetComponent] - 目标组件 , 如果不传, 则为当前组件
+   */
+  click(targetComponent) {
+    this.store.componentStore.setTempActiveComponent([]);
+    this.setActiveComponent(targetComponent)
+  }
+
+  generatePreviewData() {
+    return {
+      ...this,
+      data: {
+        staticData: this.data?.staticData,
+        dynamicData: []
+      },
+      componentRef: null,
+      dynamicValue: null,
+      analysisDynamicValue: null,
+      store: null,
+      component: null,
+      componentConfig: null,
+      ref: null,
+      dom: null,
+      jsRun: '',
+      eventInstance: null,
+      visible: this.visible
+    }
+  }
+
+  /**
+   * @description 销毁组件
+   * @date 2024/1/30 - 10:11:57
+   * @async
+   *
+   * @param {*} [targetComponent] - 目标组件 , 如果不传, 则为当前组件
+   */
+  async destroy(targetComponent) {
+    let component = targetComponent
+    if (!(targetComponent instanceof DesignComponent)) {
+      component = this
+    }
+    return new Promise((resolve) => {
+      component.__beforeDestroy__()
+
+      component.active && component.clearActiveComponent()
+      const index = this.store.componentStore.componentData.findIndex((item) => item.id === component.id)
+      if (index > -1) {
+        this.store.componentStore.componentData.splice(index, 1)
+      }
+      component.__destroyed__()
+      resolve(component)
+    })
+  }
+
+
+  get boundingClientRect() {
+    return this.ref.dom?.getBoundingClientRect?.()
+  }
+
+  handlePxType(value) {
+    return typeof value === 'number' ? `${value}px` : value
+  }
+
+
+  /**
+   * @description 获取组件样式
+   * @date 2024/1/30 - 11:31:23
+   *
+   * @param {*} [targetComponent] - 目标组件 , 如果不传, 则为当前组件
+   * @returns {import('vue').CSSProperties}
+   */
+  getComponentStyles(targetComponent) {
+    let component = targetComponent || this
+    const baseStyle = component?.baseStyle || {}
+    const position = component?.position || {}
+
+    const componentTypeStyle = component?.type === 'layout' ?
+      handleLayoutStyle(component.componentValue) : handleComponentStyle(component)
+
+    const result = {
+      width: handlePxType(position.w || position.width),
+      height: handlePxType(position.h || position.height),
+      top: handlePxType(position.y || position.top),
+      left: handlePxType(position.x || position.left),
+      ...baseStyle,
+      ...componentTypeStyle
+    }
+    return result
+  }
+
+
+  init(insert = false, store) {
+    if (insert) {
+      this.createdCallBack?.forEach?.((fn) => fn?.(store.componentStore.componentDataMap[this.id]))
+      delete this.createdCallBack
+      onBeforeMount(() => this.__beforeMount__())
+      onMounted(() =>{
+        this.__mounted__()
+      })
+      onBeforeUnmount(() => this.__beforeDestroy__())
+      onUnmounted(() => this.__destroyed__())
+    }
+  }
+
+
+  __beforeMount__() {
+    this.beforeMount?.(this)
+  }
+
+  __mounted__() {
+    let dom = this.ref?.dom
+    // const id = `[data-id=ibsp-${this.id}]`
+    const id = this.id
+    // console.log(this.ref, dom, this.component);
+    const setDom = (dom)=>{
+      this.ref.dom = dom
+      this.insertCSS()
+    }
+    if (dom) {
+      if (!(document.body.contains(dom))) {
+        dom = document.getElementById(id)
+      }
+    } else {
+      dom = document.getElementById(id)
+    }
+    if (!dom) {
+
+      setTimeout(() => {
+        dom = document.getElementById(id)
+        if (!dom) {
+          console.warn('获取组件dom失败');
+        } else {
+
+          setDom(dom)
+        }
+
+      }, 500);
+    } else {
+      setDom(dom)
+    }
+    this.mounted?.(this)
+    if (this.dropType === 'source') {
+      this.componentRef?.onSourceDrop?.();
+    }
+    const addMountedCallbackFn = this.__mountedCallbackFn
+    if (addMountedCallbackFn) {
+      addMountedCallbackFn(this)
+    }
+  }
+
+  __beforeDestroy__() {
+    this?.beforeDestroy?.(this)
+  }
+
+  __destroyed__() {
+    this.destroyed?.(this)
+  }
+
+
+  get activeChild() {
+    return this.store.componentStore.queryComponentChildrenData(this.id).find(component=>component.active)
+  }
+
+  get configComponent() {
+    return ''
+  }
+
+  insertCSS() {
+    const style = document.querySelector('[data-custom-style=\'' + this.id + '\']')
+    if (!this.customResources?.css?.state) {
+      if (style) {
+        style.remove()
+      }
+      return
+    }
+    const _css = this.customResources.css.content
+    if (!_css) return
+    const dom = this.ref.dom
+
+    if (dom.contains(style)) {
+      style.innerHTML = _css
+    } else {
+      const styleElement = document.createElement('style')
+      styleElement.setAttribute('data-custom-style', this.id)
+      styleElement.innerHTML = _css
+      dom.appendChild(styleElement)
+    }
+  }
+
+
+}
+
+
+export class PreviewComponent extends BaseComponent {
+
+
+  isShow = true;
+  jsRun;
+  eventInstance = useEvent(this);
+
+  constructor(component, {
+    page,
+    configComponent
+  } = {}) {
+    super()
+    if (!configComponent) {
+      // throw new Error('组件不存在')
+      console.error('组件不存在')
+      return
+    }
+    const pageStore = page.store
+    const jsRun = this.jsRun = new AnalysisScript(page);
+    const targetComponent = configComponent
+    Object.assign(this, component)
+
+    this.mode = 'Preview'
+    this._key = this._key ?? getUuid4()
+    this.ref = {}
+    this.visible = component.visible ?? true
+
+    if (component.baseStyle?.['--visibility'] === 'visible') {
+      this.visible = true
+    }
+
+    if (targetComponent?.options) {
+      this.options = targetComponent.options;
+    }
+
+    const componentScript = this.componentScript = pageStore.platformLibStore.getScriptByComponentId(this.id);
+    const JsRun = () => {
+      componentScript.forEach(
+        item => {
+          jsRun.run(item.scriptContent, page, this);
+        }
+      )
+    };
+    const componentSetup = () => {
+      JsRun();
+      this.init(true);
+    }
+    const c = targetComponent.render({ component: this, page })
+    let _this = this;
+    if (c.constructor.name === 'Promise') {
+      this.component = markRaw(defineAsyncComponent({
+        loader: async () => {
+          let _componentModule = await c;
+          let _setup = _componentModule.default.setup;
+          _componentModule.default.setup = function setup(props, ctx) {
+            let result = _setup?.(props, ctx);
+            componentSetup()
+            return result;
+          }
+          return _componentModule;
+        }
+      }))
+    } else {
+      this.component = markRaw(c)
+      let _setup = this.component.setup;
+      this.component.setup = function setup(props, ctx) {
+        let result = _setup(props, ctx);
+        componentSetup();
+        return result;
+      }
+    }
+
+    // const c = targetComponent.render({ component: this, page })
+    // if (c.constructor.name === 'Promise') {
+    //   this.component = markRaw(defineAsyncComponent(()=> c))
+    // } else {
+    //   this.component = markRaw(c)
+    // }
+    this.useContext = (component)=>{
+      return computed(()=>useContextData({
+        parentId: component?.parentId || this.parentId,
+        store: component?.store || this.store
+      }))
+    }
+    this.store = page.store
+
+  }
+
+  getComponentStyles(targetComponent) {
+    let component = targetComponent || this
+    const baseStyle = component?.baseStyle || {}
+    const position = component?.position || {}
+
+
+    const componentTypeStyle = component?.type === 'layout' ?
+      handleLayoutStyle(component.componentValue) : handleComponentStyle(component)
+
+    const result = {
+      width: handlePxType(position.w || position.width),
+      height: handlePxType(position.h || position.height),
+      top: handlePxType(position.y || position.top),
+      left: handlePxType(position.x || position.left),
+      ...baseStyle,
+      ...componentTypeStyle
+    }
+    return result
+  }
+
+
+  init() {
+    onBeforeMount(() => this.__beforeMount__())
+    onMounted(() =>this.__mounted__())
+    onBeforeUnmount(() => this.__beforeDestroy__())
+    onUnmounted(() => this.__destroyed__())
+  }
+
+
+  __beforeMount__() {
+    this.componentValue?.event?.beforeMount?.(this)
+  }
+
+  __mounted__() {
+    const dom = document.getElementById(this.id)
+    if (!dom) {
+      // console.error('获取组件dom失败');
+    } else {
+      this.ref.dom = dom
+      this.insertCSS()
+    }
+    this.componentValue?.event?.mounted?.(this)
+  }
+
+  __beforeDestroy__() {
+    this.componentValue?.event?.beforeDestroy?.(this)
+  }
+
+  __destroyed__() {
+    this.componentValue?.event?.destroyed?.(this)
+  }
+  get boundingClientRect() {
+    return this.ref.dom?.getBoundingClientRect?.()
+  }
+
+  insertCSS() {
+    if (!this.customResources?.css?.state) {
+      return
+    }
+    const _css = this.customResources.css.content
+    if (!_css) return
+    const dom = this.ref.dom
+    const style = document.querySelector('[data-custom-style=\'' + this.id + '\']')
+    if (dom.contains(style)) {
+      style.innerHTML = _css
+    } else {
+      const styleElement = document.createElement('style')
+      styleElement.setAttribute('data-custom-style', this.id)
+      styleElement.innerHTML = _css
+      dom.appendChild(styleElement)
+    }
+  }
+
+  createComponent = (component, configComponent, page)=>{
+    return new PreviewComponent(component, {page: page, configComponent})
+
+  }
+
+}
+
+
+/**
+ * @description 定义组件
+ *
+ * @param {ComponentDesc} desc - 组件描述对象
+ * @param {function():ComponentOptions} options - 组件配置对象函数, 返回一个配置项对象
+ */
+export function defineIbspComponent(desc, setup) {
+  // const id = desc.id
+  // if (!id) {
+  //   throw new Error('组件id不能为空')
+  // }
+  // if (localComponents[id]) {
+  //   throw new Error(`组件id已存在:${id}`)
+  // }
+  // localComponents[id] = {
+  //   ...desc,
+  //   setup
+  // }
+
+
+}
+
+
+export async function loadLocalComponent() {
+  // if (Object.keys(localComponents).length) return
+  // const modules = await getComponents(
+  //   import.meta.glob('@/views/designer/modules/ibsp-component-lib/componentLibs/**/*config.{jsx,js}')
+  // );
+
+
+  // return new Promise((resolve) => {
+  // /**
+  //    * 获取所有组件
+  //    */
+  //   modules
+  //     .map(item => item.modules)
+  //     .forEach(item => {
+  //       const id = item.id
+  //       if (!id) {
+  //         throw new Error('组件id不能为空')
+  //       }
+  //       if (localComponents[id]) {
+  //       // throw new Error(`组件id已存在:${id}`)
+  //         console.log(`组件id已存在:${id}`);
+  //         return
+  //       }
+  //       localComponents[id] = {
+  //         ...item,
+  //       }
+  //     })
+  //   resolve()
+  // })
+
+
+}
+
+
+/**
+ * @description 组件相关的数据模型, 包括组件的描述, 组件的配置项, 组件的数据, 组件的事件, 组件的方法, 组件的渲染函数, 组件的生命周期
+ */
+
+/**
+ * @typedef {'Select' | 'Input'} componentConfigType
+ */
+
+/**
+ * @typedef {'element-plus' | 'local'} iconType
+*/
+
+/**
+ * @typedef {'InternetThingsApp' | 'VisualLargeScreenApp' | 'SystemApp' | 'CommonApp'} componentLib - 组件库列表
+*/
+
+/**
+ * @typedef {'layout' | 'basis' | 'form' | 'data' | 'other' | 'chart'} categoryIdList - 分类id列表
+*/
+
+/**
+ * @typedef {'component' | 'container' | 'variable' | 'appData' | 'script' | 'const' | 'localComponents'} Store
+*/
+
+
+/**
+ * @typedef {object} componentPosition - 组件的位置
+ * @property {number} top - 组件距离顶部的距离
+ * @property {number} left - 组件距离左侧的距离
+ * @property {number} width - 组件宽度
+ * @property {number} height - 组件高度
+*/
+
+/**
+ * @typedef {object} ComponentDesc - 组件描述对象
+ * @property {string} id - 组件id, 必填， 必须唯一， 推荐 libId + groupId + categoryId + name
+ * @property {object | [componentLib,categoryIdList,string]} path - 组件路径， 就是左侧组件展示的路径
+ * @property {componentLib} path.libId - 组件库id InternetThingsApp: 物联网应用 | VisualLargeScreenApp:可视化大屏 | SystemApp:系统应用
+ * @property {categoryIdList} path.categoryId - 组件分类id
+ * @property {string} [path.groupName] - 组件组名, 不填默认全部
+ * @property {string} label - 组件名称
+ * @property {object} [icon] - 组件图标
+ * @property {iconType} icon.type - 图标类型,目前支持element-plus, local, local为本地svg图标, 需要在icon下创建
+ * @property {string} icon.value - 图标值, 如果type为local, 则为svg图标的文件名
+ * @property {string} [description] - 组件描述
+ * @property {componentPosition} [position] - 组件位置, 用于初始默认值
+ * @property {'component' | 'layout' | 'popupComponent'} [type] - 组件类型
+ */
+
+/**
+ * @typedef {object} ConfigItem - 配置项
+ * @property {string} label - 配置属性名称
+ * @property {string} key - 配置属性key
+ * @property {string} value - 配置属性值
+ * @property {componentConfigType} componentConfigType - 组件配置类型
+ * @property {object} componentProps - 配置组件的props
+ * @property {string | object} [componentProps.tooltip] - 配置组件的提示
+ * @property {ConfigItem[]} [children] - 配置属性的下级
+ * @property {ConfigItem[]} [tabChildren] - 配置属性的下级
+ * @property {ConfigItem[]} [defaultConfig] - 默认配置
+ */
+
+/**
+ * @typedef {object} ComponentOptions - 配置项
+ * @property {object} config - 组件配置
+ * @property {ConfigItem[]} config.props - 组件属性配置项
+ * @property {ConfigItem[]} config.data - 组件数据配置项
+ * @property {object[]} config.event - 组件事件配置项
+ * @property {string} config.event.id - 组件事件id
+ * @property {string} config.event.label - 组件事件名称
+ * @property {string} config.event.description - 组件事件描述
+ * @property {string} config.event.key - 组件事件key
+ * @property {object} data - 组件数据
+ * @property {null} data.staticData - 静态数据
+ * @property {null} data.dynamicData - 动态数据
+ * @property {function} render - 渲染函数, 可以为jsx, 或者vue组件
+ * @property {function} mounted - 组件挂载后, 只用于设计模式
+ * @property {function} destroyed - 组件销毁后, 只用于设计模式
+ * @property {function} beforeMount - 组件挂载前, 只用于设计模式
+ * @property {function} beforeDestroy - 组件销毁前, 只用于设计模式
+ * @property {Object} methods - 组件方法, 只用于设计模式
+ * @property {Object} baseStyle - 基础默认样式
+ */
+
+/**
+ * @typedef {ComponentDesc & {options: function():ComponentOptions}} LocalComponentConfig - 组件配置
+ */