diff --git a/web/src/api/sys/message.ts b/web/src/api/sys/message.ts
new file mode 100644
index 00000000..27b377d4
--- /dev/null
+++ b/web/src/api/sys/message.ts
@@ -0,0 +1,21 @@
+import { defHttp } from '@/utils/http/axios';
+import {MessageInfo, ReadMessageReq} from "@/api/sys/model/MessageModel";
+import {BaseDataResp, BaseResp} from "@/api/model/baseModel";
+
+enum Api {
+    List = '/sys/message/list',
+    Read = '/sys/message/read',
+}
+
+export function getMessageList() {
+    return defHttp.get<BaseDataResp<MessageInfo>>({
+        url: Api.List,
+    });
+}
+
+export function readMessage(params: ReadMessageReq) {
+    return defHttp.post<BaseResp>({
+        url: Api.Read,
+        params,
+    });
+}
\ No newline at end of file
diff --git a/web/src/layouts/default/header/components/notify/NoticeList.vue b/web/src/layouts/default/header/components/notify/NoticeList.vue
index 5c97ba5f..a049a81d 100644
--- a/web/src/layouts/default/header/components/notify/NoticeList.vue
+++ b/web/src/layouts/default/header/components/notify/NoticeList.vue
@@ -1,5 +1,5 @@
 <template>
-  <List :class="prefixCls" bordered :pagination="getPagination">
+  <List :class="prefixCls" bordered :pagination="getPagination" style="width: 250px">
     <template v-for="item in getData" :key="item.id">
       <List.Item class="list-item">
         <List.Item.Meta>
@@ -144,6 +144,7 @@ function handleTitleClick(item: ListItem) {
     .title {
       margin-bottom: 8px;
       font-weight: normal;
+      width: 250px;
 
       .extra {
         margin-top: -1.5px;
diff --git a/web/src/layouts/default/header/components/notify/data.ts b/web/src/layouts/default/header/components/notify/data.ts
index 276b9d00..6a474b52 100644
--- a/web/src/layouts/default/header/components/notify/data.ts
+++ b/web/src/layouts/default/header/components/notify/data.ts
@@ -32,7 +32,7 @@ export const tabListData: TabItem[] = [
         title: '物品XXXXX的采购订单已完成',
         description: '采购订单单据:79165111336',
         datetime: '2024-07-04',
-        type: '1',
+        type: '系统通知',
       },
       {
         id: '000000002',
@@ -108,6 +108,14 @@ export const tabListData: TabItem[] = [
         datetime: '2017-08-07',
         type: '1',
       },
+      {
+        id: '000000010',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
     ],
   },
   {
diff --git a/web/src/layouts/default/header/components/notify/index.vue b/web/src/layouts/default/header/components/notify/index.vue
index 0cbdc7eb..7e3e29d8 100644
--- a/web/src/layouts/default/header/components/notify/index.vue
+++ b/web/src/layouts/default/header/components/notify/index.vue
@@ -23,31 +23,53 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import {computed, ref, watch} from 'vue';
 import { Popover, Tabs, Badge } from 'ant-design-vue';
 import { BellOutlined } from '@ant-design/icons-vue';
-import { tabListData, ListItem } from './data';
+import { ListItem } from './data';
 import NoticeList from './NoticeList.vue';
 import { useDesign } from '@/hooks/web/useDesign';
 import { useMessage } from '@/hooks/web/useMessage';
+import { getMessageList, readMessage } from "@/api/sys/message";
+import {ReadMessageReq} from "@/api/sys/model/MessageModel";
+import {useUserStore} from "@/store/modules/user";
 
 const { prefixCls } = useDesign('header-notify');
 const { createMessage } = useMessage();
-const listData = ref(tabListData);
+const listData = ref([]);
+const messageCount = ref(0);
 const numberStyle = {};
 
+const fetchMessages = () => {
+  getMessageList().then((res) => {
+    listData.value = res.data;
+    console.info(listData.value);
+  });
+};
+
+// Watch for changes in listData and update messageCount
+watch(listData, (newList) => {
+  messageCount.value = newList.length;
+});
+
+// Fetch messages initially
+fetchMessages();
+
+// Computed property for the message count
 const count = computed(() => {
-  let count = 0;
-  for (let i = 0; i < tabListData.length; i++) {
-    count += tabListData[i].list.length;
-  }
-  return count;
+  return messageCount.value;
 });
 
+
 function onNoticeClick(record: ListItem) {
-  createMessage.success('你点击了通知，ID=' + record.id);
-  // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
   record.titleDelete = !record.titleDelete;
+  const userStore = useUserStore();
+  const readMessageReq: ReadMessageReq = {
+    id: record.id,
+    userId: userStore.getUserInfo?.id,
+    status: 1
+  }
+  readMessage(readMessageReq);
 }
 </script>
 <style lang="less">
diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts
index f02e4b18..14e3290a 100644
--- a/web/src/store/modules/user.ts
+++ b/web/src/store/modules/user.ts
@@ -1,29 +1,27 @@
 import type { ErrorMessageMode } from '/#/axios';
 import { defineStore } from 'pinia';
-import { store } from '/@/store';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { PageEnum } from '/@/enums/pageEnum';
-import { ROLES_KEY, ROLES_NAME_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
-import { getAuthCache, setAuthCache } from '/@/utils/auth';
+import { store } from '@/store';
+import { PageEnum } from '@/enums/pageEnum';
+import { ROLES_NAME_KEY, TOKEN_KEY, USER_INFO_KEY } from '@/enums/cacheEnum';
+import { getAuthCache, setAuthCache } from '@/utils/auth';
 import {
   emailLoginReq,
   GetUserInfoModel,
-  LoginReq, mobileLoginReq, updatePasswordReq,
-} from '/@/api/sys/model/userModel';
-import {doLogout, emailLogin, getUserInfo, login, mobileLogin} from '/@/api/sys/user';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { router } from '/@/router';
-import { usePermissionStore } from '/@/store/modules/permission';
+  LoginReq, mobileLoginReq,
+} from '@/api/sys/model/userModel';
+import {doLogout, emailLogin, getUserInfo, login, mobileLogin} from '@/api/sys/user';
+import { useI18n } from '@/hooks/web/useI18n';
+import { useMessage } from '@/hooks/web/useMessage';
+import { router } from '@/router';
+import { usePermissionStore } from '@/store/modules/permission';
 import { RouteRecordRaw } from 'vue-router';
-import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
-import { isArray } from '/@/utils/is';
+import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic';
+import { isArray } from '@/utils/is';
 import { h } from 'vue';
 
 interface UserState {
   userInfo: Nullable<GetUserInfoModel>;
   token?: string;
-  roleList: RoleEnum[];
   roleName: string[];
   sessionTimeout?: boolean;
   lastUpdateTime: number;
@@ -52,9 +50,6 @@ export const useUserStore = defineStore({
     getToken(): string {
       return this.token || getAuthCache<string>(TOKEN_KEY);
     },
-    getRoleList(): RoleEnum[] {
-      return this.roleList.length > 0 ? this.roleList : getAuthCache<RoleEnum[]>(ROLES_KEY);
-    },
     getRoleName(): string[] {
       return this.roleName.length > 0 ? this.roleName : getAuthCache<string[]>(ROLES_NAME_KEY);
     },
@@ -70,10 +65,6 @@ export const useUserStore = defineStore({
       this.token = info ? info : ''; // for null or undefined value
       setAuthCache(TOKEN_KEY, info);
     },
-    setRoleList(roleList: RoleEnum[]) {
-      this.roleList = roleList;
-      setAuthCache(ROLES_KEY, roleList);
-    },
     setRoleName(roleName: string[]) {
       this.roleName = roleName;
       setAuthCache(ROLES_NAME_KEY, roleName);
@@ -89,7 +80,6 @@ export const useUserStore = defineStore({
     resetState() {
       this.userInfo = null;
       this.token = '';
-      this.roleList = [];
       this.roleName = [];
       this.sessionTimeout = false;
     },
@@ -193,10 +183,8 @@ export const useUserStore = defineStore({
       const { roles = [], roleName = [] } = userInfo.data;
       if (isArray(roles)) {
         const roleList = roles.map((item) => item.valueOf) as unknown as RoleEnum[];
-        this.setRoleList(roleList);
       } else {
         userInfo.data.roles = [];
-        this.setRoleList([]);
       }
       this.setRoleName(roleName);
       this.setUserInfo(userInfo.data);