style: prettierrc code

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;
 }