From 85ea245f57754092138634196eef77e1a391aef6 Mon Sep 17 00:00:00 2001
From: sunhao <sunhao@easycorp.ltd>
Date: Wed, 20 Mar 2024 21:58:24 +0800
Subject: [PATCH] * Migrate from vue-cli-service to vite and upgrade all
 dependencies.

---
 ui/.browserslistrc                            |   3 -
 ui/.eslintrc.js                               |  44 ------
 ui/.gitignore                                 |  25 ++--
 ui/README.md                                  |   6 +-
 ui/babel.config.js                            |   5 -
 ui/index.html                                 |  13 ++
 ui/jest.config.js                             |   6 -
 ui/package.json                               |  96 ++++--------
 ui/public/index.html                          |  16 --
 ui/src/components/ButtonList.vue              |   4 +-
 ui/src/components/Dropdown.vue                |   2 +-
 ui/src/components/DropdownMenu.vue            |   2 +-
 ui/src/components/MonacoEditor.vue            |   2 +-
 ui/src/components/ProgressBar.vue             |   2 +-
 ui/src/components/Row.vue                     |   6 +-
 ui/src/components/Switch.vue                  |   6 +-
 ui/src/components/Table.vue                   |  18 +--
 ui/src/components/TabsContainer.vue           |   2 +-
 ui/src/config/router.ts                       |   2 +-
 ui/src/main.ts                                |   7 +-
 ui/src/services/websocket.ts                  |   8 +-
 ui/src/store/tabs.ts                          |   2 +-
 ui/src/utils/form.ts                          |   3 +-
 ui/src/utils/i18n.ts                          | 141 ++++++++----------
 ui/src/utils/request.ts                       |   6 +-
 ui/src/utils/store.ts                         |  70 +++++----
 ui/src/views/exec/LogList.vue                 |  35 ++---
 ui/src/views/exec/TabPageExecUnit.vue         |   2 +-
 ui/src/views/interpreter/FormInterpreter.vue  |   4 +-
 ui/src/views/interpreter/interpreterModal.vue |   4 +-
 ui/src/views/result/FormBug.vue               |  10 +-
 ui/src/views/result/FormResult.vue            |   4 +-
 ui/src/views/result/TabPageResult.vue         |   2 +-
 ui/src/views/script/FilterModal.vue           |   8 +-
 ui/src/views/script/FormNode.vue              |   2 +-
 ui/src/views/script/TabPageScript.vue         |   6 +-
 ui/src/views/script/WorkDirPanel.vue          |  12 +-
 ui/src/views/settings/SettingsModal.vue       |   8 +-
 ui/src/views/site/FormSite.vue                |   2 +-
 ui/src/vite-env.d.ts                          |  20 +++
 ui/tsconfig.json                              |  54 +++----
 ui/tsconfig.node.json                         |  11 ++
 ui/vite.config.ts                             |  16 ++
 ui/vue.config.js                              | 121 ---------------
 44 files changed, 306 insertions(+), 512 deletions(-)
 delete mode 100644 ui/.browserslistrc
 delete mode 100644 ui/.eslintrc.js
 delete mode 100644 ui/babel.config.js
 create mode 100644 ui/index.html
 delete mode 100644 ui/jest.config.js
 delete mode 100644 ui/public/index.html
 create mode 100644 ui/src/vite-env.d.ts
 create mode 100644 ui/tsconfig.node.json
 create mode 100644 ui/vite.config.ts
 delete mode 100644 ui/vue.config.js

diff --git a/ui/.browserslistrc b/ui/.browserslistrc
deleted file mode 100644
index 214388fe4..000000000
--- a/ui/.browserslistrc
+++ /dev/null
@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
deleted file mode 100644
index a9b60976a..000000000
--- a/ui/.eslintrc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    '@typescript-eslint/no-explicit-any': ['off'],
-    '@typescript-eslint/no-unused-vars': ['off'],
-    '@typescript-eslint/ban-types': ['off'],
-    'vue/script-setup-uses-vars': 1,
-    'vue/multi-word-component-names': 0,
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
-      }
-    },
-    {
-      files: [
-        './mock/*.{j,t}s?(x)',
-        './src/utils/mock/*.{j,t}s?(x)'
-      ],
-      rules: {
-        'no-var': ['off'],
-        '@typescript-eslint/no-var-requires': ['off'],
-      }
-    }
-  ]
-}
diff --git a/ui/.gitignore b/ui/.gitignore
index 5d55bb11c..13c6e23b8 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -1,22 +1,23 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-yarn.lock
+lerna-debug.log*
+
+.DS_Store
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/ui/README.md b/ui/README.md
index 29b73d462..cee2040ce 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,9 +1,5 @@
 # ZTF Client
 
-Vue.js 3, Ant Design Vue 2, TypeScript, WebSocket
-
 ### Licenses
-All source code is licensed under the [GPLv3 License](LICENSE.md).
 
-## Thanks
-Thank you [JetBrains](https://www.jetbrains.com) for providing free open source licenses.
\ No newline at end of file
+All source code is licensed under the [GPLv3 License](LICENSE.md).
diff --git a/ui/babel.config.js b/ui/babel.config.js
deleted file mode 100644
index e9558405f..000000000
--- a/ui/babel.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 000000000..548115755
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/ui/jest.config.js b/ui/jest.config.js
deleted file mode 100644
index d7f13cc2a..000000000
--- a/ui/jest.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
-  transform: {
-    '^.+\\.vue$': 'vue-jest'
-  }
-}
diff --git a/ui/package.json b/ui/package.json
index ae03c77e2..eee1c6505 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,85 +1,43 @@
 {
-  "name": "ZTF",
-  "description": "Zentao Test Framework",
-  "version": "1.0.0",
+  "name": "zentaoatf-ui",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "svgo": "svgo -f src/assets/iconsvg --config=src/assets/iconsvg/svgo.yml"
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@iconify-icons/codicon": "^1.2.6",
-    "@iconify-icons/fluent": "^1.2.7",
+    "@iconify-icons/codicon": "^1.2.30",
+    "@iconify-icons/fluent": "^1.2.38",
     "@iconify/vue": "^3.2.1",
-    "@toast-ui/editor": "^2.5.3",
-    "@vueuse/core": "^8.4.2",
-    "ant-design-vue": "^2.2.8",
+    "@intlify/core-base": "^9.10.2",
+    "@vueuse/core": "^10.9.0",
     "axios": "^0.21.4",
-    "core-js": "^3.18.0",
     "localforage": "^1.10.0",
+    "lodash-es": "^4.17.21",
     "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
-    "mitt": "^3.0.0",
-    "monaco-editor": "0.25.2",
-    "monaco-editor-webpack-plugin": "^6.0.0",
+    "mitt": "^3.0.1",
+    "moment": "^2.30.1",
+    "monaco-editor": "0.47.0",
     "neffos.js": "0.1.25",
     "nprogress": "^0.2.0",
-    "sass-loader": "^12.6.0",
-    "splitpanes": "^3.1.1",
-    "vue": "^3.2.18",
+    "splitpanes": "^3.1.5",
+    "vue": "^3.4.21",
     "vue-final-modal": "3.4.4",
-    "vue-i18n": "^9.1.7",
-    "vue-router": "^4.0.11",
-    "vue-toast-notification": "^3.0",
-    "vue-toastification": "^2.0.0-rc.5",
-    "vuex": "^4.0.2"
+    "vue-i18n": "^9.10.2",
+    "vue-router": "^4.3.0",
+    "vue-toast-notification": "^3.1.2",
+    "vue-toastification": "2.0.0-rc.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@types/echarts": "^4.9.10",
-    "@types/jest": "^24.9.1",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/splitpanes": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-router": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
-    "@vue/cli-plugin-vuex": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/compiler-sfc": "^3.2.18",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^2.0.0-rc.15",
-    "body-parser": "^1.19.0",
-    "chokidar": "^3.5.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^8.7.1",
-    "less": "^3.13.1",
-    "less-loader": "^5.0.0",
-    "lint-staged": "^9.5.0",
-    "mockjs": "^1.1.0",
-    "node-dir": "^0.1.17",
-    "style-loader": "2.0.0",
-    "svg-sprite-loader": "^5.2.1",
-    "svgo": "^1.3.2",
-    "svgo-loader": "^2.2.2",
-    "typescript": "~4.1.6",
-    "vue-jest": "^5.0.0-alpha.10"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "keywords": [
-    "ztf"
-  ],
-  "lint-staged": {
-    "*.{js,jsx,vue,ts,tsx}": [
-      "vue-cli-service lint",
-      "git add"
-    ]
+    "@types/node": "^20.11.30",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "less": "^4.2.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.0",
+    "vue-tsc": "^1.8.27"
   }
 }
diff --git a/ui/public/index.html b/ui/public/index.html
deleted file mode 100644
index 7839548ce..000000000
--- a/ui/public/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-  </body>
-</html>
diff --git a/ui/src/components/ButtonList.vue b/ui/src/components/ButtonList.vue
index d8823fe24..f869c8a3b 100644
--- a/ui/src/components/ButtonList.vue
+++ b/ui/src/components/ButtonList.vue
@@ -39,14 +39,14 @@ const buttonPropsList = computed(() => {
         return null;
     }
     return props.buttons.map((x, i) => {
-        let item: (ButtonProps | Record<string, any>) & {key: string | number | symbol};
+        let item: (ButtonProps | Record<string, any>) & {key: string | number | symbol, hintI18n: string};
 
         if (props.replaceFields && Button.props) {
             item = Object.keys(Button.props).reduce((item2, propName) => {
                 const replacePropName = props.replaceFields ? props.replaceFields[propName] : null;
               item2[propName] = x[typeof replacePropName === 'string' ? replacePropName : propName];
                 return item2;
-            }, {key: x.key !== undefined ? x.key : i});
+            }, {key: x.key !== undefined ? x.key : i}) as typeof item;
         } else {
             item = {
                 key: i,
diff --git a/ui/src/components/Dropdown.vue b/ui/src/components/Dropdown.vue
index e6a333f4c..976569b06 100644
--- a/ui/src/components/Dropdown.vue
+++ b/ui/src/components/Dropdown.vue
@@ -3,7 +3,7 @@
     <div
       class="dropdown-toggle"
       :class="toggleClass"
-      :style="toggleStyle"
+      :style="toggleStyle as any"
     >
       <slot />
     </div>
diff --git a/ui/src/components/DropdownMenu.vue b/ui/src/components/DropdownMenu.vue
index 87cb9f2ac..28361deb4 100644
--- a/ui/src/components/DropdownMenu.vue
+++ b/ui/src/components/DropdownMenu.vue
@@ -94,7 +94,7 @@ function _toggle(show?: boolean) {
   state.show = show;
   state.showed = false;
   if (show) {
-    showTimerRef.value = setTimeout(() => {
+    showTimerRef.value = window.setTimeout(() => {
       state.showed = true;
       showTimerRef.value = 0;
     }, 100);
diff --git a/ui/src/components/MonacoEditor.vue b/ui/src/components/MonacoEditor.vue
index 1d51e6e71..9b51f5960 100644
--- a/ui/src/components/MonacoEditor.vue
+++ b/ui/src/components/MonacoEditor.vue
@@ -95,7 +95,7 @@ onMounted(() => {
 
         emit('editorDidMount', editor);
         setTimeout(() => {
-            editor.getAction('editor.action.formatDocument').run();
+            editor.getAction('editor.action.formatDocument')?.run();
         }, 100);
     }
 });
diff --git a/ui/src/components/ProgressBar.vue b/ui/src/components/ProgressBar.vue
index 6907b5285..3d2957271 100644
--- a/ui/src/components/ProgressBar.vue
+++ b/ui/src/components/ProgressBar.vue
@@ -10,7 +10,7 @@
       <span v-if="showProgress && progress">{{progress}}</span>
     </div>
     <div v-if="label" class="progress-label">
-      <span :class="labelClass" :style="labelStyle">
+      <span :class="labelClass" :style="labelStyle as any">
         {{label === true ? `${progressList[0]}%` : label}}
       </span>
     </div>
diff --git a/ui/src/components/Row.vue b/ui/src/components/Row.vue
index 69d17baf0..dfa59f1c3 100644
--- a/ui/src/components/Row.vue
+++ b/ui/src/components/Row.vue
@@ -21,9 +21,9 @@ provide('gutter', gutter);
 const rowStyle = computed(() => {
   const style: Record<string, any> = {};
 
-  if (gutter.value > 0) { // move whole row
-    style.marginLeft = gutter.value / -2 + 'px';
-    style.marginRight = gutter.value / -2 + 'px';
+  if (gutter.value! > 0) { // move whole row
+    style.marginLeft = gutter.value! / -2 + 'px';
+    style.marginRight = gutter.value! / -2 + 'px';
   }
 
   return style
diff --git a/ui/src/components/Switch.vue b/ui/src/components/Switch.vue
index fac967b24..740286de1 100644
--- a/ui/src/components/Switch.vue
+++ b/ui/src/components/Switch.vue
@@ -19,7 +19,7 @@ const props = defineProps({
     modelValue: {
         type: [Number, String, Boolean],
     },
-    trueValue: { 
+    trueValue: {
         type: [Number, String, Boolean],
         default: true,
     },
@@ -38,7 +38,7 @@ const props = defineProps({
 })
 const emits = defineEmits(['update:modelValue', 'change'])
 
-const input = ref(null)
+const input = ref<any>(null)
 const checked = computed(() => {
     return props.modelValue === props.trueValue
 })
@@ -91,4 +91,4 @@ const handleInput = () => {
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/components/Table.vue b/ui/src/components/Table.vue
index 46859dd20..a19bc5606 100644
--- a/ui/src/components/Table.vue
+++ b/ui/src/components/Table.vue
@@ -22,7 +22,7 @@
                 />
               </div>
             </th>
-            <th v-for="(col, index) in columns"
+            <th v-for="(col, index) in columns as any[]"
                 class="z-thead-th"
                 :class="col.headerClasses"
                 :key="index"
@@ -58,7 +58,7 @@
                          class="z-tbody-checkbox"
                          :ref="
                         (el) => {
-                          rowCheckbox[i] = el;
+                          (rowCheckbox as any[])[i] = el;
                         }
                       "
                          :value="row[setting.keyColumn]"
@@ -66,7 +66,7 @@
                          @click="checked"/>
                 </div>
               </td>
-              <td v-for="(col, j) in columns"
+              <td v-for="(col, j) in columns as any[]"
                   :key="j"
                   class="z-tbody-td"
                   :class="col.columnClasses"
@@ -82,7 +82,7 @@
             </tr>
           </template>
             <template v-else>
-            <tr v-for="(row, i) in rows"
+            <tr v-for="(row, i) in rows as any[]"
                 :key="i"
                 class="z-tbody-tr"
                 :class="typeof rowClasses === 'function' ? rowClasses(row) : rowClasses"
@@ -93,7 +93,7 @@
                          class="z-tbody-checkbox"
                          :ref="
                         (el) => {
-                          rowCheckbox[i] = el;
+                          (rowCheckbox as any[])[i] = el;
                         }
                       "
                          :value="row[setting.keyColumn]"
@@ -101,7 +101,7 @@
                          @click="checked"/>
                 </div>
               </td>
-              <td v-for="(col, j) in columns"
+              <td v-for="(col, j) in columns as any[]"
                   :key="j"
                   class="z-tbody-td"
                   :class="col.columnClasses"
@@ -132,7 +132,7 @@
         <div class="z-paging-change-div">
           <span class="z-paging-count-label">{{ info.pageSizeChangeLabel }}&nbsp;</span>
           <select class="z-paging-count-dropdown" v-model="setting.pageSize">
-            <option v-for="pageOption in pageOptions"
+            <option v-for="pageOption in pageOptions as any[]"
                     :value="pageOption.value"
                     :key="pageOption.value">
               {{ pageOption.text }}
@@ -141,7 +141,7 @@
 
           <span class="z-paging-page-label">{{ info.gotoPageLabel }}&nbsp;</span>
           <select class="z-paging-page-dropdown" v-model="setting.page">
-            <option v-for="n in setting.maxPage" :key="n" :value="parseInt(n)">
+            <option v-for="n in setting.maxPage" :key="n" :value="parseInt(n as unknown as string)">
               {{ n }}
             </option>
           </select>
@@ -529,7 +529,7 @@ export default defineComponent({
     //
 
     // 定義Checkbox參照 (Define Checkbox reference)
-    const rowCheckbox = ref([]);
+    const rowCheckbox = ref<any[]>([]);
     if (props.hasCheckbox) {
       /**
        * Execute before re-rendering
diff --git a/ui/src/components/TabsContainer.vue b/ui/src/components/TabsContainer.vue
index fdbe9dd60..dc6cb3063 100644
--- a/ui/src/components/TabsContainer.vue
+++ b/ui/src/components/TabsContainer.vue
@@ -180,7 +180,7 @@ function _handleNavClose(item) {
   store.dispatch('tabs/close', item);
 }
 
-if (process.env?.NODE_ENV === 'development') {
+if (import.meta.env.DEV) {
   onMounted(() => {
     Object.assign(window, {
       $openPage: (tab: string | PageTab): void => {
diff --git a/ui/src/config/router.ts b/ui/src/config/router.ts
index bdb3aad0d..82c57e70b 100644
--- a/ui/src/config/router.ts
+++ b/ui/src/config/router.ts
@@ -41,7 +41,7 @@ const router = createRouter({
   scrollBehavior(/* to, from, savedPosition */) {
     return { top: 0 }
   },
-  history: createWebHashHistory(process.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: routes,
 });
 
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 133e2255b..a154d7cf9 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -5,7 +5,6 @@ import router from '@/config/router';
 import store from '@/config/store';
 import i18n from '@/config/i18n';
 
-import _ from "lodash";
 import mitt, {Emitter} from "@/utils/mitt";
 import Toast, { PluginOptions } from "vue-toastification";
 import "vue-toastification/dist/index.css";
@@ -32,17 +31,17 @@ const _emitter: Emitter = mitt();
 
 // 全局发布
 app.config.globalProperties.$pub = (...args) => {
-    _emitter.emit(_.head(args), args.slice(1));
+    _emitter.emit(args[0], args.slice(1));
 };
 // 全局订阅
 app.config.globalProperties.$sub = function (_event, _callback) {
     // eslint-disable-next-line prefer-rest-params
-    Reflect.apply(_emitter.on, _emitter, _.toArray(arguments));
+    Reflect.apply(_emitter.on, _emitter, Array.from(arguments));
 };
 // 取消订阅
 app.config.globalProperties.$unsub = function (_event, _callback) {
     // eslint-disable-next-line prefer-rest-params
-    Reflect.apply(_emitter.off, _emitter, _.toArray(arguments));
+    Reflect.apply(_emitter.off, _emitter, Array.from(arguments));
 };
 
 //更新服务端语言
diff --git a/ui/src/services/websocket.ts b/ui/src/services/websocket.ts
index 4571cc1b7..5e57dd7a4 100644
--- a/ui/src/services/websocket.ts
+++ b/ui/src/services/websocket.ts
@@ -91,11 +91,11 @@ export class WebSocket {
 }
 
 export async function getWebSocketApi (appApiHost): Promise<string> {
-  const isProd = process.env.NODE_ENV === 'production'
+  const isProd = import.meta.env.NODE_ENV === 'production'
   const loc = window.location
   console.log(`${isProd}, ${loc.toString()}`)
   const serverUrl = await getServerUrl();
-  const apiHost = appApiHost && appApiHost != 'local' ? appApiHost + process.env.VUE_APP_APISUFFIX : serverUrl
+  const apiHost = appApiHost && appApiHost != 'local' ? appApiHost + import.meta.env.VUE_APP_APISUFFIX : serverUrl
 
   const url = apiHost.replace('http', 'ws') + '/ws'
   console.log(`websocket url = ${url}`, appApiHost)
@@ -106,9 +106,9 @@ export async function getWebSocketApi (appApiHost): Promise<string> {
 export async function getServerUrl(): Promise<string>{
   let serverURL = await getCache(settings.currServerURL);
   if (!serverURL || serverURL == 'local') {
-    serverURL = process.env.VUE_APP_APIHOST;
+    serverURL = import.meta.env.VUE_APP_APIHOST;
   } else {
     serverURL = String(serverURL) + 'api/v1';
   }
   return serverURL
-}
\ No newline at end of file
+}
diff --git a/ui/src/store/tabs.ts b/ui/src/store/tabs.ts
index 0e98abf8b..b300c0952 100644
--- a/ui/src/store/tabs.ts
+++ b/ui/src/store/tabs.ts
@@ -151,7 +151,7 @@ const TabsModel: TabsModuleType = {
             }
 
             let lastTab: PageTab | undefined;
-            Object.values(state.map).forEach(tab => {
+            Object.values(state.map).forEach((tab: any) => {
                 if (payload && payload.exceptID === tab.id) {
                     return;
                 }
diff --git a/ui/src/utils/form.ts b/ui/src/utils/form.ts
index 145f264d1..16bfde310 100644
--- a/ui/src/utils/form.ts
+++ b/ui/src/utils/form.ts
@@ -5,7 +5,7 @@ export function useForm(modelRef, rulesRef) {
   console.log('useForm', modelRef.value)
 
   const initialModel = cloneDeep(unref(modelRef));
-  const validateInfos = ref({})
+  const validateInfos = ref({} as any)
 
   const rules = unref(rulesRef)
   const ruleKeys = unref(Object.keys(rules))
@@ -80,4 +80,3 @@ export function checkRegex(key, item, model, errMap) :any {
   if (!pass) errMap[type].push(item.msg)
   return pass;
 }
-
diff --git a/ui/src/utils/i18n.ts b/ui/src/utils/i18n.ts
index 9bdef0354..66b0a054b 100644
--- a/ui/src/utils/i18n.ts
+++ b/ui/src/utils/i18n.ts
@@ -83,99 +83,88 @@ export const setLocale = (lang: string, callback: () => void, realReload = true)
 export function importAllLocales(): LocaleMessages<VueMessageType> {
     const modules: any = {};
     try {
-        // 导入 @/views 下文件，包含子目录，文件名为：[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts
-        const viewsRequireContext: __WebpackModuleApi.RequireContext = require.context('../views', true, /[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts$/);
-        viewsRequireContext.keys().forEach(fileName => {
-            // 获取内容
-            const modulesConent = viewsRequireContext(fileName);
-            if(modulesConent.default) {
-                // 获取 PascalCase 命名
-                const modulesName = fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");
-
-                if(modules[modulesName]) {
-                    modules[modulesName] = {
-                        ...modules[modulesName],
-                        ...modulesConent.default
+        const viewsRequireContext = import.meta.glob('../views/**/locales/*.ts', {eager: true});
+        for (const path in viewsRequireContext) {
+            if (viewsRequireContext.hasOwnProperty(path)) {
+                const modulesConent = viewsRequireContext[path] as any;
+                if (modulesConent.default) {
+                    const modulesName = path.match(/\/([^/]+)\/locales/)?.[1];
+                    if (modulesName) {
+                        if (modules[modulesName]) {
+                            modules[modulesName] = {
+                                ...modules[modulesName],
+                                ...modulesConent.default
+                            };
+                        } else {
+                            modules[modulesName] = modulesConent.default;
+                        }
                     }
-                } else {
-                    modules[modulesName] = modulesConent.default;
                 }
-
             }
+        }
 
-        });
-
-        // 导入 @/layouts 下文件，包含子目录，文件名为：[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts
-        const layoutsRequireContext: __WebpackModuleApi.RequireContext = require.context('../layouts', true, /[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts$/);
-        layoutsRequireContext.keys().forEach(fileName => {
-            // 获取内容
-            const modulesConent = layoutsRequireContext(fileName);
-            if(modulesConent.default) {
-                // 获取 PascalCase 命名
-                const modulesName = fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");
-
-                if(modules[modulesName]) {
-                    modules[modulesName] = {
-                        ...modules[modulesName],
-                        ...modulesConent.default
+        const layoutsRequireContext = import.meta.glob('../layouts/**/locales/*.ts', {eager: true});
+        for (const path in layoutsRequireContext) {
+            if (layoutsRequireContext.hasOwnProperty(path)) {
+                const modulesConent = layoutsRequireContext[path] as any;
+                if (modulesConent.default) {
+                    const modulesName = path.match(/\/([^/]+)\/locales/)?.[1];
+                    if (modulesName) {
+                        if (modules[modulesName]) {
+                            modules[modulesName] = {
+                                ...modules[modulesName],
+                                ...modulesConent.default
+                            };
+                        } else {
+                            modules[modulesName] = modulesConent.default;
+                        }
                     }
-                } else {
-                    modules[modulesName] = modulesConent.default;
                 }
-
             }
+        }
 
-        });
-
-        // 导入 @/components 下文件，包含子目录，文件名为：[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts
-        const componentsRequireContext: __WebpackModuleApi.RequireContext = require.context('../components', true, /[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts$/);
-        componentsRequireContext.keys().forEach(fileName => {
-            // 获取内容
-            const modulesConent = componentsRequireContext(fileName);
-            if(modulesConent.default) {
-                // 获取 PascalCase 命名
-                const modulesName = fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");
-
-                if(modules[modulesName]) {
-                    modules[modulesName] = {
-                        ...modules[modulesName],
-                        ...modulesConent.default
+        const componentsRequireContext = import.meta.glob('../components/**/locales/*.ts', {eager: true});
+        for (const path in componentsRequireContext) {
+            if (componentsRequireContext.hasOwnProperty(path)) {
+                const modulesConent = componentsRequireContext[path] as any;
+                if (modulesConent.default) {
+                    const modulesName = path.match(/\/([^/]+)\/locales/)?.[1];
+                    if (modulesName) {
+                        if (modules[modulesName]) {
+                            modules[modulesName] = {
+                                ...modules[modulesName],
+                                ...modulesConent.default
+                            };
+                        } else {
+                            modules[modulesName] = modulesConent.default;
+                        }
                     }
-                } else {
-                    modules[modulesName] = modulesConent.default;
                 }
-
             }
+        }
 
-        });
-
-        // 导入 @/locales 下文件，不包含子目录，文件名为：([a-z]{2})-?([A-Z]{2})?\.ts
-        const localesRequireContext: __WebpackModuleApi.RequireContext = require.context('../locales', false, /([a-z]{2})-?([A-Z]{2})?\.ts$/);
-        localesRequireContext.keys().forEach(fileName => {
-            // 获取内容
-            const modulesConent = localesRequireContext(fileName);
-            if(modulesConent.default) {
-                // 获取 PascalCase 命名
-                const modulesName = fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");
-                if(modules[modulesName]) {
-                    modules[modulesName] = {
-                        ...modules[modulesName],
-                        ...modulesConent.default
+        const localesRequireContext = import.meta.glob('../locales/*.ts', {eager: true});
+        for (const path in localesRequireContext) {
+            if (localesRequireContext.hasOwnProperty(path)) {
+                const modulesConent = localesRequireContext[path] as any;
+                if (modulesConent.default) {
+                    const modulesName = path.match(/\/([^/]+)\.ts$/)?.[1];
+                    if (modulesName) {
+                        if (modules[modulesName]) {
+                            modules[modulesName] = {
+                                ...modules[modulesName],
+                                ...modulesConent.default
+                            };
+                        } else {
+                            modules[modulesName] = modulesConent.default;
+                        }
                     }
-                } else {
-                    modules[modulesName] = modulesConent.default;
                 }
-
             }
-
-        });
-
-
+        }
     } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
+        console.log(error);
     }
 
     return modules;
 }
-
diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts
index 11aa91772..675b76a21 100644
--- a/ui/src/utils/request.ts
+++ b/ui/src/utils/request.ts
@@ -37,7 +37,7 @@ const serverCodeMessage: {[key: number]: string} = {
  * 配置request请求时的默认参数
  */
 const request = axios.create({
-    baseURL: process.env.VUE_APP_APIHOST, // url = api url + request url
+    baseURL: import.meta.env.VUE_APP_APIHOST, // url = api url + request url
     withCredentials: true, // 当跨域请求时发送cookie
     timeout: 0 // 请求超时时间,5000(单位毫秒) / 0 不做限制
 });
@@ -71,14 +71,14 @@ request.interceptors.request.use(
         // }
         let serverURL = await getCache(settings.currServerURL);
         if(!serverURL || serverURL == 'local' || config.url== undefined || config.url.indexOf('/servers') > -1) {
-            serverURL = process.env.VUE_APP_APIHOST;
+            serverURL = import.meta.env.VUE_APP_APIHOST;
         }else{
             serverURL = String(serverURL) + 'api/v1'
         }
         if(config.params.proxyPath != undefined && config.params.proxyPath != 'local') {
             serverURL = String(config.params.proxyPath) + 'api/v1'
         }else if(config.params.proxyPath == 'local'){
-            serverURL = process.env.VUE_APP_APIHOST;
+            serverURL = import.meta.env.VUE_APP_APIHOST;
         }
         config.baseURL = serverURL;
         console.log('=== request ===', config.url, config)
diff --git a/ui/src/utils/store.ts b/ui/src/utils/store.ts
index f21cae9f6..8a0cc2ed7 100644
--- a/ui/src/utils/store.ts
+++ b/ui/src/utils/store.ts
@@ -20,42 +20,40 @@ export interface StoreModuleType<S> extends Module<S, S> {
  * @author LiQingSong
  */
 export function importAllStore<S> (): ModuleTree<S> {
-    const modules: ModuleTree<S> = {};
-    try {
-        // 导入 @/views 下文件，包含子目录，文件名为：store.ts
-        const viewsRequireContext: __WebpackModuleApi.RequireContext = require.context('../views', true, /[/\\]store\.ts$/); 
-        viewsRequireContext.keys().forEach(fileName => {
-            // 获取内容
-            const modulesConent = viewsRequireContext(fileName);
-            if(modulesConent.default) {
-              const { name, ...module } = modulesConent.default; 
-              // 获取 PascalCase 命名
-              const modulesName = name || fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
-            
-              modules[modulesName] = { ...module }; 
-            }
+  const modules: ModuleTree<S> = {};
+  // try {
+    // 导入 @/views 下文件，包含子目录，文件名为：store.ts
+    const viewsModules = import.meta.glob('../views/**/store.ts', { eager: true });
+    Object.keys(viewsModules).forEach(fileName => {
+      // 获取内容
+      const modulesConent = viewsModules[fileName] as any;
+      if(modulesConent.default) {
+        const { name, ...module } = modulesConent.default;
+        // 获取 PascalCase 命名
+        const modulesName = name || fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
+        modules[modulesName] = { ...module };
+      }
 
-        });  
-        
-        // 导入 @/store 下文件 
-        const requireContext: __WebpackModuleApi.RequireContext = require.context('../store', false, /\.ts$/);    
-        requireContext.keys().forEach(fileName => {
-          // 获取内容
-          const modulesConent = requireContext(fileName);
-          if(modulesConent.default) {
-              const { name, ...module } = modulesConent.default; 
-              // 获取 PascalCase 命名
-              const modulesName = name || fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
-            
-              modules[modulesName] = { ...module }; 
-          }
-          
-        });
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
+    });
 
-    return modules;
+    // 导入 @/store 下文件
+    const storeModules = import.meta.glob('../store/*.ts', { eager: true });
+    Object.keys(storeModules).forEach(fileName => {
+      // 获取内容
+      const modulesConent = storeModules[fileName] as any;
+      if(modulesConent.default) {
+        const { name, ...module } = modulesConent.default;
+        // 获取 PascalCase 命名
+        const modulesName = name || fileName.replace(/^\.\/(.*)\.\w+$/, "$1");
+
+        modules[modulesName] = { ...module };
+      }
+
+    });
+  // } catch (error) {
+  //   // eslint-disable-next-line no-console
+  //   console.log(error);
+  // }
+
+  return modules;
 }
- 
\ No newline at end of file
diff --git a/ui/src/views/exec/LogList.vue b/ui/src/views/exec/LogList.vue
index 7b9b7c862..a4042c027 100644
--- a/ui/src/views/exec/LogList.vue
+++ b/ui/src/views/exec/LogList.vue
@@ -1,26 +1,23 @@
 <template>
   <div id="log-list" class="log-list scrollbar-y">
     <pre id="content" class="content">
-      <template v-for="(item, index) in wsMsg.out" :key="index">
-        {{ void (info = item.info) }}
-        {{ void (csKey = info?.key) }}
-
+      <template v-for="(item, index) in (wsMsg.out as any[])" :key="index">
         <code class="item small"
              :class="[
-                 csKey && caseDetail[csKey] ? 'show-detail' : '',
+                 item.key && caseDetail[item.key] ? 'show-detail' : '',
 
-                 csKey ? 'case-item' : '',
-                 info?.status === 'start' ? 'case-start' : '',
-                 info?.status === 'start' ? 'result-'+caseResult[csKey] : '',
+                 item.key ? 'case-item' : '',
+                 item.info?.status === 'start' ? 'case-start' : '',
+                 item.info?.status === 'start' ? 'result-'+caseResult[item.key] : '',
 
-                 info?.status === 'start-task' ? 'strong' : ''
+                 item.info?.status === 'start-task' ? 'strong' : ''
              ]">
 
           <div class="group">
-            <template v-if="info?.status === 'start'">
+            <template v-if="item.info?.status === 'start'">
               <span id="show-detail" @click="showDetail(item.info?.key)" class="link state center">
-                <Icon v-if="!caseDetail[csKey]" icon="chevron-right" />
-                <Icon v-if="caseDetail[csKey]" icon="chevron-down" />
+                <Icon v-if="!caseDetail[item.key]" icon="chevron-right" />
+                <Icon v-if="caseDetail[item.key]" icon="chevron-down" />
               </span>
             </template>
           </div>
@@ -35,8 +32,8 @@
           </div>
           <div class="msg-span">
             <span v-html="item.msg"></span>
-            <span v-if="info?.status === 'start' && caseResult[csKey]">
-              [ {{ t(caseResult[csKey]) }} ]
+            <span v-if="item.info?.status === 'start' && caseResult[item.key]">
+              [ {{ t(caseResult[item.key]) }} ]
             </span>
           </div>
         </code>
@@ -83,11 +80,11 @@ const currentWorkspace = ref({} as any);
 const defaultProxy = computed<any>(() => store.state.proxy.currProxy);
 const currProxy = ref({} as any);
 
-const cachedExecData = ref({})
+const cachedExecData = ref({} as any)
 const caseCount = ref(1)
-const caseResult = ref({})
-const caseDetail = ref({})
-const realPathMap = ref({})
+const caseResult = ref({} as any)
+const caseDetail = ref({} as any)
+const realPathMap = ref({} as any)
 const lastWsMsg = ref('')
 
 // websocket
@@ -157,7 +154,7 @@ const onWebsocketMsgEvent = async (data: any) => {
   Object.keys(realPathMap.value).forEach(key => {
     item.msg = item.msg.replace(key, realPathMap.value[key])
   })
-  
+
   if(item.info?.logDir != undefined && currentWorkspace.value.type == 'ztf'){
     updateStatisticInfo(item.info.logDir)
   }
diff --git a/ui/src/views/exec/TabPageExecUnit.vue b/ui/src/views/exec/TabPageExecUnit.vue
index 099c73e17..2165b5a15 100644
--- a/ui/src/views/exec/TabPageExecUnit.vue
+++ b/ui/src/views/exec/TabPageExecUnit.vue
@@ -62,7 +62,7 @@ const workspaceId = computed<any>(() => props.tab.data.workspaceId)
 const workspaceType = computed<any>(() => props.tab.data.workspaceType)
 
 const modelRef = ref({} as any)
-const isRunning = ref(false)
+const isRunning = ref('false')
 
 const histories = ref([] as any[])
 const historyIndex = ref(0)
diff --git a/ui/src/views/interpreter/FormInterpreter.vue b/ui/src/views/interpreter/FormInterpreter.vue
index 04f14f5b2..3f0f0a68e 100644
--- a/ui/src/views/interpreter/FormInterpreter.vue
+++ b/ui/src/views/interpreter/FormInterpreter.vue
@@ -9,7 +9,7 @@
   >
     <Form class="form-interpreter">
       <FormItem
-        v-if="props.proxyId > 0"
+        v-if="props.proxyId! > 0"
         labelWidth="100px"
         name="proxy_id"
         :label="t('copy_from')"
@@ -79,7 +79,7 @@
             {{ t("find_to_select", { num: interpreterInfos.length }) }}
           </option>
           <option
-            v-for="item in interpreterInfos"
+            v-for="item in interpreterInfos as any[]"
             :key="item.path"
             :value="item.path"
           >
diff --git a/ui/src/views/interpreter/interpreterModal.vue b/ui/src/views/interpreter/interpreterModal.vue
index cbe4a57f0..90cfc29f4 100644
--- a/ui/src/views/interpreter/interpreterModal.vue
+++ b/ui/src/views/interpreter/interpreterModal.vue
@@ -98,7 +98,7 @@ const momentUtc = momentUtcDef;
 
 const interpreters = ref<any>([]);
 
-const editInfo = ref({});
+const editInfo = ref({} as any);
 
 onMounted(() => {
   console.log("onMounted");
@@ -153,7 +153,7 @@ const setColumns = () => {
 setColumns();
 
 const showCreateInterpreterModal = ref(false);
-    
+
 let languageMap = ref<any>({});
 const getInterpretersA = async () => {
   const data = await getLangSettings(props.proxyInfo.path);
diff --git a/ui/src/views/result/FormBug.vue b/ui/src/views/result/FormBug.vue
index 9084a5c8d..ec0efa80b 100644
--- a/ui/src/views/result/FormBug.vue
+++ b/ui/src/views/result/FormBug.vue
@@ -16,7 +16,7 @@
         <div class="select">
           <select name="module" v-model="modelRef.module">
             <option value=""></option>
-            <option v-for="item in modules" :key="item.code" :value="item.code+''">
+            <option v-for="item in modules as any[]" :key="item.code" :value="item.code+''">
               {{ item.name }}
             </option>
           </select>
@@ -27,7 +27,7 @@
         <div class="select">
           <select name="type" v-model="modelRef.type">
             <option value=""></option>
-            <option v-for="item in types" :key="item.code" :value="item.code+''">
+            <option v-for="item in types as any[]" :key="item.code" :value="item.code+''">
               {{ item.name }}
             </option>
           </select>
@@ -38,7 +38,7 @@
         <div class="select">
           <select name="openedBuild" v-model="modelRef.openedBuild">
             <option value=""></option>
-            <option v-for="item in builds" :key="item.code" :value="item.code+''">
+            <option v-for="item in builds as any[]" :key="item.code" :value="item.code+''">
               {{ item.name }}
             </option>
           </select>
@@ -48,7 +48,7 @@
       <FormItem name="severity" :label="t('severity')">
         <div class="select">
           <select name="severity" v-model="modelRef.severity">
-            <option v-for="item in severities" :key="item.code" :value="item.code+''">
+            <option v-for="item in severities as any[]" :key="item.code" :value="item.code+''">
               {{ item.name }}
             </option>
           </select>
@@ -58,7 +58,7 @@
       <FormItem name="priority" :label="t('priority')">
         <div class="select">
           <select name="priority" v-model="modelRef.pri">
-            <option v-for="item in priorities" :key="item.code" :value="item.code+''">
+            <option v-for="item in priorities as any[]" :key="item.code" :value="item.code+''">
               {{ item.name }}
             </option>
           </select>
diff --git a/ui/src/views/result/FormResult.vue b/ui/src/views/result/FormResult.vue
index 6dae23f34..593e329b2 100644
--- a/ui/src/views/result/FormResult.vue
+++ b/ui/src/views/result/FormResult.vue
@@ -12,7 +12,7 @@
         <div class="select">
           <select name="taskId" v-model="modelRef.taskId">
             <option value="0"></option>
-            <option v-for="item in tasks" :key="item.id" :value="item.id">
+            <option v-for="item in tasks as any[]" :key="item.id" :value="item.id">
               {{ item.name }}
             </option>
           </select>
@@ -58,7 +58,7 @@ const store = useStore<{ Zentao: ZentaoData }>();
 const currProduct = computed<any>(() => store.state.Zentao.currProduct);
 
 const modelRef = ref({taskId: 0} as any);
-const rulesRef = ref({});
+const rulesRef = ref({} as any);
 
 let tasks = ref([])
 const listTask = () => {
diff --git a/ui/src/views/result/TabPageResult.vue b/ui/src/views/result/TabPageResult.vue
index a891c6014..bc9573f2e 100644
--- a/ui/src/views/result/TabPageResult.vue
+++ b/ui/src/views/result/TabPageResult.vue
@@ -297,7 +297,7 @@ const closeResultForm = () => {
 
 // 提交缺陷
 const showSubmitBugModal = ref(false)
-const bugFormData = ref({})
+const bugFormData = ref({} as any)
 const openBugForm = (cs) => {
   console.log("openBugForm");
 
diff --git a/ui/src/views/script/FilterModal.vue b/ui/src/views/script/FilterModal.vue
index 4ae8f5b38..808ba2311 100644
--- a/ui/src/views/script/FilterModal.vue
+++ b/ui/src/views/script/FilterModal.vue
@@ -10,10 +10,10 @@
         <div ref="titsRef" class="tab-header" layout="row" layout-wrap>
           <div
             ref="tabRef"
-            v-for="(item, index) in tabs"
+            v-for="(item, index) in tabs as any[]"
             :class="[{ active: activeKey == item.key }, 'tab-nav']"
             :key="item.key"
-            @click="onTabClick($event, item, index)"
+            @click="onTabClick($event, item)"
           >
             {{ item.title }}
           </div>
@@ -102,7 +102,7 @@ function _toggle(show?: boolean) {
   state.show = show;
   state.showed = false;
   if (show) {
-    showTimerRef.value = setTimeout(() => {
+    showTimerRef.value = window.setTimeout(() => {
       state.showed = true;
       showTimerRef.value = 0;
     }, 100);
@@ -255,7 +255,7 @@ onMounted(() => {
 });
 
 const activeKey = computed(() => props.checkedTab);
-const tabRef = ref(null);
+const tabRef = ref<any>(null);
 const onTabClick = (_event, tab) => {
   emit("tabChanged", tab);
 };
diff --git a/ui/src/views/script/FormNode.vue b/ui/src/views/script/FormNode.vue
index 504e84f13..687a3bea7 100644
--- a/ui/src/views/script/FormNode.vue
+++ b/ui/src/views/script/FormNode.vue
@@ -62,7 +62,7 @@ const cancel = () => {
   emit("cancel", {});
 };
 
-const modelRef = ref({name:'', path:''});
+const modelRef = ref<any>({name:'', path:''});
 const rulesRef = ref({
   name: [{ required: true, msg: t("pls_name") }],
 });
diff --git a/ui/src/views/script/TabPageScript.vue b/ui/src/views/script/TabPageScript.vue
index b59bcb730..f6dc41f70 100644
--- a/ui/src/views/script/TabPageScript.vue
+++ b/ui/src/views/script/TabPageScript.vue
@@ -88,8 +88,8 @@ const editorChange = (newScriptCode) => {
     store.dispatch('Script/updateCurrentCodeChanged', changed)
 }
 
-const save = (item) => {
-  if(item.path.indexOf(currentScript.value.path) == -1 ){
+const save = (item?: any) => {
+  if(item?.path.indexOf(currentScript.value.path) == -1 ){
     return;
   }
   const code = editorRef.value?.getValue()
@@ -116,7 +116,7 @@ onMounted(() => {
       return vftEle.style.display != 'none';
     });
     if(isFocus > -1){
-        return 
+        return
     }
     if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)){
         e.preventDefault();
diff --git a/ui/src/views/script/WorkDirPanel.vue b/ui/src/views/script/WorkDirPanel.vue
index 101b99e85..92ee5b198 100644
--- a/ui/src/views/script/WorkDirPanel.vue
+++ b/ui/src/views/script/WorkDirPanel.vue
@@ -27,7 +27,7 @@
         :checkedTab="filerType"
         :checkedKey="filerType == oldFilerType ? oldFilerValue : ''"
         keyName="value"
-        @click="onFilterValueChanged"
+        @click="onFilterValueChanged as any"
         :hideOnClickMenu="true"
         :replace-fields="replaceFields"
         triggerEvent="click">
@@ -164,9 +164,9 @@ const genCheckedCaseIds = () => {
     if(selectedNodes.value[key] === true){
         const caseId = treeDataMap.value[key].caseId;
         if(
-            caseId > 0 && 
-            bugMap.value[caseId] != undefined && 
-            bugMap.value[caseId].length > 0 && 
+            caseId > 0 &&
+            bugMap.value[caseId] != undefined &&
+            bugMap.value[caseId].length > 0 &&
             checkedCaseIds.value.indexOf(caseId) === -1
         ){
             checkedCaseIds.value.push(caseId)
@@ -293,7 +293,7 @@ const loadScripts = async () => {
   store.dispatch('Script/listScript', params)
 }
 
-const workDirRef = ref<{toggleCheckable: () => void, isCheckable: boolean, toggleAllCollapsed: () => void, isAllCollapsed: boolean}>();
+const workDirRef = ref<{toggleCheckable: () => void, isCheckable: boolean, toggleAllCollapsed: () => void, isAllCollapsed: boolean, loadScripts: () => void}>();
 
 const showModal = ref(false)
 const modalClose = () => {
@@ -306,7 +306,7 @@ const createWorkSpace = (formData) => {
             formWorkspace.value.clearFormData()
             notification.success({message: t('save_success')});
             showModal.value = false;
-            workDirRef.value.loadScripts()
+            workDirRef.value!.loadScripts()
         }
     })
 };
diff --git a/ui/src/views/settings/SettingsModal.vue b/ui/src/views/settings/SettingsModal.vue
index 24ad7b642..6c7f38cff 100644
--- a/ui/src/views/settings/SettingsModal.vue
+++ b/ui/src/views/settings/SettingsModal.vue
@@ -117,7 +117,7 @@
 
     <InterpreterModal
       v-if="showInterpreterModal"
-      :proxyInfo="currentProxy.value" 
+      :proxyInfo="currentProxy.value"
       @cancel="interpreterModalClose"
       :showOkBtn="false"
       :showCancelBtn="false"
@@ -170,9 +170,9 @@ const momentUtc = momentUtcDef;
 
 const remoteServers = ref<any>([]);
 
-const editInfo = ref({});
-const editProxyInfo = ref({});
-const editServerInfo = ref({});
+const editInfo = ref({} as any);
+const editProxyInfo = ref({} as any);
+const editServerInfo = ref({} as any);
 
 onMounted(() => {
   console.log("onMounted");
diff --git a/ui/src/views/site/FormSite.vue b/ui/src/views/site/FormSite.vue
index c25bdea5c..0c04b0a13 100644
--- a/ui/src/views/site/FormSite.vue
+++ b/ui/src/views/site/FormSite.vue
@@ -107,7 +107,7 @@ const submit = () => {
 };
 
 const clearFormData = () => {
-  modelRef.value = {};
+  // modelRef.value = {};
 };
 
 defineExpose({
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
new file mode 100644
index 000000000..10652184b
--- /dev/null
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1,20 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_APP_TITLE: string
+    // more env variables...
+
+    readonly VUE_APP_PORT: string; // 8000
+
+    // mock 是否开启 true|false ， development环境有效
+    readonly VUE_APP_MOCK: string; //  true
+
+    // api接口域名
+    readonly VUE_APP_APIHOST_MOCK: string; //  /api
+    readonly VUE_APP_APISUFFIX: string; //  api/v1
+    readonly VUE_APP_APIHOST: string; //  http://127.0.0.1:8085/api/v1
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index d6260c112..f425c674e 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,42 +1,34 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
     "noImplicitAny": false,
+    "noImplicitThis": false,
+
     "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "jest"
-    ],
     "paths": {
       "@/*": [
         "src/*"
       ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    }
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/ui/tsconfig.node.json b/ui/tsconfig.node.json
new file mode 100644
index 000000000..97ede7ee6
--- /dev/null
+++ b/ui/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
new file mode 100644
index 000000000..d15f456b1
--- /dev/null
+++ b/ui/vite.config.ts
@@ -0,0 +1,16 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve('.', './src'),
+      '~': resolve('.', './node_modules'),
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less'],
+  },
+  plugins: [vue()],
+})
diff --git a/ui/vue.config.js b/ui/vue.config.js
deleted file mode 100644
index c69ddff85..000000000
--- a/ui/vue.config.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const bodyParser = require('body-parser')
-const { VUE_APP_PORT, NODE_ENV, VUE_APP_MOCK } = process.env;
-
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
-
-module.exports = {
-    publicPath: './',
-    outputDir: 'dist',
-    productionSourceMap: false,
-    devServer: {
-        host: '0.0.0.0',//set minpc accessible
-        port: VUE_APP_PORT || 8000,
-        disableHostCheck: true,
-        before: function(_app, _server) {
-        }
-    },
-    css: {
-        loaderOptions: {
-            less: {
-                javascriptEnabled: true,
-            }
-        }
-    },
-
-    transpileDependencies: [],
-    configureWebpack: {
-        // 不需要打包的插件
-        externals: {
-            // 'vue': 'Vue',
-            // 'vue-router': 'VueRouter',
-        },
-        devtool: 'source-map'
-    },
-
-    chainWebpack(config) {
-        // 内置的 svg Rule 添加 exclude
-        config.module
-        .rule('svg')
-        .exclude.add(/iconsvg/)
-        .end();
-
-        // 添加 svg-sprite-loader Rule
-        config.module
-        .rule('svg-sprite-loader')
-        .test(/.svg$/)
-        .include.add(/iconsvg/)
-        .end()
-        .use('svg-sprite-loader')
-        .loader('svg-sprite-loader');
-
-        // 添加 svgo Rule
-        config.module
-        .rule('svgo')
-        .test(/.svg$/)
-        .include.add(/iconsvg/)
-        .end()
-        .use('svgo-loader')
-        .loader('svgo-loader')
-        .options({
-            // externalConfig 配置特殊不是相对路径，起始路径是根目录
-            externalConfig: './src/assets/iconsvg/svgo.yml',
-        });
-
-        config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
-
-        config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
-            {
-                languages: [
-                    'python',
-                    'php',
-                    'ruby',
-                    'javascript',
-                    'lua',
-                    'tcl',
-                    'perl',
-                    'bat',
-                    'shell',
-
-                    'typescript',
-                    'coffeescript',
-                    'sql',
-                    'mysql',
-                    'html',
-                    'css',
-                    'less',
-                    'scss',
-                    'xml',
-                    'yaml',
-                    'json',
-                    'ini',
-                    'dockerfile',
-                    'markdown',
-                    'plaintext',
-
-                    'c',
-                    'csharp',
-                    'cpp',
-                    'dart',
-                    'go',
-                    'java',
-                    'julia',
-                    'kotlin',
-                    'lua',
-                    'objective-c',
-                    'pascal',
-                    'perl',
-                    'pgsql',
-                    'powerquery',
-                    'powershell',
-                    'redis',
-                    'rust',
-                    'scala',
-                    'swift',
-                    'tcl',
-                    'vb',
-                ]
-            }
-        ])
-    }
-}