feat: adjust ui

2025-11-25 03:15:06 +08:00 · 2025-09-30 00:21:13 +08:00
parent 0f35458cf7
commit 0b527868bc
5 changed files with 101 additions and 100 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,7 @@
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-checkbox": "^1.3.1",
    "@radix-ui/react-context-menu": "^2.2.15",
    "@radix-ui/react-dialog": "^1.1.14",
--- a/web/src/app/home/plugins/mcp-market/MCPMarketComponent.tsx
+++ b/web/src/app/home/plugins/mcp-market/MCPMarketComponent.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react';
 import styles from '@/app/home/plugins/plugins.module.css';
 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 { spaceClient } from '@/app/infra/http/HttpClient';
+// import { spaceClient } from '@/app/infra/http/HttpClient';
 import { useTranslation } from 'react-i18next';
 import { Input } from '@/components/ui/input';
 import {
@@ -72,44 +72,44 @@ export default function MCPMarketComponent({
    sortOrder: string = sortOrderValue,
  ) {
    setLoading(true);
-    spaceClient
-      .getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder)
-      .then((res) => {
-        setMarketServerList(
-          res.servers.map((marketServer) => {
-            let repository = marketServer.repository;
-            if (repository.startsWith('https://github.com/')) {
-              repository = repository.replace('https://github.com/', '');
-            }
+    // spaceClient
+    //   .getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder)
+    //   .then((res) => {
+    //     setMarketServerList(
+    //       res.servers.map((marketServer) => {
+    //         let repository = marketServer.repository;
+    //         if (repository.startsWith('https://github.com/')) {
+    //           repository = repository.replace('https://github.com/', '');
+    //         }

-            if (repository.startsWith('github.com/')) {
-              repository = repository.replace('github.com/', '');
-            }
+    //         if (repository.startsWith('github.com/')) {
+    //           repository = repository.replace('github.com/', '');
+    //         }

-            const author = repository.split('/')[0];
-            const name = repository.split('/')[1];
-            return new MCPMarketCardVO({
-              author: author,
-              description: marketServer.description,
-              githubURL: `https://github.com/${repository}`,
-              name: name,
-              serverId: String(marketServer.ID),
-              starCount: marketServer.stars,
-              version:
-                'version' in marketServer
-                  ? String(marketServer.version)
-                  : '1.0.0', // 如果没有提供版本，则默认为1.0.0
-            });
-          }),
-        );
-        setTotalCount(res.total);
-        setLoading(false);
-        console.log('market servers:', res);
-      })
-      .catch((error) => {
-        console.error(t('mcp.getServerListError'), error);
-        setLoading(false);
-      });
+    //         const author = repository.split('/')[0];
+    //         const name = repository.split('/')[1];
+    //         return new MCPMarketCardVO({
+    //           author: author,
+    //           description: marketServer.description,
+    //           githubURL: `https://github.com/${repository}`,
+    //           name: name,
+    //           serverId: String(marketServer.ID),
+    //           starCount: marketServer.stars,
+    //           version:
+    //             'version' in marketServer
+    //               ? String(marketServer.version)
+    //               : '1.0.0', // 如果没有提供版本，则默认为1.0.0
+    //         });
+    //       }),
+    //     );
+    //     setTotalCount(res.total);
+    //     setLoading(false);
+    //     console.log('market servers:', res);
+    //   })
+    //   .catch((error) => {
+    //     console.error(t('mcp.getServerListError'), error);
+    //     setLoading(false);
+    //   });
  }

  function handlePageChange(page: number) {
--- a/web/src/app/home/plugins/mcp/MCPComponent.tsx
+++ b/web/src/app/home/plugins/mcp/MCPComponent.tsx
@@ -122,7 +122,7 @@ const MCPComponent = forwardRef<MCPComponentRef>((props, ref) => {
            viewBox="0 0 24 24"
            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>
          <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
        </div>
--- a/web/src/app/home/plugins/page.tsx
+++ b/web/src/app/home/plugins/page.tsx
@@ -375,8 +375,8 @@ export default function PluginConfigPage() {
              </TabsTrigger>
            )}
            <TabsTrigger value="mcp" className="px-6 py-4 cursor-pointer">
-            MCP
-          </TabsTrigger>
+              MCP
+            </TabsTrigger>
          </TabsList>

          <div className="flex flex-row justify-end items-center">
--- a/web/src/app/infra/http/BackendClient.ts
+++ b/web/src/app/infra/http/BackendClient.ts
@@ -491,66 +491,66 @@ export class BackendClient extends BaseHttpClient {
    return this.post(`/api/v1/plugins/${author}/${name}/upgrade`);
  }

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

  // ============ System API ============
  public getSystemInfo(): Promise<ApiRespSystemInfo> {