diff --git a/src/assets/SvgIcons/activityManagement.svg b/src/assets/SvgIcons/activity-management.svg similarity index 100% rename from src/assets/SvgIcons/activityManagement.svg rename to src/assets/SvgIcons/activity-management.svg diff --git a/src/assets/SvgIcons/bell.svg b/src/assets/SvgIcons/bell.svg new file mode 100644 index 0000000..87eac3e --- /dev/null +++ b/src/assets/SvgIcons/bell.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/SvgIcons/cashManagement.svg b/src/assets/SvgIcons/cash-management.svg similarity index 100% rename from src/assets/SvgIcons/cashManagement.svg rename to src/assets/SvgIcons/cash-management.svg diff --git a/src/assets/SvgIcons/channelManagement.svg b/src/assets/SvgIcons/channel-management.svg similarity index 100% rename from src/assets/SvgIcons/channelManagement.svg rename to src/assets/SvgIcons/channel-management.svg diff --git a/src/assets/SvgIcons/goldManagement.svg b/src/assets/SvgIcons/gold-management.svg similarity index 100% rename from src/assets/SvgIcons/goldManagement.svg rename to src/assets/SvgIcons/gold-management.svg diff --git a/src/assets/SvgIcons/permissionManagement.svg b/src/assets/SvgIcons/permission-management.svg similarity index 100% rename from src/assets/SvgIcons/permissionManagement.svg rename to src/assets/SvgIcons/permission-management.svg diff --git a/src/components/dialogs/MessageDialog.vue b/src/components/dialogs/MessageDialog.vue deleted file mode 100644 index e35922b..0000000 --- a/src/components/dialogs/MessageDialog.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/views/home.vue b/src/views/home.vue index 597cc0e..fbdf7de 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -24,11 +24,11 @@ const icons = import.meta.glob('@/assets/SvgIcons/*.svg', {eager: true}) const menuNameMap = { '工作台': 'workbench', - '金币管理': 'goldManagement', - '现金管理': 'cashManagement', - '活动管理': 'activityManagement', - '频道管理': 'channelManagement', - '权限管理': 'permissionManagement', + '金币管理': 'gold-management', + '现金管理': 'cash-management', + '活动管理': 'activity-management', + '频道管理': 'channel-management', + '权限管理': 'permission-management', } // 创建获取图标路径的函数（修复版本） @@ -52,12 +52,8 @@ const getIconPath = (menuName) => { } } - -// ----------------------------------- - // 刷新数据功能 import API from '@/util/http.js' -import MessageDialog from "@/components/dialogs/MessageDialog.vue"; // 确保已经导入了HTTP请求工具 // 数据刷新功能实现 const refreshData = async () => { @@ -85,8 +81,6 @@ const refreshData = async () => { } } -// --------------------------------------- - // 存储接口返回的菜单数据 const menuList = ref([]) @@ -132,7 +126,6 @@ const router = useRouter() const imgrule1 = dmmn const messageVisible = ref(false) - // 查看个人信息弹出框 const openMessage = function () { messageVisible.value = true @@ -179,14 +172,47 @@ const toggleFlag = () => { // 消息推送逻辑 // 控制 MessageDialog 显示状态 + +import bell from '@/assets/SvgIcons/bell.svg' + +import noMessage from '@/assets/images/no-message.svg' + +const messageNum = ref(0) const showMessageDialog = ref(false) +// 消息小红点状态 +const messageDot = ref(true) // 点击铃铛图标时打开 const openMessageDialog = () => { showMessageDialog.value = true + messageDot.value = false + } -// 消息小红点状态 -const messageDot = ref(true) +// 点击关闭时关闭 +const closeMessageDialog = () => { + showMessageDialog.value = false +} + + +// 模拟消息数据 +const messageList = ref([ + { id: 1, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2分钟前', group: '今天' }, + { id: 2, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '1小时前', group: '今天' }, + { id: 3, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 09:30', group: '昨天' }, + { id: 4, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 08:30', group: '昨天' }, + { id: 5, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早' }, + { id: 6, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早' }, +]); + +// 按时间分组 +const groupedMessages = ref({}); +messageList.value.forEach(item => { + if (!groupedMessages.value[item.group]) { + groupedMessages.value[item.group] = []; + } + groupedMessages.value[item.group].push(item); +}); + - +
- - - - - +
+ + +
@@ -343,12 +368,43 @@ const messageDot = ref(true) - + +
+ | 消息 ({{ messageNum }}) + +
+ + +

暂无未办消息，快去处理工作吧～

+
+
+
+ | 消息 ({{ messageNum }}) + +
+
+ {{ time }} + + +
+
+
+ {{ item.title }} +

{{ item.desc }}

+
+ 前往查看 +
{{ item.time }}
+
+
+ 查看全部 +
+ + @@ -532,4 +588,100 @@ const messageDot = ref(true) scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.2); /* Firefox滑块和轨道颜色 */ } + + +/* 添加相对定位，用于添加消息点 */ +.relative { + position: relative; +} + +.dot { + position: absolute; + top: -2px; + right: -2px; + width: 8px; + height: 8px; + background: #F23C39; + border-radius: 50%; +} + +/* 整体样式 */ +.message { + background: #0d84ff; + +} + +/* 无消息的样式 */ +.no-message { + text-align: center; + position: relative; +} + +.no-message-text { + position: absolute; + top: 60%; + left: 50%; + /* 水平垂直居中 */ + transform: translate(-50%, -50%); + /* 文字样式 */ + font-weight: bold; + margin: 0; + /* 可添加更多样式（如字体大小、阴影等） */ + font-size: 14px; +} + + +/* 有消息的样式 */ + +.message-group { + margin-bottom: 16px; +} +.time-header { + font-size: 14px; + color: #666; + margin-bottom: 8px; +} +.message-item { + display: flex; + align-items: center; + margin-bottom: 12px; + padding-bottom: 12px; + border-bottom: 1px solid #eee; +} +.message-content { + flex: 1; +} +.message-tag { + color: red; + margin-right: 4px; +} +.message-title { + font-weight: bold; + margin-right: 4px; +} +.message-desc { + font-size: 13px; + color: #666; + margin: 4px 0 0 0; +} +.view-btn { + margin-right: 16px; +} +.message-time { + font-size: 13px; + color: #999; +} +.view-all { + display: block; + margin: 0 auto 16px; +} + +.little-dot { + display: inline-block; + width: 8px; /* 圆点直径 */ + height: 8px; + border-radius: 50%; /* 圆形 */ + background-color: #CEE5FE;; +} + \ No newline at end of file diff --git a/src/views/moneyManage/executor/executor.vue b/src/views/moneyManage/executor/executor.vue index ac6defa..b478204 100644 --- a/src/views/moneyManage/executor/executor.vue +++ b/src/views/moneyManage/executor/executor.vue @@ -122,7 +122,7 @@ -