style: 更新主题2.2

Yi.Bbs.Vue3/src/App.vue

@@ -28,7 +28,7 @@ onMounted(async () => {
 
     //如果登录了，再连接消息通知
     bbsNoticeSignalR();
-  noticeSignalR();
+    noticeSignalR();
 
 
 });

Yi.Bbs.Vue3/src/utils/signalR.js

@@ -4,41 +4,41 @@ import useAuths from "@/hooks/useAuths";
 
 const { getToken } = useAuths();
 export default {
-  SR: {},
-   start(url,callFunc) {
-    const connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url, {
-        headers: {
-          Authorization: `Bearer ${getToken()}`,
-        },
-        accessTokenFactory: () => {
-          // 返回授权 token
-          return `${getToken()}`;
-        },
-      })
+    SR: {},
+    start(url, callFunc) {
+        const connection = new signalR.HubConnectionBuilder()
+            .withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url, {
+                headers: {
+                    Authorization: `Bearer ${getToken()}`,
+                },
+                accessTokenFactory: () => {
+                    // 返回授权 token
+                    return `${getToken()}`;
+                },
+            })
 
-      .withAutomaticReconnect(new ForeverRetryPolicy()) //自动重新连接
-      .configureLogging(signalR.LogLevel.Error)
-      .build();
-    this.SR = connection;
-    // 断线重连
-    connection.onclose(() => {
-      console.log("hub断开");
-    });
+        .withAutomaticReconnect(new ForeverRetryPolicy()) //自动重新连接
+            .configureLogging(signalR.LogLevel.Error)
+            .build();
+        this.SR = connection;
+        // 断线重连
+        connection.onclose(() => {
+            console.log("hub断开");
+        });
 
-    connection.onreconnected(() => {
-      console.log("hub重新连接成功");
-    });
-    callFunc(connection);
-    // 启动
+        connection.onreconnected(() => {
+            console.log("hub重新连接成功");
+        });
+        callFunc(connection);
+        // 启动
 
-      this.SR.start();
-  },
+        this.SR.start();
+    },
 
 };
 class ForeverRetryPolicy {
-  nextRetryDelayInMilliseconds(retryContext) {
-    return 1000*3;
- } 
-  
+    nextRetryDelayInMilliseconds(retryContext) {
+        return 1000 * 60;
+    }
+
 }

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

@@ -43,7 +43,7 @@ margin: 10px auto;">
                        :isPublish="i.isDisableCreateDiscuss"/>
           </el-col>
 
-          <div ref="scrollableDiv" class="scrollable-div" v-infinite-scroll="loadDiscuss" style="height: 2500px;width: 100%;" infinite-scroll-distance="10">
+          <div ref="scrollableDiv" class="scrollable-div" style="width: 100%;">
 
             <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=""/>
@@ -106,7 +106,7 @@ margin: 10px auto;">
             </div>
           </div>
           <!-- 签到 -->
-          <el-col v-if="!isIcp" :span="24">
+          <el-col v-if="!isIcp" :span="24" id="activeMenu">
             <InfoCard header="活动">
               <template #content>
                 <div class="top">与AI同行，创造无限可能</div>
@@ -196,7 +196,7 @@ margin: 10px auto;">
               </InfoCard>
             </template>
           </el-col>
-          <el-col v-if="!isIcp" :span="24">
+          <el-col v-if="!isIcp" :span="24" id="themeMenu">
             <template v-if="isThemeFinished">
               <InfoCard :isPadding="false" :items="themeList" header="推荐主题" text="更多" height="400"
                         style="padding:0 20px"
@@ -250,7 +250,7 @@ margin: 10px auto;">
 </template>
 
 <script setup>
-import {onMounted, ref, reactive, computed, nextTick, watch} from "vue";
+import {onMounted, onUnmounted, ref, reactive, computed, nextTick, watch} from "vue";
 import {useRouter} from "vue-router";
 import DisscussCard from "@/components/DisscussCard.vue";
 import InfoCard from "@/components/InfoCard.vue";
@@ -376,6 +376,12 @@ const init = async () => {
 //初始化
 onMounted(async () => {
   await init();
+  window.addEventListener('scroll', debouncedScrollHandler);
+});
+
+// 组件卸载时移除事件监听器
+onUnmounted(() => {
+  window.removeEventListener('scroll', debouncedScrollHandler);
 });
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
@@ -477,16 +483,28 @@ const onClickAccessLog = async () => {
 }
 
 let loadingDiscuss = false;
+
+// 防抖函数
+const debounce = (func, delay) => {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+};
+
 //加载滚动文章
 const loadDiscuss = async () => {
-  
-  if (loadingDiscuss === false) {
+if (loadingDiscuss === false) {
+  // if (loadingDiscuss === false && !isAllDiscussFinished.value) {
     loadingDiscuss = true;
 
-
     currentDiscussPageIndex.value += 1;
 
     isAllDiscussFinished.value = false;
+
+    console.log("ccc");
+    
     const {data: allDiscussData, config: allDiscussConfig} =
         await getAllDiscussList({Type: 0, skipCount: currentDiscussPageIndex.value, maxResultCount: 10});
     isAllDiscussFinished.value = allDiscussConfig.isFinish;
@@ -494,12 +512,28 @@ const loadDiscuss = async () => {
     //在列表后新增
     allDiscussList.value.push(...allDiscussData.items);
 
-
     loadingDiscuss = false;
   }
+};
 
+// 检查是否滚动到底部
+const checkScrollToBottom = () => {
+ const scrollTop = Math.ceil(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
+  const clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
 
-}
+  // 有滚动条的情况下，检查是否滚动到底部
+  // console.log(scrollTop,"scrollTop");
+  //   console.log(clientHeight,"clientHeight");
+  //    console.log(scrollHeight,"scrollHeight");
+   if (scrollTop + clientHeight >= scrollHeight -1 ) {
+    // console.log('触发加载更多');
+    loadDiscuss();
+  }
+};
+
+// 防抖处理的滚动事件
+const debouncedScrollHandler = debounce(checkScrollToBottom, 200);
 const wechatDialogVisible = ref(false)
 //切换统计开关
 const onClickWeekSwitch = async () => {