refactor(components): blankLayout引入GlobalContent

src/layouts/common/VerticalMixSider/components/MixMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
+    <div
+      class="flex-center flex-col py-12px rounded-2px"
+      :class="{ 'text-primary bg-primary-active': isActive, 'text-primary': isHover }"
+    >
+      <component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
+      <p
+        class="pt-8px text-12px overflow-hidden transition-height duration-200 ease-in-out"
+        :class="[isMini ? 'h-0 pt-0' : 'h-20px pt-8px']"
+      >
+        {{ label }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VNodeChild } from 'vue';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 路由名称 */
+  routeName: string;
+  /** 路由名称文本 */
+  label: string;
+  /** 路由图标 */
+  icon: VNodeChild;
+  /** 当前激活状态的理由名称 */
+  activeRouteName: string;
+  /** mini尺寸的路由 */
+  isMini?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMini: false
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+const isActive = computed(() => props.routeName === props.activeRouteName);
+</script>
+<style scoped></style>

src/layouts/common/VerticalMixSider/components/MixMenuCollapse.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex-center h-36px text-[#333639] dark:text-[#ffffffd1] cursor-pointer" @click="toggleMenu">
+    <icon-ph-caret-double-right-bold v-if="app.menu.collapsed" class="text-16px" />
+    <icon-ph-caret-double-left-bold v-else class="text-16px" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { toggleMenu } = useAppStore();
+</script>
+<style scoped></style>

src/layouts/common/VerticalMixSider/components/MixMenuDrawer.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="
+      drawer-shadow
+      absolute-lt
+      flex-col-stretch
+      h-full
+      overflow-hidden
+      bg-white
+      dark:bg-dark
+      transition-width
+      duration-300
+      ease-in-out
+    "
+    :style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
+  >
+    <header class="header-height flex-y-center justify-between">
+      <h2 class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
+      <div class="px-8px text-16px text-gray-600 cursor-pointer" @click="toggleFixedMixMenu">
+        <icon-mdi-pin-off v-if="app.menu.fixedMix" />
+        <icon-mdi-pin v-else />
+      </div>
+    </header>
+    <div class="flex-1-hidden">
+      <n-scrollbar>
+        <n-menu :value="activeKey" :options="childMenus" :indent="18" @update:value="handleUpdateMenu" />
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { NScrollbar, NMenu } from 'naive-ui';
+import type { MenuOption } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { useAppTitle } from '@/composables';
+import { menus } from '@/router';
+import type { GlobalMenuOption } from '@/interface';
+
+interface Props {
+  /** 菜单抽屉可见性 */
+  visible?: boolean;
+  /** 激活状态的路由名称 */
+  activeRouteName: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+});
+
+const router = useRouter();
+const route = useRoute();
+const theme = useThemeStore();
+const app = useAppStore();
+const { toggleFixedMixMenu } = useAppStore();
+const title = useAppTitle();
+
+const childMenus = computed(() => {
+  const children: MenuOption[] = [];
+  menus.some(item => {
+    const flag = item.routeName === props.activeRouteName && Boolean(item.children?.length);
+    if (flag) {
+      children.push(...item.children!);
+    }
+    return flag;
+  });
+  return children;
+});
+
+const showDrawer = computed(() => (props.visible && childMenus.value.length) || app.menu.fixedMix);
+
+const activeKey = computed(() => route.name as string);
+
+function handleUpdateMenu(key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  router.push(menuItem.routePath);
+}
+
+const headerHeight = computed(() => {
+  const { height } = theme.headerStyle;
+  return `${height}px`;
+});
+</script>
+<style scoped>
+.drawer-shadow {
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+.header-height {
+  height: v-bind(headerHeight);
+}
+</style>

src/layouts/common/VerticalMixSider/components/index.ts

@@ -0,0 +1,5 @@
+import MixMenu from './MixMenu.vue';
+import MixMenuCollapse from './MixMenuCollapse.vue';
+import MixMenuDrawer from './MixMenuDrawer.vue';
+
+export { MixMenu, MixMenuCollapse, MixMenuDrawer };