@infly/libs 2.0.26 → 2.0.37

package/build/webpack5/webpack.base.js

@@ -2,12 +2,22 @@
 
 const path = require("path");
 const InlineRuntimePlugin = require("./inline-runtime-plugin");
+const RemoveLegacyAssetsPlugin = require("./remove-legacy-assets-plugin");
 
 // 环境变量与常量配置
 const ENV = {
-  IS_PROD: ["production", "staging"].includes(process.env.NODE_ENV)
+  IS_PROD: ["production", "staging"].includes(process.env.NODE_ENV),
+  IS_STAGING: process.env.ENV === "staging",
+  IS_DEV: process.env.ENV === "development"
 };
 
+// 强制禁用 modern mode（staging 环境）
+if (ENV.IS_STAGING) {
+  process.env.VUE_CLI_MODERN_MODE = "false";
+  process.env.VUE_CLI_MODERN_BUILD = "false";
+  console.log("\n\x1b[36m⚡ Building for STAGING with Modern Bundle only (仅现代浏览器)...\x1b[0m");
+}
+
 /**
  * 解析项目路径（兼容monorepo）
  * @param {string} dir 相对路径
@@ -33,7 +43,8 @@ function createNodePolyfills() {
 /**
  * CSS/SCSS配置
  */
-function cssModule({ additionalData }) {
+function cssModule(cssConfig = {}) {
+  const { additionalData = "" } = cssConfig || {};
   return {
     loaderOptions: {
       sass: {
@@ -41,8 +52,13 @@ function cssModule({ additionalData }) {
         sassOptions: {
           api: "modern",
           quietDeps: true,
-          silenceDeprecations: ["legacy-js-api", "function-units"]
+          silenceDeprecations: ["legacy-js-api", "function-units", "import"],
+          // 添加以下配置来优化内存使用
+          outputStyle: "compressed", // 压缩输出
+          sourceMap: false // 禁用 source map（开发环境可启用）
         },
+        // 使用 webpackImporter 来优化模块解析
+        webpackImporter: true,
         additionalData
       },
       css: {
@@ -53,23 +69,33 @@ function cssModule({ additionalData }) {
         }
       }
     },
-    extract: ENV.IS_PROD ? { ignoreOrder: true } : false
+    extract: ENV.IS_PROD
+      ? {
+          ignoreOrder: true,
+          // 添加缓存配置
+          chunkFilename: "css/[name].[contenthash:8].css"
+        }
+      : false
   };
 }
 
 /**
  * 基础 configureWebpack 配置
  */
-function configureWebpack({ name }) {
-  return {
+function configureWebpack(extraConfig = {}) {
+  const { name, alias } = extraConfig || {};
+  const config = {
     name,
     resolve: {
       alias: {
         vue$: "vue/dist/vue.esm.js",
-        "@": resolve("src"),
-        "@postal-benefits-platform": resolve("../postal-benefits-platform/src"),
+        ...(alias || {}),
+        "@": resolve("src")
       },
-      fallback: createNodePolyfills()
+      fallback: createNodePolyfills(),
+      // 优化模块解析
+      extensions: [".js", ".vue", ".json", ".jsx"],
+      modules: ["node_modules"]
     },
     target: ["web", "es5"],
     output: {
@@ -84,19 +110,120 @@ function configureWebpack({ name }) {
       }
     },
     performance: { hints: false },
-    ignoreWarnings: [{ module: /sass-loader/ }]
+    ignoreWarnings: [{ module: /sass-loader/ }],
+
+    // 添加文件系统缓存（Webpack 5 核心优化）
+    cache: {
+      type: "filesystem",
+      cacheDirectory: resolve("node_modules/.cache/webpack"),
+      buildDependencies: {
+        config: [__filename]
+      }
+    }
   };
+
+  // 开发环境优化
+  if (ENV.IS_DEV) {
+    config.optimization = {
+      removeAvailableModules: false,
+      removeEmptyChunks: false,
+      splitChunks: false,
+      runtimeChunk: true
+    };
+  }
+
+  return config;
 }
 
 /**
  * chainWebpack配置
  */
-function chainWebpack(config) {
+function chainWebpack(config, options = {}) {
+  const { htmlPluginOptions = {} } = options || {};
+
   config.plugins.delete("preload");
   config.plugins.delete("prefetch");
 
+  if (Object.keys(htmlPluginOptions).length) {
+    config.plugin("html").tap((args) => {
+      const originalOptions = args[0] || {};
+      return [{ ...originalOptions, ...htmlPluginOptions }];
+    });
+  }
+
+  // 强制禁用 modern mode（staging 环境）
+  if (ENV.IS_STAGING) {
+    // 删除 @vue/cli-service 的 modern mode 相关插件
+    config.plugins.delete("modern-mode-plugin");
+
+    // 强制修改 HTML 插件配置
+    config.plugin("html").tap((args) => {
+      args[0] = args[0] || {};
+
+      // 彻底禁用 modern mode
+      args[0].modern = false;
+      args[0].modulePreload = false;
+      args[0].scriptLoading = "defer";
+
+      // 删除所有 modern/legacy 相关的钩子和回调
+      delete args[0].modernBuild;
+      delete args[0].legacyBuild;
+      delete args[0].modernManifest;
+      delete args[0].legacyManifest;
+
+      // 关键：重写 templateParameters 来阻止 modern mode 注入
+      const originalTemplateParameters = args[0].templateParameters || {};
+      args[0].templateParameters = (compilation, assets, assetTags, options) => {
+        const params =
+          typeof originalTemplateParameters === "function"
+            ? originalTemplateParameters(compilation, assets, assetTags, options)
+            : originalTemplateParameters;
+
+        // 移除 modern/legacy 相关的参数
+        if (params) {
+          delete params.modernBuild;
+          delete params.legacyBuild;
+          delete params.modernManifest;
+          delete params.legacyManifest;
+        }
+
+        return params;
+      };
+
+      return args;
+    });
+
+    // 添加自定义插件来处理 legacy 文件问题
+    config.plugin("remove-legacy-assets").use(RemoveLegacyAssetsPlugin);
+
+    // Babel 配置：只转译现代浏览器
+    config.module
+      .rule("js")
+      .use("babel-loader")
+      .tap((options) => ({
+        ...options,
+        presets: [
+          [
+            "@babel/preset-env",
+            {
+              targets: {
+                esmodules: true,
+                chrome: "60",
+                firefox: "60",
+                safari: "11",
+                edge: "79"
+              },
+              modules: false
+            }
+          ]
+        ],
+        cacheDirectory: true,
+        cacheCompression: false
+      }));
+  }
+
   // 注册 runtime 内联插件
-  config.plugin("inline-runtime").use(InlineRuntimePlugin)
+  config.plugin("inline-runtime").use(InlineRuntimePlugin);
 
   // SVG图标
   config.module.rule("svg").exclude.add(resolve("src/icons")).end();
@@ -110,7 +237,7 @@ function chainWebpack(config) {
     .options({ symbolId: "icon-[name]" })
     .end();
 
-  // Vue Loader
+  // Vue Loader 优化
   config.module
     .rule("vue")
     .use("vue-loader")
@@ -125,6 +252,19 @@ function chainWebpack(config) {
     }))
     .end();
 
+  // 优化 Babel Loader 缓存（非 staging 环境）
+  if (!ENV.IS_STAGING) {
+    config.module
+      .rule("js")
+      .use("babel-loader")
+      .loader("babel-loader")
+      .tap((options) => ({
+        ...options,
+        cacheDirectory: true,
+        cacheCompression: false
+      }));
+  }
+
   // 图片资源
   config.module
     .rule("images")
@@ -178,17 +318,63 @@ function chainWebpack(config) {
       maxInitialRequests: 30,
       enforceSizeThreshold: 50000,
       cacheGroups: {
+        // 最高优先级：ElementUI 框架（单独分包）
+        elementUI: {
+          name: "chunk-element-ui",
+          test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
+          priority: 40,
+          chunks: "all",
+          reuseExistingChunk: true
+        },
+        // 高优先级：ECharts 图表库（体积大，单独分包）
+        echarts: {
+          name: "chunk-echarts",
+          test: /[\\/]node_modules[\\/](echarts|zrender|v-charts)(.*)/,
+          priority: 35,
+          chunks: "async",
+          reuseExistingChunk: true
+        },
+        // Infly UI 组件库
+        inflyUI: {
+          name: "chunk-infly-ui",
+          test: /[\\/]packages[\\/]infly-ui[\\/]/,
+          priority: 31,
+          chunks: "all",
+          reuseExistingChunk: true
+        },
+        // Infly 工具库（monorepo 共享代码）
+        inflyLibs: {
+          name: "chunk-infly-libs",
+          test: /[\\/]packages[\\/]infly-libs[\\/]/,
+          priority: 30,
+          chunks: "all",
+          reuseExistingChunk: true
+        },
+        // Vue 全家桶（vue、vue-router、vuex）
+        vue: {
+          name: "chunk-vue",
+          test: /[\\/]node_modules[\\/](vue|vue-router|vuex)(.*)/,
+          priority: 25,
+          chunks: "all",
+          reuseExistingChunk: true
+        },
+        // 工具库（axios、lodash、moment 等）
+        utils: {
+          name: "chunk-utils",
+          test: /[\\/]node_modules[\\/](axios|nprogress|path-to-regexp|qrcanvas|html2canvas|element-china-area-data|vue-awesome-swiper|normalize\.css)(.*)/,
+          priority: 20,
+          chunks: "all",
+          reuseExistingChunk: true
+        },
+        // 其他 node_modules 库
         libs: {
           name: "chunk-libs",
           test: /[\\/]node_modules[\\/]/,
           priority: 10,
-          chunks: "initial"
-        },
-        elementUI: {
-          name: "chunk-elementUI",
-          priority: 20,
-          test: /[\\/]node_modules[\\/]_?element-ui(.*)/
+          chunks: "initial",
+          reuseExistingChunk: true
         },
+        // 公共组件（被多次引用的组件）
         commons: {
           name: "chunk-commons",
           test: resolve("src/components"),
@@ -220,8 +406,30 @@ function chainWebpack(config) {
   }
 }
 
+/**
+ * devServer 优化配置
+ */
+function devServer() {
+  return {
+    hot: true,
+    client: {
+      logging: "warn", // 减少控制台日志
+      overlay: false
+    },
+    // 优化监听性能
+    watchFiles: {
+      options: {
+        ignored: /node_modules/,
+        usePolling: false
+      }
+    }
+  };
+}
+
 module.exports = {
   cssModule,
   configureWebpack,
-  chainWebpack
+  chainWebpack,
+  devServer,
+  projectResolve: resolve
 };

package/build/webpack5/webpack.base.test.js

@@ -0,0 +1,59 @@
+"use strict";
+
+const assert = require("node:assert/strict");
+const test = require("node:test");
+const { chainWebpack } = require("./webpack.base");
+
+function createChainConfig() {
+  let htmlPluginOptions;
+  const chain = new Proxy(
+    function () {},
+    {
+      get(_target, property) {
+        if (property === "plugin") {
+          return (name) => ({
+            tap(callback) {
+              if (name === "html") {
+                [htmlPluginOptions] = callback([htmlPluginOptions || {}]);
+              }
+              return this;
+            },
+            use() {
+              return this;
+            }
+          });
+        }
+
+        return chain;
+      },
+      apply() {
+        return chain;
+      }
+    }
+  );
+
+  return {
+    config: chain,
+    getHtmlPluginOptions: () => htmlPluginOptions
+  };
+}
+
+test("chainWebpack 默认不增加 HTML 插件参数", () => {
+  const { config, getHtmlPluginOptions } = createChainConfig();
+
+  chainWebpack(config);
+
+  assert.equal(getHtmlPluginOptions()?.faviconPath, undefined);
+});
+
+test("chainWebpack 合并调用方传入的 HTML 插件参数", () => {
+  const { config, getHtmlPluginOptions } = createChainConfig();
+
+  chainWebpack(config, {
+    htmlPluginOptions: {
+      faviconPath: "favicon_xzya.ico"
+    }
+  });
+
+  assert.equal(getHtmlPluginOptions()?.faviconPath, "favicon_xzya.ico");
+});

package/index.js

@@ -1,7 +1,17 @@
 const buildDist = require("./build/build-dist");
 const projectPreview = require("./tools/project-preview");
+const path = require("path");
 
 function init() {
+  // 检查是否在 infly-libs 包自身目录中执行
+  const currentDir = process.cwd();
+  const packageDir = __dirname;
+  
+  // 如果当前目录就是 infly-libs 包目录，跳过执行
+  if (currentDir === packageDir) {
+    return;
+  }
+  
   projectPreview.scriptInit();
   buildDist.scriptInit();
 }

package/module/Permission.js

@@ -9,35 +9,35 @@ import TokenService from "./TokenService";
  * @param {Object} config.router 路由实例
  * @param {Object} config.store Vuex store 实例
  * @param {Object} config.NProgress NProgress 实例
- * @param {Function} config.getToken 获取 token 的函数
  * @param {Function} config.getUserInfo 获取用户信息的函数
  * @param {Function} config.resetToken 重置 token 的函数
  * @param {Function} config.showMessage 显示消息的函数
- * @param {Function} config.getTitle 获取页面标题的函数
- * * @returns {void}
+ * @returns {void}
  */
 export function initPermission({
-  whiteList = ["/login"],
+  whiteList = ["/login", "/404", "/403", "/error/401", "/error/404"],
   getUserInfoAction = "user/getInfo",
   resetTokenAction = "user/resetToken",
   refreshTokenAction = "user/refreshToken",
   pagePathCacheKey, // 页面路径缓存
   router,
   store,
-  defaultSettings = {},
+  defaultSettings,
+  settings = defaultSettings || {},
   NProgress,
   Message,
   getUserInfo,
   resetToken,
   showMessage
 }) {
-  const { title: projectTitle } = defaultSettings || {};
+  const { title: projectTitle } = settings || {};
   const { dispatch } = store || {};
+  // 转为 Set，将白名单查找从 O(n) 优化为 O(1)
+  const whiteSet = new Set(whiteList);
 
+  // afterEach 已统一调用 NProgress.done()，此处无需重复
   const redirectToLogin = (to, next) => {
     next(`/login?redirect=${to.path}`);
-    NProgress.done();
-    return;
   };
 
   const handleGetUserInfo = () => {
@@ -56,78 +56,144 @@ export function initPermission({
     }
   };
 
+  // 降级链：优先调用自定义 showMessage，其次 Message，最后 console
   const handleShowMessage = (message, type = "error") => {
     if (Uts.isFunction(showMessage)) {
       showMessage(message);
-    }
-
-    if (Uts.isFunction(Message)) {
+    } else if (Uts.isFunction(Message)) {
       Message[type](message);
+    } else {
+      console.log(message);
     }
-
-    console.log(message);
   };
 
   const handlePageTitle = (path) => {
     const title = projectTitle || "后台管理系统";
-    if (path) {
-      return `${path} - ${title}`;
-    }
-    return `${title}`;
+    return path ? `${path} - ${title}` : title;
   };
 
   NProgress.configure({ showSpinner: false });
 
-  router.beforeEach(async (to, from, next) => {
-    NProgress.start();
-    document.title = handlePageTitle(to.meta.title);
+  // 辅助函数：处理 URL token 参数
+  const handleUrlTokenParam = async (to, next, accessTokenKey, accessToken) => {
+    if (!to.query[accessTokenKey]) return false;
 
-    if (!whiteList.includes(to.path) && pagePathCacheKey) {
-      localStorage.setItem(pagePathCacheKey, window.location.href);
+    // 优先从地址栏获取token, 更新存储token值
+    if (accessToken && Uts.isFunction(dispatch)) {
+      try {
+        await dispatch(refreshTokenAction, { token: accessToken });
+      } catch (error) {
+        console.error("[Token Refresh Error]:", error);
+      }
     }
 
-    const Token = TokenService.getToken();
-    const accessTokenKey = TokenService.getUrlTokenKey();
-    const accessToken = TokenService.getUrlToken();
+    // 用解构 rest 移除 token 参数，避免修改原对象
+    const { [accessTokenKey]: _, ...newQuery } = to.query;
+    next({ path: to.path, query: newQuery, replace: true });
+    return true;
+  };
 
-    // 处理 URL 中的 accessToken 参数
-    if (to.query[accessTokenKey]) {
-      const newQuery = { ...to.query };
+  // 辅助函数：检查权限
+  const checkPermission = (permission) => {
+    if (!permission) return true;
 
-      // 优先从地址栏获取token, 更新存储token值
-      if (accessToken && Uts.isFunction(dispatch)) {
-        await dispatch(refreshTokenAction, { token: accessToken });
-      }
+    const hasPermission = Uts.getPM(permission);
 
-      delete newQuery[accessTokenKey];
-      NProgress.done();
-      return next({ path: to.path, query: newQuery, replace: true });
+    if (!hasPermission) {
+      console.warn(`[权限不足] 需要权限: ${permission}`);
     }
 
-    // 检查白名单路径
-    if (whiteList.includes(to.path)) {
-      NProgress.done();
-      return next();
+    return hasPermission;
+  };
+
+  // 辅助函数：处理已认证用户的路由
+  const handleAuthenticatedRoute = async (to, next, permission) => {
+    // 已登录用户访问登录页
+    if (to.path === "/login") {
+      const { PMRedirectPath } = (await handleGetUserInfo()) || {};
+      const redirectPath = to.query.redirect;
+
+      if (redirectPath) {
+        // 查找 redirect 路由对应的权限
+        const matched = router.resolve(redirectPath)?.route;
+        const redirectPermission = matched?.meta?.permission;
+        // 无需权限 或 有权限，则走 redirect
+        if (!redirectPermission || checkPermission(redirectPermission)) {
+          return next({ path: redirectPath });
+        }
+      }
+
+      // 否则跳到第一个有权限的页面
+      return next({ path: PMRedirectPath || "/" });
     }
 
-    if (Token) {
-      // 如果已登录，但尝试访问登录页，则重定向到首页
-      if (to.path === "/login") {
-        NProgress.done();
-        next({ path: "/" });
-      } else {
-        try {
-          await handleGetUserInfo();
-          NProgress.done();
-          next();
-        } catch (error) {
-          const { message = "" } = error || {};
-          // handleShowMessage(message || error || "验证失败, 请重新登录");
-          await handleResetToken();
-          redirectToLogin(to, next);
+    try {
+      // 获取用户信息
+      const { PMRedirectPath } = (await handleGetUserInfo()) || {};
+
+      // 合并权限检查，避免重复调用 checkPermission
+      if (permission && !checkPermission(permission)) {
+        // 有兜底路径时优先跳转，否则跳 403
+        if (PMRedirectPath) {
+          return next({ path: PMRedirectPath });
+        }
+        if (!whiteSet.has(to.path)) {
+          return next({ path: "/error/403" });
         }
       }
-    } else {
+
+      next();
+    } catch (error) {
+      const { message = "" } = error || {};
+      console.error("[认证失败]:", message || error);
+
+      // 可选：显示错误消息
+      // handleShowMessage(message || "验证失败，请重新登录");
+
+      await handleResetToken();
+      redirectToLogin(to, next);
+    }
+  };
+
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start();
+
+    try {
+      const Token = TokenService.getToken();
+      const accessTokenKey = TokenService.getUrlTokenKey();
+      const accessToken = TokenService.getUrlToken();
+      const { permission } = to.meta || {};
+
+      // 设置页面标题
+      document.title = handlePageTitle(to.meta?.title);
+
+      // 缓存页面路径（非白名单页面）
+      if (pagePathCacheKey && !whiteSet.has(to.path)) {
+        localStorage.setItem(pagePathCacheKey, window.location.href);
+      }
+
+      // 1. 处理 URL token 参数
+      if (await handleUrlTokenParam(to, next, accessTokenKey, accessToken)) {
+        return;
+      }
+
+      // 2. 检查白名单路径
+      if (whiteSet.has(to.path)) {
+        return next();
+      }
+
+      // 3. 未登录用户，重定向到登录页
+      if (!Token) {
+        return redirectToLogin(to, next);
+      }
+
+      // 4. 已登录用户的路由处理
+      await handleAuthenticatedRoute(to, next, permission);
+    } catch (error) {
+      console.error("[路由守卫错误]:", error);
+
+      // 发生未预期的错误时，重定向到登录页
+      await handleResetToken();
       redirectToLogin(to, next);
     }
   });