ibsp-fg-page 4.0.2

package/src/models/useStack.ts

@@ -0,0 +1,41 @@
+import { reactive, ref } from 'vue';
+
+
+export class Stack<T> {
+
+  list: T[] = reactive([]);
+  index = ref<number>(0);
+
+  push(stack: T) {
+    if (this.index.value > 0) {
+      this.clear(this.index.value);
+      this.index.value = 0;
+    }
+    this.list.unshift(stack);
+  }
+
+  get(index: number = 0): T[] {
+    let startIndex = this.index.value, endIndex = index;
+    if (index < this.index.value) {
+      startIndex = index;
+      endIndex = this.index.value;
+    }
+    let list = this.list.slice(startIndex, endIndex);
+    this.index.value = index;
+    return list;
+  }
+
+  // getByStack(stack: T): T[] {
+  //   let index = this.list.findIndex(item => item === stack);
+  //   if (index >= 0) {
+  //     return this.get(index);
+  //   }
+  //   return [];
+  // }
+
+  clear(len: number = this.list.length) {
+    this.list.splice(0, len);
+  }
+
+}
+

package/src/prodModels/index.ts

@@ -0,0 +1 @@
+export * from './useGlobalEvent'

package/src/prodModels/useGlobalEvent/events.ts

@@ -0,0 +1,7 @@
+export const eventMap = {
+  'onMobileFramePage': '打开移动端框架页面',
+  'onOpenMyNavigation': '打开我的侧边导航',
+  'downloadProgress': '下载进度',
+  'downloadComplete': '下载完成',
+  'downloadFailed': '下载失败'
+} as const

package/src/prodModels/useGlobalEvent/index.ts

@@ -0,0 +1,54 @@
+import { eventMap } from './events';
+type EventNames = keyof typeof eventMap
+
+class GlobalEventObserver {
+  private eventManager: Record<string, Set<Function>> = {};
+
+  state = {
+    print: {
+      messageCount: 0,
+      percentage: 0,
+      // 暂停
+      paused: true
+    }
+  }
+
+  subscribe(eventName: EventNames, listener: Function) {
+    if (!this.eventManager[eventName]) {
+      this.eventManager[eventName] = new Set();
+    } else if (this.eventManager[eventName].has(listener)) {
+      console.error('listener already exists');
+      return;
+    }
+    this.eventManager[eventName].add(listener);
+  }
+
+  unsubscribe(eventName: EventNames, listener: Function) {
+    if (this.eventManager[eventName]) {
+      this.eventManager[eventName].delete(listener);
+    }
+  }
+
+  notify(eventName: EventNames, ...args: any[]) {
+    if (this.eventManager[eventName]) {
+      this.eventManager[eventName].forEach((listener) => {
+        listener(...args);
+      });
+    }
+  }
+
+  get eventManagerList() {
+    return this.eventManager;
+  }
+}
+export const initGlobalEvent = () => {
+  return new GlobalEventObserver();
+}
+
+export const eventManager = initGlobalEvent()
+
+export const useGlobalEvent = () => {
+  return eventManager;
+}
+
+

package/src/router/hooks/useGuard.ts

@@ -0,0 +1,16 @@
+import type { Router } from 'vue-router';
+const TITLE_PREFIX = '综合业务平台-'
+export default (router:Router)=>{
+  router.beforeEach((to, from, next) => {
+    if ((!to.matched?.length)) {
+      next({ name: 'Error_404' });
+      return;
+    }
+    const title = to.meta.title
+    if (title) {
+    // @ts-ignore
+      document.title = TITLE_PREFIX + title;
+    }
+    next();
+  });
+}

package/src/router/hooks/useJumpTo.ts

@@ -0,0 +1,39 @@
+import { type Router } from 'vue-router';
+
+import { useGlobalEvent } from '@/models/useGlobalEvents'
+function isMobile() {
+  const userAgentInfo = navigator.userAgent
+  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
+  const getArr = Agents.filter(i => userAgentInfo.includes(i))
+  return !!getArr.length
+}
+
+export default (router: Router) => {
+  useGlobalEvent('loginExpired', () => {
+    let href = window.location.pathname
+    if (['/builtin/windowLogin', '/builtin/mobileLogin'].includes(href)) {
+      href = '/'
+    }
+    if (isMobile()) {
+      const regex = /preview\/([0-9a-fA-F-]+)/;
+      const match = href.match(regex);
+      if (match) {
+        href = '/preview/' + match[1]
+      }
+      router.replace({
+        name: 'MobileLogin',
+        query: {
+          redirect: href
+        }
+      });
+    } else {
+      router.replace({
+        name: 'WindowLogin',
+        query: {
+          redirect: href
+        }
+      });
+    }
+
+  })
+}

package/src/router/index.ts

@@ -0,0 +1,62 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import useGuard from './hooks/useGuard'
+import useJumpTo from './hooks/useJumpTo'
+
+import { builtinPages } from '@/views/builtins'
+
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import('@/views/home/index.vue'),
+      children: [
+
+      ]
+    },
+    {
+      path: '/:id',
+      name: 'DesignerHome',
+      component: ()=>import('../views/designer/index.vue')
+    },
+    {
+      path: '/preview',
+      children: [
+        {
+          path: ':id',
+          name: 'Preview',
+          component: () => import('@preview/src/index.vue'),
+          children: [
+            {
+              path: ':childId',
+              name: 'PreviewChild',
+              component: () => import('@preview/src/index.vue')
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: '/builtin',
+      children: builtinPages
+    },
+    {
+      path: '/doc',
+      name: 'Doc',
+      component: () => import('@/views/doc/src/index.vue')
+    },
+    {
+      path: '/template',
+      name: 'Template',
+      component: () => import('@/views/template/src/index.vue')
+    }
+  ]
+})
+
+useGuard(router)
+useJumpTo(router)
+
+export default router

package/src/router/meta.d.ts

@@ -0,0 +1,7 @@
+declare module 'vue-router' {
+  interface RouteMeta {
+    /** document title */
+    title?: string;
+  }
+}
+export {}

package/src/stores/index.ts

@@ -0,0 +1,3 @@
+export { default as useComponentStore, defineNameStore as defineNameComponentStore } from './useComponentStore'
+export { default as usePlatformStore, platformFun, platformDataFunMap } from './usePlatformStore.js'
+export { default as usePlatformLibStore, props_map as platformLibPropsMap } from './usePlatformLibStore.js'

package/src/stores/useComponentStore.ts

@@ -0,0 +1,250 @@
+import { defineStore } from 'pinia';
+import { ref, computed, reactive } from 'vue'
+import { v4 } from 'uuid';
+import { map, groupBy } from 'lodash-es';
+const onHandleFn = ()=>{
+
+  const componentData = ref<IBSP.IComponent.DesignComponent[]>([])
+
+  /**
+   * map组件数据列表, key是组件id
+   * @date 2024/1/28 - 17:13:40
+   */
+  const componentDataMap = computed<Record<string, IBSP.IComponent.DesignComponent>>(() =>(
+    componentData.value.reduce((prev, cur) => {
+      prev[cur.id] = cur
+      return prev
+    }, {} as Record<string, IBSP.IComponent.DesignComponent>)
+  ))
+
+
+  /**
+   * 树形组件数据列表, 这里只是简单的树形结构, 不包含组件实例, 只包含组件元数据
+   * @date 2024/1/28 - 17:13:21
+   * @param {DesignComponent} [component] 树形结构的根节点, 如果不传, 则返回整个树形结构
+   * @param {Function} [filterCallbackFn=()=>true] 过滤函数
+   */
+  const queryComponentDataTree = (component?: IBSP.IComponent.DesignComponent, {
+    filter = ()=>true,
+    map = (item: IBSP.IComponent.DesignComponent) =>({
+      id: item.id,
+      componentMetaId: item.componentMetaId,
+      parentId: item.parentId,
+      children: [],
+      componentIcon: item.icon,
+      type: item.type,
+      label: item.name || item.label,
+      show: item.show,
+      showInPrecis: item.showInPrecis
+    })
+  } = {}) => {
+    let result: ReturnType<typeof map>[] = []
+    const newData = componentData.value.map(map).filter(filter);
+    // newData.reverse();
+    const dataMap = groupBy(newData, 'parentId')
+    if (component?.id) {
+      result = [map(component)]
+      const children = dataMap[component.id]
+      if (children?.length) {
+        (result[0].children as ReturnType<typeof map>[]) = children
+        children?.forEach(item => {
+          if (dataMap[item.id]) {
+            (item.children as ReturnType<typeof map>[]) = dataMap[item.id]
+          }
+        })
+      }
+    } else {
+      newData.forEach(item => {
+        if (!item.parentId) result.push(item)
+        if (dataMap[item.id]) {
+          (item.children as ReturnType<typeof map>[]) = dataMap[item.id]
+        }
+      })
+    }
+
+    return result
+  }
+
+
+  const activeComponent = computed(() => {
+    return componentData.value.find(item => item.active)
+  })
+
+  const tempActiveComponent = ref<IBSP.IComponent.DesignComponent[]>([]);
+
+  /**
+   * 根据组件类型查询组件数据列表
+   * @date 2024/1/28 - 17:12:18
+   * @param {String} type
+   */
+  const queryComponentTypeData = (type: string) => {
+    return componentData.value.filter(item => item.type === type)
+  }
+
+  /**
+   * 根据组件id查询子组件数据列表
+   * @date 2024/1/28 - 17:12:39
+   * @param {String} id
+   */
+  const queryComponentChildrenData = (id: string) => {
+    return componentData.value.filter(item => item.parentId === id)
+  }
+  /**
+   * 根据组件id查询父组件数据列表
+   * @date 2024/1/28 - 17:12:55
+   * @param {String} id
+   */
+  const queryComponentParent = (component: IBSP.IComponent.DesignComponent) => {
+    const parentId = component?.parentId
+    if (!parentId) return null
+    return componentData.value.find(item => item.id === parentId)
+  }
+
+  const dataContextModelMap = computed(()=>{
+    return componentData.value.filter((item:IBSP.IComponent.DesignComponent)=>{
+      return (item.data as {contextModel:Record<string, any>}).contextModel
+    }).reduce((acc:any, item:any)=>{
+      acc[item.id] = item.data.contextModel
+      return acc
+    }, {})
+  })
+
+
+  /**
+   * 获取组件的动态数据
+   * @returns {Array}
+   */
+  const queryDynamicValueData = () => {
+    return componentData.value
+      .map(item=>{
+        const dynamicValueDataMap = (item as any).dynamicValue?.dynamicValueDataMap
+        const result = []
+
+        for (const key in dynamicValueDataMap) {
+          result.push({
+            value: key,
+            label: dynamicValueDataMap[key].label,
+            children: dynamicValueDataMap[key].fields
+          })
+        }
+        return {
+          label: item.name || item.label,
+          value: item.id,
+          children: result
+        }
+      })
+      .filter(item=>item?.children?.length)
+  }
+
+  const queryParentDataContainer = (component: IBSP.IComponent.DesignComponent) => {
+    if (!component) {
+      return null
+    }
+    if (component.dataContainer) {
+      return component
+    }
+    const parent = queryComponentParent(component)
+    if (!parent) {
+      return null
+    }
+    return queryParentDataContainer(parent)
+  }
+
+  /**
+   * 根据ID获取组件
+   * @param componentId - 组件ID
+   */
+  const getComponentById = (componentId: string) => {
+    return componentData.value.find(item => item.id === componentId);
+  }
+
+  const selections = ref<IBSP.IComponent.DesignComponent[]>([])
+  const selectionBox = ref({})
+
+  const setSelections = (data: IBSP.IComponent.DesignComponent[], box: any) => {
+    selections.value = data;
+    if (box) {
+      selectionBox.value = box;
+    }
+  }
+
+  /**
+   * 查询目标组件的所有子组件， 结果为扁平化的数组， 包括目标组件
+   * @param component - 目标组件
+   * @param options - 配置项
+   * @param options.map - 映射函数
+   * @param options.filter - 过滤函数
+   * @returns {Array}
+   */
+  const queryComponentDataTreePlat = (component: IBSP.IComponent.DesignComponent, {
+    map = null,
+    filter = null,
+    self = true
+  } = {})=>{
+    if (!component) {
+      return []
+    }
+    let result = self ? [component] : []
+    const id = component.id
+    const children = queryComponentChildrenData(id)
+    if (children.length) {
+      const deepAdd = (list: typeof children, result: typeof children) => {
+        list.forEach(item=>{
+          result.push(item)
+          const children = queryComponentChildrenData(item.id)
+          if (children?.length) {
+            deepAdd(children, result)
+          }
+        })
+      }
+      deepAdd(children, result)
+    }
+    if (filter && typeof filter === 'function') {
+      result = result.filter(filter)
+    }
+    if (map && typeof map === 'function') {
+      result = result.map(map)
+    }
+    return result
+
+  }
+
+  const setTempActiveComponent = (components: IBSP.IComponent.DesignComponent[]) => {
+    tempActiveComponent.value = components;
+  }
+
+
+  return {
+    componentData,
+    componentDataMap,
+    activeComponent,
+    tempActiveComponent,
+    dataContextModelMap,
+    setTempActiveComponent,
+    selections,
+    setSelections,
+    selectionBox,
+    getComponentById,
+    queryComponentTypeData,
+    queryComponentChildrenData,
+    queryComponentParent,
+    queryComponentDataTree,
+    queryDynamicValueData,
+    queryComponentDataTreePlat,
+    queryParentDataContainer
+  }
+
+}
+
+/**
+ * 定义一个名字为name的store, name 必须是唯一,
+ * @date 2024/1/10 - 15:33:55
+ * @export
+ * @param {String} [name] store名字, 默认是uuid
+ */
+export function defineNameStore(name = v4()) {
+  return defineStore(`useComponentStore - ${name}`, onHandleFn)()
+}
+
+export default defineStore('useComponentStore', onHandleFn);
+

package/src/stores/usePlatformLibStore.js

@@ -0,0 +1,212 @@
+import { defineStore } from 'pinia';
+import { reactive, computed } from 'vue'
+
+import { getAllMethodApi, getAllScriptApi, getAllConstApi, getAllVarApi, getPagePaginApi } from '@/api/ibsp-bg-app';
+import { toTreeData } from '@/utils/index.js'
+export const PAGE_LIB_TYPE_METHOD = {
+  var: getAllVarApi,
+  const: getAllConstApi,
+  script: getAllScriptApi,
+  method: getAllMethodApi,
+  material: getPagePaginApi
+}
+
+export const props_map = {
+  var: {
+    code: 'varCode',
+    value: 'defaultValue',
+    label: 'varName'
+  },
+  const: {
+    code: 'constCode',
+    value: 'constValue',
+    label: 'constName'
+  },
+  script: {
+    code: 'scriptCode',
+    value: 'scriptContent',
+    label: 'scriptName'
+  },
+  method: {
+    code: 'funcCode',
+    value: 'funcBody',
+    label: 'funcName'
+  },
+  material: {
+    code: 'matCode',
+    value: 'matUrl',
+    label: 'matName'
+  }
+}
+
+
+export default defineStore('usePlatformLibStore', ()=>{
+  const varData = reactive({
+    platform: [],
+    app: [],
+    updateTime: {
+      platform: 0,
+      app: 0
+    }
+  })
+  const constData = reactive({
+    platform: [],
+    app: [],
+    updateTime: {
+      platform: 0,
+      app: 0
+    }
+  })
+  const scriptData = reactive({
+    platform: [],
+    app: [],
+    updateTime: {
+      platform: 0,
+      app: 0
+    }
+  })
+  const methodData = reactive({
+    platform: [],
+    app: [],
+    updateTime: {
+      platform: 0,
+      app: 0
+    }
+  })
+  const materialData = reactive({
+    platform: [],
+    app: [],
+    updateTime: {
+      platform: 0,
+      app: 0
+    }
+  })
+
+  const platformLibData = computed(()=>({
+    var: varData,
+    const: constData,
+    script: scriptData,
+    method: methodData,
+    material: materialData
+  }))
+
+  const getPlatformLibData = (type) => {
+    return platformLibData.value[type]
+  }
+
+
+  const getPlatformLibDataValue = (type, mode, code) => {
+    if (['var', 'const'].includes(type)) {
+      return platformLibData.value[type][mode].find(item => item[props_map[type].code] === code)?.[props_map[type].value]
+    }
+  }
+
+  /**
+   * 刷新平台库数据
+   * @param props {Object}
+   * @param {Array<'var' | 'const' | 'script' | 'method' | 'material'>} [props.types] 刷新类型，var、const、script、method、material
+   * @param {String} [props.appId]
+   * @param {Function} [props.refreshedCallback] 刷新完成回调
+   * @return {Promise<void>}
+   */
+  const refreshPlatformLibData = async (props)=>{
+    const {
+      types = ['var', 'const', 'script', 'method', 'material'],
+      refreshedCallback = null,
+      appId = ''
+    } = props || {};
+
+    const keys = Object.keys(PAGE_LIB_TYPE_METHOD)
+    const _types = types.filter(type=>keys.includes(type))
+    const _getData = async(appId = '')=>{
+      return (await Promise.all(
+        _types.map(async type=>{
+          if (!keys.includes(type)) return
+          const { data } = await PAGE_LIB_TYPE_METHOD[type](appId);
+          let res = ((Array.isArray(data) ? data : data?.records) || []).map(item=>({
+            ...item,
+            label: item[props_map[type]?.label],
+            value: item[props_map[type]?.value]
+          }))
+          return {
+            type,
+            data: res
+          }
+        })
+      )).filter(Boolean)
+    }
+    const [platformData, appData] = await Promise.all([
+      _getData(),
+      _getData(appId || window.appId)
+    ])
+    appData.forEach(item=>{
+      platformLibData.value[item.type].app = item.data
+      platformLibData.value[item.type].updateTime.app = Date.now();
+    })
+    platformData.forEach(item=>{
+      platformLibData.value[item.type].platform = item.data
+      platformLibData.value[item.type].updateTime.platform = Date.now();
+    })
+    refreshedCallback?.(platformLibData.value, props_map)
+  }
+
+  const getScriptByType = (lvl, type) => {
+    let data = [];
+    scriptData[lvl].forEach(
+      item => {
+        let remark = null;
+        try {
+          remark = JSON.parse(item.remark)
+        } catch (error) {
+          remark = null;
+        }
+        if (remark && remark.type === type) {
+          data.push(item);
+        }
+      }
+    )
+    return data;
+  }
+
+  const getScriptExcludeType = (lvl, type) => {
+    let data = [];
+    scriptData[lvl].forEach(
+      item => {
+        let remark = null;
+        try {
+          remark = JSON.parse(item.remark)
+        } catch (error) {
+          remark = null;
+        }
+        if (!remark || remark?.type !== type) {
+          data.push(item);
+        }
+      }
+    )
+    return data;
+  }
+
+  const getScriptByComponentId = (componentId) => {
+    let data = [...scriptData.app, ...scriptData.platform];
+    return data.filter(item => {
+      let remark = null;
+      try {
+        remark = JSON.parse(item.remark)
+      } catch (error) {
+        remark = null;
+      }
+      return remark && remark?.componentId === componentId
+    })
+  }
+
+  return {
+    platformLibData,
+    getPlatformLibData,
+    refreshPlatformLibData,
+    getPlatformLibDataValue,
+    getScriptByType,
+    getScriptExcludeType,
+    getScriptByComponentId
+  }
+
+});