feat(projects): 头部添加菜单折叠按钮和github地址

src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue

@@ -0,0 +1,14 @@
+<template>
+  <header-item class="w-40px h-full" @click="toggle">
+    <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
+    <icon-gridicons-fullscreen v-else class="text-16px" />
+  </header-item>
+</template>
+
+<script lang="ts" setup>
+import { useFullscreen } from '@vueuse/core';
+import HeaderItem from './HeaderItem.vue';
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue

@@ -0,0 +1,12 @@
+<template>
+  <header-item class="w-40px h-full">
+    <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
+      <icon-mdi-github class="text-20px text-[#666]" />
+    </a>
+  </header-item>
+</template>
+
+<script lang="ts" setup>
+import HeaderItem from './HeaderItem.vue';
+</script>
+<style scoped></style>

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

@@ -0,0 +1,15 @@
+<template>
+  <header-item class="w-40px h-full" @click="toggleMenu">
+    <icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
+    <icon-line-md-menu-fold-left v-else class="text-16px" />
+  </header-item>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+import HeaderItem from './HeaderItem.vue';
+
+const app = useAppStore();
+const { toggleMenu } = useAppStore();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue

@@ -0,0 +1,13 @@
+<template>
+  <header-item class="w-40px h-full" @click="openSettingDrawer">
+    <icon-mdi-light-cog class="text-16px" />
+  </header-item>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+import HeaderItem from './HeaderItem.vue';
+
+const { openSettingDrawer } = useAppStore();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
     <header-item class="px-12px">
-      <n-avatar :src="avatar" :round="true" />
+      <n-avatar :src="avatar" size="small" :round="true" />
       <span class="pl-8px text-16px font-medium">Soybean</span>
     </header-item>
   </n-dropdown>

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

@@ -1,4 +1,8 @@
 import UserAvatar from './UserAvatar.vue';
+import MenuCollapse from './MenuCollapse.vue';
+import FullScreen from './FullScreen.vue';
+import SettingDrawerButton from './SettingDrawerButton.vue';
+import GihubSite from './GihubSite.vue';
 import HeaderItem from './HeaderItem.vue';
 
-export { UserAvatar, HeaderItem };
+export { UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite, HeaderItem };

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -5,15 +5,12 @@
       <div v-if="!theme.isVerticalNav" class="menu-width h-full">
         <global-logo />
       </div>
+      <menu-collapse />
       <div class="flex-1 flex justify-end h-full">
-        <header-item class="w-40px h-full" @click="toggle">
+        <gihub-site />
-          <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
+        <full-screen />
-          <icon-gridicons-fullscreen v-else class="text-16px" />
-        </header-item>
         <user-avatar />
-        <header-item class="w-40px h-full" @click="openSettingDrawer">
+        <setting-drawer-button />
-          <icon-mdi-light-cog class="text-16px" />
-        </header-item>
       </div>
     </div>
   </n-layout-header>
@@ -22,9 +19,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { NLayoutHeader } from 'naive-ui';
-import { useFullscreen } from '@vueuse/core';
+import { useThemeStore } from '@/store';
-import { useAppStore, useThemeStore } from '@/store';
+import { UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } from './components';
-import { UserAvatar, HeaderItem } from './components';
 import { GlobalLogo } from '../common';
 
 defineProps({
@@ -34,9 +30,7 @@ defineProps({
   }
 });
 
-const { openSettingDrawer } = useAppStore();
 const theme = useThemeStore();
-const { isFullscreen, toggle } = useFullscreen();
 
 const inverted = computed(() => {
   return theme.navStyle.theme !== 'light';

src/layouts/BasicLayout/components/GlobalSider/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-sider
-    class="sider-shadow h-full"
+    class="global-sider h-full"
     :style="{ zIndex }"
     :native-scrollbar="false"
     :inverted="inverted"
@@ -46,7 +46,8 @@ const menuWidth = computed(() => {
 });
 </script>
 <style scoped>
-.sider-shadow {
+.global-sider {
+  transition: all 0.2s ease-in-out;
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
 }
 </style>

src/router/routes.ts

@@ -141,6 +141,7 @@ export const customRoutes: CustomRoute[] = [
         component: () => import('@/views/system/exception/403.vue'),
         meta: {
           title: EnumRouteTitle['exception-403'],
+          fullPage: true,
           asMenu: true
         }
       },
@@ -150,6 +151,7 @@ export const customRoutes: CustomRoute[] = [
         component: () => import('@/views/system/exception/404.vue'),
         meta: {
           title: EnumRouteTitle['exception-404'],
+          fullPage: true,
           asMenu: true
         }
       },
@@ -159,7 +161,8 @@ export const customRoutes: CustomRoute[] = [
         component: () => import('@/views/system/exception/500.vue'),
         meta: {
           title: EnumRouteTitle['exception-500'],
-          asMenu: false
+          fullPage: true,
+          asMenu: true
         }
       }
     ]

src/views/dashboard/analysis/index.vue

@@ -2,14 +2,12 @@
   <div class="p-10px">
     <data-card :loading="loading" />
     <nav-card :loading="loading" />
-    <router-link :to="EnumRoutePath['dashboard-workbench']">workbench</router-link>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { DataCard, NavCard } from './components';
-import { EnumRoutePath } from '@/enum';
 
 const loading = ref(true);