feat: bbs支持滚动主题

Yi.Bbs.Vue3/src/components/DisscussCard.vue

@@ -28,7 +28,7 @@
         </div>
         
       <div style="display: flex; margin-right: 40px;position: relative;
-    top: -20px;">
+    top: -10px;">
         <el-image
           :preview-src-list="[getUrl(discuss.cover)]"
           v-if="discuss.cover"

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

@@ -21,7 +21,8 @@ margin: 10px auto;">
             <br/>
             公正、‌法治、‌爱国、‌敬业、‌诚信、友善
           </p>
-          <p v-else @click="onClickToWeChat">点击关注-最新上线<span>《意.Net官方微信公众号》 </span>，分享有<span>深度</span>的.Net知识，希望能帮助大家</p>
+          <p v-else @click="onClickToWeChat">
+            点击关注-最新上线<span>《意.Net官方微信公众号》 </span>，分享有<span>深度</span>的.Net知识，希望能帮助大家</p>
 
 
         </div>
@@ -37,27 +38,28 @@ margin: 10px auto;">
       'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
     }">
             <img v-if="isIcp" src="@/assets/login.png" style="height: 80px;width: 100%" alt=""/>
-            <PlateCard v-else :name="i.name" :introduction="i.introduction" :id="i.id" :isPublish="i.isDisableCreateDiscuss"/>
+            <PlateCard v-else :name="i.name" :introduction="i.introduction" :id="i.id"
+                       :isPublish="i.isDisableCreateDiscuss"/>
           </el-col>
 
-          <template v-if="isDiscussFinished">
-            <el-col :span="24" v-for="i in discussList" :key="i.id">
+          <div ref="scrollableDiv" class="scrollable-div" v-infinite-scroll="loadDiscuss" style="height: 2500px;width: 100%; overflow-y: auto;" infinite-scroll-distance="10">
+
+            <el-col v-if="isDiscussFinished" :span="24" v-for="i in discussList" :key="i.id">
               <img v-if="isIcp" src="@/assets/login.png" style="height: 150px;width: 100%" alt=""/>
-              <DisscussCard v-else :discuss="i"/>
+              <DisscussCard v-else :discuss="i" badge="置顶"/>
             </el-col>
-          </template>
-          <template v-else>
-            <Skeleton :isBorder="true"/>
-          </template>
-          <template v-if="isAllDiscussFinished">
+            <Skeleton v-else :isBorder="true"/>
+       
+
             <el-col :span="24" v-for="i in allDiscussList" :key="i.id">
               <img v-if="isIcp" src="@/assets/login.png" style="height: 150px;width: 100%" alt=""/>
               <DisscussCard v-else :discuss="i"/>
             </el-col>
-          </template>
-          <template v-else>
-            <Skeleton :isBorder="true"/>
-          </template>
+
+            <Skeleton v-if="!isAllDiscussFinished"  :isBorder="true"/>
+          </div>
+
+ 
         </el-row>
       </el-col>
       <el-col :span="7">
@@ -232,6 +234,7 @@ margin: 10px auto;">
         </div>
       </template>
     </el-dialog>
+    <el-backtop :right="100" :bottom="100" @click="clickBacktop" visibility-height="0"/>
   </div>
 </template>
 
@@ -286,6 +289,8 @@ const isAllDiscussFinished = ref(false);
 const userAnalyseInfo = ref({});
 const onlineNumber = ref(0);
 const accessLogTab = ref()
+
+const currentDiscussPageIndex = ref(1);
 const activeList = [
   {name: "签到", path: "/activity/sign", icon: "Present"},
   {name: "等级", path: "/activity/level", icon: "Ticket"},
@@ -298,38 +303,46 @@ const activeList = [
   {name: "聊天室", path: "/chat", icon: "ChatRound"},
 ];
 const isIcp = import.meta.env.VITE_APP_ICP === "true";
-//主题查询参数
-const query = reactive({
-  skipCount: 1,
-  maxResultCount: 10,
-  isTop: true,
-});
 
-const weekQuery = reactive({accessLogType: "Request"});4
+const weekQuery = reactive({accessLogType: "Request"});
 
 const init = async () => {
 
   //分阶段优化
   await Promise.all([
-    (async ()=>{const {data: allDiscussData, config: allDiscussConfig} =
-        await getAllDiscussList({Type: 0, skipCount: 1, maxResultCount: 30,});
+    (async () => {
+      const {data: allDiscussData, config: allDiscussConfig} =
+          await getAllDiscussList({Type: 0, skipCount: currentDiscussPageIndex.value, maxResultCount: 10});
       isAllDiscussFinished.value = allDiscussConfig.isFinish;
-      allDiscussList.value = allDiscussData.items;})(),
-    (async ()=>{const {data: plateData} = await getList();
-      plateList.value = plateData.items;})(),
-    (async ()=>{const {data: discussData, config: discussConfig} = await getHomeDiscuss();
+      allDiscussList.value = allDiscussData.items;
+    })(),
+    (async () => {
+      const {data: plateData} = await getList();
+      plateList.value = plateData.items;
+    })(),
+    (async () => {
+      const {data: discussData, config: discussConfig} = await getHomeDiscuss();
       discussList.value = discussData;
-      isDiscussFinished.value = discussConfig.isFinish;})(),
-    (async ()=>{const {data: bannerData} = await bannerGetList();
-      bannerList.value = bannerData.items;})(),
-    (async ()=>{const {data: weekData} = await getWeek(weekQuery);
-      weekList.value = weekData;})(),
-    (async ()=>{const {data: pointData, config: pointConfig} = await getRankingPoints();
+      isDiscussFinished.value = discussConfig.isFinish;
+    })(),
+    (async () => {
+      const {data: bannerData} = await bannerGetList();
+      bannerList.value = bannerData.items;
+    })(),
+    (async () => {
+      const {data: weekData} = await getWeek(weekQuery);
+      weekList.value = weekData;
+    })(),
+    (async () => {
+      const {data: pointData, config: pointConfig} = await getRankingPoints();
       pointList.value = pointData.items;
-      isPointFinished.value = pointConfig.isFinish;})(),
-    (async ()=>{const {data: userAnalyseInfoData} = await getUserAnalyse();
+      isPointFinished.value = pointConfig.isFinish;
+    })(),
+    (async () => {
+      const {data: userAnalyseInfoData} = await getUserAnalyse();
       onlineNumber.value = userAnalyseInfoData.onlineNumber;
-      userAnalyseInfo.value = userAnalyseInfoData;})(),
+      userAnalyseInfo.value = userAnalyseInfoData;
+    })(),
   ]);
 
 
@@ -446,6 +459,30 @@ const onClickAccessLog = async () => {
 
 }
 
+let loadingDiscuss = false;
+//加载滚动文章
+const loadDiscuss = async () => {
+  
+  if (loadingDiscuss === false) {
+    loadingDiscuss = true;
+
+
+    currentDiscussPageIndex.value += 1;
+
+    isAllDiscussFinished.value = false;
+    const {data: allDiscussData, config: allDiscussConfig} =
+        await getAllDiscussList({Type: 0, skipCount: currentDiscussPageIndex.value, maxResultCount: 10});
+    isAllDiscussFinished.value = allDiscussConfig.isFinish;
+
+    //在列表后新增
+    allDiscussList.value.push(...allDiscussData.items);
+
+
+    loadingDiscuss = false;
+  }
+
+
+}
 const wechatDialogVisible = ref(false)
 //切换统计开关
 const onClickWeekSwitch = async () => {
@@ -458,6 +495,13 @@ const onClickWeekSwitch = async () => {
   const {data: weekData} = await getWeek(weekQuery);
   weekList.value = weekData;
 }
+const scrollableDiv = ref(null);
+//回到顶部
+const clickBacktop=()=>{
+  if (scrollableDiv.value) {
+    scrollableDiv.value.scrollTop = 0; // 设置滚动条到顶部
+  }
+}
 
 //打开微信公众号弹窗
 const onClickToWeChat = () => {
@@ -618,6 +662,7 @@ const onClickToWeChat=()=>{
     cursor: pointer;
     margin-top: 8px;
   }
+
   .statisChart {
     width: 100%;
     height: 300px;
@@ -664,4 +709,23 @@ const onClickToWeChat=()=>{
     transform: translateX(-100%);
   }
 }
+
+
+/* 设置滚动条的样式 */
+.scrollable-div::-webkit-scrollbar {
+  width: 3px; /* 设置滚动条的宽度 */
+}
+
+.scrollable-div::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道背景 */
+}
+
+.scrollable-div::-webkit-scrollbar-thumb {
+  background: #cccccc; /* 滚动条的颜色 */
+  border-radius: 10px; /* 设置圆角 */
+}
+
+.scrollable-div::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条 hover 时的颜色 */
+}
 </style>