feat: upgrade vue, vite and some dev tools; support TS syntax in the home page

.gitignore

@@ -15,6 +15,7 @@ screenshot/_apidoc/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock*
 pnpm-debug.log*
 
 # Editor directories and files

package.json

@@ -31,7 +31,7 @@
     "qr-code-styling": "^1.6.0-rc.1",
     "selecto": "^1.13.0",
     "throttle-debounce": "^3.0.1",
-    "vue": "^3.0.0",
+    "vue": "3.2.22",
     "vue-router": "^4.0.0-0",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0-0"
@@ -41,7 +41,7 @@
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.28.3",
     "@typescript-eslint/parser": "^4.28.3",
-    "@vitejs/plugin-vue": "^1.2.4",
+    "@vitejs/plugin-vue": "1.9.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
@@ -57,13 +57,13 @@
     "eslint-config-alloy": "~4.1.0",
     "eslint-plugin-vue": "^7.12.1",
     "less": "^4.1.1",
-    "typescript": "~4.1.5",
+    "typescript": "^4.4.3",
     "unplugin-element-plus": "^0.7.1",
-    "vite": "^2.4.1",
+    "vite": "2.6.4",
     "vite-plugin-compression": "^0.3.0",
     "vue-cli-plugin-norm": "~1.2.2",
     "vue-eslint-parser": "^7.6.0",
-    "vue-tsc": "^0.2.0"
+    "vue-tsc": "0.3.0"
   },
   "browserslist": [
     "> 1%",

src/components/modules/layout/zoomControl.vue

@@ -19,15 +19,17 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapActions } from 'vuex'
+import { defineComponent } from 'vue'
 import addMouseWheel from '@/common/methods/addMouseWheel'
 
 // 组件大小控制器
 const NAME = 'zoom-control'
-let holder = null
+let holder: number | undefined
 
-export default {
+// TODO: TS类型补全
+export default defineComponent({
   name: NAME,
   data() {
     return {
@@ -101,6 +103,7 @@ export default {
       ],
       otherIndex: -1,
       bestZoom: 0,
+      curAction: "",
     }
   },
   computed: {
@@ -154,7 +157,7 @@ export default {
       this.activezoomIndex = this.zoomList.length - 1
     }
     // 添加滚轮监听
-    addMouseWheel('page-design', (isDown) => {
+    addMouseWheel('page-design', (isDown: boolean) => {
       this.mousewheelZoom(isDown)
     })
     // 添加窗口大小监听
@@ -171,6 +174,7 @@ export default {
       clearTimeout(holder)
       holder = setTimeout(() => {
         const screen = document.getElementById('page-design')
+        if (!screen) return
         this.updateScreen({
           width: screen.offsetWidth,
           height: screen.offsetHeight,
@@ -184,12 +188,12 @@ export default {
         this.autoFixTop()
       }
     },
-    selectItem(index) {
+    selectItem(index: number) {
       this.activezoomIndex = index
       this.otherIndex = -1
       this.show = false
     },
-    close(e) {
+    close(_: MouseEvent) {
       this.show = false
     },
     add() {
@@ -214,7 +218,7 @@ export default {
       }
     },
     sub() {
-      this.curAction = null
+      this.curAction = null as any
       this.show = false
       if (this.otherIndex === 0) {
         this.otherIndex = -1
@@ -237,14 +241,14 @@ export default {
         this.activezoomIndex--
       }
     },
-    mousewheelZoom(down) {
+    mousewheelZoom(down: boolean) {
       const value = Number(this.dZoom.toFixed(0))
       if (down && value <= 1) return
       this.updateZoom(down ? value - 1 : value + 1)
-      this.zoom.text = value + '%'
+      this.zoom.text = (value + '%') as any
       this.autoFixTop()
     },
-    nearZoom(add) {
+    nearZoom(add?: boolean) {
       for (let i = 0; i < this.zoomList.length; i++) {
         this.activezoomIndex = i
         if (this.zoomList[i].value > this.bestZoom) {
@@ -266,8 +270,10 @@ export default {
       await this.$nextTick()
       const presetPadding = 60
       const el = document.getElementById('out-page')
+      if (!el) return
       // const clientHeight = document.body.clientHeight - 54
-      const parentHeight = el.offsetParent.offsetHeight - 54
+      
+      const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
       let padding = (parentHeight - el.offsetHeight) / 2
       if (typeof this.curAction === 'undefined') {
         padding += presetPadding / 2
@@ -276,7 +282,7 @@ export default {
       this.$store.commit('updatePaddingTop', padding > 0 ? padding : 0)
     },
   },
-}
+})
 </script>
 
 <style lang="less" scoped>

src/env.d.ts

@@ -0,0 +1,8 @@
+// / <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

src/views/Index.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2023-09-18 17:34:44
+ * @Description:  
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-02-25 14:51:00
+-->
 <template>
   <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
     <div :style="style" class="top-nav">
@@ -34,7 +41,13 @@
     <!-- 旋转缩放组件 -->
     <Moveable />
     <!-- 遮罩百分比进度条 -->
-    <ProgressLoading :percent="downloadPercent" :text="downloadText" cancelText="取消" @cancel="downloadCancel" @done="downloadPercent = 0" />
+    <ProgressLoading
+      :percent="downloadPercent"
+      :text="downloadText"
+      cancelText="取消"
+      @cancel="downloadCancel"
+      @done="downloadPercent = 0"
+    />
   </div>
 </template>
 
@@ -69,7 +82,7 @@ export default defineComponent({
     zoomControl,
     lineGuides,
   },
-  mixins: [shortcuts],
+  // mixins: [shortcuts],
   setup() {
     !_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
@@ -129,6 +142,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
+    ...shortcuts.methods,
     changeLineGuides() {
       this.showLineGuides = !this.showLineGuides
     },
@@ -161,7 +175,7 @@ export default defineComponent({
       const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
       this.style.left = `-${scrollLeft}px`
     },
-    clickListener(e) {
+    clickListener(e: Event) {
       console.log('click listener', e)
     },
     optionsChange({ downloadPercent, downloadText }: any) {

tsconfig.json

@@ -12,13 +12,13 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env"],
+    "types": ["webpack-env", "element-plus/global"],
     "paths": {
       "@/*": ["src/*"]
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
     "resolveJsonModule": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
   "exclude": ["node_modules"]
 }