mirror of https://github.com/rocboss/paopao-ce
orzi
6 months ago
parent
e8a8485b47
commit
7a2e7ebfc4
@ -1,458 +0,0 @@
|
||||
<template>
|
||||
<div class="post-item">
|
||||
<n-thing content-indented>
|
||||
<template #avatar>
|
||||
<n-avatar round :size="30" :src="post.user.avatar" />
|
||||
</template>
|
||||
<template #header>
|
||||
<span class="nickname-wrap">
|
||||
<router-link
|
||||
@click.stop
|
||||
class="username-link"
|
||||
:to="{
|
||||
name: 'user',
|
||||
query: { s: post.user.username },
|
||||
}"
|
||||
>
|
||||
{{ post.user.nickname }}
|
||||
</router-link>
|
||||
</span>
|
||||
<span class="username-wrap"> @{{ post.user.username }} </span>
|
||||
<n-tag
|
||||
v-if="post.is_top"
|
||||
class="top-tag"
|
||||
type="warning"
|
||||
size="small"
|
||||
round
|
||||
>
|
||||
置顶
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="post.visibility == 1"
|
||||
class="top-tag"
|
||||
type="error"
|
||||
size="small"
|
||||
round
|
||||
>
|
||||
私密
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="post.visibility == 2"
|
||||
class="top-tag"
|
||||
type="info"
|
||||
size="small"
|
||||
round
|
||||
>
|
||||
好友可见
|
||||
</n-tag>
|
||||
<div>
|
||||
<span class="timestamp-mobile">
|
||||
{{ formatPrettyDate(post.created_on) }} {{ post.ip_loc }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<div class="item-header-extra">
|
||||
<n-dropdown
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
size="small"
|
||||
:options="tweetOptions"
|
||||
@select="handleTweetAction"
|
||||
>
|
||||
<n-button quaternary circle>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<more-horiz-filled />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<template #description v-if="post.texts.length > 0">
|
||||
<div @click="goPostDetail(post.id)">
|
||||
<span v-for="content in post.texts"
|
||||
:key="content.id"
|
||||
class="post-text"
|
||||
@click.stop="doClickText($event, post.id)"
|
||||
v-html="preparePost(content.content, '展开', '收起', profile.tweetMobileEllipsisSize, inFoldStyle)"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<post-attachment
|
||||
v-if="post.attachments.length > 0"
|
||||
:attachments="post.attachments" />
|
||||
<post-attachment
|
||||
v-if="post.charge_attachments.length > 0"
|
||||
:attachments="post.charge_attachments"
|
||||
:price="post.attachment_price"
|
||||
/>
|
||||
<post-image
|
||||
v-if="post.imgs.length > 0"
|
||||
:imgs="post.imgs" />
|
||||
<post-video
|
||||
v-if="post.videos.length > 0"
|
||||
:videos="post.videos" />
|
||||
<post-link
|
||||
v-if="post.links.length > 0"
|
||||
:links="post.links" />
|
||||
</template>
|
||||
<template #action>
|
||||
<n-space justify="space-between">
|
||||
<div class="opt-item" @click.stop="handlePostStar">
|
||||
<n-icon size="18" class="opt-item-icon">
|
||||
<heart-outline />
|
||||
</n-icon>
|
||||
{{ post.upvote_count }}
|
||||
</div>
|
||||
<div class="opt-item" @click.stop="goPostDetail(post.id)">
|
||||
<n-icon size="18" class="opt-item-icon">
|
||||
<chatbox-outline />
|
||||
</n-icon>
|
||||
{{ post.comment_count }}
|
||||
</div>
|
||||
<div class="opt-item" @click.stop="handlePostCollection">
|
||||
<n-icon size="18" class="opt-item-icon">
|
||||
<bookmark-outline />
|
||||
</n-icon>
|
||||
{{ post.collection_count }}
|
||||
</div>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-thing>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h, ref, computed } from 'vue';
|
||||
import type { Component } from 'vue';
|
||||
import { NIcon, DropdownOption } from 'naive-ui';
|
||||
import { useStoreMain } from '@/store/main';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { formatPrettyDate } from '@/utils/formatTime';
|
||||
import { preparePost } from '@/utils/content';
|
||||
import { postStar, postCollection } from '@/api/post';
|
||||
import {
|
||||
PaperPlaneOutline,
|
||||
HeartOutline,
|
||||
BookmarkOutline,
|
||||
ChatboxOutline,
|
||||
ShareSocialOutline,
|
||||
PersonAddOutline,
|
||||
PersonRemoveOutline,
|
||||
BodyOutline,
|
||||
WalkOutline,
|
||||
} from '@vicons/ionicons5';
|
||||
import { MoreHorizFilled } from '@vicons/material';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useStoreProfile } from '@/store/profile';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const storeMain = useStoreMain();
|
||||
const storeProfile = useStoreProfile();
|
||||
const { profile } = storeToRefs(storeProfile);
|
||||
|
||||
const inFoldStyle = ref<boolean>(true);
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
post: Item.PostProps;
|
||||
isOwner: boolean;
|
||||
addFriendAction: boolean;
|
||||
addFollowAction: boolean;
|
||||
}>(),
|
||||
{},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'send-whisper', user: Item.UserInfo): void;
|
||||
(e: 'handle-follow-action', user: Item.PostProps): void;
|
||||
(e: 'handle-friend-action', user: Item.PostProps): void;
|
||||
}>();
|
||||
|
||||
const renderIcon = (icon: Component) => {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon),
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const tweetOptions = computed(() => {
|
||||
let options: DropdownOption[] = [];
|
||||
if (!props.isOwner) {
|
||||
options.push({
|
||||
label: '私信 @' + props.post.user.username,
|
||||
key: 'whisper',
|
||||
icon: renderIcon(PaperPlaneOutline),
|
||||
});
|
||||
}
|
||||
if (!props.isOwner && props.addFollowAction) {
|
||||
if (props.post.user.is_following) {
|
||||
options.push({
|
||||
label: '取消关注 @' + props.post.user.username,
|
||||
key: 'unfollow',
|
||||
icon: renderIcon(WalkOutline),
|
||||
});
|
||||
} else {
|
||||
options.push({
|
||||
label: '关注 @' + props.post.user.username,
|
||||
key: 'follow',
|
||||
icon: renderIcon(BodyOutline),
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!props.isOwner && props.addFriendAction) {
|
||||
if (props.post.user.is_friend) {
|
||||
options.push({
|
||||
label: '删除好友 @' + props.post.user.username,
|
||||
key: 'delete',
|
||||
icon: renderIcon(PersonRemoveOutline),
|
||||
});
|
||||
} else {
|
||||
options.push({
|
||||
label: '添加朋友 @' + props.post.user.username,
|
||||
key: 'requesting',
|
||||
icon: renderIcon(PersonAddOutline),
|
||||
});
|
||||
}
|
||||
}
|
||||
options.push({
|
||||
label: '复制链接',
|
||||
key: 'copyTweetLink',
|
||||
icon: renderIcon(ShareSocialOutline),
|
||||
});
|
||||
return options;
|
||||
});
|
||||
|
||||
const handleTweetAction = async (
|
||||
item:
|
||||
| 'copyTweetLink'
|
||||
| 'whisper'
|
||||
| 'follow'
|
||||
| 'unfollow'
|
||||
| 'delete'
|
||||
| 'requesting',
|
||||
) => {
|
||||
switch (item) {
|
||||
case 'copyTweetLink':
|
||||
copy(
|
||||
`${window.location.origin}/#/post?id=${post.value.id}&share=copy_link&t=${new Date().getTime()}`,
|
||||
);
|
||||
window.$message.success('链接已复制到剪贴板');
|
||||
break;
|
||||
case 'whisper':
|
||||
emit('send-whisper', props.post.user);
|
||||
break;
|
||||
case 'delete':
|
||||
case 'requesting':
|
||||
emit('handle-friend-action', props.post);
|
||||
break;
|
||||
case 'follow':
|
||||
case 'unfollow':
|
||||
emit('handle-follow-action', props.post);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const post = computed({
|
||||
get: () => {
|
||||
let post: Item.PostComponentProps = Object.assign(
|
||||
{
|
||||
texts: [],
|
||||
imgs: [],
|
||||
videos: [],
|
||||
links: [],
|
||||
attachments: [],
|
||||
charge_attachments: [],
|
||||
},
|
||||
props.post,
|
||||
);
|
||||
post.contents.map((content) => {
|
||||
if (+content.type === 1 || +content.type === 2) {
|
||||
post.texts.push(content);
|
||||
}
|
||||
if (+content.type === 3) {
|
||||
post.imgs.push(content);
|
||||
}
|
||||
if (+content.type === 4) {
|
||||
post.videos.push(content);
|
||||
}
|
||||
if (+content.type === 6) {
|
||||
post.links.push(content);
|
||||
}
|
||||
if (+content.type === 7) {
|
||||
post.attachments.push(content);
|
||||
}
|
||||
if (+content.type === 8) {
|
||||
post.charge_attachments.push(content);
|
||||
}
|
||||
});
|
||||
return post;
|
||||
},
|
||||
set: (newVal) => {
|
||||
props.post.upvote_count = newVal.upvote_count;
|
||||
props.post.collection_count = newVal.collection_count;
|
||||
},
|
||||
});
|
||||
|
||||
const handlePostStar = () => {
|
||||
postStar({
|
||||
id: post.value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status) {
|
||||
post.value = {
|
||||
...post.value,
|
||||
upvote_count: post.value.upvote_count + 1,
|
||||
};
|
||||
} else {
|
||||
post.value = {
|
||||
...post.value,
|
||||
upvote_count:
|
||||
post.value.upvote_count > 0 ? post.value.upvote_count - 1 : 0,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const handlePostCollection = () => {
|
||||
postCollection({
|
||||
id: post.value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status) {
|
||||
post.value = {
|
||||
...post.value,
|
||||
collection_count: post.value.collection_count + 1,
|
||||
};
|
||||
} else {
|
||||
post.value = {
|
||||
...post.value,
|
||||
collection_count:
|
||||
post.value.collection_count > 0
|
||||
? post.value.collection_count - 1
|
||||
: 0,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const goPostDetail = (id: number) => {
|
||||
router.push({
|
||||
name: 'post',
|
||||
query: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
const doClickText = (e: MouseEvent, id: number) => {
|
||||
const detail = (e.target as any).dataset.detail;
|
||||
if (detail && detail !== 'post') {
|
||||
const d = detail.split(':');
|
||||
if (d.length === 2) {
|
||||
storeMain.doRefresh();
|
||||
if (d[0] === 'tag') {
|
||||
router.push({
|
||||
name: 'home',
|
||||
query: {
|
||||
q: d[1],
|
||||
t: 'tag',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
name: 'user',
|
||||
query: {
|
||||
s: d[1],
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (detail && detail === 'post') {
|
||||
inFoldStyle.value = !inFoldStyle.value;
|
||||
} else {
|
||||
goPostDetail(id);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.post-item {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.nickname-wrap {
|
||||
font-size: 14px;
|
||||
}
|
||||
.username-wrap {
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.top-tag {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
.timestamp-mobile {
|
||||
margin-top: 2px;
|
||||
opacity: 0.75;
|
||||
font-size: 11px;
|
||||
}
|
||||
.item-header-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.75;
|
||||
.timestamp {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.post-text {
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.opt-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.7;
|
||||
.opt-item-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: #f7f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.n-thing-avatar {
|
||||
margin-top: 0;
|
||||
}
|
||||
.n-thing-header {
|
||||
line-height: 16px;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
.post-item {
|
||||
&:hover {
|
||||
background: #18181c;
|
||||
}
|
||||
background-color: rgba(16, 16, 20, 0.75);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue