style: prettierrc code

src/components/ReInfo/index.vue

@@ -83,7 +83,7 @@ export default defineComponent({
   },
   emits: ["onBehavior", "refreshVerify"],
   setup(props, ctx) {
-    let vm: any;
+    const instance = getCurrentInstance();
 
     const model = toRef(props, "ruleForm");
     let tips = ref("注册");
@@ -117,7 +117,7 @@ export default defineComponent({
 
     // 点击登录或注册
     const onBehavior = (evt: Object): void => {
-      vm.refs.ruleForm.validate((valid: boolean) => {
+      instance.refs.ruleForm.validate((valid: boolean) => {
         if (valid) {
           ctx.emit("onBehavior", evt);
         } else {
@@ -133,7 +133,7 @@ export default defineComponent({
 
     // 表单重置
     const resetForm = (): void => {
-      vm.refs.ruleForm.resetFields();
+      instance.refs.ruleForm.resetFields();
     };
 
     // 登录、注册页面切换
@@ -150,10 +150,6 @@ export default defineComponent({
       router.push("/");
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-    });
-
     return {
       model,
       rules,

src/components/ReMap/src/Amap.vue

@@ -50,7 +50,7 @@ export interface mapInter {
 export default defineComponent({
   name: "Amap",
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let map: MapConfigureInter;
 
     const mapSet: mapInter = reactive({
@@ -74,9 +74,9 @@ export default defineComponent({
     };
 
     onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-      if (!vm) return;
-      let { MapConfigure } = vm.appContext.config.globalProperties.$config;
+      if (!instance) return;
+      let { MapConfigure } =
+        instance.appContext.config.globalProperties.$config;
       let { options } = MapConfigure;
 
       AMapLoader.load({
@@ -86,7 +86,7 @@ export default defineComponent({
       })
         .then(AMap => {
           // 创建地图实例
-          map = new AMap.Map(vm.refs.mapview, options);
+          map = new AMap.Map(instance.refs.mapview, options);
 
           //地图中添加地图操作ToolBar插件
           map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {

src/components/ReSelector/src/index.tsx

@@ -52,7 +52,7 @@ export default defineComponent({
   },
   emits: ["selectedVal"],
   setup(props, { emit }) {
-    let vm: any;
+    const instance = getCurrentInstance();
     // eslint-disable-next-line vue/no-setup-props-destructure
     const currentValue = props.value;
 
@@ -252,29 +252,28 @@ export default defineComponent({
       });
 
       addClass(
-        vm.refs["hsdiv" + props.HsKey + item[0]],
+        instance.refs["hsdiv" + props.HsKey + item[0]],
         activeClass,
         stayClass
       );
 
-      addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
+      addClass(instance.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
 
       addClass(
-        vm.refs["hsdiv" + props.HsKey + item[1]],
+        instance.refs["hsdiv" + props.HsKey + item[1]],
         activeClass,
         stayClass
       );
 
-      addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides);
+      addClass(instance.refs["hstd" + props.HsKey + item[1]], bothRightSides);
 
       while (item[1] >= item[0]) {
-        addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange);
+        addClass(instance.refs["hstd" + props.HsKey + item[0]], inRange);
         item[0]++;
       }
     };
 
     onBeforeMount(() => {
-      vm = getCurrentInstance();
       nextTick(() => {
         echoView(props.echo);
       });

src/layout/components/AppMain.vue

@@ -17,6 +17,7 @@
 import { ref, unref, computed, defineComponent, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+
 export default defineComponent({
   name: "appMain",
   setup() {

src/layout/components/screenfull/index.vue

@@ -18,6 +18,7 @@
 <script>
 import { useFullscreen } from "@vueuse/core";
 import { defineComponent } from "vue";
+
 export default defineComponent({
   name: "screenfull",
   setup() {

src/layout/components/setting/index.vue

@@ -9,7 +9,7 @@
         placement="bottom"
       >
         <li
-          :class="dataTheme === 'dark' ? 'is-select' : ''"
+          :class="dataTheme === 'dark' ? $style.isSelect : ''"
           ref="firstTheme"
           @click="onDark"
         >
@@ -25,7 +25,7 @@
         placement="bottom"
       >
         <li
-          :class="dataTheme === 'light' ? 'is-select' : ''"
+          :class="dataTheme === 'light' ? $style.isSelect : ''"
           ref="secondTheme"
           @click="onLight"
         >
@@ -98,18 +98,18 @@
 
 <script lang="ts">
 import panel from "../panel/index.vue";
-import { reactive, toRefs, ref, unref } from "vue";
+import { reactive, toRefs, ref, unref, useCssModule } from "vue";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
 import { useRouter } from "vue-router";
 import { templateRef } from "@vueuse/core";
-let isSelect = "is-select";
 
 export default {
   name: "setting",
   components: { panel },
   setup() {
     const router = useRouter();
+    const { isSelect } = useCssModule();
 
     // 默认灵动模式
     const markValue = ref(storageLocal.getItem("showModel") || "smart");
@@ -237,6 +237,12 @@ export default {
 };
 </script>
 
+<style scoped module>
+.isSelect {
+  border: 2px solid #0960bd;
+}
+</style>
+
 <style lang="scss" scoped>
 .setting {
   width: 100%;
@@ -308,7 +314,4 @@ export default {
     }
   }
 }
-.is-select {
-  border: 2px solid #0960bd;
-}
 </style>

src/layout/components/sidebar/Logo.vue

@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import settings from "/@/settings";
+
 export default defineComponent({
   props: {
     collapse: {

src/layout/components/tag/index.vue

@@ -101,15 +101,15 @@ import { storageLocal } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
-let refreshButton = "refresh-button";
-
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeLeft from "/@/assets/svg/close_left.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 import close from "/@/assets/svg/close.svg";
 import refresh from "/@/assets/svg/refresh.svg";
 import closeAll from "/@/assets/svg/close_all.svg";
-let routerArrays = [
+
+let refreshButton = "refresh-button";
+let routerArrays: Array<object> = [
   {
     path: "/welcome",
     meta: {
@@ -120,6 +120,7 @@ let routerArrays = [
     }
   }
 ];
+
 export default {
   name: "tag",
   components: {
@@ -144,7 +145,7 @@ export default {
     }
   },
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let st: any;
     const route = useRoute();
     const router = useRouter();
@@ -474,13 +475,14 @@ export default {
     function onMouseenter(item, index) {
       if (index) activeIndex.value = index;
       if (unref(showModel) === "smart") {
-        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
-        toggleClass(true, "schedule-in", vm.refs["schedule" + index]);
-        toggleClass(false, "schedule-out", vm.refs["schedule" + index]);
+        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+          return;
+        toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
+        toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
       } else {
-        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
-        toggleClass(true, "card-in", vm.refs["dynamic" + index]);
-        toggleClass(false, "card-out", vm.refs["dynamic" + index]);
+        if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
+        toggleClass(true, "card-in", instance.refs["dynamic" + index]);
+        toggleClass(false, "card-out", instance.refs["dynamic" + index]);
       }
     }
 
@@ -488,13 +490,14 @@ export default {
     function onMouseleave(item, index) {
       activeIndex.value = -1;
       if (unref(showModel) === "smart") {
-        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
-        toggleClass(false, "schedule-in", vm.refs["schedule" + index]);
-        toggleClass(true, "schedule-out", vm.refs["schedule" + index]);
+        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+          return;
+        toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
+        toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
       } else {
-        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
-        toggleClass(false, "card-in", vm.refs["dynamic" + index]);
-        toggleClass(true, "card-out", vm.refs["dynamic" + index]);
+        if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
+        toggleClass(false, "card-in", instance.refs["dynamic" + index]);
+        toggleClass(true, "card-out", instance.refs["dynamic" + index]);
       }
     }
 
@@ -510,8 +513,8 @@ export default {
     );
 
     onBeforeMount(() => {
-      vm = getCurrentInstance();
-      st = vm.appContext.app.config.globalProperties.$storage;
+      if (!instance) return;
+      st = instance.appContext.app.config.globalProperties.$storage;
       routerArrays = st.routesInStorage ?? routerArrays;
 
       // 根据当前路由初始化操作标签页的禁用状态
@@ -782,10 +785,6 @@ export default {
 }
 // 刷新按钮动画效果
 .refresh-button {
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-duration: 600ms;
-  -moz-transition-property: -moz-transform;
-  -moz-transition-duration: 600ms;
   -webkit-animation: rotate 600ms linear infinite;
   -moz-animation: rotate 600ms linear infinite;
   -o-animation: rotate 600ms linear infinite;

src/layout/index.vue

@@ -37,17 +37,17 @@ import {
   toRefs,
   watchEffect,
   onMounted,
-  onBeforeMount
+  onBeforeMount,
+  useCssModule
 } from "vue";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { useEventListener } from "@vueuse/core";
 import { toggleClass } from "/@/utils/operate";
-let hiddenMainContainer = "hidden-main-container";
 import options from "/@/settings";
-
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
+
 interface setInter {
   sidebar: any;
   device: string;
@@ -69,9 +69,7 @@ export default {
   setup() {
     const pureApp = useAppStoreHook();
     const pureSetting = useSettingStoreHook();
-
-    // const router = useRouter();
-    // const route = useRoute();
+    const { hiddenMainContainer } = useCssModule();
 
     const WIDTH = ref(992);
 
@@ -170,6 +168,12 @@ export default {
 };
 </script>
 
+<style scoped module>
+.hiddenMainContainer {
+  margin-left: 0 !important;
+}
+</style>
+
 <style lang="scss" scoped>
 @mixin clearfix {
   &:after {
@@ -217,10 +221,6 @@ $sideBarWidth: 210px;
   width: 100%;
 }
 
-.hidden-main-container {
-  margin-left: 0 !important;
-}
-
 .re-screen {
   margin-top: 12px;
 }

src/views/components/cropping/index.vue

@@ -20,27 +20,23 @@ export default {
     Cropper
   },
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let info = ref("");
     let cropperImg = ref("");
 
     const onCropper = (): void => {
       nextTick(() => {
-        vm.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
+        instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
           let fileReader: FileReader = new FileReader();
           fileReader.onloadend = (e: any) => {
             cropperImg.value = e.target.result;
-            info.value = vm.refs.refCropper.cropper.getData();
+            info.value = instance.refs.refCropper.cropper.getData();
           };
           fileReader.readAsDataURL(blob);
         }, "image/jpeg");
       });
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance();
-    });
-
     return {
       img,
       info,