消息

components.d.ts

@@ -38,6 +38,8 @@ declare module 'vue' {
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']

src/layout/components/Header/index.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
-import { useUser } from "@/store/modules/user";
-import { getImgUrl } from "@/utils/urlUtils";
-import { useDialog, useMessage } from "naive-ui";
-import { defineComponent, reactive, ref, toRefs, unref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import QuillModal from "./QuillModal.vue";
-import RecycleModal from "./RecycleModal.vue";
-import SearchModal from "./SearchModal.vue";
-import ShortcutModal from "./ShortcutModal.vue";
-import UserSettings from "./UserSettings.vue";
+import { useDialog, useMessage } from 'naive-ui'
+import { defineComponent, reactive, ref, toRefs, unref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import QuillModal from './QuillModal.vue'
+import RecycleModal from './RecycleModal.vue'
+import SearchModal from './SearchModal.vue'
+import ShortcutModal from './ShortcutModal.vue'
+import UserSettings from './UserSettings.vue'
+import { getImgUrl } from '@/utils/urlUtils'
+import { useUser } from '@/store/modules/user'
 
 export default defineComponent({
-  name: "PageHeader",
+  name: 'PageHeader',
   components: {
     UserSettings,
     QuillModal,
@@ -27,108 +27,112 @@ export default defineComponent({
       type: Boolean,
     },
   },
-  emits: ["update:collapsed"],
+  emits: ['update:collapsed'],
   setup() {
-    const message = useMessage();
-    const dialog = useDialog();
+    const message = useMessage()
+    const dialog = useDialog()
 
-    const userStore = useUser();
-    const useInfo = userStore.getUserInfo;
+    const userStore = useUser()
+    const useInfo = userStore.getUserInfo
 
-    const name = "";
+    const name = ''
 
     const state = reactive({
-      username: name ?? "",
-      fullscreenIcon: "FullscreenOutlined",
-    });
+      username: name ?? '',
+      fullscreenIcon: 'FullscreenOutlined',
+    })
 
-    const router = useRouter();
-    const route = useRoute();
-    const routename = ref(route.meta.title);
+    const router = useRouter()
+    const route = useRoute()
+    const routename = ref(route.meta.title)
 
     watch(
       () => route.fullPath,
       () => {
-        routename.value = route.meta.title;
-      }
-    );
+        routename.value = route.meta.title
+      },
+    )
 
     const dropdownSelect = (key) => {
-      router.push({ name: key });
-    };
+      router.push({ name: key })
+    }
 
     // 退出登录
     const doLogout = () => {
       dialog.info({
-        title: "提示",
-        content: "您确定要退出登录吗",
-        positiveText: "确定",
-        negativeText: "取消",
+        title: '提示',
+        content: '您确定要退出登录吗',
+        positiveText: '确定',
+        negativeText: '取消',
         onPositiveClick: () => {
           userStore.logout().then(() => {
-            message.success("成功退出登录");
+            message.success('成功退出登录')
             router
               .replace({
-                name: "Login",
+                name: 'Login',
                 query: {
                   redirect: route.fullPath,
                 },
               })
-              .finally(() => location.reload());
-          });
+              .finally(() => location.reload())
+          })
         },
         onNegativeClick: () => {},
-      });
-    };
+      })
+    }
 
-    const quillModalRef = ref(null);
-    const shortcutModal = ref(null);
-    const recycleModalRef = ref(null);
-    const SearchModalRef = ref(null);
+    const quillModalRef = ref(null)
+    const shortcutModal = ref(null)
+    const recycleModalRef = ref(null)
+    const SearchModalRef = ref(null)
 
     function quillHandler() {
-      const modal = unref(quillModalRef)! as any;
-      modal.showModal();
+      const modal = unref(quillModalRef)! as any
+      modal.showModal()
     }
 
     function shortcutHandler() {
-      const modal = unref(shortcutModal)! as any;
-      modal.showModal();
+      const modal = unref(shortcutModal)! as any
+      modal.showModal()
     }
 
     function recycleHandler() {
-      const modal = unref(recycleModalRef)! as any;
-      modal.showModal();
+      const modal = unref(recycleModalRef)! as any
+      modal.showModal()
     }
 
     function searchHandler() {
-      const modal = unref(SearchModalRef)! as any;
-      modal.showModal();
+      const modal = unref(SearchModalRef)! as any
+      modal.showModal()
+    }
+
+    function goMessage() {
+      router.push({ name: 'message-main' })
     }
 
     // 图标列表
     const iconList = [
       {
-        icon: "magnifying-1",
+        icon: 'magnifying-1',
         handle: searchHandler,
       },
       {
-        icon: "shortcut-keys",
+        icon: 'shortcut-keys',
         handle: shortcutHandler,
       },
       {
-        icon: "suspicious-folder",
+        icon: 'suspicious-folder',
         handle: recycleHandler,
       },
       {
-        icon: "memo",
+        icon: 'memo',
         handle: quillHandler,
       },
       {
-        icon: "newmessage",
-        handle: shortcutHandler,
+        icon: 'newmessage',
+        handle: goMessage,
       },
-    ];
+    ]
 
     return {
       ...toRefs(state),
@@ -146,9 +150,9 @@ export default defineComponent({
       recycleHandler,
       useInfo,
       getImgUrl,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>

src/router/modules/message.ts

@@ -25,6 +25,7 @@ const routes: Array<RouteRecordRaw> = [
       svgsize: 22,
       sort: 2,
       disabled: true,
+      hidden: true,
     },
     children: [
       {

src/views/message/content/Detail.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { reactive, ref, toRefs } from 'vue'
 import { useMessage } from 'naive-ui'
+import { format } from 'date-fns'
+
 import { msgOne, readMsg } from '@/api/message/message'
 
 const props = defineProps({
@@ -41,13 +43,13 @@ getDetail()
       <div class="title">
         {{ detail.titile }}
       </div>
+      <div class="content" v-html="detail.msgContent" />
     </div>
     <div class="right-card">
       <img class="icon-set" src="@/assets/images/message/set.png" alt="">
       <div class="title">
         系统消息
       </div>
-      <div class="content" v-html="detail.msgContent" />
       <div class="form">
         <div class="form-item flex">
           <img class="icon" src="@/assets/images/message/user.png" alt="">
@@ -55,7 +57,7 @@ getDetail()
             创建人：
           </div>
           <div class="value">
-            {{ detail.titile }}
+            {{ detail.createBy }}
           </div>
         </div>
         <div class="form-item flex">
@@ -64,7 +66,7 @@ getDetail()
             发布时间：
           </div>
           <div class="value time">
-            {{ detail.titile }}
+            {{ format(detail.sendTime * 1000, 'yyyy-MM-dd HH:mm:ss') }}
           </div>
         </div>
         <div class="form-item flex margin-no">
@@ -110,6 +112,10 @@ getDetail()
       margin-bottom: 32px;
     }
 
+    .content{
+      padding: 0 32px;
+    }
+
   }
 
   .right-card{