cloud-web-corejs 1.0.281 → 1.1.0-dev.5

package/src/utils/resolveViewComponent.js

@@ -18,9 +18,20 @@
  * 因此无需注册表——归属靠访问路径结构 + 本应用 appCode 比较即可；独立运行 /
  * 主应用态（appCode 为空、无 /micro/ 前缀）会自动退化为与历史一致的本地解析。
  *
- * webpack 硬约束：@base/views 与 @/views 两条动态 require 必须保留字面前缀，
+ * 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 只测它。
  */
 import {
   getOwnerSegment,
@@ -136,14 +147,101 @@ export function resolveViewPath(rawUrl, options = {}) {
   return { kind: "localPrivate", base: false, rel: ensureVue(ensureLeadingSlash(path)) };
 }
 
-// ——— 以下为 require 落地层（依赖 webpack context，不进纯函数单测） ———
+// ——— 以下为 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 */
+const viewModuleCache = new Map();
+
+/**
+ * 候选链：先带 .vue（与旧同步 require 行为完全一致），命中不了再试去后缀。
+ * 去后缀这条覆盖 b/index.vue 的目录式写法——loadViewComponent 自己走 ensureVue 永远
+ * 命中不了，但 store/modules/permission.js 的菜单 url 会（它原先把裸 url 直接丢给
+ * context，靠 RequireContextPlugin 生成的无后缀候选键命中）。顺序不能反：a/b.vue 与
+ * a/b/index.vue 并存时无后缀键有歧义，带后缀那条才是确定的。
+ */
+function importViewCandidates(base, rel) {
+  const load = base ? importBaseView : importAppView;
+  const bare = rel.replace(/\.vue$/i, "");
+  return load(rel).catch((e) =>
+    bare === rel ? Promise.reject(e) : load(bare).catch(() => Promise.reject(e))
+  );
+}
 
-function requireBaseView(rel) {
-  return require("@base/views" + rel);
+function getViewModule(base, rel) {
+  const key = (base ? "@base" : "@") + rel;
+  let p = viewModuleCache.get(key);
+  if (!p) {
+    p = importViewCandidates(base, rel).catch((e) => {
+      // 失败不缓存，允许用户重试后重新拉取
+      // （同 components/micro-view-host/index.vue 的 registryCache 处理）
+      viewModuleCache.delete(key);
+      return Promise.reject(e);
+    });
+    viewModuleCache.set(key, p);
+  }
+  return p;
 }
 
-function requireAppView(rel) {
-  return require("@/views" + rel);
+/**
+ * 区分「真缺文件」与「chunk 加载失败」。
+ * 视图改按需加载后多出一类以前不可能发生的故障：chunk 404（发版后旧标签页哈希失效）、
+ * 超时、或被网关截断（截断表现为 chunk 内 SyntaxError，不是网络错误）。这类错误若沿用
+ * webpack 的 "Cannot find module" 文案会把排查引向「菜单配错路径」的错误方向，故在此改写
+ * 提示语；原始错误挂 .cause 供排查，.viewChunkLoadFailed 供调用方判定是否值得提示刷新。
+ */
+function normalizeViewError(e) {
+  if (e && e.code === "MODULE_NOT_FOUND") return e;
+  const err = new Error(
+    "页面资源加载失败，请刷新重试（" + ((e && e.message) || e) + "）"
+  );
+  err.cause = e;
+  err.viewChunkLoadFailed = true;
+  return err;
 }
 
 /**
@@ -171,13 +269,16 @@ function getRendererAppCode() {
 /**
  * 解析并加载详情页组件。resolveViewPath 的运行时外壳。
  *
+ * 异步：必须 await 之后再置显隐标志 / 调 $openEditView，否则弹窗会先开出空壳
+ * （$openEditView 是 200ms 定时放行，冷启动拉 chunk 常超过它）。
+ *
  * @param {string} rawUrl 同 resolveViewPath
  * @param {object} [options] 同 resolveViewPath；appCode 缺省时从 store 读取
- * @returns {object} resolveViewPath 的结果，附加 component 字段：
- *   - base / localPrivate：component 为组件对象（require 失败或缺文件时为 null，附 error）
+ * @returns {Promise<object>} resolveViewPath 的结果，附加 component 字段：
+ *   - base / localPrivate：component 为组件对象（缺文件或 chunk 加载失败时为 null，附 error）
  *   - remote / empty / unknown：component 为 null，由调用方决定后续（装载子应用 / 兜底提示）
  */
-export function loadViewComponent(rawUrl, options = {}) {
+export async function loadViewComponentAsync(rawUrl, options = {}) {
   const opts = Object.assign({}, options);
   if (opts.appCode == null) opts.appCode = getRendererAppCode();
 
@@ -186,18 +287,43 @@ export function loadViewComponent(rawUrl, options = {}) {
     return Object.assign({ component: null }, result);
   }
   try {
-    const mod = result.base ? requireBaseView(result.rel) : requireAppView(result.rel);
+    const mod = await getViewModule(result.base, result.rel);
     return Object.assign({ component: mod && mod.default }, result);
   } catch (e) {
-    return Object.assign({ component: null, error: e }, result);
+    return Object.assign({ component: null, error: normalizeViewError(e) }, result);
   }
 }
 
 /**
- * 兼容旧签名的便捷封装：直接返回组件对象（或 null）。
- * 供 components/wf/wf.js、mobile wfModifyDialogMixin.js 的 requireView 平滑替换——
- * 它们历史上返回 require(...).default。remote / 缺文件时返回 null（不再抛错崩溃）。
+ * 便捷封装：直接拿组件对象（或 null）。
+ * 供 components/wf/wf.js、mobile wfModifyDialogMixin.js 的 requireView 使用。
+ * remote / 缺文件 / chunk 加载失败时返回 null（不抛错崩溃）。
+ */
+export function requireViewAsync(rawUrl, options = {}) {
+  return loadViewComponentAsync(rawUrl, options).then((r) => r.component);
+}
+
+/**
+ * 旧同步 API 的迁移桩。
+ *
+ * 不能保留一份「能用的同步实现」：它的本体就是同步 require(expr)，留着就会把
+ * mode:"sync" 的 ContextModule 复活，消费方的入口包原样退回 20MB（见文件头不变量 ②）。
+ * 也不能沿用原名改成返回 Promise——未迁移的调用方读 res.component 会静默拿到 undefined，
+ * 渲染成一片空白且无任何报错。故改名 + 旧名抛错：把「静默错渲染」换成可 grep 的堆栈。
  */
-export function requireViewCompat(rawUrl, options = {}) {
-  return loadViewComponent(rawUrl, options).component;
+const ASYNC_MIGRATION_MSG =
+  "loadViewComponent / requireViewCompat 已改为异步。"
+  + "请改用 loadViewComponentAsync(url, opts) -> Promise<{component,...}> "
+  + "或 requireViewAsync(url, opts) -> Promise<Component|null>，并在调用处 await——"
+  + "务必 await 之后再置显隐标志 / 调 $openEditView，否则弹窗会先开出空壳。"
+  + "同时把本仓所有 require(\"@/views\" + x) / require(\"@base/views\" + x) 一并改掉："
+  + "只要残留一处，该条 context 就退回 mode:\"sync\"，整棵 views 重新焊回入口包（全有全无）。"
+  + "见 cloud-web-corejs CHANGELOG 1.1.0。";
+
+export function loadViewComponent() {
+  throw new TypeError("[resolveViewComponent] " + ASYNC_MIGRATION_MSG);
+}
+
+export function requireViewCompat() {
+  throw new TypeError("[resolveViewComponent] " + ASYNC_MIGRATION_MSG);
 }

package/src/views/bd/project/branch/bd_branch/edit.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="detail-wrap">
+    <el-form ref="editForm" :model="bdBranch">
+      <div class="d-header clearfix">
+        <div class="fl">
+          <i class="el-icon-info" />
+          {{ dataId ? $t1("查看分支定义") : $t1("新增分支定义") }}
+        </div>
+        <div class="fr">
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            @click="$baseReload()"
+            icon="el-icon-refresh-right"
+          >
+            {{ $t1("重置") }}
+          </el-button>
+          <el-button
+            type="primary"
+            class="button-sty"
+            icon="el-icon-check"
+            @click="saveData"
+            >{{ $t1("保存") }}
+          </el-button>
+        </div>
+      </div>
+      <div class="d-cont">
+        <div class="d-item">
+          <div class="title first">
+            <b>{{ $t1("基本信息") }}</b>
+          </div>
+          <table class="table-detail">
+            <tbody>
+              <tr>
+                <th>
+                  <em class="f-red">*</em>
+                  {{ $t1("分支编码") }}
+                </th>
+                <td>
+                  <el-form-item prop="branchCode" :rules="branchCodeRules">
+                    <el-input
+                      type="text"
+                      autocomplete="off"
+                      v-model="bdBranch.branchCode"
+                      :disabled="isEdit"
+                      clearable
+                    />
+                  </el-form-item>
+                </td>
+                <th>
+                  <em class="f-red">*</em>
+                  {{ $t1("分支名称") }}
+                </th>
+                <td>
+                  <el-form-item prop="branchName" :rules="branchNameRules">
+                    <el-input
+                      type="text"
+                      autocomplete="off"
+                      v-model="bdBranch.branchName"
+                      clearable
+                    />
+                  </el-form-item>
+                </td>
+                <th>{{ $t1("是否启用") }}</th>
+                <td>
+                  <el-switch v-model="bdBranch.enabled"></el-switch>
+                </td>
+              </tr>
+              <tr>
+                <th>{{ $t1("备注") }}</th>
+                <td colspan="5">
+                  <el-input
+                    type="textarea"
+                    :rows="2"
+                    :placeholder="$t1('请输入内容')"
+                    size="small"
+                    v-model="bdBranch.remark"
+                    clearable
+                  ></el-input>
+                </td>
+              </tr>
+              <tr>
+                <th>{{ $t1("创建人") }}</th>
+                <td>{{ bdBranch.createBy }}</td>
+                <th>{{ $t1("创建时间") }}</th>
+                <td>{{ bdBranch.createDate }}</td>
+                <th>{{ $t1("更新人") }}</th>
+                <td>{{ bdBranch.modifyBy }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="d-item">
+          <div class="title">
+            <b>{{ $t1("分支菜单类型") }}</b>
+          </div>
+          <div class="grid-height" style="height: 320px">
+            <vxe-grid
+              ref="table-menuKind"
+              :data="menuKindRows"
+              v-bind="menuKindOption"
+              @resizable-change="$vxeTableUtil.onColumnWitchChange"
+              @custom="$vxeTableUtil.customHandle"
+            >
+              <template #form>
+                <div class="clearfix screen-btns">
+                  <div class="fl">
+                    <vxe-button
+                      status="primary"
+                      class="button-sty"
+                      icon="el-icon-plus"
+                      @click="openMenuKindDialog"
+                    >
+                      {{ $t1("选择分类") }}
+                    </vxe-button>
+                    <span class="tips">{{
+                      $t1("注：只能选择「分类-通用」的一级分类")
+                    }}</span>
+                  </div>
+                </div>
+              </template>
+            </vxe-grid>
+          </div>
+        </div>
+      </div>
+    </el-form>
+    <menuKindDialog
+      v-if="showMenuKindDialog"
+      :visiable.sync="showMenuKindDialog"
+      :rows="checkedMenuKindRows"
+      multi="true"
+      @confirm="confirmMenuKindDialog"
+    ></menuKindDialog>
+  </div>
+</template>
+
+<script>
+import mixin from "./mixins/edit";
+
+export default {
+  name: "bdBranchEdit",
+  mixins: [mixin],
+};
+</script>

package/src/views/bd/project/branch/bd_branch/list.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="containt">
+    <el-tabs v-model="activeName" class="tab-box">
+      <el-tab-pane :label="$t1('常规')" name="first">
+        <editView
+          v-if="showEdit"
+          visible-key="showEdit"
+          :_dataId.sync="dataId"
+          :parent-target="_self"
+          @reload="$reloadHandle"
+        ></editView>
+      </el-tab-pane>
+      <el-tab-pane :label="$t1('列表')" name="second">
+        <div class="grid-height">
+          <vxe-grid
+            ref="table-m1"
+            v-bind="vxeOption"
+            @resizable-change="$vxeTableUtil.onColumnWitchChange"
+            @custom="$vxeTableUtil.customHandle"
+          >
+            <template #form>
+              <tableForm
+                :formData.sync="formData"
+                @searchEvent="searchEvent"
+                @resetEvent="resetEvent"
+              >
+                <template #buttonLeft>
+                  <vxe-button
+                    status="primary"
+                    class="button-sty"
+                    icon="el-icon-plus"
+                    @click="openEditDialog"
+                  >
+                    {{ $t1("新增") }}
+                  </vxe-button>
+                </template>
+                <template #buttonRight>
+                  <vxe-button
+                    icon="el-icon-brush"
+                    class="button-sty"
+                    @click="resetEvent"
+                    type="text"
+                    status="primary"
+                    plain
+                    >{{ $t1("刷新") }}
+                  </vxe-button>
+                  <vxe-button
+                    status="warning"
+                    icon="el-icon-search"
+                    class="button-sty"
+                    @click="searchEvent"
+                  >
+                    {{ $t1("搜索") }}
+                  </vxe-button>
+                </template>
+              </tableForm>
+            </template>
+          </vxe-grid>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import mixin from "./mixins/list";
+
+export default {
+  name: "bd_branch:list",
+  mixins: [mixin],
+};
+</script>

package/src/views/bd/project/branch/bd_branch/menuKindDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog
+    :title="$t1('分类-通用一级分类')"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    :close-on-click-modal="falseValue"
+    :visible.sync="showDialog"
+    :modal="falseValue"
+    custom-class="dialog-style list-dialog dialog-checkbox pd_0"
+    width="1000px"
+    @close="dialogClose"
+    v-el-drag-dialog
+    v-el-dialog-center
+  >
+    <div class="cont" style="height: 450px">
+      <vxe-grid
+        class="is-pointer"
+        ref="table-m1"
+        v-bind="vxeOption"
+        @resizable-change="$vxeTableUtil.onColumnWitchChange"
+        @custom="$vxeTableUtil.customHandle"
+        @checkbox-change="addDataTable"
+        @checkbox-all="checkAll"
+        @cell-dblclick="checkWithSubmit"
+      >
+        <template #form>
+          <div class="clearfix screen-btns">
+            <div class="fr">
+              <vxe-button
+                icon="el-icon-brush"
+                class="button-sty"
+                @click="resetEvent"
+                type="text"
+                status="primary"
+                plain
+                >{{ $t1("刷新") }}
+              </vxe-button>
+              <vxe-button
+                status="warning"
+                icon="el-icon-search"
+                class="button-sty"
+                @click="searchEvent"
+              >
+                {{ $t1("搜索") }}
+              </vxe-button>
+            </div>
+          </div>
+          <vxe-form
+            class="screen-box"
+            title-width="92px"
+            title-align="right"
+            :data="formData"
+            @submit="searchEvent"
+            @reset="resetEvent"
+          >
+            <vxe-form-item :title="$t1('表单分类名称') + ':'" field="name">
+              <template v-slot>
+                <el-input v-model="formData.name" size="small" clearable />
+              </template>
+            </vxe-form-item>
+            <vxe-button type="submit" @click="searchEvent" v-show="false"></vxe-button>
+          </vxe-form>
+        </template>
+      </vxe-grid>
+    </div>
+    <label id="labBtn" class="transverse">
+      <div class="icon">
+        <i class="el-icon-more"></i>
+        <i class="el-icon-more"></i>
+      </div>
+    </label>
+    <div class="multipleChoice">
+      <el-tooltip
+        :enterable="false"
+        effect="dark"
+        :content="$t1('全部删除')"
+        placement="top"
+        ><a class="allDel icon-quanbushanchu" @click="clearChecked()"></a
+      ></el-tooltip>
+      <div class="list">
+        <div class="item" v-for="(checkRow, index) in checkRows" :key="index">
+          <p>{{ checkRow.name }}</p>
+          <a class="el-icon-close" @click="clearTable1Select(index)"></a>
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" plain class="button-sty" @click="dialogClose">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t1("取 消") }}
+      </el-button>
+      <el-button type="primary" @click="dialogPrimary" class="button-sty">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t1("确 定") }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import mixin from "./mixins/menuKindDialog";
+
+export default {
+  mixins: [mixin],
+};
+</script>