blog_front/src/views/blog/HomePageView.vue

<template>
    <div class="main">
        <div class="mainContent" v-for="article in displayedData">
            <div class="blogs" v-if="article.blogtitle">
                <a-badge-ribbon :text=article.typename color="black">
                    <a-card hoverable>
                        <h2>{{ article.blogtitle }}</h2>
                        <div class="tag-group">
                            <a-tag color="#E6E6FA">
                                <template #icon>
                                    <component :is=iconComponents.RiLiLined />
                                </template>
                                {{ article.create_at }}
                            </a-tag>
                            <a-tag color="#6495ED">
                                <template #icon>
                                    <component :is=iconComponents.YanJingLined />
                                </template>
                                {{ 111 }}
                            </a-tag>
                            <a-tag color="#B0C4DE">
                                <template #icon>
                                    <component :is=iconComponents.XieZiLined />
                                </template>
                                字数≈{{ article.wordcount }}字
                            </a-tag>
                            <a-tag color="#20B2AA">
                                <template #icon>
                                    <component :is=iconComponents.YueDuLined />
                                </template>
                                阅读时长≈{{ article.blogcontent?.length }}分
                            </a-tag>
                        </div>
                        <div class="blog-content">
                            <div>
                                <a-image :preview="false" :width="200" :src=article.imglink />
                            </div>
                            <div class="text-container">
                                {{ article.blogcontent }}
                            </div>
                        </div>
                        <div class="read-button">
                            <a-button type="primary" shape="round" @click="readMoreBlog(article.id)">阅读全文</a-button>
                        </div>
                        <hr class="custom-line">
                        <div>
                            <a-tag :color=randomColor() v-for="label in JSON.parse(article.labelnames)">{{ label
                                }}</a-tag>
                        </div>
                    </a-card>
                </a-badge-ribbon>
            </div>
            <div class="diarys" v-else>
                <a-badge-ribbon :text=article.typename color="black">
                    <a-card hoverable>
                        <h2>{{ article.diarytitle }}</h2>
                        <div class="tag-group">
                            <a-tag color="#E6E6FA">
                                <template #icon>
                                    <component :is=iconComponents.RiLiLined />
                                </template>
                                {{ article.create_at }}
                            </a-tag>
                            <a-tag color="#6495ED">
                                <template #icon>
                                    <component :is=iconComponents.YanJingLined />
                                </template>
                                {{ 1111 }}
                            </a-tag>
                            <a-tag color="#B0C4DE">
                                <template #icon>
                                    <component :is=iconComponents.XieZiLined />
                                </template>
                                字数≈{{ article.wordcount }}字
                            </a-tag>
                            <a-tag color="#20B2AA">
                                <template #icon>
                                    <component :is=iconComponents.YueDuLined />
                                </template>
                                阅读时长≈{{ 111 }}分
                            </a-tag>
                        </div>
                        <div class="blog-content">
                            <div>
                                <a-image :preview="false" :width="1000" :height="500" :src=article.imglink />
                            </div>
                        </div>
                        <div class="read-button">
                            <a-button type="primary" shape="round" @click="readMoreDiary(article.id)">阅读全文</a-button>
                        </div>

                    </a-card>
                </a-badge-ribbon>
            </div>
        </div>

        <div class="loadbutton" v-if="showLoadMoreButton">
            <a-button @click="loadMore" class="ripple-button" :loading="loading" type="primary">
                {{ loading ? '加载中...' : '加载更多' }}
            </a-button>
        </div>
        <div class="is-null" v-if="homepageStore.isEmpty">
            <a-card hoverable>
                <a-empty description="没有数据" />
            </a-card>
        </div>
    </div>

</template>

<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue';
import type { homePageInterface } from '@/api';
import iconComponents from "@/assets/index"
import { get } from '@/tools/request';
import router from '@/router';
import { homePageStore } from '@/stores';
const homepageStore = homePageStore();
const randomColor = () => {
    const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
    return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
}

const readMoreBlog = (id: any) => {
    router.push(`/blog/${id}`)
}
const readMoreDiary = (id: any) => {
    router.push(`/diary/${id}`)
}
// const homepagelist = ref<homePageInterface[]>([])
const displayedData = ref<any[]>([]); // 存储当前显示的部分数据
const itemsPerPage = 10; // 每次加载的条目数
let currentIndex = 0; // 当前显示数据的索引位置
const showNextBatch = () => {
    const end = currentIndex + itemsPerPage;
    displayedData.value = homepageStore.homepagelist.slice(0, end);
    currentIndex = end;

    // 控制加载更多按钮的显示与隐藏
    showLoadMoreButton.value = currentIndex < homepageStore.homepagelist.length;
};

// 加载更多按钮的显示与隐藏
const showLoadMoreButton = ref<boolean>(true);

// 点击加载更多按钮时触发加载下一批数据
const loading = ref(false)
const loadMore = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        showNextBatch();
    }, 1500)

};

// const homePageList = async () => {
//     await get(
//         "/statistics/homepage"
//     ).then(response => {
//         homepagelist.value = response.data.data
//         showNextBatch();
//     })
// }
onMounted(() => {
    // homePageList()
    homepageStore.fetchHomePageList();
})
watch(() => homepageStore.homepagelist, () => {
    // 当 homepagelist 更新时，重新显示第一页数据
    currentIndex = 0;
    showNextBatch();
},);
</script>

<style scoped>
.main {

    width: 45%;
    margin: 0 24px;
}


.main h2 {
    text-align: center;
}

.main .tag-group {
    display: flex;
    justify-content: center;
}

.main .tag-group>* {
    color: black;
    margin: 0 12px;
}

.main .blog-content {
    display: flex;
    margin: 48px;
}

.main .blog-content>:first-child {
    padding: 4px;
    border: 2px solid #ccc;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main .blog-content>:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    /* 防止文本换行 */
}

.main .read-button {
    display: flex;
    justify-content: center;

}

.main .read-button button {
    color: #fff;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    /* 初始背景颜色 */
    animation: colorChange 3s infinite alternate;
    /* 添加颜色变化的动画 */
}

.mainContent .blogs,
.mainContent .diarys {
    margin: 0 0 24px 0;
}

.custom-line {
    border: 0;
    height: 1px;
    background: #d9d6d6;
    margin: 48px 0 24px 0;
}

@keyframes colorChange {
    0% {
        background-color: #007bff;
        /* 初始颜色 */
    }

    50% {
        background-color: #ff7e5f;
        /* 中间颜色 */
    }

    100% {
        background-color: #feb47b;
        /* 结束颜色 */
    }
}

.main .text-container {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 2;
    margin-left: 24px;

}

.loadbutton {
    display: flex;
    justify-content: right;
    margin-bottom: 24px;
}
</style>