Kisechan/Mainpage
1
0
Fork 0
mirror of https://github.com/Kisechan/Mainpage.git synced 2025-07-09 14:47:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加加载状态指示器，优化友链列表渲染逻辑，确保数据加载完成后显示内容

Browse Source
This commit is contained in:
Kisechan
2025-03-05 23:07:23 +08:00
parent e90753a878
commit 3c96ba8ae7
1 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/LinksView.vue
View File

@ -1,35 +1,41 @@
<template> <template>
<div class="friend-links"> <div class="friend-links">
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="10" animated />
</div>
<!-- 友链列表 --> <!-- 友链列表 -->
<el-card <template v-else>
v-for="(category, categoryIndex) in friendLinks" <div>
:key="categoryIndex"
class="category-card"
>
<template #header>
<div class="category-header">{{ category.category }}</div>
</template>
<div class="links-container">
<el-card <el-card
v-for="(link, linkIndex) in category.links" v-for="(category, categoryIndex) in friendLinks"
:key="linkIndex" :key="categoryIndex"
class="link-card" class="category-card"
@mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
@mouseleave="resetEffect"
:style="cardStyle(`${categoryIndex}-${linkIndex}`)"
@click="openLink(link.url)"
> >
<div class="link-content"> <template #header>
<el-avatar :src="link.avatar" class="link-avatar" /> <div class="category-header">{{ category.category }}</div>
<div class="link-info"> </template>
<div class="link-title">{{ link.title }}</div> <div class="links-container">
<div class="link-description">{{ link.description }}</div> <el-card
</div> v-for="(link, linkIndex) in category.links"
:key="linkIndex"
class="link-card"
@mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
@mouseleave="resetEffect"
:style="cardStyle(`${categoryIndex}-${linkIndex}`)"
@click="openLink(link.url)"
>
<div class="link-content">
<el-avatar :src="link.avatar" class="link-avatar" />
<div class="link-info">
<div class="link-title">{{ link.title }}</div>
<div class="link-description">{{ link.description }}</div>
</div>
</div>
</el-card>
</div> </div>
</el-card> </el-card>
</div> <!-- <el-card class="add-link-card">
</el-card>
<!-- <el-card class="add-link-card">
<div class="add-link-header">添加友链</div> <div class="add-link-header">添加友链</div>
<div class="add-link-content"> <div class="add-link-content">
<p>请按照以下格式提交您的友链信息：</p> <p>请按照以下格式提交您的友链信息：</p>
@ -46,6 +52,8 @@ url: "您的博客链接"</pre
</p> </p>
</div> </div>
</el-card> --> </el-card> -->
</div>
</template>
</div> </div>
</template> </template>
@ -58,7 +66,7 @@ export default {
setup() { setup() {
const friendLinks = ref([]); const friendLinks = ref([]);
const hoveredCardId = ref(null); const hoveredCardId = ref(null);
const loading = ref(true);
// 加载 YAML 文件 // 加载 YAML 文件
fetch("/links.yml") fetch("/links.yml")
.then((response) => response.text()) .then((response) => response.text())
@ -67,6 +75,9 @@ export default {
}) })
.catch((error) => { .catch((error) => {
console.error("Failed to load YAML file:", error); console.error("Failed to load YAML file:", error);
})
.finally(() => {
loading.value = false; // 数据加载完成后，设置 loading 为 false
}); });
const hoverEffect = (cardId) => { const hoverEffect = (cardId) => {
@ -94,10 +105,10 @@ export default {
resetEffect, resetEffect,
cardStyle, cardStyle,
openLink, openLink,
loading,
}; };
}, },
}; };
</script> </script>
<style scoped> <style scoped>
@ -185,4 +196,8 @@ export default {
font-size: 0.9em; font-size: 0.9em;
color: #666; color: #666;
} }
.loading-container {
padding: 20px;
}
</style> </style>