add：消息中心基础样式

src/components/dialogs/MessageDialog.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import API from '@/util/http.js' // 假设你已有请求工具
+
+const emit = defineEmits(['close', 'update-dot'])
+const dialogRef = ref(null)
+
+// 模拟接口返回消息数据
+const messages = ref([])
+
+// 获取消息接口
+async function getMessages() {
+  try {
+    const res = await API({ url: '/getMessages', method: 'GET' })
+    if (res.code === 200) {
+      messages.value = res.data
+      // 如果有未读消息，通知父组件显示红点
+      const hasUnread = messages.value.some(msg => !msg.read)
+      // emit('update-dot', false)
+    }else {
+
+      // emit('update-dot', false)
+
+    }
+  } catch (e) {
+    emit('update-dot', false)
+    console.error('获取消息失败:', e)
+  }
+}
+
+onMounted(() => {
+  getMessages()
+})
+
+function closeDialog() {
+  emit('close')
+}
+</script>
+
+<template>
+  <dialog class="message-dialog" open>
+    <div class="dialog-content">
+      <h3>消息中心</h3>
+      <div v-if="messages.length > 0">
+<!--        <div
+            v-for="msg in messages"
+            :key="msg.id"
+            class="msg-item"
+            :class="{ unread: !msg.read }"
+        >
+          {{ msg.title }}
+        </div>-->
+        <div>
+          测试测试
+        </div>
+      </div>
+      <div v-else>测试测试</div>
+
+      <div class="dialog-footer">
+        <el-button type="primary" @click="closeDialog">关闭</el-button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+.message-dialog {
+  border: none;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
+  width: 380px;
+  z-index: 99999;
+}
+.dialog-content {
+  padding: 20px;
+}
+.msg-item {
+  padding: 6px 0;
+}
+.msg-item.unread {
+  font-weight: bold;
+  color: #409eff;
+}
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+::backdrop {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/components/changePassword.vue → src/components/dialogs/changePassword.vue

@@ -4,8 +4,8 @@
 import {ref, reactive, computed, watch, onMounted} from 'vue'
 import {CircleCloseFilled, SuccessFilled} from '@element-plus/icons-vue'
 import {ElMessage} from "element-plus";
-import API from '@/util/http'
-import PasswordSuccess from './PasswordSuccess.vue';
+import API from '@/util/http.js'
+import PasswordSuccess from '../PasswordSuccess.vue';
 import router from "@/router/index.js";
 
 // 父组件调用

src/views/home.vue

@@ -4,10 +4,12 @@ import { computed, ref } from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
 import dmmn from '../assets/link.png'
-import ChangePassword from '@/components/changePassword.vue'
+import ChangePassword from '@/components/dialogs/changePassword.vue'
 import {useAdminStore} from '@/store'
 import {storeToRefs} from 'pinia'
 import {filterMenu, getRoutePath} from "@/utils/menuUtils.js";
+import {Bell} from '@element-plus/icons-vue'
+
 import SettingsIcon from '@/assets/blue.png';
 
 // 使用import.meta.glob导入所有SVG图标（修复版本）
@@ -51,11 +53,11 @@ const getIconPath = (menuName) => {
 }
 
 
-
 // -----------------------------------
 
 // 刷新数据功能
-import API from '@/util/http.js' // 确保已经导入了HTTP请求工具
+import API from '@/util/http.js'
+import MessageDialog from "@/components/dialogs/MessageDialog.vue"; // 确保已经导入了HTTP请求工具
 
 // 数据刷新功能实现
 const refreshData = async () => {
@@ -151,6 +153,7 @@ const pwdRef = ref()
 const openChangePassword = () => {
   showPasswordDialog.value = true
 }
+
 //关闭后清空密码表单
 function onPwdDialogClosed() {
   // 调用子组件暴露的 resetFields
@@ -173,6 +176,17 @@ const toggleFlag = () => {
   console.log('flag', newFlag)
 }
 
+
+// 消息推送逻辑
+// 控制 MessageDialog 显示状态
+const showMessageDialog = ref(false)
+
+// 点击铃铛图标时打开
+const openMessageDialog = () => {
+  showMessageDialog.value = true
+}
+// 消息小红点状态
+const messageDot = ref(true)
 </script>
 
 <template>
@@ -245,6 +259,7 @@ const toggleFlag = () => {
             </el-menu>
           </div>
 
+          <div style="display: flex">
             <!-- 底部固定的设置中心 -->
             <div class="settings-container">
               <el-dropdown placement="top-start">
@@ -270,6 +285,17 @@ const toggleFlag = () => {
                 </template>
               </el-dropdown>
             </div>
+            <!-- 消息提示 -->
+            <div class="message-container">
+              <el-badge :is-dot="messageDot" class="item">
+                <el-icon @click="openMessageDialog" style="cursor: pointer;">
+                  <Bell/>
+                </el-icon>
+              </el-badge>
+            </div>
+
+          </div>
+
         </el-aside>
       </div>
 
@@ -316,6 +342,15 @@ const toggleFlag = () => {
     <el-dialog v-model="showPasswordDialog" :center="true" width="470px" @closed="onPwdDialogClosed">
       <ChangePassword ref="pwdRef" @confirm="showPasswordDialog = false"/>
     </el-dialog>
+
+    <MessageDialog
+        v-if="showMessageDialog"
+        @close="showMessageDialog = false"
+        @update-dot="messageDot = $event"
+    />
+
+
+
   </div>
 </template>
 
@@ -355,6 +390,7 @@ const toggleFlag = () => {
   flex-shrink: 0;
 
 }
+
 .logo {
   display: flex;
   align-items: center;
@@ -362,6 +398,7 @@ const toggleFlag = () => {
   height: 12vh;
 
 }
+
 /* 中间可滚动菜单容器 */
 .menu-scroll-container {
   flex: 1;
@@ -376,6 +413,12 @@ const toggleFlag = () => {
   align-items: center; /* 垂直居中 */
 }
 
+.message-container {
+  padding: 10px 50px 10px 50px; /* 上，右， 下，左 */
+  display: flex;
+  align-items: center; /* 垂直居中 */
+}
+
 /* 调整下拉菜单的样式，确保它向上弹出 */
 
 .el-dropdown-link:focus {
@@ -383,12 +426,14 @@ const toggleFlag = () => {
   outline: none;
   text-decoration: none;
 }
+
 .el-dropdown-link {
   display: flex;
   align-items: center;
   cursor: pointer;
   gap: 10px; /* 图标和文字左右间距 */
 }
+
 .sidebar-layout {
   width: 15vw;
   height: 100%;
@@ -439,7 +484,6 @@ const toggleFlag = () => {
 }
 
 
-
 /* 确保el-menu撑满容器 */
 .sidebar-layout .el-menu {
   width: 100%;
@@ -456,6 +500,7 @@ const toggleFlag = () => {
 ::v-deep(.el-menu-item:hover) {
   background: #E5EBFE;
 }
+
 /* 子菜单展开时和背景同色 */
 ::v-deep(.el-sub-menu__title),
 ::v-deep(.el-menu-item) {
@@ -470,7 +515,6 @@ const toggleFlag = () => {
 }
 
 
-
 /* 确保全局el-container适应容器 */
 :deep(.el-container) {
   /* vue3的深度选择器，用于覆盖element-plus的默认样式 */
@@ -480,7 +524,6 @@ const toggleFlag = () => {
 }
 
 
-
 /* 为侧边栏和主内容区域添加滚动条样式 */
 .menu-scroll-container,
 .el-main {