ibsp-fg-page 4.0.2

package/src/models/usePageModel.js

@@ -0,0 +1,1087 @@
+/* eslint-disable */
+/**
+ *
+ *
+ *
+ *
+ *
+ *
+
+ 此model已弃用 ！ ！ ！
+ date：2024年08月27日
+
+ *
+ *
+ *
+ *
+ *
+ */
+
+
+import { mergeWith, isObject, merge, remove } from 'lodash-es'
+import mitt from 'mitt';
+import { defineAsyncComponent, markRaw, reactive, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router';
+import { v4 } from 'uuid';
+import CryptoJS from 'crypto-js'
+import { ElMessageBox, ElMessage } from 'element-plus';
+import treeUtils from 'tree-lodash'
+import { pageUtils } from '@models/page/data/utils';
+// import builtinContainer from '@ibsp-component-lib/src/componentLibs/modules/builtinContainer/index'
+import { AnalysisInteraction as AnalysisEvent } from '@preview'
+
+import { DynamicValueOptions, AnalysisDynamicValue } from './useDynamicValueModel'
+import { emitGlobalEvent, useGlobalEvent } from './useGlobalEvents';
+import { provide } from './service'
+import DataModel from './dataModel'
+
+import { getUserResource } from '@/api/ibsp-bg-resource';
+import usePlatformLibStore from '@/stores/usePlatformLibStore';
+import usePlatformStore from '@/stores/usePlatformStore';
+import useComponentStore, { defineNameStore as defineNameComponentStore } from '@/stores/useComponentStore';
+import { validationLoginApi } from '@/api/ibsp-bg-auth'
+import { getPageInfoApi, getPageVersionInfoApi } from '@/api/ibsp-bg-page';
+import { DesignComponent, PreviewComponent,  generateEventList } from '@/models/useComponentModel'
+import { getEnvConfigApi } from '@/api/ibsp-bg-user';
+import { getAppComponentLibVersionApi } from '@/api/ibsp-bg-app'
+import useEnv from '@/hooks/useEnv';
+import { findRulePage } from '@/api/ibsp-bg-counter'
+import { getResultAppendListApi, getResultAppendNotPageApi } from '@/api/ibsp-bg-dataview'
+import { getViewDataListApi, getFieldViewDataIdApi, getParamViewDataIdApi } from '@/api/ibsp-bg-dataview'
+import { getClassList, getDetailList, queryDictByCode } from '@/api/ibsp-bg-app'
+import { getQueryFormChineseStruct } from '@/api/ibsp-bg-form'
+import { getSysFormVersionInfo } from '@/api/ibsp-bg-form'
+import * as utils from '@/utils/index.js'
+import { addComponentEvent, removeComponentEvent, exportValues } from '@/utils/configData.js'
+import { saveFormData, deleteFormDataRow, batchSaveFormDataApi } from '@/api/ibsp-bg-form'
+import request from '@/utils/request';
+
+const usePageUtils = (page)=>{
+  function useConfigParams(configParams, pageInstance, isToArray = true) {
+    const _page = pageInstance
+    const res = isToArray ? [] : {}
+    const queryTypeValue = _page.analysisDynamicValue?.queryTypeValue
+    if (!_page || !queryTypeValue) {
+      return configParams
+    }
+    let _params = configParams
+    if (!Array.isArray(_params) && typeof _params === 'object') {
+      _params = Object.values(_params || {})
+    }
+
+    for (let index = 0; index < _params.length; index++) {
+      const item = _params[index];
+      const value = queryTypeValue?.(item.valueType, item.value) || ''
+      if (isToArray) {
+        res.push({
+          [item.code]: value
+        })
+      } else {
+        res[item.code] = value
+      }
+    }
+    return res
+  }
+
+  return {
+    useConfigParams
+  }
+
+}
+
+const pageApi = {
+  getResultAppendListApi,
+  getViewDataListApi,
+  getFieldViewDataIdApi,
+  getParamViewDataIdApi,
+  getClassList,
+  getDetailList,
+  queryDictByCode,
+  getQueryFormChineseStruct,
+  getSysFormVersionInfo,
+  saveFormDataApi: saveFormData,
+  deleteFormDataRowApi: deleteFormDataRow,
+  getResultAppendNotPageApi,
+  batchSaveFormDataApi,
+  getPageInfoApi
+}
+
+// const pageUtils = {
+//   treePropsToData: utils.treePropsToData,
+//   getConfigAttr: utils.getConfigAttr,
+//   useEnv: useEnv,
+//   addComponentEvent: addComponentEvent,
+//   removeComponentEvent: removeComponentEvent,
+//   exportValues: exportValues,
+//   uuid: v4,
+//   toTreeData: utils.toTreeData,
+//   getBuiltinContainer: () => builtinContainer,
+//   treeUtils: treeUtils,
+//   getRequest: ()=>request,
+//   getCryptoJS: ()=>CryptoJS,
+//   getElMessageBox: ()=>ElMessageBox,
+//   getElMessage: ()=>ElMessage,
+//   getAxios: ()=>axios,
+//   getRouter: ()=>useRouter(),
+//   getRoute: ()=>useRoute(),
+// }
+const _containerComponents = markRaw({
+  pageContainer: defineAsyncComponent(() => import('@preview/src/index.vue'))
+})
+
+const appComponentLibs = new Map();
+
+
+const IBSP_APP_OSS_WEB = useEnv('IBSP_APP_OSS_WEB')
+
+export const appPages = new Map();
+export const appForms = new Map();
+export const currentPageInfo = {
+  designPage: null,
+  previewPage: null,
+}
+
+export const appPageData = {
+  userInfo: {},
+  envConfigData: [],
+  _updateTime: 0,
+  _CACHE_TIME: 60 * 1000, // 缓存时间 60s
+}
+
+export const pagePlatformData = reactive({
+  var: null,
+  const: null,
+  script: null,
+  material: null,
+  method: null,
+})
+
+export const appData = {
+  roleList: []
+}
+
+const setThemeColor = (ibspPage) => {
+  const designerPage = ibspPage.pageConfigValue.designerPage
+  let colors = ['#0066FF', '#f7f8fa']
+  if (designerPage) {
+    if (designerPage?.selectThemeColor === 'custom') {
+      colors = designerPage?.customThemeColor || ['#0066FF', '#f7f8fa']
+    } else if (designerPage?.themeColor?.length) {
+      colors = designerPage?.themeColor
+    } else {
+      colors = ['#0066FF', '#f7f8fa']
+    }
+  }
+  document.documentElement.style.setProperty('--ibsp-theme-color', colors[0]);
+  document.documentElement.style.setProperty('--ibsp-theme-color2', colors[1]);
+
+  document.body.classList.add('designer-mode');
+  document.body.classList.remove('preview-mode');
+  const theme = localStorage.getItem('ibsp-theme');
+  const nextUITheme = JSON.parse(localStorage.getItem('IbspNextUITheme') || 'false')
+  designerPage.nextUITheme = nextUITheme
+  document.documentElement.className = `${theme === 'light' ? 'theme-light ibsp-next-ui-light' : 'dark ibsp-next-ui-dark'} ${nextUITheme ? 'ibsp-next-ui' : ''}`
+}
+
+const _waitCustomLib = {}
+const localComponentLibs = reactive({
+  common: null,
+  other: [],
+})
+const localComponents = markRaw({})
+
+
+export class IbspPage {
+  id = '';
+  mode = '';
+  appId = '';
+  _key = '';
+  name = ref('');
+  pageConfigId = '';
+  sysResourceId = '';
+  bindDynamicData = {};
+  pageConfigValue = reactive({
+    designerPage: {
+      'themeColor': [],
+      'selectThemeColor': 'blue',
+      'selectColor': '',
+      'customThemeColor': [],
+      canvasSize: 'auto',
+      canvasHeight: 'max-content',
+      canvasWidth: 'max-content',
+      scrollBarPosition: 'auto',
+      overflow: 'auto',
+      nextUITheme: false,
+      customThemeType: 'color',
+      selectImage: '',
+      resetPage: ''
+
+    },
+    canvasPage: {
+      'pageBackgroundType': 'color',
+      'pageBackgroundColor': '#ffffff',
+      'pageBackgroundImage': '',
+      'pageSizeType': 'custom',
+      'pageWidth': 1920,
+      'pageHeight': 1080,
+      'overflow': 'visible',
+      'pageParam': [],
+      cachePageData: false,
+      isInitLoadForm: false,
+      scale: 'originalSize',
+      pageBackgroundOpacity: 1,
+    }
+  });
+  data = appPageData;
+  appData = appData
+  platformLib = pagePlatformData
+  store = {}
+
+  events = {};
+  #hooks = {
+    created: [],
+    mounted: [],
+    activated: [],
+    deactivated: [],
+    beforeDestroy: [],
+    destroyed: [],
+    platformLibLoaded: [],
+  }
+  pageScript = ''
+  eventBus = mitt()
+  _componentLoadedList = []
+  componentLibs = [
+    {
+      id: 'common',
+      platform: true,
+    },
+  ]
+  localComponentLibs = localComponentLibs
+  localComponents = localComponents
+  api = pageApi
+  utils = {
+    ...pageUtils,
+  }
+  appForms = appForms
+  _containerComponents = _containerComponents
+  pageResponseEvent = {
+    emit: emitGlobalEvent,
+    on: useGlobalEvent
+  }
+  pageDataSource = [] // 页面数据源
+  /**
+   * Creates an instance of IbspPage.
+   * @date 2024/2/25 - 10:59:03
+   *
+   * @constructor
+   * @param {String} id - 页面id
+   * @param {'Design' | 'Preview'} mode - 模式
+   * @param context
+   */
+  constructor(id, mode = 'Design', context = {
+    componentLibs: [],
+    localComponentLibMap: {},
+    libEnv: false,
+    pageData: null
+  }) {
+    this.id = id;
+    this._key = v4();
+    this.mode = mode;
+    this.componentLibs = [...this.componentLibs, ...(context.componentLibs || [])]
+    this.localComponentLibMap = context.localComponentLibMap || {}
+    this.context = markRaw(context)
+    this.utils.generateEventList = generateEventList
+    if (context.libEnv) {
+      this.libEnv = true
+    }
+    if (!this._token) {
+      return emitGlobalEvent('loginExpired')
+    }
+    this.init();
+    this.addModeClass();
+    this.dataModel = new DataModel(this)
+    this.utils.useDataModel = this.dataModel.useDataModel
+
+  }
+
+  get platformData() {
+    return this.store.platformStore.platformData
+  }
+
+  get platformFun() {
+    return this.store.platformStore.platformFun
+  }
+
+  get platformLibData() {
+    return this.store.platformLibStore.platformLibData
+  }
+
+  /**
+   * 初始化设计页面
+   */
+  async #initDesignPage() {
+
+    provide(this, false)
+
+    currentPageInfo.designPage = this;
+
+    initStore()
+    // init pageInfo
+
+    let viewData = {}
+    if (!this.localEnv) {
+      if (this.context.pageData) {
+        viewData = this.context.pageData
+        this.appId = viewData.appId;
+        window.appId = viewData.appId;
+        this.sysResourceId = viewData.sysResourceId;
+        this.name.value = viewData.name;
+        this.pageDataSource = viewData.pageDataSource || []
+      } else {
+        await this.getPageVersionInfo()
+        const { appId, idSysResource, pageName, verDto } = await this.getPageConfigInfo()
+        try {
+          viewData = verDto.viewJson ? JSON.parse(verDto.viewJson) : {}
+        } catch (e) {
+          viewData = {}
+        }
+        this.id = verDto.id;
+        this.pageConfigId = verDto.idPageConfig;
+        this.versionId = verDto.id
+        this.appId = window.appId = appId;
+        this.name.value = pageName;
+        this.sysResourceId = idSysResource;
+        this.versionData = verDto;
+      }
+      this.pageDataSource = viewData?.pageDataSource || []
+      this.#updatePageConfigValue(viewData?.pageConfigValue || viewData?.pageConfig);
+      this.bindDynamicData = reactive(viewData.bindDynamicData || {});
+
+      this.#initAppData();
+    }
+    setThemeColor(this);
+    await this.#initComponentLib();
+
+
+    // init store
+    const platformStore = usePlatformStore();
+    const platformLibStore = usePlatformLibStore();
+    const componentStore = useComponentStore();
+    this.store = { platformStore, platformLibStore, componentStore, }
+    if (!this.localEnv) {
+      platformStore.refreshPlatformData({ page: this });// 刷新平台数据
+      platformLibStore.refreshPlatformLibData({
+        refreshedCallback: this._emitHook('platformLibLoaded'),
+      }) // 刷新平台库数据
+      this.#initPlatformLibData(viewData);
+    }
+
+    this.analysisDynamicValue = new AnalysisDynamicValue(this);
+    this.dynamicValueOptions = new DynamicValueOptions(this);
+
+
+    // const _utils = usePageUtils(this)
+    // this.utils = {
+    //   ...this.utils,
+    //   ..._utils,
+    //   router: useRouter(),
+    //   route: useRoute(),
+    // }
+
+    // init component
+    const components = viewData.components || [];
+    componentStore.componentData = []
+
+
+    const first = components[0]
+    for (let index = 0; index < components.length; index++) {
+      const component = components[index];
+      // 兼容老版本的弹窗, 后续版本会删除
+      if (component.componentMetaId === 'other-popup') {
+        component.parentId = ''
+      }
+      // 兼容老版本组件库
+      if (!component.source) {
+        component.source = {
+          lib: ['layoutContainer', 'section-layout', 'systemNavContainer'].includes(component.componentMetaId) ? 'common' : 'ibspMisComplib',
+          type: component.type || component.typeId,
+          id: component.componentMetaId,
+        }
+      }
+      const source = component.source
+      let configComponent = this.localComponents[source.lib]?.[source.id]
+
+      if (!configComponent && _waitCustomLib[source.lib]?.loading) {
+        // ------------------- 处理网络问题导致的组件库未加载完成 -------------------
+        (_waitCustomLib[source.lib].waitList || (_waitCustomLib[source.lib].waitList = [])).push(() => {
+          let configComponent = this.localComponents[source.lib]?.[source.id]
+          new DesignComponent(configComponent, {
+            component,
+            isPageInit: true,
+            page: this,
+            addCallbackFn: (component) => {
+              componentStore.componentData.splice(index, 0, component)
+            }
+          })
+        });
+      } else {
+        new DesignComponent(configComponent, {
+          component,
+          isPageInit: true,
+          page: this,
+        })
+      }
+
+    }
+
+
+  }
+
+  /**
+   * 初始化预览页面
+   */
+  async #initPreviewPage() {
+
+
+    // init pageInfo
+    let viewData = {}
+    if (this.context.pageData) {
+      viewData = this.context.pageData
+    } else {
+      viewData = await this.getPageVersionInfo()
+    }
+    this.appId = viewData.appId;
+    window.appId = viewData.appId;
+    this.sysResourceId = viewData.sysResourceId;
+    this.name = viewData.name;
+    this.pageConfigValue = reactive(viewData.pageConfigValue);
+    this.pageDataSource = viewData.pageDataSource || []
+
+    if (!localComponentLibs.other.length) {
+      await this.#initComponentLib(viewData);
+    }
+
+    const platformStore = usePlatformStore();
+    const platformLibStore = usePlatformLibStore();
+    const componentStore = defineNameComponentStore(this.id);
+    componentStore.componentData = [] // 保证同一个页面的组件不会叠加加载
+    this.store = { platformStore, platformLibStore, componentStore, }
+
+    platformLibStore.refreshPlatformLibData({
+      refreshedCallback: this._emitHook('platformLibLoaded'),
+    })
+
+    this.#initPlatformLibData(viewData);
+    this.#updatePageConfigValue(viewData?.pageConfigValue || viewData?.pageConfig);
+    this.bindDynamicData = reactive(viewData.bindDynamicData || {});
+    this.analysisDynamicValue = new AnalysisDynamicValue(this);
+    this.#initAppData();
+
+    // const _utils = usePageUtils(this)
+    // this.utils = {
+    //   ...this.utils,
+    //   ..._utils,
+    //   router: useRouter(),
+    //   route: useRoute(),
+    // }
+
+
+    // debugger
+    // init component
+    const components = viewData.components || [];
+    for (let index = 0; index < components.length; index++) {
+      const component = components[index];
+      if (!component.id) {
+        continue
+      }
+      if (component.componentMetaId === 'other-popup') {
+        component.parentId = ''
+      }
+      if (!component.source) {
+        component.source = {
+          lib: ['layoutContainer', 'section-layout', 'systemNavContainer'].includes(component.componentMetaId) ? 'common' : 'ibspMisComplib',
+          type: component.type || component.typeId,
+          id: component.componentMetaId,
+        }
+      }
+      const source = component.source === 'systemApp' ? 'ibspMisComplib' : component.source
+      const configComponent = this.localComponents[source.lib]?.[source.id]
+
+      if (!configComponent && _waitCustomLib[source.lib]?.loading) {
+        // ------------------- 处理网络问题导致的组件库未加载完成 -------------------
+        (_waitCustomLib[source.lib].waitList || (_waitCustomLib[source.lib].waitList = [])).push(() => {
+          const configComponent = this.localComponents[source.lib]?.[source.id]
+          const res = new PreviewComponent(component, {
+            page: this,
+            configComponent
+          })
+          this.store.componentStore.componentData.splice(index, 0, res)
+          new AnalysisEvent(res, this)
+        });
+        continue
+      }
+      const res = new PreviewComponent(component, {
+        page: this,
+        configComponent
+      })
+      this.store.componentStore.componentData.push(res)
+      new AnalysisEvent(res, this)
+
+
+    }
+
+
+    currentPageInfo.previewPage = this;
+  }
+
+  async init() {
+
+    try {
+      if (this.id && this.id !== 'designer') {
+        this.#initPageData();
+      } else {
+        this.localEnv = true
+      }
+
+      if (this.mode === 'Design') {
+        await this.#initDesignPage();
+      } else if (this.mode === 'Preview') {
+        await this.#initPreviewPage();
+      }
+    } catch (err) {
+      console.error(err)
+    } finally {
+      this.__inited = true;
+      this.#hooks.created.forEach((fn) => fn(this));
+      console.log(`-------------------${this.name?.value || 'page'}---------------`, this);
+      window.ibspLoading4x?.hide?.()
+    }
+
+
+  }
+
+  #initPageData() {
+    const cacheTime = appPageData._CACHE_TIME;
+    const updateTime = appPageData._updateTime
+    if (updateTime !== 0 || (Date.now() - updateTime < cacheTime)) {
+      appPageData._updateTime = Date.now();
+      this.data = appPageData;
+      return
+    }
+    this.validateUser();
+    this.#setEnvConfigData();
+    this.#setPageResource()
+    this.#initCounter()
+  }
+
+  /**
+   *  初始化已经使用的平台库数据
+   * @param {Object} viewData  页面json信息
+   */
+  async #initPlatformLibData(viewData) {
+    if (this.mode === 'Design') {
+      this.platformLibLoaded((data, propsMap) => {
+        Object.keys(data)
+          .forEach((key) => {
+            this.platformLib[key] = {
+              app: Object.fromEntries(data[key].app.map((item) => {
+                return [item[propsMap[key].code], item[propsMap[key].value]]
+              })),
+              platform: Object.fromEntries(data[key].platform.map((item) => {
+                return [item[propsMap[key].code], item[propsMap[key].value]]
+              })),
+            }
+          })
+      })
+      return
+    }
+
+    if (!pagePlatformData.var) {
+      pagePlatformData.var = reactive(viewData?.platformLib?.var || {
+        app: {},
+        platform: {},
+      });
+    }
+
+
+    if (!pagePlatformData?.script) {
+      this.platformLibLoaded((data, propsMap) => {
+        const list = data.script
+        this.platformLib.script = {
+          app: list.app.reduce((acc, item) => {
+            acc[item.scriptCode] = item.scriptContent
+            return acc
+          }, {}),
+          platform: list.platform.reduce((acc, item) => {
+            acc[item.scriptCode] = item.scriptContent
+            return acc
+          }, {})
+        }
+        pagePlatformData.script = this.platformLib.script
+
+      })
+    }
+
+
+    if (pagePlatformData.const) {
+      this.platformLib.const = pagePlatformData.const
+    } else {
+      this.platformLib.const = reactive(viewData?.platformLib?.const || {
+        app: {},
+        platform: {},
+      });
+      pagePlatformData.const = this.platformLib.const
+    }
+
+    if (pagePlatformData.material) {
+      this.platformLib.material = pagePlatformData.material
+    } else {
+      this.platformLib.material = reactive(viewData?.platformLib?.material || {
+        app: {},
+        platform: {},
+      });
+
+      pagePlatformData.material = this.platformLib.material
+    }
+
+    if (pagePlatformData.method) {
+      this.platformLib.method = pagePlatformData.method
+    } else {
+      this.platformLib.method = reactive(viewData?.platformLib?.method || {
+        app: {},
+        platform: {},
+      });
+      pagePlatformData.method = this.platformLib.method
+    }
+  }
+
+  async #initCounter() {
+    this.created(async ()=>{
+      const res = await findRulePage({
+        pageNo: 1,
+        pageSize: 100,
+        appId: this.appId
+      })
+      this.data.counterData = res?.data?.records || []
+    })
+  }
+
+  /**
+   * 验证用户是否有效
+   * @date 2024/2/25 - 11:29:19
+   */
+  validateUser() {
+    const token = localStorage.getItem('ibsp_token')
+    validationLoginApi(token)
+      .then((res) => {
+        this.data.userInfo = reactive({
+          ...res.data,
+          token
+        })
+      })
+  }
+
+  #setPageResource() {
+    getUserResource('ZYLX-AN')
+      .then((res) => {
+        this.data.pageBtnResource = res.data
+      })
+
+  }
+
+  #initAppData() {
+  }
+
+  async #initComponentLib() {
+
+
+    if (this.appId && !this.libEnv) {
+      if (appComponentLibs.has(this.appId)) {
+        this.componentLibs = appComponentLibs.get(this.appId)
+        return
+      }
+      const res = await getAppComponentLibVersionApi(this.appId)
+      this.componentLibs = [
+        ...this.componentLibs,
+        ...res.data.map(item => ({
+          ...item,
+          id: item.compCode,
+          name: item.sysLibComp,
+        }))
+      ]
+      appComponentLibs.set(this.appId, this.componentLibs)
+
+
+    }
+
+
+    window.registerComponentLib = this.registerComponentLib
+    if (this.libEnv) {
+      const res = this.componentLibs
+      for (const item of res) {
+        await this.registerComponentLib(item)
+      }
+      return
+    }
+    if (this.localEnv) {
+      const res = this.componentLibs.filter((i) => ['common', 'systemApp', 'chartApp'].includes(i.id))
+      for (const item of res) {
+        await this.registerComponentLib(item)
+      }
+      return
+    }
+
+    for (const item of this.componentLibs) {
+      await this.registerComponentLib(item)
+    }
+  }
+
+  /**
+   * 获取页面json信息
+   * @date 2024/2/25 - 12:55:32
+   *
+   * @async
+   * @returns {Promise<Object>} viewData
+   */
+  async getPageVersionInfo() {
+    const res = await getPageVersionInfoApi(this.id);
+    const { data: { idPageConfig, viewJson, id } = {} } = res;
+    const viewData = JSON.parse(viewJson || '{}') || {};
+    this.pageConfigId = idPageConfig;
+    return viewData;
+  }
+
+  /**
+   *  获取页面配置信息
+   * @returns {Promise<Object>} 页面配置信息
+   */
+  async getPageConfigInfo() {
+    const { data = {} } = await getPageInfoApi(this.pageConfigId);
+    return data;
+  }
+
+  /**
+   * 添加设计模式class
+   */
+  addModeClass() {
+     
+    this.mode === 'Design' ? document.body.classList.add('designer-mode') : (
+      this.mode === 'Preview' ? document.body.classList.add('preview-mode') : ''
+    )
+  }
+
+  /**
+   * 设置当前环境的配置
+   */
+  async #setEnvConfigData() {
+    const appId = this.appId
+    let env = 'dev'
+    const envs = useEnv()
+    if (envs.IBSP_APP_MODE !== 'temp') {
+      env = envs.IBSP_APP_MODE
+    } else {
+      env = envs.env_mode
+    }
+    const res = await getEnvConfigApi({ appId, env, pageNo: 1, pageSize: 10000 });
+    this.data.envConfigData = res?.data?.records ?? [];
+  }
+
+  /**
+   *  更新页面配置值
+   * @param {Object} serviceConfigValue
+   */
+  #updatePageConfigValue(serviceConfigValue) {
+    const localPageConfigValue = this.pageConfigValue;
+    // 比较两个对象, 如果没有的属性按照localPageConfigValue,如果有属性没值不同按照serviceConfigValue, 深度比较
+    const newPageConfigValue = mergeWith(localPageConfigValue, serviceConfigValue, (objValue, srcValue) => {
+      if (isObject(objValue)) {
+        return merge(objValue, srcValue);
+      }
+      return srcValue;
+    });
+    this.pageConfigValue = reactive(newPageConfigValue);
+  }
+
+  /**
+   * 解析值, 用于动态值, 这里要传入完整的路径数组, 要包含类型
+   * @date 2024/3/6 - 20:37:47
+   *
+   * @param {Array} values
+   */
+  getDynamicValue = (values) => {
+    const res = this.analysisDynamicValue?.analysisDynamicValue?.(values)
+    return res
+  }
+
+  /**
+   * 查询当前角色应用下是否有权限
+   * @returns {Boolean}
+   */
+  queryRoleResourceAuth(roleCode) {
+    return !!this.appData.roleList.find(item => item.roleCode === roleCode)
+  }
+
+  registerComponentLib = async (targetLib) => {
+    if (targetLib.code) {
+      targetLib.id = targetLib.code
+    }
+    /**
+     * 注册组件库, 以下代码待优化 ！！！
+     */
+    let lib = targetLib
+
+    // --------------------- 外部组件库 ---------------------
+    if (targetLib.children) {
+      let existLib;
+      if (!this.libEnv) {
+        existLib = this.componentLibs.find(i => i.compCode === lib.id)
+        if (!existLib) {
+          console.error('未找到组件库', lib.id)
+          return
+        }
+      } else {
+        existLib = lib
+      }
+
+      if ((existLib.compCode || existLib.code) !== lib.id) {
+        lib.id = existLib.compCode
+        console.warn('组件库id不一致, 已自动修正:', lib.id)
+      }
+      const modules = targetLib.children
+      if (!lib) {
+        console.error('未找到对应的组件库:', targetLib)
+        return
+      }
+      if (this.localComponents[lib.id]) {
+        console.error('组件库已注册或id重复:', lib.id)
+        return
+      }
+      const ids = this.localComponentLibMap.common.ids
+      for (const element of modules) {
+        const item = element
+        if (ids.includes(item.id)) {
+          this.localComponentLibs.common.children.find(i => i.id === item.id)
+            .components
+            .push(...item.components)
+        }
+      }
+
+      this.localComponentLibs.other.push({
+        label: existLib.name || existLib.sysLibComp,
+        value: existLib.compCode || existLib.id,
+        id: existLib.id,
+        children: modules.filter(i => !ids.includes(i.id))
+      })
+      const resComponents = {}
+      for (const i of modules) {
+        const components = i.components
+        for (const component of components) {
+          component.type = i.id
+          component.source = {
+            lib: lib.id,
+            type: i.id,
+            id: component.id
+          }
+          resComponents[component.id] = component
+        }
+      }
+      this.localComponents[lib.id] = resComponents
+      return
+    }
+
+    // --------------------- 本地组件库 ---------------------
+    if (lib.platform) {
+      if (!this.localComponentLibMap[lib.id]) return
+      const res = await ((await this.localComponentLibMap[lib.id].path)?.default)?.()
+      if (res.id === 'Common') {
+        this.localComponentLibs.common = {
+          ...res,
+          label: res.name || res.label,
+          value: res.code || res.id,
+        }
+      } else {
+        this.localComponentLibs.other.push({
+          ...res,
+          label: res.name || res.label,
+          value: res.code || res.id,
+        })
+      }
+
+      const resComponents = {}
+      for (const i of res.children) {
+        const components = i.components
+        for (const component of components) {
+          if (!component.type) {
+            component.type = i.id
+          }
+
+          component.source = {
+            lib: lib.id,
+            type: i.id,
+            id: component.id
+          }
+          resComponents[component.id] = component
+        }
+      }
+      this.localComponents[lib.id] = resComponents
+    } else if (lib.files?.length) {
+      // --------------------- 加载外部组件库 ---------------------
+      const jsFile = lib.files.find(i => i.objectSuffix === 'js')
+      _waitCustomLib[lib.id] = {
+        loading: true,
+      }
+      const el = document.createElement('script')
+      el.src = `${IBSP_APP_OSS_WEB}${jsFile.fileStoragePath}`
+      document.body.appendChild(el)
+      el.onload = () => {
+        if (_waitCustomLib[lib.id]?.waitList?.length) {
+          _waitCustomLib[lib.id].waitList.forEach((item) => item())
+        }
+        _waitCustomLib[lib.id].loading = false
+      }
+
+    }
+  }
+
+  getConfigComponent = ({ component, source } = {}) => {
+    const s = component ? component.source : source
+    if (!s) return
+    return this.localComponents[s.lib]?.[s.id]
+  }
+
+  created = (callback) => {
+    this.#hooks.created.push(callback);
+    if (this.__inited === true) {
+      callback(this)
+    }
+  }
+
+  mounted = (callback) => {
+    this.#hooks.mounted.push(callback);
+  }
+
+  activated = (callback) => {
+    this.#hooks.activated.push(callback);
+  }
+
+  deactivated = (callback) => {
+    this.#hooks.deactivated.push(callback);
+    this._componentLoadedList = []
+  }
+
+  beforeDestroy = (callback) => {
+    this.#hooks.beforeDestroy.push(callback);
+  }
+
+  destroyed = (callback) => {
+    this.#hooks.destroyed.push(callback);
+  }
+
+  platformLibLoaded = (callback) => {
+    this.#hooks.platformLibLoaded.push(callback);
+  }
+
+  generateComponentPreviewData(list) {
+    const data = list || this.store.componentStore.componentData
+    return data.map((item) => {
+      return {
+        ...item,
+        data: {
+          // ...item.data,
+          staticData: item.data?.staticData,
+          dynamicData: []
+        },
+        dynamicValue: null,
+        analysisDynamicValue: null,
+        store: null,
+        component: null,
+        componentConfig: {
+          event: item.componentConfig.event?.filter?.(i=>i._isCustom)?.map?.(i=>({
+            key: i.key,
+            label: i.label,
+            _isCustom: true,
+            category: i.category
+          })) || [],
+        },
+        ref: null,
+        dom: null,
+        jsRun: '',
+        eventInstance: null,
+        visible: item.visible,
+      }
+    })
+  }
+
+  generatePreviewData() {
+    return {
+      name: this.name,
+      components: this.generateComponentPreviewData(),
+      appId: this.appId,
+      sysResourceId: this.sysResourceId,
+      pageConfigValue: this.pageConfigValue,
+      bindDynamicData: this.bindDynamicData,
+      platformLib: this.platformLib,
+      pageDataSource: this.pageDataSource || []
+    }
+  }
+
+  /**
+   * 注册钩子
+   * @param {String} hookName 钩子名称
+   * @returns {Function} 钩子函数
+   */
+  emitHook = (hookName) => {
+    if (!this.#hooks[hookName]) throw new Error(`${hookName} is not exist`)
+    return (...args) => {
+      this.#hooks[hookName].forEach((fn) => fn(...args));
+    }
+  }
+
+  useDataSource = (id, options = {}) => {
+    return this.dataModel.useDataModel(id, options);
+  }
+
+  useDataModel = (id, options = {}) => {
+    return this.dataModel.useDataModel(id, options);
+  }
+
+  get _token() {
+    const query = window.location.search.slice(1)
+      .split('&')
+      .reduce((prv, acr) => {
+        const [key, value] = acr.split('=')
+        prv[key] = value
+        return prv
+      }, {})
+    const platformToken = query?.ibsp_token || query?.token || ''
+    if (platformToken) {
+      localStorage.setItem('ibsp_token', platformToken)
+      localStorage.setItem('ibsp-token', platformToken)
+    }
+    return localStorage.getItem('ibsp_token')
+  }
+
+
+}
+
+
+/**
+ * 创建一个页面
+ * @date 2024/2/25 - 11:16:30
+ * @param {String} id 页面id
+ * @param {'Design' | 'Preview'} mode 模式
+ * @returns {IbspPage} 页面实例
+ */
+export const createIbspPage = (id, mode) => {
+  if (mode === 'Design') {
+    return new IbspPage(id, mode);
+  }
+  if (appPages.has(id)) {
+    const page = appPages.get(id);
+    page.__initCreated();
+    return page;
+  }
+  const page = new IbspPage(id, mode);
+  appPages.set(id, page);
+  return page;
+}