From 04cea2907dda0f4d9917160d7bbb738dff7ff2c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Thu, 11 Aug 2022 22:45:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E5=A2=9E=E5=8A=A0=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E7=9A=84=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE:
黑暗模式、全屏、通知、设置、github、用户中心
---
 src/layouts/BasicLayout/index.vue             | 33 ++++++++++++++---
 .../components/{ => header}/Breadcrumb.vue    |  3 +-
 .../{ => header}/CollapaseButton.vue          |  4 +-
 src/layouts/components/header/DarkMode.vue    | 21 +++++++++++
 src/layouts/components/header/FullScreen.vue  | 21 +++++++++++
 src/layouts/components/header/Github.vue      | 18 +++++++++
 src/layouts/components/header/Notices.vue     | 18 +++++++++
 src/layouts/components/header/Setting.vue     | 26 +++++++++++++
 src/layouts/components/header/UserCenter.vue  | 37 +++++++++++++++++++
 src/layouts/components/index.ts               | 19 +++++++---
 src/layouts/components/{ => sider}/Logo.vue   |  0
 src/layouts/components/{ => sider}/Menu.vue   |  2 +-
 src/store/modules/app.ts                      | 19 +++++++++-
 13 files changed, 205 insertions(+), 16 deletions(-)
 rename src/layouts/components/{ => header}/Breadcrumb.vue (92%)
 rename src/layouts/components/{ => header}/CollapaseButton.vue (77%)
 create mode 100644 src/layouts/components/header/DarkMode.vue
 create mode 100644 src/layouts/components/header/FullScreen.vue
 create mode 100644 src/layouts/components/header/Github.vue
 create mode 100644 src/layouts/components/header/Notices.vue
 create mode 100644 src/layouts/components/header/Setting.vue
 create mode 100644 src/layouts/components/header/UserCenter.vue
 rename src/layouts/components/{ => sider}/Logo.vue (100%)
 rename src/layouts/components/{ => sider}/Menu.vue (96%)

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 0267e79..79c7346 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -5,23 +5,46 @@
       <Menu />
     </n-layout-sider>
     <n-layout class="h-full bg-hex-f3f4f6" :native-scrollbar="false">
-      <n-layout-header bordered class="h-60px flex-y-center">
-        <CollapaseButton />
-        <Breadcrumb />
+      <n-layout-header bordered class="h-60px flex-y-center justify-between">
+        <div class="flex-y-center h-full">
+          <CollapaseButton />
+          <Breadcrumb />
+        </div>
+        <div class="flex-y-center h-full">
+          <Github />
+          <FullScreen />
+          <DarkMode />
+          <Notices />
+          <Setting />
+          <UserCenter />
+        </div>
       </n-layout-header>
       <div class="p-16px">
         <n-layout-content>
           <router-view></router-view>
         </n-layout-content>
       </div>
-      <n-layout-footer position="absolute" class="text-center op-80 bg-transparent">Ench admin</n-layout-footer>
+      <n-layout-footer position="absolute" class="text-center op-80 bg-transparent">
+        {{ appStore.title }}
+      </n-layout-footer>
     </n-layout>
   </n-layout>
 </template>
 
 <script lang="ts" setup>
 import { useApp } from '@/store';
-import { Breadcrumb, CollapaseButton, Menu, Logo } from '../components';
+import {
+  Breadcrumb,
+  CollapaseButton,
+  Menu,
+  Logo,
+  FullScreen,
+  DarkMode,
+  Setting,
+  Github,
+  Notices,
+  UserCenter,
+} from '../components';
 
 const appStore = useApp();
 </script>
diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
similarity index 92%
rename from src/layouts/components/Breadcrumb.vue
rename to src/layouts/components/header/Breadcrumb.vue
index f2c2933..fa16463 100644
--- a/src/layouts/components/Breadcrumb.vue
+++ b/src/layouts/components/header/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-breadcrumb>
+  <n-breadcrumb class="px-5">
     <n-breadcrumb-item class="align-middle">
       <e-icon icon="icon-park-outline:home-two" />
       首页
@@ -14,7 +14,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { Icon } from '@iconify/vue';
 
 const router = useRouter();
 const routes = computed(() => {
diff --git a/src/layouts/components/CollapaseButton.vue b/src/layouts/components/header/CollapaseButton.vue
similarity index 77%
rename from src/layouts/components/CollapaseButton.vue
rename to src/layouts/components/header/CollapaseButton.vue
index 9fa9425..21c1258 100644
--- a/src/layouts/components/CollapaseButton.vue
+++ b/src/layouts/components/header/CollapaseButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-2 flex-center cursor-pointer"
-    @click="appStore.switchCollapse()"
+    class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer"
+    @click="appStore.toggleCollapse()"
   >
     <e-icon v-show="appStore.collapsed" icon="icon-park-outline:menu-unfold" />
     <e-icon v-show="!appStore.collapsed" icon="icon-park-outline:menu-fold" />
diff --git a/src/layouts/components/header/DarkMode.vue b/src/layouts/components/header/DarkMode.vue
new file mode 100644
index 0000000..53657b7
--- /dev/null
+++ b/src/layouts/components/header/DarkMode.vue
@@ -0,0 +1,21 @@
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <div
+        class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer"
+        @click="appStore.toggleDarkMode()"
+      >
+        <e-icon v-show="appStore.darkMode" icon="icon-park-outline:moon" />
+        <e-icon v-show="!appStore.darkMode" icon="icon-park-outline:sun" />
+      </div>
+    </template>
+    <span>切换主题模式</span>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { useApp } from '@/store';
+const appStore = useApp();
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
new file mode 100644
index 0000000..833555b
--- /dev/null
+++ b/src/layouts/components/header/FullScreen.vue
@@ -0,0 +1,21 @@
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <div
+        class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer"
+        @click="appStore.toggleFullScreen()"
+      >
+        <e-icon v-show="appStore.fullScreen" icon="icon-park-outline:off-screen-two" />
+        <e-icon v-show="!appStore.fullScreen" icon="icon-park-outline:full-screen-two" />
+      </div>
+    </template>
+    <span>全屏</span>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { useApp } from '@/store';
+const appStore = useApp();
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/header/Github.vue b/src/layouts/components/header/Github.vue
new file mode 100644
index 0000000..949b483
--- /dev/null
+++ b/src/layouts/components/header/Github.vue
@@ -0,0 +1,18 @@
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer" @click="toMyGithub">
+        <e-icon icon="icon-park-outline:github" />
+      </div>
+    </template>
+    <span>Github</span>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+const toMyGithub = () => {
+  window.open('https://github.com/chen-see');
+};
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
new file mode 100644
index 0000000..e797817
--- /dev/null
+++ b/src/layouts/components/header/Notices.vue
@@ -0,0 +1,18 @@
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer" @click="openNotice">
+        <e-icon icon="icon-park-outline:remind" />
+      </div>
+    </template>
+    <span>消息通知</span>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+const openNotice = () => {
+  console.log('消息通知');
+};
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
new file mode 100644
index 0000000..ee91fbc
--- /dev/null
+++ b/src/layouts/components/header/Setting.vue
@@ -0,0 +1,26 @@
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer" @click="openSetting">
+        <e-icon icon="icon-park-outline:setting-two" />
+        <n-drawer v-model:show="drawerActive" :width="400">
+          <n-drawer-content title="系统设置">这是系统设置，但是暂时还没有内容</n-drawer-content>
+        </n-drawer>
+      </div>
+    </template>
+    <span>设置</span>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+// import { useApp } from '@/store';
+import { ref } from 'vue';
+// const appStore = useApp();
+
+const drawerActive = ref(false);
+const openSetting = () => {
+  drawerActive.value = !drawerActive.value;
+};
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
new file mode 100644
index 0000000..efd4ada
--- /dev/null
+++ b/src/layouts/components/header/UserCenter.vue
@@ -0,0 +1,37 @@
+<template>
+  <n-dropdown trigger="hover" :options="options" @select="handleSelect">
+    <div class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-4 flex-center cursor-pointer">Admin chen</div>
+  </n-dropdown>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { h } from 'vue';
+
+function renderIcon(icon: string) {
+  return () => h(Icon, { icon });
+}
+
+const options = [
+  {
+    label: '个人中心',
+    key: 'personal center',
+    icon: renderIcon('icon-park-outline:grinning-face'),
+  },
+  {
+    type: 'divider',
+    key: 'd1',
+  },
+  {
+    label: '退出登录',
+    key: 'login out',
+    icon: renderIcon('icon-park-outline:logout'),
+  },
+];
+const handleSelect = (key: string | number) => {
+  console.log('%c [key]-32', 'font-size:13px; background:pink; color:#bf2c9f;', key);
+  // message.info(String(key));
+};
+</script>
+
+<style scoped></style>
diff --git a/src/layouts/components/index.ts b/src/layouts/components/index.ts
index 7ff9802..48624a7 100644
--- a/src/layouts/components/index.ts
+++ b/src/layouts/components/index.ts
@@ -1,6 +1,15 @@
-import Breadcrumb from './Breadcrumb.vue';
-import CollapaseButton from './CollapaseButton.vue';
-import Logo from './Logo.vue';
-import Menu from './Menu.vue';
+/* 侧边栏组件 */
+import Logo from './sider/Logo.vue';
+import Menu from './sider/Menu.vue';
 
-export { Breadcrumb, CollapaseButton, Menu, Logo };
+/* 头部栏组件 */
+import Breadcrumb from './header/Breadcrumb.vue';
+import CollapaseButton from './header/CollapaseButton.vue';
+import FullScreen from './header/FullScreen.vue';
+import DarkMode from './header/DarkMode.vue';
+import Setting from './header/Setting.vue';
+import Github from './header/Github.vue';
+import Notices from './header/Notices.vue';
+import UserCenter from './header/UserCenter.vue';
+
+export { Breadcrumb, CollapaseButton, Menu, Logo, FullScreen, DarkMode, Setting, Github, Notices, UserCenter };
diff --git a/src/layouts/components/Logo.vue b/src/layouts/components/sider/Logo.vue
similarity index 100%
rename from src/layouts/components/Logo.vue
rename to src/layouts/components/sider/Logo.vue
diff --git a/src/layouts/components/Menu.vue b/src/layouts/components/sider/Menu.vue
similarity index 96%
rename from src/layouts/components/Menu.vue
rename to src/layouts/components/sider/Menu.vue
index 9941399..1354ccd 100644
--- a/src/layouts/components/Menu.vue
+++ b/src/layouts/components/sider/Menu.vue
@@ -23,7 +23,7 @@ function renderIcon(icon: string) {
   return () => h(Icon, { icon });
 }
 
-const handleClickMenu = (key: string, _item: MenuOption) => {
+const handleClickMenu = (key: string) => {
   router.push(key);
 };
 const menuOptions: MenuOption[] = [
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 07a53a9..87c138d 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -4,12 +4,29 @@ export const useApp = defineStore('app-store', {
   state: () => {
     return {
       collapsed: false,
+      fullScreen: false,
+      darkMode: false,
       title: import.meta.env.VITE_APP_TITLE,
     };
   },
   actions: {
-    switchCollapse() {
+    /* 切换侧边栏收缩 */
+    toggleCollapse() {
       this.collapsed = !this.collapsed;
     },
+    /* 切换全屏 */
+    toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        this.fullScreen = true;
+        document.documentElement.requestFullscreen();
+      } else if (document.exitFullscreen) {
+        this.fullScreen = false;
+        document.exitFullscreen();
+      }
+    },
+    /* 切换主题 亮/深色 */
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode;
+    },
   },
 });