feat:对接推荐主题

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -97,6 +97,18 @@
               </template>
             </InfoCard>
           </el-col>
+          <el-col :span="24">
+            <InfoCard
+              :items="themeList"
+              header="推荐主题"
+              text="更多"
+              height="400"
+            >
+              <template #item="temp">
+                <ThemeData :themeData="temp" />
+              </template>
+            </InfoCard>
+          </el-col>
 
           <el-col :span="24" style="background: transparent">
             <BottomInfo />
@@ -121,9 +133,14 @@ import { getList } from "@/apis/plateApi.js";
 import { getList as bannerGetList } from "@/apis/bannerApi.js";
 import { getHomeDiscuss } from "@/apis/discussApi.js";
 import { getWeek } from "@/apis/accessApi.js";
-import { getRecommendedFriend, getRankingPoints } from "@/apis/analyseApi.js";
+import {
+  getRecommendedTopic,
+  getRecommendedFriend,
+  getRankingPoints,
+} from "@/apis/analyseApi.js";
 import PointsRanking from "./components/PointsRanking/index.vue";
 import RecommendFriend from "./components/RecommendFriend/index.vue";
+import ThemeData from "./components/RecommendTheme/index.vue";
 
 const plateList = ref([]);
 const discussList = ref([]);
@@ -131,6 +148,7 @@ const bannerList = ref([]);
 const weekList = ref([]);
 const pointList = ref([]);
 const friendList = ref([]);
+const themeList = ref([]);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -155,6 +173,8 @@ onMounted(async () => {
   pointList.value = pointData;
   const { data: friendData } = await getRecommendedFriend();
   friendList.value = friendData;
+  const { data: themeData } = await getRecommendedTopic();
+  themeList.value = themeData;
 });
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue

@@ -40,8 +40,6 @@ const props = defineProps({
   },
 });
 
-console.log(props.friendData, "friendData");
-
 const statusTypeList = [
   {
     label: "正常",

Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="theme-box">
+    <div class="left">
+      <div class="icon">
+        <img src="@/assets/box/recommend.svg" alt="" />
+      </div>
+      <div class="text" @click="handleClickTheme(themeData?.id)">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="themeData.title"
+          placement="top"
+        >
+          #{{ themeData.title }}
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="right">
+      <template v-if="seeNumLength > 4">
+        <div class="icon">
+          <img src="@/assets/box/browsingHistory.svg" alt="" />
+        </div>
+        <div class="text">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="themeData.seeNum"
+            placement="top"
+          >
+            <div class="text">{{ themeData.seeNum }}</div>
+          </el-tooltip>
+        </div>
+      </template>
+      <template v-else>
+        <div class="icon">
+          <img src="@/assets/box/browsingHistory.svg" alt="" />
+        </div>
+        <div class="text">{{ themeData.seeNum }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup name="RecommendFriend">
+import { defineProps, ref } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  themeData: {
+    type: Array,
+    default: () => [],
+  },
+});
+const router = useRouter();
+
+const seeNumLength = ref(props.themeData.seeNum.toString().length);
+
+const handleClickTheme = (id) => {
+  router.push(`/article/${id}`);
+};
+</script>
+
+<style lang="scss">
+.theme-box {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .text {
+      font-size: 16px;
+      cursor: pointer;
+      width: 230px;
+      color: #252933;
+      margin-left: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &:hover {
+        color: #1171ee;
+      }
+    }
+  }
+  .right {
+    width: 25%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .text {
+      width: 30px;
+      margin-left: 10px;
+      cursor: pointer;
+      color: #252933;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .icon {
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>