mcp-probe-kit 3.0.5 → 3.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +458 -431
- package/build/index.js +875 -141
- package/build/lib/gitnexus-bridge.d.ts +58 -0
- package/build/lib/gitnexus-bridge.js +379 -0
- package/build/lib/template-loader.js +317 -317
- package/build/lib/tool-execution-context.d.ts +8 -0
- package/build/lib/tool-execution-context.js +20 -0
- package/build/lib/toolset-manager.d.ts +1 -1
- package/build/lib/toolset-manager.js +7 -5
- package/build/schemas/code-analysis-tools.d.ts +46 -0
- package/build/schemas/code-analysis-tools.js +47 -0
- package/build/schemas/git-tools.js +16 -16
- package/build/schemas/index.d.ts +46 -0
- package/build/tools/__tests__/code_insight.unit.test.d.ts +1 -0
- package/build/tools/__tests__/code_insight.unit.test.js +35 -0
- package/build/tools/__tests__/start_bugfix.unit.test.js +14 -14
- package/build/tools/__tests__/start_ui.unit.test.js +11 -11
- package/build/tools/add_feature.js +79 -79
- package/build/tools/ask_user.js +5 -5
- package/build/tools/code_insight.d.ts +8 -0
- package/build/tools/code_insight.js +129 -0
- package/build/tools/index.d.ts +1 -0
- package/build/tools/index.js +1 -0
- package/build/tools/interview.js +9 -9
- package/build/tools/start_bugfix.d.ts +2 -1
- package/build/tools/start_bugfix.js +170 -126
- package/build/tools/start_feature.d.ts +2 -1
- package/build/tools/start_feature.js +156 -112
- package/build/tools/start_onboard.d.ts +2 -1
- package/build/tools/start_onboard.js +57 -51
- package/build/tools/start_product.d.ts +2 -1
- package/build/tools/start_product.js +9 -1
- package/build/tools/start_ralph.d.ts +2 -1
- package/build/tools/start_ralph.js +9 -3
- package/build/tools/start_ui.d.ts +2 -1
- package/build/tools/start_ui.js +102 -88
- package/build/tools/ui-ux-tools.d.ts +2 -1
- package/build/tools/ui-ux-tools.js +19 -3
- package/build/utils/ui-sync.d.ts +6 -2
- package/build/utils/ui-sync.js +125 -29
- package/docs/assets/font/MaterialSymbolsOutlined.codepoints +4102 -0
- package/docs/assets/font/MaterialSymbolsOutlined.ttf +0 -0
- package/docs/assets/font/noto-sans-sc-400.ttf +0 -0
- package/docs/assets/font/noto-sans-sc-700.ttf +0 -0
- package/docs/assets/font/noto-sans-sc-900.ttf +0 -0
- package/docs/assets/js/i18n.js +122 -21
- package/docs/assets/js/tailwind.js +83 -83
- package/docs/data/tools.js +419 -399
- package/docs/debug-i18n.html +163 -0
- package/docs/i18n/all-tools/en.json +157 -0
- package/docs/i18n/all-tools/ja.json +157 -0
- package/docs/i18n/all-tools/ko.json +157 -0
- package/docs/i18n/all-tools/zh-CN.json +157 -0
- package/docs/pages/all-tools.html +514 -352
- package/docs/pages/examples.html +689 -689
- package/docs/pages/getting-started.html +589 -589
- package/docs/pages/migration.html +298 -298
- package/docs/specs/user-auth/design.md +82 -0
- package/docs/specs/user-auth/requirements.md +52 -0
- package/docs/specs/user-auth/tasks.md +55 -0
- package/package.json +5 -5
- package/docs/project-context/architecture.md +0 -0
- package/docs/project-context/how-to-develop.md +0 -313
- package/docs/project-context/how-to-test.md +0 -457
- package/docs/project-context/tech-stack.md +0 -96
- package/docs/project-context.md +0 -53
- package/docs/specs/git-work-report/design.md +0 -568
- package/docs/specs/git-work-report/requirements.md +0 -131
- package/docs/specs/git-work-report/tasks.md +0 -197
|
@@ -1,590 +1,590 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>快速开始 - 安装配置指南 | MCP Probe Kit</title>
|
|
7
|
-
|
|
8
|
-
<!-- SEO Meta Tags -->
|
|
9
|
-
<meta name="description" content="MCP Probe Kit 快速开始指南：支持 Cursor、Cline、Claude Desktop 三大平台，5分钟完成安装配置。">
|
|
10
|
-
<meta name="keywords" content="MCP Probe Kit 安装, Cursor 配置, Cline 配置, Claude Desktop 配置">
|
|
11
|
-
<meta name="author" content="小墨 (Kyle) - ByteZoneX">
|
|
12
|
-
|
|
13
|
-
<script src="../assets/js/tailwind.js" data-cfasync="false"></script>
|
|
14
|
-
<script>
|
|
15
|
-
tailwind.config = {
|
|
16
|
-
theme: {
|
|
17
|
-
extend: {
|
|
18
|
-
colors: {
|
|
19
|
-
primary: {
|
|
20
|
-
DEFAULT: '#2563EB',
|
|
21
|
-
hover: '#1D4ED8',
|
|
22
|
-
},
|
|
23
|
-
text: {
|
|
24
|
-
primary: '#0F172A',
|
|
25
|
-
secondary: '#475569',
|
|
26
|
-
tertiary: '#64748B',
|
|
27
|
-
},
|
|
28
|
-
bg: {
|
|
29
|
-
page: '#F8FAFC',
|
|
30
|
-
card: '#FFFFFF',
|
|
31
|
-
},
|
|
32
|
-
border: '#E2E8F0',
|
|
33
|
-
},
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
</script>
|
|
38
|
-
<style>
|
|
39
|
-
html { scroll-behavior: smooth; }
|
|
40
|
-
.code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
41
|
-
/* 移动端抽屉效果 */
|
|
42
|
-
.sidebar-drawer { transition: transform 0.3s ease; }
|
|
43
|
-
@media (max-width: 767px) {
|
|
44
|
-
.sidebar-drawer { transform: translateX(-100%); }
|
|
45
|
-
.sidebar-drawer.open { transform: translateX(0); }
|
|
46
|
-
}
|
|
47
|
-
.backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
|
|
48
|
-
.backdrop.active { opacity: 1; pointer-events: auto; }
|
|
49
|
-
|
|
50
|
-
/* i18n 加载优化：防止内容闪烁 */
|
|
51
|
-
body:not(.i18n-ready) [data-i18n] {
|
|
52
|
-
visibility: hidden;
|
|
53
|
-
}
|
|
54
|
-
body.i18n-ready [data-i18n] {
|
|
55
|
-
visibility: visible;
|
|
56
|
-
}
|
|
57
|
-
</style>
|
|
58
|
-
</head>
|
|
59
|
-
<body class="font-sans bg-bg-page text-text-primary leading-relaxed min-h-screen flex flex-col">
|
|
60
|
-
<!-- A. 顶部导航栏 -->
|
|
61
|
-
<nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
|
|
62
|
-
<div class="h-full px-4 flex items-center justify-between">
|
|
63
|
-
<a href="../index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
|
|
64
|
-
<span>🚀</span>
|
|
65
|
-
<span class="sm:inline hidden">MCP Probe Kit</span>
|
|
66
|
-
</a>
|
|
67
|
-
<div class="flex items-center gap-3">
|
|
68
|
-
<div id="lang-switcher-container"></div>
|
|
69
|
-
<button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
|
|
70
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
71
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
72
|
-
</svg>
|
|
73
|
-
</button>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
</nav>
|
|
77
|
-
|
|
78
|
-
<!-- 侧边栏遮罩 -->
|
|
79
|
-
<div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:opacity-100 md:pointer-events-auto md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
|
|
80
|
-
|
|
81
|
-
<!-- B. 侧边栏 -->
|
|
82
|
-
<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">
|
|
83
|
-
<div class="p-4">
|
|
84
|
-
<div class="mb-4">
|
|
85
|
-
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.quickStart">快速开始</div>
|
|
86
|
-
<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">
|
|
87
|
-
<span>🏠</span>
|
|
88
|
-
<span data-i18n="sidebar.home">文档首页</span>
|
|
89
|
-
</a>
|
|
90
|
-
<a href="./getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary no-underline border-l-3 border-primary">
|
|
91
|
-
<span>📖</span>
|
|
92
|
-
<span data-i18n="sidebar.installation">安装配置</span>
|
|
93
|
-
</a>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="mb-4">
|
|
97
|
-
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.toolsDocs">工具文档</div>
|
|
98
|
-
<a href="./all-tools.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">
|
|
99
|
-
<span>🛠️</span>
|
|
100
|
-
<span data-i18n="sidebar.allTools">所有工具</span>
|
|
101
|
-
<span class="ml-auto bg-bg-page text-xs px-2 py-0.5 rounded-full">21</span>
|
|
102
|
-
</a>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
<div class="mb-4">
|
|
106
|
-
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.guides">指南</div>
|
|
107
|
-
<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">
|
|
108
|
-
<span>🚀</span>
|
|
109
|
-
<span data-i18n="sidebar.migration">迁移指南</span>
|
|
110
|
-
</a>
|
|
111
|
-
<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">
|
|
112
|
-
<span>💡</span>
|
|
113
|
-
<span data-i18n="sidebar.examples">最佳实践</span>
|
|
114
|
-
</a>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<div class="pt-4 border-t border-border">
|
|
118
|
-
<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">
|
|
119
|
-
<span>💻</span>
|
|
120
|
-
<span>GitHub</span>
|
|
121
|
-
<span class="ml-auto text-xs">↗</span>
|
|
122
|
-
</a>
|
|
123
|
-
<a href="https://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">
|
|
124
|
-
<span>📦</span>
|
|
125
|
-
<span>npm</span>
|
|
126
|
-
<span class="ml-auto text-xs">↗</span>
|
|
127
|
-
</a>
|
|
128
|
-
</div>
|
|
129
|
-
|
|
130
|
-
<!-- QR Code -->
|
|
131
|
-
<div class="mt-4 pt-4 border-t border-border">
|
|
132
|
-
<div class="text-center">
|
|
133
|
-
<div class="text-xs font-semibold text-text-tertiary mb-2" data-i18n="sidebar.followUs">关注公众号</div>
|
|
134
|
-
<img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="微信公众号" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
|
|
135
|
-
<div class="text-xs text-text-tertiary mt-2" data-i18n="sidebar.getTechSharing">获取更多技术分享</div>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
</aside>
|
|
140
|
-
|
|
141
|
-
<!-- C. 主内容区 -->
|
|
142
|
-
<main class="flex-1 mt-14 min-h-screen md:ml-64">
|
|
143
|
-
<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
144
|
-
|
|
145
|
-
<!-- 面包屑 -->
|
|
146
|
-
<nav class="flex items-center gap-1 text-sm text-text-secondary mb-4 overflow-x-auto whitespace-nowrap">
|
|
147
|
-
<a href="../index.html" class="hover:text-primary transition-colors no-underline flex-shrink-0" data-i18n="gettingStarted.breadcrumb.home">文档首页</a>
|
|
148
|
-
<span class="text-text-tertiary">/</span>
|
|
149
|
-
<span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.quickStart">快速开始</span>
|
|
150
|
-
<span class="text-text-tertiary">/</span>
|
|
151
|
-
<span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.installation">安装配置</span>
|
|
152
|
-
</nav>
|
|
153
|
-
|
|
154
|
-
<!-- 页面标题 -->
|
|
155
|
-
<div class="mb-6">
|
|
156
|
-
<h1 class="text-2xl sm:text-3xl font-bold text-text-primary mb-2" data-i18n="gettingStarted.title">安装配置</h1>
|
|
157
|
-
<p class="text-sm sm:text-base text-text-secondary" data-i18n="gettingStarted.subtitle">5 分钟快速上手 MCP Probe Kit v3.0.5，支持 Cursor、Cline 和 Claude Desktop</p>
|
|
158
|
-
<div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-text-tertiary">
|
|
159
|
-
<span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded">v3.0.5</span>
|
|
160
|
-
<span>MCP 2025-11-25</span>
|
|
161
|
-
<span>SDK 1.
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<!-- Step 1: 选择安装方式 -->
|
|
166
|
-
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
167
|
-
<div class="flex items-start gap-3 mb-4">
|
|
168
|
-
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">1</div>
|
|
169
|
-
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step1.title">选择安装方式</h2>
|
|
170
|
-
</div>
|
|
171
|
-
|
|
172
|
-
<!-- 安装方式 Tab -->
|
|
173
|
-
<div class="space-y-4">
|
|
174
|
-
<!-- npx 方式 -->
|
|
175
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
176
|
-
<button onclick="toggleInstall('npx')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
177
|
-
<div class="flex items-center gap-2">
|
|
178
|
-
<span class="text-lg">⚡</span>
|
|
179
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.npx.title">npx 直接使用</span>
|
|
180
|
-
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded font-medium" data-i18n="gettingStarted.step1.npx.recommended">推荐</span>
|
|
181
|
-
</div>
|
|
182
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="npx-icon" style="transform: rotate(180deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
183
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
184
|
-
</svg>
|
|
185
|
-
</button>
|
|
186
|
-
<div id="npx-content" class="p-4 border-t border-border">
|
|
187
|
-
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.npx.description">无需安装，直接使用最新版本：</p>
|
|
188
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
189
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
190
|
-
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
191
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
192
|
-
</div>
|
|
193
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
194
|
-
"mcpServers": {
|
|
195
|
-
"mcp-probe-kit": {
|
|
196
|
-
"command": "npx",
|
|
197
|
-
"args": ["-y", "mcp-probe-kit@latest"]
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
}</code></pre>
|
|
201
|
-
</div>
|
|
202
|
-
<div class="mt-3 p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary">
|
|
203
|
-
<strong data-i18n="gettingStarted.step1.npx.advantage">优势：</strong><span data-i18n="gettingStarted.step1.npx.advantageText">无需手动更新，每次启动自动使用最新版本</span>
|
|
204
|
-
</div>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
|
|
208
|
-
<!-- 全局安装 -->
|
|
209
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
210
|
-
<button onclick="toggleInstall('global')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
211
|
-
<div class="flex items-center gap-2">
|
|
212
|
-
<span class="text-lg">📦</span>
|
|
213
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.global.title">全局安装</span>
|
|
214
|
-
</div>
|
|
215
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="global-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
216
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
217
|
-
</svg>
|
|
218
|
-
</button>
|
|
219
|
-
<div id="global-content" class="hidden p-4 border-t border-border">
|
|
220
|
-
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.global.description">全局安装到系统：</p>
|
|
221
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
222
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
223
|
-
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
224
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
225
|
-
</div>
|
|
226
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install -g mcp-probe-kit</code></pre>
|
|
227
|
-
</div>
|
|
228
|
-
<p class="text-text-secondary mt-3 mb-2 text-sm" data-i18n="gettingStarted.step1.global.configFile">配置文件：</p>
|
|
229
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
230
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
231
|
-
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
232
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
233
|
-
</div>
|
|
234
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
235
|
-
"mcpServers": {
|
|
236
|
-
"mcp-probe-kit": {
|
|
237
|
-
"command": "mcp-probe-kit"
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}</code></pre>
|
|
241
|
-
</div>
|
|
242
|
-
<div class="mt-3 p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
|
|
243
|
-
<strong data-i18n="gettingStarted.step1.global.note">注意：</strong><span data-i18n="gettingStarted.step1.global.noteText">需要手动运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm update -g mcp-probe-kit</code> <span data-i18n="gettingStarted.step1.global.updateText">更新版本</span>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
|
|
248
|
-
<!-- 源码编译 -->
|
|
249
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
250
|
-
<button onclick="toggleInstall('source')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
251
|
-
<div class="flex items-center gap-2">
|
|
252
|
-
<span class="text-lg">🔧</span>
|
|
253
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.source.title">源码编译</span>
|
|
254
|
-
</div>
|
|
255
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="source-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
256
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
257
|
-
</svg>
|
|
258
|
-
</button>
|
|
259
|
-
<div id="source-content" class="hidden p-4 border-t border-border">
|
|
260
|
-
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.source.description">从源码编译安装，适合开发者：</p>
|
|
261
|
-
|
|
262
|
-
<div class="mb-4">
|
|
263
|
-
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step1">1. 克隆仓库</p>
|
|
264
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
265
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
266
|
-
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
267
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
268
|
-
</div>
|
|
269
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>git clone https://github.com/mybolide/mcp-probe-kit.git
|
|
270
|
-
cd mcp-probe-kit</code></pre>
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
|
-
|
|
274
|
-
<div class="mb-4">
|
|
275
|
-
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step2">2. 安装依赖并编译</p>
|
|
276
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
277
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
278
|
-
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
279
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
280
|
-
</div>
|
|
281
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install
|
|
282
|
-
npm run build</code></pre>
|
|
283
|
-
</div>
|
|
284
|
-
</div>
|
|
285
|
-
|
|
286
|
-
<div class="mb-4">
|
|
287
|
-
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step3">3. 配置文件</p>
|
|
288
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
289
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
290
|
-
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
291
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
292
|
-
</div>
|
|
293
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
294
|
-
"mcpServers": {
|
|
295
|
-
"mcp-probe-kit": {
|
|
296
|
-
"command": "node",
|
|
297
|
-
"args": ["/path/to/mcp-probe-kit/build/index.js"]
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
}</code></pre>
|
|
301
|
-
</div>
|
|
302
|
-
</div>
|
|
303
|
-
|
|
304
|
-
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary mb-2">
|
|
305
|
-
<strong data-i18n="gettingStarted.step1.source.tip">提示：</strong><span data-i18n="gettingStarted.step1.source.tipText">Windows 用户使用完整路径，如</span> <code class="bg-gray-200 px-1 rounded text-xs">D:/workspace/mcp-probe-kit/build/index.js</code>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
|
|
308
|
-
<strong data-i18n="gettingStarted.step1.source.note">注意：</strong><span data-i18n="gettingStarted.step1.source.noteText">修改代码后需要重新运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm run build</code> <span data-i18n="gettingStarted.step1.source.compileText">编译</span>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
</div>
|
|
313
|
-
</section>
|
|
314
|
-
|
|
315
|
-
<!-- Step 2: 配置文件位置 -->
|
|
316
|
-
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
317
|
-
<div class="flex items-start gap-3 mb-4">
|
|
318
|
-
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">2</div>
|
|
319
|
-
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step2.title">找到配置文件</h2>
|
|
320
|
-
</div>
|
|
321
|
-
|
|
322
|
-
<p class="text-text-secondary mb-4 text-sm" data-i18n="gettingStarted.step2.description">根据你使用的 MCP 客户端，找到对应的配置文件：</p>
|
|
323
|
-
|
|
324
|
-
<!-- 客户端选择 -->
|
|
325
|
-
<div class="space-y-3">
|
|
326
|
-
<!-- Cursor / Cline -->
|
|
327
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
328
|
-
<button onclick="toggleClient('cursor')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
329
|
-
<div class="flex items-center gap-2">
|
|
330
|
-
<span class="text-lg">📝</span>
|
|
331
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.cursor.title">Cursor / Cline</span>
|
|
332
|
-
</div>
|
|
333
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="cursor-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
334
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
335
|
-
</svg>
|
|
336
|
-
</button>
|
|
337
|
-
<div id="cursor-content" class="hidden p-4 border-t border-border">
|
|
338
|
-
<p class="text-text-secondary text-sm mb-3"><span data-i18n="gettingStarted.step2.cursor.description">在项目根目录创建或编辑</span> <code class="bg-gray-200 px-1 rounded text-xs">.cursor/mcp.json</code> 或 <code class="bg-gray-200 px-1 rounded text-xs">.cline/mcp.json</code></p>
|
|
339
|
-
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
|
|
340
|
-
<strong>💡 <span data-i18n="gettingStarted.step2.cursor.tip">提示：</span></strong><span data-i18n="gettingStarted.step2.cursor.tipText">Cursor 和 Cline 使用项目级配置，每个项目可以有独立的 MCP 服务器配置。</span>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
<!-- Claude Desktop Windows -->
|
|
346
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
347
|
-
<button onclick="toggleClient('claude-win')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
348
|
-
<div class="flex items-center gap-2">
|
|
349
|
-
<span class="text-lg">🪟</span>
|
|
350
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeWin.title">Claude Desktop (Windows)</span>
|
|
351
|
-
</div>
|
|
352
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-win-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
353
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
354
|
-
</svg>
|
|
355
|
-
</button>
|
|
356
|
-
<div id="claude-win-content" class="hidden p-4 border-t border-border">
|
|
357
|
-
<p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeWin.path">配置文件路径：</p>
|
|
358
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
359
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
360
|
-
<span class="text-xs text-slate-300 font-medium">Path</span>
|
|
361
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
362
|
-
</div>
|
|
363
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>%APPDATA%\Claude\claude_desktop_config.json</code></pre>
|
|
364
|
-
</div>
|
|
365
|
-
<p class="text-text-secondary text-sm mt-2"><span data-i18n="gettingStarted.step2.claudeWin.example">示例：</span><code class="bg-gray-200 px-1 rounded text-xs">C:\Users\YourName\AppData\Roaming\Claude\claude_desktop_config.json</code></p>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
|
|
369
|
-
<!-- Claude Desktop macOS -->
|
|
370
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
371
|
-
<button onclick="toggleClient('claude-mac')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
372
|
-
<div class="flex items-center gap-2">
|
|
373
|
-
<span class="text-lg">🍎</span>
|
|
374
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeMac.title">Claude Desktop (macOS)</span>
|
|
375
|
-
</div>
|
|
376
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-mac-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
377
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
378
|
-
</svg>
|
|
379
|
-
</button>
|
|
380
|
-
<div id="claude-mac-content" class="hidden p-4 border-t border-border">
|
|
381
|
-
<p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeMac.path">配置文件路径：</p>
|
|
382
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
383
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
384
|
-
<span class="text-xs text-slate-300 font-medium">Path</span>
|
|
385
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
386
|
-
</div>
|
|
387
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>~/Library/Application Support/Claude/claude_desktop_config.json</code></pre>
|
|
388
|
-
</div>
|
|
389
|
-
</div>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
</section>
|
|
393
|
-
|
|
394
|
-
<!-- Step 3: 验证安装 -->
|
|
395
|
-
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
396
|
-
<div class="flex items-start gap-3 mb-4">
|
|
397
|
-
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">3</div>
|
|
398
|
-
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step3.title">验证安装</h2>
|
|
399
|
-
</div>
|
|
400
|
-
|
|
401
|
-
<div class="pl-0 sm:pl-0">
|
|
402
|
-
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step3.description">完成配置后，按以下步骤验证：</p>
|
|
403
|
-
<ol class="list-decimal list-inside space-y-2 text-sm text-text-primary mb-4">
|
|
404
|
-
<li data-i18n="gettingStarted.step3.step1">重启 MCP 客户端（Cursor / Cline / Claude Desktop）</li>
|
|
405
|
-
<li data-i18n="gettingStarted.step3.step2">在聊天窗口中输入：<code class="bg-gray-200 px-1 rounded text-xs">请使用 gencommit 工具生成一个测试提交消息</code></li>
|
|
406
|
-
<li data-i18n="gettingStarted.step3.step3">如果返回符合 Conventional Commits 规范的提交消息，说明安装成功！</li>
|
|
407
|
-
</ol>
|
|
408
|
-
|
|
409
|
-
<div class="p-3 bg-green-50 border-l-3 border-green-500 rounded-r text-sm text-text-primary mb-2">
|
|
410
|
-
<strong>✅ <span data-i18n="gettingStarted.step3.success">成功示例：</span></strong><span data-i18n="gettingStarted.step3.successText">AI 返回类似</span> <code class="bg-gray-200 px-1 rounded text-xs" data-i18n="gettingStarted.step3.successCode">feat: 添加用户认证功能</code> <span data-i18n="gettingStarted.step3.successExample">的消息</span>
|
|
411
|
-
</div>
|
|
412
|
-
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm">
|
|
413
|
-
<strong>❌ <span data-i18n="gettingStarted.step3.issues">常见问题：</span></strong>
|
|
414
|
-
<ul class="list-disc list-inside mt-1 text-text-primary">
|
|
415
|
-
<li data-i18n="gettingStarted.step3.issue1">提示找不到工具 → 检查配置文件格式</li>
|
|
416
|
-
<li data-i18n="gettingStarted.step3.issue2">提示命令不存在 → 确认 Node.js 已安装</li>
|
|
417
|
-
<li data-i18n="gettingStarted.step3.issue3">Windows 用户 → 确保使用 npx 方式</li>
|
|
418
|
-
</ul>
|
|
419
|
-
</div>
|
|
420
|
-
</div>
|
|
421
|
-
</section>
|
|
422
|
-
|
|
423
|
-
<!-- Step 4: 委托式编排 -->
|
|
424
|
-
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
425
|
-
<div class="flex items-start gap-3 mb-4">
|
|
426
|
-
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">4</div>
|
|
427
|
-
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step4.title">委托式编排协议</h2>
|
|
428
|
-
</div>
|
|
429
|
-
|
|
430
|
-
<div class="pl-0 sm:pl-0 text-sm text-text-primary space-y-3">
|
|
431
|
-
<p><code class="bg-gray-200 px-1 rounded text-xs">start_*</code> <span data-i18n="gettingStarted.step4.description">编排工具不会直接执行操作，而是返回一个可执行计划。</span></p>
|
|
432
|
-
<p><strong data-i18n="gettingStarted.step4.keyFields">关键字段：</strong><code class="bg-gray-200 px-1 rounded text-xs">mode: "delegated"</code>、<code class="bg-gray-200 px-1 rounded text-xs">steps[]</code>、<code class="bg-gray-200 px-1 rounded text-xs">outputs[]</code></p>
|
|
433
|
-
|
|
434
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
435
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
436
|
-
<span class="text-xs text-slate-300 font-medium" data-i18n="gettingStarted.step4.planExample">Plan 示例</span>
|
|
437
|
-
</div>
|
|
438
|
-
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
439
|
-
"mode": "delegated",
|
|
440
|
-
"steps": [
|
|
441
|
-
{
|
|
442
|
-
"id": "spec",
|
|
443
|
-
"tool": "add_feature",
|
|
444
|
-
"args": { "feature_name": "user-auth" },
|
|
445
|
-
"outputs": ["docs/specs/user-auth/requirements.md"]
|
|
446
|
-
}
|
|
447
|
-
]
|
|
448
|
-
}</code></pre>
|
|
449
|
-
</div>
|
|
450
|
-
|
|
451
|
-
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
|
|
452
|
-
<strong>💡 <span data-i18n="gettingStarted.step4.tip">要点：</span></strong><span data-i18n="gettingStarted.step4.tipText">按顺序执行</span> <code class="bg-gray-200 px-1 rounded text-xs">steps</code><span data-i18n="gettingStarted.step4.tipText2">，并确保</span> <code class="bg-gray-200 px-1 rounded text-xs">outputs</code> <span data-i18n="gettingStarted.step4.tipText3">文件真实落盘</span>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
</section>
|
|
456
|
-
|
|
457
|
-
<!-- 常见问题 -->
|
|
458
|
-
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
459
|
-
<h2 class="text-lg sm:text-xl font-semibold text-text-primary mb-4" data-i18n="gettingStarted.faq.title">⚠️ 常见问题</h2>
|
|
460
|
-
|
|
461
|
-
<!-- 问题 1 -->
|
|
462
|
-
<div class="border border-border rounded-lg overflow-hidden mb-4">
|
|
463
|
-
<button onclick="toggleFaq('faq1')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
464
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q1.title">问题 1：npx 缓存导致的模块解析错误</span>
|
|
465
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq1-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
466
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
467
|
-
</svg>
|
|
468
|
-
</button>
|
|
469
|
-
<div id="faq1-content" class="hidden p-4 border-t border-border">
|
|
470
|
-
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
|
|
471
|
-
<strong data-i18n="gettingStarted.faq.q1.error">错误信息：</strong>
|
|
472
|
-
<pre class="code-block mt-2 text-xs text-slate-200 bg-slate-900 p-2 rounded overflow-x-auto"><code>Error: Cannot find package 'yallist'</code></pre>
|
|
473
|
-
</div>
|
|
474
|
-
<p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q1.solution">解决方案：</strong><span data-i18n="gettingStarted.faq.q1.solutionText">清理 npx 缓存</span></p>
|
|
475
|
-
<div class="space-y-2">
|
|
476
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
477
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
478
|
-
<span class="text-xs text-slate-300 font-medium">Windows CMD</span>
|
|
479
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
|
|
480
|
-
</div>
|
|
481
|
-
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rmdir /s /q %LOCALAPPDATA%\npm-cache\_npx</code></pre>
|
|
482
|
-
</div>
|
|
483
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
484
|
-
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
485
|
-
<span class="text-xs text-slate-300 font-medium">macOS/Linux</span>
|
|
486
|
-
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
|
|
487
|
-
</div>
|
|
488
|
-
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rm -rf ~/.npm/_npx</code></pre>
|
|
489
|
-
</div>
|
|
490
|
-
</div>
|
|
491
|
-
<p class="text-sm text-text-secondary mt-2" data-i18n="gettingStarted.faq.q1.restart">然后重启 MCP 客户端</p>
|
|
492
|
-
</div>
|
|
493
|
-
</div>
|
|
494
|
-
|
|
495
|
-
<!-- 问题 2 -->
|
|
496
|
-
<div class="border border-border rounded-lg overflow-hidden">
|
|
497
|
-
<button onclick="toggleFaq('faq2')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
498
|
-
<span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q2.title">问题 2：MCP 服务器连接失败</span>
|
|
499
|
-
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq2-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
500
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
501
|
-
</svg>
|
|
502
|
-
</button>
|
|
503
|
-
<div id="faq2-content" class="hidden p-4 border-t border-border">
|
|
504
|
-
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
|
|
505
|
-
<strong data-i18n="gettingStarted.faq.q2.possibleReasons">可能原因：</strong>
|
|
506
|
-
<ul class="list-disc list-inside mt-1">
|
|
507
|
-
<li data-i18n="gettingStarted.faq.q2.reason1">Node.js 版本过低（需要 >= 16.0.0）</li>
|
|
508
|
-
<li data-i18n="gettingStarted.faq.q2.reason2">依赖未安装或损坏</li>
|
|
509
|
-
<li data-i18n="gettingStarted.faq.q2.reason3">配置文件格式错误</li>
|
|
510
|
-
</ul>
|
|
511
|
-
</div>
|
|
512
|
-
<p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q2.solution">解决方案：</strong></p>
|
|
513
|
-
<ol class="list-decimal list-inside space-y-2 text-sm text-text-primary">
|
|
514
|
-
<li><span data-i18n="gettingStarted.faq.q2.step1">检查 Node.js 版本：</span>
|
|
515
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
|
|
516
|
-
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>node --version</code></pre>
|
|
517
|
-
</div>
|
|
518
|
-
</li>
|
|
519
|
-
<li data-i18n="gettingStarted.faq.q2.step2">如果低于 v16，请升级 Node.js</li>
|
|
520
|
-
<li><span data-i18n="gettingStarted.faq.q2.step3">清理缓存并重新安装：</span>
|
|
521
|
-
<div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
|
|
522
|
-
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>npm cache clean --force</code></pre>
|
|
523
|
-
</div>
|
|
524
|
-
</li>
|
|
525
|
-
<li data-i18n="gettingStarted.faq.q2.step4">检查配置文件 JSON 格式是否正确</li>
|
|
526
|
-
</ol>
|
|
527
|
-
</div>
|
|
528
|
-
</div>
|
|
529
|
-
</section>
|
|
530
|
-
|
|
531
|
-
<!-- Footer -->
|
|
532
|
-
<footer class="text-center text-sm text-text-tertiary py-4 border-t border-border">
|
|
533
|
-
<p>Made with ❤️ by <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:underline">小墨 (Kyle)</a></p>
|
|
534
|
-
<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>
|
|
535
|
-
</footer>
|
|
536
|
-
</div>
|
|
537
|
-
</main>
|
|
538
|
-
|
|
539
|
-
<script>
|
|
540
|
-
// 侧边栏切换
|
|
541
|
-
function toggleSidebar() {
|
|
542
|
-
const sidebar = document.getElementById('sidebar');
|
|
543
|
-
const backdrop = document.getElementById('backdrop');
|
|
544
|
-
const isOpen = sidebar.classList.contains('open');
|
|
545
|
-
if (isOpen) {
|
|
546
|
-
sidebar.classList.remove('open');
|
|
547
|
-
backdrop.classList.remove('active');
|
|
548
|
-
} else {
|
|
549
|
-
sidebar.classList.add('open');
|
|
550
|
-
backdrop.classList.add('active');
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
// 安装方式折叠
|
|
555
|
-
function toggleInstall(type) {
|
|
556
|
-
const content = document.getElementById(type + '-content');
|
|
557
|
-
const icon = document.getElementById(type + '-icon');
|
|
558
|
-
content.classList.toggle('hidden');
|
|
559
|
-
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
// 客户端折叠
|
|
563
|
-
function toggleClient(type) {
|
|
564
|
-
const content = document.getElementById(type + '-content');
|
|
565
|
-
const icon = document.getElementById(type + '-icon');
|
|
566
|
-
content.classList.toggle('hidden');
|
|
567
|
-
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
// FAQ 折叠
|
|
571
|
-
function toggleFaq(id) {
|
|
572
|
-
const content = document.getElementById(id + '-content');
|
|
573
|
-
const icon = document.getElementById(id + '-icon');
|
|
574
|
-
content.classList.toggle('hidden');
|
|
575
|
-
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
// 复制代码
|
|
579
|
-
function copyCode(btn) {
|
|
580
|
-
const code = btn.closest('.bg-slate-900').querySelector('code');
|
|
581
|
-
navigator.clipboard.writeText(code.textContent).then(() => {
|
|
582
|
-
const originalText = btn.textContent;
|
|
583
|
-
btn.textContent = '✅ 已复制';
|
|
584
|
-
setTimeout(() => btn.textContent = originalText, 2000);
|
|
585
|
-
});
|
|
586
|
-
}
|
|
587
|
-
</script>
|
|
588
|
-
<script src="../assets/js/i18n.js"></script>
|
|
589
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>快速开始 - 安装配置指南 | MCP Probe Kit</title>
|
|
7
|
+
|
|
8
|
+
<!-- SEO Meta Tags -->
|
|
9
|
+
<meta name="description" content="MCP Probe Kit 快速开始指南：支持 Cursor、Cline、Claude Desktop 三大平台，5分钟完成安装配置。">
|
|
10
|
+
<meta name="keywords" content="MCP Probe Kit 安装, Cursor 配置, Cline 配置, Claude Desktop 配置">
|
|
11
|
+
<meta name="author" content="小墨 (Kyle) - ByteZoneX">
|
|
12
|
+
|
|
13
|
+
<script src="../assets/js/tailwind.js" data-cfasync="false"></script>
|
|
14
|
+
<script>
|
|
15
|
+
tailwind.config = {
|
|
16
|
+
theme: {
|
|
17
|
+
extend: {
|
|
18
|
+
colors: {
|
|
19
|
+
primary: {
|
|
20
|
+
DEFAULT: '#2563EB',
|
|
21
|
+
hover: '#1D4ED8',
|
|
22
|
+
},
|
|
23
|
+
text: {
|
|
24
|
+
primary: '#0F172A',
|
|
25
|
+
secondary: '#475569',
|
|
26
|
+
tertiary: '#64748B',
|
|
27
|
+
},
|
|
28
|
+
bg: {
|
|
29
|
+
page: '#F8FAFC',
|
|
30
|
+
card: '#FFFFFF',
|
|
31
|
+
},
|
|
32
|
+
border: '#E2E8F0',
|
|
33
|
+
},
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
<style>
|
|
39
|
+
html { scroll-behavior: smooth; }
|
|
40
|
+
.code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
41
|
+
/* 移动端抽屉效果 */
|
|
42
|
+
.sidebar-drawer { transition: transform 0.3s ease; }
|
|
43
|
+
@media (max-width: 767px) {
|
|
44
|
+
.sidebar-drawer { transform: translateX(-100%); }
|
|
45
|
+
.sidebar-drawer.open { transform: translateX(0); }
|
|
46
|
+
}
|
|
47
|
+
.backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
|
|
48
|
+
.backdrop.active { opacity: 1; pointer-events: auto; }
|
|
49
|
+
|
|
50
|
+
/* i18n 加载优化：防止内容闪烁 */
|
|
51
|
+
body:not(.i18n-ready) [data-i18n] {
|
|
52
|
+
visibility: hidden;
|
|
53
|
+
}
|
|
54
|
+
body.i18n-ready [data-i18n] {
|
|
55
|
+
visibility: visible;
|
|
56
|
+
}
|
|
57
|
+
</style>
|
|
58
|
+
</head>
|
|
59
|
+
<body class="font-sans bg-bg-page text-text-primary leading-relaxed min-h-screen flex flex-col">
|
|
60
|
+
<!-- A. 顶部导航栏 -->
|
|
61
|
+
<nav class="fixed top-0 left-0 right-0 h-14 bg-white/95 backdrop-blur-md border-b border-border z-50">
|
|
62
|
+
<div class="h-full px-4 flex items-center justify-between">
|
|
63
|
+
<a href="../index.html" class="flex items-center gap-2 text-base font-semibold text-text-primary no-underline">
|
|
64
|
+
<span>🚀</span>
|
|
65
|
+
<span class="sm:inline hidden">MCP Probe Kit</span>
|
|
66
|
+
</a>
|
|
67
|
+
<div class="flex items-center gap-3">
|
|
68
|
+
<div id="lang-switcher-container"></div>
|
|
69
|
+
<button onclick="toggleSidebar()" class="md:hidden p-2 text-text-secondary hover:text-primary transition-colors">
|
|
70
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
71
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
72
|
+
</svg>
|
|
73
|
+
</button>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</nav>
|
|
77
|
+
|
|
78
|
+
<!-- 侧边栏遮罩 -->
|
|
79
|
+
<div class="fixed inset-0 bg-black/50 z-40 backdrop opacity-0 pointer-events-none transition-opacity duration-300 md:opacity-100 md:pointer-events-auto md:hidden" onclick="toggleSidebar()" id="backdrop"></div>
|
|
80
|
+
|
|
81
|
+
<!-- B. 侧边栏 -->
|
|
82
|
+
<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">
|
|
83
|
+
<div class="p-4">
|
|
84
|
+
<div class="mb-4">
|
|
85
|
+
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.quickStart">快速开始</div>
|
|
86
|
+
<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">
|
|
87
|
+
<span>🏠</span>
|
|
88
|
+
<span data-i18n="sidebar.home">文档首页</span>
|
|
89
|
+
</a>
|
|
90
|
+
<a href="./getting-started.html" class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-blue-50 text-primary no-underline border-l-3 border-primary">
|
|
91
|
+
<span>📖</span>
|
|
92
|
+
<span data-i18n="sidebar.installation">安装配置</span>
|
|
93
|
+
</a>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="mb-4">
|
|
97
|
+
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.toolsDocs">工具文档</div>
|
|
98
|
+
<a href="./all-tools.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">
|
|
99
|
+
<span>🛠️</span>
|
|
100
|
+
<span data-i18n="sidebar.allTools">所有工具</span>
|
|
101
|
+
<span class="ml-auto bg-bg-page text-xs px-2 py-0.5 rounded-full">21</span>
|
|
102
|
+
</a>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="mb-4">
|
|
106
|
+
<div class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2" data-i18n="sidebar.guides">指南</div>
|
|
107
|
+
<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">
|
|
108
|
+
<span>🚀</span>
|
|
109
|
+
<span data-i18n="sidebar.migration">迁移指南</span>
|
|
110
|
+
</a>
|
|
111
|
+
<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">
|
|
112
|
+
<span>💡</span>
|
|
113
|
+
<span data-i18n="sidebar.examples">最佳实践</span>
|
|
114
|
+
</a>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="pt-4 border-t border-border">
|
|
118
|
+
<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">
|
|
119
|
+
<span>💻</span>
|
|
120
|
+
<span>GitHub</span>
|
|
121
|
+
<span class="ml-auto text-xs">↗</span>
|
|
122
|
+
</a>
|
|
123
|
+
<a href="https://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">
|
|
124
|
+
<span>📦</span>
|
|
125
|
+
<span>npm</span>
|
|
126
|
+
<span class="ml-auto text-xs">↗</span>
|
|
127
|
+
</a>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<!-- QR Code -->
|
|
131
|
+
<div class="mt-4 pt-4 border-t border-border">
|
|
132
|
+
<div class="text-center">
|
|
133
|
+
<div class="text-xs font-semibold text-text-tertiary mb-2" data-i18n="sidebar.followUs">关注公众号</div>
|
|
134
|
+
<img src="https://oss.bolzjb.com/wx_qrcode.jpg" alt="微信公众号" class="w-[100px] h-[100px] mx-auto rounded-lg border border-border" />
|
|
135
|
+
<div class="text-xs text-text-tertiary mt-2" data-i18n="sidebar.getTechSharing">获取更多技术分享</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</aside>
|
|
140
|
+
|
|
141
|
+
<!-- C. 主内容区 -->
|
|
142
|
+
<main class="flex-1 mt-14 min-h-screen md:ml-64">
|
|
143
|
+
<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
144
|
+
|
|
145
|
+
<!-- 面包屑 -->
|
|
146
|
+
<nav class="flex items-center gap-1 text-sm text-text-secondary mb-4 overflow-x-auto whitespace-nowrap">
|
|
147
|
+
<a href="../index.html" class="hover:text-primary transition-colors no-underline flex-shrink-0" data-i18n="gettingStarted.breadcrumb.home">文档首页</a>
|
|
148
|
+
<span class="text-text-tertiary">/</span>
|
|
149
|
+
<span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.quickStart">快速开始</span>
|
|
150
|
+
<span class="text-text-tertiary">/</span>
|
|
151
|
+
<span class="text-text-primary flex-shrink-0" data-i18n="gettingStarted.breadcrumb.installation">安装配置</span>
|
|
152
|
+
</nav>
|
|
153
|
+
|
|
154
|
+
<!-- 页面标题 -->
|
|
155
|
+
<div class="mb-6">
|
|
156
|
+
<h1 class="text-2xl sm:text-3xl font-bold text-text-primary mb-2" data-i18n="gettingStarted.title">安装配置</h1>
|
|
157
|
+
<p class="text-sm sm:text-base text-text-secondary" data-i18n="gettingStarted.subtitle">5 分钟快速上手 MCP Probe Kit v3.0.5，支持 Cursor、Cline 和 Claude Desktop</p>
|
|
158
|
+
<div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-text-tertiary">
|
|
159
|
+
<span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded">v3.0.5</span>
|
|
160
|
+
<span>MCP 2025-11-25</span>
|
|
161
|
+
<span>SDK 1.27.1</span>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<!-- Step 1: 选择安装方式 -->
|
|
166
|
+
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
167
|
+
<div class="flex items-start gap-3 mb-4">
|
|
168
|
+
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">1</div>
|
|
169
|
+
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step1.title">选择安装方式</h2>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<!-- 安装方式 Tab -->
|
|
173
|
+
<div class="space-y-4">
|
|
174
|
+
<!-- npx 方式 -->
|
|
175
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
176
|
+
<button onclick="toggleInstall('npx')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
177
|
+
<div class="flex items-center gap-2">
|
|
178
|
+
<span class="text-lg">⚡</span>
|
|
179
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.npx.title">npx 直接使用</span>
|
|
180
|
+
<span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded font-medium" data-i18n="gettingStarted.step1.npx.recommended">推荐</span>
|
|
181
|
+
</div>
|
|
182
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="npx-icon" style="transform: rotate(180deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
183
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
184
|
+
</svg>
|
|
185
|
+
</button>
|
|
186
|
+
<div id="npx-content" class="p-4 border-t border-border">
|
|
187
|
+
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.npx.description">无需安装，直接使用最新版本：</p>
|
|
188
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
189
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
190
|
+
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
191
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
192
|
+
</div>
|
|
193
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
194
|
+
"mcpServers": {
|
|
195
|
+
"mcp-probe-kit": {
|
|
196
|
+
"command": "npx",
|
|
197
|
+
"args": ["-y", "mcp-probe-kit@latest"]
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}</code></pre>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="mt-3 p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary">
|
|
203
|
+
<strong data-i18n="gettingStarted.step1.npx.advantage">优势：</strong><span data-i18n="gettingStarted.step1.npx.advantageText">无需手动更新，每次启动自动使用最新版本</span>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<!-- 全局安装 -->
|
|
209
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
210
|
+
<button onclick="toggleInstall('global')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
211
|
+
<div class="flex items-center gap-2">
|
|
212
|
+
<span class="text-lg">📦</span>
|
|
213
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.global.title">全局安装</span>
|
|
214
|
+
</div>
|
|
215
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="global-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
216
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
217
|
+
</svg>
|
|
218
|
+
</button>
|
|
219
|
+
<div id="global-content" class="hidden p-4 border-t border-border">
|
|
220
|
+
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.global.description">全局安装到系统：</p>
|
|
221
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
222
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
223
|
+
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
224
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
225
|
+
</div>
|
|
226
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install -g mcp-probe-kit</code></pre>
|
|
227
|
+
</div>
|
|
228
|
+
<p class="text-text-secondary mt-3 mb-2 text-sm" data-i18n="gettingStarted.step1.global.configFile">配置文件：</p>
|
|
229
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
230
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
231
|
+
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
232
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
233
|
+
</div>
|
|
234
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
235
|
+
"mcpServers": {
|
|
236
|
+
"mcp-probe-kit": {
|
|
237
|
+
"command": "mcp-probe-kit"
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}</code></pre>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="mt-3 p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
|
|
243
|
+
<strong data-i18n="gettingStarted.step1.global.note">注意：</strong><span data-i18n="gettingStarted.step1.global.noteText">需要手动运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm update -g mcp-probe-kit</code> <span data-i18n="gettingStarted.step1.global.updateText">更新版本</span>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<!-- 源码编译 -->
|
|
249
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
250
|
+
<button onclick="toggleInstall('source')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
251
|
+
<div class="flex items-center gap-2">
|
|
252
|
+
<span class="text-lg">🔧</span>
|
|
253
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step1.source.title">源码编译</span>
|
|
254
|
+
</div>
|
|
255
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="source-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
256
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
257
|
+
</svg>
|
|
258
|
+
</button>
|
|
259
|
+
<div id="source-content" class="hidden p-4 border-t border-border">
|
|
260
|
+
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step1.source.description">从源码编译安装，适合开发者：</p>
|
|
261
|
+
|
|
262
|
+
<div class="mb-4">
|
|
263
|
+
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step1">1. 克隆仓库</p>
|
|
264
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
265
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
266
|
+
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
267
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
268
|
+
</div>
|
|
269
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>git clone https://github.com/mybolide/mcp-probe-kit.git
|
|
270
|
+
cd mcp-probe-kit</code></pre>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div class="mb-4">
|
|
275
|
+
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step2">2. 安装依赖并编译</p>
|
|
276
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
277
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
278
|
+
<span class="text-xs text-slate-300 font-medium">Bash</span>
|
|
279
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
280
|
+
</div>
|
|
281
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>npm install
|
|
282
|
+
npm run build</code></pre>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<div class="mb-4">
|
|
287
|
+
<p class="font-medium text-sm mb-2" data-i18n="gettingStarted.step1.source.step3">3. 配置文件</p>
|
|
288
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
289
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
290
|
+
<span class="text-xs text-slate-300 font-medium">JSON</span>
|
|
291
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
292
|
+
</div>
|
|
293
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
294
|
+
"mcpServers": {
|
|
295
|
+
"mcp-probe-kit": {
|
|
296
|
+
"command": "node",
|
|
297
|
+
"args": ["/path/to/mcp-probe-kit/build/index.js"]
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}</code></pre>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm text-text-primary mb-2">
|
|
305
|
+
<strong data-i18n="gettingStarted.step1.source.tip">提示：</strong><span data-i18n="gettingStarted.step1.source.tipText">Windows 用户使用完整路径，如</span> <code class="bg-gray-200 px-1 rounded text-xs">D:/workspace/mcp-probe-kit/build/index.js</code>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="p-3 bg-amber-50 border-l-3 border-amber-500 rounded-r text-sm text-text-primary">
|
|
308
|
+
<strong data-i18n="gettingStarted.step1.source.note">注意：</strong><span data-i18n="gettingStarted.step1.source.noteText">修改代码后需要重新运行</span> <code class="bg-gray-200 px-1 rounded text-xs">npm run build</code> <span data-i18n="gettingStarted.step1.source.compileText">编译</span>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
</section>
|
|
314
|
+
|
|
315
|
+
<!-- Step 2: 配置文件位置 -->
|
|
316
|
+
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
317
|
+
<div class="flex items-start gap-3 mb-4">
|
|
318
|
+
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">2</div>
|
|
319
|
+
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step2.title">找到配置文件</h2>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<p class="text-text-secondary mb-4 text-sm" data-i18n="gettingStarted.step2.description">根据你使用的 MCP 客户端，找到对应的配置文件：</p>
|
|
323
|
+
|
|
324
|
+
<!-- 客户端选择 -->
|
|
325
|
+
<div class="space-y-3">
|
|
326
|
+
<!-- Cursor / Cline -->
|
|
327
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
328
|
+
<button onclick="toggleClient('cursor')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
329
|
+
<div class="flex items-center gap-2">
|
|
330
|
+
<span class="text-lg">📝</span>
|
|
331
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.cursor.title">Cursor / Cline</span>
|
|
332
|
+
</div>
|
|
333
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="cursor-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
334
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
335
|
+
</svg>
|
|
336
|
+
</button>
|
|
337
|
+
<div id="cursor-content" class="hidden p-4 border-t border-border">
|
|
338
|
+
<p class="text-text-secondary text-sm mb-3"><span data-i18n="gettingStarted.step2.cursor.description">在项目根目录创建或编辑</span> <code class="bg-gray-200 px-1 rounded text-xs">.cursor/mcp.json</code> 或 <code class="bg-gray-200 px-1 rounded text-xs">.cline/mcp.json</code></p>
|
|
339
|
+
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
|
|
340
|
+
<strong>💡 <span data-i18n="gettingStarted.step2.cursor.tip">提示：</span></strong><span data-i18n="gettingStarted.step2.cursor.tipText">Cursor 和 Cline 使用项目级配置，每个项目可以有独立的 MCP 服务器配置。</span>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<!-- Claude Desktop Windows -->
|
|
346
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
347
|
+
<button onclick="toggleClient('claude-win')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
348
|
+
<div class="flex items-center gap-2">
|
|
349
|
+
<span class="text-lg">🪟</span>
|
|
350
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeWin.title">Claude Desktop (Windows)</span>
|
|
351
|
+
</div>
|
|
352
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-win-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
353
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
354
|
+
</svg>
|
|
355
|
+
</button>
|
|
356
|
+
<div id="claude-win-content" class="hidden p-4 border-t border-border">
|
|
357
|
+
<p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeWin.path">配置文件路径：</p>
|
|
358
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
359
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
360
|
+
<span class="text-xs text-slate-300 font-medium">Path</span>
|
|
361
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
362
|
+
</div>
|
|
363
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>%APPDATA%\Claude\claude_desktop_config.json</code></pre>
|
|
364
|
+
</div>
|
|
365
|
+
<p class="text-text-secondary text-sm mt-2"><span data-i18n="gettingStarted.step2.claudeWin.example">示例：</span><code class="bg-gray-200 px-1 rounded text-xs">C:\Users\YourName\AppData\Roaming\Claude\claude_desktop_config.json</code></p>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<!-- Claude Desktop macOS -->
|
|
370
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
371
|
+
<button onclick="toggleClient('claude-mac')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
372
|
+
<div class="flex items-center gap-2">
|
|
373
|
+
<span class="text-lg">🍎</span>
|
|
374
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.step2.claudeMac.title">Claude Desktop (macOS)</span>
|
|
375
|
+
</div>
|
|
376
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="claude-mac-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
377
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
378
|
+
</svg>
|
|
379
|
+
</button>
|
|
380
|
+
<div id="claude-mac-content" class="hidden p-4 border-t border-border">
|
|
381
|
+
<p class="text-text-secondary text-sm mb-2" data-i18n="gettingStarted.step2.claudeMac.path">配置文件路径：</p>
|
|
382
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
383
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
384
|
+
<span class="text-xs text-slate-300 font-medium">Path</span>
|
|
385
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋 复制</button>
|
|
386
|
+
</div>
|
|
387
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>~/Library/Application Support/Claude/claude_desktop_config.json</code></pre>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</section>
|
|
393
|
+
|
|
394
|
+
<!-- Step 3: 验证安装 -->
|
|
395
|
+
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
396
|
+
<div class="flex items-start gap-3 mb-4">
|
|
397
|
+
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">3</div>
|
|
398
|
+
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step3.title">验证安装</h2>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<div class="pl-0 sm:pl-0">
|
|
402
|
+
<p class="text-text-secondary mb-3 text-sm" data-i18n="gettingStarted.step3.description">完成配置后，按以下步骤验证：</p>
|
|
403
|
+
<ol class="list-decimal list-inside space-y-2 text-sm text-text-primary mb-4">
|
|
404
|
+
<li data-i18n="gettingStarted.step3.step1">重启 MCP 客户端（Cursor / Cline / Claude Desktop）</li>
|
|
405
|
+
<li data-i18n="gettingStarted.step3.step2">在聊天窗口中输入：<code class="bg-gray-200 px-1 rounded text-xs">请使用 gencommit 工具生成一个测试提交消息</code></li>
|
|
406
|
+
<li data-i18n="gettingStarted.step3.step3">如果返回符合 Conventional Commits 规范的提交消息，说明安装成功！</li>
|
|
407
|
+
</ol>
|
|
408
|
+
|
|
409
|
+
<div class="p-3 bg-green-50 border-l-3 border-green-500 rounded-r text-sm text-text-primary mb-2">
|
|
410
|
+
<strong>✅ <span data-i18n="gettingStarted.step3.success">成功示例：</span></strong><span data-i18n="gettingStarted.step3.successText">AI 返回类似</span> <code class="bg-gray-200 px-1 rounded text-xs" data-i18n="gettingStarted.step3.successCode">feat: 添加用户认证功能</code> <span data-i18n="gettingStarted.step3.successExample">的消息</span>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm">
|
|
413
|
+
<strong>❌ <span data-i18n="gettingStarted.step3.issues">常见问题：</span></strong>
|
|
414
|
+
<ul class="list-disc list-inside mt-1 text-text-primary">
|
|
415
|
+
<li data-i18n="gettingStarted.step3.issue1">提示找不到工具 → 检查配置文件格式</li>
|
|
416
|
+
<li data-i18n="gettingStarted.step3.issue2">提示命令不存在 → 确认 Node.js 已安装</li>
|
|
417
|
+
<li data-i18n="gettingStarted.step3.issue3">Windows 用户 → 确保使用 npx 方式</li>
|
|
418
|
+
</ul>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
</section>
|
|
422
|
+
|
|
423
|
+
<!-- Step 4: 委托式编排 -->
|
|
424
|
+
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
425
|
+
<div class="flex items-start gap-3 mb-4">
|
|
426
|
+
<div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-primary to-primary-hover text-white rounded-full flex items-center justify-center font-semibold text-sm sm:text-base flex-shrink-0">4</div>
|
|
427
|
+
<h2 class="text-lg sm:text-xl font-semibold text-text-primary" data-i18n="gettingStarted.step4.title">委托式编排协议</h2>
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<div class="pl-0 sm:pl-0 text-sm text-text-primary space-y-3">
|
|
431
|
+
<p><code class="bg-gray-200 px-1 rounded text-xs">start_*</code> <span data-i18n="gettingStarted.step4.description">编排工具不会直接执行操作，而是返回一个可执行计划。</span></p>
|
|
432
|
+
<p><strong data-i18n="gettingStarted.step4.keyFields">关键字段：</strong><code class="bg-gray-200 px-1 rounded text-xs">mode: "delegated"</code>、<code class="bg-gray-200 px-1 rounded text-xs">steps[]</code>、<code class="bg-gray-200 px-1 rounded text-xs">outputs[]</code></p>
|
|
433
|
+
|
|
434
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
435
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
436
|
+
<span class="text-xs text-slate-300 font-medium" data-i18n="gettingStarted.step4.planExample">Plan 示例</span>
|
|
437
|
+
</div>
|
|
438
|
+
<pre class="code-block p-4 text-sm text-slate-200 overflow-x-auto"><code>{
|
|
439
|
+
"mode": "delegated",
|
|
440
|
+
"steps": [
|
|
441
|
+
{
|
|
442
|
+
"id": "spec",
|
|
443
|
+
"tool": "add_feature",
|
|
444
|
+
"args": { "feature_name": "user-auth" },
|
|
445
|
+
"outputs": ["docs/specs/user-auth/requirements.md"]
|
|
446
|
+
}
|
|
447
|
+
]
|
|
448
|
+
}</code></pre>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
<div class="p-3 bg-blue-50 border-l-3 border-blue-500 rounded-r text-sm">
|
|
452
|
+
<strong>💡 <span data-i18n="gettingStarted.step4.tip">要点：</span></strong><span data-i18n="gettingStarted.step4.tipText">按顺序执行</span> <code class="bg-gray-200 px-1 rounded text-xs">steps</code><span data-i18n="gettingStarted.step4.tipText2">，并确保</span> <code class="bg-gray-200 px-1 rounded text-xs">outputs</code> <span data-i18n="gettingStarted.step4.tipText3">文件真实落盘</span>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</section>
|
|
456
|
+
|
|
457
|
+
<!-- 常见问题 -->
|
|
458
|
+
<section class="bg-white rounded-xl border border-border p-4 sm:p-6 mb-6 shadow-sm">
|
|
459
|
+
<h2 class="text-lg sm:text-xl font-semibold text-text-primary mb-4" data-i18n="gettingStarted.faq.title">⚠️ 常见问题</h2>
|
|
460
|
+
|
|
461
|
+
<!-- 问题 1 -->
|
|
462
|
+
<div class="border border-border rounded-lg overflow-hidden mb-4">
|
|
463
|
+
<button onclick="toggleFaq('faq1')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
464
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q1.title">问题 1：npx 缓存导致的模块解析错误</span>
|
|
465
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq1-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
466
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
467
|
+
</svg>
|
|
468
|
+
</button>
|
|
469
|
+
<div id="faq1-content" class="hidden p-4 border-t border-border">
|
|
470
|
+
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
|
|
471
|
+
<strong data-i18n="gettingStarted.faq.q1.error">错误信息：</strong>
|
|
472
|
+
<pre class="code-block mt-2 text-xs text-slate-200 bg-slate-900 p-2 rounded overflow-x-auto"><code>Error: Cannot find package 'yallist'</code></pre>
|
|
473
|
+
</div>
|
|
474
|
+
<p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q1.solution">解决方案：</strong><span data-i18n="gettingStarted.faq.q1.solutionText">清理 npx 缓存</span></p>
|
|
475
|
+
<div class="space-y-2">
|
|
476
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
477
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
478
|
+
<span class="text-xs text-slate-300 font-medium">Windows CMD</span>
|
|
479
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
|
|
480
|
+
</div>
|
|
481
|
+
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rmdir /s /q %LOCALAPPDATA%\npm-cache\_npx</code></pre>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden">
|
|
484
|
+
<div class="flex items-center justify-between px-3 py-2 bg-slate-800">
|
|
485
|
+
<span class="text-xs text-slate-300 font-medium">macOS/Linux</span>
|
|
486
|
+
<button onclick="copyCode(this)" class="text-xs text-slate-300 hover:text-white transition-colors">📋</button>
|
|
487
|
+
</div>
|
|
488
|
+
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>rm -rf ~/.npm/_npx</code></pre>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
<p class="text-sm text-text-secondary mt-2" data-i18n="gettingStarted.faq.q1.restart">然后重启 MCP 客户端</p>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
|
|
495
|
+
<!-- 问题 2 -->
|
|
496
|
+
<div class="border border-border rounded-lg overflow-hidden">
|
|
497
|
+
<button onclick="toggleFaq('faq2')" class="w-full px-4 py-3 bg-bg-page flex items-center justify-between text-left hover:bg-gray-100 transition-colors">
|
|
498
|
+
<span class="font-medium text-text-primary" data-i18n="gettingStarted.faq.q2.title">问题 2：MCP 服务器连接失败</span>
|
|
499
|
+
<svg class="w-5 h-5 text-text-tertiary transition-transform" id="faq2-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
500
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
501
|
+
</svg>
|
|
502
|
+
</button>
|
|
503
|
+
<div id="faq2-content" class="hidden p-4 border-t border-border">
|
|
504
|
+
<div class="p-3 bg-red-50 border-l-3 border-red-500 rounded-r text-sm text-text-primary mb-3">
|
|
505
|
+
<strong data-i18n="gettingStarted.faq.q2.possibleReasons">可能原因：</strong>
|
|
506
|
+
<ul class="list-disc list-inside mt-1">
|
|
507
|
+
<li data-i18n="gettingStarted.faq.q2.reason1">Node.js 版本过低（需要 >= 16.0.0）</li>
|
|
508
|
+
<li data-i18n="gettingStarted.faq.q2.reason2">依赖未安装或损坏</li>
|
|
509
|
+
<li data-i18n="gettingStarted.faq.q2.reason3">配置文件格式错误</li>
|
|
510
|
+
</ul>
|
|
511
|
+
</div>
|
|
512
|
+
<p class="text-sm text-text-primary mb-2"><strong data-i18n="gettingStarted.faq.q2.solution">解决方案：</strong></p>
|
|
513
|
+
<ol class="list-decimal list-inside space-y-2 text-sm text-text-primary">
|
|
514
|
+
<li><span data-i18n="gettingStarted.faq.q2.step1">检查 Node.js 版本：</span>
|
|
515
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
|
|
516
|
+
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>node --version</code></pre>
|
|
517
|
+
</div>
|
|
518
|
+
</li>
|
|
519
|
+
<li data-i18n="gettingStarted.faq.q2.step2">如果低于 v16，请升级 Node.js</li>
|
|
520
|
+
<li><span data-i18n="gettingStarted.faq.q2.step3">清理缓存并重新安装：</span>
|
|
521
|
+
<div class="bg-slate-900 rounded-lg overflow-hidden mt-1">
|
|
522
|
+
<pre class="code-block p-3 text-sm text-slate-200 overflow-x-auto"><code>npm cache clean --force</code></pre>
|
|
523
|
+
</div>
|
|
524
|
+
</li>
|
|
525
|
+
<li data-i18n="gettingStarted.faq.q2.step4">检查配置文件 JSON 格式是否正确</li>
|
|
526
|
+
</ol>
|
|
527
|
+
</div>
|
|
528
|
+
</div>
|
|
529
|
+
</section>
|
|
530
|
+
|
|
531
|
+
<!-- Footer -->
|
|
532
|
+
<footer class="text-center text-sm text-text-tertiary py-4 border-t border-border">
|
|
533
|
+
<p>Made with ❤️ by <a href="https://www.bytezonex.com/" target="_blank" rel="noopener" class="text-primary hover:underline">小墨 (Kyle)</a></p>
|
|
534
|
+
<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>
|
|
535
|
+
</footer>
|
|
536
|
+
</div>
|
|
537
|
+
</main>
|
|
538
|
+
|
|
539
|
+
<script>
|
|
540
|
+
// 侧边栏切换
|
|
541
|
+
function toggleSidebar() {
|
|
542
|
+
const sidebar = document.getElementById('sidebar');
|
|
543
|
+
const backdrop = document.getElementById('backdrop');
|
|
544
|
+
const isOpen = sidebar.classList.contains('open');
|
|
545
|
+
if (isOpen) {
|
|
546
|
+
sidebar.classList.remove('open');
|
|
547
|
+
backdrop.classList.remove('active');
|
|
548
|
+
} else {
|
|
549
|
+
sidebar.classList.add('open');
|
|
550
|
+
backdrop.classList.add('active');
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
// 安装方式折叠
|
|
555
|
+
function toggleInstall(type) {
|
|
556
|
+
const content = document.getElementById(type + '-content');
|
|
557
|
+
const icon = document.getElementById(type + '-icon');
|
|
558
|
+
content.classList.toggle('hidden');
|
|
559
|
+
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
// 客户端折叠
|
|
563
|
+
function toggleClient(type) {
|
|
564
|
+
const content = document.getElementById(type + '-content');
|
|
565
|
+
const icon = document.getElementById(type + '-icon');
|
|
566
|
+
content.classList.toggle('hidden');
|
|
567
|
+
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
// FAQ 折叠
|
|
571
|
+
function toggleFaq(id) {
|
|
572
|
+
const content = document.getElementById(id + '-content');
|
|
573
|
+
const icon = document.getElementById(id + '-icon');
|
|
574
|
+
content.classList.toggle('hidden');
|
|
575
|
+
icon.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
// 复制代码
|
|
579
|
+
function copyCode(btn) {
|
|
580
|
+
const code = btn.closest('.bg-slate-900').querySelector('code');
|
|
581
|
+
navigator.clipboard.writeText(code.textContent).then(() => {
|
|
582
|
+
const originalText = btn.textContent;
|
|
583
|
+
btn.textContent = '✅ 已复制';
|
|
584
|
+
setTimeout(() => btn.textContent = originalText, 2000);
|
|
585
|
+
});
|
|
586
|
+
}
|
|
587
|
+
</script>
|
|
588
|
+
<script src="../assets/js/i18n.js"></script>
|
|
589
|
+
</body>
|
|
590
590
|
</html>
|