From 33e5252516b2d85c060a397f9a191bc2c316be0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9F=E5=B8=85?= <133814250@qq.com>
Date: Tue, 27 Aug 2024 17:37:23 +0800
Subject: [PATCH] =?UTF-8?q?up=20=E6=9B=B4=E6=96=B0web=E7=AB=AF=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=8C=85=E7=89=88=E6=9C=AC=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=BD=9C=E5=9C=A8=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/build/script/buildConf.ts                 |  4 +-
 web/build/vite/plugin/html.ts                 | 22 +++---
 web/package.json                              | 37 ++++-----
 web/{postcss.config.js => postcss.config.cjs} |  0
 web/src/components/Modal/src/basicModal.vue   | 11 +--
 web/src/router/generator-routers.ts           | 11 +--
 web/src/router/index.ts                       |  4 +-
 web/src/router/router-icons.ts                | 17 ++--
 web/src/utils/index.ts                        |  2 +-
 web/src/views/monitor/serve-monitor/index.vue |  2 +-
 web/tailwind.config.js                        | 77 +------------------
 11 files changed, 51 insertions(+), 136 deletions(-)
 rename web/{postcss.config.js => postcss.config.cjs} (100%)

diff --git a/web/build/script/buildConf.ts b/web/build/script/buildConf.ts
index a44a1d8..0567a0d 100644
--- 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');
diff --git a/web/build/vite/plugin/html.ts b/web/build/vite/plugin/html.ts
index dec546c..ef744d8 100644
--- 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;
 }
diff --git a/web/package.json b/web/package.json
index bc96a46..8c4e56f 100644
--- 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"
diff --git a/web/postcss.config.js b/web/postcss.config.cjs
similarity index 100%
rename from web/postcss.config.js
rename to web/postcss.config.cjs
diff --git a/web/src/components/Modal/src/basicModal.vue b/web/src/components/Modal/src/basicModal.vue
index fbff020..8b1f9b1 100644
--- 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';
diff --git a/web/src/router/generator-routers.ts b/web/src/router/generator-routers.ts
index 48b0112..1f107ee 100644
--- 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;
 };
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 5684c9b..bfae36f 100644
--- 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;
diff --git a/web/src/router/router-icons.ts b/web/src/router/router-icons.ts
index 25b0d0e..a72e4d1 100644
--- 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]);
+  // }
+}
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 823f65a..6b64692 100644
--- 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, {
diff --git a/web/src/views/monitor/serve-monitor/index.vue b/web/src/views/monitor/serve-monitor/index.vue
index d8835d5..9252f5c 100644
--- 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" />
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 116d260..ed05a3d 100644
--- 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 };
-}