@samanhappy/mcphub 0.0.10 → 0.0.12

package/frontend/src/components/ServerCard.tsx

@@ -1,230 +0,0 @@
-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

@@ -1,276 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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;