bl-common-vue3 3.8.110 → 3.8.111

package/index.js

@@ -9,6 +9,7 @@ export {
   getGlobalContainer,
 } from "./src/common/utils/popupContainer";
 import popupContainer from "./src/common/utils/popupContainer";
+import RenderCustomApp from "./src/Directives/RenderCustomApp/directive.js";
 
 export const install = function (app) {
   Object.keys(components).map((key) => {
@@ -27,4 +28,7 @@ export default {
   commonLocale,
   commonAllLocale,
   ...popupContainer,
+  directives: {
+    RenderCustomApp: RenderCustomApp,
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.110",
+  "version": "3.8.111",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/Directives/RenderCustomApp/directive.js

@@ -0,0 +1,184 @@
+import RenderCustomApp from "./index.vue";
+import { createApp, defineComponent, h, reactive } from "vue";
+import utils from "../../common/utils/util.js";
+
+// 从 basicConfig 中获取微应用加载需求配置。
+const getCustomizationAppsConfig = () => {
+  return utils.getCommonLocal("basicConfig")?.org_extra_config?.customization_apps || {};
+};
+
+// 记录当前宿主元素上挂载的内部 Vue 应用实例，便于更新和卸载。
+const MICRO_APP_INSTANCE = "__microAppInst__";
+// 记录宿主元素被指令隐藏前的 display，key 恢复有效时用于还原。
+const MICRO_APP_HOST_DISPLAY = "__microAppHostDisplay__";
+// 标记宿主元素是否由当前指令隐藏，避免误恢复业务自身控制的 display。
+const MICRO_APP_HOST_HIDDEN = "__microAppHostHidden__";
+// 对外派发的统一事件名，使用冒号命名避免与原生或业务事件冲突。
+const MICRO_APP_DATA_CHANGE_EVENT = "micro:change";
+
+// 统一指令入参，避免 binding.value 为空时后续访问报错。
+const getDirectiveValue = (binding = {}, vnode = {}) => {
+  const props = vnode?.props || {};
+  return {
+    key: binding.value || "",
+    // microAppTagName 传入micro-app自定义tagName
+    microAppTagName: props.microAppTagName || "",
+    // microData 传入业务入参，默认值为空对象
+    microData: props.microData || {},
+  };
+};
+
+// key 失效后若宿主元素已无 DOM 子元素，则隐藏宿主，避免空容器继续占位。
+const hideEmptyHostElement = (el) => {
+  if (el.children.length) {
+    return;
+  }
+  if (!el[MICRO_APP_HOST_HIDDEN]) {
+    el[MICRO_APP_HOST_DISPLAY] = el.style.display || "";
+  }
+  el.style.display = "none";
+  el[MICRO_APP_HOST_HIDDEN] = true;
+};
+
+// key 重新有效时恢复由指令隐藏的宿主元素。
+const showHostElement = (el) => {
+  if (!el[MICRO_APP_HOST_HIDDEN]) {
+    return;
+  }
+  el.style.display = el[MICRO_APP_HOST_DISPLAY] || "";
+  delete el[MICRO_APP_HOST_DISPLAY];
+  delete el[MICRO_APP_HOST_HIDDEN];
+};
+
+// 将微应用数据变更透传给指令调用方，统一通过 DOM 事件接收。
+const dispatchDatachange = (el, binding, data) => {
+  const directiveValue = getDirectiveValue(binding);
+  const detail = {
+    key: directiveValue.key || "",
+    data,
+  };
+
+  // 派发 DOM 事件，兼容 addEventListener 和 Vue 模板监听。
+  [MICRO_APP_DATA_CHANGE_EVENT].forEach((eventName) => {
+    el.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  });
+};
+
+// 清空宿主原始子元素前记录当前占位高度，避免 loading 因容器无固高而定位到错误区域。
+const getHostStyle = (el) => {
+  const height = Math.ceil(el.getBoundingClientRect?.().height || 0);
+
+  if (!height) {
+    return {};
+  }
+
+  return {
+    minHeight: `${height}px`,
+  };
+};
+
+// 在指令宿主元素内创建独立 Vue 应用，用组件方式渲染真实 micro-app。
+const mountMicroApp = (el, binding, vnode) => {
+  showHostElement(el);
+  const state = reactive({
+    bindValue: getDirectiveValue(binding, vnode),
+    customizationAppsConfig: getCustomizationAppsConfig(),
+    hostStyle: getHostStyle(el),
+  });
+
+  const app = createApp(
+    defineComponent({
+      name: "RenderCustomAppDirectiveRoot",
+      setup() {
+        return () =>
+          h(RenderCustomApp, {
+            microId: state.bindValue.key || "",
+            microAppTagName: state.bindValue.microAppTagName || "",
+            microData: state.bindValue.microData || {},
+            hostStyle: state.hostStyle,
+            customizationAppsConfig: state.customizationAppsConfig,
+            "onMicro:change": (data) => {
+              const instance = el[MICRO_APP_INSTANCE];
+              dispatchDatachange(el, instance?.binding || binding, data);
+            },
+          });
+      },
+    })
+  );
+
+  // 继承宿主应用上下文，确保内部组件可以继续使用全局插件、store、i18n 等能力。
+  const hostAppContext =
+    vnode?.appContext ||
+    binding?.instance?.$?.appContext ||
+    binding?.instance?.$?.vnode?.appContext ||
+    null;
+  if (hostAppContext) {
+    Object.assign(app._context, hostAppContext);
+  }
+  // 清空宿主元素原内容，再挂载微应用包装组件。
+  el.innerHTML = "";
+  app.mount(el);
+  el[MICRO_APP_INSTANCE] = {
+    app,
+    binding,
+    state,
+  };
+};
+
+// 响应指令参数变化：无 key 时卸载，有实例时只更新响应式入参。
+const updateMicroApp = (el, binding, vnode) => {
+  const instance = el[MICRO_APP_INSTANCE];
+  const bindingValue = getDirectiveValue(binding, vnode) || {};
+  const customizationAppsConfig = getCustomizationAppsConfig();
+  if (!bindingValue.key || !customizationAppsConfig?.[bindingValue.key]) {
+    unmountMicroApp(el, {
+      hideEmptyHost: true,
+    });
+    return;
+  }
+  showHostElement(el);
+  if (!instance) {
+    mountMicroApp(el, binding, vnode);
+    return;
+  }
+
+  instance.state.bindValue = bindingValue;
+  instance.state.customizationAppsConfig = customizationAppsConfig;
+  // 已挂载后若宿主尺寸变化，保留最新占位信息供 loading 居中使用。
+  instance.state.hostStyle = getHostStyle(el);
+  instance.binding = binding;
+};
+
+// 宿主组件卸载或 key 失效时，销毁内部 Vue 应用并移除实例引用。
+const unmountMicroApp = (el, options = {}) => {
+  const instance = el[MICRO_APP_INSTANCE];
+
+  if (instance?.app) {
+    instance.app.unmount();
+    delete el[MICRO_APP_INSTANCE];
+  }
+  if (options.hideEmptyHost) {
+    hideEmptyHostElement(el);
+  }
+};
+
+export default {
+  // 指令挂载时初始化微应用实例。
+  mounted(el, binding, vnode) {
+    updateMicroApp(el, binding, vnode);
+  },
+  // 指令参数变化时更新微应用实例。
+  updated(el, binding, vnode) {
+    updateMicroApp(el, binding, vnode);
+  },
+  // 指令卸载时卸载微应用实例。
+  beforeUnmount(el) {
+    unmountMicroApp(el);
+  },
+};

package/src/Directives/RenderCustomApp/index.vue

@@ -0,0 +1,401 @@
+<template>
+  <template v-if="renderAppConfigList.length">
+    <template v-for="renderAppConfig in renderAppConfigList" :key="renderAppConfig.name">
+      <div
+        class="use-micro-app-wrap"
+        :style="[renderHostStyle, renderAppConfig.style]"
+      >
+        <component
+          v-if="renderAppConfig.type === RENDER_APP_TYPE.MICRO"
+          :is="renderMicroAppTagName"
+          :key="`${renderMicroAppTagName}_${renderAppConfig.name}`"
+          class="use-micro-app"
+          router-mode="state"
+          :name="renderAppConfig.name"
+          :url="renderAppConfig.entry"
+          :default-page="renderAppConfig.defaultPage"
+          :data="childAppData"
+          @mounted="handleRenderAppLoadEnd(renderAppConfig.name)"
+          @error="handleRenderAppLoadEnd(renderAppConfig.name)"
+          @datachange="handleDataChange"
+          destroy
+        />
+        <iframe
+          v-else
+          class="use-micro-app use-iframe-app"
+          :src="renderAppConfig.src"
+          frameborder="0"
+          @load="handleRenderAppLoadEnd(renderAppConfig.name)"
+          @error="handleRenderAppLoadEnd(renderAppConfig.name)"
+        ></iframe>
+        <div
+          v-if="loadingAppMap[renderAppConfig.name]"
+          class="use-micro-app-loading"
+        >
+          <a-spin />
+        </div>
+      </div>
+    </template>
+  </template>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, reactive, watch } from "vue";
+import { Spin } from "ant-design-vue";
+import utils from "../../common/utils/util";
+import microApp from "kj-micro-app";
+
+const RENDER_APP_TYPE = {
+  MICRO: "micro",
+  IFRAME: "iframe",
+};
+const DEFAULT_MICRO_APP_TAG_NAME = "micro-app";
+const IFRAME_DEFAULT_STYLE = {
+  height: "inherit",
+};
+const LOADING_MAX_WAIT = 15000;
+
+// 从 basicConfig 中获取定制应用渲染配置。
+const getCustomizationAppsConfig = () => {
+  return utils.getCommonLocal("basicConfig")?.org_extra_config?.customization_apps || {};
+};
+
+// 新配置固定为 key -> Array
+const getRenderConfigList = (config) => {
+  return Array.isArray(config) ? config.filter(Boolean) : [];
+};
+
+// micro-app 实例名必须稳定且唯一，iframe 也复用该 name 作为渲染 key。
+const getRenderAppName = (microId, type, index) => {
+  return `${microId}_${type}_${index}`;
+};
+
+// 根据当前运行环境选择应用入口，开发环境使用 path_dev，生产环境使用 path_prod。
+const getRenderEntry = (config) => {
+  return utils.isEnv() ? config?.path_dev || "" : config?.path_prod || "";
+};
+
+// 统一序列化 query，过滤空值，避免 iframe 和 micro-app 两套逻辑重复处理。
+const stringifyQuery = (query = {}) => {
+  return Object.keys(query)
+    .filter((key) => query[key] !== undefined && query[key] !== null && query[key] !== "")
+    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
+    .join("&");
+};
+
+// micro-app 使用 hash 路由，iframe 同样拼到入口后作为页面地址。
+const formatDefaultPage = (url, type, query = {}) => {
+  if (!url) {
+    return "";
+  }
+
+  const queryParams = stringifyQuery(query);
+  let pageUrl = url;
+  if(type === RENDER_APP_TYPE.MICRO) {
+    pageUrl = url.indexOf("#") === 0 ? url : `#${url}`;
+  }
+
+  if (queryParams) {
+    return pageUrl.indexOf("?") === -1 ? `${pageUrl}?${queryParams}` : `${pageUrl}&${queryParams}`;
+  }
+
+  return pageUrl;
+};
+
+// iframe 没有 default-page 概念，需要把入口和 hash 页面路径拼成完整 src。
+const formatIframeSrc = (entry, defaultPage) => {
+  if (!defaultPage) {
+    return "";
+  }
+
+  // defaultPage包含http协议，直接返回
+  if(defaultPage.indexOf("http") === 0) {
+    return defaultPage;
+  }
+
+  return `${entry.replace(/\/?$/, "/")}${defaultPage}`;
+};
+
+// 样式只使用定制应用配置，避免继续接收旧指令对象里的 styles。
+const getRenderStyle = (config, type) => {
+  const configStyle = config?.style || {};
+  const style = {
+    ...configStyle,
+  };
+
+  if (type === RENDER_APP_TYPE.IFRAME) {
+    return {
+      ...IFRAME_DEFAULT_STYLE,
+      ...style,
+    };
+  }
+
+  return style;
+};
+
+// 合并默认下发数据和 microData，业务入参固定放在 data.microData 中。
+const mergeChildAppData = (baseData = {}, microData = {}, microId) => {
+  return {
+    ...baseData,
+    props: {
+      ...(baseData.props || {}),
+    },
+    microData: {
+      key: microId,
+      ...microData,
+    },
+  };
+};
+
+export default defineComponent({
+  name: "RenderCustomApp",
+  components: {
+    "a-spin": Spin,
+  },
+  props: {
+    // 定制应用 id。
+    microId: {
+      type: String,
+      default: "",
+    },
+    // 定制应用数据。
+    microData: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 宿主应用注册 micro-app.start 时配置的 tagName，由 v-microId 指令参数显式传入。
+    microAppTagName: {
+      type: String,
+      default: "",
+    },
+    // 指令清空原始子元素前记录的宿主占位样式，用于让 loading 在原卡片区域内居中。
+    hostStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 定制应用渲染配置。
+    customizationAppsConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ["micro:change"],
+  setup(props, { emit }) {
+    const currentInstance = getCurrentInstance();
+    // 从继承到的宿主上下文中读取全局能力，用于补全路由参数和下发公共数据。
+    const hostStore = computed(() => currentInstance?.proxy?.$store);
+    const hostRoute = computed(() => currentInstance?.proxy?.$route);
+    const hostUtils = computed(() => currentInstance?.proxy?.$utils);
+    // 宿主应用配置的全局 tagName。
+    const hostMicroAppTagName = computed(() => currentInstance?.proxy?.$microAppTagName);
+    const loadingAppMap = reactive({});
+    const loadingTimeoutTimerMap = {};
+
+    // 从 props 中获取 microId，用于从 customization_apps 中定位需要渲染的应用列表。
+    const microId = computed(() => props.microId || "");
+    const renderMicroAppTagName = computed(() => {
+      return props.microAppTagName || hostMicroAppTagName.value || DEFAULT_MICRO_APP_TAG_NAME;
+    });
+    const renderHostStyle = computed(() => props.hostStyle || {});
+
+    // 优先使用指令显式传入的配置，否则从公共缓存 basicConfig 中读取。
+    const customizationAppsConfig = computed(() => {
+      return Object.keys(props.customizationAppsConfig || {}).length
+        ? props.customizationAppsConfig
+        : getCustomizationAppsConfig();
+    });
+
+    // 将新格式配置转换为模板可直接渲染的 micro-app / iframe 配置。
+    const renderAppConfigList = computed(() => {
+      const configs = getRenderConfigList(customizationAppsConfig.value?.[microId.value]);
+
+      return configs
+        .map((config, index) => {
+          const type = config?.type || "";
+          const entry = getRenderEntry(config);
+          const defaultPage = formatDefaultPage(config?.url || "", type, hostRoute.value?.query || {});
+          const name = getRenderAppName(microId.value, type, index);
+          const style = getRenderStyle(config, type);
+          const renderConfig = {
+            ...config,
+            type,
+            name,
+            entry,
+            defaultPage,
+            style,
+          };
+
+          // iframe 渲染需要完整 src，micro-app 仍然使用 entry + defaultPage。
+          if (type === RENDER_APP_TYPE.IFRAME) {
+            renderConfig.src = formatIframeSrc(entry, defaultPage);
+          }
+
+          return renderConfig;
+        })
+        .filter((config) => {
+          if (config.type === RENDER_APP_TYPE.MICRO) {
+            return config.name && config.entry && config.defaultPage;
+          }
+          if (config.type === RENDER_APP_TYPE.IFRAME) {
+            return config.name && config.src;
+          }
+          return false;
+        });
+    });
+
+    // 默认下发宿主公共数据，业务入参只从 v-microId 宿主节点的 microData 读取。
+    const childAppData = computed(() => {
+      const baseData =
+        hostUtils.value?.getAppToChildData?.({}) ||
+        (hostStore.value?.getters?.mainAppInfo ? { props: hostStore.value.getters.mainAppInfo } : {});
+
+      return mergeChildAppData(baseData, props?.microData || {}, microId.value);
+    });
+
+    // 只记录 micro-app 实例名，iframe 不需要走 microApp.unmountApp 销毁流程。
+    const microAppNameList = computed(() => {
+      return renderAppConfigList.value
+        .filter((item) => item.type === RENDER_APP_TYPE.MICRO)
+        .map((item) => item.name);
+    });
+    const renderAppNameList = computed(() => {
+      return renderAppConfigList.value.map((item) => item.name);
+    });
+
+    // 切换 key 或组件卸载时主动销毁仍处于激活状态的 micro-app 实例。
+    const unmountApp = (name) => {
+      if (!name) {
+        return;
+      }
+
+      const activeApps = microApp.getActiveApps?.() || [];
+      if (!activeApps.includes(name)) {
+        return;
+      }
+
+      Promise.resolve(
+        microApp.unmountApp(name, {
+          destroy: true,
+          clearAliveState: true,
+        })
+      ).catch(() => {});
+    };
+
+    const clearLoadingTimer = (name) => {
+      if (!name) {
+        return;
+      }
+
+      if (loadingTimeoutTimerMap[name]) {
+        clearTimeout(loadingTimeoutTimerMap[name]);
+        delete loadingTimeoutTimerMap[name];
+      }
+    };
+
+    // micro-app mounted/error 或 iframe load/error 后关闭当前实例 loading。
+    const handleRenderAppLoadEnd = (name) => {
+      const loadingInfo = loadingAppMap[name];
+      if (!loadingInfo) {
+        return;
+      }
+
+      clearLoadingTimer(name);
+      delete loadingAppMap[name];
+    };
+
+    // 使用 Ant Design Vue 的 Spin 表示加载中，等待真实事件或兜底超时结束。
+    const startRenderAppLoading = (name) => {
+      if (!name || loadingAppMap[name]) {
+        return;
+      }
+
+      loadingAppMap[name] = true;
+      // 防止自定义标签异常未派发 mounted/error 时 loading 永久停留，正常场景会被真实事件提前清理。
+      loadingTimeoutTimerMap[name] = setTimeout(() => {
+        handleRenderAppLoadEnd(name);
+      }, LOADING_MAX_WAIT);
+    };
+
+    // 将 micro-app 子应用派发的数据事件重新抛给使用指令的宿主元素。
+    const handleDataChange = (event) => {
+      emit("micro:change", event?.detail?.data);
+    };
+
+    // 配置列表变化时，同步 micro-app 和 iframe 的 loading 生命周期。
+    watch(
+      () => renderAppNameList.value,
+      (names, oldNames = []) => {
+        names.forEach((name) => {
+          startRenderAppLoading(name);
+        });
+        oldNames
+          .filter((name) => name && !names.includes(name))
+          .forEach((name) => {
+            clearLoadingTimer(name);
+            delete loadingAppMap[name];
+          });
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    // 配置列表变化时，只销毁已移除的 micro-app，保留仍在使用的实例。
+    watch(
+      () => microAppNameList.value,
+      (names, oldNames = []) => {
+        oldNames
+          .filter((name) => name && !names.includes(name))
+          .forEach((name) => {
+            unmountApp(name);
+          });
+      }
+    );
+
+    // 宿主组件卸载时统一释放由指令创建的 micro-app 实例。
+    onBeforeUnmount(() => {
+      Object.keys(loadingTimeoutTimerMap).forEach(clearLoadingTimer);
+      microAppNameList.value.forEach(unmountApp);
+    });
+
+    return {
+      RENDER_APP_TYPE,
+      childAppData,
+      handleDataChange,
+      handleRenderAppLoadEnd,
+      loadingAppMap,
+      renderHostStyle,
+      renderMicroAppTagName,
+      renderAppConfigList,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.use-micro-app {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.use-micro-app-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.use-micro-app-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+.use-iframe-app {
+  border: 0;
+}
+</style>