diff --git a/components.d.ts b/components.d.ts
index 350e4e9..bacd702 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,12 +11,14 @@ declare module '@vue/runtime-core' {
     Comment: typeof import('./src/components/Comment.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -32,6 +34,7 @@ declare module '@vue/runtime-core' {
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Footer: typeof import('./src/components/Footer.vue')['default']
     FriendLinks: typeof import('./src/components/FriendLinks.vue')['default']
+    MessageBox: typeof import('./src/components/MessageBox.vue')['default']
     MusicPlayer: typeof import('./src/components/MusicPlayer.vue')['default']
     PersonalInfo: typeof import('./src/components/PersonalInfo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
new file mode 100644
index 0000000..45ab253
--- /dev/null
+++ b/src/components/MessageBox.vue
@@ -0,0 +1,197 @@
+<template>
+  <div
+    class="message-box"
+    v-if="props.modelValue"
+    v-dialogDrag="{
+                      dragEle: '.header',//点击拖动的那个dom的选择器
+                      drag: true, //是否开启拖动
+                  }"
+  >
+    <div class="header">
+      消息中心
+      <span @click="close"><el-icon><Close /></el-icon></span>
+    </div>
+    <div class="dialog-content">
+      <div class="button-group">
+        <el-button-group>
+          <el-button
+            type="primary" :icon="MessageBox"
+            :disabled="showInbox" @click="showInbox = true">
+            收件箱</el-button>
+          <el-button
+            type="primary" :icon="Message"
+            :disabled="!showInbox" @click="showInbox = false">
+            发件箱</el-button>
+        </el-button-group>
+      </div>
+      <div class="message-list">
+        <el-empty description="消息为空" v-if="messageList.length == 0" />
+        <div class="message" v-for="item in messageList" :key="item">
+          <div class="message-title">
+            <span>
+              {{item.messageTitle}}
+              <el-tag v-if="item.isRead" type="success">已读</el-tag>
+              <el-tag v-else type="danger">未读</el-tag>
+            </span>
+            <span>
+              <span class="text-link" @click="readMessage(item.messageId)" v-if="!item.isRead">设为已读</span>
+            </span>
+          </div>
+          <div class="message-content" v-html="item.messageContent"></div>
+          <div class="message-footer">{{item.gmtCreate}}</div>
+        </div>
+      </div>
+      <div class="pagination">
+        <el-pagination
+          :total="messageCount"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[4, 6, 10, 20]"
+          background layout="prev, pager, next, sizes"  />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { fetchInBoxMessage, fetchOutBoxMessage, readMessageById } from "@/services/messageApi";
+import { MessageBox, Message } from "@element-plus/icons-vue";
+
+const props = defineProps(["modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+const showInbox = ref(true);
+
+const inbox: any = ref([{
+  messageId: "1704037736972881921",
+  senderId: "-1",
+  targetId: "1508326478803185700",
+  messageContent: "<span>暂无消息</span>",
+  messageTitle: "数据请求中",
+  senderName: "系统",
+  isRead: true,
+  gmtCreate: "2023-09-19 15:40:31"
+}]);
+
+const outbox: any = ref([{
+  messageId: "1704037736972881921",
+  senderId: "-1",
+  targetId: "1508326478803185700",
+  messageContent: "<span>暂无消息</span>",
+  messageTitle: "数据请求中",
+  senderName: "系统",
+  isRead: true,
+  gmtCreate: "2023-09-19 15:40:31"
+}]);
+
+const getMessageList = () => {
+  fetchInBoxMessage().then((res) => {
+    inbox.value = res.data;
+  });
+  fetchOutBoxMessage().then((res) => {
+    outbox.value = res.data;
+  });
+};
+
+const readMessage = (messageId: string) => {
+  readMessageById(messageId).then(() => {
+    getMessageList();
+  })
+};
+
+const close = () => {
+  emit("update:modelValue", false);
+};
+
+const currentPage = ref(1);
+const pageSize = ref(6);
+
+const messageList = computed(() => {
+  return (showInbox.value ? inbox.value : outbox.value).slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+});
+
+const messageCount = computed(() => {
+  return showInbox.value ? inbox.value.length : outbox.value.length;
+});
+
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    getMessageList();
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.message-box {
+  position: fixed;
+  left: 10%;
+  top: 15%;
+  width: 80%;
+  height: 70%;
+  background-color: #fff;
+  border-radius: 10px;
+  z-index: 999;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+
+  .header {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    background-color: #f5f5f5;
+    border-radius: 10px 10px 0 0;
+
+    span {
+      float: right;
+      cursor: pointer;
+    }
+  }
+
+  .dialog-content {
+    height: calc(100% - 40px);
+    .button-group {
+      height: 60px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .message-list {
+      height: calc(100% - 140px);
+      overflow-y: auto;
+      padding: 10px;
+
+      .message {
+        margin-bottom: 10px;
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        .message-title {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          .text-link {
+            font-size: small;
+            color: gainsboro;
+          }
+          .text-link:hover {
+            color: #42b983;
+            cursor: pointer;
+          }
+        }
+        .message-footer {
+          text-align: right;
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+    .pagination {
+      height: 80px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 0dc0e6a..224b9d3 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -22,13 +22,13 @@
           <div class="operations" v-if="userStore.userId===''">
             <el-divider />
             <div class="operation" @click="toLink('/login')">
-              <el-icon style="vertical-align: -10%">
+              <el-icon style="vertical-align: -15%">
                 <Lollipop />
               </el-icon>
               登录
             </div>
             <div class="operation" @click="toLink('/register')">
-              <el-icon style="vertical-align: -10%">
+              <el-icon style="vertical-align: -15%">
                 <Tickets />
               </el-icon>
               注册
@@ -37,19 +37,19 @@
           <div class="operations" v-if="userStore.userId!==''">
             <el-divider />
             <div class="operation" @click="toLink('/userCenter')">
-              <el-icon style="vertical-align: -10%">
+              <el-icon style="vertical-align: -15%">
                 <Avatar />
               </el-icon>
               个人中心
             </div>
-            <div class="operation">
-              <el-icon style="vertical-align: -10%">
+            <div class="operation" @click="showMessageBox = true">
+              <el-icon style="vertical-align: -15%">
                 <Message />
               </el-icon>
-              消息
+              消息<span v-if="newMessageCount" class="count_tip"> {{newMessageCount}} </span>
             </div>
             <div class="operation">
-              <el-icon style="vertical-align: -10%">
+              <el-icon style="vertical-align: -15%">
                 <Setting />
               </el-icon>
               设置
@@ -101,6 +101,7 @@
       </el-col>
     </el-row>
   </div>
+  <MessageBox v-model="showMessageBox"/>
 </template>
 
 <script setup lang="ts">
@@ -109,9 +110,19 @@ import { useUserStore } from "@/stores/user";
 import { ElMessage } from "element-plus";
 import { useRouter } from "vue-router";
 import { logoutUser } from "@/services/userApi";
+import MessageBox from "@/components/MessageBox.vue";
+import { unreadMessageCount } from "@/services/messageApi";
 
 const router = useRouter();
 const userStore = useUserStore();
+const showMessageBox = ref(false);
+const newMessageCount = ref(0);
+
+router.beforeEach((to, from, next) => {
+  showMessageBox.value = false;
+  getNewMessageCount();
+  next();
+});
 
 const screenWidth = ref(document.body.clientWidth);
 const navItems = [{ name: "主页", indexPath: "/", iconName: "HomeFilled" },
@@ -123,6 +134,12 @@ const resize = function() {
   screenWidth.value = document.body.clientWidth;
 };
 
+const getNewMessageCount = () => {
+  unreadMessageCount().then((res) => {
+    newMessageCount.value = res.data;
+  });
+};
+
 const logout = () => {
   logoutUser().then(() => {
     ElMessage.success("登出成功");
@@ -325,4 +342,13 @@ onMounted(() => {
   background-color: #F1F1F1;
   color: #63a35c;
 }
+
+.count_tip {
+  background-color: #ff4d4f;
+  color: white;
+  padding: 0 5px;
+  border-radius: 40%;
+  font-size: 12px;
+  margin-left: 5px;
+}
 </style>
diff --git a/src/services/messageApi.ts b/src/services/messageApi.ts
new file mode 100644
index 0000000..20d2f57
--- /dev/null
+++ b/src/services/messageApi.ts
@@ -0,0 +1,16 @@
+/**
+ * @description 消息模块
+ * @author PeterAlbus
+ * @time 2023-08-19
+ */
+
+import http from './httpConfig';
+import { messageUrl } from "@/services/urlConfig";
+
+export const fetchInBoxMessage = () => http.get({},messageUrl.getInBoxMessageList);
+
+export const fetchOutBoxMessage = () => http.get({},messageUrl.getOutBoxMessageList);
+
+export const unreadMessageCount = () => http.get({},messageUrl.getUnreadMessageCount);
+
+export const readMessageById = (messageId:string) => http.get({messageId},messageUrl.readMessage);
diff --git a/src/services/urlConfig.ts b/src/services/urlConfig.ts
index f8796b3..3bb8aac 100644
--- a/src/services/urlConfig.ts
+++ b/src/services/urlConfig.ts
@@ -64,3 +64,10 @@ export const photoUrl:any = {
     getPhotoList: "/photo/queryAll",
     addPhoto: "/photo/upload",
 }
+
+export const messageUrl:any = {
+    getInBoxMessageList: "/message/getInBoxMessage",
+    getOutBoxMessageList: "/message/getOutBoxMessage",
+    getUnreadMessageCount: "/message/getUnreadMessageCount",
+    readMessage: "/message/readMessage"
+}