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.

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

Conversation

shaohuzhang1
Copy link
Contributor

fix: 【应用】简单配置中对过长名称知识库进行关联时有概率导致无法显示知识库全部名称(#1596)
fix: 修复部分样式
fix: 修复搜索后滚动加载问题(#1590

Copy link

f2c-ci-robot bot commented Nov 13, 2024

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Copy link

f2c-ci-robot bot commented Nov 13, 2024

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@wangdan-fit2cloud wangdan-fit2cloud merged commit fd0f3e2 into main Nov 13, 2024
4 checks passed
@wangdan-fit2cloud wangdan-fit2cloud deleted the pr@main@fit-bugs branch November 13, 2024 05:21
@@ -527,7 +536,7 @@
</h4>
</div>
<div class="scrollbar-height">
<AiChat :data="applicationForm"></AiChat>
<AiChat :applicationDetails="applicationForm"></AiChat>
</div>
</div>
</el-col>

Choose a reason for hiding this comment

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

该代码存在一些差异:

  1. @click 被移除,并添加 text
  2. class=“avatar-red” 替换为 <div> 标签中的 CSS 类名。
  3. 在设置组件中使用了不同的方法来更改 switch 的状态。
  4. 各处缺少空格和标点。

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

max-width: 100% !important;
margin: 0 auto;
}
}
</style>

Choose a reason for hiding this comment

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

抱歉,您提供的代码片段与您的请求不符。请您提供一个具体的段落或文本内容供我检查和分析。

}
}
)

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

Choose a reason for hiding this comment

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

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

  1. refcomputed 的使用:在计算属性 (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)

;


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants