From 1a2635af58f50c27a24cf45d5fa4d1fb46c3cfb5 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sat, 16 Mar 2024 20:33:46 +0800
Subject: [PATCH] fix: router permission

---
 src/directives/copy.ts                       |   6 +-
 src/layouts/components/common/NoticeList.vue |   5 +-
 src/layouts/components/header/Notices.vue    | 191 ++++++++++---------
 src/layouts/components/header/Search.vue     |   2 +-
 src/router/guard/permission.ts               |   3 +-
 src/service/http/utils.ts                    |   2 +-
 src/typings/business.d.ts                    |   7 +-
 src/typings/global.d.ts                      |  23 ++-
 src/typings/shims-vue.d.ts                   |   6 -
 src/views/list/commonList/index.vue          |   4 +-
 src/views/test/test3/test4/index.vue         |   2 +-
 src/views/userCenter/index.vue               |   4 +-
 12 files changed, 126 insertions(+), 129 deletions(-)
 delete mode 100644 src/typings/shims-vue.d.ts

diff --git a/src/directives/copy.ts b/src/directives/copy.ts
index 97769ab..6200cbc 100644
--- a/src/directives/copy.ts
+++ b/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) {
diff --git a/src/layouts/components/common/NoticeList.vue b/src/layouts/components/common/NoticeList.vue
index fa2183c..7da96a6 100644
--- a/src/layouts/components/common/NoticeList.vue
+++ b/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">
diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue
index 91edfe9..dab62c3 100644
--- a/src/layouts/components/header/Notices.vue
+++ b/src/layouts/components/header/Notices.vue
@@ -1,105 +1,98 @@
 <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[]>([
+const MassageData = ref<Message.List[]>([
   {
-    key: 0,
-    name: '通知',
-    badgeProps: { type: 'warning' },
-    list: [
-      {
-        id: 0,
-        title: 'Admin 已经完成40%了！',
-        icon: 'icon-park-outline:tips-one',
-        tagTitle: '未开始',
-        tagType: 'info',
-        description: '项目稳定推进中，很快就能看到正式版了',
-        date: '2022-2-2 12:22',
-      },
-      {
-        id: 1,
-        title: 'Admin 已经添加通知功能！',
-        icon: 'icon-park-outline:comment-one',
-        tagTitle: '未开始',
-        tagType: 'success',
-        date: '2022-2-2 12:22',
-      },
-      {
-        id: 2,
-        title: 'Admin 已经添加路由功能！',
-        icon: 'icon-park-outline:message-emoji',
-        tagTitle: '未开始',
-        tagType: 'warning',
-        description: '项目稳定推进中...',
-        date: '2022-2-5 18:32',
-      },
-      {
-        id: 3,
-        title:
+    id: 0,
+    type: 0,
+    title: 'Admin 已经完成40%了！',
+    icon: 'icon-park-outline:tips-one',
+    tagTitle: '未开始',
+    tagType: 'info',
+    description: '项目稳定推进中，很快就能看到正式版了',
+    date: '2022-2-2 12:22',
+  },
+  {
+    id: 1,
+    type: 0,
+    title: 'Admin 已经添加通知功能！',
+    icon: 'icon-park-outline:comment-one',
+    tagTitle: '未开始',
+    tagType: 'success',
+    date: '2022-2-2 12:22',
+  },
+  {
+    id: 2,
+    type: 0,
+    title: 'Admin 已经添加路由功能！',
+    icon: 'icon-park-outline:message-emoji',
+    tagTitle: '未开始',
+    tagType: 'warning',
+    description: '项目稳定推进中...',
+    date: '2022-2-5 18:32',
+  },
+  {
+    id: 3,
+    type: 0,
+    title:
           'Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！Admin 已经添加菜单导航功能！',
-        icon: 'icon-park-outline:tips-one',
-        tagTitle: '未开始',
-        tagType: 'error',
-        description:
+    icon: 'icon-park-outline:tips-one',
+    tagTitle: '未开始',
+    tagType: 'error',
+    description:
           '项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...',
-        date: '2022-2-5 18:32',
-      },
-      {
-        id: 4,
-        title: 'Admin开始启动了！',
-        icon: 'icon-park-outline:tips-one',
-        tagTitle: '未开始',
-        description: '项目稳定推进中...',
-        date: '2022-2-5 18:32',
-      },
-    ],
+    date: '2022-2-5 18:32',
   },
   {
-    key: 1,
-    name: '消息',
-    badgeProps: { type: 'info' },
-    list: [
-      {
-        id: 0,
-        title: '相见恨晚??',
-        icon: 'icon-park-outline:comment',
-        description: '项目稳定推进中，很快就能看到正式版了',
-        date: '2022-2-2 12:22',
-      },
-      {
-        id: 1,
-        title: '动态路由已完成！',
-        icon: 'icon-park-outline:comment',
-        description: '项目稳定推进中，很快就能看到正式版了',
-        date: '2022-2-25 12:22',
-      },
-    ],
+    id: 4,
+    type: 0,
+    title: 'Admin开始启动了！',
+    icon: 'icon-park-outline:tips-one',
+    tagTitle: '未开始',
+    description: '项目稳定推进中...',
+    date: '2022-2-5 18:32',
   },
   {
-    key: 2,
-    name: '待办',
-    badgeProps: { type: 'error' },
-    list: [
-      {
-        id: 0,
-        title: '接下来需要完善一些',
-        icon: 'icon-park-outline:beach-umbrella',
-        tagTitle: '未开始',
-        description: '项目稳定推进中，很快就能看到正式版了',
-        date: '2022-2-2 12:22',
-      },
-    ],
+    id: 5,
+    type: 1,
+    title: '相见恨晚??',
+    icon: 'icon-park-outline:comment',
+    description: '项目稳定推进中，很快就能看到正式版了',
+    date: '2022-2-2 12:22',
+  },
+  {
+    id: 6,
+    type: 1,
+    title: '动态路由已完成！',
+    icon: 'icon-park-outline:comment',
+    description: '项目稳定推进中，很快就能看到正式版了',
+    date: '2022-2-25 12:22',
+  },
+  {
+    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>
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index b86d53e..7d89c41 100644
--- a/src/layouts/components/header/Search.vue
+++ b/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>
 
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index 9d1b167..6dc9adc 100644
--- a/src/router/guard/permission.ts
+++ b/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
   }
diff --git a/src/service/http/utils.ts b/src/service/http/utils.ts
index 7acdf5c..46b3b7f 100644
--- a/src/service/http/utils.ts
+++ b/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)
 }
diff --git a/src/typings/business.d.ts b/src/typings/business.d.ts
index be9699f..b7aad3f 100644
--- a/src/typings/business.d.ts
+++ b/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
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index 16ae0aa..6869fd2 100644
--- a/src/typings/global.d.ts
+++ b/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
diff --git a/src/typings/shims-vue.d.ts b/src/typings/shims-vue.d.ts
deleted file mode 100644
index fe00a85..0000000
--- a/src/typings/shims-vue.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-
-  const component: DefineComponent
-  export default component
-}
diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue
index 0683ec9..fb65a5b 100644
--- a/src/views/list/commonList/index.vue
+++ b/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 }
diff --git a/src/views/test/test3/test4/index.vue b/src/views/test/test3/test4/index.vue
index 1ca330f..58196f6 100644
--- a/src/views/test/test3/test4/index.vue
+++ b/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>
 
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 717ece2..837399f 100644
--- a/src/views/userCenter/index.vue
+++ b/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>