600 lines
19 KiB
Vue
600 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import { commonApi } from "@/api/common";
|
|
import { Close, DiamondSharp, PersonAddOutline } from '@vicons/ionicons5';
|
|
|
|
import {
|
|
CircleUser,
|
|
Download,
|
|
EllipsisVertical, Heart, Play
|
|
} from 'lucide-vue-next';
|
|
// import { NConfigProvider, NMessageProvider } from 'naive-ui';
|
|
import { nextTick, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const userStore = useUserStore();
|
|
const message = useMessage()
|
|
|
|
const router = useRouter()
|
|
// 用于版本tabs当前选中的选项卡
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
// const userStore = useUserStore()
|
|
const route = useRoute()
|
|
const { id } = route.params as { id: string }
|
|
const activeTab = ref(null)
|
|
const commentHeight = ref(800)
|
|
const detailsInfo = ref({})
|
|
const currentUserInfo = ref<any>({})
|
|
const isVisibleReport = ref(false);
|
|
|
|
// 先获取用户信息 再获取版本信息
|
|
const versionByWorkInfo = ref([])
|
|
async function getInfo() {
|
|
try {
|
|
const res = await request.get(`/WorkFlow/selectWorkFlowById?id=${id}&type=1`)
|
|
if (res.code === 200) {
|
|
detailsInfo.value = res.data
|
|
// 1翻译
|
|
try {
|
|
const res1 = await request.get(
|
|
`/WorkFlowVersion/selectVersionByWorkId?workId=${res.data.id}`, // 获取版本
|
|
)
|
|
if (res1.code === 200 && res1.data.length > 0) {
|
|
versionByWorkInfo.value = res1.data
|
|
versionByWorkInfo.value.forEach((item) => {
|
|
item.imagePathsList = item.imagePaths.split(',')
|
|
})
|
|
nextTick(() => {
|
|
activeTab.value = versionByWorkInfo.value[0].id
|
|
})
|
|
// const commentRes = await request.get(`/WorkFlowComment/comment/${res.data.id}`)
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
// 获取当前作品的用户信息
|
|
try {
|
|
const res = await request.get(`/system/user/selectUserById?id=${detailsInfo.value.userId}`)
|
|
if (res.code === 200) {
|
|
currentUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
getAttention()
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
getInfo()
|
|
|
|
// 获取用户点赞/粉丝/关注数量
|
|
interface SelectUserInfo {
|
|
likeCount: number
|
|
bean: number
|
|
download: number
|
|
attention: number
|
|
}
|
|
const selectUserInfo = ref<SelectUserInfo>({
|
|
likeCount: 0,
|
|
bean: 0,
|
|
download: 0,
|
|
attention: 0,
|
|
})
|
|
|
|
// 获取点赞粉丝等的数量
|
|
async function getAttention() {
|
|
try {
|
|
const res = await request.get(`/attention/selectUserInfo?userId=${detailsInfo.value.userId}`)
|
|
if (res.code === 200) {
|
|
selectUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 举报/编辑/删除
|
|
const isDelete = ref(false)
|
|
async function handleSelect(event: Event, type: string) {
|
|
event.stopPropagation() // 阻止事件冒泡
|
|
if (type === 'report') {
|
|
// await request.get(`/WorkFlow/report?id=${id}`) // 举报
|
|
isVisibleReport.value = true;
|
|
}
|
|
else if (type === 'edit') {
|
|
router.push({
|
|
path: `/publish-workflow`,
|
|
query: {
|
|
type: 'edit',
|
|
id: detailsInfo.value.id,
|
|
},
|
|
})
|
|
}
|
|
else {
|
|
isDelete.value = true
|
|
}
|
|
}
|
|
|
|
// 删除
|
|
async function onDelete() {
|
|
try {
|
|
const res = await request.get(`/WorkFlow/deleteWorkFlow?id=${detailsInfo.value.id}`)
|
|
if (res.code === 200) {
|
|
message.success('删除成功')
|
|
isDelete.value = false
|
|
router.push('/personal-center')
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 关注用户/取消关注
|
|
async function onChangeAttention() {
|
|
try {
|
|
const res = await request.get(`/attention/addAttention?userId=${detailsInfo.value.userId}`)
|
|
if (res.code === 200) {
|
|
if (res.data) {
|
|
detailsInfo.value.isAttention = 1
|
|
message.success('关注成功')
|
|
}
|
|
else {
|
|
detailsInfo.value.isAttention = 0
|
|
message.success('取消关注成功')
|
|
}
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 点赞
|
|
async function onLike() {
|
|
try {
|
|
const res = await request.get(`/WorkFlowComment/like?workFlowId=${detailsInfo.value.id}`)
|
|
if (res.code === 200) {
|
|
detailsInfo.value.isLike === 0 ? detailsInfo.value.isLike = 1 : detailsInfo.value.isLike = 0
|
|
if (detailsInfo.value.isLike === 0) {
|
|
message.success('取消点赞成功')
|
|
}
|
|
else {
|
|
message.success('点赞成功')
|
|
}
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
|
|
// 举报
|
|
const reportParams = ref({
|
|
reportId: undefined,
|
|
text: "",
|
|
type:3
|
|
});
|
|
const reportList = ref([]);
|
|
async function getDictType() {
|
|
try {
|
|
const res = await commonApi.dictType({ type: "report_type" });
|
|
if (res.code === 200) {
|
|
reportList.value = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
getDictType();
|
|
function handleChange(item: any) {
|
|
reportParams.value.reportId = item.dictValue;
|
|
if (item.dictValue !== "5") {
|
|
reportParams.value.text = "";
|
|
}
|
|
console.log("object", reportParams.value);
|
|
}
|
|
|
|
function closeReport() {
|
|
isVisibleReport.value = false;
|
|
}
|
|
|
|
async function onReport(){
|
|
if( reportParams.value.reportId !== undefined){
|
|
reportParams.value.productId = detailsInfo.value.id
|
|
try{
|
|
const res = await request.post('/report/addReport', reportParams.value)
|
|
if(res.code === 200){
|
|
message.success("举报成功");
|
|
closeReport()
|
|
}
|
|
}catch(err){
|
|
console.log(err);
|
|
}
|
|
}
|
|
}
|
|
|
|
function toPersonalCenter(){
|
|
const baseUrl = window.location.origin
|
|
if(userStore?.userInfo?.userId === detailsInfo.value.userId){
|
|
window.open(`${baseUrl}/personal-center`, '_blank', 'noopener,noreferrer')
|
|
}else{
|
|
window.open(`${baseUrl}/personal-publish?userId=${detailsInfo.value.userId}`, '_blank', 'noopener,noreferrer')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center">
|
|
<div class="w-[1125px] p-4">
|
|
<div class="flex items-center">
|
|
<div class="text-[26px] font-bold mr-4">
|
|
{{ detailsInfo.workflowName }}
|
|
</div>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<component :is="Play" class="h-[14px] w-[14px] text-black menu-icon m-1" />
|
|
<span> {{ detailsInfo.useNumber }} </span>
|
|
</div>
|
|
</template>
|
|
在线生成数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full mx-4">
|
|
<component
|
|
:is="Download"
|
|
class="h-[14px] w-[14px] text-black menu-icon m-1"
|
|
/>
|
|
<span> {{ detailsInfo.downloadNumber }} </span>
|
|
</div>
|
|
</template>
|
|
下载数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<!-- <img src="@/assets/img/heart.png" class="w-[14px] h-[14px] mr-1" alt=""> -->
|
|
<component
|
|
:is="Heart"
|
|
class="h-[12px] w-[12px] mr-1 text-[#000]"
|
|
/>
|
|
<span>{{ detailsInfo.likeCount }} </span>
|
|
</div>
|
|
</template>
|
|
点赞数
|
|
</n-tooltip>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-3 mb-5">
|
|
<div
|
|
v-for="(item, index) in detailsInfo.typeList"
|
|
:key="index"
|
|
class="text-[12px] bg-[#ebf2fe] p-1 px-2 text-[#557abf] mr-4 rounded-md"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full gap-1">
|
|
<div class="w-2/3">
|
|
<div class="w-full">
|
|
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
<n-tab-pane
|
|
v-for="(item, index) in versionByWorkInfo"
|
|
:key="index"
|
|
:name="item.id"
|
|
:tab="item.versionName"
|
|
>
|
|
<!-- 显示最后一步上传图片的图片 -->
|
|
<div class="grid grid-cols-2 gap-2.5 box-border">
|
|
<img
|
|
v-for="(subItem, subIndex) in item.imagePathsList"
|
|
:key="subIndex"
|
|
:src="subItem"
|
|
class="w-full h-[300px]"
|
|
alt=""
|
|
>
|
|
</div>
|
|
|
|
<div v-if="detailsInfo.original === 1" class="font-bold text-[20px] my-6">
|
|
转载自作者: {{ detailsInfo.authorName }}
|
|
</div>
|
|
<!-- 富文本中输入的文字 图片 -->
|
|
<div class="w-full">
|
|
<div v-html="item.versionDescription" />
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
<div class="mt-4">
|
|
<client-only>
|
|
<div style="padding: 20px">
|
|
<BaseComment v-if="detailsInfo.id" type="workflow" :height="commentHeight" :details-info="detailsInfo" />
|
|
|
|
<!-- <NConfigProvider>
|
|
<NMessageProvider>
|
|
<BaseComment v-if="detailsInfo.id" type="workflow" :height="commentHeight" :details-info="detailsInfo" />
|
|
</NMessageProvider>
|
|
</NConfigProvider> -->
|
|
</div>
|
|
</client-only>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/3 mt-3">
|
|
<div
|
|
class="flex justify-between text-[#a3a1a1] text-[12px] items-center -ml-60"
|
|
>
|
|
<div class="flex justify-end">
|
|
<div v-if="detailsInfo.createTime" class="mr-2">
|
|
首发时间{{ detailsInfo.createTime }}
|
|
</div>
|
|
<div v-if="detailsInfo.updateTime">
|
|
更新时间：{{ detailsInfo.updateTime }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center relative">
|
|
<!-- <img
|
|
src="@/assets/img/heart.png"
|
|
class="w-[14px] h-[14px] cursor-pointer"
|
|
alt=""
|
|
> -->
|
|
<n-icon size="20" :color="detailsInfo.isLike === 0 ? '#ccc' : '#ff0000'" @click="onLike">
|
|
<Heart class="cursor-pointer" />
|
|
</n-icon>
|
|
<div class="group relative">
|
|
<component
|
|
:is="EllipsisVertical"
|
|
class="h-[18px] w-[48px] text-[#557abf] cursor-pointer"
|
|
/>
|
|
<div
|
|
class="absolute right-0 top-[10px] 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 class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg" @click="(event) => handleSelect(event, 'report')">
|
|
举报
|
|
</div>
|
|
<template v-if="userStore?.userInfo?.userId === detailsInfo.userId">
|
|
<div
|
|
class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(event, 'edit')"
|
|
>
|
|
编辑
|
|
</div>
|
|
<div class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg" @click="(event) => handleSelect(event, 'delete')">
|
|
删除
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center mt-10 p-2 bg-[#f3f5f9] w-full rounded-md h-[80px] box-border"
|
|
>
|
|
<div class="w-[60px] h-[60px] rounded-full overflow-hidden mr-4">
|
|
<!-- <img
|
|
src="@/assets/img/default-avatar.png"
|
|
class="w-full h-full mr-2 block"
|
|
alt=""
|
|
> -->
|
|
<client-only>
|
|
<NAvatar
|
|
@click="toPersonalCenter"
|
|
class="w-full h-full mr-2 block cursor-pointer"
|
|
round
|
|
size="small"
|
|
:src="currentUserInfo.avatar"
|
|
/>
|
|
</client-only>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<client-only>
|
|
<div class="text[20px] font-bold">
|
|
{{ currentUserInfo.nickName }}
|
|
</div>
|
|
</client-only>
|
|
<!-- 0代表原创 1代表转载 -->
|
|
<div v-if="detailsInfo.original === 0" class="original">
|
|
<n-icon size="14" class="mr-2">
|
|
<DiamondSharp />
|
|
</n-icon>
|
|
原创作者
|
|
</div>
|
|
</div>
|
|
<client-only>
|
|
<div class="flex-1 flex justify-end" v-if="userStore?.userInfo?.userId !== detailsInfo.userId">
|
|
<div class="flex items-center font-bold px-1 justify-center w-20 h-8 rounded-full text-[#426af7] border border-[#426af7] border-solid cursor-pointer" @click="onChangeAttention">
|
|
<n-icon v-if="detailsInfo.isAttention === 0" size="16" class="mr-2">
|
|
<PersonAddOutline />
|
|
</n-icon>
|
|
{{ detailsInfo.isAttention === 1 ? '已关注' : '关注' }}
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
</div>
|
|
|
|
<div class="flex items-center text-[#969798]">
|
|
<component
|
|
:is="CircleUser"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798] m-0"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.bean }} </span>
|
|
<!-- <component
|
|
:is="HardDriveUpload"
|
|
class="h-[12px] w-[14px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> 2 </span> -->
|
|
<component
|
|
:is="Play"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.productNum }} </span>
|
|
<component
|
|
:is="Download"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.modelDownloadNum }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 不支持的bg #b1b2b2 -->
|
|
<div
|
|
class="flex items-center justify-center mt-4 w-full h-14 text-white bg-[#3c7af6] w-full rounded-md h-[50px] cursor-pointer"
|
|
>
|
|
<component
|
|
:is="Play"
|
|
class="h-[20px] w-[20px] text-white menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1"> 立即生图 </span>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#eceef4] w-full rounded-md h-[50px] cursor-pointer hover:bg-[#f1f2f7]"
|
|
>
|
|
<component
|
|
:is="Download"
|
|
class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1"> 下载 (122.22MB) </span>
|
|
</div>
|
|
|
|
<!-- <div style="background: linear-gradient(135deg,#3cc9ff, #8fa6ff, 41%, #d8b4ff 74%,#326bff)" class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#fff] w-full rounded-md h-[80px] cursor-pointer hover:bg-[#f1f2f7]">
|
|
<component :is="Download" class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]" />
|
|
<span class="mr-1">
|
|
下载客户端
|
|
</span>
|
|
</div> -->
|
|
<n-modal
|
|
v-model:show="isDelete"
|
|
:mask-closable="false"
|
|
preset="dialog"
|
|
title="提示！"
|
|
content="确定要将工作流删除? 工作流删除后无法找回"
|
|
negative-text="取消"
|
|
positive-text="确认"
|
|
@negative-click="onDelete"
|
|
@positive-click="onDelete"
|
|
/>
|
|
|
|
<n-modal
|
|
v-model:show="isVisibleReport"
|
|
:preset="null"
|
|
:mask-closable="false"
|
|
transform-origin="center"
|
|
class="custom-modal"
|
|
>
|
|
<div class="bg-white rounded-xl p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-xl">举报</div>
|
|
<div>
|
|
<n-icon size="20" class="mr-2 cursor-pointer" @click="closeReport">
|
|
<Close />
|
|
</n-icon>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<n-radio
|
|
class="m-4 text-[#fff000]"
|
|
size="large"
|
|
v-for="(item, index) in reportList"
|
|
:key="index"
|
|
:checked="reportParams.reportId === item.dictValue"
|
|
value="Definitely Maybe"
|
|
name="basic-demo"
|
|
@change="handleChange(item)"
|
|
>
|
|
{{ item.dictLabel }}
|
|
</n-radio>
|
|
<n-input
|
|
v-if="reportParams.reportId !== undefined && reportParams.reportId === '5'"
|
|
v-model:value="reportParams.text"
|
|
placeholder="点击输入"
|
|
type="textarea"
|
|
:autosize="{
|
|
minRows: 5,
|
|
maxRows: 10,
|
|
}"
|
|
/>
|
|
<div
|
|
@click="onReport"
|
|
class="mt-4 w-[100%] h-10 flex rounded-lg text-white items-center justify-center cursor-pointer"
|
|
:class="[
|
|
reportParams.reportId !== undefined
|
|
? 'bg-[#4c79ee]'
|
|
: 'bg-[#cccccc]',
|
|
]"
|
|
>
|
|
确认
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-modal>
|
|
<div />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.header-num {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
}
|
|
.header-tag {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
display: flex;
|
|
align-self: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab,
|
|
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab {
|
|
color: #949494;
|
|
}
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,
|
|
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
|
|
color: #000;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.n-tabs .n-tabs-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #173eff 0%, #1b7dff 100%);
|
|
border-radius: 2px;
|
|
transition:
|
|
left 0.2s var(--n-bezier),
|
|
max-width 0.2s var(--n-bezier),
|
|
opacity 0.3s var(--n-bezier),
|
|
background-color 0.3s var(--n-bezier);
|
|
}
|
|
.original{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 2px 0;
|
|
padding: 2px 0;
|
|
width: 90px;
|
|
color: #aa8645;
|
|
font-weight: 400;
|
|
background: linear-gradient(94.11deg, #efd6a9 10.52%, #f0dcbc 107.96%);
|
|
border-radius: 4px;
|
|
transform: skew(-10deg);
|
|
}
|
|
</style>
|