273 lines
7.3 KiB
Vue
273 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, 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
|
|
class="msg-item"
|
|
:style="{ background: item.value === currentMsgType ? '#f5f6fa' : '' }"
|
|
v-for="(item, index) in MsgTypeList"
|
|
:key="index"
|
|
@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"
|
|
:style="{
|
|
color: item.value === replyParamsType ? '#3a75f6' : '',
|
|
}"
|
|
:key="index"
|
|
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"
|
|
:style="{
|
|
color: item.value === likeParamsType ? '#3a75f6' : '',
|
|
}"
|
|
:key="index"
|
|
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>
|