无限循环滚动

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

@@ -58,8 +58,8 @@
             <div class="fist-loading" v-if="fistLoading">
                 <p>快速查找专家</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)">
+                    <div class="expert-guides-scroll" :style="scrollStyle">
+                        <div v-for="(item, index) in extendedGuides" :key="index" class="expert-guide-item" @click="questionClick(item)">
                             <p>{{ item }}</p>
                         </div>
                     </div>

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

@@ -41,19 +41,20 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
             showOrgDropdown: false,
             questions:[],
             guides:[
-                '请帮我推荐几位南京地区的网络规划方面的专家',
-                '推荐既懂运维规划又熟悉移动产品体系的专家',
-                '我需要私有云多中心容灾规划领域的专家',
-                '帮我找几位熟悉5G网络优化的专家',
-                '推荐几位通信网基础设施资源清查方面的专家',
-                '请帮我找工业互联网平台研发与部署的专家',
-                '推荐几位对IT系统集成有深入了解的专家',
-                '请寻找精通云计算架构设计与实施的专家',
-                '有没有熟悉网络安全与风险评估的专家',
-                '推荐几位专注于数据中心规划与建设的专家'
+                '请帮我推荐几位南京地区的网络规划方面的专家1',
+                '推荐既懂运维规划又熟悉移动产品体系的专家2',
+                '我需要私有云多中心容灾规划领域的专家3',
+                '帮我找几位熟悉5G网络优化的专家4',
+                '推荐几位通信网基础设施资源清查方面的专家5',
+                '请帮我找工业互联网平台研发与部署的专家6',
+                '推荐几位对IT系统集成有深入了解的专家7',
+                '请寻找精通云计算架构设计与实施的专家8',
+                '有没有熟悉网络安全与风险评估的专家9',
+                '推荐几位专注于数据中心规划与建设的专家10'
             ],
             scrollOffset: 0,
             scrollInterval: null,
+            transitioning: true,
             // 历史对话分类
             historySections: [
             ],
@@ -66,6 +67,16 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
         computed: {
             isDarkTheme() {
                 return this.theme === 'dark';
+            },
+            extendedGuides() {
+                // 克隆前3项到末尾
+                return [...this.guides, ...this.guides.slice(0, 3)];
+            },
+            scrollStyle() {
+                return {
+                    transform: `translateY(-${this.scrollOffset}px)`,
+                    transition: this.transitioning ? 'transform 0.5s ease' : 'none',
+                };
             }
         },
         created: function () {
@@ -113,18 +124,23 @@ require(['jquery', 'vue', 'utils','marked','markdown', 'global'], function ($, V
         methods: {
             // 自动滚动相关方法
             startAutoScroll: function() {
+                const itemHeight = 80;
+                const visibleItems = 3;
+                const totalItems = this.guides.length;
+
                 this.scrollInterval = setInterval(() => {
-                    const itemHeight = 80;
-                    const totalItems = this.guides.length;
-                    const visibleItems = 3;
+                    this.transitioning = true;
+                    this.scrollOffset += itemHeight;
 
-                    // 计算下一个滚动位置
-                    if (this.scrollOffset < (totalItems - visibleItems) * itemHeight) {
-                        this.scrollOffset += itemHeight;
-                    } else {
-                        this.scrollOffset = 0; // 滚动到顶部
+                    // 判断是否滚动到克隆项部分（即第 totalItems 行之后）
+                    if (this.scrollOffset >= itemHeight * (totalItems)) {
+                        // 短暂延迟后瞬间回到原始位置
+                        setTimeout(() => {
+                            this.transitioning = false;
+                            this.scrollOffset = 0;
+                        }, 500); // 等待动画结束
                     }
-                }, 2000); // 每2秒滚动一次
+                }, 2000);
             },
             stopAutoScroll: function() {
                 if (this.scrollInterval) {