mirror of https://github.com/rocboss/paopao-ce
2. 移除重复代码，提升代码可维护性 3. 优化取消关注后的列表刷新逻辑 4. 修复 dialog 实例传递问题 5. 迁移 useUserAction 到 composables 目录pull/706/head
orzi
6 months ago
parent
7a2e7ebfc4
commit
f09fddc744
@ -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>
|
||||||
@ -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