feat(components): 增加头部通知点击弹出层

src/App.vue

@@ -2,7 +2,6 @@
 // import { darkTheme } from 'naive-ui';
 import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
 import json from './theme.json';
-// import NativeProvider from '@/components/NativeProvider.vue';
 
 const locale = zhCN;
 const dateLocale = dateZhCN;

src/layouts/BasicLayout/index.vue

@@ -11,10 +11,10 @@
           <Breadcrumb />
         </div>
         <div class="flex-y-center h-full">
+          <Notices />
           <Github />
           <FullScreen />
           <DarkMode />
-          <Notices />
           <Setting />
           <UserCenter />
         </div>
@@ -24,8 +24,8 @@
           <router-view></router-view>
         </n-layout-content>
       </div>
-      <n-layout-footer position="absolute" class="text-center op-80 bg-transparent">
-        {{ appStore.title }}
+      <n-layout-footer position="absolute" bordered class="flex-center bg-white h-40px">
+        {{ appStore.footerText }}
       </n-layout-footer>
     </n-layout>
   </n-layout>

src/layouts/components/header/Notices.vue

@@ -1,4 +1,6 @@
 <template>
+  <n-popover placement="bottom" trigger="click" arrow-point-to-center style="width: 400px">
+    <template #trigger>
       <n-tooltip placement="bottom" trigger="hover">
         <template #trigger>
           <HeaderButton @click="openNotice"><e-icon icon="icon-park-outline:remind" /></HeaderButton>
@@ -6,6 +8,19 @@
         <span>消息通知</span>
       </n-tooltip>
     </template>
+    <n-tabs type="line" animated justify-content="space-evenly">
+      <n-tab-pane name="chap1" tab="通知">
+        我这辈子最疯狂的事，发生在我在 Amazon 当软件工程师的时候，故事是这样的：
+      </n-tab-pane>
+      <n-tab-pane name="chap2" tab="消息">
+        “威尔！着火了！快来帮忙！”我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的 Amazon 服务，还是救公寓的火。
+      </n-tab-pane>
+      <n-tab-pane name="chap3" tab="待办">
+        但是忽然，公寓的烟味消失，火警也停了。我的女朋友走进了房间，让我震惊的是，她摘下了自己的假发，她是 Jeff
+      </n-tab-pane>
+    </n-tabs>
+  </n-popover>
+</template>
 
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';

src/store/modules/app.ts

@@ -7,6 +7,7 @@ export const useAppStore = defineStore('app-store', {
       fullScreen: false,
       darkMode: false,
       title: import.meta.env.VITE_APP_TITLE,
+      footerText: '哲学的基本问题是思维和存在的关系问题',
     };
   },
   actions: {