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

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 };