perf: layout (#50)

2025-11-15 14:03:36 +08:00 · 2021-10-03 13:09:12 +08:00
parent 77b7abcbc3
commit 6b16a04229
14 changed files with 705 additions and 861 deletions
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+
+const levelList = ref([]);
+const route = useRoute();
+const router = useRouter();
+
+const isDashboard = (route: RouteLocationMatched): boolean | string => {
+  const name = route && (route.name as string);
+  if (!name) {
+    return false;
+  }
+  return name.trim().toLocaleLowerCase() === "welcome".toLocaleLowerCase();
+};
+
+const getBreadcrumb = (): void => {
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  const first = matched[0];
+  if (!isDashboard(first)) {
+    matched = [
+      {
+        path: "/welcome",
+        parentPath: "/",
+        meta: { title: "message.hshome" }
+      } as unknown as RouteLocationMatched
+    ].concat(matched);
+  }
+  levelList.value = matched.filter(
+    item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+  );
+};
+
+getBreadcrumb();
+
+watch(
+  () => route.path,
+  () => getBreadcrumb()
+);
+
+const handleLink = (item: RouteLocationMatched): any => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect.toString());
+    return;
+  }
+  router.push(path);
+};
+</script>
+
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group appear name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ $t(item.meta.title) }}</span
+        >
+        <a v-else @click.prevent="handleLink(item)">
+          {{ $t(item.meta.title) }}
+        </a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
--- a/src/layout/components/sidebar/hamBurger.vue
+++ b/src/layout/components/sidebar/hamBurger.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div :class="classes.container" @click="toggleClick">
+    <svg
+      :class="['hamburger', props.isActive ? 'is-active' : '']"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
+    </svg>
+  </div>
+</template>
+
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.is-active {
+  transform: rotate(180deg);
+}
+</style>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,3 +1,114 @@
+<script setup lang="ts">
+import {
+  computed,
+  unref,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance
+} from "vue";
+import { useI18n } from "vue-i18n";
+import settings from "/@/settings";
+import { emitter } from "/@/utils/mitt";
+import { templateRef } from "@vueuse/core";
+import SidebarItem from "./sidebarItem.vue";
+import { algorithm } from "/@/utils/algorithm";
+import screenfull from "../screenfull/index.vue";
+import { useRoute, useRouter } from "vue-router";
+import { storageSession } from "/@/utils/storage";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import globalization from "/@/assets/svg/globalization.svg";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+const instance =
+  getCurrentInstance().appContext.config.globalProperties.$storage;
+const menuRef = templateRef<ElRef | null>("menu", null);
+const routeStore = usePermissionStoreHook();
+const route = useRoute();
+const router = useRouter();
+const routers = useRouter().options.routes;
+let usename = storageSession.getItem("info")?.username;
+const { locale, t } = useI18n();
+
+watch(
+  () => locale.value,
+  () => {
+    //@ts-ignore
+    // 动态title
+    document.title = t(unref(route.meta.title));
+  }
+);
+
+// 退出登录
+const logout = (): void => {
+  storageSession.removeItem("info");
+  router.push("/login");
+};
+
+function onPanel() {
+  emitter.emit("openPanel");
+}
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const menuSelect = (indexPath: string): void => {
+  let parentPath = "";
+  let parentPathIndex = indexPath.lastIndexOf("/");
+  if (parentPathIndex > 0) {
+    parentPath = indexPath.slice(0, parentPathIndex);
+  }
+  // 找到当前路由的信息
+  function findCurrentRoute(routes) {
+    return routes.map(item => {
+      if (item.path === indexPath) {
+        // 切换左侧菜单 通知标签页
+        emitter.emit("changLayoutRoute", {
+          indexPath,
+          parentPath
+        });
+      } else {
+        if (item.children) findCurrentRoute(item.children);
+      }
+    });
+  }
+  findCurrentRoute(algorithm.increaseIndexes(routers));
+};
+
+function backHome() {
+  router.push("/welcome");
+}
+
+function handleResize() {
+  menuRef.value.handleResize();
+}
+
+// 简体中文
+function translationCh() {
+  instance.locale = { locale: "zh" };
+  locale.value = "zh";
+  handleResize();
+}
+
+// English
+function translationEn() {
+  instance.locale = { locale: "en" };
+  locale.value = "en";
+  handleResize();
+}
+
+onMounted(() => {
+  nextTick(() => {
+    handleResize();
+  });
+});
+</script>
+
 <template>
  <div class="horizontal-header">
    <div class="horizontal-header-left" @click="backHome">
@@ -25,7 +136,7 @@
      <screenfull v-show="!deviceDetection()" />
      <!-- 国际化 -->
      <el-dropdown trigger="click">
-        <iconinternationality />
+        <globalization />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
@@ -72,177 +183,6 @@
  </div>
 </template>

-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  unref,
-  watch,
-  nextTick,
-  onMounted,
-  getCurrentInstance
-} from "vue";
-import { useI18n } from "vue-i18n";
-import settings from "/@/settings";
-import { emitter } from "/@/utils/mitt";
-import { templateRef } from "@vueuse/core";
-import SidebarItem from "./sidebarItem.vue";
-import { algorithm } from "/@/utils/algorithm";
-import screenfull from "../screenfull/index.vue";
-import { useRoute, useRouter } from "vue-router";
-import { storageSession } from "/@/utils/storage";
-import { deviceDetection } from "/@/utils/deviceDetection";
-import { usePermissionStoreHook } from "/@/store/modules/permission";
-import iconinternationality from "/@/assets/svg/iconinternationality.svg";
-
-let routerArrays: Array<object> = [
-  {
-    path: "/welcome",
-    parentPath: "/",
-    meta: {
-      title: "message.hshome",
-      icon: "el-icon-s-home",
-      showLink: true,
-      savedPosition: false
-    }
-  }
-];
-export default defineComponent({
-  name: "sidebar",
-  components: { SidebarItem, screenfull, iconinternationality },
-  // @ts-ignore
-  computed: {
-    // eslint-disable-next-line vue/return-in-computed-property
-    currentLocale() {
-      if (
-        !this.$storage.routesInStorage ||
-        this.$storage.routesInStorage.length === 0
-      ) {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.$storage.routesInStorage = routerArrays;
-      }
-
-      if (!this.$storage.locale) {
-        // eslint-disable-next-line
-        this.$storage.locale = { locale: "zh" };
-        useI18n().locale.value = "zh";
-      }
-      switch (this.$storage.locale?.locale) {
-        case "zh":
-          return true;
-        case "en":
-          return false;
-      }
-    }
-  },
-  setup() {
-    const instance =
-      getCurrentInstance().appContext.config.globalProperties.$storage;
-    const menuRef = templateRef<ElRef | null>("menu", null);
-
-    const routeStore = usePermissionStoreHook();
-    const route = useRoute();
-    const router = useRouter();
-    const routers = useRouter().options.routes;
-    let usename = storageSession.getItem("info")?.username;
-    const { locale, t } = useI18n();
-
-    watch(
-      () => locale.value,
-      () => {
-        //@ts-ignore
-        // 动态title
-        document.title = t(unref(route.meta.title));
-      }
-    );
-
-    // 退出登录
-    const logout = (): void => {
-      storageSession.removeItem("info");
-      router.push("/login");
-    };
-
-    function onPanel() {
-      emitter.emit("openPanel");
-    }
-
-    const activeMenu = computed(() => {
-      const { meta, path } = route;
-      if (meta.activeMenu) {
-        return meta.activeMenu;
-      }
-      return path;
-    });
-
-    const menuSelect = (indexPath: string): void => {
-      let parentPath = "";
-      let parentPathIndex = indexPath.lastIndexOf("/");
-      if (parentPathIndex > 0) {
-        parentPath = indexPath.slice(0, parentPathIndex);
-      }
-      // 找到当前路由的信息
-      function findCurrentRoute(routes) {
-        return routes.map(item => {
-          if (item.path === indexPath) {
-            // 切换左侧菜单 通知标签页
-            emitter.emit("changLayoutRoute", {
-              indexPath,
-              parentPath
-            });
-          } else {
-            if (item.children) findCurrentRoute(item.children);
-          }
-        });
-      }
-      findCurrentRoute(algorithm.increaseIndexes(routers));
-    };
-
-    function backHome() {
-      router.push("/welcome");
-    }
-
-    function handleResize() {
-      menuRef.value.handleResize();
-    }
-
-    // 简体中文
-    function translationCh() {
-      instance.locale = { locale: "zh" };
-      locale.value = "zh";
-      handleResize();
-    }
-
-    // English
-    function translationEn() {
-      instance.locale = { locale: "en" };
-      locale.value = "en";
-      handleResize();
-    }
-
-    onMounted(() => {
-      nextTick(() => {
-        handleResize();
-      });
-    });
-
-    return {
-      locale,
-      usename,
-      settings,
-      routeStore,
-      activeMenu,
-      logout,
-      onPanel,
-      backHome,
-      menuSelect,
-      translationCh,
-      translationEn,
-      deviceDetection
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .translation {
  .el-dropdown-menu__item {
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -1,3 +1,61 @@
+<script setup lang="ts">
+import Logo from "./logo.vue";
+import { emitter } from "/@/utils/mitt";
+import SidebarItem from "./sidebarItem.vue";
+import { algorithm } from "/@/utils/algorithm";
+import { storageLocal } from "/@/utils/storage";
+import { useRoute, useRouter } from "vue-router";
+import { computed, ref, onBeforeMount } from "vue";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+const route = useRoute();
+const pureApp = useAppStoreHook();
+const router = useRouter().options.routes;
+const routeStore = usePermissionStoreHook();
+const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+const isCollapse = computed(() => {
+  return !pureApp.getSidebarStatus;
+});
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const menuSelect = (indexPath: string): void => {
+  let parentPath = "";
+  let parentPathIndex = indexPath.lastIndexOf("/");
+  if (parentPathIndex > 0) {
+    parentPath = indexPath.slice(0, parentPathIndex);
+  }
+  // 找到当前路由的信息
+  // eslint-disable-next-line no-inner-declarations
+  function findCurrentRoute(routes) {
+    return routes.map(item => {
+      if (item.path === indexPath) {
+        // 切换左侧菜单 通知标签页
+        emitter.emit("changLayoutRoute", {
+          indexPath,
+          parentPath
+        });
+      } else {
+        if (item.children) findCurrentRoute(item.children);
+      }
+    });
+  }
+  findCurrentRoute(algorithm.increaseIndexes(router));
+};
+
+onBeforeMount(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+</script>
+
 <template>
  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
@@ -21,77 +79,3 @@
    </el-scrollbar>
  </div>
 </template>
-
-<script lang="ts">
-import Logo from "./logo.vue";
-import { emitter } from "/@/utils/mitt";
-import SidebarItem from "./sidebarItem.vue";
-import { algorithm } from "/@/utils/algorithm";
-import { storageLocal } from "/@/utils/storage";
-import { useRoute, useRouter } from "vue-router";
-import { useAppStoreHook } from "/@/store/modules/app";
-import { computed, defineComponent, ref, onBeforeMount } from "vue";
-import { usePermissionStoreHook } from "/@/store/modules/permission";
-
-export default defineComponent({
-  name: "sidebar",
-  components: { SidebarItem, Logo },
-  setup() {
-    const routeStore = usePermissionStoreHook();
-
-    const router = useRouter().options.routes;
-
-    const pureApp = useAppStoreHook();
-
-    const route = useRoute();
-
-    const showLogo = ref(storageLocal.getItem("logoVal") || "1");
-
-    const activeMenu = computed(() => {
-      const { meta, path } = route;
-      if (meta.activeMenu) {
-        return meta.activeMenu;
-      }
-      return path;
-    });
-
-    const menuSelect = (indexPath: string): void => {
-      let parentPath = "";
-      let parentPathIndex = indexPath.lastIndexOf("/");
-      if (parentPathIndex > 0) {
-        parentPath = indexPath.slice(0, parentPathIndex);
-      }
-      // 找到当前路由的信息
-      // eslint-disable-next-line no-inner-declarations
-      function findCurrentRoute(routes) {
-        return routes.map(item => {
-          if (item.path === indexPath) {
-            // 切换左侧菜单 通知标签页
-            emitter.emit("changLayoutRoute", {
-              indexPath,
-              parentPath
-            });
-          } else {
-            if (item.children) findCurrentRoute(item.children);
-          }
-        });
-      }
-      findCurrentRoute(algorithm.increaseIndexes(router));
-    };
-
-    onBeforeMount(() => {
-      emitter.on("logoChange", key => {
-        showLogo.value = key;
-      });
-    });
-
-    return {
-      activeMenu,
-      isCollapse: computed(() => !pureApp.getSidebarStatus),
-      menuSelect,
-      showLogo,
-      routeStore
-    };
-  }
-});
-</script>