快速查找专家自动滚动

src/main/resources/static/pages/langchain/ai-chat.html

@@ -57,8 +57,12 @@
         <div id="scrollContainer" class="scrollContainer">
             <div class="fist-loading" v-if="fistLoading">
                 <p>快速查找专家</p>
-                <div v-for="(item, index) in guides" :key="index" @click="questionClick(item)">
-                    <p>{{ item }}</p>
+                <div class="expert-guides-container">
+                    <div class="expert-guides-scroll" :style="{ transform: `translateY(-${scrollOffset}px)` }">
+                        <div v-for="(item, index) in guides" :key="index" class="expert-guide-item" @click="questionClick(item)">
+                            <p>{{ item }}</p>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div id="chat-messages" class="chat-messages" v-if="!fistLoading">

src/main/resources/static/pages/langchain/js/ai-chat-vue.js

@@ -40,7 +40,20 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
             selectedOrg:'全部组织',
             showOrgDropdown: false,
             questions:[],
-            guides:['请帮我推荐几位南京地区的网络规划方面的专家','推荐既懂运维规划又熟悉移动产品体系的专家','我需要私有云多中心容灾规划领域的专家'],
+            guides:[
+                '请帮我推荐几位南京地区的网络规划方面的专家',
+                '推荐既懂运维规划又熟悉移动产品体系的专家',
+                '我需要私有云多中心容灾规划领域的专家',
+                '帮我找几位熟悉5G网络优化的专家',
+                '推荐几位通信网基础设施资源清查方面的专家',
+                '请帮我找工业互联网平台研发与部署的专家',
+                '推荐几位对IT系统集成有深入了解的专家',
+                '请寻找精通云计算架构设计与实施的专家',
+                '有没有熟悉网络安全与风险评估的专家',
+                '推荐几位专注于数据中心规划与建设的专家'
+            ],
+            scrollOffset: 0,
+            scrollInterval: null,
             // 历史对话分类
             historySections: [
             ],
@@ -67,9 +80,67 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
                 if (textarea) {
                     textarea.addEventListener('keypress', this.handleKeyPress);
                 }
+                
+                // 启动自动滚动
+                this.startAutoScroll();
+                
+                // 添加鼠标悬停事件监听
+                this.$watch('fistLoading', (newVal) => {
+                    if (newVal) {
+                        // 等待DOM更新
+                        this.$nextTick(() => {
+                            const guideItems = document.querySelectorAll('.expert-guide-item');
+                            guideItems.forEach(item => {
+                                item.addEventListener('mouseenter', this.pauseAutoScroll);
+                                item.addEventListener('mouseleave', this.resumeAutoScroll);
+                            });
+                        });
+                    }
+                }, { immediate: true });
+            });
+        },
+        beforeDestroy: function() {
+            // 清除自动滚动定时器
+            this.stopAutoScroll();
+            
+            // 移除事件监听器
+            const guideItems = document.querySelectorAll('.expert-guide-item');
+            guideItems.forEach(item => {
+                item.removeEventListener('mouseenter', this.pauseAutoScroll);
+                item.removeEventListener('mouseleave', this.resumeAutoScroll);
             });
         },
         methods: {
+            // 自动滚动相关方法
+            startAutoScroll: function() {
+                this.scrollInterval = setInterval(() => {
+                    const itemHeight = 80;
+                    const totalItems = this.guides.length;
+                    const visibleItems = 3;
+
+                    // 计算下一个滚动位置
+                    if (this.scrollOffset < (totalItems - visibleItems) * itemHeight) {
+                        this.scrollOffset += itemHeight;
+                    } else {
+                        this.scrollOffset = 0; // 滚动到顶部
+                    }
+                }, 2000); // 每2秒滚动一次
+            },
+            stopAutoScroll: function() {
+                if (this.scrollInterval) {
+                    clearInterval(this.scrollInterval);
+                    this.scrollInterval = null;
+                }
+            },
+            pauseAutoScroll: function() {
+                this.stopAutoScroll();
+            },
+            resumeAutoScroll: function() {
+                if (!this.scrollInterval && this.fistLoading) {
+                    this.startAutoScroll();
+                }
+            },
+            
             // 用户相关方法
             currentUser: function () {
                 const that = this;
@@ -127,8 +198,11 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
             sendMessage() {
                 const message = this.userInput.trim();
                 if (!message) return;
-                if (this.fistLoading)
+                if (this.fistLoading) {
                     this.fistLoading = false;
+                    // 停止自动滚动
+                    this.stopAutoScroll();
+                }
                 this.questions= [];
                 this.stopResponse();
                 // 添加用户消息
@@ -277,6 +351,10 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
                     // this.addChatToHistory('新对话', new Date());
                 });
                 this.fistLoading=true;
+                
+                // 重置滚动位置并重新启动自动滚动
+                this.scrollOffset = 0;
+                this.startAutoScroll();
             },
             
             loadChatHistory(chatId) {
@@ -299,6 +377,13 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
                // this.clearChat();
                 this.questions= [];
                 this.messages=[];
+                
+                // 如果正在显示初始推荐，停止自动滚动
+                if (this.fistLoading) {
+                    this.stopAutoScroll();
+                }
+                this.fistLoading = false;
+                
                 //这里添加加载对应对话历史的逻辑
                 //实际实现时可以调用API获取历史记录
                 $.ajax({

src/main/resources/static/pages/langchain/style/ai-chat.css

@@ -227,24 +227,39 @@ body {
     width: 500px;
     margin:0 auto;
 }
-.fist-loading div{
+
+.expert-guides-container {
+    width: 500px;
+    height: 240px; /* 高度为每条推荐项高度的3倍 */
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+}
+
+.expert-guides-scroll {
+    width: 100%;
+    position: absolute;
+    transition: transform 0.5s ease;
+}
+
+.expert-guide-item {
     width: 500px;
-    max-height: 72px;
-    line-height: 72px;
+    height: 70px;
+    line-height: 70px;
     border-radius: 16px;
     padding: 0 16px;
     background-color: var(--sidebar-bg);
     border: 1px solid var(--box-shadow);
-    box-shadow: 0 1px 8px var(--box-shadow);
-    box-sizing: border-box;
+    /*box-shadow: 0 1px 8px var(--box-shadow);*/
+    /*box-sizing: border-box;*/
     align-items: center;
-    margin:10px auto;
+    margin: 10px auto 0;
     font-size: 16px;
     cursor: pointer;
     color: var(--question-text);
 }
 
-.fist-loading div:hover{
+.expert-guide-item:hover{
     background-color: #e5eaf6;
     color: #475ada;
 }