* Migrate from vue-cli-service to vite and upgrade all dependencies.

easysoft · Mar 20, 2024 · 85ea245 · 85ea245
1 parent b90167d
commit 85ea245
Show file tree

Hide file tree

Showing 44 changed files with 306 additions and 512 deletions.
diff --git a/ui/.browserslistrc b/ui/.browserslistrc
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
diff --git 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
@@ -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.
+All source code is licensed under the [GPLv3 License](LICENSE.md).
diff --git a/ui/babel.config.js b/ui/babel.config.js
diff --git a/ui/index.html 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
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+</style>