injectlib/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2025-11-25 03:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: adjust ui

Browse Source
This commit is contained in:
Junyan Qin
2025-09-30 00:21:13 +08:00
parent 0f35458cf7
commit 0b527868bc
5 changed files with 101 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@@ -23,6 +23,7 @@
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
"@hookform/resolvers": "^5.0.1", "@hookform/resolvers": "^5.0.1",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-checkbox": "^1.3.1", "@radix-ui/react-checkbox": "^1.3.1",
"@radix-ui/react-context-menu": "^2.2.15", "@radix-ui/react-context-menu": "^2.2.15",
"@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dialog": "^1.1.14",

74
web/src/app/home/plugins/mcp-market/MCPMarketComponent.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react';
import styles from '@/app/home/plugins/plugins.module.css'; import styles from '@/app/home/plugins/plugins.module.css';
import { MCPMarketCardVO } from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardVO'; import { MCPMarketCardVO } from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardVO';
import MCPMarketCardComponent from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardComponent'; import MCPMarketCardComponent from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardComponent';
import { spaceClient } from '@/app/infra/http/HttpClient'; // import { spaceClient } from '@/app/infra/http/HttpClient';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { import {
@@ -72,44 +72,44 @@ export default function MCPMarketComponent({
sortOrder: string = sortOrderValue, sortOrder: string = sortOrderValue,
) { ) {
setLoading(true); setLoading(true);
spaceClient // spaceClient
.getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder) // .getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder)
.then((res) => { // .then((res) => {
setMarketServerList( // setMarketServerList(
res.servers.map((marketServer) => { // res.servers.map((marketServer) => {
let repository = marketServer.repository; // let repository = marketServer.repository;
if (repository.startsWith('https://github.com/')) { // if (repository.startsWith('https://github.com/')) {
repository = repository.replace('https://github.com/', ''); // repository = repository.replace('https://github.com/', '');
} // }
if (repository.startsWith('github.com/')) { // if (repository.startsWith('github.com/')) {
repository = repository.replace('github.com/', ''); // repository = repository.replace('github.com/', '');
} // }
const author = repository.split('/')[0]; // const author = repository.split('/')[0];
const name = repository.split('/')[1]; // const name = repository.split('/')[1];
return new MCPMarketCardVO({ // return new MCPMarketCardVO({
author: author, // author: author,
description: marketServer.description, // description: marketServer.description,
githubURL: `https://github.com/${repository}`, // githubURL: `https://github.com/${repository}`,
name: name, // name: name,
serverId: String(marketServer.ID), // serverId: String(marketServer.ID),
starCount: marketServer.stars, // starCount: marketServer.stars,
version: // version:
'version' in marketServer // 'version' in marketServer
? String(marketServer.version) // ? String(marketServer.version)
: '1.0.0', // 如果没有提供版本，则默认为1.0.0 // : '1.0.0', // 如果没有提供版本，则默认为1.0.0
}); // });
}), // }),
); // );
setTotalCount(res.total); // setTotalCount(res.total);
setLoading(false); // setLoading(false);
console.log('market servers:', res); // console.log('market servers:', res);
}) // })
.catch((error) => { // .catch((error) => {
console.error(t('mcp.getServerListError'), error); // console.error(t('mcp.getServerListError'), error);
setLoading(false); // setLoading(false);
}); // });
} }
function handlePageChange(page: number) { function handlePageChange(page: number) {

2
web/src/app/home/plugins/mcp/MCPComponent.tsx
View File

@@ -122,7 +122,7 @@ const MCPComponent = forwardRef<MCPComponentRef>((props, ref) => {
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
> >
<path d="M13.5 2C13.5 2.82843 14.1716 3.5 15 3.5C15.8284 3.5 16.5 2.82843 16.5 2C16.5 1.17157 15.8284 0.5 15 0.5C14.1716 0.5 13.5 1.17157 13.5 2ZM8.5 8C8.5 8.82843 9.17157 9.5 10 9.5C10.8284 9.5 11.5 8.82843 11.5 8C11.5 7.17157 10.8284 6.5 10 6.5C9.17157 6.5 8.5 7.17157 8.5 8ZM1.5 14C1.5 14.8284 2.17157 15.5 3 15.5C3.82843 15.5 4.5 14.8284 4.5 14C4.5 13.1716 3.82843 12.5 3 12.5C2.17157 12.5 1.5 13.1716 1.5 14ZM19.5 14C19.5 14.8284 20.1716 15.5 21 15.5C21.8284 15.5 22.5 14.8284 22.5 14C22.5 13.1716 21.8284 12.5 21 12.5C20.1716 12.5 19.5 13.1716 19.5 14ZM8.5 20C8.5 20.8284 9.17157 21.5 10 21.5C10.8284 21.5 11.5 20.8284 11.5 20C11.5 19.1716 10.8284 19 10 19C9.17157 19 8.5 19.1716 8.5 20ZM2.5 8L6.5 8L6.5 10L2.5 10L2.5 8ZM13.5 8L17.5 8L17.5 10L13.5 10L13.5 8ZM8.5 2L8.5 6L10.5 6L10.5 2L8.5 2ZM8.5 14L8.5 18L10.5 18L10.5 14L8.5 14ZM2.5 14L6.5 14L6.5 16L2.5 16L2.5 14ZM13.5 14L17.5 14L17.5 16L13.5 16L13.5 14Z"></path> <path d="M4 18V14.3C4 13.4716 3.32843 12.8 2.5 12.8H2V11.2H2.5C3.32843 11.2 4 10.5284 4 9.7V6C4 4.34315 5.34315 3 7 3H8V5H7C6.44772 5 6 5.44772 6 6V10.1C6 10.9858 5.42408 11.7372 4.62623 12C5.42408 12.2628 6 13.0142 6 13.9V18C6 18.5523 6.44772 19 7 19H8V21H7C5.34315 21 4 19.6569 4 18ZM20 14.3V18C20 19.6569 18.6569 21 17 21H16V19H17C17.5523 19 18 18.5523 18 18V13.9C18 13.0142 18.5759 12.2628 19.3738 12C18.5759 11.7372 18 10.9858 18 10.1V6C18 5.44772 17.5523 5 17 5H16V3H17C18.6569 3 20 4.34315 20 6V9.7C20 10.5284 20.6716 11.2 21.5 11.2H22V12.8H21.5C20.6716 12.8 20 13.4716 20 14.3Z"></path>
</svg> </svg>
<div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div> <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
</div> </div>

4
web/src/app/home/plugins/page.tsx
View File

@@ -375,8 +375,8 @@ export default function PluginConfigPage() {
</TabsTrigger> </TabsTrigger>
)} )}
<TabsTrigger value="mcp" className="px-6 py-4 cursor-pointer"> <TabsTrigger value="mcp" className="px-6 py-4 cursor-pointer">
MCP MCP
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<div className="flex flex-row justify-end items-center"> <div className="flex flex-row justify-end items-center">

120
web/src/app/infra/http/BackendClient.ts
View File

@@ -491,66 +491,66 @@ export class BackendClient extends BaseHttpClient {
return this.post(`/api/v1/plugins/${author}/${name}/upgrade`); return this.post(`/api/v1/plugins/${author}/${name}/upgrade`);
} }
// ============ MCP API ============ // ============ MCP API ============
public getMCPServers(): Promise<ApiRespMCPServers> { public getMCPServers(): Promise<ApiRespMCPServers> {
return this.get('/api/v1/mcp/servers'); return this.get('/api/v1/mcp/servers');
} }
public getMCPServer(serverName: string): Promise<ApiRespMCPServer> { public getMCPServer(serverName: string): Promise<ApiRespMCPServer> {
return this.get(`/api/v1/mcp/servers/${serverName}`); return this.get(`/api/v1/mcp/servers/${serverName}`);
} }
public createMCPServer( public createMCPServer(
server: MCPServerConfig, server: MCPServerConfig,
): Promise<AsyncTaskCreatedResp> { ): Promise<AsyncTaskCreatedResp> {
return this.post('/api/v1/mcp/servers', server); return this.post('/api/v1/mcp/servers', server);
} }
public updateMCPServer( public updateMCPServer(
serverName: string, serverName: string,
server: Partial<MCPServerConfig>, server: Partial<MCPServerConfig>,
): Promise<AsyncTaskCreatedResp> { ): Promise<AsyncTaskCreatedResp> {
return this.put(`/api/v1/mcp/servers/${serverName}`, server); return this.put(`/api/v1/mcp/servers/${serverName}`, server);
} }
public deleteMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> { public deleteMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> {
return this.delete(`/api/v1/mcp/servers/${serverName}`); return this.delete(`/api/v1/mcp/servers/${serverName}`);
} }
public toggleMCPServer( public toggleMCPServer(
serverName: string, serverName: string,
target_enabled: boolean, target_enabled: boolean,
): Promise<AsyncTaskCreatedResp> { ): Promise<AsyncTaskCreatedResp> {
return this.put(`/api/v1/mcp/servers/${serverName}/toggle`, { return this.put(`/api/v1/mcp/servers/${serverName}/toggle`, {
target_enabled, target_enabled,
}); });
} }
public testMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> { public testMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> {
return this.post(`/api/v1/mcp/servers/${serverName}/test`); return this.post(`/api/v1/mcp/servers/${serverName}/test`);
} }
// public getMCPMarketServers( // public getMCPMarketServers(
// page: number, // page: number,
// page_size: number, // page_size: number,
// query: string, // query: string,
// sort_by: string = 'stars', // sort_by: string = 'stars',
// sort_order: string = 'DESC', // sort_order: string = 'DESC',
// ): Promise<MCPMarketResponse> { // ): Promise<MCPMarketResponse> {
// return this.post(`/api/v1/market/mcp`, { // return this.post(`/api/v1/market/mcp`, {
// page, // page,
// page_size, // page_size,
// query, // query,
// sort_by, // sort_by,
// sort_order, // sort_order,
// }); // });
// } // }
public installMCPServerFromGithub( public installMCPServerFromGithub(
source: string, source: string,
): Promise<AsyncTaskCreatedResp> { ): Promise<AsyncTaskCreatedResp> {
return this.post('/api/v1/mcp/install/github', { source }); return this.post('/api/v1/mcp/install/github', { source });
} }
// ============ System API ============ // ============ System API ============
public getSystemInfo(): Promise<ApiRespSystemInfo> { public getSystemInfo(): Promise<ApiRespSystemInfo> {