mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
添加加载状态指示器,优化友链列表渲染逻辑,确保数据加载完成后显示内容
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user