feat(projects): 添加头部折叠按钮

src/layouts/BasicLayout/index.vue

@@ -8,11 +8,11 @@
     :sider-visible="siderVisible"
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"
-    :sider-collapse="false"
+    :sider-collapse="app.siderCollapse"
     :fixed-footer="theme.footer.fixed"
   >
     <template #header>
-      <global-header />
+      <global-header v-bind="headerProps" />
     </template>
     <template #tab>
       <global-tab />
@@ -29,41 +29,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useAppStore, useThemeStore } from '@/store';
+import { useBasicLayout } from '@/composables';
 import { SoybeanLayout } from '@/package';
 import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
 
 const app = useAppStore();
 const theme = useThemeStore();
 
-const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
-
-type LayoutMode = 'vertical' | 'horizontal';
-const mode = computed(() => {
-  const vertical: LayoutMode = 'vertical';
-  const horizontal: LayoutMode = 'horizontal';
-  return theme.layout.mode.includes(vertical) ? vertical : horizontal;
-});
-
-const siderWidth = computed(() => {
-  const { width, mixWidth, mixChildMenuWidth } = theme.sider;
-  const isVerticalMix = theme.layout.mode === 'vertical-mix';
-  let w = isVerticalMix ? mixWidth : width;
-  if (isVerticalMix && app.mixSiderFixed) {
-    w += mixChildMenuWidth;
-  }
-  return w;
-});
-
-const siderCollapsedWidth = computed(() => {
-  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
-  const isVerticalMix = theme.layout.mode === 'vertical-mix';
-  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
-  if (isVerticalMix && app.mixSiderFixed) {
-    w += mixChildMenuWidth;
-  }
-  return w;
-});
+const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/MenuCollapse.vue

@@ -0,0 +1,14 @@
+<template>
+  <hover-container class="w-40px h-full" @click="app.toggleSiderCollapse">
+    <icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" />
+    <icon-line-md-menu-fold-left v-else class="text-16px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+</script>
+<style scoped></style>

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

@@ -0,0 +1,3 @@
+import MenuCollapse from './MenuCollapse.vue';
+
+export { MenuCollapse };

src/layouts/common/GlobalHeader/index.vue

@@ -1,9 +1,32 @@
 <template>
-  <dark-mode-container class="global-header flex-y-center h-full"></dark-mode-container>
+  <dark-mode-container class="global-header flex-y-center h-full">
+    <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
+    <div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
+      <menu-collapse v-if="showMenuCollape" />
+      <!-- <global-breadcrumb v-if="theme.header.crumb.visible" /> -->
+    </div>
+  </dark-mode-container>
 </template>
 
 <script setup lang="ts">
 import { DarkModeContainer } from '@/components';
+import { useThemeStore } from '@/store';
+import type { GlobalHeaderProps } from '@/interface';
+import GlobalLogo from '../GlobalLogo/index.vue';
+import { MenuCollapse } from './components';
+
+interface Props {
+  /** 显示logo */
+  showLogo: GlobalHeaderProps['showLogo'];
+  /** 显示头部菜单 */
+  showHeaderMenu: GlobalHeaderProps['showHeaderMenu'];
+  /** 显示菜单折叠按钮 */
+  showMenuCollape: GlobalHeaderProps['showMenuCollape'];
+}
+
+defineProps<Props>();
+
+const theme = useThemeStore();
 </script>
 <style scoped>
 .global-header {

src/layouts/common/GlobalLogo/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
+    <system-logo class="w-32px h-32px text-primary" />
+    <h2 v-if="showTitle" class="pl-8px text-16px font-bold text-primary">{{ title }}</h2>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { SystemLogo } from '@/components';
+import { routePath } from '@/router';
+import { useAppInfo } from '@/composables';
+
+interface Props {
+  /** 显示名字 */
+  showTitle: boolean;
+}
+
+defineProps<Props>();
+
+const { title } = useAppInfo();
+const routeHomePath = routePath('root');
+</script>
+<style scoped></style>

src/layouts/common/index.ts

@@ -4,5 +4,6 @@ import GlobalTab from './GlobalTab/index.vue';
 import GlobalSider from './GlobalSider/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
 import GlobalFooter from './GlobalFooter/index.vue';
+import GlobalLogo from './GlobalLogo/index.vue';
 
-export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter };
+export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter, GlobalLogo };