mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-11 16:26:02 +00:00
修复仓库冲突
This commit is contained in:
@@ -16,6 +16,7 @@ export default function PluginInstalledComponent() {
|
||||
|
||||
useEffect(() => {
|
||||
initData()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
function initData() {
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
import styles from "./pluginCard.module.css"
|
||||
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
|
||||
import { GithubOutlined, LinkOutlined, ToolOutlined } from '@ant-design/icons';
|
||||
import { Tag } from 'antd'
|
||||
import { Switch, Tag } from 'antd'
|
||||
import { useState } from "react";
|
||||
import { httpClient } from "@/app/infra/http/HttpClient";
|
||||
|
||||
export default function PluginCardComponent({
|
||||
cardVO
|
||||
}: {
|
||||
cardVO: PluginCardVO
|
||||
}) {
|
||||
const [initialized, setInitialized] = useState(cardVO.isInitialized);
|
||||
const [switchEnable, setSwitchEnable] = useState(true);
|
||||
|
||||
function handleEnable() {
|
||||
setSwitchEnable(false);
|
||||
httpClient
|
||||
.togglePlugin(cardVO.author, cardVO.name, !initialized)
|
||||
.then(() => {
|
||||
setInitialized(!initialized);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("error: ", err);
|
||||
})
|
||||
.finally(() => {
|
||||
setSwitchEnable(true);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.cardContainer}`}>
|
||||
{/* header */}
|
||||
|
||||
@@ -1,90 +1,70 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "@/app/home/plugins/plugins.module.css";
|
||||
import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
|
||||
import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
|
||||
import { Input, Pagination } from "antd";
|
||||
import { debounce } from "lodash"
|
||||
import { spaceClient } from "@/app/infra/http/HttpClient";
|
||||
|
||||
export default function PluginMarketComponent() {
|
||||
const [marketPluginList, setMarketPluginList] = useState<PluginMarketCardVO[]>([])
|
||||
const [searchKeyword, setSearchKeyword] = useState("")
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [totalItems, setTotalItems] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const pageSize = 10 // 每页显示的项目数量
|
||||
const [marketPluginList, setMarketPluginList] = useState<
|
||||
PluginMarketCardVO[]
|
||||
>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [nowPage, setNowPage] = useState(1);
|
||||
const [searchKeyword, setSearchKeyword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const pageSize = 10;
|
||||
|
||||
useEffect(() => {
|
||||
fetchPlugins(searchKeyword, currentPage)
|
||||
}, [currentPage])
|
||||
initData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// 获取插件列表,整合了搜索和分页功能
|
||||
async function fetchPlugins(keyword: string = "", page: number = 1): Promise<void> {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 实际应用中,这里应该调用API获取数据
|
||||
const result = await mockFetchPlugins(keyword, page, pageSize)
|
||||
setMarketPluginList(result.data)
|
||||
setTotalItems(result.total)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟从API获取数据
|
||||
async function mockFetchPlugins(keyword: string, page: number, pageSize: number): Promise<{ data: PluginMarketCardVO[], total: number }> {
|
||||
// 模拟API延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
||||
// 创建模拟数据
|
||||
const allPlugins: PluginMarketCardVO[] = []
|
||||
const totalPlugins = 50 // 模拟总数据量
|
||||
|
||||
for (let i = 0; i < totalPlugins; i++) {
|
||||
allPlugins.push(new PluginMarketCardVO({
|
||||
pluginId: `plugin-${i}`,
|
||||
description: `这是插件 ${i} 的描述,包含一些详细信息`,
|
||||
name: `插件 ${i}`,
|
||||
author: `/author-${i % 5}`, // 模拟5个不同的作者
|
||||
version: `0.${i % 10}`,
|
||||
githubURL: `https://github.com/author-${i % 5}/plugin-${i}`,
|
||||
starCount: 10 + Math.floor(Math.random() * 100)
|
||||
}))
|
||||
}
|
||||
|
||||
// 根据关键词过滤
|
||||
const filtered = keyword
|
||||
? allPlugins.filter(p =>
|
||||
p.name.toLowerCase().includes(keyword.toLowerCase()) ||
|
||||
p.description.toLowerCase().includes(keyword.toLowerCase()))
|
||||
: allPlugins
|
||||
|
||||
// 分页处理
|
||||
const start = (page - 1) * pageSize
|
||||
const end = start + pageSize
|
||||
const paginatedData = filtered.slice(start, end)
|
||||
|
||||
return {
|
||||
data: paginatedData,
|
||||
total: filtered.length
|
||||
}
|
||||
function initData() {
|
||||
getPluginList();
|
||||
}
|
||||
|
||||
function onInputSearchKeyword(keyword: string) {
|
||||
setSearchKeyword(keyword)
|
||||
setCurrentPage(1) // 搜索时重置为第一页
|
||||
debounceSearch(keyword)
|
||||
// 这里记得加防抖,暂时没加
|
||||
setSearchKeyword(keyword);
|
||||
setNowPage(1);
|
||||
getPluginList(1, keyword);
|
||||
}
|
||||
|
||||
const debounceSearch = useCallback(
|
||||
debounce((keyword: string) => {
|
||||
fetchPlugins(keyword, 1)
|
||||
}, 500), []
|
||||
)
|
||||
function getPluginList(
|
||||
page: number = nowPage,
|
||||
keyword: string = searchKeyword
|
||||
) {
|
||||
setLoading(true);
|
||||
spaceClient.getMarketPlugins(page, pageSize, keyword).then((res) => {
|
||||
setMarketPluginList(
|
||||
res.plugins.map(
|
||||
(marketPlugin) =>
|
||||
new PluginMarketCardVO({
|
||||
author: marketPlugin.author,
|
||||
description: marketPlugin.description,
|
||||
githubURL: marketPlugin.repository,
|
||||
name: marketPlugin.name,
|
||||
pluginId: String(marketPlugin.ID),
|
||||
starCount: marketPlugin.stars,
|
||||
version: "version" in marketPlugin ? String(marketPlugin.version) : "1.0.0", // Default version if not provided
|
||||
})
|
||||
)
|
||||
);
|
||||
setTotalCount(res.total);
|
||||
setLoading(false);
|
||||
console.log("market plugins:", res);
|
||||
}).catch(error => {
|
||||
console.error("获取插件列表失败:", error);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
setCurrentPage(page)
|
||||
setNowPage(page);
|
||||
getPluginList(page);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -111,11 +91,11 @@ export default function PluginMarketComponent() {
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{totalItems > 0 && (
|
||||
{totalCount > 0 && (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '20px' }}>
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalItems}
|
||||
current={nowPage}
|
||||
total={totalCount}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
showSizeChanger={false}
|
||||
|
||||
Reference in New Issue
Block a user