feat: enhance GroupCard with copy options for ID, URL, and JSON; update translations (#246)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-12-24 02:39:19 -05:00 · 2025-07-25 14:30:52 +08:00
parent b5685b7010
commit 9304653c34
8 changed files with 149 additions and 18 deletions
--- a/frontend/src/components/GroupCard.tsx
+++ b/frontend/src/components/GroupCard.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Group, Server } from '@/types'
-import { Edit, Trash, Copy, Check } from '@/components/icons/LucideIcons'
+import { Edit, Trash, Copy, Check, Link, FileCode, DropdownIcon } from '@/components/icons/LucideIcons'
 import DeleteDialog from '@/components/ui/DeleteDialog'
 import { useToast } from '@/contexts/ToastContext'
+import { useSettingsData } from '@/hooks/useSettingsData'

 interface GroupCardProps {
  group: Group
@@ -20,8 +21,25 @@ const GroupCard = ({
 }: GroupCardProps) => {
  const { t } = useTranslation()
  const { showToast } = useToast()
+  const { installConfig } = useSettingsData()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [copied, setCopied] = useState(false)
+  const [showCopyDropdown, setShowCopyDropdown] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowCopyDropdown(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])

  const handleEdit = () => {
    onEdit(group)
@@ -36,16 +54,18 @@ const GroupCard = ({
    setShowDeleteDialog(false)
  }

-  const copyToClipboard = () => {
+  const copyToClipboard = (text: string) => {
    if (navigator.clipboard && window.isSecureContext) {
-      navigator.clipboard.writeText(group.id).then(() => {
+      navigator.clipboard.writeText(text).then(() => {
        setCopied(true)
+        setShowCopyDropdown(false)
+        showToast(t('common.copySuccess'), 'success')
        setTimeout(() => setCopied(false), 2000)
      })
    } else {
      // Fallback for HTTP or unsupported clipboard API
      const textArea = document.createElement('textarea')
-      textArea.value = group.id
+      textArea.value = text
      // Avoid scrolling to bottom
      textArea.style.position = 'fixed'
      textArea.style.left = '-9999px'
@@ -55,6 +75,8 @@ const GroupCard = ({
      try {
        document.execCommand('copy')
        setCopied(true)
+        setShowCopyDropdown(false)
+        showToast(t('common.copySuccess'), 'success')
        setTimeout(() => setCopied(false), 2000)
      } catch (err) {
        showToast(t('common.copyFailed') || 'Copy failed', 'error')
@@ -64,6 +86,28 @@ const GroupCard = ({
    }
  }

+  const handleCopyId = () => {
+    copyToClipboard(group.id)
+  }
+
+  const handleCopyUrl = () => {
+    copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`)
+  }
+
+  const handleCopyJson = () => {
+    const jsonConfig = {
+      mcpServers: {
+        mcphub: {
+          url: `${installConfig.baseUrl}/mcp/${group.id}`,
+          headers: {
+            Authorization: "Bearer <your-access-token>"
+          }
+        }
+      }
+    }
+    copyToClipboard(JSON.stringify(jsonConfig, null, 2))
+  }
+
  // Get servers that belong to this group
  const groupServers = servers.filter(server => group.servers.includes(server.name))

@@ -75,13 +119,42 @@ const GroupCard = ({
            <h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
            <div className="flex items-center ml-3">
              <span className="text-xs text-gray-500 mr-1">{group.id}</span>
-              <button
-                onClick={copyToClipboard}
-                className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                title={t('common.copy')}
-              >
-                {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
-              </button>
+              <div className="relative" ref={dropdownRef}>
+                <button
+                  onClick={() => setShowCopyDropdown(!showCopyDropdown)}
+                  className="p-1 text-gray-400 hover:text-gray-600 transition-colors flex items-center"
+                  title={t('common.copy')}
+                >
+                  {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+                  <DropdownIcon size={12} className="ml-1" />
+                </button>
+
+                {showCopyDropdown && (
+                  <div className="absolute top-full left-0 mt-1 bg-white shadow-lg rounded-md border border-gray-200 py-1 z-10 min-w-[140px]">
+                    <button
+                      onClick={handleCopyId}
+                      className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center"
+                    >
+                      <Copy size={12} className="mr-2" />
+                      {t('common.copyId')}
+                    </button>
+                    <button
+                      onClick={handleCopyUrl}
+                      className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center"
+                    >
+                      <Link size={12} className="mr-2" />
+                      {t('common.copyUrl')}
+                    </button>
+                    <button
+                      onClick={handleCopyJson}
+                      className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center"
+                    >
+                      <FileCode size={12} className="mr-2" />
+                      {t('common.copyJson')}
+                    </button>
+                  </div>
+                )}
+              </div>
            </div>
          </div>
          {group.description && (
--- a/frontend/src/components/icons/LucideIcons.tsx
+++ b/frontend/src/components/icons/LucideIcons.tsx
@@ -13,7 +13,10 @@ import {
  Loader,
  CheckCircle,
  XCircle,
-  AlertCircle
+  AlertCircle,
+  Link,
+  FileCode,
+  ChevronDown as DropdownIcon
 } from 'lucide-react'

 export {
@@ -31,7 +34,10 @@ export {
  Loader,
  CheckCircle,
  XCircle,
-  AlertCircle
+  AlertCircle,
+  Link,
+  FileCode,
+  DropdownIcon
 }

 const LucideIcons = {
@@ -49,7 +55,10 @@ const LucideIcons = {
  Loader,
  CheckCircle,
  XCircle,
-  AlertCircle
+  AlertCircle,
+  Link,
+  FileCode,
+  DropdownIcon
 }

 export default LucideIcons
--- a/frontend/src/hooks/useSettingsData.ts
+++ b/frontend/src/hooks/useSettingsData.ts
@@ -16,6 +16,7 @@ interface RoutingConfig {
 interface InstallConfig {
  pythonIndexUrl: string;
  npmRegistry: string;
+  baseUrl: string;
 }

 interface SmartRoutingConfig {
@@ -57,6 +58,7 @@ export const useSettingsData = () => {
  const [installConfig, setInstallConfig] = useState<InstallConfig>({
    pythonIndexUrl: '',
    npmRegistry: '',
+    baseUrl: 'http://localhost:3000',
  });

  const [smartRoutingConfig, setSmartRoutingConfig] = useState<SmartRoutingConfig>({
@@ -108,6 +110,7 @@ export const useSettingsData = () => {
        setInstallConfig({
          pythonIndexUrl: data.data.systemConfig.install.pythonIndexUrl || '',
          npmRegistry: data.data.systemConfig.install.npmRegistry || '',
+          baseUrl: data.data.systemConfig.install.baseUrl || 'http://localhost:3000',
        });
      }
      if (data.success && data.data?.systemConfig?.smartRouting) {
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -180,6 +180,9 @@
    "delete": "Delete",
    "remove": "Remove",
    "copy": "Copy",
+    "copyId": "Copy ID",
+    "copyUrl": "Copy URL",
+    "copyJson": "Copy JSON",
    "copySuccess": "Copied to clipboard",
    "copyFailed": "Copy failed",
    "close": "Close",
@@ -366,6 +369,9 @@
    "npmRegistry": "NPM Registry URL",
    "npmRegistryDescription": "Set npm_config_registry environment variable for NPM package installation",
    "npmRegistryPlaceholder": "e.g. https://registry.npmjs.org/",
+    "baseUrl": "Base URL",
+    "baseUrlDescription": "Base URL for MCP requests",
+    "baseUrlPlaceholder": "e.g. http://localhost:3000",
    "installConfig": "Installation",
    "systemConfigUpdated": "System configuration updated successfully",
    "enableSmartRouting": "Enable Smart Routing",
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -181,6 +181,9 @@
    "delete": "删除",
    "remove": "移除",
    "copy": "复制",
+    "copyId": "复制ID",
+    "copyUrl": "复制URL",
+    "copyJson": "复制JSON",
    "copySuccess": "已复制到剪贴板",
    "copyFailed": "复制失败",
    "close": "关闭",
@@ -367,6 +370,9 @@
    "npmRegistry": "NPM 仓库地址",
    "npmRegistryDescription": "设置 npm_config_registry 环境变量，用于 NPM 包安装",
    "npmRegistryPlaceholder": "例如: https://registry.npmmirror.com/",
+    "baseUrl": "基础地址",
+    "baseUrlDescription": "用于 MCP 请求的基础地址",
+    "baseUrlPlaceholder": "例如: http://localhost:3000",
    "installConfig": "安装配置",
    "systemConfigUpdated": "系统配置更新成功",
    "enableSmartRouting": "启用智能路由",
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -23,9 +23,11 @@ const SettingsPage: React.FC = () => {
  const [installConfig, setInstallConfig] = useState<{
    pythonIndexUrl: string;
    npmRegistry: string;
+    baseUrl: string;
  }>({
    pythonIndexUrl: '',
    npmRegistry: '',
+    baseUrl: 'http://localhost:3000',
  });

  const [tempSmartRoutingConfig, setTempSmartRoutingConfig] = useState<{
@@ -125,14 +127,14 @@ const SettingsPage: React.FC = () => {
    await updateRoutingConfig('bearerAuthKey', tempRoutingConfig.bearerAuthKey);
  };

-  const handleInstallConfigChange = (key: 'pythonIndexUrl' | 'npmRegistry', value: string) => {
+  const handleInstallConfigChange = (key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl', value: string) => {
    setInstallConfig({
      ...installConfig,
      [key]: value
    });
  };

-  const saveInstallConfig = async (key: 'pythonIndexUrl' | 'npmRegistry') => {
+  const saveInstallConfig = async (key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl') => {
    await updateInstallConfig(key, installConfig[key]);
  };

@@ -467,6 +469,30 @@ const SettingsPage: React.FC = () => {

          {sectionsVisible.installConfig && (
            <div className="space-y-4 mt-4">
+              <div className="p-3 bg-gray-50 rounded-md">
+                <div className="mb-2">
+                  <h3 className="font-medium text-gray-700">{t('settings.baseUrl')}</h3>
+                  <p className="text-sm text-gray-500">{t('settings.baseUrlDescription')}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={installConfig.baseUrl}
+                    onChange={(e) => handleInstallConfigChange('baseUrl', e.target.value)}
+                    placeholder={t('settings.baseUrlPlaceholder')}
+                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
+                    disabled={loading}
+                  />
+                  <button
+                    onClick={() => saveInstallConfig('baseUrl')}
+                    disabled={loading}
+                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
+                  >
+                    {t('common.save')}
+                  </button>
+                </div>
+              </div>
+
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.pythonIndexUrl')}</h3>