refactor(components): 头部的按钮包装层封装，统一样式

src/layouts/BasicLayout/index.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useApp } from '@/store';
+import { useAppStore } from '@/store';
 import {
   Breadcrumb,
   CollapaseButton,
@@ -46,7 +46,7 @@ import {
   UserCenter,
 } from '../components';
 
-const appStore = useApp();
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/layouts/components/common/HeaderButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <n-space align="center" class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer">
+    <slot />
+  </n-space>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/layouts/components/header/CollapaseButton.vue

@@ -1,16 +1,15 @@
 <template>
-  <div
-    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" />
-  </div>
+  <HeaderButton @click="appStore.toggleCollapse()">
+    <e-icon v-if="appStore.collapsed" icon="icon-park-outline:menu-unfold" />
+    <e-icon v-else icon="icon-park-outline:menu-fold" />
+  </HeaderButton>
 </template>
 
 <script setup lang="ts">
-import { useApp } from '@/store';
-const appStore = useApp();
+import { useAppStore } from '@/store';
+import HeaderButton from '../common/HeaderButton.vue';
+
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/layouts/components/header/DarkMode.vue

@@ -1,21 +1,20 @@
 <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>
+      <HeaderButton @click="appStore.toggleDarkMode()">
+        <e-icon v-if="appStore.darkMode" icon="icon-park-outline:moon" />
+        <e-icon v-else icon="icon-park-outline:sun" />
+      </HeaderButton>
     </template>
     <span>切换主题模式</span>
   </n-tooltip>
 </template>
 
 <script setup lang="ts">
-import { useApp } from '@/store';
-const appStore = useApp();
+import { useAppStore } from '@/store';
+import HeaderButton from '../common/HeaderButton.vue';
+
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/layouts/components/header/FullScreen.vue

@@ -1,21 +1,19 @@
 <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>
+      <HeaderButton @click="appStore.toggleFullScreen()">
+        <e-icon v-if="appStore.fullScreen" icon="icon-park-outline:off-screen-two" />
+        <e-icon v-else icon="icon-park-outline:full-screen-two" />
+      </HeaderButton>
     </template>
     <span>全屏</span>
   </n-tooltip>
 </template>
 
 <script setup lang="ts">
-import { useApp } from '@/store';
-const appStore = useApp();
+import HeaderButton from '../common/HeaderButton.vue';
+import { useAppStore } from '@/store';
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/layouts/components/header/Github.vue

@@ -1,15 +1,14 @@
 <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>
+      <HeaderButton @click="toMyGithub"><e-icon icon="icon-park-outline:github" /></HeaderButton>
     </template>
     <span>Github</span>
   </n-tooltip>
 </template>
 
 <script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue';
 const toMyGithub = () => {
   window.open('https://github.com/chen-see');
 };

src/layouts/components/header/Notices.vue

@@ -1,15 +1,14 @@
 <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>
+      <HeaderButton @click="openNotice"><e-icon icon="icon-park-outline:remind" /></HeaderButton>
     </template>
     <span>消息通知</span>
   </n-tooltip>
 </template>
 
 <script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue';
 const openNotice = () => {
   console.log('消息通知');
 };

src/layouts/components/header/Setting.vue

@@ -1,21 +1,24 @@
 <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>
+      <HeaderButton @click="openSetting">
+        <div>
+          <e-icon icon="icon-park-outline:setting-two" />
+          <n-drawer v-model:show="drawerActive" :width="300">
+            <n-drawer-content title="系统设置">这是系统设置，但是暂时还没有内容</n-drawer-content>
+          </n-drawer>
+        </div>
+      </HeaderButton>
     </template>
     <span>设置</span>
   </n-tooltip>
 </template>
 
 <script setup lang="ts">
-// import { useApp } from '@/store';
+import HeaderButton from '../common/HeaderButton.vue';
+// import { useAppStore } from '@/store';
 import { ref } from 'vue';
-// const appStore = useApp();
+// const appStore = useAppStore();
 
 const drawerActive = ref(false);
 const openSetting = () => {

src/layouts/components/header/UserCenter.vue

@@ -1,16 +1,18 @@
 <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>
+    <HeaderButton>
+      <n-avatar size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
+      {{ authStore.name }}
+    </HeaderButton>
   </n-dropdown>
 </template>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { h } from 'vue';
+import HeaderButton from '../common/HeaderButton.vue';
+import { renderIcon } from '@/utils/icon';
+import { useAuthStore } from '@/store';
 
-function renderIcon(icon: string) {
-  return () => h(Icon, { icon });
-}
+const authStore = useAuthStore();
 
 const options = [
   {

src/layouts/components/sider/Logo.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script setup lang="ts">
-import { useApp } from '@/store';
-const appStore = useApp();
+import { useAppStore } from '@/store';
+const appStore = useAppStore();
 </script>
 
 <style scoped></style>

src/layouts/components/sider/Menu.vue

@@ -10,19 +10,14 @@
 </template>
 
 <script setup lang="ts">
-import { useApp } from '@/store';
-import { Icon } from '@iconify/vue';
+import { useAppStore } from '@/store';
 import { useRouter } from 'vue-router';
-import { h } from 'vue';
 import type { MenuOption } from 'naive-ui';
+import { renderIcon } from '@/utils/icon';
 
-const appStore = useApp();
+const appStore = useAppStore();
 const router = useRouter();
 
-function renderIcon(icon: string) {
-  return () => h(Icon, { icon });
-}
-
 const handleClickMenu = (key: string) => {
   router.push(key);
 };

src/store/modules/app.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-export const useApp = defineStore('app-store', {
+export const useAppStore = defineStore('app-store', {
   state: () => {
     return {
       collapsed: false,

src/store/modules/auth.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-export const useAuth = defineStore('auth-store', {
+export const useAuthStore = defineStore('auth-store', {
   state: () => {
     return {
       name: '张三',

src/store/modules/index.ts

@@ -1,2 +1,3 @@
 export * from './user';
 export * from './app';
+export * from './auth';

src/utils/icon.ts

@@ -0,0 +1,7 @@
+import { h } from 'vue';
+import { Icon } from '@iconify/vue';
+import { NIcon } from 'naive-ui';
+
+export function renderIcon(icon: string) {
+  return () => h(NIcon, null, { default: () => h(Icon, { icon }) });
+}