cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

通知消息

This commit is contained in:
zhang zhuo 2025-06-17 17:36:51 +08:00
parent c8276fcde7
commit a478ef8a32
5 changed files with 139 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/NoMessage.vue Normal file
View File

File diff suppressed because one or more lines are too long

10
src/directives/time.ts
View File

@ -29,9 +29,7 @@ var Time = {
//获取标准年月日
getLastDate: function (time) {
var date = new Date(time);
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return date.getFullYear() + '-' + month + '-' + day;
return date.getFullYear();
},
//转换时间
getFormateTime: function (timestamp) {
@ -52,8 +50,12 @@ var Time = {
tip = Math.floor(timer / 3600) + '小时前';
} else if (timer / 86400 <= 31) {
tip = Math.ceil(timer / 86400) + '天前';
} else if (timer / 259200 <= 12) {
tip = Math.ceil(timer / 259200) + '月前';
} else if (timer / 31536000 <= 10) {
tip = Math.ceil(timer / 31536000) + '年前';
} else {
tip = this.getLastDate(timestamp);
tip = this.getLastDate(timestamp) + '年';
}
return tip;
}

3
src/layout/components/tags.vue
View File

@ -4,6 +4,9 @@
<li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]"
@contextmenu.prevent="openContextMenu($event, tag)">
<router-link :to="tag">
<el-icon v-if="tag.meta&&tag.meta.icon">
<component :is="tag.meta.icon || 'el-icon-menu'"/>
</el-icon>
<span>{{ tag.meta.title }}</span>
<el-icon v-if="!tag.meta.affix" @click.prevent.stop='closeSelectedTag(tag)'>
<el-icon-close/>

165
src/layout/components/userbar.vue
View File

@ -21,15 +21,46 @@
</el-icon>
</el-badge>
</div>
<div class="msg panel-item" @click="showMsg">
<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
<el-icon>
<el-icon-chat-dot-round/>
</el-icon>
</el-badge>
<el-drawer title="站内信息" v-model="msg" :size="400" append-to-body destroy-on-close>
<message @closed="closeMsg"></message>
</el-drawer>
<div class="msg panel-item" @click="msgVisible=!msgVisible">
<el-popover v-model:visible="msgVisible" :width="280" trigger="click">
<template #reference>
<div class="msg-panel">
<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
<el-icon>
<el-icon-bell/>
</el-icon>
</el-badge>
</div>
</template>
<template #default>
<el-tabs v-model="msgTab" class="msg-tabs" stretch>
<el-tab-pane label="通知" name="notice"></el-tab-pane>
<el-tab-pane label="消息" name="message"></el-tab-pane>
<el-tab-pane label="待办" name="todo"></el-tab-pane>
</el-tabs>
<div class="msg-content">
<div v-if="msgList.length===0" class="msg-empty">
<el-icon class="icon">
<pi-icon-no-message/>
</el-icon>
</div>
<div v-else>
<el-scrollbar height="220px" :view-style="{ 'overflow-x': 'hidden' }">
<el-link v-for="item in msgList" :key="item" href="/#/message" underline="never">
<template #default>
<el-text type="primary" v-time.tip="item.time"></el-text>
<div>{{ item.title }}</div>
</template>
</el-link>
</el-scrollbar>
</div>
</div>
<el-divider/>
<div class="msg-more">
<el-button link type="primary" icon="el-icon-arrow-down">查看更多</el-button>
</div>
</template>
</el-popover>
</div>
<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
<div class="user-avatar">
@ -49,9 +80,10 @@
</el-dropdown>
<div class="setting panel-item hidden-sm-and-down" @click="settingDialog=true">
<el-icon>
<pi-icon-brush/>
<el-icon-brush/>
</el-icon>
<el-drawer :title="t('system.pageLayout')" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
<el-drawer :title="t('system.pageLayout')" v-model="settingDialog" :size="400" append-to-body
destroy-on-close>
<setting></setting>
</el-drawer>
</div>
@ -81,13 +113,16 @@ const {proxy} = getCurrentInstance()
const router = useRouter()
const {t} = useI18n()
const msgVisible = ref(true);
let searchVisible = ref(false)
let msg = ref(false)
let msgNum = ref(0)
let msgNum = ref(2)
let msgList = ref([])
const tasksVisible = ref(false)
let taskNum = ref(0)
const settingDialog = ref(false)
const userInfo = tools.data.get("USER_INFO");
let msgTab = ref("notice")
let realname = userInfo.realname;
let realnameF = realname.substring(0, 1);
@ -183,25 +218,50 @@ function screen() {
tools.screen(document.documentElement)
}
//显示短消息
function showMsg() {
msg.value = true
}
function closeMsg(num) {
if (num > -1) {
msgNum.value = num
}
msg.value = false
}
async function loadData() {
// let res = await this.$API.home.message.newCount()
// this.msgNum = res.data.count
msgNum.value = 5
msgList.value.push({
title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
time: '2025-06-17 17:59:21'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
time: '2025-06-16 10:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2025-06-15 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2025-05-15 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2025-01-16 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2024-06-15 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2024-06-15 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2015-06-15 12:29:30'
})
msgList.value.push({
title: '您有一笔新的订单请及时处理。',
time: '2025-06-15 12:29:30'
})
}
</script>
<style scoped>
<style lang="scss" scoped>
.user-bar {
display: flex;
align-items: center;
@ -263,15 +323,6 @@ async function loadData() {
background: #ecf5ff;
}
.msg-list__icon {
width: 40px;
margin-right: 15px;
}
.msg-list__main {
flex: 1;
}
.msg-list__main h2 {
font-size: 15px;
font-weight: normal;
@ -285,12 +336,6 @@ async function loadData() {
margin-top: 5px;
}
.msg-list__time {
width: 100px;
text-align: right;
color: #999;
}
.dark .msg-list__main h2 {
color: #d0d0d0;
}
@ -302,4 +347,44 @@ async function loadData() {
.dark .msg-list li a:hover {
background: #383838;
}
.msg-panel {
display: grid;
}
.msg-content {
height: 220px;
overflow: hidden;
}
.msg-content .msg-empty {
display: flex;
height: 220px;
justify-content: center;
align-items: center;
}
.msg-content .msg-empty .icon {
font-size: 128px;
}
.msg-content .el-link {
line-height: 30px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.msg-content .el-link .el-text{
margin-right: 5px;
width: 48px;
}
.msg-more {
text-align: center;
}
.el-divider--horizontal {
margin: 10px 0 !important;
}
</style>

3
src/style/app.scss
View File

@ -89,7 +89,8 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.pi-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
.pi-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
.pi-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;display: flex;align-items: center;}
.pi-tags li i {margin-left:10px;border-radius: 3px;width:18px;height:18px;display: flex;align-items: center;justify-content: center;}
.pi-tags li i {border-radius: 3px;width:18px;height:18px;display: flex;align-items: center;justify-content: center;}
.pi-tags li span {margin-right: 5px;margin-left: 5px;}
.pi-tags li i:hover {background: rgba(0,0,0,.2);color: #fff;}
.pi-tags li:hover {background: #ecf5ff;}
.pi-tags li.active {background: #409EFF;}