mirror of https://github.com/rocboss/paopao-ce
ROC
7 months ago
committed by
GitHub
commit
107ad5504c
@ -1,168 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="contact-item">
|
|
||||||
<n-thing content-indented>
|
|
||||||
<template #avatar>
|
|
||||||
<n-avatar :size="54" :src="contact.avatar" />
|
|
||||||
</template>
|
|
||||||
<template #header>
|
|
||||||
<span class="nickname-wrap">
|
|
||||||
<router-link
|
|
||||||
@click.stop
|
|
||||||
class="username-link"
|
|
||||||
:to="{
|
|
||||||
name: 'user',
|
|
||||||
query: { s: contact.username },
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ contact.nickname }}
|
|
||||||
</router-link>
|
|
||||||
</span>
|
|
||||||
<span class="username-wrap"> @{{ contact.username }} </span>
|
|
||||||
<!-- <n-tag
|
|
||||||
v-if="contact.is_following"
|
|
||||||
class="top-tag" type="success" size="small" round>
|
|
||||||
已关注
|
|
||||||
</n-tag> -->
|
|
||||||
<div class="user-info">
|
|
||||||
<span class="info-item">
|
|
||||||
UID. {{ contact.user_id }}
|
|
||||||
</span>
|
|
||||||
<span class="info-item">
|
|
||||||
{{ formatDate(contact.created_on) }} 加入
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #header-extra>
|
|
||||||
<div class="item-header-extra">
|
|
||||||
<n-dropdown
|
|
||||||
placement="bottom-end"
|
|
||||||
trigger="click"
|
|
||||||
size="small"
|
|
||||||
:options="actionOpts"
|
|
||||||
@select="handleAction"
|
|
||||||
>
|
|
||||||
<n-button quaternary circle>
|
|
||||||
<template #icon>
|
|
||||||
<n-icon>
|
|
||||||
<more-horiz-filled />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</n-button>
|
|
||||||
</n-dropdown>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-thing>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { h, computed } from 'vue';
|
|
||||||
import { NIcon, DropdownOption } from 'naive-ui';
|
|
||||||
import type { Component } from 'vue';
|
|
||||||
import { formatDate } from '@/utils/formatTime';
|
|
||||||
import { MoreHorizFilled } from '@vicons/material';
|
|
||||||
import { PaperPlaneOutline } from '@vicons/ionicons5';
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'send-whisper', user: Item.UserInfo): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const renderIcon = (icon: Component) => {
|
|
||||||
return () => {
|
|
||||||
return h(NIcon, null, {
|
|
||||||
default: () => h(icon),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
contact: Item.ContactItemProps;
|
|
||||||
}>(),
|
|
||||||
{},
|
|
||||||
);
|
|
||||||
|
|
||||||
const actionOpts = computed(() => {
|
|
||||||
let options: DropdownOption[] = [
|
|
||||||
{
|
|
||||||
label: '私信 @' + props.contact.username,
|
|
||||||
key: 'whisper',
|
|
||||||
icon: renderIcon(PaperPlaneOutline),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return options;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleAction = (item: 'whisper') => {
|
|
||||||
switch (item) {
|
|
||||||
case 'whisper':
|
|
||||||
const user: Item.UserInfo = {
|
|
||||||
id: props.contact.user_id,
|
|
||||||
avatar: props.contact.avatar,
|
|
||||||
username: props.contact.username,
|
|
||||||
nickname: props.contact.nickname,
|
|
||||||
is_admin: false,
|
|
||||||
is_friend: true,
|
|
||||||
is_following: false,
|
|
||||||
created_on: 0,
|
|
||||||
follows: 0,
|
|
||||||
followings: 0,
|
|
||||||
status: 1,
|
|
||||||
};
|
|
||||||
emit('send-whisper', user);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.contact-item {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
padding-top: 12px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f7f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nickname-wrap {
|
|
||||||
line-height: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.username-wrap {
|
|
||||||
line-height: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-tag {
|
|
||||||
transform: scale(0.75);
|
|
||||||
}
|
|
||||||
.user-info {
|
|
||||||
.info-item {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
margin-right: 8px;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-header-extra {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
.contact-item {
|
|
||||||
&:hover {
|
|
||||||
background: #18181c;
|
|
||||||
}
|
|
||||||
background-color: rgba(16, 16, 20, 0.75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<n-space v-if="totalPage > 0" justify="center">
|
||||||
|
<InfiniteLoading
|
||||||
|
class="load-more"
|
||||||
|
:slots="{ complete: completeText, error: '加载出错' }"
|
||||||
|
@infinite="handleInfinite"
|
||||||
|
>
|
||||||
|
<template #spinner>
|
||||||
|
<div class="load-more-wrap">
|
||||||
|
<n-spin :size="14" v-if="!noMore" />
|
||||||
|
<span class="load-more-spinner">{{ noMore ? completeText : '加载更多' }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</InfiniteLoading>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import InfiniteLoading from 'v3-infinite-loading';
|
||||||
|
|
||||||
|
withDefaults(defineProps<{
|
||||||
|
totalPage: number;
|
||||||
|
noMore: boolean;
|
||||||
|
completeText?: string;
|
||||||
|
}>(), {
|
||||||
|
completeText: '没有更多了',
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'load-more'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const handleInfinite = () => {
|
||||||
|
emit('load-more');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.load-more {
|
||||||
|
margin: 20px;
|
||||||
|
|
||||||
|
.load-more-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
|
||||||
|
.load-more-spinner {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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>
|
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通用分页逻辑 composable
|
||||||
|
* 保持与原有代码完全一致的行为
|
||||||
|
*/
|
||||||
|
export function usePagination(initialPageSize: number = 20) {
|
||||||
|
const loading = ref(false);
|
||||||
|
const noMore = ref(false);
|
||||||
|
const page = ref(1);
|
||||||
|
const pageSize = ref(initialPageSize);
|
||||||
|
const totalPage = ref(0);
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
loading.value = false;
|
||||||
|
noMore.value = false;
|
||||||
|
page.value = 1;
|
||||||
|
totalPage.value = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextPage = (loadCallback: () => void) => {
|
||||||
|
if (page.value < totalPage.value || totalPage.value == 0) {
|
||||||
|
noMore.value = false;
|
||||||
|
page.value++;
|
||||||
|
loadCallback();
|
||||||
|
} else {
|
||||||
|
noMore.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
noMore,
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
totalPage,
|
||||||
|
reset,
|
||||||
|
nextPage,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Post 内容解析 composable
|
||||||
|
* 将 post.contents 按类型分类到 texts, imgs, videos, links, attachments, charge_attachments
|
||||||
|
* 保持与原有代码完全一致的行为
|
||||||
|
*/
|
||||||
|
export function usePostContent(post: Item.PostProps, includeExtraFields: boolean = false) {
|
||||||
|
return computed({
|
||||||
|
get: () => {
|
||||||
|
let postData: Item.PostComponentProps = Object.assign(
|
||||||
|
{
|
||||||
|
texts: [],
|
||||||
|
imgs: [],
|
||||||
|
videos: [],
|
||||||
|
links: [],
|
||||||
|
attachments: [],
|
||||||
|
charge_attachments: [],
|
||||||
|
},
|
||||||
|
post,
|
||||||
|
);
|
||||||
|
postData.contents.map((content) => {
|
||||||
|
if (+content.type === 1 || +content.type === 2) {
|
||||||
|
postData.texts.push(content);
|
||||||
|
}
|
||||||
|
if (+content.type === 3) {
|
||||||
|
postData.imgs.push(content);
|
||||||
|
}
|
||||||
|
if (+content.type === 4) {
|
||||||
|
postData.videos.push(content);
|
||||||
|
}
|
||||||
|
if (+content.type === 6) {
|
||||||
|
postData.links.push(content);
|
||||||
|
}
|
||||||
|
if (+content.type === 7) {
|
||||||
|
postData.attachments.push(content);
|
||||||
|
}
|
||||||
|
if (+content.type === 8) {
|
||||||
|
postData.charge_attachments.push(content);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return postData;
|
||||||
|
},
|
||||||
|
set: (newVal) => {
|
||||||
|
post.upvote_count = newVal.upvote_count;
|
||||||
|
post.collection_count = newVal.collection_count;
|
||||||
|
if (includeExtraFields) {
|
||||||
|
post.comment_count = newVal.comment_count;
|
||||||
|
post.is_essence = newVal.is_essence;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in new issue