style: format code for all

src/layout/components/Navbar.vue

@@ -20,7 +20,11 @@
       >
         <img :src="langs ? ch : en" />
       </div>
-      <i class="el-icon-setting hsset" :title="$t('message.hssystemSet')" @click="onPanel"></i>
+      <i
+        class="el-icon-setting hsset"
+        :title="$t('message.hssystemSet')"
+        @click="onPanel"
+      ></i>
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
@@ -29,10 +33,9 @@
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item
-              icon="el-icon-switch-button"
-              @click="logout"
-            >{{ $t("message.hsLoginOut") }}</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
+              $t("message.hsLoginOut")
+            }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -47,7 +50,6 @@ import Hamburger from "/@/components/ReHamBurger";
 import screenfull from "../components/screenfull/index.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { mapGetters } from "pinia";
 import { storageSession } from "/@/utils/storage";
 import ch from "/@/assets/ch.png";
 import en from "/@/assets/en.png";
@@ -92,7 +94,7 @@ export default defineComponent({
 
     watch(
       () => langs.value,
-      val => {
+      () => {
         //@ts-ignore
         document.title = t(unref(route.meta.title)); // 动态title
       }

src/layout/components/index.ts

@@ -1,5 +1,5 @@
-export { default as Navbar } from './Navbar.vue'
-export { default as Sidebar } from './sidebar/index.vue'
-export { default as AppMain } from './AppMain.vue'
-export { default as setting } from './setting/index.vue'
-export { default as tag } from './tag/index.vue'
+export { default as Navbar } from "./Navbar.vue";
+export { default as Sidebar } from "./sidebar/index.vue";
+export { default as AppMain } from "./AppMain.vue";
+export { default as setting } from "./setting/index.vue";
+export { default as tag } from "./tag/index.vue";

src/layout/components/panel/index.vue

@@ -7,16 +7,15 @@
           <h3>项目配置</h3>
           <i class="el-icon-close" @click="show = !show"></i>
         </div>
-        <div style="border-bottom:1px solid #DCDFE6"></div>
+        <div style="border-bottom: 1px solid #dcdfe6"></div>
         <slot />
       </div>
     </div>
   </div>
 </template>
 
-<script lang='ts'>
-import { addClass, removeClass } from "../../../utils/operate";
-import { ref, watch, getCurrentInstance, onMounted, onBeforeMount } from "vue";
+<script lang="ts">
+import { ref } from "vue";
 import { useEventListener, onClickOutside } from "@vueuse/core";
 import { emitter } from "/@/utils/mitt";
 
@@ -27,10 +26,11 @@ export default {
 
     const target = ref(null);
 
-    onClickOutside(target, event => {
+    onClickOutside(target, () => {
       show.value = false;
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
     const addEventClick = (): void => {
       useEventListener("click", closeSidebar);
     };

src/layout/components/screenfull/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="screen-full" @click="toggle">
     <i
-      :title="isFullscreen ? $t('message.hsexitfullscreen') : $t('message.hsfullscreen')"
+      :title="
+        isFullscreen
+          ? $t('message.hsexitfullscreen')
+          : $t('message.hsfullscreen')
+      "
       :class="
         isFullscreen
           ? 'iconfont team-iconexit-fullscreen'
@@ -12,20 +16,18 @@
 </template>
 
 <script>
-import { useFullscreen } from '@vueuse/core'
-import {
-  defineComponent,
-} from "vue"
+import { useFullscreen } from "@vueuse/core";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "screenfull",
   setup() {
-    const { isFullscreen, toggle } = useFullscreen()
+    const { isFullscreen, toggle } = useFullscreen();
 
     return {
       isFullscreen,
-      toggle,
-    }
-  },
+      toggle
+    };
+  }
 });
 </script>
 
@@ -41,4 +43,4 @@ export default defineComponent({
     background: #f0f0f0;
   }
 }
-</style>
+</style>

src/layout/components/setting/index.vue

@@ -2,15 +2,33 @@
   <panel>
     <el-divider>主题风格</el-divider>
     <ul class="theme-stley">
-      <el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
-        <li :class="dataTheme === 'dark' ? 'is-select' : ''" ref="firstTheme" @click="onDark">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="暗色主题"
+        placement="bottom"
+      >
+        <li
+          :class="dataTheme === 'dark' ? 'is-select' : ''"
+          ref="firstTheme"
+          @click="onDark"
+        >
           <div></div>
           <div></div>
         </li>
       </el-tooltip>
 
-      <el-tooltip class="item" effect="dark" content="亮色主题" placement="bottom">
-        <li :class="dataTheme === 'light' ? 'is-select' : ''" ref="secondTheme" @click="onLight">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="亮色主题"
+        placement="bottom"
+      >
+        <li
+          :class="dataTheme === 'light' ? 'is-select' : ''"
+          ref="secondTheme"
+          @click="onLight"
+        >
           <div></div>
           <div></div>
         </li>
@@ -21,15 +39,30 @@
     <ul class="setting">
       <li>
         <span>灰色模式</span>
-        <vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
+        <vxe-switch
+          v-model="greyVal"
+          open-label="开"
+          close-label="关"
+          @change="greyChange"
+        ></vxe-switch>
       </li>
       <li>
         <span>色弱模式</span>
-        <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
+        <vxe-switch
+          v-model="weekVal"
+          open-label="开"
+          close-label="关"
+          @change="weekChange"
+        ></vxe-switch>
       </li>
       <li>
         <span>隐藏标签页</span>
-        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
+        <vxe-switch
+          v-model="tagsVal"
+          open-label="开"
+          close-label="关"
+          @change="tagsChange"
+        ></vxe-switch>
       </li>
       <li>
         <span>侧边栏Logo</span>
@@ -55,7 +88,7 @@
     <el-divider />
     <vxe-button
       status="danger"
-      style="width: 90%;margin: 24px 15px;"
+      style="width: 90%; margin: 24px 15px"
       content="清空缓存并返回登录页"
       icon="fa fa-sign-out"
       @click="onReset"
@@ -63,11 +96,10 @@
   </panel>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import panel from "../panel/index.vue";
-import { onMounted, reactive, toRefs, ref, unref } from "vue";
+import { reactive, toRefs, ref, unref } from "vue";
 import { storageLocal, storageSession } from "/@/utils/storage";
-import { toggleClass } from "/@/utils/operate";
 import { emitter } from "/@/utils/mitt";
 import { useRouter } from "vue-router";
 import { templateRef } from "@vueuse/core";
@@ -158,7 +190,7 @@ export default {
     const secondTheme = templateRef<HTMLElement | null>("secondTheme", null);
 
     const dataTheme = ref(storageLocal.getItem("data-theme") || "dark");
-    if (dataTheme) {
+    if (dataTheme.value) {
       storageLocal.setItem("data-theme", unref(dataTheme));
       window.document.body.setAttribute("data-theme", unref(dataTheme));
     }

src/layout/components/sidebar/Link.vue

@@ -5,48 +5,47 @@
 </template>
 
 <script>
-import { computed, defineComponent, unref } from "vue"
-import { isUrl } from "/@/utils/is.ts"
+import { computed, defineComponent, unref } from "vue";
+import { isUrl } from "/@/utils/is.ts";
 
 export default defineComponent({
   name: "Link",
   props: {
     to: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(props) {
-
     const isExternal = computed(() => {
-      return isUrl(props.to)
-    })
+      return isUrl(props.to);
+    });
 
     const type = computed(() => {
       if (unref(isExternal)) {
-        return 'a'
+        return "a";
       }
-      return 'router-link'
-    })
+      return "router-link";
+    });
 
     function linkProps(to) {
       if (unref(isExternal)) {
         return {
           href: to,
-          target: '_blank',
-          rel: 'noopener'
-        }
+          target: "_blank",
+          rel: "noopener"
+        };
       }
       return {
         to: to
-      }
+      };
     }
 
     return {
       isExternal,
       type,
-      linkProps,
-    }
-  },
+      linkProps
+    };
+  }
 });
 </script>

src/layout/components/sidebar/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
       <router-link
         v-if="collapse"
@@ -11,7 +11,13 @@
         <i class="fa fa-optin-monster"></i>
         <h1 class="sidebar-title">{{ settings.title }}</h1>
       </router-link>
-      <router-link v-else key="expand" :title="settings.title" class="sidebar-logo-link" to="/">
+      <router-link
+        v-else
+        key="expand"
+        :title="settings.title"
+        class="sidebar-logo-link"
+        to="/"
+      >
         <i class="fa fa-optin-monster"></i>
         <h1 class="sidebar-title">{{ settings.title }}</h1>
       </router-link>

src/layout/components/sidebar/SidebarItem.vue

@@ -20,7 +20,12 @@
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
       <template #title>
         <i :class="item.meta.icon"></i>
         <span>{{ $t(item.meta.title) }}</span>

src/layout/components/sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'has-logo': showLogo}">
+  <div :class="{ 'has-logo': showLogo }">
     <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
@@ -22,18 +22,11 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  unref,
-  nextTick,
-  onBeforeMount
-} from "vue";
+import { computed, defineComponent, ref, onBeforeMount } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAppStoreHook } from "/@/store/modules/app";
 import SidebarItem from "./SidebarItem.vue";
-import { algorithm } from "../../../utils/algorithm";
+import { algorithm } from "/@/utils/algorithm";
 import { emitter } from "/@/utils/mitt";
 import Logo from "./Logo.vue";
 import { storageLocal } from "/@/utils/storage";
@@ -69,7 +62,7 @@ export default defineComponent({
       }
       // 找到当前路由的信息
       function findCurrentRoute(routes) {
-        return routes.map((item, key) => {
+        return routes.map(item => {
           if (item.path === indexPath) {
             // 切换左侧菜单 通知标签页
             emitter.emit("changLayoutRoute", {
@@ -80,7 +73,6 @@ export default defineComponent({
             if (item.children) findCurrentRoute(item.children);
           }
         });
-        return;
       }
       findCurrentRoute(algorithm.increaseIndexes(router));
     };

src/layout/components/tag/index.vue

@@ -5,20 +5,27 @@
         v-for="(item, index) in dynamicTagList"
         :key="index"
         :ref="'dynamic' + index"
-        :class="['scroll-item is-closable', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card'  ? 'card-active' : '' ]"
-        @contextmenu.prevent.native="openMenu(item, $event)"
+        :class="[
+          'scroll-item is-closable',
+          $route.path === item.path ? 'is-active' : '',
+          $route.path === item.path && showModel === 'card' ? 'card-active' : ''
+        ]"
+        @contextmenu.prevent="openMenu(item, $event)"
         @mouseenter.prevent="onMouseenter(item, index)"
         @mouseleave.prevent="onMouseleave(item, index)"
       >
         <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
         <span
-          v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0"
+          v-if="
+            ($route.path === item.path && index !== 0) ||
+            (index === activeIndex && index !== 0)
+          "
           class="el-icon-close"
           @click="deleteMenu(item)"
         ></span>
         <div
           :ref="'schedule' + index"
-          v-if="showModel !=='card'"
+          v-if="showModel !== 'card'"
           :class="[$route.path === item.path ? 'schedule-active' : '']"
         ></div>
       </div>
@@ -26,15 +33,19 @@
     <!-- 右键菜单按钮 -->
     <ul
       v-show="visible"
-      :style="{ left: buttonLeft + 'px',top: buttonTop + 'px'}"
+      :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
       class="contextmenu"
     >
-      <div v-for="(item,key) in tagsViews" :key="key" style="display:flex; align-items: center;">
-        <li v-if="item.show" @click="selectTag(item,key)">
+      <div
+        v-for="(item, key) in tagsViews"
+        :key="key"
+        style="display: flex; align-items: center"
+      >
+        <li v-if="item.show" @click="selectTag(item, key)">
           <span>
             <i :class="item.icon"></i>
           </span>
-          {{item.text}}
+          {{ item.text }}
         </li>
       </div>
     </ul>
@@ -53,13 +64,14 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item
-                v-for="(item,key) in tagsViews"
+                v-for="(item, key) in tagsViews"
                 :key="key"
                 :icon="item.icon"
                 :divided="item.divided"
                 :disabled="item.disabled"
                 @click="onClickDrop(key, item)"
-              >{{item.text}}</el-dropdown-item>
+                >{{ item.text }}</el-dropdown-item
+              >
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -71,10 +83,9 @@
   </div>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import {
   ref,
-  watchEffect,
   watch,
   onBeforeMount,
   unref,
@@ -106,6 +117,7 @@ export default {
         !this.$storage.routesInStorage ||
         this.$storage.routesInStorage.length === 0
       ) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.$storage.routesInStorage = routerArrays;
       }
       return this.$storage.routesInStorage;
@@ -152,7 +164,7 @@ export default {
 
     // 显示模式，默认灵动模式显示
     const showModel = ref(storageLocal.getItem("showModel") || "smart");
-    if (!showModel) {
+    if (!showModel.value) {
       storageLocal.setItem("showModel", "card");
     }
 
@@ -192,7 +204,7 @@ export default {
     // 重新加载
     function onFresh() {
       toggleClass(true, refreshButton, document.querySelector(".rotate"));
-      const { path, fullPath } = unref(route);
+      const { fullPath } = unref(route);
       router.replace({
         path: "/redirect" + fullPath
       });

src/layout/index.vue

@@ -14,7 +14,11 @@
         <!-- tabs标签页 -->
         <tag>
           <i
-            :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
+            :class="
+              containerHiddenSideBar
+                ? 'iconfont team-iconhidden-main-container'
+                : 'iconfont team-iconshow-main-container'
+            "
             @click="onFullScreen"
           ></i>
         </tag>
@@ -35,26 +39,21 @@ import {
   reactive,
   computed,
   toRefs,
-  watch,
-  nextTick,
   watchEffect,
   onMounted,
-  onBeforeMount,
-  onBeforeUnmount
+  onBeforeMount
 } from "vue";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useSettingStoreHook } from "/@/store/modules/settings";
-import { useEventListener, useFullscreen } from "@vueuse/core";
-import { toggleClass, removeClass } from "/@/utils/operate";
+import { useEventListener } from "@vueuse/core";
+import { toggleClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
 import options from "/@/settings";
-import { useRouter, useRoute } from "vue-router";
-import { storageLocal } from "/@/utils/storage";
 
 interface setInter {
   sidebar: any;
-  device: String;
-  fixedHeader: Boolean;
+  device: string;
+  fixedHeader: boolean;
   classes: any;
 }
 
@@ -71,8 +70,8 @@ export default {
     const pureApp = useAppStoreHook();
     const pureSetting = useSettingStoreHook();
 
-    const router = useRouter();
-    const route = useRoute();
+    // const router = useRouter();
+    // const route = useRoute();
 
     const WIDTH = ref(992);
 
@@ -101,7 +100,7 @@ export default {
       })
     });
 
-    const handleClickOutside = (params: Boolean) => {
+    const handleClickOutside = (params: boolean) => {
       pureApp.closeSideBar({ withoutAnimation: params });
     };