cloud-web-corejs 1.0.54-dev.8 → 1.0.54-dev.800

package/src/microRouter/index.js

@@ -0,0 +1,447 @@
+/**
+ * qiankun 主应用侧：应用注册表驱动的子应用注册。
+ * 注册表载体为逻辑参数 micro_app_registry（JSON 数组），
+ * 协议见 docs/qiankun微前端改造-实现方案.md 3.2 / 3.4。
+ * 由 permission store 在登录后菜单生成流程中调用（settings.microMainEnabled 门控）。
+ */
+import { loadMicroApp } from "qiankun";
+import { Loading } from "element-ui";
+import { getLogicParamValue } from "@base/api/user";
+import {
+  getAccessPath,
+  validateRegistry,
+  resolveEntry,
+  swapMenuNamespace,
+  isDebugEnabled,
+  MICRO_SEGMENT,
+  MICRO_DEBUG_SEGMENT,
+} from "@base/utils/menuAdapter";
+import { getToken } from "@base/utils/auth";
+import router from "@base/router";
+
+const REGISTRY_PARAM_CODE = "micro_app_registry";
+// 调试开关单独一条逻辑参数：与注册表生命周期不同，运维开关调试不必改注册表 JSON
+const DEBUG_PARAM_CODE = "micro_debug_enabled";
+
+const REGISTRY_TIMEOUT = 8000;
+const CONTAINER_WRAPPER_ID = "Appmicro";
+
+/**
+ * 调试命名空间（/micro_debug/<appCode>/...）的约定入口。
+ * 调试态不落任何存储、不读 URL 查询参数——路径本身就是开关，因此入口只能是约定值。
+ * 各子应用把 devServer 端口固定为 17527 即可零配置被主应用装载。
+ */
+export const DEBUG_ENTRY = "http://localhost:17527/";
+
+// 保活管理：appCode → { instance, el }；离开子应用路由只隐藏容器不卸载，
+// 切回直接显示并经 update 生命周期同步路由，页面状态（页签/表格/表单）得以保留
+let microAppConfigs = {};
+let aliveApps = {};
+let routeHookInstalled = false;
+
+/**
+ * 读一条逻辑参数的原始值；缺失 / 请求失败 / 超时一律回落空串，不阻塞登录流程。
+ */
+function readLogicParam(paramCode) {
+  const fetchPromise = new Promise((resolve) => {
+    getLogicParamValue({
+      data: { paramCode },
+      failMsg: false,
+      errorMsg: false,
+      modal: false,
+      success: (res) => resolve((res && res.objx) || ""),
+    }).catch(() => resolve(""));
+  });
+  const timeoutPromise = new Promise((resolve) => {
+    setTimeout(() => resolve(""), REGISTRY_TIMEOUT);
+  });
+  return Promise.race([fetchPromise, timeoutPromise]);
+}
+
+/**
+ * 读应用注册表 + 调试开关（两条逻辑参数并行取，互不依赖）。
+ * 注册表非法条目由 validateRegistry 跳过并在控制台显式报错；
+ * 调试开关取不到即视为关闭，标注在各 app 的 debugEnabled 上供下游使用。
+ */
+export function getAppRegistry() {
+  return Promise.all([
+    readLogicParam(REGISTRY_PARAM_CODE),
+    readLogicParam(DEBUG_PARAM_CODE),
+  ]).then(([registryRaw, debugRaw]) => {
+    if (!registryRaw) return [];
+    const { apps, errors } = validateRegistry(registryRaw);
+    if (errors.length) {
+      console.error("[microRouter] 应用注册表存在非法条目（已跳过）：", errors);
+    }
+    const debugEnabled = isDebugEnabled(debugRaw);
+    return apps.map((app) => Object.assign({}, app, { debugEnabled }));
+  });
+}
+
+/** 装载实例键：同一个 appCode 的正式态与调试态各自保活，可同时开着对比 */
+function instanceKey(appCode, debug) {
+  return debug ? appCode + "@" + MICRO_DEBUG_SEGMENT : appCode;
+}
+
+/**
+ * 登记子应用（保活模式）：不再走 registerMicroApps/start 的 activeRule 自动装卸，
+ * 改为路由钩子驱动的 loadMicroApp 手动装载——首次进入装载，离开只隐藏，切回显示并同步路由。
+ * options.subAppMenus 为 menuAdapter.dispatchMenus 的切分结果。
+ */
+export function registerSubApps(apps, options = {}) {
+  const subAppMenus = options.subAppMenus || {};
+  const mainAdapter = options.mainAdapter || createDefaultMainAdapter();
+  const userInfo = options.userInfo || null;
+  microAppConfigs = {};
+  (apps || []).forEach((app) => {
+    const menus = subAppMenus[app.appCode] || [];
+    const baseProps = {
+      appCode: app.appCode,
+      token: getToken(),
+      lang: localStorage.getItem("i18n-lang") || "",
+      userInfo,
+      mainAdapter,
+    };
+    const entry = resolveEntry(app.entry);
+    if (entry) {
+      microAppConfigs[instanceKey(app.appCode, false)] = {
+        name: app.appCode,
+        entry,
+        props: Object.assign({}, baseProps, { menus, microDebug: false }),
+      };
+    } else {
+      console.error(
+        "[microRouter] 子应用缺少当前环境 entry，正式态已跳过：" + app.appCode
+      );
+    }
+    // 调试态：入口固定为约定端口，菜单路径一并换到 /micro_debug/ 命名空间——
+    // 子应用据此生成的路由才与浏览器 hash 对得上（主子路径始终一致）。
+    // 注册表未显式 debugEnabled 的应用不建调试实例，其 /micro_debug/ 地址打不开
+    if (app.debugEnabled) {
+      microAppConfigs[instanceKey(app.appCode, true)] = {
+        name: instanceKey(app.appCode, true),
+        entry: DEBUG_ENTRY,
+        props: Object.assign({}, baseProps, {
+          menus: menus.map((menu) => swapMenuNamespace(menu, true)),
+          // 调试态才允许 URL 直达未配菜单的页面（见 permission.js 调试兜底路由）
+          microDebug: true,
+        }),
+      };
+    }
+  });
+  installRouteHook();
+  return Object.keys(microAppConfigs);
+}
+
+// 当前应处于激活态的实例键（等待容器期间用户可能又切走，异步续体据此丢弃过期操作）
+let currentActiveKey = null;
+
+/**
+ * 由路由推导装载实例：正式路由 meta 直接带 microKey；
+ * 调试通配路由只带 appCode 参数，在此拼出实例键。
+ */
+function resolveMicroKey(to) {
+  const meta = (to && to.meta) || {};
+  if (!meta.isMicroApp) return null;
+  if (meta.microDebugCatchAll) {
+    const appCode = (to.params && to.params.appCode) || "";
+    const key = appCode ? instanceKey(appCode, true) : "";
+    if (!microAppConfigs[key]) {
+      console.error(
+        "[microRouter] 无法装载调试实例："
+          + (appCode || "(空 appCode)")
+          + "。请检查该 appCode 是否在应用注册表 "
+          + REGISTRY_PARAM_CODE
+          + " 里，以及逻辑参数 "
+          + DEBUG_PARAM_CODE
+          + " 是否为 true（默认关闭）"
+      );
+      return null;
+    }
+    return key;
+  }
+  return microAppConfigs[meta.microKey] ? meta.microKey : null;
+}
+
+function installRouteHook() {
+  if (routeHookInstalled) return;
+  routeHookInstalled = true;
+  router.afterEach((to) => {
+    const key = resolveMicroKey(to);
+    currentActiveKey = key;
+    Object.keys(aliveApps).forEach((code) => {
+      if (code !== key) {
+        deactivateMicroApp(code);
+      }
+    });
+    if (key) {
+      activateMicroApp(key);
+    }
+  });
+}
+
+// 刷新直接落在子应用路由时，afterEach 早于布局渲染（AppMain 懒加载 + showAppMain 延迟），
+// 容器尚未进 DOM——轮询等待，超时显式报错
+const WRAPPER_WAIT_INTERVAL = 100;
+const WRAPPER_WAIT_MAX_TRIES = 100;
+
+function waitForWrapper(tryCount = 0) {
+  const wrapper = document.getElementById(CONTAINER_WRAPPER_ID);
+  if (wrapper) return Promise.resolve(wrapper);
+  if (tryCount >= WRAPPER_WAIT_MAX_TRIES) {
+    console.error(
+      "[microRouter] 等待子应用容器 #" + CONTAINER_WRAPPER_ID + " 超时"
+    );
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(waitForWrapper(tryCount + 1));
+    }, WRAPPER_WAIT_INTERVAL);
+  });
+}
+
+function getContainerEl(wrapper, key) {
+  const id = CONTAINER_WRAPPER_ID + "-" + key.replace("@", "_");
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    el.style.height = "100%";
+    wrapper.appendChild(el);
+  }
+  return el;
+}
+
+function cleanupFailedMicroApp(key, alive, error) {
+  // 失败回调可能晚于登出/重新注册，只清理由本次装载创建且仍在缓存中的记录
+  if (aliveApps[key] !== alive) return;
+  delete aliveApps[key];
+  if (alive.el && alive.el.parentNode) {
+    alive.el.parentNode.removeChild(alive.el);
+  }
+  console.error(
+    "[microRouter] 子应用挂载失败，已清理缓存，可在下次进入时重试：" + key,
+    error
+  );
+}
+
+function activateMicroApp(key) {
+  const config = microAppConfigs[key];
+  if (!config) return;
+  waitForWrapper().then((wrapper) => {
+    if (!wrapper) return;
+    if (currentActiveKey !== key) return; // 等待期间已切走
+    const el = getContainerEl(wrapper, key);
+    el.style.display = "";
+    const alive = aliveApps[key];
+    if (!alive) {
+      if (config.props.microDebug) {
+        console.warn(
+          "[microRouter] ⚠ 调试命名空间装载："
+            + config.name
+            + " → "
+            + config.entry
+            + "（把地址里的 /"
+            + MICRO_DEBUG_SEGMENT
+            + "/ 改回 /"
+            + MICRO_SEGMENT
+            + "/ 即回到正式环境）"
+        );
+      }
+      // 子应用是另一套系统，首次装载要下载其全量资源、耗时明显，期间容器空白。
+      // loading 只盖内容区，不遮页签，也不挂子应用容器 el（el 会被 qiankun 写 innerHTML
+      // 清掉，且空 #Appmicro 高度为 0）：挂到有尺寸、qiankun 不碰的 .app-main，
+      // 再把遮罩顶边下移到 #Appmicro 的位置（offsetTop = 固定表头里页签的占位高度，
+      // 动态读取不写死），从而避开顶部的页签栏。挂载成功 / 失败都关闭。
+      const appMain = wrapper.closest(".app-main");
+      const loadingInstance = Loading.service({
+        target: appMain || wrapper,
+        text: "加载中…",
+        // 全局 .el-loading-spinner 的转圈伪元素是 position:fixed（按全屏遮罩写的），
+        // 局部遮罩下会跑到视口中心、与文字错位，靠这个类在样式里纠正（见 style.scss）
+        customClass: "micro-loading",
+      });
+      if (appMain && loadingInstance.$el && loadingInstance.$el.style) {
+        loadingInstance.$el.style.top = wrapper.offsetTop + "px";
+      }
+      let instance;
+      try {
+        instance = loadMicroApp({
+          name: config.name,
+          entry: config.entry,
+          container: el,
+          props: config.props,
+        });
+      } catch (error) {
+        loadingInstance.close();
+        if (el.parentNode) {
+          el.parentNode.removeChild(el);
+        }
+        console.error("[microRouter] 子应用创建失败，可在下次进入时重试：" + key, error);
+        return;
+      }
+      const createdAlive = { el, instance };
+      aliveApps[key] = createdAlive;
+      if (
+        instance
+        && instance.mountPromise
+        && typeof instance.mountPromise.then === "function"
+      ) {
+        instance.mountPromise
+          .then(() => loadingInstance.close())
+          .catch((error) => {
+            loadingInstance.close();
+            cleanupFailedMicroApp(key, createdAlive, error);
+          });
+      } else {
+        // 理论不会走到（loadMicroApp 恒返回带 mountPromise 的实例），兜底避免遮罩悬挂
+        loadingInstance.close();
+      }
+      return;
+    }
+    // 已保活：显示容器并通知子应用恢复路由监听、同步当前 hash（含"切到本应用另一菜单"的深导航）
+    notifyMicroApp(alive.instance, { microActive: true });
+  });
+}
+
+function deactivateMicroApp(key) {
+  const alive = aliveApps[key];
+  if (!alive) return;
+  alive.el.style.display = "none";
+  // 暂停子应用路由监听，防止隐藏期间对主应用的 URL 变化做出反应（回写 URL 互相打架）
+  notifyMicroApp(alive.instance, { microActive: false });
+}
+
+function notifyMicroApp(instance, props) {
+  if (!instance || typeof instance.update !== "function") return;
+  const mountPromise = instance.mountPromise || Promise.resolve();
+  mountPromise
+    .then(() => instance.update(props))
+    .catch((e) => {
+      console.error("[microRouter] 子应用 update 通知失败：", e);
+    });
+}
+
+/**
+ * 转发"刷新当前页"给子应用。
+ * 保活模式下主应用那套 delCachedView + /redirect 重建只作用于自己的 router-view，
+ * 子应用内容由 qiankun 挂在独立容器里，走一圈只是容器隐藏再显示、实例毫发无损，
+ * 表现为点刷新没反应——必须由子应用在自身路由内重建组件。
+ * 入参是当前路由（调试通配路由的实例键要从路由参数推导，不在 meta 里）。
+ * 返回是否已转发（false 表示该应用未装载，调用方回落自身刷新逻辑）。
+ */
+export function refreshMicroApp(route) {
+  const alive = aliveApps[resolveMicroKey(route)];
+  if (!alive) return false;
+  // 带时间戳：qiankun 对相同 props 也会调用 update，但时间戳能让子应用区分每次点击
+  notifyMicroApp(alive.instance, { microRefresh: Date.now() });
+  return true;
+}
+
+/** 真正卸载全部子应用（登出等场景按需调用；常规页签切换不卸载） */
+export function unmountAllMicroApps() {
+  Object.keys(aliveApps).forEach((code) => {
+    const alive = aliveApps[code];
+    if (alive && alive.instance) {
+      alive.instance.unmount().catch(() => {});
+    }
+    if (alive && alive.el && alive.el.parentNode) {
+      alive.el.parentNode.removeChild(alive.el);
+    }
+  });
+  aliveApps = {};
+}
+
+/**
+ * 每个子应用先按菜单生成精确路由以携带菜单标题等元数据，再追加通配兜底。
+ * 路由均不挂组件，内容由 qiankun 挂进 AppMain 的 #Appmicro 容器。
+ *
+ * 调试命名空间不按应用展开：精确路由只为菜单元数据（标题/树路径/重复打开）而生，
+ * 装载哪个实例只取决于 appCode——做成一条参数化通配即可，
+ * 子应用再多也还是一条，代价仅是调试页签标题不显示具体菜单名。
+ */
+export function buildSubAppRoutes(apps, subAppMenus = {}) {
+  const routes = [];
+  (apps || []).forEach((app) => {
+    const key = instanceKey(app.appCode, false);
+    const seenPaths = {};
+    (subAppMenus[app.appCode] || []).forEach((menu, index) => {
+      let path = getAccessPath(menu).split("?")[0];
+      if (!path) return;
+      if (!path.startsWith("/")) {
+        path = "/" + path;
+      }
+      if (seenPaths[path]) return;
+      seenPaths[path] = true;
+      routes.push({
+        path,
+        name: `micro-${app.appCode}-menu-${menu.id || menu.menuCode || index}`,
+        meta: {
+          title: menu.menuName || app.appName,
+          enTitle: menu.menuEnName || null,
+          treePathName: menu.treePathName,
+          repeatOpen: menu.repeatOpen,
+          isMicroApp: true,
+          appCode: app.appCode,
+          microKey: key,
+        },
+      });
+    });
+    routes.push({
+      path: "/" + MICRO_SEGMENT + "/" + app.appCode + "/*",
+      name: "micro-" + app.appCode,
+      meta: {
+        title: app.appName,
+        isMicroApp: true,
+        appCode: app.appCode,
+        microKey: key,
+      },
+    });
+  });
+  // 没有任何应用开启调试时连路由都不注册——/micro_debug/ 直接落 404，
+  // 而不是进到一个装载不了任何东西的空白页
+  if ((apps || []).some((app) => app.debugEnabled)) {
+    // 整个调试命名空间共用这一条；appCode 由路由参数带出，装载实例在 afterEach 里推导
+    routes.push({
+      path: "/" + MICRO_DEBUG_SEGMENT + "/:appCode/*",
+      name: "micro-" + MICRO_DEBUG_SEGMENT,
+      meta: {
+        title: "微前端调试",
+        isMicroApp: true,
+        microDebugCatchAll: true,
+      },
+    });
+  }
+  return routes;
+}
+
+// 子应用表单脚本跳主应用路由必须走该回调，不得直接摸主应用 router
+function createDefaultMainAdapter() {
+  return {
+    navigate(path) {
+      const vueRoot = window.$vueRoot;
+      if (vueRoot && vueRoot.$router) {
+        // vue-router 3.0.2 的 push 返回 undefined（3.1.0 才返回 Promise），
+        // 直接 .catch 会抛 "reading 'catch'"，仅在返回 Promise 时才吞异常
+        const nav = vueRoot.$router.push(path);
+        if (nav && typeof nav.catch === "function") {
+          nav.catch(() => {});
+        }
+      }
+    },
+    openTab(path) {
+      this.navigate(path);
+    },
+    closeTab(view) {
+      const vueRoot = window.$vueRoot;
+      if (vueRoot && vueRoot.$store) {
+        return vueRoot.$store.dispatch(
+          "tagsView/delView",
+          view || vueRoot.$route
+        );
+      }
+      return Promise.resolve();
+    },
+  };
+}