cloud-web-corejs 1.0.54-dev.776 → 1.0.54-dev.778

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.776",
+  "version": "1.0.54-dev.778",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",
@@ -146,6 +146,7 @@
     "src/components/jdPrint",
     "src/components/jsonImport",
     "src/components/langImport",
+    "src/components/micro-view-host",
     "src/components/mobile",
     "src/components/onlineTalk",
     "src/components/oplogTable",

package/src/components/micro-view-host/contract.js

@@ -0,0 +1,66 @@
+/**
+ * 详情承载契约（纯常量 + props 构造，无副作用，可完整单测）。
+ * micro-view-host（主/渲染方）与子应用「详情承载入口」共同遵守。
+ * 完整设计见 docs/qiankun动态详情页承载方案.md 第 5 节。
+ *
+ * 关键前提：qiankun loadMicroApp 的 props 是同一 JS realm 内的普通对象，
+ * 函数可直接传入并被子应用调用——故上行回调用函数 props，不需事件总线；
+ * 真正跨不过去的是 Vue 实例（parentVue）与 $parent 链，由子应用侧用 shim 合成。
+ */
+
+// props 标志：子应用 mount 时据此进入「详情承载」分支（而非常规整站渲染）
+export const DETAIL_HOST_MODE = "microDetailHost";
+
+// 上行回调字段名（函数 props）。子应用承载入口据此把详情页的
+// $baseReload / _handleCallback / 关闭 / outParam.sync / 任意 listeners
+// 转调回渲染方（见方案 §5.2 / §5.3 的 parentVue shim）。
+export const DETAIL_HOST_CALLBACKS = [
+  "onReload",
+  "onHandleCallback",
+  "onClose",
+  "onUpdateOutParam",
+  "onEmit",
+];
+
+/**
+ * 构造下发给子应用的 props。
+ *
+ * @param {object} input
+ * @param {string} input.appCode        归属子应用 appCode
+ * @param {string} input.targetPath     剥掉 /micro/<appCode> 后的子应用内路径
+ * @param {object} input.bizParams      业务字段整包（objTypeCode/formCode/dataId/param/queryParam…）
+ * @param {object} input.viewMeta       承载元数据（visibleKey/defaultShowWfContent/viewType）
+ * @param {*}      input.initialOutParam outParam 初值（替代 .sync 入向）
+ * @param {object} input.baseProps      基础 props（token/lang/userInfo/mainAdapter…）
+ * @param {object} input.callbacks      上行回调；仅函数值会被收录
+ * @returns {object} 传给 loadMicroApp 的 props
+ */
+export function buildDetailHostProps(input = {}) {
+  const {
+    appCode,
+    targetPath,
+    bizParams,
+    viewMeta,
+    initialOutParam,
+    baseProps,
+    callbacks,
+  } = input;
+
+  const props = Object.assign({}, baseProps, {
+    [DETAIL_HOST_MODE]: true,
+    appCode: appCode || "",
+    targetPath: targetPath || "",
+    bizParams: bizParams || {},
+    viewMeta: viewMeta || {},
+    initialOutParam: initialOutParam,
+  });
+
+  const cb = callbacks || {};
+  DETAIL_HOST_CALLBACKS.forEach((name) => {
+    if (typeof cb[name] === "function") {
+      props[name] = cb[name];
+    }
+  });
+
+  return props;
+}

package/src/components/micro-view-host/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div :id="containerId" class="micro-view-host" style="height: 100%"></div>
+</template>
+
+<script>
+/**
+ * 详情承载宿主：在弹框/容器内用 qiankun loadMicroApp 装载归属子应用，
+ * 渲染其私有详情页（组件不在当前 bundle，本地 require 拿不到）。
+ * 契约见 ./contract.js 与 docs/qiankun动态详情页承载方案.md 第 5 节。
+ *
+ * ⚠ 依赖子应用侧实现「详情承载入口」（方案 §5.5）：mount 时识别 props.microDetailHost，
+ *   按 targetPath 解析自身组件、用 bizParams/viewMeta 绑 props、装 parentVue shim 渲染。
+ *   在子应用支持该入口前，本组件装载出的仍是子应用默认渲染，未必是目标详情页。
+ *   因此暂不接入各弹框站点——它们仍走 $message 短期提示兜底。
+ *
+ * 多实例：宿主实例名带唯一后缀，与路由保活实例（name=appCode）隔离；
+ *   同一 appCode 的保活实例与若干宿主实例可并存。要求子应用容忍多实例并发。
+ */
+import { loadMicroApp } from "qiankun";
+import { getToken } from "@base/utils/auth";
+import { getAppRegistry, DEBUG_ENTRY } from "@base/microRouter";
+import { buildDetailHostProps } from "./contract";
+
+// 注册表一次会话内不变，缓存首个成功结果，避免每次开弹框都打逻辑参数接口
+let registryCache = null;
+function loadRegistry() {
+  if (!registryCache) {
+    registryCache = getAppRegistry().catch((e) => {
+      registryCache = null; // 失败不缓存，允许下次重试
+      return Promise.reject(e);
+    });
+  }
+  return registryCache;
+}
+
+let hostSeq = 0;
+
+export default {
+  name: "MicroViewHost",
+  props: {
+    // 归属子应用 appCode（helper 的 remote 结果透出）
+    owner: { type: String, required: true },
+    // 剥掉 /micro/<appCode> 后的子应用内路径
+    targetPath: { type: String, default: "" },
+    // 业务字段整包
+    bizParams: { type: Object, default: () => ({}) },
+    // 承载元数据
+    viewMeta: { type: Object, default: () => ({}) },
+    // outParam 初值
+    initialOutParam: { default: undefined },
+  },
+  data() {
+    hostSeq += 1;
+    return {
+      containerId: "micro-viewhost-" + this.owner + "-" + hostSeq,
+      instance: null,
+      failed: false,
+    };
+  },
+  mounted() {
+    this.load();
+  },
+  beforeDestroy() {
+    this.unmount();
+  },
+  methods: {
+    load() {
+      loadRegistry()
+        .then((apps) => {
+          if (this._isDestroyed || this._isBeingDestroyed) return;
+          const app = (apps || []).find((a) => a.appCode === this.owner);
+          if (!app || !app.entry) {
+            this.fail("未在应用注册表找到子应用或缺 entry：" + this.owner);
+            return;
+          }
+          // 逻辑参数 micro_debug_enabled=true 时，与路由整站装载一致：改用本机约定端口，
+          // 不动注册表 entry。本机联调 detail-host 时子应用 devServer 起在 17527 即可。
+          const entry = app.debugEnabled ? DEBUG_ENTRY : app.entry;
+          if (app.debugEnabled) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              "[MicroViewHost] ⚠ 调试装载：" + this.owner + " → " + entry
+            );
+          }
+          this.mountApp(entry);
+        })
+        .catch((e) => {
+          this.fail("读取应用注册表失败", e);
+        });
+    },
+    mountApp(entry) {
+      const props = buildDetailHostProps({
+        appCode: this.owner,
+        targetPath: this.targetPath,
+        bizParams: this.bizParams,
+        viewMeta: this.viewMeta,
+        initialOutParam: this.initialOutParam,
+        baseProps: {
+          token: getToken(),
+          lang: localStorage.getItem("i18n-lang") || "",
+        },
+        callbacks: {
+          onReload: () => this.$emit("reload"),
+          onHandleCallback: (flag) => this.$emit("handle-callback", flag),
+          onClose: () => this.$emit("close"),
+          onUpdateOutParam: (v) => this.$emit("update-out-param", v),
+          onEmit: (name, ...args) => this.$emit("bridge-emit", name, args),
+        },
+      });
+      try {
+        this.instance = loadMicroApp({
+          name: this.owner + "@detailhost-" + this.containerId,
+          entry,
+          container: this.$el,
+          props,
+        });
+        const p = this.instance.mountPromise;
+        if (p && typeof p.then === "function") {
+          p.then(() => this.$emit("mounted")).catch((e) => {
+            this.fail("子应用挂载失败：" + this.owner, e);
+          });
+        }
+      } catch (e) {
+        this.fail("loadMicroApp 失败：" + this.owner, e);
+      }
+    },
+    unmount() {
+      const inst = this.instance;
+      if (!inst) return;
+      this.instance = null;
+      const p = inst.mountPromise || Promise.resolve();
+      p.then(() => inst.unmount()).catch(() => {});
+    },
+    fail(msg, err) {
+      this.failed = true;
+      // eslint-disable-next-line no-console
+      console.error("[MicroViewHost] " + msg, err || "");
+      this.$emit("load-error", this.owner);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.micro-view-host {
+  width: 100%;
+}
+</style>

package/src/store/modules/permission.js

@@ -21,6 +21,18 @@ import MenuFallback from "@base/views/user/menuFallback/index.vue";
 let hostRegistryApps = [];
 let hostMicroRoutes = [];
 
+/**
+ * 本应用（渲染方）在微前端命名空间里的身份。
+ * 子应用取 settings.appCode（派生自各自 WEB_PREFIX）；主应用 appCode 恒空，
+ * 但它的身份就是 WEB_PREFIX 去斜杠（/sys → sys）——故回落 WEB_PREFIX 派生。
+ * 用于：① 宿主自排除（不装载自己）；② 组件路径解析剥归属前缀，使
+ * /micro/sys/base/user/user/list 等同于 /base/user/user/list（主应用把归属自己的
+ * 访问路径剥掉 /micro/<自己> 两段后按常规解析）。
+ */
+function getOwnAppCode() {
+  return settings.appCode || (window.WEB_PREFIX || "").replace(/^\/+/, "");
+}
+
 // 子应用被"本地调试覆盖"装载时置 true：启用按访问路径直接解析组件的兜底路由，
 // 使联调期可用 URL 直达尚未配置菜单的页面。正式注册表装载时恒为 false——
 // 菜单即权限边界，不能让任意路径都能打开组件
@@ -45,7 +57,7 @@ function createDebugPathRoute() {
         const path = (this.$route && this.$route.path) || "";
         const componentPath = resolveComponentPath(
           { url: path },
-          settings.appCode || ""
+          getOwnAppCode()
         );
         if (!componentPath) {
           return h(MenuFallback, { props: { componentPath: path } });
@@ -242,7 +254,7 @@ const actions = {
       // 主应用 appCode 恒为空（WEB_PREFIX===MAIN_WEB_PREFIX 不派生），但它在注册表里的
       // 身份是 WEB_PREFIX 去斜杠（/sys → sys）——故回落到 WEB_PREFIX 派生，
       // 否则注册表误配了主应用自身条目时排不掉、导致主应用自嵌套。
-      let ownAppCode = settings.appCode || (window.WEB_PREFIX || "").replace(/^\/+/, "");
+      let ownAppCode = getOwnAppCode();
       hostRegistryApps = (apps || []).filter(
         (app) => app.appCode !== ownAppCode
       );
@@ -365,8 +377,8 @@ function createRoute3(route3, flag) {
           param = getUrlParams(path);
           path = path.substring(0, pIndex);
         }
-        // 三步解析第 3 步：/base/ 命名空间转 @base/views；url 首段为本应用 appCode 时剥掉
-        componentPath = resolveComponentPath(route3, settings.appCode || "");
+        // 三步解析第 3 步：/base/ 命名空间转 @base/views；访问路径首段为本应用（含主应用 WEB_PREFIX 身份）时剥 /micro/<自己>
+        componentPath = resolveComponentPath(route3, getOwnAppCode());
         menuCode = route3.menuCode;
       }
     } else {

package/src/utils/resolveViewComponent.js

@@ -146,13 +146,20 @@ function requireAppView(rel) {
   return require("@/views" + rel);
 }
 
-/** 惰性读取本应用 appCode，避免把整个 store 拉进 resolveViewPath 的单测 */
+/**
+ * 惰性读取本应用（渲染方）appCode，避免把 settings 拉进 resolveViewPath 的纯函数单测。
+ * 子应用取 settings.appCode（qiankun mount 会写入 props.appCode，与派生一致）；
+ * 主应用 appCode 恒空、身份是 WEB_PREFIX 去斜杠（/sys → sys）——故回落 WEB_PREFIX。
+ * 与 store/modules/permission.js 的 getOwnAppCode 同口径：使 /micro/<自己>/... 被判成本地，
+ * 不误判成 remote 去自装载（也修掉子应用独立运行时 micro.appCode 为空的老坑）。
+ */
 function getRendererAppCode() {
+  const webPrefix = (window.WEB_PREFIX || "").replace(/^\/+/, "");
   try {
-    const store = require("@base/store").default;
-    return (store && store.state && store.state.micro && store.state.micro.appCode) || "";
+    const settings = require("@/settings").default;
+    return (settings && settings.appCode) || webPrefix;
   } catch (e) {
-    return "";
+    return webPrefix;
   }
 }