From 3ec1fc8f0c23fcba56d4bffb20028948f985659c Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Wed, 15 Sep 2021 08:14:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A4=B4=E9=83=A8=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=8F=9C=E5=8D=95=E6=8A=98=E5=8F=A0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=92=8Cgithub=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GlobalHeader/components/FullScreen.vue     | 14 ++++++++++++++
 .../GlobalHeader/components/GihubSite.vue      | 12 ++++++++++++
 .../GlobalHeader/components/MenuCollapse.vue   | 15 +++++++++++++++
 .../components/SettingDrawerButton.vue         | 13 +++++++++++++
 .../GlobalHeader/components/UserAvatar.vue     |  2 +-
 .../GlobalHeader/components/index.ts           |  6 +++++-
 .../components/GlobalHeader/index.vue          | 18 ++++++------------
 .../components/GlobalSider/index.vue           |  5 +++--
 src/router/routes.ts                           |  5 ++++-
 src/views/dashboard/analysis/index.vue         |  2 --
 10 files changed, 73 insertions(+), 19 deletions(-)
 create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
 create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
 create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
 create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue

diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
new file mode 100644
index 00000000..0d5deaf4
--- /dev/null
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
new file mode 100644
index 00000000..a64a68c7
--- /dev/null
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
new file mode 100644
index 00000000..a72f9c74
--- /dev/null
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
new file mode 100644
index 00000000..6a58efa7
--- /dev/null
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
index 73b5fa81..04d28b35 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
+++ b/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>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
index 9d3b18d0..5937cc97 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
+++ b/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 };
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/index.vue b/src/layouts/BasicLayout/components/GlobalHeader/index.vue
index 5c868935..964ff445 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/index.vue
+++ b/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">
-          <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
-          <icon-gridicons-fullscreen v-else class="text-16px" />
-        </header-item>
+        <gihub-site />
+        <full-screen />
         <user-avatar />
-        <header-item class="w-40px h-full" @click="openSettingDrawer">
-          <icon-mdi-light-cog class="text-16px" />
-        </header-item>
+        <setting-drawer-button />
       </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 { useAppStore, useThemeStore } from '@/store';
-import { UserAvatar, HeaderItem } from './components';
+import { useThemeStore } from '@/store';
+import { UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } 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';
diff --git a/src/layouts/BasicLayout/components/GlobalSider/index.vue b/src/layouts/BasicLayout/components/GlobalSider/index.vue
index 744ac272..d6e34321 100644
--- a/src/layouts/BasicLayout/components/GlobalSider/index.vue
+++ b/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>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index eab8064e..7732fbae 100644
--- a/src/router/routes.ts
+++ b/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
         }
       }
     ]
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index ba8afed0..351a6819 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/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);