up 更新web端依赖包版本，修复潜在错误

2025-11-04 16:23:43 +08:00 · 2024-08-27 17:37:23 +08:00
parent 6cf80ed0fe
commit 33e5252516
11 changed files with 51 additions and 136 deletions
--- a/web/build/script/buildConf.ts
+++ b/web/build/script/buildConf.ts
@@ -2,7 +2,7 @@
 * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
 */
 import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
-import fs, { writeFileSync } from 'fs-extra';
+import fs from 'fs-extra';
 import chalk from 'chalk';

 import { getRootPath, getEnvConfig } from '../utils';
@@ -28,7 +28,7 @@ function createConfig(
      });
    `.replace(/\s/g, '');
    fs.mkdirp(getRootPath(OUTPUT_DIR));
-    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
+    fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);

    console.log(chalk.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
    console.log(chalk.gray(OUTPUT_DIR + '/' + chalk.green(configFileName)) + '\n');
--- a/web/build/vite/plugin/html.ts
+++ b/web/build/vite/plugin/html.ts
@@ -2,10 +2,7 @@
 * Plugin to minimize and use ejs template syntax in index.html.
 * https://github.com/anncwb/vite-plugin-html
 */
-import type { Plugin } from 'vite';
-
-import html from 'vite-plugin-html';
-
+import { createHtmlPlugin } from 'vite-plugin-html';
 import pkg from '../../../package.json';
 import { GLOB_CONFIG_FILE_NAME } from '../../constant';

@@ -18,25 +15,24 @@ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
  };

-  const htmlPlugin: Plugin[] = html({
+  return createHtmlPlugin({
    minify: isBuild,
    inject: {
      // Inject data into ejs template
-      injectData: {
+      data: {
        title: VITE_GLOB_APP_TITLE,
      },
      // Embed the generated app.config.js file
      tags: isBuild
        ? [
-            {
-              tag: 'script',
-              attrs: {
-                src: getAppConfigSrc(),
-              },
+          {
+            tag: 'script',
+            attrs: {
+              src: getAppConfigSrc(),
            },
-          ]
+          },
+        ]
        : [],
    },
  });
-  return htmlPlugin;
 }
--- a/web/package.json
+++ b/web/package.json
@@ -1,5 +1,6 @@
 {
  "name": "hotgo",
+  "type": "module",
  "version": "2.15.7",
  "author": {
    "name": "MengShuai",
@@ -33,9 +34,9 @@
    "@vue/runtime-core": "^3.4.21",
    "@vueup/vue-quill": "^1.2.0",
    "@vueuse/core": "^10.9.0",
-    "axios": "^1.6.8",
-    "date-fns": "^2.28.0",
-    "echarts": "^5.5.0",
+    "axios": "^1.7.2",
+    "date-fns": "^2.30.0",
+    "echarts": "^5.5.1",
    "element-resize-detector": "^1.2.4",
    "fingerprintjs2": "^2.1.4",
    "highlight.js": "^11.8.0",
@@ -46,33 +47,33 @@
    "pinyin-pro": "^3.16.3",
    "print-js": "^1.6.0",
    "qrcode.vue": "3.3.3",
-    "qs": "^6.10.3",
+    "qs": "^6.12.1",
    "quill-image-uploader": "^1.3.0",
    "quill-magic-url": "^4.2.0",
    "spark-md5": "^3.0.2",
    "throttle-debounce": "^5.0.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vue-types": "^5.1.1",
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.0",
+    "vue-types": "^4.2.1",
    "vue-waterfall-plugin-next": "^2.2.3",
    "vue3-json-viewer": "^2.2.2",
    "vuedraggable": "^4.1.0",
    "weixin-js-sdk": "^1.6.0"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.7.0",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@types/lodash": "^4.14.197",
-    "@types/node": "^18.17.4",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^18.19.39",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.31",
    "@vue/eslint-config-typescript": "^11.0.3",
    "autoprefixer": "^10.4.19",
    "commitizen": "^4.3.0",
-    "core-js": "^3.36.1",
+    "core-js": "^3.37.1",
    "crypto-js": "^4.2.0",
    "dotenv": "^16.4.5",
    "eslint": "^8.57.0",
@@ -80,7 +81,7 @@
    "eslint-define-config": "1.12.0",
    "eslint-plugin-jest": "^27.9.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.24.1",
+    "eslint-plugin-vue": "^9.26.0",
    "esno": "^0.16.3",
    "gh-pages": "^4.0.0",
    "husky": "^8.0.3",
@@ -97,17 +98,17 @@
    "stylelint-config-standard": "^29.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.7.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.4.4",
    "typescript": "^5.3.0",
    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.5.3",
+    "vite": "^5.3.2",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-html": "^3.2.2",
    "vite-plugin-require-transform": "^1.0.5",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-top-level-await": "^1.2.2",
    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-eslint-parser": "^7.11.0"
+    "vue-eslint-parser": "^9.4.3"
  },
  "lint-staged": {
    "*.{vue,js,ts,tsx}": "eslint --fix"
--- a/web/postcss.config.cjs
+++ b/web/postcss.config.cjs
--- a/web/src/components/Modal/src/basicModal.vue
+++ b/web/src/components/Modal/src/basicModal.vue
@@ -21,16 +21,7 @@
 </template>

 <script lang="ts" setup>
-  import {
-    getCurrentInstance,
-    ref,
-    nextTick,
-    unref,
-    computed,
-    useAttrs,
-    defineEmits,
-    defineProps,
-  } from 'vue';
+  import { getCurrentInstance, ref, nextTick, unref, computed, useAttrs } from 'vue';
  import { basicProps } from './props';
  import startDrag from '@/utils/Drag';
  import { deepMerge } from '@/utils';
--- a/web/src/router/generator-routers.ts
+++ b/web/src/router/generator-routers.ts
@@ -129,10 +129,9 @@ export const dynamicImport = (
 * 移除隐藏的菜单
 * @param menus
 */
-export const removeHiddenMenus = (menus: RouteRecordRaw[]) => {
-  const arr = [];
+export const removeHiddenMenus = (menus: any[]) => {
+  const arr: any[] = [];
  for (let j = 0; j < menus.length; j++) {
-    // console.log('menus[j]:' + JSON.stringify(menus[j]));
    if (menus[j].meta?.type === 3) {
      continue;
    }
@@ -140,19 +139,13 @@ export const removeHiddenMenus = (menus: RouteRecordRaw[]) => {
      continue;
    }

-    // @ts-ignore
    if (menus[j].children?.length > 0) {
-      // @ts-ignore
      menus[j].children = removeHiddenMenus(menus[j].children);
      if (menus[j].children?.length === 0) {
        delete menus[j].children;
      }
    }
-
-    // @ts-ignore
    arr.push(menus[j]);
  }
-
-  // @ts-ignore
  return arr;
 };
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -3,9 +3,10 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { RedirectRoute } from '@/router/base';
 import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards';
+import { createRouterIcon } from './router-icons';

 // @ts-ignore
-const modules = import.meta.globEager('./modules/**/*.ts');
+const modules = import.meta.glob('./modules/**/*.ts');
 const routeModuleList: RouteRecordRaw[] = [];

 Object.keys(modules).forEach((key) => {
@@ -55,6 +56,7 @@ export function setupRouter(app: App) {
  app.use(router);
  // 创建路由守卫
  createRouterGuards(router);
+  createRouterIcon();
 }

 export default router;
--- a/web/src/router/router-icons.ts
+++ b/web/src/router/router-icons.ts
@@ -1,12 +1,15 @@
-import { renderIcon } from '@/utils/index';
+import { renderIcon } from '@/utils';
 import * as antdIcons from '@vicons/antd';
 // import * as x5Icons from '@vicons/ionicons5';

 export const constantRouterIcon = {};
-for (const element of Object.keys(antdIcons)) {
-  constantRouterIcon[element] = renderIcon(antdIcons[element]);
-}

-// for (const element of Object.keys(x5Icons)) {
-//   constantRouterIcon[element] = renderIcon(x5Icons[element]);
-// }
+export function createRouterIcon() {
+  for (const element of Object.keys(antdIcons)) {
+    constantRouterIcon[element] = renderIcon(antdIcons[element]);
+  }
+
+  // for (const element of Object.keys(x5Icons)) {
+  //   constantRouterIcon[element] = renderIcon(x5Icons[element]);
+  // }
+}
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -19,7 +19,7 @@ import { cloneDeep } from 'lodash-es';
 import { VNode } from 'vue';
 import { DictType, useDictStore } from '@/store/modules/dict';
 import { fallbackSrc } from '@/utils/hotgo';
-import {getFileExt} from "@/utils/urlUtils";
+import { getFileExt } from '@/utils/urlUtils';

 export const renderTooltip = (trigger, content) => {
  return h(NTooltip, null, {
--- a/web/src/views/monitor/serve-monitor/index.vue
+++ b/web/src/views/monitor/serve-monitor/index.vue
@@ -19,7 +19,7 @@
                </div>
              </template>
              <template v-else-if="index === 2" #extra="{ extra }">
-                <n-progress type="line" :percentage="extra.data" />
+                <n-progress type="line" :percentage="Number(extra.data)" />
              </template>
              <template v-else-if="index === 3" #extra>
                <LoadChart ref="loadChartRef" :data-model="dataSource.load" />
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,78 +1,7 @@
 module.exports = {
-  mode: 'jit',
-  // darkMode: 'class',
-  plugins: [createEnterPlugin()],
-  purge: {
-    enable: process.env.NODE_ENV === 'production',
-    content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
-  },
+  content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
+  important: true,
  theme: {
-    extend: {
-      zIndex: {
-        '-1': '-1',
-      },
-      colors: {
-        primary: {
-          DEFAULT: '#0960bd',
-          // dark: primaryColorDark,
-        },
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px',
-      },
-    },
+    extend: {},
  },
 };
-/**
- * Used for animation when the element is displayed
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
- */
-function createEnterPlugin(maxOutput = 6) {
-  const createCss = (index, d = 'x') => {
-    const upd = d.toUpperCase();
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`,
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`,
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`,
-      },
-    };
-  };
-  const handler = ({ addBase }) => {
-    const addRawCss = {};
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(addRawCss, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y'),
-      });
-    }
-    addBase({
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)',
-        },
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)',
-        },
-      },
-    });
-  };
-  return { handler };
-}