Merge pull request #43 from xiaoxian521/refactor/layout

perf: perf layout

src/components/ReBreadCrumb/src/index.vue

@@ -21,6 +21,7 @@ const getBreadcrumb = (): void => {
     matched = [
       {
         path: "/welcome",
+        parentPath: "/",
         meta: { title: "message.hshome" }
       } as unknown as RouteLocationMatched
     ].concat(matched);

src/layout/components/AppMain.vue

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { ref, unref, computed, getCurrentInstance } from "vue";
+import { useSettingStoreHook } from "/@/store/modules/settings";
+
+const keepAlive: Boolean = ref(
+  getCurrentInstance().appContext.config.globalProperties.$config?.keepAlive
+);
+
+const getCachedPageList = computed((): string[] => {
+  if (!unref(keepAlive)) {
+    return [];
+  }
+  return useSettingStoreHook().cachedPageList;
+});
+</script>
+
 <template>
   <section class="app-main">
     <router-view>
@@ -13,32 +29,6 @@
   </section>
 </template>
 
-<script lang="ts">
-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() {
-    const keepAlive: Boolean = ref(
-      getCurrentInstance().appContext.config.globalProperties.$config?.keepAlive
-    );
-    const route = useRoute();
-    const key = computed(() => route.path);
-
-    const getCachedPageList = computed((): string[] => {
-      if (!unref(keepAlive)) {
-        return [];
-      }
-      return useSettingStoreHook().cachedPageList;
-    });
-
-    return { key, keepAlive, getCachedPageList };
-  }
-});
-</script>
-
 <style scoped>
 .app-main {
   min-height: calc(100vh - 70px);

src/layout/components/Navbar.vue

@@ -67,6 +67,7 @@ import { useI18n } from "vue-i18n";
 let routerArrays: Array<object> = [
   {
     path: "/welcome",
+    parentPath: "/",
     meta: {
       title: "message.hshome",
       icon: "el-icon-s-home",

src/layout/components/panel/index.vue

@@ -1,36 +1,14 @@
-<template>
+<script setup lang="ts">
-  <div :class="{ show: show }" class="right-panel-container">
-    <div class="right-panel-background" />
-    <div ref="target" class="right-panel">
-      <div class="right-panel-items">
-        <div class="project-configuration">
-          <h3>项目配置</h3>
-          <i class="el-icon-close" @click="show = !show"></i>
-        </div>
-        <div style="border-bottom: 1px solid #dcdfe6"></div>
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
 import { ref } from "vue";
 import { useEventListener, onClickOutside } from "@vueuse/core";
 import { emitter } from "/@/utils/mitt";
 
-export default {
-  name: "panel",
-  setup() {
 let show = ref(false);
-
 const target = ref(null);
-
 onClickOutside(target, () => {
   show.value = false;
 });
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
 const addEventClick = (): void => {
   useEventListener("click", closeSidebar);
 };
@@ -47,14 +25,27 @@ export default {
   show.value = true;
 });
 
-    return {
+defineExpose({
-      show,
+  addEventClick
-      target
+});
-    };
-  }
-};
 </script>
 
+<template>
+  <div :class="{ show: show }" class="right-panel-container">
+    <div class="right-panel-background" />
+    <div ref="target" class="right-panel">
+      <div class="right-panel-items">
+        <div class="project-configuration">
+          <h3>项目配置</h3>
+          <i class="el-icon-close" @click="show = !show"></i>
+        </div>
+        <div style="border-bottom: 1px solid #dcdfe6"></div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style>
 .showright-panel {
   overflow: hidden;

src/layout/components/setting/index.vue

@@ -1,113 +1,11 @@
-<template>
+<script setup lang="ts">
-  <panel>
-    <el-divider>主题风格</el-divider>
-    <ul class="theme-stley">
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="暗色主题"
-        placement="bottom"
-      >
-        <li
-          :class="dataTheme === 'dark' ? $style.isSelect : ''"
-          ref="firstTheme"
-          @click="onDark"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="亮色主题"
-        placement="bottom"
-      >
-        <li
-          :class="dataTheme === 'light' ? $style.isSelect : ''"
-          ref="secondTheme"
-          @click="onLight"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-    </ul>
-
-    <el-divider>界面显示</el-divider>
-    <ul class="setting">
-      <li>
-        <span>灰色模式</span>
-        <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>
-      </li>
-      <li>
-        <span>隐藏标签页</span>
-        <vxe-switch
-          v-model="tagsVal"
-          open-label="开"
-          close-label="关"
-          @change="tagsChange"
-        ></vxe-switch>
-      </li>
-      <li>
-        <span>侧边栏Logo</span>
-        <vxe-switch
-          v-model="logoVal"
-          open-value="1"
-          close-value="-1"
-          open-label="开"
-          close-label="关"
-          @change="logoChange"
-        ></vxe-switch>
-      </li>
-
-      <li>
-        <span>标签风格</span>
-        <vxe-radio-group v-model="markValue" @change="onChange">
-          <vxe-radio label="card" content="卡片"></vxe-radio>
-          <vxe-radio label="smart" content="灵动"></vxe-radio>
-        </vxe-radio-group>
-      </li>
-    </ul>
-
-    <el-divider />
-    <vxe-button
-      status="danger"
-      style="width: 90%; margin: 24px 15px"
-      content="清空缓存并返回登录页"
-      icon="fa fa-sign-out"
-      @click="onReset"
-    ></vxe-button>
-  </panel>
-</template>
-
-<script lang="ts">
 import panel from "../panel/index.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 { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
+import { reactive, ref, unref, useCssModule } from "vue";
+import { storageLocal, storageSession } from "/@/utils/storage";
 
-export default {
-  name: "setting",
-  components: { panel },
-  setup() {
 const router = useRouter();
 const { isSelect } = useCssModule();
 
@@ -145,11 +43,7 @@ export default {
 
 // 灰色模式设置
 const greyChange = ({ value }): void => {
-      toggleClass(
+  toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
-        settings.greyVal,
-        "html-grey",
-        document.querySelector("html")
-      );
   value
     ? localOperate("greyVal", true, "set")
     : localOperate("greyVal", false, "set");
@@ -217,26 +111,106 @@ export default {
     : storageLocal.setItem("logoVal", "-1");
   emitter.emit("logoChange", unref(logoVal));
 }
-
-    return {
-      ...toRefs(settings),
-      localOperate,
-      greyChange,
-      weekChange,
-      tagsChange,
-      onReset,
-      markValue,
-      onChange,
-      onDark,
-      onLight,
-      dataTheme,
-      logoVal,
-      logoChange
-    };
-  }
-};
 </script>
 
+<template>
+  <panel>
+    <el-divider>主题风格</el-divider>
+    <ul class="theme-stley">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="暗色主题"
+        placement="bottom"
+      >
+        <li
+          :class="dataTheme === 'dark' ? $style.isSelect : ''"
+          ref="firstTheme"
+          @click="onDark"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="亮色主题"
+        placement="bottom"
+      >
+        <li
+          :class="dataTheme === 'light' ? $style.isSelect : ''"
+          ref="secondTheme"
+          @click="onLight"
+        >
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+    </ul>
+
+    <el-divider>界面显示</el-divider>
+    <ul class="setting">
+      <li>
+        <span>灰色模式</span>
+        <vxe-switch
+          v-model="settings.greyVal"
+          open-label="开"
+          close-label="关"
+          @change="greyChange"
+        ></vxe-switch>
+      </li>
+      <li>
+        <span>色弱模式</span>
+        <vxe-switch
+          v-model="settings.weekVal"
+          open-label="开"
+          close-label="关"
+          @change="weekChange"
+        ></vxe-switch>
+      </li>
+      <li>
+        <span>隐藏标签页</span>
+        <vxe-switch
+          v-model="settings.tagsVal"
+          open-label="开"
+          close-label="关"
+          @change="tagsChange"
+        ></vxe-switch>
+      </li>
+      <li>
+        <span>侧边栏Logo</span>
+        <vxe-switch
+          v-model="logoVal"
+          open-value="1"
+          close-value="-1"
+          open-label="开"
+          close-label="关"
+          @change="logoChange"
+        ></vxe-switch>
+      </li>
+
+      <li>
+        <span>标签风格</span>
+        <vxe-radio-group v-model="markValue" @change="onChange">
+          <vxe-radio label="card" content="卡片"></vxe-radio>
+          <vxe-radio label="smart" content="灵动"></vxe-radio>
+        </vxe-radio-group>
+      </li>
+    </ul>
+
+    <el-divider />
+    <vxe-button
+      status="danger"
+      style="width: 90%; margin: 24px 15px"
+      content="清空缓存并返回登录页"
+      icon="fa fa-sign-out"
+      @click="onReset"
+    ></vxe-button>
+  </panel>
+</template>
+
 <style scoped module>
 .isSelect {
   border: 2px solid #0960bd;

src/layout/components/sidebar/Link.vue

@@ -4,9 +4,9 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, unref } from "vue";
-import { isUrl } from "/@/utils/is.ts";
+import { isUrl } from "/@/utils/is";
 
 export default defineComponent({
   name: "Link",

src/layout/index.vue

@@ -1,52 +1,22 @@
-<template>
+<script setup lang="ts">
-  <div :class="classes" class="app-wrapper">
-    <div
-      v-if="device === 'mobile' && sidebar.opened"
-      class="drawer-bg"
-      @click="handleClickOutside(false)"
-    />
-    <!-- 侧边栏 -->
-    <sidebar class="sidebar-container" v-if="!containerHiddenSideBar" />
-    <div class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <!-- 顶部导航栏 -->
-        <navbar v-show="!containerHiddenSideBar" />
-        <!-- tabs标签页 -->
-        <tag>
-          <span @click="onFullScreen">
-            <fullScreen v-if="!containerHiddenSideBar" />
-            <exitScreen v-else />
-          </span>
-        </tag>
-      </div>
-      <!-- 主体内容 -->
-      <app-main />
-    </div>
-    <!-- 系统设置 -->
-    <setting />
-  </div>
-</template>
-
-<script lang="ts">
-import { Navbar, Sidebar, AppMain, setting, tag } from "./components";
 import {
   ref,
   unref,
   reactive,
   computed,
-  toRefs,
   watchEffect,
   onMounted,
   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";
 import options from "/@/settings";
+import { toggleClass } from "/@/utils/operate";
+import { useEventListener } from "@vueuse/core";
+import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
+import { useSettingStoreHook } from "/@/store/modules/settings";
+import { Navbar, Sidebar, AppMain, setting, tag } from "./components";
 
 interface setInter {
   sidebar: any;
@@ -55,18 +25,6 @@ interface setInter {
   classes: any;
 }
 
-export default {
-  name: "layout",
-  components: {
-    Navbar,
-    Sidebar,
-    AppMain,
-    setting,
-    tag,
-    fullScreen,
-    exitScreen
-  },
-  setup() {
 const pureApp = useAppStoreHook();
 const pureSetting = useSettingStoreHook();
 const { hiddenMainContainer } = useCssModule();
@@ -157,17 +115,37 @@ export default {
 onBeforeMount(() => {
   useEventListener("resize", $_resizeHandler);
 });
-
-    return {
-      ...toRefs(set),
-      handleClickOutside,
-      containerHiddenSideBar,
-      onFullScreen
-    };
-  }
-};
 </script>
 
+<template>
+  <div :class="set.classes" class="app-wrapper">
+    <div
+      v-if="set.device === 'mobile' && set.sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside(false)"
+    />
+    <!-- 侧边栏 -->
+    <sidebar class="sidebar-container" v-if="!containerHiddenSideBar" />
+    <div class="main-container">
+      <div :class="{ 'fixed-header': set.fixedHeader }">
+        <!-- 顶部导航栏 -->
+        <navbar v-show="!containerHiddenSideBar" />
+        <!-- tabs标签页 -->
+        <tag>
+          <span @click="onFullScreen">
+            <fullScreen v-if="!containerHiddenSideBar" />
+            <exitScreen v-else />
+          </span>
+        </tag>
+      </div>
+      <!-- 主体内容 -->
+      <app-main />
+    </div>
+    <!-- 系统设置 -->
+    <setting />
+  </div>
+</template>
+
 <style scoped module>
 .hiddenMainContainer {
   margin-left: 0 !important;