280 lines
7.3 KiB
Vue
280 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
import AttentionMsg from '@/components/message/AttentionMsg.vue'
|
|
import LikeMsg from '@/components/message/LikeMsg.vue'
|
|
import OfficialMsg from '@/components/message/OfficialMsg.vue'
|
|
import ReplyMsg from '@/components/message/ReplyMsg.vue'
|
|
import { Check, ChevronDown, Heart, MessageSquareMore, UserPlus, Volume2 } from 'lucide-vue-next'
|
|
|
|
const currentMsgType = ref('reply')
|
|
const MsgTypeList = ref([
|
|
// {
|
|
// label:'官方通知',
|
|
// value:'official'
|
|
// icon:'Volume2'
|
|
// },
|
|
{
|
|
label: '回复我的',
|
|
value: 'reply',
|
|
icon: 'MessageSquareMore',
|
|
},
|
|
{
|
|
label: '收到的赞',
|
|
value: 'like',
|
|
icon: 'Heart',
|
|
},
|
|
{
|
|
label: '关注我的',
|
|
value: 'attention',
|
|
icon: 'UserPlus',
|
|
},
|
|
])
|
|
|
|
const iconMap: any = {
|
|
official: Volume2,
|
|
reply: MessageSquareMore,
|
|
like: Heart,
|
|
attention: UserPlus,
|
|
}
|
|
|
|
MsgTypeList.value = MsgTypeList.value.map(item => ({
|
|
...item,
|
|
LucideIcon: iconMap[item.value], // 添加 Lucide 图标组件
|
|
}))
|
|
|
|
const urlList = ref({
|
|
official: '',
|
|
reply: '/advice/getCommentMsg',
|
|
like: '/advice/getLikeMsg',
|
|
attention: '/advice/getAttentionMsg',
|
|
})
|
|
const allList = ref({
|
|
reply: [],
|
|
like: [],
|
|
attention: [],
|
|
})
|
|
// const officialList = ref([])
|
|
// const replyList = ref([])
|
|
// const likeList = ref([])
|
|
// const attentionList = ref([])
|
|
|
|
// const officialParamsType = ref('')
|
|
// const officialParamsTypeList = ref([
|
|
// {
|
|
// label:'全部通知',
|
|
// value:'4'
|
|
// }
|
|
// ])
|
|
const replyParamsType = ref('3')
|
|
const replyParamsTypeList = ref([
|
|
{
|
|
label: '全部通知',
|
|
value: '3',
|
|
},
|
|
{
|
|
label: '模型评论',
|
|
value: '0',
|
|
},
|
|
{
|
|
label: '图片评论',
|
|
value: '2',
|
|
},
|
|
{
|
|
label: '工作流评论',
|
|
value: '1',
|
|
},
|
|
])
|
|
|
|
const likeParamsType = ref('4')
|
|
const likeParamsTypeList = ref([
|
|
{
|
|
label: '全部通知',
|
|
value: '4',
|
|
},
|
|
{
|
|
label: '模型点赞',
|
|
value: '0',
|
|
},
|
|
{
|
|
label: '图片点赞',
|
|
value: '2',
|
|
},
|
|
{
|
|
label: '工作流点赞',
|
|
value: '1',
|
|
},
|
|
{
|
|
label: '评论点赞',
|
|
value: '3',
|
|
},
|
|
])
|
|
|
|
async function getList() {
|
|
const url = urlList.value[currentMsgType.value]
|
|
let productType = ''
|
|
if (currentMsgType.value === 'reply') {
|
|
productType = replyParamsType.value
|
|
}
|
|
else if (currentMsgType.value === 'like') {
|
|
productType = likeParamsType.value
|
|
}
|
|
else {
|
|
productType = ''
|
|
}
|
|
const res = await request.get(url, { productType })
|
|
if (res.code === 200) {
|
|
allList.value[currentMsgType.value] = res.data
|
|
}
|
|
}
|
|
getList()
|
|
|
|
function changeType(item: any) {
|
|
currentMsgType.value = item.value
|
|
likeParamsType.value = '4'
|
|
replyParamsType.value = '3'
|
|
getList()
|
|
}
|
|
function handleSelect(item: any, type: string) {
|
|
if (type === 'like') {
|
|
likeParamsType.value = item.value
|
|
}
|
|
else {
|
|
replyParamsType.value = item.value
|
|
}
|
|
getList()
|
|
}
|
|
// 一键已读
|
|
async function onAllRead() {
|
|
try {
|
|
const res = await request.get('/advice/readAll')
|
|
if (res.code === 200) {
|
|
getList()
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="bg-[#f0f1f5] w-full flex items-center justify-center"
|
|
:style="{ height: `calc(100vh - 48px)` }"
|
|
>
|
|
<div
|
|
class="card w-[1036px] min-h-[500px] m-auto rounded-lg flex border border-solid border-gray-200"
|
|
:style="{ height: `calc(100vh - 100px)` }"
|
|
>
|
|
<div
|
|
class="w-[287px] bg-white p-3 box-content rounded-l-lg text-gray-600 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="p-3 text-xl">
|
|
通知
|
|
</div>
|
|
|
|
<div
|
|
v-for="(item, index) in MsgTypeList"
|
|
:key="index"
|
|
class="msg-item"
|
|
:style="{ background: item.value === currentMsgType ? '#f5f6fa' : '' }"
|
|
@click="changeType(item)"
|
|
>
|
|
<!-- <Volume2 size="18" /> -->
|
|
<!-- <MessageSquareMore size="18" /> -->
|
|
<!-- <Heart size="18" /> -->
|
|
<!-- <UserPlus
|
|
size="18"
|
|
:style="{ color: item.value === currentMsgType ? '#3541ec' : '' }"
|
|
class="mr-2"
|
|
/> -->
|
|
|
|
<component
|
|
:is="item.LucideIcon"
|
|
size="18"
|
|
:style="{ color: item.value === currentMsgType ? '#3541ec' : '' }"
|
|
class="mr-2"
|
|
/>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex py-2 cursor-pointer justify-center">
|
|
<div class="flex justify-center items-center cursor-pointer" @click="onAllRead">
|
|
<Check size="14" class="mr-1" />
|
|
一键已读
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-content p-3 flex-1">
|
|
<div class="w-full h-10 flex justify-end items-center cursor-pointer relative">
|
|
<div class="group py-2">
|
|
<template v-if="currentMsgType === 'reply' || currentMsgType === 'like'">
|
|
全部通知
|
|
<n-icon size="14" class="ml-1">
|
|
<ChevronDown />
|
|
</n-icon>
|
|
</template>
|
|
|
|
<div
|
|
v-if="currentMsgType === 'reply'"
|
|
class="absolute right-0 top-[30px] hidden group-hover:block text-[#000000] text-[12px] bg-white rounded-lg text-center px-2 py-2 w-20 mt-2 shadow-lg z-10"
|
|
>
|
|
<div
|
|
v-for="(item, index) in replyParamsTypeList"
|
|
:key="index"
|
|
:style="{
|
|
color: item.value === replyParamsType ? '#3a75f6' : '',
|
|
}"
|
|
class="hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(item, 'reply')"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="currentMsgType === 'like'"
|
|
class="absolute right-0 top-[30px] hidden group-hover:block text-[#000000] text-[12px] bg-white rounded-lg text-center px-2 py-2 w-20 mt-2 shadow-lg z-10"
|
|
>
|
|
<div
|
|
v-for="(item, index) in likeParamsTypeList"
|
|
:key="index"
|
|
:style="{
|
|
color: item.value === likeParamsType ? '#3a75f6' : '',
|
|
}"
|
|
class="hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(item, 'like')"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 overflow-y-auto" :style="{ height: `calc(100% - 48px)` }">
|
|
<OfficialMsg v-if="currentMsgType === 'official'" />
|
|
<ReplyMsg v-if="currentMsgType === 'reply'" :data-list="allList.reply" />
|
|
<LikeMsg v-if="currentMsgType === 'like'" :data-list="allList.like" />
|
|
<AttentionMsg
|
|
v-if="currentMsgType === 'attention'"
|
|
:data-list="allList.attention"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.msg-item {
|
|
@apply h-14 flex items-center mb-2 py-3 pl-6 rounded-lg cursor-pointer;
|
|
@apply hover:bg-[#f5f6fa];
|
|
}
|
|
.card {
|
|
@apply rounded-lg overflow-hidden transition-all duration-300;
|
|
@apply [box-shadow:0_0_20px_0_rgba(0,0,0,0.05)];
|
|
@apply hover:bg-[#f5f6fa] hover:[box-shadow:0_0_20px_0_rgba(0,0,0,0.1)];
|
|
}
|
|
</style>
|