<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>所有工具 - 20个AI研发工具完整列表 | MCP Probe Kit</title>
<meta name="i18n-title" content="所有工具 - 21个AI研发工具完整列表 | MCP Probe Kit">
<meta name="description" content="MCP Probe Kit 完整工具列表：6个工作流编排工具、3个代码分析工具、1个Git工具、1个生成工具、7个项目管理工具、3个UI/UX工具。">
<meta name="keywords" content="AI 开发工具, 代码生成工具, 代码审查工具, Git 自动化, UI 生成, 代码重构, 性能优化, 安全扫描">
<meta name="author" content="小墨 (Kyle) - ByteZoneX">
<meta name="robots" content="index, follow">
<script src="../assets/js/tailwind.js" data-cfasync="false"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: { DEFAULT: '#2563EB', hover: '#1D4ED8' },
text: { primary: '#0F172A', secondary: '#475569', tertiary: '#64748B' },
bg: { page: '#F8FAFC', card: '#FFFFFF', hover: '#F1F5F9' },
border: '#E2E8F0',
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', '"PingFang SC"', '"Microsoft YaHei"', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans CJK SC"', 'sans-serif'],
mono: ['ui-monospace', '"SF Mono"', '"Cascadia Code"', '"Consolas"', 'Menlo', 'Monaco', '"PingFang SC"', '"Microsoft YaHei"', '"Courier New"', 'monospace']
},
}
}
}
</script>
<style>
html {
scroll-behavior: smooth;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
}
code, kbd, pre, samp { font-family: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", Menlo, Monaco, "PingFang SC", "Microsoft YaHei", "Courier New", monospace; }
.code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sidebar-drawer { transition: transform 0.3s ease; }
@media (max-width: 767px) {
.sidebar-drawer { transform: translateX(-100%); }
.sidebar-drawer.open { transform: translateX(0); }
}
.backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.backdrop.active { opacity: 1; pointer-events: auto; }
</style>
</head>
<body>
<!-- A. 顶部导航栏 -->
<nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
<div class="h-full px-4 flex items-center justify-between">
<a href="../index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
<span>🚀</span>
<span class="sm:inline hidden">MCP Probe Kit</span>
</a>
<div class="flex items-center gap-3">
<div id="lang-switcher-container"></div>
<button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</nav>
<!-- 侧边栏遮罩 -->
<div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
<!-- B. 侧边栏 -->
<aside class="fixed left-0 top-14 bottom-0 w-64 bg-white border-r border-border z-50 sidebar-drawer overflow-y-auto md:translate-x-0 md:block" id="sidebar">
<div class="p-4">
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.quickStart">快速开始</div>
<a href="../index.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>🏠</span>
<span data-i18n="sidebar.home">文档首页</span>
</a>
<a href="./getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>📖</span>
<span data-i18n="sidebar.installation">安装配置</span>
</a>
</div>
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.toolsDocs">工具文档</div>
<button onclick="toggleToolsMenu()" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary border-l-3 border-primary hover:bg-bg-page transition-colors">
<div class="flex items-center gap-2">
<span>🛠️</span>
<span data-i18n="sidebar.allTools">所有工具</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-bg-page text-xs px-2 py-0.5 rounded-full">21</span>
<svg class="w-4 h-4 transition-transform" id="tools-menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</button>
<div id="tools-submenu" class="hidden mt-1 ml-4 space-y-1">
<!-- 工具列表将通过 JavaScript 动态生成 -->
</div>
</div>
<div class="mb-4">
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.guides">指南</div>
<a href="./migration.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>🚀</span>
<span data-i18n="sidebar.migration">迁移指南</span>
</a>
<a href="./examples.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>💡</span>
<span data-i18n="sidebar.examples">最佳实践</span>
</a>
</div>
<div class="pt-4 border-t border-border">
<a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>💻</span>
<span>GitHub</span>
<span class="ml-auto text-xs">↗</span>
</a>
<a href="https://www.npmjs.com/package/mcp-probe-kit" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-bg-page hover:text-primary transition-colors no-underline">
<span>📦</span>
<span>npm</span>
<span class="ml-auto text-xs">↗</span>
</a>
</div>
<!-- QR Code -->
<div class="mt-4 pt-4 border-t border-border">
<div class="text-center">
<div class="text-xs font-semibold text-text-tertiary mb-2" data-i18n="sidebar.followUs">关注公众号</div>
<img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="微信公众号" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
<div class="text-xs text-text-tertiary mt-2" data-i18n="sidebar.getTechSharing">获取更多技术分享</div>
</div>
</div>
</div>
</aside>
<!-- C. 主内容区 -->
<main class="flex-1 mt-14 min-h-screen md:ml-64">
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
<!-- 面包屑 -->
<nav class="flex items-center gap-1 text-sm text-text-secondary mb-4 overflow-x-auto whitespace-nowrap">
<a href="../index.html" class="hover:text-primary transition-colors no-underline flex-shrink-0" data-i18n="sidebar.home">文档首页</a>
<span class="text-text-tertiary">/</span>
<span class="text-text-primary flex-shrink-0" data-i18n="sidebar.toolsDocs">工具文档</span>
<span class="text-text-tertiary">/</span>
<span class="text-text-primary flex-shrink-0" data-i18n="sidebar.allTools">所有工具</span>
</nav>
<!-- 页面标题 -->
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl font-bold text-text-primary mb-2" data-i18n="sidebar.allTools">所有工具</h1>
<p class="text-sm sm:text-base text-text-secondary" id="page-subtitle">MCP Probe Kit 提供 21 个实用工具，核心与编排工具支持结构化输出</p>
<div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-text-tertiary">
<span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded">v3.0.5</span>
<span>MCP 2025-11-25</span>
<span>SDK 1.25.3</span>
</div>
<div class="flex flex-wrap items-center gap-2 mt-2 text-xs text-text-tertiary">
<span>📦 v3.0.5</span>
<span>·</span>
<span><span data-i18n="footer.lastUpdate">最后更新</span>：2026-02-04</span>
<span>·</span>
<span><span data-i18n="footer.protocol">协议</span>：MCP 2025-11-25</span>
<span>·</span>
<span><span data-i18n="footer.sdk">SDK</span>：@modelcontextprotocol/sdk 1.25.3</span>
<span>·</span>
<a href="https://github.com/mybolide/mcp-probe-kit/edit/main/docs/pages/all-tools.html" target="_blank" rel="noopener" class="text-primary hover:underline"><span data-i18n="footer.editPage">编辑此页</span> ↗</a>
<span>·</span>
<a href="https://github.com/mybolide/mcp-probe-kit/issues/new" target="_blank" rel="noopener" class="text-primary hover:underline"><span data-i18n="footer.reportIssue">反馈问题</span> ↗</a>
</div>
</div>
<!-- 搜索框 -->
<div class="mb-6">
<input
type="text"
id="searchInput"
placeholder="🔍 搜索工具名称或描述..."
autocomplete="off"
class="w-full px-4 py-2.5 border border-border rounded-lg text-sm text-text-primary bg-white placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
/>
<div id="searchResults" class="mt-2 text-sm text-text-tertiary"></div>
</div>
<!-- 工具列表容器 -->
<div id="tools-container"></div>
<!-- Footer -->
<footer class="text-center text-sm text-text-tertiary py-4 border-t border-border mt-8">
<p>Made with ❤️ by <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:underline">小墨 (Kyle)</a></p>
<p class="mt-1">© 2024-2026 MCP Probe Kit · <a href="https://github.com/mybolide/mcp-probe-kit" target="_blank" rel="noopener" class="text-primary hover:underline">GitHub ↗</a></p>
</footer>
</div>
</main>
<!-- 引入工具数据 -->
<script src="../data/tools.js"></script>
<script src="../assets/js/i18n.js?v=20260204-3"></script>
<script>
// 应用翻译到工具数据（使用 i18n.js 加载的翻译）
function applyTranslationsToTools() {
const currentLang = window.currentLang || 'zh-CN';
const translations = window.translations && window.translations[currentLang] || {};
console.log('[all-tools] Applying translations for language:', currentLang);
console.log('[all-tools] Translations data:', translations);
// 更新页面标题
if (translations.meta && translations.meta.title) {
document.title = translations.meta.title;
console.log('[all-tools] Updated title:', translations.meta.title);
}
// 更新 meta 标签
if (translations.meta) {
const descMeta = document.querySelector('meta[name="description"]');
const keywordsMeta = document.querySelector('meta[name="keywords"]');
if (descMeta && translations.meta.description) descMeta.content = translations.meta.description;
if (keywordsMeta && translations.meta.keywords) keywordsMeta.content = translations.meta.keywords;
}
// 更新页面副标题（使用 ID 选择器）
if (translations.page) {
const subtitleEl = document.getElementById('page-subtitle');
if (subtitleEl && translations.page.subtitle) {
subtitleEl.textContent = translations.page.subtitle;
console.log('[all-tools] Updated subtitle:', translations.page.subtitle);
}
}
// 更新搜索框占位符
const searchInput = document.getElementById('searchInput');
if (searchInput && translations.search && translations.search.placeholder) {
searchInput.placeholder = translations.search.placeholder;
}
// 更新分类标题
if (translations.categories) {
for (const catKey in toolsData.categories) {
if (translations.categories[catKey]) {
toolsData.categories[catKey].title = translations.categories[catKey].title || toolsData.categories[catKey].title;
console.log(`[all-tools] Updated category ${catKey}:`, toolsData.categories[catKey].title);
}
}
}
// 更新 toolsData 中的工具描述和参数
const toolsTrans = translations.toolsData || {};
for (const categoryKey in toolsData) {
if (categoryKey === 'categories') continue;
toolsData[categoryKey].forEach(tool => {
const toolTrans = toolsTrans[tool.name];
if (toolTrans) {
tool.description = toolTrans.description || tool.description;
if (toolTrans.usage) tool.usage = toolTrans.usage;
if (toolTrans.example) tool.example = toolTrans.example;
// 更新参数描述
if (toolTrans.params && tool.params) {
tool.params.forEach(param => {
const paramTrans = toolTrans.params.find(p => p.name === param.name);
if (paramTrans && paramTrans.desc) {
param.desc = paramTrans.desc;
}
});
}
}
});
}
// 重置 allTools 数组
allTools = [];
for (const [categoryKey, tools] of Object.entries(toolsData)) {
if (categoryKey === 'categories') continue;
tools.forEach(tool => { allTools.push({ ...tool, category: categoryKey }); });
}
// 调用 i18n.js 的 applyTranslations() 来处理 data-i18n 属性
if (typeof window.applyTranslations === 'function') {
window.applyTranslations();
console.log('[all-tools] Applied i18n translations to sidebar');
}
console.log('[all-tools] Translation applied successfully');
}
let toolsMenuExpanded = true;
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
const backdrop = document.getElementById('backdrop');
const isOpen = sidebar.classList.contains('open');
if (isOpen) {
sidebar.classList.remove('open');
backdrop.classList.remove('active');
} else {
sidebar.classList.add('open');
backdrop.classList.add('active');
}
}
function toggleToolsMenu() {
toolsMenuExpanded = !toolsMenuExpanded;
const submenu = document.getElementById('tools-submenu');
const icon = document.getElementById('tools-menu-icon');
if (toolsMenuExpanded) {
submenu.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
submenu.classList.add('hidden');
icon.style.transform = '';
}
}
let allTools = [];
function generateSidebarTools() {
const submenu = document.getElementById('tools-submenu');
const currentLang = window.currentLang || 'zh-CN';
// 从 window.translations 读取当前语言的翻译
const currentTranslations = window.translations && window.translations[currentLang] || {};
const toolShortDesc = currentTranslations.toolShortDesc || {};
console.log('[all-tools] Generating sidebar tools');
console.log('[all-tools] Current language:', currentLang);
console.log('[all-tools] Current translations keys:', Object.keys(currentTranslations));
console.log('[all-tools] toolShortDesc:', toolShortDesc);
let html = '';
for (const [categoryKey, categoryInfo] of Object.entries(toolsData.categories)) {
const tools = toolsData[categoryKey];
if (!tools || tools.length === 0) continue;
// 使用翻译后的分类标题
const categoryTitle = categoryInfo.title;
html += `<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider px-2 py-1 mt-2">${categoryInfo.icon} ${categoryTitle}</div>`;
tools.forEach(tool => {
const toolId = tool.name.replace(/_/g, '-');
// 使用翻译后的工具备注
const desc = toolShortDesc[tool.name] || '';
console.log(`[all-tools] Tool: ${tool.name}, desc: ${desc}`);
const displayText = desc ? `${tool.name} (${desc})` : tool.name;
html += `<a href="#${toolId}" class="block px-2 py-1.5 text-xs text-text-secondary hover:bg-bg-page hover:text-primary rounded transition-colors">${displayText}</a>`;
});
}
submenu.innerHTML = html;
}
function scrollToTool(toolId) {
const element = document.getElementById(toolId);
if (element) {
const headerHeight = 100;
const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({ top: elementPosition - headerHeight, behavior: 'smooth' });
element.style.transition = 'background 0.3s';
element.style.background = 'rgba(37, 99, 235, 0.05)';
setTimeout(() => { element.style.background = ''; }, 2000);
}
if (window.innerWidth < 768) toggleSidebar();
}
function handleHashChange() {
const hash = window.location.hash.slice(1);
if (hash) {
setTimeout(() => scrollToTool(hash), 100);
}
}
function renderTools(filteredTools = null) {
const container = document.getElementById('tools-container');
const currentLang = window.currentLang || 'zh-CN';
const translations = window.translations && window.translations[currentLang] || {};
const searchTrans = translations.search || {};
let html = '';
if (filteredTools && filteredTools.length === 0) {
const noResultsMsg = searchTrans.noResults || '未找到匹配的工具';
html = `<div class="text-center py-8 text-text-secondary"><div class="text-4xl mb-2">🔍</div><p>${noResultsMsg}</p></div>`;
} else if (filteredTools) {
html += '<div class="space-y-6">';
filteredTools.forEach(tool => { html += renderToolCard(tool); });
html += '</div>';
} else {
for (const [categoryKey, categoryInfo] of Object.entries(toolsData.categories)) {
const tools = toolsData[categoryKey];
if (!tools || tools.length === 0) continue;
// 使用翻译后的分类标题
const categoryTitle = categoryInfo.title;
const countText = currentLang === 'zh-CN' ? '个' : '';
html += `<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm"><div class="flex items-center gap-3 mb-4 pb-4 border-b border-border"><span class="text-2xl">${categoryInfo.icon}</span><h2 class="text-lg sm:text-xl font-semibold text-text-primary">${categoryTitle}</h2><span class="ml-auto bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium">${tools.length}${countText ? ' ' + countText : ''}</span></div><div class="space-y-4">`;
tools.forEach(tool => { html += renderToolCard({ ...tool, category: categoryKey }); });
html += `</div></section>`;
}
}
container.innerHTML = html;
}
function renderToolCard(tool) {
const hasDetails = tool.params || tool.usage || tool.example;
let detailsHTML = '';
if (hasDetails) {
detailsHTML = `<div class="mt-4 pt-4 border-t border-border">
${tool.usage ? `<div class="mb-3"><h4 class="text-sm font-medium text-text-primary mb-2">📖 使用说明</h4><p class="text-sm text-text-secondary">${tool.usage}</p></div>` : ''}
${tool.params ? `<div class="mb-3"><h4 class="text-sm font-medium text-text-primary mb-2">⚙️ 参数说明</h4><ul class="space-y-1 text-sm text-text-secondary">${tool.params.map(p => `<li class="flex items-start gap-2"><code class="bg-gray-200 px-1.5 py-0.5 rounded text-xs flex-shrink-0">${p.name}</code><span class="text-xs text-text-tertiary">(${p.type}${p.required ? ', 必填' : ', 可选'})</span><span class="text-sm text-text-secondary">- ${p.desc}</span></li>`).join('')}</ul></div>` : ''}
${tool.example ? `<div><h4 class="text-sm font-medium text-text-primary mb-2">💡 使用示例</h4><div class="bg-slate-900 rounded-lg overflow-hidden"><div class="flex items-center justify-between px-3 py-2 bg-slate-800"><span class="text-xs text-slate-300 font-medium">Example</span></div><pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>${tool.example.replace(/</g, '<').replace(/>/g, '>')}</code></pre></div></div>` : ''}
</div>`;
}
return `<div class="tool-card" id="${tool.name.replace(/_/g, '-')}"><div class="flex items-start gap-3"><div class="flex-1"><div class="flex items-center gap-2 mb-2"><code class="text-sm font-medium text-text-primary bg-gray-100 px-2 py-1 rounded">${tool.name}</code><span class="bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium">✓ 结构化</span></div><p class="text-sm text-text-secondary mb-2">${tool.description}</p><p class="text-xs text-text-tertiary font-mono">Schema: ${tool.schema}</p></div></div>${detailsHTML}</div>`;
}
function searchTools(query) {
const currentLang = window.currentLang || 'zh-CN';
const translations = window.translations && window.translations[currentLang] || {};
const searchTrans = translations.search || {};
if (!query.trim()) {
document.getElementById('searchResults').textContent = '';
renderTools();
return;
}
const lowerQuery = query.toLowerCase();
const results = allTools.filter(tool => tool.name.toLowerCase().includes(lowerQuery) || tool.description.toLowerCase().includes(lowerQuery));
// 使用翻译后的搜索结果消息
const foundMsg = searchTrans.found || '找到 {count} 个匹配的工具';
const noResultsMsg = searchTrans.noResults || '未找到匹配的工具';
document.getElementById('searchResults').textContent = results.length > 0
? foundMsg.replace('{count}', results.length)
: noResultsMsg;
renderTools(results);
}
let isInitialized = false;
function init() {
console.log('[all-tools] Initializing page...');
// 初始化 allTools 数组
allTools = [];
for (const [categoryKey, tools] of Object.entries(toolsData)) {
if (categoryKey === 'categories') continue;
tools.forEach(tool => { allTools.push({ ...tool, category: categoryKey }); });
}
// 设置侧边栏（等待翻译加载后再生成）
// generateSidebarTools(); // 移除这里的调用
document.getElementById('tools-submenu').classList.remove('hidden');
document.getElementById('tools-menu-icon').style.transform = 'rotate(180deg)';
// 渲染工具列表（等待翻译加载后再渲染）
// renderTools(); // 移除这里的调用
// 添加搜索监听
document.getElementById('searchInput').addEventListener('input', (e) => { searchTools(e.target.value); });
// 监听 hash 变化
window.addEventListener('hashchange', handleHashChange);
// 页面加载时处理 hash
handleHashChange();
isInitialized = true;
console.log('[all-tools] Page initialized (waiting for i18n)');
}
// 监听 i18n 初始化完成事件
window.addEventListener('i18nReady', () => {
console.log('[all-tools] i18n ready, applying translations...');
if (isInitialized) {
applyTranslationsToTools();
generateSidebarTools();
renderTools();
}
});
// 语言切换时更新工具数据
document.addEventListener('languageChanged', () => {
console.log('[all-tools] Language changed event received');
// 保存当前搜索状态
const searchInput = document.getElementById('searchInput');
const currentSearch = searchInput ? searchInput.value : '';
const scrollPosition = window.pageYOffset;
// 应用翻译
applyTranslationsToTools();
generateSidebarTools();
// 恢复搜索状态
if (currentSearch) {
searchTools(currentSearch);
} else {
renderTools();
}
// 恢复滚动位置
window.scrollTo(0, scrollPosition);
});
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
