🎉

web/src/layout/components/lay-sidebar/NavMix.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { isAllEmpty } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+import LaySearch from "../lay-search/index.vue";
+import LayNotice from "../lay-notice/index.vue";
+import { ref, toRaw, watch, onMounted, nextTick } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getParentPaths, findRouteByPath } from "@/router/utils";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
+import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
+
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+
+const menuRef = ref();
+const defaultActive = ref(null);
+
+const {
+  route,
+  device,
+  logout,
+  onPanel,
+  resolvePath,
+  username,
+  userAvatar,
+  getDivStyle,
+  avatarsStyle
+} = useNav();
+
+function getDefaultActive(routePath) {
+  const wholeMenus = usePermissionStoreHook().wholeMenus;
+  /** 当前路由的父级路径 */
+  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
+  defaultActive.value = !isAllEmpty(route.meta?.activePath)
+    ? route.meta.activePath
+    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+});
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    getDefaultActive(route.path);
+  }
+);
+</script>
+
+<template>
+  <div
+    v-if="device !== 'mobile'"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
+    <el-menu
+      ref="menuRef"
+      router
+      mode="horizontal"
+      popper-class="pure-scrollbar"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
+    >
+      <el-menu-item
+        v-for="route in usePermissionStoreHook().wholeMenus"
+        :key="route.path"
+        :index="resolvePath(route) || route.redirect"
+      >
+        <template #title>
+          <div
+            v-if="toRaw(route.meta.icon)"
+            :class="['sub-menu-icon', route.meta.icon]"
+          >
+            <component
+              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
+            />
+          </div>
+          <div :style="getDivStyle">
+            <span class="select-none">
+              {{ route.meta.title }}
+            </span>
+            <LaySidebarExtraIcon :extraIcon="route.meta.extraIcon" />
+          </div>
+        </template>
+      </el-menu-item>
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 菜单搜索 -->
+      <LaySearch id="header-search" />
+      <!-- 全屏 -->
+      <LaySidebarFullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <LayNotice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover select-none">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              退出系统
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        title="打开系统配置"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
+.logout {
+  width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>