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