fix: router permission

src/directives/copy.ts

@@ -10,12 +10,12 @@ export function setupCopy(app: App) {
 
   function clipboardEnable() {
     if (!isSupported.value) {
-      window.$message?.error('Your browser does not support Clipboard API')
+      window.$message.error('Your browser does not support Clipboard API')
       return false
     }
 
     if (permissionWrite.value !== 'granted') {
-      window.$message?.error('Currently not permitted to use Clipboard API')
+      window.$message.error('Currently not permitted to use Clipboard API')
       return false
     }
     return true
@@ -25,7 +25,7 @@ export function setupCopy(app: App) {
     if (!clipboardEnable())
       return
     copy(this._copyText)
-    window.$message?.success('复制成功')
+    window.$message.success('复制成功')
   }
 
   function updataClipboard(el: CopyHTMLElement, text: string) {

src/layouts/components/common/NoticeList.vue

@@ -8,15 +8,12 @@ const emit = defineEmits<Emits>()
 interface Emits {
   (e: 'read', val: number): void
 }
-function handleRead(index: number) {
-  emit('read', index)
-}
 </script>
 
 <template>
   <n-scrollbar style="height: 400px">
     <n-list hoverable clickable>
-      <n-list-item v-for="(item, index) in props.list" :key="item.id" @click="handleRead(index)">
+      <n-list-item v-for="(item) in props.list" :key="item.id" @click="emit('read', item.id)">
         <n-thing content-indented :class="{ 'opacity-30': item.isRead }">
           <template #header>
             <n-ellipsis :line-clamp="1">

src/layouts/components/header/Notices.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
+import { group } from 'radash'
 import HeaderButton from '../common/HeaderButton.vue'
 import NoticeList from '../common/NoticeList.vue'
 
-const MassageData = ref<Message.Tab[]>([
-  {
-    key: 0,
-    name: '通知',
-    badgeProps: { type: 'warning' },
-    list: [
+const MassageData = ref<Message.List[]>([
   {
     id: 0,
+    type: 0,
     title: 'Admin 已经完成40%了！',
     icon: 'icon-park-outline:tips-one',
     tagTitle: '未开始',
@@ -19,6 +16,7 @@ const MassageData = ref<Message.Tab[]>([
   },
   {
     id: 1,
+    type: 0,
     title: 'Admin 已经添加通知功能！',
     icon: 'icon-park-outline:comment-one',
     tagTitle: '未开始',
@@ -27,6 +25,7 @@ const MassageData = ref<Message.Tab[]>([
   },
   {
     id: 2,
+    type: 0,
     title: 'Admin 已经添加路由功能！',
     icon: 'icon-park-outline:message-emoji',
     tagTitle: '未开始',
@@ -36,6 +35,7 @@ const MassageData = ref<Message.Tab[]>([
   },
   {
     id: 3,
+    type: 0,
     title:
           'Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！',
     icon: 'icon-park-outline:tips-one',
@@ -47,59 +47,52 @@ const MassageData = ref<Message.Tab[]>([
   },
   {
     id: 4,
+    type: 0,
     title: 'Admin开始启动了！',
     icon: 'icon-park-outline:tips-one',
     tagTitle: '未开始',
     description: '项目稳定推进中...',
     date: '2022-2-5 18:32',
   },
-    ],
-  },
   {
-    key: 1,
-    name: '消息',
-    badgeProps: { type: 'info' },
-    list: [
-      {
-        id: 0,
+    id: 5,
+    type: 1,
     title: '相见恨晚??',
     icon: 'icon-park-outline:comment',
     description: '项目稳定推进中，很快就能看到正式版了',
     date: '2022-2-2 12:22',
   },
   {
-        id: 1,
+    id: 6,
+    type: 1,
     title: '动态路由已完成！',
     icon: 'icon-park-outline:comment',
     description: '项目稳定推进中，很快就能看到正式版了',
     date: '2022-2-25 12:22',
   },
-    ],
-  },
   {
-    key: 2,
-    name: '待办',
-    badgeProps: { type: 'error' },
-    list: [
-      {
-        id: 0,
+    id: 7,
+    type: 2,
     title: '接下来需要完善一些',
     icon: 'icon-park-outline:beach-umbrella',
     tagTitle: '未开始',
     description: '项目稳定推进中，很快就能看到正式版了',
     date: '2022-2-2 12:22',
   },
-    ],
-  },
 ])
 const currentTab = ref(0)
-function handleRead(index: number) {
-  MassageData.value[currentTab.value].list[index].isRead = true
+function handleRead(id: number) {
+  // MassageData.value[currentTab.value].list[index].isRead = true
+  const data = MassageData.value.find(i => i.id === id)
+  if (data)
+    data.isRead = true
+  window.$message.success(`已读id: ${id}`)
 }
 const massageCount = computed(() => {
-  return MassageData.value.reduce((pre, cur) => {
-    return pre + cur.list.filter(item => !item.isRead).length
-  }, 0)
+  return MassageData.value.filter(i => !i.isRead).length
+})
+const groupMessage = computed(() => {
+  return group(MassageData.value, i => i.type)
 })
 </script>
 
@@ -118,14 +111,32 @@ const massageCount = computed(() => {
       </n-tooltip>
     </template>
     <n-tabs v-model:value="currentTab" type="line" animated justify-content="space-evenly" class="w-390px">
-      <n-tab-pane v-for="item in MassageData" :key="item.key" :name="item.key">
+      <n-tab-pane :name="0">
         <template #tab>
           <n-space class="w-130px" justify="center">
-            {{ item.name }}
-            <n-badge v-bind="item.badgeProps" :value="item.list.filter((item) => !item.isRead).length" :max="99" />
+            通知
+            <n-badge type="info" :value="groupMessage[0]?.filter(i => !i.isRead).length" :max="99" />
           </n-space>
         </template>
-        <NoticeList :list="item.list" @read="handleRead" />
+        <NoticeList :list="groupMessage[0]" @read="handleRead" />
+      </n-tab-pane>
+      <n-tab-pane :name="1">
+        <template #tab>
+          <n-space class="w-130px" justify="center">
+            消息
+            <n-badge type="warning" :value="groupMessage[1]?.filter(i => !i.isRead).length" :max="99" />
+          </n-space>
+        </template>
+        <NoticeList :list="groupMessage[1]" @read="handleRead" />
+      </n-tab-pane>
+      <n-tab-pane :name="2">
+        <template #tab>
+          <n-space class="w-130px" justify="center">
+            待办
+            <n-badge type="error" :value="groupMessage[2]?.filter(i => !i.isRead).length" :max="99" />
+          </n-space>
+        </template>
+        <NoticeList :list="groupMessage[2]" @read="handleRead" />
       </n-tab-pane>
     </n-tabs>
   </n-popover>

src/layouts/components/header/Search.vue

@@ -2,7 +2,7 @@
 import HeaderButton from '../common/HeaderButton.vue'
 
 function handleSearch() {
-  window.$message?.success('施工中...')
+  window.$message.success('施工中...')
 }
 </script>
 

src/router/guard/permission.ts

@@ -38,7 +38,8 @@ export async function createPermissionGuard(
   }
 
   // 权限路由已经加载，仍然未找到，重定向到404
-  if (to.name === '404') {
+  // 若是从404再次跳转，则跳过判断
+  if (to.name === '404' && to?.redirectedFrom?.name !== '404') {
     next({ name: '404', replace: true })
     return false
   }

src/service/http/utils.ts

@@ -6,5 +6,5 @@ export function showError(error: Service.RequestError) {
   if (ERROR_NO_TIP_STATUS.includes(code))
     return
 
-  window.$message?.error(error.msg)
+  window.$message.error(error.msg)
 }

src/typings/business.d.ts

@@ -18,14 +18,9 @@ declare namespace Auth {
 }
 /* 系统消息 */
 declare namespace Message {
-  interface Tab {
-    key: number
-    name: string
-    badgeProps?: import('naive-ui').BadgeProps
-    list: List[]
-  }
   interface List {
     id: number
+    type: 0 | 1 | 2
     title: string
     icon: string
     tagTitle?: string

src/typings/global.d.ts

@@ -1,25 +1,24 @@
 interface Window {
-  $loadingBar?: import('naive-ui').LoadingBarApi
-  $dialog?: import('naive-ui').DialogApi
-  $message?: import('naive-ui').MessageApi
-  $notification?: import('naive-ui').NotificationApi
+  $loadingBar: import('naive-ui').LoadingBarApi
+  $dialog: import('naive-ui').DialogApi
+  $message: import('naive-ui').MessageApi
+  $notification: import('naive-ui').NotificationApi
 }
 
 declare const AMap: any
 declare const BMap: any
 
-interface GolbalConfig {
-  app: {
-    proxyUrl: Record<ServiceEnvType, ServiceEnvConfig>
-  }
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent
+  export default component
 }
+
 declare namespace NaiveUI {
   type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning'
 }
-declare namespace UnionKey {
-  /* http请求头content-type类型 */
-  type ContentType = 'application/json' | 'application/x-www-form-urlencoded' | 'multipart/form-data'
-}
+
 declare namespace Storage {
   interface Session {
     demoKey: string

src/typings/shims-vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-
-  const component: DefineComponent
-  export default component
-}

src/views/list/commonList/index.vue

@@ -19,7 +19,7 @@ const model = ref({ ...initialModel })
 
 const formRef = ref<FormInst | null>()
 function sendMail(id: number) {
-  window.$message?.success(`删除用户id:${id}`)
+  window.$message.success(`删除用户id:${id}`)
 }
 const columns: DataTableColumns = [
   {
@@ -137,7 +137,7 @@ async function getUserList() {
   })
 }
 function changePage(page: number, size: number) {
-  window.$message?.success(`分页器:${page},${size}`)
+  window.$message.success(`分页器:${page},${size}`)
 }
 function handleResetSearch() {
   model.value = { ...initialModel }

src/views/test/test3/test4/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 function testMsg() {
-  window.$message?.error('Once upon a time you dressed so fine')
+  window.$message.error('Once upon a time you dressed so fine')
 }
 </script>
 

src/views/userCenter/index.vue

@@ -35,8 +35,8 @@ const rules = {
 function handleValidateClick() {
   formRef.value?.validate((errors: any) => {
     if (!errors)
-      window.$message?.success('验证通过')
-    else window.$message?.error('验证不通过')
+      window.$message.success('验证通过')
+    else window.$message.error('验证不通过')
   })
 }
 </script>