fix: fix some problem

package-lock.json

@@ -325,6 +325,23 @@
       "integrity": "sha1-VHbVYV0BvzOcZcLoBPWQm7wnhEo=",
       "dev": true
     },
+    "@vueuse/core": {
+      "version": "4.8.1",
+      "resolved": "http://192.168.250.101:4873/@vueuse%2fcore/-/core-4.8.1.tgz",
+      "integrity": "sha1-16f7LnJhDRli7LkkS9k9rLltkhw=",
+      "requires": {
+        "@vueuse/shared": "4.8.1",
+        "vue-demi": "^0.7.4"
+      }
+    },
+    "@vueuse/shared": {
+      "version": "4.8.1",
+      "resolved": "http://192.168.250.101:4873/@vueuse%2fshared/-/shared-4.8.1.tgz",
+      "integrity": "sha1-Rf1fZL9OiUTbQqW3L6JwXPx0YIo=",
+      "requires": {
+        "vue-demi": "^0.7.4"
+      }
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "http://192.168.250.101:4873/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1316,11 +1333,6 @@
         "neo-async": "^2.6.2"
       }
     },
-    "screenfull": {
-      "version": "5.1.0",
-      "resolved": "http://192.168.250.101:4873/screenfull/-/screenfull-5.1.0.tgz",
-      "integrity": "sha1-hcE8cPTq1MG4qTXHABDf3NLA5cg="
-    },
     "sortablejs": {
       "version": "1.10.2",
       "resolved": "http://192.168.250.101:4873/sortablejs/-/sortablejs-1.10.2.tgz",
@@ -1589,6 +1601,11 @@
         }
       }
     },
+    "vue-demi": {
+      "version": "0.7.4",
+      "resolved": "http://192.168.250.101:4873/vue-demi/-/vue-demi-0.7.4.tgz",
+      "integrity": "sha1-TGvlJXiOH2s/1dT1+fIUjPZkWXk="
+    },
     "vue-i18n": {
       "version": "9.0.0",
       "resolved": "http://192.168.250.101:4873/vue-i18n/-/vue-i18n-9.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@vueuse/core": "^4.8.1",
     "await-to-js": "^2.1.1",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
@@ -21,7 +22,6 @@
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.0",
     "resize-observer-polyfill": "^1.5.1",
-    "screenfull": "^5.1.0",
     "three": "^0.126.1",
     "troisjs": "^0.1.19",
     "v-contextmenu": "^3.0.0-alpha.4",

src/components/info/index.vue

@@ -144,6 +144,10 @@ export default defineComponent({
       router.push("/");
     };
 
+    onBeforeMount(()=>{
+      vm = getCurrentInstance(); //获取组件实例
+    })
+
     return {
       rules,
       tips,

src/layout/components/panel/index.vue

@@ -19,6 +19,7 @@
 <script lang='ts'>
 import { addClass, removeClass } from "../../../utils/operate";
 import { ref, watch, getCurrentInstance, onMounted, onBeforeMount } from "vue";
+import { useEventListener } from "@vueuse/core";
 export default {
   name: "panel",
   setup() {
@@ -40,7 +41,7 @@ export default {
     );
 
     const addEventClick = (): void => {
-      window.addEventListener("click", closeSidebar);
+      useEventListener("click", closeSidebar);
     };
 
     const closeSidebar = (evt: any): void => {

src/layout/components/screenfull/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="screen-full" @click="onClick">
+  <div class="screen-full" @click="toggle">
     <i
-      :title="isFullscreen ? '退出全屏' : '全屏'"
+      :title="isFullscreen ? $t('exitfullscreen') : $t('fullscreen')"
       :class="
         isFullscreen
           ? 'iconfont team-iconexit-fullscreen'
@@ -12,51 +12,18 @@
 </template>
 
 <script>
-import screenfull from "screenfull";
+import { useFullscreen } from '@vueuse/core'
 import {
-  ref,
-  onBeforeMount,
-  onUnmounted,
   defineComponent,
-  onMounted,
 } from "vue";
 export default defineComponent({
   name: "screenfull",
   setup() {
-    let isFullscreen = ref(false);
+    const { isFullscreen, toggle } = useFullscreen()
-
-    const onClick = () => {
-      if (!screenfull.isEnabled) return;
-      screenfull.toggle();
-    };
-
-    const change = () => {
-      isFullscreen.value = screenfull.isFullscreen;
-    };
-
-    const init = () => {
-      if (screenfull.isEnabled) {
-        screenfull.on("change", change);
-      }
-    };
-
-    const destroy = () => {
-      if (screenfull.isEnabled) {
-        screenfull.off("change", change);
-      }
-    };
-
-    onMounted(() => {
-      init();
-    });
-
-    onUnmounted(() => {
-      destroy();
-    });
 
     return {
       isFullscreen,
-      onClick,
+      toggle,
     };
   },
 });

src/layout/index.vue

@@ -36,6 +36,7 @@ import {
   onBeforeUnmount,
 } from "vue";
 import { useStore } from "vuex";
+import { useEventListener } from "@vueuse/core";
 interface setInter {
   sidebar: any;
   device: String;
@@ -115,13 +116,9 @@ export default {
     });
 
     onBeforeMount(() => {
-      window.addEventListener("resize", $_resizeHandler);
+      useEventListener("resize", $_resizeHandler);
     });
-
+    
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", $_resizeHandler);
-    });
-
     return {
       ...toRefs(set),
       handleClickOutside,

src/locales/ch.json

@@ -1,6 +1,8 @@
 {
   "home": "首页",
   "LoginOut": "退出系统",
+  "fullscreen": "全屏",
+  "exitfullscreen": "退出全屏",
   "usermanagement": "用户管理",
   "baseinfo": "基础信息",
   "editor": "编辑器",

src/locales/en.json

@@ -1,6 +1,8 @@
 {
   "home": "Home",
   "LoginOut": "Login Out",
+  "fullscreen": "Fullscreen",
+  "exitfullscreen": "Exit Fullscreen",
   "usermanagement": "User Manage",
   "baseinfo": "Base Info",
   "editor": "Editor",

src/views/welcome.vue

@@ -5,7 +5,9 @@
         <div class="left-mark">
           <img
             src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+            title="直达仓库地址"
             alt
+            @click="openDepot"
           />
           <span>{{ greetings }}</span>
         </div>
@@ -21,7 +23,6 @@
       </template>
     </el-skeleton>
     </el-card>
-    <!-- <a title="欢迎Star" href="https://github.com/xiaoxian521/CURD-TS" target="_blank">点击打开仓库地址</a> -->
     <!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
   </div>
 </template>
@@ -32,6 +33,7 @@ import CountTo from "../components/countTo/src/index.vue";
 import { ref, computed, onMounted, inject, nextTick } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
 import { echartsJson } from "../api/mock";
+import { useEventListener } from "@vueuse/core";
 
 let brokenLine: any = null; //折线图实例
 export default {
@@ -178,8 +180,13 @@ export default {
       });
     };
 
+    const openDepot = ():void => {
+      window.open('https://github.com/xiaoxian521/vue-pure-admin')
+    }
+
     onMounted(() => {
-      window.addEventListener("resize", () => {
+      useEventListener("resize", () => {
+        if(!brokenLine) return;
         brokenLine.resize();
       });
     });
@@ -188,6 +195,7 @@ export default {
       greetings,
       mobile,
       loading,
+      openDepot
     };
   },
 };
@@ -214,6 +222,7 @@ export default {
         height: 72px;
         border-radius: 50%;
         margin-right: 10px;
+        cursor: pointer;
       }
     }
   }