diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 79c7346..0aa1a00 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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>
diff --git a/src/layouts/components/common/HeaderButton.vue b/src/layouts/components/common/HeaderButton.vue
new file mode 100644
index 0000000..6d00ca4
--- /dev/null
+++ b/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>
diff --git a/src/layouts/components/header/CollapaseButton.vue b/src/layouts/components/header/CollapaseButton.vue
index 21c1258..4eb4798 100644
--- a/src/layouts/components/header/CollapaseButton.vue
+++ b/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>
diff --git a/src/layouts/components/header/DarkMode.vue b/src/layouts/components/header/DarkMode.vue
index 53657b7..ed15acd 100644
--- a/src/layouts/components/header/DarkMode.vue
+++ b/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>
diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue
index 833555b..df9cada 100644
--- a/src/layouts/components/header/FullScreen.vue
+++ b/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>
diff --git a/src/layouts/components/header/Github.vue b/src/layouts/components/header/Github.vue
index 949b483..d1e7aa8 100644
--- a/src/layouts/components/header/Github.vue
+++ b/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');
 };
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
index e797817..617b76b 100644
--- a/src/layouts/components/header/Notices.vue
+++ b/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('消息通知');
 };
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index ee91fbc..fd80e57 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/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 = () => {
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
index efd4ada..d2c6bc1 100644
--- a/src/layouts/components/header/UserCenter.vue
+++ b/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 = [
   {
diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue
index 29b6d88..7c4ccfe 100644
--- a/src/layouts/components/sider/Logo.vue
+++ b/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>
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
index 1354ccd..cf55176 100644
--- a/src/layouts/components/sider/Menu.vue
+++ b/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);
 };
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 87c138d..fbf187d 100644
--- a/src/store/modules/app.ts
+++ b/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,
diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts
index 6be36e0..df667f9 100644
--- a/src/store/modules/auth.ts
+++ b/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: '张三',
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
index 17b64ca..c35e556 100644
--- a/src/store/modules/index.ts
+++ b/src/store/modules/index.ts
@@ -1,2 +1,3 @@
 export * from './user';
 export * from './app';
+export * from './auth';
diff --git a/src/utils/icon.ts b/src/utils/icon.ts
new file mode 100644
index 0000000..eae480b
--- /dev/null
+++ b/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 }) });
+}