-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1791 lines (1636 loc) · 89.6 KB
/
index.html
File metadata and controls
1791 lines (1636 loc) · 89.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCode 学习教程 - 开源终端 AI 编程助手</title>
<link rel="stylesheet" href="opencode-tutorial.css">
</head>
<body>
<div class="app">
<!-- Sidebar Navigation -->
<nav class="sidebar" id="sidebar">
<div class="sb-head">
<h2>📗 OpenCode 教程</h2>
</div>
<div class="search-wrap">
<input type="text" class="search-input" placeholder="搜索章节..." id="searchInput">
</div>
<div class="sb-nav" id="sbNav">
<div class="nav-sec">快速开始</div>
<div class="nav-item active" data-target="hero"><span class="nav-ic">🏠</span> 首页概览</div>
<div class="nav-item" data-target="comparison"><span class="nav-ic">🔍</span> 工具对比</div>
<div class="nav-item" data-target="install"><span class="nav-ic">⬇️</span> 安装与环境</div>
<div class="nav-item" data-target="quick-start"><span class="nav-ic">🚀</span> 5分钟上手</div>
<div class="nav-sec">🌱 入门篇</div>
<div class="nav-item" data-target="basic-commands"><span class="nav-ic">💬</span> 基础命令</div>
<div class="nav-item" data-target="models"><span class="nav-ic">🤖</span> 模型配置</div>
<div class="nav-item" data-target="work-modes"><span class="nav-ic">🔄</span> 工作模式</div>
<div class="nav-sec">🌿 中级篇</div>
<div class="nav-item" data-target="config"><span class="nav-ic">⚙️</span> 配置详解</div>
<div class="nav-item" data-target="skills"><span class="nav-ic">🎯</span> Skills 推荐</div>
<div class="nav-item" data-target="plugins"><span class="nav-ic">🔌</span> 插件推荐</div>
<div class="nav-item" data-target="custom-commands"><span class="nav-ic">📝</span> 自定义命令</div>
<div class="nav-item" data-target="shortcuts"><span class="nav-ic">⌨️</span> 快捷键</div>
<div class="nav-sec">🌳 高级篇</div>
<div class="nav-item" data-target="architecture"><span class="nav-ic">🏗️</span> 技术架构</div>
<div class="nav-item" data-target="local-models"><span class="nav-ic">🏠</span> 本地模型</div>
<div class="nav-item" data-target="mcp"><span class="nav-ic">🔗</span> MCP 集成</div>
<div class="nav-item" data-target="privacy"><span class="nav-ic">🔒</span> 隐私安全</div>
<div class="nav-sec">附录</div>
<div class="nav-item" data-target="cheatsheet"><span class="nav-ic">📋</span> 速查表</div>
<div class="nav-item" data-target="faq"><span class="nav-ic">❓</span> 常见问题</div>
</div>
</nav>
<!-- Main Content -->
<main class="main">
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
<!-- ===================== HERO ===================== -->
<section class="section hero" id="hero">
<div class="hero-badge"><span>🆓</span> 完全开源 · 免费使用</div>
<h1>OpenCode 学习教程</h1>
<p>从零开始掌握开源终端 AI 编程助手 OpenCode，支持 75+ AI 模型，终端原生体验，隐私优先设计。</p>
<!-- SVG: Hero illustration -->
<div class="svg-wrap" style="margin-top:24px">
<svg viewBox="0 0 700 200" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Terminal window -->
<rect x="30" y="20" width="640" height="160" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<!-- Title bar -->
<rect x="30" y="20" width="640" height="28" rx="10" fill="#1c2333"/>
<rect x="30" y="38" width="640" height="10" fill="#1c2333"/>
<!-- Traffic lights -->
<circle cx="50" cy="34" r="6" fill="#f85149"/>
<circle cx="70" cy="34" r="6" fill="#f0883e"/>
<circle cx="90" cy="34" r="6" fill="#3fb950"/>
<!-- Title text -->
<text x="350" y="38" text-anchor="middle" fill="#8b949e" font-size="12">OpenCode — AI Coding Agent</text>
<!-- Terminal content -->
<text x="50" y="72" fill="#3fb950" font-size="13" font-family="monospace">$ opencode</text>
<text x="50" y="95" fill="#8b949e" font-size="12" font-family="monospace">🤖 Welcome to OpenCode! How can I help you today?</text>
<text x="50" y="118" fill="#58a6ff" font-size="12" font-family="monospace">You: 帮我重构这个 React 组件，使用 hooks 替代 class</text>
<text x="50" y="141" fill="#bc8cff" font-size="12" font-family="monospace">✓ Analyzing component structure...</text>
<text x="50" y="164" fill="#3fb950" font-size="12" font-family="monospace">✓ Refactored! 3 files updated. Run tests? (y/n)</text>
</svg>
<div class="svg-caption">OpenCode：终端原生的 AI 编程助手</div>
</div>
</section>
<div class="content">
<!-- ===================== 工具对比 ===================== -->
<section class="section" id="comparison">
<h2 class="section-title">🔍 主流 AI 编程工具对比 <span class="badge badge-beginner">必读</span></h2>
<p style="color: var(--text2); margin-bottom: 16px;">以下是 2026 年主流 AI 编程工具的核心对比，帮助你选择最适合的工具：</p>
<div class="comparison-table tbl-wrap">
<table>
<thead>
<tr>
<th style="width: 120px;">对比维度</th>
<th>OpenCode</th>
<th>Claude Code</th>
<th>Codex CLI</th>
<th>CodeBuddy</th>
<th>Qoder</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>开发商</strong></td>
<td>开源社区</td>
<td>Anthropic</td>
<td>OpenAI</td>
<td>腾讯云</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td><strong>开源协议</strong></td>
<td><span style="color: var(--green);">MIT</span></td>
<td><span style="color: var(--text-muted);">闭源</span></td>
<td><span style="color: var(--text-muted);">闭源</span></td>
<td><span style="color: var(--text-muted);">闭源</span></td>
<td><span style="color: var(--text-muted);">闭源</span></td>
</tr>
<tr>
<td><strong>支持模型</strong></td>
<td>75+ 模型</td>
<td>Claude 系列</td>
<td>GPT 系列</td>
<td>混元/GPT/Claude</td>
<td>通义/GPT/Claude</td>
</tr>
<tr>
<td><strong>主要形态</strong></td>
<td>终端/桌面</td>
<td>终端</td>
<td>终端</td>
<td>IDE/终端/Web</td>
<td>IDE</td>
</tr>
<tr>
<td><strong>本地模型</strong></td>
<td><span class="check">✓</span></td>
<td><span class="cross">✗</span></td>
<td><span class="cross">✗</span></td>
<td><span class="partial">△</span></td>
<td><span class="partial">△</span></td>
</tr>
<tr>
<td><strong>MCP 支持</strong></td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span></td>
<td><span class="partial">△</span></td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td><strong>隐私保护</strong></td>
<td><span style="color: var(--green);">强</span></td>
<td><span style="color: var(--yellow);">中</span></td>
<td><span style="color: var(--yellow);">中</span></td>
<td><span style="color: var(--yellow);">中</span></td>
<td><span style="color: var(--yellow);">中</span></td>
</tr>
<tr>
<td><strong>价格</strong></td>
<td><span style="color: var(--green);">免费</span></td>
<td>订阅制</td>
<td>订阅制</td>
<td>免费/订阅</td>
<td>免费/订阅</td>
</tr>
<tr>
<td><strong>适合人群</strong></td>
<td>全栈/隐私敏感</td>
<td>专业开发者</td>
<td>OpenAI 用户</td>
<td>腾讯生态用户</td>
<td>阿里生态用户</td>
</tr>
</tbody>
</table>
</div>
<div class="card" style="margin-top: 20px;">
<h4>💡 如何选择？</h4>
<ul>
<li><strong>OpenCode</strong>：追求开源、隐私、多模型支持的开发者首选</li>
<li><strong>Claude Code</strong>：深度 Claude 用户，需要最强推理能力</li>
<li><strong>Codex CLI</strong>：OpenAI 订阅用户，习惯 GPT 工作流</li>
<li><strong>CodeBuddy</strong>：腾讯云用户，需要 IDE 集成和云端协作</li>
<li><strong>Qoder</strong>：阿里云用户，企业级开发场景</li>
</ul>
</div>
</section>
<!-- ===================== INSTALL ===================== -->
<section class="section" id="install">
<h2 class="section-title">⬇️ 安装与环境 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>系统要求</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>系统</th><th>要求</th><th>推荐终端</th></tr></thead>
<tbody>
<tr><td><strong>macOS</strong></td><td>macOS 10.15+</td><td>WezTerm, Alacritty, iTerm2, Kitty</td></tr>
<tr><td><strong>Linux</strong></td><td>glibc 2.31+</td><td>WezTerm, Alacritty, Ghostty, Kitty</td></tr>
<tr><td><strong>Windows</strong></td><td>Windows 10+</td><td>Windows Terminal (推荐 WSL)</td></tr>
</tbody>
</table></div>
<div class="tip"><strong>💡 提示：</strong>Windows 用户建议使用 WSL（Windows Subsystem for Linux）以获得最佳体验。</div>
</div>
<div class="sub">
<h3>安装方式</h3>
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" onclick="switchTab(this, 'install-script')">一键脚本</button>
<button class="tab-btn" onclick="switchTab(this, 'install-brew')">Homebrew</button>
<button class="tab-btn" onclick="switchTab(this, 'install-npm')">npm/bun</button>
<button class="tab-btn" onclick="switchTab(this, 'install-go')">Go</button>
</div>
<div class="tab-panel active" id="install-script">
<div class="code-block">
<div class="code-header"><span class="lang">bash — 推荐方式</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 安装最新版本
curl -fsSL https://opencode.ai/install | bash
# 安装指定版本
curl -fsSL https://opencode.ai/install | VERSION=0.1.0 bash</div>
</div>
</div>
<div class="tab-panel" id="install-brew">
<div class="code-block">
<div class="code-header"><span class="lang">bash — macOS/Linux</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># Homebrew 安装
brew install opencode-ai/tap/opencode
# 或使用官方 tap
brew tap opencode-ai/tap
brew install opencode</div>
</div>
</div>
<div class="tab-panel" id="install-npm">
<div class="code-block">
<div class="code-header"><span class="lang">bash — Node.js</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># npm 全局安装
npm install -g opencode-ai@latest
# 或使用 bun
bun add -g opencode-ai
# 或使用 pnpm
pnpm add -g opencode-ai</div>
</div>
</div>
<div class="tab-panel" id="install-go">
<div class="code-block">
<div class="code-header"><span class="lang">bash — Go 安装</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># Go 安装（需要 Go 1.21+）
go install github.com/opencode-ai/opencode@latest
# Arch Linux AUR
yay -S opencode-ai-bin
# 或
paru -S opencode-ai-bin</div>
</div>
</div>
</div>
</div>
<div class="sub">
<h3>验证安装</h3>
<div class="code-block">
<div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 检查版本
opencode --version
# 启动 OpenCode
opencode
# 指定工作目录
opencode -c /path/to/project
# 调试模式
opencode -d</div>
</div>
</div>
<div class="sub">
<h3>桌面应用</h3>
<p>OpenCode 也提供桌面应用版本，支持 macOS、Windows 和 Linux。</p>
<div class="code-block">
<div class="code-header"><span class="lang">下载地址</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 官方下载页面
https://opencode.ai/download
# macOS 可通过 Homebrew 安装
brew install --cask opencode</div>
</div>
</div>
</section>
<!-- ===================== QUICK START ===================== -->
<section class="section" id="quick-start">
<h2 class="section-title">🚀 5分钟上手 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>第一步：配置 API 密钥</h3>
<p>OpenCode 需要配置 AI 模型的 API 密钥才能工作。你可以选择以下任一方式：</p>
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" onclick="switchTab(this, 'api-env')">环境变量</button>
<button class="tab-btn" onclick="switchTab(this, 'api-connect')">交互式配置</button>
</div>
<div class="tab-panel active" id="api-env">
<div class="code-block">
<div class="code-header"><span class="lang">bash — 设置环境变量</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># Anthropic Claude
export ANTHROPIC_API_KEY="sk-ant-..."
# OpenAI GPT
export OPENAI_API_KEY="sk-..."
# Google Gemini
export GEMINI_API_KEY="AIza..."
# GitHub Copilot（需要 GitHub Token）
export GITHUB_TOKEN="ghp_..."
# Groq
export GROQ_API_KEY="gsk_..."
# AWS Bedrock
export AWS_ACCESS_KEY_ID="AKIA..."
export AWS_SECRET_ACCESS_KEY="..."
export AWS_REGION="us-east-1"</div>
</div>
<div class="tip"><strong>💡 建议将环境变量添加到 shell 配置文件：</strong><code>~/.zshrc</code> 或 <code>~/.bashrc</code></div>
</div>
<div class="tab-panel" id="api-connect">
<div class="code-block">
<div class="code-header"><span class="lang">交互式配置流程</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 1. 启动 OpenCode
opencode
# 2. 在 TUI 中输入命令
/connect
# 3. 访问授权页面
# 打开 https://opencode.ai/auth 登录并获取 API 密钥
# 4. 在 TUI 中粘贴密钥完成配置</div>
</div>
</div>
</div>
</div>
<div class="sub">
<h3>第二步：初始化项目</h3>
<div class="code-block">
<div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 进入项目目录
cd /path/to/your/project
# 启动 OpenCode
opencode
# 在 TUI 中执行初始化命令
/init</div>
</div>
<div class="card">
<h4>📄 AGENTS.md 文件</h4>
<p><code>/init</code> 命令会自动分析项目并生成 <code>AGENTS.md</code> 文件，包含：</p>
<ul>
<li>项目结构说明</li>
<li>技术栈信息</li>
<li>编码规范</li>
<li>关键文件位置</li>
</ul>
<p>建议将 <code>AGENTS.md</code> 提交到 Git，帮助 OpenCode 更好理解项目上下文。</p>
</div>
</div>
<div class="sub">
<h3>第三步：开始对话</h3>
<div class="code-block">
<div class="code-header"><span class="lang">示例对话</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 理解代码
"解释一下这个项目的身份验证流程"
# 搜索文件并提问（使用 @ 符号）
"@packages/auth 如何处理用户登录？"
# 添加功能
"在设置页面添加深色模式切换开关"
# 修复 Bug
"修复这个错误：TypeError: Cannot read property 'id' of undefined"
# 重构代码
"重构 UserService 类以使用依赖注入模式"</div>
</div>
</div>
<div class="sub">
<h3>第四步：切换工作模式</h3>
<!-- SVG: Plan vs Build -->
<div class="svg-wrap">
<svg viewBox="0 0 700 180" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Plan Mode -->
<rect x="20" y="20" width="320" height="140" rx="12" fill="rgba(88,166,255,.08)" stroke="#58a6ff" stroke-width="2"/>
<text x="180" y="50" text-anchor="middle" fill="#58a6ff" font-size="16" font-weight="700">🧠 计划模式 (Plan)</text>
<rect x="40" y="65" width="280" height="80" rx="6" fill="#161b22" stroke="#30363d"/>
<text x="180" y="90" text-anchor="middle" fill="#8b949e" font-size="11">✓ 只读分析代码</text>
<text x="180" y="108" text-anchor="middle" fill="#8b949e" font-size="11">✓ 制定实现计划</text>
<text x="180" y="126" text-anchor="middle" fill="#8b949e" font-size="11">✓ 不修改任何文件</text>
<!-- Build Mode -->
<rect x="360" y="20" width="320" height="140" rx="12" fill="rgba(63,185,80,.08)" stroke="#3fb950" stroke-width="2"/>
<text x="520" y="50" text-anchor="middle" fill="#3fb950" font-size="16" font-weight="700">🔨 构建模式 (Build)</text>
<rect x="380" y="65" width="280" height="80" rx="6" fill="#161b22" stroke="#30363d"/>
<text x="520" y="90" text-anchor="middle" fill="#8b949e" font-size="11">✓ 可读写文件</text>
<text x="520" y="108" text-anchor="middle" fill="#8b949e" font-size="11">✓ 执行 shell 命令</text>
<text x="520" y="126" text-anchor="middle" fill="#8b949e" font-size="11">✓ 修改代码</text>
<!-- Arrow -->
<path d="M340 90 L360 90" stroke="#d97706" stroke-width="2" marker-end="url(#arrow)"/>
<text x="350" y="85" text-anchor="middle" fill="#d97706" font-size="11">Tab</text>
</svg>
<div class="svg-caption">使用 Tab 键在两种模式间切换</div>
</div>
<div class="tip"><strong>💡 最佳实践：</strong>复杂任务先用计划模式分析，确认方案后再切换到构建模式执行。</div>
</div>
</section>
<!-- ===================== BASIC COMMANDS ===================== -->
<section class="section" id="basic-commands">
<h2 class="section-title">💬 基础命令 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>斜杠命令</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>命令</th><th>说明</th><th>示例</th></tr></thead>
<tbody>
<tr><td><code>/init</code></td><td>初始化项目，生成 AGENTS.md</td><td><code>/init</code></td></tr>
<tr><td><code>/undo</code></td><td>撤销上一次更改</td><td><code>/undo</code></td></tr>
<tr><td><code>/redo</code></td><td>重做已撤销的更改</td><td><code>/redo</code></td></tr>
<tr><td><code>/share</code></td><td>生成对话分享链接</td><td><code>/share</code></td></tr>
<tr><td><code>/connect</code></td><td>配置 API 密钥</td><td><code>/connect</code></td></tr>
<tr><td><code>/help</code></td><td>显示帮助信息</td><td><code>/help</code></td></tr>
<tr><td><code>/clear</code></td><td>清空当前对话</td><td><code>/clear</code></td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>CLI 参数</h3>
<div class="code-block">
<div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 正常启动
opencode
# 指定工作目录
opencode -c /path/to/project
# 调试模式
opencode -d
# 非交互式提示（管道模式）
opencode -p "解释这个函数的作用"
# JSON 格式输出
opencode -p "分析代码" -f json
# 静默模式（无加载动画）
opencode -p "解释代码" -q
# 查看帮助
opencode --help</div>
</div>
</div>
<div class="sub">
<h3>文件引用语法</h3>
<p>使用 <code>@</code> 符号快速引用文件：</p>
<div class="code-block">
<div class="code-header"><span class="lang">对话示例</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 搜索并引用文件
"@auth 解释这个登录逻辑"
# 引用多个文件
"@user.model @user.service 分析这两个文件的关系"
# 引用目录
"@src/api 列出所有 API 端点"</div>
</div>
</div>
<div class="sub">
<h3>非交互式使用</h3>
<p>OpenCode 支持管道模式，可用于脚本和自动化：</p>
<div class="code-block">
<div class="code-header"><span class="lang">bash</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 单次提问
opencode -p "这段代码有什么问题？" < code.py
# 与其他命令结合
cat error.log | opencode -p "分析这些错误日志"
# 在脚本中使用
RESULT=$(opencode -p "生成一个 React 组件" -f json)
echo "$RESULT" | jq '.code'</div>
</div>
</div>
</section>
<!-- ===================== MODELS ===================== -->
<section class="section" id="models">
<h2 class="section-title">🤖 模型配置 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>支持的 AI 提供商</h3>
<!-- SVG: Provider ecosystem -->
<div class="svg-wrap">
<svg viewBox="0 0 700 220" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Center: OpenCode -->
<circle cx="350" cy="110" r="50" fill="rgba(63,185,80,.15)" stroke="#3fb950" stroke-width="2"/>
<text x="350" y="105" text-anchor="middle" fill="#3fb950" font-size="14" font-weight="700">OpenCode</text>
<text x="350" y="122" text-anchor="middle" fill="#8b949e" font-size="10">统一接口</text>
<!-- Providers around -->
<rect x="50" y="30" width="100" height="45" rx="8" fill="rgba(217,119,6,.1)" stroke="#d97706"/>
<text x="100" y="57" text-anchor="middle" fill="#f59e0b" font-size="12">Anthropic</text>
<line x1="150" y1="52" x2="300" y2="90" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="200" y="20" width="100" height="45" rx="8" fill="rgba(88,166,255,.1)" stroke="#58a6ff"/>
<text x="250" y="47" text-anchor="middle" fill="#58a6ff" font-size="12">OpenAI</text>
<line x1="280" y1="65" x2="310" y2="80" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="400" y="20" width="100" height="45" rx="8" fill="rgba(188,140,255,.1)" stroke="#bc8cff"/>
<text x="450" y="47" text-anchor="middle" fill="#bc8cff" font-size="12">Google</text>
<line x1="420" y1="65" x2="390" y2="80" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="550" y="30" width="100" height="45" rx="8" fill="rgba(248,81,73,.1)" stroke="#f85149"/>
<text x="600" y="57" text-anchor="middle" fill="#f85149" font-size="12">GitHub</text>
<line x1="550" y1="52" x2="400" y2="90" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="50" y="160" width="100" height="45" rx="8" fill="rgba(240,136,62,.1)" stroke="#f0883e"/>
<text x="100" y="187" text-anchor="middle" fill="#f0883e" font-size="12">Groq</text>
<line x1="150" y1="182" x2="300" y2="130" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="200" y="160" width="100" height="45" rx="8" fill="rgba(63,185,80,.1)" stroke="#3fb950"/>
<text x="250" y="187" text-anchor="middle" fill="#3fb950" font-size="12">AWS</text>
<line x1="280" y1="160" x2="310" y2="140" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="400" y="160" width="100" height="45" rx="8" fill="rgba(88,166,255,.1)" stroke="#58a6ff"/>
<text x="450" y="187" text-anchor="middle" fill="#58a6ff" font-size="12">Azure</text>
<line x1="420" y1="160" x2="390" y2="140" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<rect x="550" y="160" width="100" height="45" rx="8" fill="rgba(188,140,255,.1)" stroke="#bc8cff"/>
<text x="600" y="187" text-anchor="middle" fill="#bc8cff" font-size="12">本地模型</text>
<line x1="550" y1="182" x2="400" y2="130" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
</svg>
<div class="svg-caption">OpenCode 支持 75+ AI 提供商，通过统一接口调用</div>
</div>
</div>
<div class="sub">
<h3>模型列表</h3>
<div class="accordion">
<div class="acc-item open">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟠 Anthropic Claude</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>模型</th><th>特点</th><th>环境变量</th></tr></thead>
<tbody>
<tr><td>Claude 3.7 Sonnet</td><td>最新版本，编程能力强</td><td><code>ANTHROPIC_API_KEY</code></td></tr>
<tr><td>Claude 3.5 Sonnet</td><td>性价比高，推荐日常使用</td><td><code>ANTHROPIC_API_KEY</code></td></tr>
<tr><td>Claude 3.5 Haiku</td><td>速度快，适合简单任务</td><td><code>ANTHROPIC_API_KEY</code></td></tr>
<tr><td>Claude 3 Opus</td><td>最强推理能力</td><td><code>ANTHROPIC_API_KEY</code></td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🔵 OpenAI</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>模型</th><th>特点</th><th>环境变量</th></tr></thead>
<tbody>
<tr><td>GPT-4.1</td><td>最新版本，编程优化</td><td><code>OPENAI_API_KEY</code></td></tr>
<tr><td>GPT-4.1-mini</td><td>轻量级，快速响应</td><td><code>OPENAI_API_KEY</code></td></tr>
<tr><td>GPT-4o</td><td>多模态支持</td><td><code>OPENAI_API_KEY</code></td></tr>
<tr><td>O1/O3/O4</td><td>深度推理模型</td><td><code>OPENAI_API_KEY</code></td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟣 Google Gemini</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>模型</th><th>特点</th><th>环境变量</th></tr></thead>
<tbody>
<tr><td>Gemini 2.5 Pro</td><td>最新旗舰模型</td><td><code>GEMINI_API_KEY</code></td></tr>
<tr><td>Gemini 2.5 Flash</td><td>快速响应版本</td><td><code>GEMINI_API_KEY</code></td></tr>
<tr><td>Gemini 2.0 Flash Lite</td><td>轻量级模型</td><td><code>GEMINI_API_KEY</code></td></tr>
</tbody>
</table></div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟢 GitHub Copilot</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>模型</th><th>说明</th><th>环境变量</th></tr></thead>
<tbody>
<tr><td>GPT-4o</td><td>Copilot 默认模型</td><td><code>GITHUB_TOKEN</code></td></tr>
<tr><td>Claude 3.5 Sonnet</td><td>Copilot 支持</td><td><code>GITHUB_TOKEN</code></td></tr>
<tr><td>Gemini 2.0</td><td>Copilot 支持</td><td><code>GITHUB_TOKEN</code></td></tr>
</tbody>
</table></div>
<div class="tip" style="margin-top:12px">需要 GitHub Copilot 订阅，使用 Personal Access Token。</div>
</div></div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)"><span>🟡 Groq</span><span class="arrow">▶</span></div>
<div class="acc-body"><div class="acc-inner">
<div class="tbl-wrap"><table>
<thead><tr><th>模型</th><th>特点</th><th>环境变量</th></tr></thead>
<tbody>
<tr><td>Llama 4 Maverick</td><td>Meta 最新模型</td><td><code>GROQ_API_KEY</code></td></tr>
<tr><td>Llama 3.3 70b</td><td>高性能开源模型</td><td><code>GROQ_API_KEY</code></td></tr>
<tr><td>Deepseek R1</td><td>深度推理模型</td><td><code>GROQ_API_KEY</code></td></tr>
<tr><td>QWEN QWQ-32b</td><td>阿里开源模型</td><td><code>GROQ_API_KEY</code></td></tr>
</tbody>
</table></div>
</div></div>
</div>
</div>
</div>
<div class="sub">
<h3>切换模型</h3>
<p>在 OpenCode TUI 中按 <code>Ctrl+O</code> 打开模型选择对话框，或使用斜杠命令：</p>
<div class="code-block">
<div class="code-header"><span class="lang">模型切换</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 快捷键切换
Ctrl+O → 打开模型选择对话框
# 命令行指定
opencode --model claude-3.7-sonnet
opencode --model gpt-4.1
opencode --model gemini-2.5-pro</div>
</div>
</div>
<div class="sub">
<h3>OpenCode Zen（推荐）</h3>
<div class="card">
<h4>🌟 什么是 Zen？</h4>
<p>OpenCode Zen 是官方提供的精选模型服务，专为编程代理优化：</p>
<ul>
<li><strong>稳定可靠</strong>：经过严格测试和基准验证</li>
<li><strong>无需配置</strong>：无需管理多个 API 密钥</li>
<li><strong>统一体验</strong>：避免不同模型间的性能差异</li>
</ul>
</div>
<div class="code-block">
<div class="code-header"><span class="lang">bash — 使用 Zen</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 配置 Zen
/connect
# 选择 Zen 选项，按提示完成授权
# 或使用环境变量
export OPENCODE_ZEN_KEY="your-zen-key"</div>
</div>
</div>
</section>
<!-- ===================== WORK MODES ===================== -->
<section class="section" id="work-modes">
<h2 class="section-title">🔄 工作模式 <span class="badge badge-beginner">入门</span></h2>
<div class="sub">
<h3>双模式详解</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>维度</th><th>🧠 计划模式 (Plan)</th><th>🔨 构建模式 (Build)</th></tr></thead>
<tbody>
<tr><td><strong>权限</strong></td><td>只读</td><td>可读写</td></tr>
<tr><td><strong>文件操作</strong></td><td>只能查看</td><td>可以修改、创建、删除</td></tr>
<tr><td><strong>命令执行</strong></td><td>不能执行 shell</td><td>可以执行 shell 命令</td></tr>
<tr><td><strong>适用场景</strong></td><td>理解代码、制定计划</td><td>实现功能、修复 Bug</td></tr>
<tr><td><strong>安全性</strong></td><td>高（无副作用）</td><td>中（需要确认操作）</td></tr>
<tr><td><strong>切换方式</strong></td><td colspan="2" style="text-align:center">按 <code>Tab</code> 键</td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>推荐工作流</h3>
<!-- SVG: Workflow -->
<div class="svg-wrap">
<svg viewBox="0 0 700 160" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">
<!-- Step 1 -->
<rect x="20" y="40" width="150" height="80" rx="10" fill="rgba(88,166,255,.1)" stroke="#58a6ff" stroke-width="2"/>
<text x="95" y="70" text-anchor="middle" fill="#58a6ff" font-size="13" font-weight="700">1. 计划模式</text>
<text x="95" y="90" text-anchor="middle" fill="#8b949e" font-size="11">理解需求</text>
<text x="95" y="106" text-anchor="middle" fill="#8b949e" font-size="11">分析代码结构</text>
<!-- Arrow -->
<path d="M170 80 L200 80" stroke="#d97706" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Step 2 -->
<rect x="200" y="40" width="150" height="80" rx="10" fill="rgba(88,166,255,.1)" stroke="#58a6ff" stroke-width="2"/>
<text x="275" y="70" text-anchor="middle" fill="#58a6ff" font-size="13" font-weight="700">2. 制定方案</text>
<text x="275" y="90" text-anchor="middle" fill="#8b949e" font-size="11">设计实现方案</text>
<text x="275" y="106" text-anchor="middle" fill="#8b949e" font-size="11">确认无遗漏</text>
<!-- Arrow -->
<path d="M350 80 L380 80" stroke="#3fb950" stroke-width="2" marker-end="url(#arrowhead2)"/>
<!-- Step 3 -->
<rect x="380" y="40" width="150" height="80" rx="10" fill="rgba(63,185,80,.1)" stroke="#3fb950" stroke-width="2"/>
<text x="455" y="70" text-anchor="middle" fill="#3fb950" font-size="13" font-weight="700">3. 构建模式</text>
<text x="455" y="90" text-anchor="middle" fill="#8b949e" font-size="11">切换模式</text>
<text x="455" y="106" text-anchor="middle" fill="#8b949e" font-size="11">执行修改</text>
<!-- Arrow -->
<path d="M530 80 L560 80" stroke="#d97706" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Step 4 -->
<rect x="560" y="40" width="120" height="80" rx="10" fill="rgba(188,140,255,.1)" stroke="#bc8cff" stroke-width="2"/>
<text x="620" y="70" text-anchor="middle" fill="#bc8cff" font-size="13" font-weight="700">4. 验证</text>
<text x="620" y="90" text-anchor="middle" fill="#8b949e" font-size="11">运行测试</text>
<text x="620" y="106" text-anchor="middle" fill="#8b949e" font-size="11">代码审查</text>
<!-- Arrow markers -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#d97706"/>
</marker>
<marker id="arrowhead2" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#3fb950"/>
</marker>
</defs>
</svg>
<div class="svg-caption">推荐工作流：先计划后构建，确保安全可靠</div>
</div>
</div>
<div class="sub">
<h3>撤销与重做</h3>
<p>OpenCode 提供完整的撤销/重做功能：</p>
<div class="code-block">
<div class="code-header"><span class="lang">撤销重做</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 撤销上一次更改
/undo
# 重做已撤销的更改
/redo
# 查看更改历史
/log</div>
</div>
</div>
</section>
<!-- ===================== CONFIG ===================== -->
<section class="section" id="config">
<h2 class="section-title">⚙️ 配置详解 <span class="badge badge-intermediate">中级</span></h2>
<div class="sub">
<h3>配置文件位置</h3>
<p>OpenCode 按以下顺序查找配置文件（后者覆盖前者）：</p>
<div class="code-block">
<div class="code-header"><span class="lang">配置文件优先级</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 1. 用户全局配置
~/.opencode.json
# 2. XDG 标准位置
$XDG_CONFIG_HOME/opencode/.opencode.json
# 3. 项目配置（优先级最高）
./.opencode.json</div>
</div>
</div>
<div class="sub">
<h3>配置示例</h3>
<div class="code-block">
<div class="code-header"><span class="lang">json — opencode.json</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body">{
"model": "claude-3.7-sonnet",
"provider": "anthropic",
"autoCompact": true,
"theme": "dark",
"editor": "vim",
"formatOnSave": true,
"lsp": {
"enabled": true,
"languages": ["typescript", "python", "go"]
},
"tools": {
"bash": {
"enabled": true,
"timeout": 30000
},
"fetch": {
"enabled": true
}
},
"providers": {
"anthropic": {
"apiKey": "${ANTHROPIC_API_KEY}"
},
"openai": {
"apiKey": "${OPENAI_API_KEY}"
}
}
}</div>
</div>
</div>
<div class="sub">
<h3>配置项说明</h3>
<div class="tbl-wrap"><table>
<thead><tr><th>配置项</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>model</code></td><td>string</td><td>auto</td><td>默认使用的模型</td></tr>
<tr><td><code>provider</code></td><td>string</td><td>auto</td><td>默认提供商</td></tr>
<tr><td><code>autoCompact</code></td><td>boolean</td><td>true</td><td>自动压缩上下文</td></tr>
<tr><td><code>theme</code></td><td>string</td><td>dark</td><td>主题（dark/light）</td></tr>
<tr><td><code>editor</code></td><td>string</td><td>vim</td><td>内置编辑器模式</td></tr>
<tr><td><code>formatOnSave</code></td><td>boolean</td><td>true</td><td>保存时自动格式化</td></tr>
</tbody>
</table></div>
</div>
<div class="sub">
<h3>AGENTS.md 项目配置</h3>
<p>在项目根目录创建 <code>AGENTS.md</code> 文件，帮助 OpenCode 理解项目：</p>
<div class="code-block">
<div class="code-header"><span class="lang">markdown — AGENTS.md</span><button class="copy-btn" onclick="copyCode(this)">复制</button></div>
<div class="code-body"># 项目说明
## 技术栈
- 前端：React 18 + TypeScript + Tailwind CSS
- 后端：Node.js + Express + PostgreSQL
- 测试：Jest + Playwright
## 项目结构
```
src/
├── components/ # React 组件
├── hooks/ # 自定义 Hooks
├── services/ # API 服务层
├── utils/ # 工具函数
└── types/ # TypeScript 类型定义
```
## 编码规范
- 使用函数式组件和 Hooks
- 遵循 ESLint + Prettier 配置
- 组件命名使用 PascalCase
- 文件命名使用 camelCase
## 关键文件
- <code>src/App.tsx</code>: 应用入口
- <code>src/services/api.ts</code>: API 配置
- <code>.env.example</code>: 环境变量模板</div>
</div>
</div>
</section>
<!-- ===================== SKILLS ===================== -->
<section class="section" id="skills">
<h2 class="section-title">🎯 热门 Skills 推荐 <span class="badge badge-intermediate">中级</span></h2>
<p style="color: var(--text2); margin-bottom: 20px;">Skills 是 OpenCode 的扩展能力模块，以下是最热门的 10 个推荐：</p>
<div class="feature-grid">
<div class="feature-card">
<h4>🔍 Deep Research</h4>
<p>企业级研究助手，支持多源综合分析、引用追踪和验证。适合需要深度调研的场景。</p>
</div>
<div class="feature-card">
<h4>🌐 Web Search</h4>
<p>实时联网搜索能力，支持搜索结果排名、安全搜索、分页等功能。</p>
</div>
<div class="feature-card">
<h4>📊 XLSX</h4>
<p>Excel 表格处理专家，支持读取、编辑、创建和分析 xlsx/xlsm/csv 文件。</p>
</div>
<div class="feature-card">
<h4>📄 PDF</h4>
<p>PDF 文档全能助手，支持读取、合并、拆分、加密、提取图片和 OCR 识别。</p>
</div>
<div class="feature-card">
<h4>🎨 AI Image Gen</h4>
<p>AI 图像生成，支持 FLUX、Gemini、Grok、Seedream 等 50+ 模型。</p>
</div>
<div class="feature-card">
<h4>📝 DOCX</h4>
<p>Word 文档处理，支持创建、读取、编辑、格式化和模板应用。</p>
</div>
<div class="feature-card">
<h4>📊 PPTX Generator</h4>
<p>PPT 幻灯片生成器，支持创建、编辑、布局管理和 LinkedIn 轮播。</p>
</div>
<div class="feature-card">
<h4>🤖 MCP Builder</h4>
<p>MCP 服务器构建指南，帮助创建高质量的 MCP 集成。</p>
</div>
<div class="feature-card">
<h4>🔍 Find Skills</h4>
<p>技能发现助手，帮助用户发现和安装适合的智能体技能。</p>
</div>
<div class="feature-card">
<h4>✍️ Humanizer</h4>
<p>文本人性化处理，去除 AI 生成痕迹，让文本更自然。</p>
</div>
</div>
<div class="tip">
<strong>💡 安装方式：</strong>在 OpenCode 中使用 <code>/skill install <skill-name></code> 命令即可安装所需技能。
</div>
</section>
<!-- ===================== PLUGINS ===================== -->
<section class="section" id="plugins">
<h2 class="section-title">🔌 热门插件推荐 <span class="badge badge-intermediate">中级</span></h2>
<p style="color: var(--text2); margin-bottom: 20px;">插件可以扩展 OpenCode 的核心功能，以下是最热门的 10 个社区插件：</p>
<div class="accordion">
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>🔔 Opencode Notify — 任务完成通知</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>任务完成时发送原生 OS 通知，让你不错过任何重要完成事件。支持 macOS、Windows 和 Linux。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-notify</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>🧠 Opencode Mem — 持久化记忆系统</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>为 OpenCode 提供持久化记忆能力，支持本地向量数据库存储。让你的 AI 助手记住之前的对话和偏好。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-mem</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>📊 Tokenscope — Token 使用分析</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>全面的 Token 使用分析和成本追踪工具，帮助你优化 API 调用成本。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-tokenscope</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>🔐 Gemini Auth — Google 账号认证</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>使用 Google 账号认证，连接 Gemini 计划，免费使用 Gemini 模型。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-gemini-auth</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>🌳 Opencode Worktree — Git Worktree 管理</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>零摩擦 git worktree 管理，自动生成终端并清理。适合多分支并行开发。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-worktree</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>🔄 Oh My Opencode — 后台 Agent 框架</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>后台 Agent、预置工具（LSP/AST/MCP）、精选 Agent 集合。大幅增强 OpenCode 能力。</p>
<p><strong>安装：</strong><code>opencode plugin install oh-my-opencode</code></p>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAccordion(this)">
<span>✂️ opencode-snip — Token 节省神器</span>
<span class="arrow">▶</span>
</div>
<div class="acc-body">
<div class="acc-inner">
<p>自动为 shell 命令添加 snip 前缀，减少 Token 消耗 60-90%。适合大型项目。</p>
<p><strong>安装：</strong><code>opencode plugin install opencode-snip</code></p>
</div>
</div>
</div>