cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.60

package/src/utils/resolveViewComponent.js

@@ -1,37 +1,26 @@
-/**
- * 动态详情页组件解析（qiankun 微前端兼容）。
- *
- * 全库有一批「用运行时字符串 require 视图组件、就地渲染详情页」的站点
- * （wf 单据详情、消息通知、外链单页、表单文件引用…），历史上各自散着
- * 4 套前缀判断（白名单 / @base·@/ 前缀嗅探 / form 硬分叉 / 裸拼）。本文件
- * 把解析逻辑收敛到一处，并让它在微前端下正确区分组件归属。
- *
- * 归属三类（对齐 docs/qiankun接入协议.md 的命名空间语义）：
- *   ① base       —— 组件在 cloud-web-corejs 包内（@base/views），任何应用都有
- *   ② localPrivate —— 渲染方自己的私有视图（@/views）
- *   ③ remote     —— 归属别的子应用的私有视图；组件不在当前 bundle，
- *                   不能本地 require，交调用方走 micro-view-host 装载或兜底
- *                   （详见 docs/qiankun动态详情页承载方案.md 第 5 节）
- *
- * 核心归属/剥前缀/base 命名空间的判断复用 menuAdapter.resolveComponentPath，
- * 本文件只在其上加：白名单、.vue 归一、remote 判定、require 落地、缺文件兜底。
- * 因此无需注册表——归属靠访问路径结构 + 本应用 appCode 比较即可；独立运行 /
- * 主应用态（appCode 为空、无 /micro/ 前缀）会自动退化为与历史一致的本地解析。
- *
- * webpack 硬约束：@base/views 与 @/views 两条动态 import 必须保留字面前缀，
- * 不可把前缀变量化，否则 webpack 无法收集 context。包被消费时 @base 指向包内
- * views、@/ 指向消费应用 views——这正是 base / localPrivate 的语义来源。
- *
- * 2026-08 改造：这两条从同步 require 改为 import()（mode:"lazy"）。原先同步 context
- * 把两仓 2300+ 个视图全部焊进入口 chunk——app.js 20MB、全站只有 53 个 chunk，
- * 路由里的 () => import(...) 全部作废。三条不变量：
- *   ① 本文件是两仓中**唯一**允许书写「视图路径拼接 import」的地方。ContextModule 的
- *      同一性由 mode/regExp/include/exclude/chunkName/namespaceObject 共同决定，别处再写
- *      一条（magic comment 不一致、或写在 CJS 模块里）就会分叉出第二条 context，
- *      同一批视图产出约 2300 个重复 chunk。其余调用点一律走 loadViewComponentAsync。
- *   ② 每条 context root 全有全无：任何一处残留的同步 require("@/views" + x) 都会让
- *      整条 root 退回 mode:"sync" 并重新焊回入口包，且无报错无日志。
- *   ③ resolveViewPath 保持纯同步——tests/unit/utils/resolveViewComponent.spec.js 只测它。
+/**
+ * 动态详情页组件解析（qiankun 微前端兼容）。
+ *
+ * 全库有一批「用运行时字符串 require 视图组件、就地渲染详情页」的站点
+ * （wf 单据详情、消息通知、外链单页、表单文件引用…），历史上各自散着
+ * 4 套前缀判断（白名单 / @base·@/ 前缀嗅探 / form 硬分叉 / 裸拼）。本文件
+ * 把解析逻辑收敛到一处，并让它在微前端下正确区分组件归属。
+ *
+ * 归属三类（对齐 docs/qiankun接入协议.md 的命名空间语义）：
+ *   ① base       —— 组件在 cloud-web-corejs 包内（@base/views），任何应用都有
+ *   ② localPrivate —— 渲染方自己的私有视图（@/views）
+ *   ③ remote     —— 归属别的子应用的私有视图；组件不在当前 bundle，
+ *                   不能本地 require，交调用方走 micro-view-host 装载或兜底
+ *                   （详见 docs/qiankun动态详情页承载方案.md 第 5 节）
+ *
+ * 核心归属/剥前缀/base 命名空间的判断复用 menuAdapter.resolveComponentPath，
+ * 本文件只在其上加：白名单、.vue 归一、remote 判定、require 落地、缺文件兜底。
+ * 因此无需注册表——归属靠访问路径结构 + 本应用 appCode 比较即可；独立运行 /
+ * 主应用态（appCode 为空、无 /micro/ 前缀）会自动退化为与历史一致的本地解析。
+ *
+ * webpack 硬约束：@base/views 与 @/views 两条 require 必须保留字面前缀，
+ * 不可把前缀变量化，否则 webpack 无法收集 context。包被消费时 @base 指向包内
+ * views、@/ 指向消费应用 views——这正是 base / localPrivate 的语义来源。
  */
 import {
   getOwnerSegment,
@@ -147,54 +136,24 @@ export function resolveViewPath(rawUrl, options = {}) {
   return { kind: "localPrivate", base: false, rel: ensureVue(ensureLeadingSlash(path)) };
 }
 
-// ——— 以下为 import 落地层（依赖 webpack context，不进纯函数单测） ———
-
-// 见文件头不变量 ①：全仓只有这两行可以写视图路径拼接 import，magic comment 必须一致。
-//
-// ⚠ dev 与 prod 必须分两条路径写，原因见下：
-//
-// dev 的 babel.config.js 启用了 babel-plugin-dynamic-import-node。它对**任何**
-// import(非常量) 都会转成（lib/index.js: builders.dynamic）：
-//     Promise.resolve(`${表达式}`).then(s => require(s))
-// require 拿到的是变量 s，字面前缀彻底消失 —— webpack 的 splitContextFromPrefix
-// 建不出 views context，退化成运行时 require。写成模板字面量也没用：
-// `@base/views${rel}` 含插值，同样走 builders.dynamic（只有无插值的常量才走 static）。
-// 症状是 dev 下所有菜单报 "Cannot find module '@base/views/xxx.vue'"，
-// **签名是报错里带完整请求串而不是 ./views/... 这种 context 相对键**——
-// 带相对键说明 context 建对了只是缺文件，带完整串说明 context 压根没建出来。
-// 生产构建不过这个插件，所以这个坑**只坏 dev、产物完全正常**，体积数字全绿，极易漏测。
-//
-// 因此 dev 分支保留同步 require（webpack 在解析期就消除 if(false) 死分支，
-// 生产端不会因这一行建出 mode:"sync" 的 ContextModule —— 已用构建数字实测：
-// 加这个分支前后 chunk 数与 app.js 字节数完全一致）。
-// dev 侧行为与改造前一模一样：同步 context、HMR 速度不变，收益也测不出来
-// （量化只能用 build:prod）。try/catch 是为了把同步抛错转成 reject，
-// 好让下面 importViewCandidates 的候选链在 dev 下同样生效。
-//
-// 见文件头不变量 ①：全仓只有这两个函数可以写视图路径拼接的 import / require。
-function importBaseView(rel) {
-  if (process.env.NODE_ENV === "development") {
-    try {
-      return Promise.resolve(require("@base/views" + rel));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }
-  return import(/* webpackInclude: /\.vue$/ */ `@base/views${rel}`);
-}
-
-function importAppView(rel) {
-  if (process.env.NODE_ENV === "development") {
-    try {
-      return Promise.resolve(require("@/views" + rel));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }
-  return import(/* webpackInclude: /\.vue$/ */ `@/views${rel}`);
-}
-
-/** 已解析视图的 Promise 缓存：同一详情页重复打开不重复拉 chunk */
+// ——— 以下为组件落地层（依赖 webpack context，不进纯函数单测） ———
+
+function importBaseView(rel) {
+  try {
+    return Promise.resolve(require("@base/views" + rel));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}
+
+function importAppView(rel) {
+  try {
+    return Promise.resolve(require("@/views" + rel));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}
+
 const viewModuleCache = new Map();
 
 /**
@@ -228,11 +187,7 @@ function getViewModule(base, rel) {
 }
 
 /**
- * 区分「真缺文件」与「chunk 加载失败」。
- * 视图改按需加载后多出一类以前不可能发生的故障：chunk 404（发版后旧标签页哈希失效）、
- * 超时、或被网关截断（截断表现为 chunk 内 SyntaxError，不是网络错误）。这类错误若沿用
- * webpack 的 "Cannot find module" 文案会把排查引向「菜单配错路径」的错误方向，故在此改写
- * 提示语；原始错误挂 .cause 供排查，.viewChunkLoadFailed 供调用方判定是否值得提示刷新。
+ * 保留原始缺文件错误；其它加载异常沿用统一提示。
  */
 function normalizeViewError(e) {
   if (e && e.code === "MODULE_NOT_FOUND") return e;
@@ -270,12 +225,12 @@ function getRendererAppCode() {
  * 解析并加载详情页组件。resolveViewPath 的运行时外壳。
  *
  * 异步：必须 await 之后再置显隐标志 / 调 $openEditView，否则弹窗会先开出空壳
- * （$openEditView 是 200ms 定时放行，冷启动拉 chunk 常超过它）。
+ * （$openEditView 有定时放行逻辑）。
  *
  * @param {string} rawUrl 同 resolveViewPath
  * @param {object} [options] 同 resolveViewPath；appCode 缺省时从 store 读取
  * @returns {Promise<object>} resolveViewPath 的结果，附加 component 字段：
- *   - base / localPrivate：component 为组件对象（缺文件或 chunk 加载失败时为 null，附 error）
+ *   - base / localPrivate：component 为组件对象（加载失败时为 null，附 error）
  *   - remote / empty / unknown：component 为 null，由调用方决定后续（装载子应用 / 兜底提示）
  */
 export async function loadViewComponentAsync(rawUrl, options = {}) {
@@ -297,7 +252,7 @@ export async function loadViewComponentAsync(rawUrl, options = {}) {
 /**
  * 便捷封装：直接拿组件对象（或 null）。
  * 供 components/wf/wf.js、mobile wfModifyDialogMixin.js 的 requireView 使用。
- * remote / 缺文件 / chunk 加载失败时返回 null（不抛错崩溃）。
+ * remote / 缺文件 / 加载失败时返回 null（不抛错崩溃）。
  */
 export function requireViewAsync(rawUrl, options = {}) {
   return loadViewComponentAsync(rawUrl, options).then((r) => r.component);

package/src/utils/runtimeRecovery.js

@@ -0,0 +1,105 @@
+import { Message, MessageBox } from "element-ui";
+import { isChunkLoadError } from "@base/utils/chunkLoadError";
+
+let installed = false;
+let offlineMessage = null;
+let refreshPromptVisible = false;
+let assetFailedWhileOffline = false;
+
+function isOffline() {
+  return typeof navigator !== "undefined" && navigator.onLine === false;
+}
+
+function getAssetUrl(target) {
+  if (!target || !target.tagName) return "";
+  const tagName = target.tagName.toUpperCase();
+  if (tagName !== "SCRIPT" && tagName !== "LINK") return "";
+  return target.src || target.href || "";
+}
+
+export function showOfflineMessage() {
+  if (offlineMessage) return;
+  offlineMessage = Message({
+    message: "网络连接已断开，请检查网络；恢复后可继续操作",
+    type: "warning",
+    duration: 0,
+    showClose: true,
+    onClose: () => {
+      offlineMessage = null;
+    },
+  });
+}
+
+function closeOfflineMessage(showRecovered) {
+  if (offlineMessage) {
+    offlineMessage.close();
+    offlineMessage = null;
+  }
+  if (showRecovered) Message.success("网络连接已恢复");
+}
+
+export function promptRefreshForUpdate(error) {
+  if (isOffline()) {
+    showOfflineMessage();
+    return;
+  }
+  if (refreshPromptVisible) return;
+  refreshPromptVisible = true;
+  console.error("[runtime-recovery] 页面静态资源加载失败：", error);
+  MessageBox.confirm(
+    "检测到页面资源已失效，可能系统已发布新版本。刷新页面后即可继续使用。",
+    "系统更新提示",
+    {
+      confirmButtonText: "立即刷新",
+      cancelButtonText: "稍后处理",
+      closeOnClickModal: false,
+      type: "warning",
+    }
+  )
+    .then(() => window.location.reload())
+    .catch(() => {})
+    .then(() => {
+      refreshPromptVisible = false;
+    });
+}
+
+export function handleRequestNetworkError() {
+  if (!isOffline()) return false;
+  showOfflineMessage();
+  return true;
+}
+
+export function installRuntimeRecovery() {
+  if (installed || typeof window === "undefined") return;
+  installed = true;
+
+  window.addEventListener("offline", showOfflineMessage);
+  window.addEventListener("online", () => {
+    const shouldRefresh = assetFailedWhileOffline;
+    assetFailedWhileOffline = false;
+    closeOfflineMessage(!shouldRefresh);
+    if (shouldRefresh) promptRefreshForUpdate(new Error("断网期间页面资源加载失败"));
+  });
+  window.addEventListener(
+    "error",
+    (event) => {
+      const assetUrl = getAssetUrl(event.target);
+      if (!assetUrl || !/\/static\/(js|css)\//i.test(assetUrl)) return;
+      if (isOffline()) {
+        assetFailedWhileOffline = true;
+        showOfflineMessage();
+      }
+      else promptRefreshForUpdate(event.error || new Error(`静态资源加载失败: ${assetUrl}`));
+    },
+    true
+  );
+  window.addEventListener("unhandledrejection", (event) => {
+    if (isOffline()) {
+      showOfflineMessage();
+      return;
+    }
+    if (isChunkLoadError(event.reason)) promptRefreshForUpdate(event.reason);
+  });
+
+  if (isOffline()) showOfflineMessage();
+}

package/src/utils/swiperLoader.js

@@ -0,0 +1,20 @@
+let swiperPromise = null;
+
+function normalizeSwiperModule(mod) {
+  return (mod && mod.default) || mod;
+}
+
+export function loadSwiper() {
+  if (!swiperPromise) {
+    swiperPromise = Promise.all([
+      import("swiper"),
+      import("swiper/dist/css/swiper.min.css"),
+    ])
+      .then(([mod]) => normalizeSwiperModule(mod))
+      .catch((error) => {
+        swiperPromise = null;
+        throw error;
+      });
+  }
+  return swiperPromise;
+}