@samanhappy/mcphub 0.0.4 → 0.0.6

package/frontend/src/components/ServerCard.tsx

@@ -0,0 +1,230 @@
+import { useState, useRef, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Server } from '@/types'
+import { ChevronDown, ChevronRight, AlertCircle, Copy, Check } from 'lucide-react'
+import Badge from '@/components/ui/Badge'
+import ToolCard from '@/components/ui/ToolCard'
+import DeleteDialog from '@/components/ui/DeleteDialog'
+import { useToast } from '@/contexts/ToastContext'
+
+interface ServerCardProps {
+  server: Server
+  onRemove: (serverName: string) => void
+  onEdit: (server: Server) => void
+  onToggle?: (server: Server, enabled: boolean) => void
+}
+
+const ServerCard = ({ server, onRemove, onEdit, onToggle }: ServerCardProps) => {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [isToggling, setIsToggling] = useState(false)
+  const [showErrorPopover, setShowErrorPopover] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const errorPopoverRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (errorPopoverRef.current && !errorPopoverRef.current.contains(event.target as Node)) {
+        setShowErrorPopover(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  const handleRemove = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowDeleteDialog(true)
+  }
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onEdit(server)
+  }
+
+  const handleToggle = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isToggling || !onToggle) return
+    
+    setIsToggling(true)
+    try {
+      await onToggle(server, !(server.enabled !== false))
+    } finally {
+      setIsToggling(false)
+    }
+  }
+
+  const handleErrorIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowErrorPopover(!showErrorPopover)
+  }
+
+  const copyToClipboard = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!server.error) return
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(server.error).then(() => {
+        setCopied(true)
+        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+        setTimeout(() => setCopied(false), 2000)
+      })
+    } else {
+      // Fallback for HTTP or unsupported clipboard API
+      const textArea = document.createElement('textarea')
+      textArea.value = server.error
+      // Avoid scrolling to bottom
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-9999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      try {
+        document.execCommand('copy')
+        setCopied(true)
+        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success')
+        setTimeout(() => setCopied(false), 2000)
+      } catch (err) {
+        showToast(t('common.copyFailed') || 'Copy failed', 'error')
+        console.error('Copy to clipboard failed:', err)
+      }
+      document.body.removeChild(textArea)
+    }
+  }
+
+  const handleConfirmDelete = () => {
+    onRemove(server.name)
+    setShowDeleteDialog(false)
+  }
+
+  return (
+    <>
+      <div className={`bg-white shadow rounded-lg p-6 mb-6 ${server.enabled === false ? 'opacity-60' : ''}`}>
+        <div
+          className="flex justify-between items-center cursor-pointer"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <div className="flex items-center space-x-3">
+            <h2 className={`text-xl font-semibold ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'}`}>{server.name}</h2>
+            <Badge status={server.status} />
+            
+            {server.error && (
+              <div className="relative">
+                <div 
+                  className="cursor-pointer" 
+                  onClick={handleErrorIconClick}
+                  aria-label={t('server.viewErrorDetails')}
+                >
+                  <AlertCircle className="text-red-500 hover:text-red-600" size={18} />
+                </div>
+                
+                {showErrorPopover && (
+                  <div 
+                    ref={errorPopoverRef}
+                    className="absolute z-10 mt-2 bg-white border border-gray-200 rounded-md shadow-lg p-0 w-120"
+                    style={{ 
+                      left: '-231px', 
+                      top: '24px', 
+                      maxHeight: '300px', 
+                      overflowY: 'auto', 
+                      width: '480px',
+                      transform: 'translateX(50%)'
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="flex justify-between items-center sticky top-0 bg-white py-2 px-4 border-b border-gray-200 z-20 shadow-sm">
+                      <div className="flex items-center space-x-2">
+                        <h4 className="text-sm font-medium text-red-600">{t('server.errorDetails')}</h4>
+                        <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>
+                      <button 
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setShowErrorPopover(false)
+                        }}
+                        className="text-gray-400 hover:text-gray-600"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                    <div className="p-4 pt-2">
+                      <pre className="text-sm text-gray-700 break-words whitespace-pre-wrap">{server.error}</pre>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="flex space-x-2">
+            <button
+              onClick={handleEdit}
+              className="px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm"
+            >
+              {t('server.edit')}
+            </button>
+            <div className="flex items-center">
+              <button
+                onClick={handleToggle}
+                className={`px-3 py-1 text-sm rounded transition-colors ${
+                  isToggling 
+                    ? 'bg-gray-200 text-gray-500' 
+                    : server.enabled !== false
+                      ? 'bg-green-100 text-green-800 hover:bg-green-200'
+                      : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+                }`}
+                disabled={isToggling}
+              >
+                {isToggling 
+                  ? t('common.processing')
+                  : server.enabled !== false 
+                    ? t('server.disable') 
+                    : t('server.enable')
+                }
+              </button>
+            </div>
+            <button
+              onClick={handleRemove}
+              className="px-3 py-1 bg-red-100 text-red-800 rounded hover:bg-red-200 text-sm"
+            >
+              {t('server.delete')}
+            </button>
+            <button className="text-gray-400 hover:text-gray-600">
+              {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
+            </button>
+          </div>
+        </div>
+
+        {isExpanded && server.tools && (
+          <div className="mt-6">
+            <h3 className={`text-lg font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}>{t('server.tools')}</h3>
+            <div className="space-y-4">
+              {server.tools.map((tool, index) => (
+                <ToolCard key={index} tool={tool} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <DeleteDialog
+        isOpen={showDeleteDialog}
+        onClose={() => setShowDeleteDialog(false)}
+        onConfirm={handleConfirmDelete}
+        serverName={server.name}
+      />
+    </>
+  )
+}
+
+export default ServerCard

package/frontend/src/components/ServerForm.tsx

@@ -0,0 +1,276 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Server, EnvVar, ServerFormData } from '@/types'
+
+interface ServerFormProps {
+  onSubmit: (payload: any) => void
+  onCancel: () => void
+  initialData?: Server | null
+  modalTitle: string
+  formError?: string | null
+}
+
+const ServerForm = ({ onSubmit, onCancel, initialData = null, modalTitle, formError = null }: ServerFormProps) => {
+  const { t } = useTranslation()
+  const [serverType, setServerType] = useState<'sse' | 'stdio'>(
+    initialData && initialData.config && initialData.config.url ? 'sse' : 'stdio',
+  )
+
+  const [formData, setFormData] = useState<ServerFormData>({
+    name: (initialData && initialData.name) || '',
+    url: (initialData && initialData.config && initialData.config.url) || '',
+    command: (initialData && initialData.config && initialData.config.command) || '',
+    arguments:
+      initialData && initialData.config && initialData.config.args
+        ? Array.isArray(initialData.config.args)
+          ? initialData.config.args.join(' ')
+          : String(initialData.config.args)
+        : '',
+    args: (initialData && initialData.config && initialData.config.args) || [],
+  })
+
+  const [envVars, setEnvVars] = useState<EnvVar[]>(
+    initialData && initialData.config && initialData.config.env
+      ? Object.entries(initialData.config.env).map(([key, value]) => ({ key, value }))
+      : [],
+  )
+
+  const [error, setError] = useState<string | null>(null)
+  const isEdit = !!initialData
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  // Transform space-separated arguments string into array
+  const handleArgsChange = (value: string) => {
+    let args = value.split(' ').filter((arg) => arg.trim() !== '')
+    setFormData({ ...formData, arguments: value, args })
+  }
+
+  const handleEnvVarChange = (index: number, field: 'key' | 'value', value: string) => {
+    const newEnvVars = [...envVars]
+    newEnvVars[index][field] = value
+    setEnvVars(newEnvVars)
+  }
+
+  const addEnvVar = () => {
+    setEnvVars([...envVars, { key: '', value: '' }])
+  }
+
+  const removeEnvVar = (index: number) => {
+    const newEnvVars = [...envVars]
+    newEnvVars.splice(index, 1)
+    setEnvVars(newEnvVars)
+  }
+
+  // Submit handler for server configuration
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    try {
+      const env: Record<string, string> = {}
+      envVars.forEach(({ key, value }) => {
+        if (key.trim()) {
+          env[key.trim()] = value
+        }
+      })
+
+      const payload = {
+        name: formData.name,
+        config:
+          serverType === 'sse'
+            ? { url: formData.url }
+            : {
+                command: formData.command,
+                args: formData.args,
+                env: Object.keys(env).length > 0 ? env : undefined,
+              },
+      }
+
+      onSubmit(payload)
+    } catch (err) {
+      setError(`Error: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
+  return (
+    <div className="bg-white shadow rounded-lg p-6 w-full max-w-xl max-h-screen overflow-y-auto">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold text-gray-900">{modalTitle}</h2>
+        <button onClick={onCancel} className="text-gray-500 hover:text-gray-700">
+          ✕
+        </button>
+      </div>
+
+      {(error || formError) && (
+        <div className="bg-red-50 text-red-700 p-3 rounded mb-4">
+          {formError || error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
+            {t('server.name')}
+          </label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            value={formData.name}
+            onChange={handleInputChange}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            placeholder="e.g.: time-mcp"
+            required
+            disabled={isEdit}
+          />
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2">{t('server.type')}</label>
+          <div className="flex space-x-4">
+            <div>
+              <input
+                type="radio"
+                id="command"
+                name="serverType"
+                value="command"
+                checked={serverType === 'stdio'}
+                onChange={() => setServerType('stdio')}
+                className="mr-1"
+              />
+              <label htmlFor="command">stdio</label>
+            </div>
+            <div>
+              <input
+                type="radio"
+                id="url"
+                name="serverType"
+                value="url"
+                checked={serverType === 'sse'}
+                onChange={() => setServerType('sse')}
+                className="mr-1"
+              />
+              <label htmlFor="url">sse</label>
+            </div>
+          </div>
+        </div>
+
+        {serverType === 'sse' ? (
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="url">
+              {t('server.url')}
+            </label>
+            <input
+              type="url"
+              name="url"
+              id="url"
+              value={formData.url}
+              onChange={handleInputChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              placeholder="e.g.: http://localhost:3000/sse"
+              required={serverType === 'sse'}
+            />
+          </div>
+        ) : (
+          <>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="command">
+                {t('server.command')}
+              </label>
+              <input
+                type="text"
+                name="command"
+                id="command"
+                value={formData.command}
+                onChange={handleInputChange}
+                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                placeholder="e.g.: npx"
+                required={serverType === 'stdio'}
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="arguments">
+                {t('server.arguments')}
+              </label>
+              <input
+                type="text"
+                name="arguments"
+                id="arguments"
+                value={formData.arguments}
+                onChange={(e) => handleArgsChange(e.target.value)}
+                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                placeholder="e.g.: -y time-mcp"
+                required={serverType === 'stdio'}
+              />
+            </div>
+
+            <div className="mb-4">
+              <div className="flex justify-between items-center mb-2">
+                <label className="block text-gray-700 text-sm font-bold">
+                  {t('server.envVars')}
+                </label>
+                <button
+                  type="button"
+                  onClick={addEnvVar}
+                  className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-1 px-2 rounded text-sm flex items-center"
+                >
+                  + {t('server.add')}
+                </button>
+              </div>
+              {envVars.map((envVar, index) => (
+                <div key={index} className="flex items-center mb-2">
+                  <div className="flex items-center space-x-2 flex-grow">
+                    <input
+                      type="text"
+                      value={envVar.key}
+                      onChange={(e) => handleEnvVarChange(index, 'key', e.target.value)}
+                      className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-1/2"
+                      placeholder={t('server.key')}
+                    />
+                    <span className="flex items-center">:</span>
+                    <input
+                      type="text"
+                      value={envVar.value}
+                      onChange={(e) => handleEnvVarChange(index, 'value', e.target.value)}
+                      className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-1/2"
+                      placeholder={t('server.value')}
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeEnvVar(index)}
+                    className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-1 px-2 rounded text-sm flex items-center justify-center min-w-[56px] ml-2"
+                  >
+                    - {t('server.remove')}
+                  </button>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <div className="flex justify-end mt-6">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded mr-2"
+          >
+            {t('server.cancel')}
+          </button>
+          <button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
+          >
+            {isEdit ? t('server.save') : t('server.add')}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default ServerForm

package/frontend/src/components/icons/LucideIcons.tsx

@@ -0,0 +1,14 @@
+import { ChevronDown, ChevronRight, Edit, Trash, Copy, Check } from 'lucide-react'
+
+export { ChevronDown, ChevronRight, Edit, Trash, Copy, Check }
+
+const LucideIcons = {
+  ChevronDown,
+  ChevronRight,
+  Edit,
+  Trash,
+  Copy,
+  Check
+}
+
+export default LucideIcons

package/frontend/src/components/layout/Content.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+interface ContentProps {
+  children: ReactNode;
+}
+
+const Content: React.FC<ContentProps> = ({ children }) => {
+  return (
+    <main className="flex-1 p-6 overflow-auto">
+      <div className="max-w-5xl mx-auto">
+        {children}
+      </div>
+    </main>
+  );
+};
+
+export default Content;

package/frontend/src/components/layout/Header.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+
+interface HeaderProps {
+  onToggleSidebar: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ onToggleSidebar }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { auth, logout } = useAuth();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  return (
+    <header className="bg-white shadow-sm z-10">
+      <div className="flex justify-between items-center px-4 py-3">
+        <div className="flex items-center">
+          {/* 侧边栏切换按钮 */}
+          <button 
+            onClick={onToggleSidebar}
+            className="p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none"
+            aria-label={t('app.toggleSidebar')}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          
+          {/* 应用标题 */}
+          <h1 className="ml-4 text-xl font-bold text-gray-900">{t('app.title')}</h1>
+        </div>
+        
+        {/* 用户信息和操作 */}
+        <div className="flex items-center space-x-4">
+          {auth.user && (
+            <span className="text-sm text-gray-700">
+              {t('app.welcomeUser', { username: auth.user.username })}
+            </span>
+          )}
+          
+          <div className="flex space-x-2">
+            <button
+              onClick={handleLogout}
+              className="px-3 py-1.5 bg-red-100 text-red-800 rounded hover:bg-red-200 text-sm"
+            >
+              {t('app.logout')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;