Skip to content

fix: 修复搜索后滚动加载问题（#1590） #1613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 13, 2024
Merged

fix: 修复搜索后滚动加载问题（#1590） #1613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03a780e
fix: 【应用】简单配置中对过长名称知识库进行关联时有概率导致无法显示知识库全部名称(#1596)
wangdan-fit2cloud Nov 13, 2024
4e48291
fix: 修复部分样式
wangdan-fit2cloud Nov 13, 2024
99b6ca8
fix: 修复搜索后滚动加载问题（#1590）
wangdan-fit2cloud Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="ai-chat__operate p-16-24">
<slot name="operateBefore" />
<div class="operate-textarea flex chat-width">
<div class="operate-textarea flex">
<el-input
ref="quickInputRef"
v-model="inputValue"
Expand Down Expand Up @@ -62,7 +62,7 @@
</div>
</div>
<div
class="chat-width text-center"
class="text-center"
v-if="applicationDetails.disclaimer"
style="margin-top: 8px"
>
Expand Down
5 changes: 2 additions & 3 deletions ui/src/components/ai-chat/component/prologue-content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ const prologue = computed(() => {
const temp = props.available
? props.application?.prologue
: '抱歉，当前正在维护，无法提供服务，请稍后再试！'
return temp.replace(/-\s.+/g, toQuickQuestion)
return temp?.replace(/-\s.+/g, toQuickQuestion)
})
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
2 changes: 1 addition & 1 deletion ui/src/components/ai-chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
ref="userFormRef"
></UserForm>
<el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
<div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width">
<div ref="dialogScrollbar" class="ai-chat__content p-24">
<PrologueContent
:type="type"
:application="applicationDetails"
Expand Down
11 changes: 10 additions & 1 deletion ui/src/components/infinite-scroll/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'

defineOptions({ name: 'InfiniteScroll' })
const props = defineProps({
Expand Down Expand Up @@ -47,6 +47,15 @@ const props = defineProps({
const emit = defineEmits(['update:current_page', 'load'])
const current = ref(props.current_page)

watch(
() => props.current_page,
(val) => {
if (val === 1) {
current.value = 1
}
}
)

const noMore = computed(
() =>
props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码中存在一些问题和可能改进的地方：

  1. ref 和 computed 的使用：在计算属性 (computed) 中不能直接访问父组件的数据，因此可以尝试在子组件内部定义一个局部变量代替。

修改后的代码示例：

<template>
  <!-- your template content -->
</template>

<script setup >
// 引入所需的模块
import { ref, reactive, toRefs } from 'vue';
import InfiniteScrollMixin from './InfiniteScroll';

const emit = defineEmits(['onLoad']);

let state = reactive({
  current: reactive(0),
});

function handleOnload(params) {
  state.current.params = params; // 通过将数据传递给state来处理parent组件传来的参数。
}

infiniteScroll.setup(InfiniteScrollMixin, { onEndReachedCallback: handleOnload });

const noMore = computed(() => state.current.params.no_more || false);
console.log(state); // 查看当前状态（可选）

这里主要调整了对 $refs.childComponentRef 的引用到全局对象 $store.state 和本地存储的更新方式。
2. 使用生命周期钩子:

  • 可以考虑引入或创建专门用于管理组件大小的状态管理库，如 v-size-scale 或者自定义监听器函数进行尺寸改变时自动增加/减少条数的逻辑， 
    

    • 



new Vue({


data() {
    return{
        page_size: 48,
     ...其他需要初始化的内容 ...



},

...

data:{

page_size: props.pageSize

... 其他配置 …...

}


});

再根据实际需求修改页面内容大小变化触发点等策略，比如添加事件监听机制让每轮刷新都按照指定条件动态调大屏幕显示数量； 3. 定期运行定时器更新条目的请求：javascript

this.$http.get(api.php).then((res)=>{


})

.setInterval(()=>{

this.loadItems();//这里的 loadItems 看似是异步加载，但其实只是重定界符，并不是真正的异步操作！

},5 * 10*1000)


;



希望以上分析对你有所帮助!


    

  
  



    


        

      
  
  

    
  
    
    

  

  

  



          

      
    








    


  









  


    


  		



  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        


          

            
            
          


          



          
            7 changes: 0 additions & 7 deletions
          
          

        

  ui/src/router/modules/application.ts

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
          
            
          
          Expand Up
    
    @@ -12,13 +12,6 @@ const applicationRouter = {
  


    

    

    

  
          name: 'application',






    

    

    

  
          component: () => import('@/views/application/index.vue')






    

    

    

  
        },






    

    

    

  
        {






    

    

    

  
          path: '/application/create',






    

    

    

  
          name: 'CreateApplication',






    

    

    

  
          meta: { activeMenu: '/application' },






    

    

    

  
          component: () => import('@/views/application/CreateAndSetting.vue'),






    

    

    

  
          hidden: true






    

    

    

  
        },






    

    

    

  
        {






    

    

    

  
          path: '/application/:id/:type',






    

    

    

  
          name: 'ApplicationDetail',






  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        


          

            
            
          


          



          
            2 changes: 1 addition & 1 deletion
          
          

        

  ui/src/router/modules/dataset.ts

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
          
            
          
          Expand Up
    
    @@ -12,7 +12,7 @@ const datasetRouter = {
  


    

    

    

  
          component: () => import('@/views/dataset/index.vue')






    

    

    

  
        },






    

    

    

  
        {






    

    

    

  
          path: '/dataset/:type', // create 或者 upload






    

    

    

  
          path: '/dataset/:type', // upload






    

    

    

  
          name: 'UploadDocumentDataset',






    

    

    

  
          meta: { activeMenu: '/dataset' },






    

    

    

  
          component: () => import('@/views/dataset/UploadDocumentDataset.vue'),






  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        


          

            
            
          


          



          
            25 changes: 17 additions & 8 deletions
          
          

        

  ui/src/views/application/ApplicationSetting.vue

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
          
            
          
          Expand Up
    
    @@ -252,12 +252,13 @@
  


    

    

    

  
                                <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="32">






    

    

    

  
                                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />






    

    

    

  
                                </AppAvatar>






    

    

    

  
                                <auto-tooltip






    

    

    

  
                                  :content="relatedObject(datasetList, item, 'id')?.name"






    

    

    

  
                                  style="width: 80%"






    

    

    

  
    







    

    

    

  
                                <span






    

    

    

  
                                  class="ellipsis cursor"






    

    

    

  
                                  :title="relatedObject(datasetList, item, 'id')?.name"






    

    

    

  
                                >






    

    

    

  
                                  {{ relatedObject(datasetList, item, 'id')?.name }}</span






    

    

    

  
                                >






    

    

    

  
                                  {{ relatedObject(datasetList, item, 'id')?.name }}






    

    

    

  
                                </auto-tooltip>






    

    

    

  
                              </div>






    

    

    

  
                              <el-button text @click="removeDataset(item)">






    

    

    

  
                                <el-icon>






      

    
          
            
          
          Expand Down
          
            
          
          Expand Up
    
    @@ -326,7 +327,11 @@
  


    

    

    

  
                            <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>






    

    

    

  
                          </el-tooltip> -->






    

    

    

  
                        </div>






    

    

    

  
                        <el-switch size="small" v-model="applicationForm.stt_model_enable" @change="sttModelEnableChange"/>






    

    

    

  
                        <el-switch






    

    

    

  
                          size="small"






    

    

    

  
                          v-model="applicationForm.stt_model_enable"






    

    

    

  
                          @change="sttModelEnableChange"






    

    

    

  
                        />






    

    

    

  
                      </div>






    

    

    

  
                    </template>






    

    

    

  
                    <el-select






      

    
          
            
          
          Expand Down
          
            
          
          Expand Up
    
    @@ -406,7 +411,11 @@
  


    

    

    

  
                            <el-icon class="mr-4"><Setting /></el-icon>






    

    

    

  
                            设置






    

    

    

  
                          </el-button>






    

    

    

  
                          <el-switch size="small" v-model="applicationForm.tts_model_enable" @change="ttsModelEnableChange"/>






    

    

    

  
                          <el-switch






    

    

    

  
                            size="small"






    

    

    

  
                            v-model="applicationForm.tts_model_enable"






    

    

    

  
                            @change="ttsModelEnableChange"






    

    

    

  
                          />






    

    

    

  
                        </div>






    

    

    

  
                      </div>






    

    

    

  
                    </template>






      

    
          
            
          
          Expand Down
          
            
          
          Expand Up
    
    @@ -527,7 +536,7 @@
  


    

    

    

  
                </h4>






    

    

    

  
              </div>






    

    

    

  
              <div class="scrollbar-height">






    

    

    

  
                <AiChat :data="applicationForm"></AiChat>






    

    

    

  
                <AiChat :applicationDetails="applicationForm"></AiChat>






    

    

    

  
              </div>






    

    

    

  
            </div>






    

    

    

  
          </el-col>






      


  
        

      
  
    
    

      
      
          



  

    

        

        

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

  




        

      

  

  
 

  
    

    
Choose a reason for hiding this comment


    

      The reason will be displayed to describe this comment to others. Learn more.
    


    

      
      



  



  
    

      
该代码存在一些差异：


    

  1. @click 被移除，并添加 text
    2. 

  2. class=“avatar-red” 替换为 <div> 标签中的 CSS 类名。
    3. 

  3. 在设置组件中使用了不同的方法来更改 switch 的状态。
    4. 

  4. 各处缺少空格和标点。
    5. 



关于优化：由于是文本处理应用，可以考虑到的是增加元素之间的间距使布局更紧凑；考虑对字体大小进行调整以减少视觉累赘；在某些情况下将复杂的信息分段显示可能有助于阅读体验等。这都取决于具体的UI设计方案和个人喜好而定。

    

  
  



    


        

      
  
  

    
  
    
    

  

  

  



          

      
    








    


  









  


    


  		



  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



  


    

  
  
    
      Loading


    

  




    

  
  
    
      Loading