|
|
@@ -49,14 +49,21 @@ const filter_agent_list = ref([]);
|
|
|
const agentsListContainer = ref(null);
|
|
|
const selectedCategory = ref('全部'); // 默认选中“全部”
|
|
|
const baseurl = getConfigField('API_BASE_URL');
|
|
|
+const page = ref(1); // 当前页码
|
|
|
+const limit = 30; // 每页显示的数量
|
|
|
|
|
|
const loadApps = async () => {
|
|
|
try {
|
|
|
- const response = await fetchApps();
|
|
|
- agent_list.value = response.data || [];
|
|
|
+ const params = {
|
|
|
+ page: page.value,
|
|
|
+ limit,
|
|
|
+ name: ''
|
|
|
+ };
|
|
|
+ const response = await fetchApps(params);
|
|
|
+ agent_list.value = [...agent_list.value, ...response.data]; // 追加新数据
|
|
|
|
|
|
// 遍历 mode 并去重
|
|
|
- const modes = new Set(response.data.map((app) => app.mode));
|
|
|
+ const modes = new Set(agent_list.value.map((app) => app.mode));
|
|
|
const modeMap = {
|
|
|
workflow: '工作流',
|
|
|
'advanced-chat': '高级助手',
|
|
|
@@ -71,6 +78,11 @@ const loadApps = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const loadMoreApps = async () => {
|
|
|
+ page.value += 1; // 增加页码
|
|
|
+ await loadApps(); // 加载更多数据
|
|
|
+};
|
|
|
+
|
|
|
const filterApps = () => {
|
|
|
if (selectedCategory.value === '全部') {
|
|
|
filter_agent_list.value = agent_list.value;
|
|
|
@@ -90,7 +102,17 @@ const adjustContainerHeight = () => {
|
|
|
if (agentsListContainer.value) {
|
|
|
const windowHeight = window.innerHeight;
|
|
|
const containerTop = agentsListContainer.value.getBoundingClientRect().top;
|
|
|
- agentsListContainer.value.style.height = `${windowHeight - containerTop - 20}px`; // 20px 是底部的间距
|
|
|
+ agentsListContainer.value.style.height = `${windowHeight - containerTop - 80}px`; // 20px 是底部的间距
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleScroll = () => {
|
|
|
+ if (agentsListContainer.value) {
|
|
|
+ const { scrollTop, scrollHeight, clientHeight } = agentsListContainer.value;
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 10) {
|
|
|
+ // 距离底部10px时加载更多
|
|
|
+ loadMoreApps();
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -98,10 +120,14 @@ onMounted(() => {
|
|
|
loadApps();
|
|
|
nextTick(adjustContainerHeight);
|
|
|
window.addEventListener('resize', adjustContainerHeight);
|
|
|
+ agentsListContainer.value.addEventListener('scroll', handleScroll);
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener('resize', adjustContainerHeight);
|
|
|
+ if (agentsListContainer.value) {
|
|
|
+ agentsListContainer.value.removeEventListener('scroll', handleScroll);
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const createAgent = () => {
|
|
|
@@ -169,6 +195,7 @@ const handleAgentClick = async (app) => {
|
|
|
scrollbar-width: none; /* Firefox */
|
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
|
align-content: flex-start; /* 添加此行 */
|
|
|
+ padding-bottom: 20px; /* 添加底部间距 */
|
|
|
}
|
|
|
|
|
|
.agents-list-container::-webkit-scrollbar {
|