From 15d31dbcbf87584a0ef16c42ed08a2f033991440 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Tue, 26 Dec 2023 22:46:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E9=AA=A8=E6=9E=B6?=
 =?UTF-8?q?=E5=B1=8F=E7=BB=84=E4=BB=B6=E4=BB=A5=E5=8F=8A=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=9A=84=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/Skeleton/index.vue |  22 ++++
 Yi.Bbs.Vue3/src/views/home/Index.vue          | 101 +++++++++++-------
 2 files changed, 82 insertions(+), 41 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/components/Skeleton/index.vue

diff --git a/Yi.Bbs.Vue3/src/components/Skeleton/index.vue b/Yi.Bbs.Vue3/src/components/Skeleton/index.vue
new file mode 100644
index 00000000..8f528ae7
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/components/Skeleton/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-col :span="24">
+    <el-card shadow="never" class="card-box"> <el-skeleton /> </el-card>
+  </el-col>
+</template>
+
+<script setup>
+import { ref, defineProps } from "vue";
+
+const props = defineProps({
+  isBorder: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss">
+.card-box {
+  --el-card-border-color: v-bind(isBorder ? "#e4e7ed": "transparent");
+}
+</style>
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 18ceedd5..4284b6e9 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -22,16 +22,14 @@
               :isPublish="i.isDisableCreateDiscuss"
             />
           </el-col>
-
-          <el-col :span="24" v-for="i in discussList">
-            <DisscussCard :discuss="i" />
-          </el-col>
-          <el-col :span="24">
-            <el-empty
-              v-show="discussList.length <= 0"
-              description="推荐位置，空空如也"
-            />
-          </el-col>
+          <template v-if="discussList.length > 0">
+            <el-col :span="24" v-for="i in discussList">
+              <DisscussCard :discuss="i" />
+            </el-col>
+          </template>
+          <template v-else>
+            <Skeleton :isBorder="true" />
+          </template>
         </el-row>
       </el-col>
 
@@ -71,43 +69,63 @@
               </template>
             </InfoCard>
           </el-col>
-
           <el-col :span="24">
-            <InfoCard
-              :items="pointList"
-              header="本月排行"
-              text="更多"
-              height="400"
-            >
-              <template #item="temp">
-                <PointsRanking :pointsData="temp" />
-              </template>
-            </InfoCard>
+            <template v-if="pointList.length > 0">
+              <InfoCard
+                :items="pointList"
+                header="本月排行"
+                text="更多"
+                height="400"
+              >
+                <template #item="temp">
+                  <PointsRanking :pointsData="temp" />
+                </template>
+              </InfoCard>
+            </template>
+            <template v-else>
+              <InfoCard header="本月排行" text="更多">
+                <template #content> <Skeleton /></template>
+              </InfoCard>
+            </template>
           </el-col>
 
           <el-col :span="24">
-            <InfoCard
-              :items="friendList"
-              header="推荐好友"
-              text="更多"
-              height="400"
-            >
-              <template #item="temp">
-                <RecommendFriend :friendData="temp" />
-              </template>
-            </InfoCard>
+            <template v-if="friendList.length > 0">
+              <InfoCard
+                :items="friendList"
+                header="推荐好友"
+                text="更多"
+                height="400"
+              >
+                <template #item="temp">
+                  <RecommendFriend :friendData="temp" />
+                </template>
+              </InfoCard>
+            </template>
+            <template v-else>
+              <InfoCard header="推荐好友" text="更多">
+                <template #content> <Skeleton /></template>
+              </InfoCard>
+            </template>
           </el-col>
           <el-col :span="24">
-            <InfoCard
-              :items="themeList"
-              header="推荐主题"
-              text="更多"
-              height="400"
-            >
-              <template #item="temp">
-                <ThemeData :themeData="temp" />
-              </template>
-            </InfoCard>
+            <template v-if="themeList.length > 0">
+              <InfoCard
+                :items="themeList"
+                header="推荐主题"
+                text="更多"
+                height="400"
+              >
+                <template #item="temp">
+                  <ThemeData :themeData="temp" />
+                </template>
+              </InfoCard>
+            </template>
+            <template v-else>
+              <InfoCard header="推荐主题" text="更多">
+                <template #content> <Skeleton /></template>
+              </InfoCard>
+            </template>
           </el-col>
 
           <el-col :span="24" style="background: transparent">
@@ -141,6 +159,7 @@ import {
 import PointsRanking from "./components/PointsRanking/index.vue";
 import RecommendFriend from "./components/RecommendFriend/index.vue";
 import ThemeData from "./components/RecommendTheme/index.vue";
+import Skeleton from "@/components/Skeleton/index.vue";
 
 const plateList = ref([]);
 const discussList = ref([]);