@dlzn-ui/vite-config 1.63.0 → 1.65.0

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import { ConfigEnv, UserConfig } from 'vite';
+import AutoImport from 'unplugin-auto-import/vite';
+
+type Arrayable<T> = Array<T> | T;
+interface Options {
+    autoImportResolvers?: Array<UnwrapArrayable<UnwrapArrayable<NonNullable<Parameters<typeof AutoImport>[0]['resolvers']>>>>;
+    autoImports?: Array<NonNullable<UnwrapArrayable<Parameters<typeof AutoImport>[0]['imports']>>>;
+    root: string;
+}
+type UnwrapArrayable<T> = T extends Arrayable<infer U> ? U : never;
+declare const _default: (_env: ConfigEnv, options: Options) => UserConfig;
+
+export { _default as default };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { ConfigEnv, UserConfig } from 'vite';
+import AutoImport from 'unplugin-auto-import/vite';
+
+type Arrayable<T> = Array<T> | T;
+interface Options {
+    autoImportResolvers?: Array<UnwrapArrayable<UnwrapArrayable<NonNullable<Parameters<typeof AutoImport>[0]['resolvers']>>>>;
+    autoImports?: Array<NonNullable<UnwrapArrayable<Parameters<typeof AutoImport>[0]['imports']>>>;
+    root: string;
+}
+type UnwrapArrayable<T> = T extends Arrayable<infer U> ? U : never;
+declare const _default: (_env: ConfigEnv, options: Options) => UserConfig;
+
+export { _default as default };

package/dist/index.mjs

@@ -0,0 +1,608 @@
+import path, { basename, resolve, posix } from 'node:path';
+import AutoImport from 'unplugin-auto-import/vite';
+import ElementPlus from 'unplugin-element-plus/vite';
+import Components from 'unplugin-vue-components/vite';
+import { loadEnv, mergeConfig } from 'vite';
+import { parseLoadedEnv } from 'vite-plugin-env-parse';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import VueRouter from 'vue-router/vite';
+import { globSync } from 'tinyglobby';
+import { upperFirst } from '@dlzn-ui/node-utils';
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import browserslist from 'browserslist';
+import { browserslistToTargets } from 'lightningcss';
+import tailwindAutoReference from 'vite-plugin-vue-tailwind-auto-reference';
+import { TDesignResolver } from '@tdesign-vue-next/auto-import-resolver';
+import { webUpdateNotice } from '@plugin-web-update-notification/vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { compression } from 'vite-plugin-compression2';
+import viteImagemin from 'vite-plugin-imagemin';
+import fs from 'node:fs/promises';
+
+const aliasElementPlus = (root) => {
+  const elementPlusCss = globSync("src/plugins/element-plus/theme-chalk/*.css", { cwd: root });
+  const arr = [];
+  elementPlusCss.forEach((file) => {
+    const _basename = basename(file);
+    arr.push({
+      find: `element-plus/theme-chalk/${_basename}`,
+      replacement: resolve(root, `src/plugins/element-plus/theme-chalk/${_basename}`)
+    });
+  });
+  return arr;
+};
+
+const autoImportStoreList = (root) => {
+  const piniaStoreKeys = [];
+  const files = globSync("src/store/modules/*.ts", { cwd: root });
+  files.forEach((p) => {
+    piniaStoreKeys.push(basename(p, ".ts"));
+  });
+  const customerImport = {};
+  piniaStoreKeys.forEach((key) => {
+    customerImport[`@/store/modules/${key}`] = [["default", `use${upperFirst(key)}Store`]];
+  });
+  return customerImport;
+};
+
+const baseConfigFn = (options) => {
+  const { tailwindAutoReferenceEntry } = options;
+  return {
+    clearScreen: false,
+    // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
+    css: {
+      lightningcss: {
+        // https://cn.vitejs.dev/config/shared-options#css-lightningcss
+        targets: browserslistToTargets(browserslist(">= 0.25%"))
+      },
+      transformer: "lightningcss"
+      // 开发/构建时怎么转译 CSS
+    },
+    plugins: [
+      tailwindAutoReference(tailwindAutoReferenceEntry),
+      // It must be registered before tailwindcss() official plugin!
+      tailwindcss(),
+      vue({
+        // features: {
+        //   optionsAPI: false, // 不能删掉，tdesign 内部使用到了
+        // },
+      }),
+      vueJsx()
+    ]
+  };
+};
+
+const tDesignAutoImportResolve = (options) => {
+  const { isProduction, root } = options;
+  const tDesignResetComponentsSubFolderFiles = globSync("src/components/tDesignReset/*/Index.vue", {
+    cwd: root
+  });
+  const tDesignResetComponentsSubFolderName = tDesignResetComponentsSubFolderFiles.map((file) => {
+    return path.basename(path.dirname(file));
+  });
+  const autoImportComponentsSubFolderFiles = globSync("src/components/autoImport/*/Index.vue", {
+    cwd: root
+  });
+  const autoImportComponentsSubFolderName = autoImportComponentsSubFolderFiles.map((file) => {
+    return path.basename(path.dirname(file));
+  });
+  return [
+    {
+      resolve: (name) => {
+        if (["TCard"].includes(name)) {
+          return {
+            from: "dlzn-ui",
+            name
+          };
+        }
+        if (["Icon", "TBaseTable", "TDateRangePicker", "TEnhancedTable", "TPrimaryTable"].includes(
+          name
+        )) {
+          return;
+        }
+        if (tDesignResetComponentsSubFolderName.includes(name)) {
+          return {
+            from: `@/components/tDesignReset/${name}/Index.vue`,
+            name: "default"
+          };
+        }
+        if (autoImportComponentsSubFolderName.includes(name)) {
+          return {
+            from: `@/components/autoImport/${name}/Index.vue`,
+            name: "default"
+          };
+        }
+        if (tDesignResetComponentsSubFolderName.map((n) => {
+          const sliceName = n.slice(1);
+          return `_${sliceName === "Table" ? "EnhancedTable" : sliceName}`;
+        }).includes(name)) {
+          return {
+            as: name,
+            from: isProduction ? "tdesign-vue-next" : "@/plugins/tdesign-vue-next-for-dev",
+            name: name.slice(1)
+          };
+        }
+        const result = TDesignResolver({
+          library: "vue-next",
+          resolveIcons: false
+          // 禁用 https://tdesign.tencent.com/icons  TDesign 图标独立站点 的图标
+        }).resolve(name);
+        if (result !== void 0) {
+          return {
+            from: isProduction ? result.from : "@/plugins/tdesign-vue-next-for-dev",
+            name: result.name
+          };
+        }
+      },
+      type: "component"
+    },
+    {
+      resolve: (name) => {
+        if (name === "Loading") {
+          return {
+            from: isProduction ? "tdesign-vue-next" : "@/plugins/tdesign-vue-next-for-dev",
+            name: "LoadingDirective"
+          };
+        }
+      },
+      type: "directive"
+    }
+  ];
+};
+
+const ENDPOINT = "/__dev__/save-folder-alias";
+const OUTPUT_FILE_WATCH_IGNORE = "**/folder-alias.json";
+const SKIP_COMPONENTS = /* @__PURE__ */ new Set(["Layout", "ParentView"]);
+function devSaveFolderAlias(root) {
+  const OUTPUT_FILE = resolve(root, "folder-alias.json");
+  return {
+    apply: "serve",
+    // Vite 对插件 config() 的返回值会做深度合并（mergeConfig）
+    // 交给 chokidar ignored，避免写入触发 HMR / 整页重载
+    config() {
+      return {
+        server: {
+          watch: {
+            ignored: [OUTPUT_FILE_WATCH_IGNORE]
+          }
+        }
+      };
+    },
+    configureServer(server) {
+      server.middlewares.use(ENDPOINT, (req, res, next) => {
+        void handleSaveFolderAlias(req, res, next, server, OUTPUT_FILE);
+      });
+    },
+    name: "dev-save-folder-alias"
+  };
+}
+async function handleSaveFolderAlias(req, res, next, server, outPutFilePath) {
+  try {
+    const body = await readBody(req);
+    const data = JSON.parse(body);
+    const content = `${JSON.stringify(toFolderAlias(data), null, 2)}
+`;
+    const resSuccess = () => {
+      res.statusCode = 200;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ file: outPutFilePath, ok: true }));
+    };
+    try {
+      const prev = await fs.readFile(outPutFilePath, "utf8");
+      if (prev === content) {
+        resSuccess();
+        return;
+      }
+    } catch {
+    }
+    await fs.writeFile(outPutFilePath, content, "utf8");
+    server.config.logger.info(`[dev-save-folder-alias] written \u2192 ${outPutFilePath}`);
+    resSuccess();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    res.statusCode = 500;
+    res.setHeader("Content-Type", "application/json");
+    res.end(JSON.stringify({ message, ok: false }));
+    server.config.logger.error(`[dev-save-folder-alias] ${message}`);
+  }
+}
+function readBody(req) {
+  return new Promise((resolve2, reject) => {
+    const chunks = [];
+    req.setEncoding("utf8");
+    req.on("data", (chunk) => {
+      chunks.push(chunk);
+    });
+    req.on("end", () => {
+      resolve2(chunks.join(""));
+    });
+    req.on("error", reject);
+  });
+}
+function toFolderAlias(routers) {
+  const result = {};
+  const walk = (items, level = 0) => {
+    for (const item of items) {
+      const title = item.meta.title;
+      if (title !== "") {
+        const component = item.component;
+        if (!SKIP_COMPONENTS.has(component)) {
+          result[`src/views/${component.split("___")[0]}.vue`] = { description: title };
+          const arr = component.split("/");
+          arr.forEach((_, index) => {
+            if (index === arr.length - 1) {
+              return;
+            }
+            const key = `src/views/${arr.slice(0, index + 1).join("/")}`;
+            const description = [
+              ...new Set([result[key]?.description, title].filter(Boolean))
+            ].join("\u3001");
+            result[key] = {
+              description: index === 0 ? routers.find((r) => r.path === arr[0])?.meta.title ?? description : description
+            };
+          });
+        }
+      }
+      if (item.children !== void 0 && item.children.length > 0) {
+        walk(item.children, level + 1);
+      }
+    }
+  };
+  walk(routers);
+  return result;
+}
+
+const vitePlugins = (options) => {
+  const { isProduction, root } = options;
+  if (isProduction) {
+    return [
+      viteImagemin({
+        gifsicle: {
+          // https://github.com/imagemin/imagemin-gifsicle
+          colors: 256,
+          // 指定 GIF 图像调色板（颜色表）的最大颜色数量, 可丢弃一些颜色达到更大的优化效果
+          interlaced: false,
+          // 渐进式加载效果
+          optimizationLevel: 2
+          // 中的优化级别
+        },
+        mozjpeg: {
+          quality: 50
+          // 图片质量(0-100)
+        },
+        optipng: {
+          optimizationLevel: 3
+          // 压缩过程中尝试的优化策略和强度(0-7)
+        },
+        pngquant: {
+          quality: [0.65, 0.8],
+          // 压缩后的图片质量范围[最小, 最大]
+          speed: 4
+        },
+        svgo: {
+          datauri: "base64",
+          // 'base64'|'enc'|'unenc' 指定如何将 SVG 转换为 Data URI 格式
+          js2svg: {
+            // 控制 SVG 输出的格式
+            indent: 4,
+            // 缩进空格数
+            pretty: false
+            // 是否美化输出格式
+          },
+          multipass: false,
+          // 是否启用多遍优化: false 表示只进行单遍优化，true 会重复优化直到无法进一步优化, 设置为 true 的话可能优化的更大
+          plugins: [
+            {
+              name: "preset-default"
+            }
+          ]
+        },
+        webp: {
+          quality: 80
+          // 图片质量(0-100)
+        }
+      }),
+      compression(),
+      visualizer({
+        filename: "node_modules/.cache/visualizer/report.html",
+        open: true
+      }),
+      webUpdateNotice({
+        hiddenDefaultNotification: true,
+        logVersion: false
+      })
+    ];
+  } else {
+    return [
+      // vueDevTools()
+      {
+        configureServer(server) {
+          const { printUrls } = server;
+          server.printUrls = () => {
+            if (server.resolvedUrls !== null) {
+              server.resolvedUrls.local = [];
+              server.resolvedUrls.network = server.resolvedUrls.network.filter(
+                (url) => url.includes("192.168.")
+              );
+            }
+            printUrls();
+          };
+        },
+        name: "filter-vite-server-urls"
+      },
+      devSaveFolderAlias(root)
+    ];
+  }
+};
+
+function bypass(req, res, options) {
+  if (req.url !== void 0 && options.rewrite !== void 0 && typeof options.target === "string" && res !== void 0) {
+    const reqUrl = req.url;
+    const proxyUrl = new URL(options.rewrite(reqUrl), options.target).href;
+    res.setHeader("X-Res-ProxyUrl", proxyUrl);
+  }
+}
+function needPort(target) {
+  return target.startsWith("http://192.");
+}
+const index = (_env, options) => {
+  const { command, mode } = _env;
+  const resolvePath = (p) => resolve(options.root, p);
+  const envDir = "env";
+  const env = parseLoadedEnv(loadEnv(mode, envDir));
+  const {
+    VITE_API_PROXY_PORT_ARRAY,
+    VITE_APP_ID,
+    VITE_APP_NAME = "",
+    VITE_BASE_URL = "/",
+    VITE_FORCE_PWD_CHANGE = true,
+    VITE_PROXY_TARGET: viteProxyTarget,
+    VITE_USE_LOGIN_CAPTCHA = true
+  } = env;
+  const VITE_PROXY_TARGET = Array.isArray(viteProxyTarget) ? viteProxyTarget : [viteProxyTarget];
+  console.log({
+    command,
+    mode,
+    VITE_API_PROXY_PORT_ARRAY,
+    VITE_APP_ID,
+    VITE_APP_NAME,
+    VITE_BASE_URL,
+    VITE_FORCE_PWD_CHANGE,
+    VITE_PROXY_TARGET,
+    VITE_USE_LOGIN_CAPTCHA
+  });
+  const isProduction = mode === "production";
+  const getProxyTarget = (index, port) => {
+    const target = VITE_PROXY_TARGET.length > 1 ? VITE_PROXY_TARGET[index] : VITE_PROXY_TARGET[0];
+    return needPort(target) ? `${target}:${port}` : target;
+  };
+  return mergeConfig(
+    baseConfigFn({
+      tailwindAutoReferenceEntry: "node_modules/dlzn-ui/assets/css/tailwindcss-entry.css"
+    }),
+    {
+      build: {
+        rolldownOptions: {
+          output: {
+            minify: {
+              codegen: true,
+              //
+              compress: {
+                dropConsole: true
+                // 默认 false
+                // dropDebugger: true, // 默认 true
+              },
+              mangle: true
+              // 变量名混淆
+            }
+          }
+        }
+      },
+      define: {
+        VITE_API_PREFIX_ARRAY: JSON.stringify(VITE_API_PROXY_PORT_ARRAY.map(([prefix]) => prefix)),
+        VITE_APP_ID: JSON.stringify(VITE_APP_ID),
+        VITE_APP_NAME: JSON.stringify(VITE_APP_NAME),
+        VITE_BASE_URL: JSON.stringify(VITE_BASE_URL),
+        VITE_FORCE_PWD_CHANGE: JSON.stringify(VITE_FORCE_PWD_CHANGE),
+        VITE_USE_LOGIN_CAPTCHA: JSON.stringify(VITE_USE_LOGIN_CAPTCHA)
+      },
+      // envDir, // 将 env 文件里面的变量注入到 import.meta.env 里面
+      optimizeDeps: {
+        include: [
+          "tdesign-vue-next/dist/tdesign.min.js",
+          "path-browserify",
+          "lodash-es",
+          "pinia-plugin-persistedstate",
+          "alova",
+          "alova/fetch",
+          "alova/vue",
+          "@iconify/vue",
+          "@formkit/auto-animate",
+          "@formkit/auto-animate/vue",
+          "dayjs",
+          "dayjs/plugin/customParseFormat.js",
+          "dayjs/plugin/isSameOrBefore.js",
+          "dayjs/plugin/timezone.js",
+          "dayjs/plugin/utc.js",
+          "wordcloud",
+          "echarts/charts",
+          "echarts/components",
+          "echarts/core",
+          "echarts/renderers",
+          "@tdesign-vue-next/chat",
+          "vue-echarts",
+          "dompurify",
+          "cron-parser",
+          "cronstrue",
+          "cronstrue/locales/zh_CN",
+          "quartzcron",
+          "@bprogress/core",
+          "element-plus",
+          "element-plus/es/components/config-provider/style/css",
+          "element-plus/es/locale/lang/zh-cn",
+          "element-plus/es/components/date-picker/style/css",
+          "element-plus/es/components/scrollbar/style/css",
+          "color",
+          "dlzn-ui"
+        ]
+      },
+      plugins: [
+        // envParse({
+        //   dtsPath: 'types/env.d.ts',
+        // }),
+        createHtmlPlugin({
+          entry: `/src/main.${isProduction ? "prod" : "dev"}.ts`,
+          // 必须绝对路径,否则类似system/log/operlog 二级页面打不开
+          inject: {
+            data: {
+              appId: VITE_APP_ID,
+              mode: isProduction ? "prod" : "dev",
+              title: VITE_APP_NAME
+            },
+            ejsOptions: {
+              views: ["node_modules/dlzn-ui/ejs"]
+            }
+          },
+          minify: true,
+          // 相对消费方 root，closeBundle 整理 HTML 时比绝对路径更稳
+          template: "node_modules/dlzn-ui/index.html"
+        }),
+        VueRouter({
+          dts: "types/typed-router.d.ts"
+        }),
+        ElementPlus({}),
+        AutoImport({
+          // 用于自动导入 函数/工具库 的 API
+          // function modifyDefaultExportsAlias(imports, options) {
+          //   if (options.defaultExportByFilename) imports.forEach((i) => {
+          //     if (i.name === "default") i.as = i.from.split("/").pop()?.split(".")?.shift() ?? i.as;
+          //   });
+          //   return imports;
+          // }
+          // defaultExportByFilename: false, // 默认为 false
+          dirs: ["src/plugins/autoImport", "src/bus/autoImport", "src/hooks"],
+          dirsScanOptions: {
+            types: false
+            // Enable auto import the types under the directories
+          },
+          dts: "types/auto-imports.d.ts",
+          // dtsMode: 'overwrite', // overwrite the whole existing .d.ts file with the new type definitions.
+          imports: [
+            "vue",
+            "vue-router",
+            "pinia",
+            "@vueuse/core",
+            {
+              from: "alova/client",
+              imports: ["useRequest", "useWatcher", "usePagination"]
+            },
+            {
+              from: "@/plugins/others/directive.ts",
+              imports: ["checkPermissions"]
+            },
+            {
+              from: "dlzn-ui/utils",
+              imports: ["formatNumber", "isFalsy", "stringDisplay"]
+            },
+            {
+              "@/plugins/alova/index.ts": [["default", "alovaInst"]]
+            },
+            {
+              from: "@/components/tDesignReset/TForm/index.ts",
+              imports: ["FormItem", "FormInstance", "FormExposed"],
+              type: true
+            },
+            {
+              from: "@/components/tDesignReset/TTable/index.ts",
+              imports: ["TableCol", "CellRenderContext"],
+              type: true
+            },
+            {
+              from: "@/components/autoImport/TPageList/index.ts",
+              imports: ["PageListProps"],
+              type: true
+            },
+            autoImportStoreList(options.root),
+            ...options.autoImports ?? []
+          ],
+          resolvers: [
+            ...options.autoImportResolvers ?? [],
+            ...tDesignAutoImportResolve({
+              isProduction,
+              root: options.root
+            })
+          ],
+          vueTemplate: true
+          // 允许插件扫描 Vue 文件的 <template> 部分，并自动导入在模板表达式中使用的 API
+        }),
+        Components({
+          deep: false,
+          // 用于自动导入 Vue 组件
+          dts: "types/components.d.ts",
+          resolvers: [
+            ...options.autoImportResolvers ?? [],
+            ...tDesignAutoImportResolve({
+              isProduction,
+              root: options.root
+            })
+          ]
+          // syncMode: 'overwrite',
+        }),
+        ...vitePlugins({ isProduction, root: options.root })
+      ],
+      resolve: {
+        alias: [
+          {
+            find: "@",
+            replacement: resolvePath("src")
+            // 使用绝对路径（官方推荐）
+          },
+          {
+            find: "img",
+            // 路径以 img 开头
+            replacement: resolvePath("src/assets/images")
+          },
+          ...isProduction ? [] : [
+            {
+              // find 为正则时只替换匹配段，必须用 ^...$ 匹配完整 id
+              // 同时覆盖裸导入与已 resolve 的绝对路径
+              find: /^.*tdesign-vue-next[/\\]es[/\\].*\.css$/,
+              replacement: resolvePath("src/plugins/tdesign-vue-next-for-dev/empty.css")
+            }
+          ],
+          ...aliasElementPlus(options.root)
+        ],
+        // https://cn.vitejs.dev/guide/performance.html#reduce-resolve-operations
+        // 不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
+        extensions: [".ts", ".mjs", ".js"]
+        // js 和 mjs 打包chat包时需要
+      },
+      root: options.root,
+      server: {
+        // vite preview 也会走该代理
+        host: "0.0.0.0",
+        // 可以用ip访问
+        open: false,
+        port: VITE_API_PROXY_PORT_ARRAY[0][1] + 1e3,
+        proxy: Object.fromEntries(
+          VITE_API_PROXY_PORT_ARRAY.map(([prefix, port], index) => [
+            `${posix.join(VITE_BASE_URL, prefix)}/`,
+            {
+              bypass,
+              changeOrigin: true,
+              rewrite: (p) => {
+                return VITE_BASE_URL === "/" ? p : p.replace(new RegExp(VITE_BASE_URL), "");
+              },
+              target: getProxyTarget(index, port)
+            }
+          ])
+        ),
+        strictPort: true
+      }
+    }
+  );
+};
+
+export { index as default };

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@dlzn-ui/vite-config",
   "type": "module",
-  "version": "1.63.0",
+  "version": "1.65.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
-      "import": "./index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
     }
   },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "tailwindcss": "^4.3.3",
     "vite": "^8.2.0"
@@ -33,6 +37,15 @@
     "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-vue-tailwind-auto-reference": "^2.0.2",
     "vue-router": "^5.2.0",
-    "@dlzn-ui/node-utils": "1.63.0"
+    "@dlzn-ui/node-utils": "1.65.0"
+  },
+  "devDependencies": {
+    "rimraf": "^6.1.3",
+    "unbuild": "^3.6.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "clean": "rimraf dist",
+    "stub": "unbuild --stub"
   }
 }

package/aliasElementPlus.ts

@@ -1,20 +0,0 @@
-import { basename, resolve } from 'node:path'
-import { globSync } from 'tinyglobby'
-
-export default (root: string) => {
-  const elementPlusCss = globSync('src/plugins/element-plus/theme-chalk/*.css', { cwd: root })
-  const arr: Array<{
-    find: string
-    replacement: string
-  }> = []
-
-  elementPlusCss.forEach((file) => {
-    const _basename = basename(file)
-
-    arr.push({
-      find: `element-plus/theme-chalk/${_basename}`,
-      replacement: resolve(root, `src/plugins/element-plus/theme-chalk/${_basename}`),
-    })
-  })
-  return arr
-}