feat(components): 增加头部的操作按钮

BREAKING CHANGE:
黑暗模式、全屏、通知、设置、github、用户中心

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>

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(() => {

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" />

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>

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>

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>

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>

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>

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>

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

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[] = [

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;
+    },
   },
 });