MCP工具管理系统

Liudef06

1228人浏览 · 2025-08-23 00:00:00

Liudef06 · 2025-08-23 00:00:00 发布

MCP工具管理系统

我将设计一个直观、美观的MCP（Model Context Protocol）工具管理界面，让用户能够轻松查看、管理和使用各种工具。
在这里插入图片描述

设计思路

左侧导航栏显示工具分类
中间区域展示工具列表和详情
使用卡片式布局提高可读性
添加搜索和筛选功能
采用现代化UI设计

下面是完整的实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP工具管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo i {
            font-size: 2.5rem;
            color: #4361ee;
        }
        
        .logo h1 {
            font-size: 2.2rem;
            background: linear-gradient(45deg, #4361ee, #3a0ca3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .search-bar {
            display: flex;
            gap: 10px;
        }
        
        .search-bar input {
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            width: 300px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            font-size: 1rem;
        }
        
        .search-bar button {
            background: #4361ee;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 20px;
            cursor: pointer;
            transition: background 0.3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-bar button:hover {
            background: #3a0ca3;
        }
        
        .main-content {
            display: flex;
            gap: 30px;
        }
        
        .sidebar {
            flex: 0 0 250px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            height: fit-content;
        }
        
        .sidebar h2 {
            margin-bottom: 20px;
            color: #3a0ca3;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .categories {
            list-style: none;
        }
        
        .categories li {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .categories li:hover {
            background: #f0f4ff;
        }
        
        .categories li.active {
            background: #4361ee;
            color: white;
        }
        
        .categories li i {
            font-size: 1.2rem;
        }
        
        .tools-section {
            flex: 1;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .section-header h2 {
            font-size: 1.8rem;
            color: #3a0ca3;
        }
        
        .filters {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .filter-btn {
            background: white;
            border: none;
            padding: 10px 20px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        
        .filter-btn:hover {
            transform: translateY(-2px);
        }
        
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .tool-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .tool-card:hover {
            transform: translateY(-5px);
        }
        
        .tool-header {
            padding: 20px;
            background: linear-gradient(45deg, #4361ee, #3a0ca3);
            color: white;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .tool-header i {
            font-size: 2rem;
        }
        
        .tool-body {
            padding: 20px;
        }
        
        .tool-body p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .tool-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }
        
        .tool-actions {
            display: flex;
            gap: 10px;
        }
        
        .tool-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.3s;
        }
        
        .tool-btn.primary {
            background: #4361ee;
            color: white;
        }
        
        .tool-btn.primary:hover {
            background: #3a0ca3;
        }
        
        .tool-btn.secondary {
            background: #f0f4ff;
            color: #4361ee;
        }
        
        .tool-btn.secondary:hover {
            background: #e2eaff;
        }
        
        .tool-details {
            margin-top: 40px;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .tool-details h3 {
            color: #3a0ca3;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .detail-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .detail-actions {
            margin-top: 30px;
            display: flex;
            gap: 15px;
        }
        
        @media (max-width: 1100px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                flex: 1;
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .detail-content {
                grid-template-columns: 1fr;
            }
            
            .search-bar input {
                width: 200px;
            }
            
            .tools-grid {
                grid-template-columns: 1fr;
            }
            
            header {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-tools"></i>
                <h1>MCP工具管理系统</h1>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索工具...">
                <button><i class="fas fa-search"></i> 搜索</button>
            </div>
        </header>
        
        <div class="main-content">
            <div class="sidebar">
                <h2><i class="fas fa-layer-group"></i> 工具分类</h2>
                <ul class="categories">
                    <li class="active"><i class="fas fa-code"></i> 代码工具</li>
                    <li><i class="fas fa-database"></i> 数据处理</li>
                    <li><i class="fas fa-robot"></i> AI辅助</li>
                    <li><i class="fas fa-shield-alt"></i> 安全工具</li>
                    <li><i class="fas fa-network-wired"></i> 网络工具</li>
                    <li><i class="fas fa-cloud"></i> 云服务工具</li>
                    <li><i class="fas fa-chart-line"></i> 分析工具</li>
                </ul>
            </div>
            
            <div class="tools-section">
                <div class="section-header">
                    <h2>代码工具</h2>
                    <div class="filters">
                        <div class="filter-btn">
                            <i class="fas fa-sort"></i> 排序
                        </div>
                        <div class="filter-btn">
                            <i class="fas fa-filter"></i> 筛选
                        </div>
                    </div>
                </div>
                
                <div class="tools-grid">
                    <div class="tool-card">
                        <div class="tool-header">
                            <i class="fab fa-python"></i>
                            <h3>Python代码分析</h3>
                        </div>
                        <div class="tool-body">
                            <p>分析Python代码质量，检查PEP8规范，并提供改进建议。</p>
                            <div class="tool-meta">
                                <span><i class="fas fa-star"></i> 4.8</span>
                                <span><i class="fas fa-download"></i> 1,204</span>
                            </div>
                            <div class="tool-actions">
                                <button class="tool-btn primary">使用工具</button>
                                <button class="tool-btn secondary">详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tool-card">
                        <div class="tool-header">
                            <i class="fab fa-js"></i>
                            <h3>JavaScript压缩</h3>
                        </div>
                        <div class="tool-body">
                            <p>压缩和优化JavaScript代码，减少文件大小，提高加载速度。</p>
                            <div class="tool-meta">
                                <span><i class="fas fa-star"></i> 4.6</span>
                                <span><i class="fas fa-download"></i> 982</span>
                            </div>
                            <div class="tool-actions">
                                <button class="tool-btn primary">使用工具</button>
                                <button class="tool-btn secondary">详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tool-card">
                        <div class="tool-header">
                            <i class="fas fa-code"></i>
                            <h3>代码格式化</h3>
                        </div>
                        <div class="tool-body">
                            <p>自动格式化多种编程语言的代码，支持自定义样式配置。</p>
                            <div class="tool-meta">
                                <span><i class="fas fa-star"></i> 4.9</span>
                                <span><i class="fas fa-download"></i> 2,356</span>
                            </div>
                            <div class="tool-actions">
                                <button class="tool-btn primary">使用工具</button>
                                <button class="tool-btn secondary">详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tool-card">
                        <div class="tool-header">
                            <i class="fas fa-bug"></i>
                            <h3>Debug助手</h3>
                        </div>
                        <div class="tool-body">
                            <p>智能检测代码中的错误和潜在问题，提供修复建议。</p>
                            <div class="tool-meta">
                                <span><i class="fas fa-star"></i> 4.7</span>
                                <span><i class="fas fa-download"></i> 1,789</span>
                            </div>
                            <div class="tool-actions">
                                <button class="tool-btn primary">使用工具</button>
                                <button class="tool-btn secondary">详情</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tool-details">
                    <h3>工具详情</h3>
                    <div class="detail-content">
                        <div>
                            <h4>Python代码分析功能</h4>
                            <p>该工具可以分析Python代码的质量和风格，检查是否符合PEP8规范，并提供详细的改进建议。</p>
                            <ul>
                                <li>代码复杂度分析</li>
                                <li>PEP8规范检查</li>
                                <li>潜在错误检测</li>
                                <li>代码重复度检查</li>
                                <li>自动修复建议</li>
                            </ul>
                        </div>
                        <div>
                            <h4>使用统计</h4>
                            <p>最近30天使用次数: 1,245</p>
                            <p>用户评分: 4.8/5.0</p>
                            <p>平均处理时间: 2.3秒</p>
                            <p>成功率: 99.2%</p>
                        </div>
                    </div>
                    <div class="detail-actions">
                        <button class="tool-btn primary"><i class="fas fa-play"></i> 立即使用</button>
                        <button class="tool-btn secondary"><i class="fas fa-cog"></i> 配置工具</button>
                        <button class="tool-btn secondary"><i class="fas fa-info-circle"></i> 查看文档</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简单的分类切换功能
        document.querySelectorAll('.categories li').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelector('.categories li.active').classList.remove('active');
                this.classList.add('active');
                
                // 更新工具类别标题
                const categoryName = this.textContent.trim();
                document.querySelector('.section-header h2').textContent = categoryName;
            });
        });
        
        // 工具卡片点击效果
        document.querySelectorAll('.tool-card').forEach(card => {
            card.addEventListener('click', function(e) {
                if (!e.target.classList.contains('tool-btn')) {
                    this.classList.toggle('active');
                }
            });
        });
    </script>
</body>
</html>

功能说明

这个MCP工具管理系统具有以下特点：

直观的界面设计：采用现代化卡片式布局和渐变色彩
分类管理：左侧导航栏提供多种工具分类
工具展示：使用卡片展示每个工具的基本信息、评分和使用次数
搜索功能：顶部提供搜索框，方便查找工具
响应式设计：适配不同屏幕尺寸的设备
工具详情：底部显示当前选中工具的详细信息和功能

您可以直接复制上面的代码到HTML文件中运行，或者根据实际需求进行修改和扩展。

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

MoneyPrinterTurbo：让中小企业把短视频生产成本压到接近零｜SSP Github Daily

MoneyPrinterTurbo 是务实的“API 编排”项目——不自研模型、不赌未来技术，只用今天成熟的 API，把短视频生产成本压到接近零，让中小企业从“单条手工剪辑”转向“批量内容实验”。

LangChain+Gradio+千问大模型实现AI聊天助手

1. 非流式输出模式。

cover

Stripe花75亿美元买了个“中间商“，OpenRouter被支付巨头收编了

所有评论(0)

查看更多评论

Liudef06

已为社区贡献153条内容