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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.776",
+  "version": "1.0.54-dev.777",
   "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>