add: notification drawer

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/apps/web/src/layouts/NavLayout.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { RouterLink, RouterView, useRouter } from 'vue-router'
-
 import { Nav } from '@cskefu/shared-ui'
 import { ROUTE_NAME } from '@cskefu/models'
 
-import { NSwitch, NIcon, NAlert, NPopselect } from 'naive-ui'
-import { SunnyOutline, Moon, Earth } from '@vicons/ionicons5'
+import {
+  NSwitch,
+  NIcon,
+  NAlert,
+  NPopselect,
+  NDrawer,
+  NDrawerContent,
+  NBadge,
+} from 'naive-ui'
+import {
+  SunnyOutline,
+  Moon,
+  Earth,
+  NotificationsOutline,
+} from '@vicons/ionicons5'
 
 const navigations = [
   { label: '首页', value: ROUTE_NAME.DASHBOARD_INDEX },
@@ -68,6 +80,8 @@ function handleClickNav(name: string) {
   }
   router.push({ name })
 }
+
+const active = ref(false)
 </script>
 <template>
   <div class="flex flex-col h-screen bg-gray-100">
@@ -85,6 +99,14 @@ function handleClickNav(name: string) {
       <RouterLink class="text-sm text-green-600" to="/index">
         使用教程
       </RouterLink>
+      <n-badge :value="99" :max="9" class="text-sm">
+        <n-icon
+          class="flex items-center cursor-pointer"
+          :component="NotificationsOutline"
+          size="25"
+          @click="active = !active"
+        />
+      </n-badge>
       <template #dropMenuAppend>
         <div class="flex justify-between items-center">
           <div class="flex justify-between items-center space-x-2">
@@ -113,8 +135,20 @@ function handleClickNav(name: string) {
         </div>
       </template>
     </Nav>
-    <div class="grow overflow-hidden">
+    <div id="drawer-target" class="grow relative overflow-hidden">
       <router-view></router-view>
     </div>
+    <n-drawer
+      v-model:show="active"
+      :width="502"
+      :height="200"
+      placement="right"
+      :show-mask="false"
+      :trap-focus="false"
+      :block-scroll="false"
+      to="#drawer-target"
+    >
+      <n-drawer-content title="通知中心"> 通知中心列表卡片 </n-drawer-content>
+    </n-drawer>
   </div>
 </template>

contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue

@@ -2,7 +2,15 @@
 import { MenusLayout } from '@cskefu/shared-ui'
 import { MenuOption, NMenu } from 'naive-ui'
 
-const menuOptions: MenuOption[] = []
+import routes from '../routes'
+
+const menuOptions: MenuOption[] = routes[0]?.children?.map((route) => {
+  return {
+    label: route.meta?.title,
+    key: route.name,
+    disabled: route.meta?.disabled,
+  }
+}) as MenuOption[]
 </script>
 <template>
   <MenusLayout>

contact-frontend/packages/modules/services/system/src/routes/index.ts

@@ -14,46 +14,107 @@ const routes: RouteRecordRaw[] = [
         path: 'index',
         name: ROUTE_NAME.SYSTEM_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '系统信息',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
       {
         path: 'social',
         name: ROUTE_NAME.SYSTEM_SOCIAL_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '第三方登录',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
       {
         path: 'oss',
         name: ROUTE_NAME.SYSTEM_OSS_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '对象存储设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
       {
         path: 'cdn',
         name: ROUTE_NAME.SYSTEM_CDN_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: 'CDN 设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
       {
         path: 'sms',
         name: ROUTE_NAME.SYSTEM_SMS_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '短信平台设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+          comingSoon: true,
+          disabled: true,
+        },
       },
       {
         path: 'call',
         name: ROUTE_NAME.SYSTEM_CALL_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '呼叫平台设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+          comingSoon: true,
+          disabled: true,
+        },
       },
       {
         path: 'gpt',
         name: ROUTE_NAME.SYSTEM_GPT_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: 'GPT 设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+          comingSoon: true,
+          disabled: true,
+        },
       },
       {
         path: 'source',
         name: ROUTE_NAME.SYSTEM_SOURCE_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '元数据',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
       {
         path: 'notification',
         name: ROUTE_NAME.SYSTEM_NOTIFICATION_INDEX,
         component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '通知设置',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
+      },
+      {
+        path: 'notification',
+        name: ROUTE_NAME.SYSTEM_LOG_INDEX,
+        component: () => import('../views/HomeView.vue'),
+        meta: {
+          title: '日志查看',
+          isAuth: true,
+          icon: 'el-icon-setting',
+        },
       },
     ],
   },