-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
1216 lines (1206 loc) · 78.6 KB
/
atom.xml
File metadata and controls
1216 lines (1206 loc) · 78.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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://hbuecx.com</id>
<title>白山</title>
<updated>2026-04-19T14:45:36.540Z</updated>
<generator>https://github.com/jpmonette/feed</generator>
<link rel="alternate" href="https://hbuecx.com"/>
<link rel="self" href="https://hbuecx.com/atom.xml"/>
<subtitle>温故而知新。</subtitle>
<logo>https://hbuecx.com/images/avatar.png</logo>
<icon>https://hbuecx.com/favicon.ico</icon>
<rights>All rights reserved 2026, 白山</rights>
<entry>
<title type="html"><![CDATA[Claude Code 注册与使用]]></title>
<id>https://hbuecx.com/post/claude-code-zhu-ce-yu-shi-yong/</id>
<link href="https://hbuecx.com/post/claude-code-zhu-ce-yu-shi-yong/">
</link>
<updated>2026-04-17T13:44:45.000Z</updated>
<summary type="html"><![CDATA[<p>国内注册和使用 Claude Code 教程。</p>
]]></summary>
<content type="html"><![CDATA[<p>国内注册和使用 Claude Code 教程。</p>
<!-- more -->
<h1 id="一-claude-code-前置知识">一、Claude Code 前置知识</h1>
<h2 id="11-中转-api-的风险提示">1.1 中转 API 的风险提示</h2>
<p>中转 API 看似便宜 30~50%,但需要注意:</p>
<ul>
<li>💀 稳定性不确定:部分中转是逆向批量注册账号转售,平台一调整就可能中断</li>
<li>🔓 数据经第三方:你的代码经过中转服务器,需自行评估安全性</li>
<li>❌ 独家功能不可用:WebSearch、Chrome 控制、Remote Control 等官方独占功能无法使用</li>
<li>⚠️ 服务条款风险:部分中转方式可能违反模型厂商的服务条款</li>
</ul>
<p>如果选择中转/聚合方案,建议优先考虑有企业背景、透明计费的平台(如 ZenMux、AI Code With 等),降低跑路风险。</p>
<h2 id="12-官方订阅独享的能力">1.2 官方订阅独享的能力 🎁</h2>
<p>如果你选择了 Claude 官方订阅(尤其是 Max),除了模型能力本身,还有一些中转和国产替代目前无法提供的能力:</p>
<table>
<thead>
<tr>
<th>能力</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>WebSearch</td>
<td>Claude Code 直接联网搜索最新文档、Stack Overflow、GitHub Issues,无需手动开浏览器</td>
</tr>
<tr>
<td>Chrome 控制</td>
<td><code>claude --chrome</code> 操控浏览器:点击、填表、读控制台、录屏 GIF,前端调试神器</td>
</tr>
<tr>
<td>Remote Control</td>
<td>手机扫码远程控制 Claude Code 会话,开会也能盯进度(Max 专属)</td>
</tr>
<tr>
<td>Imagine with Claude</td>
<td>一键生成可交互的软件原型(Max 专属)</td>
</tr>
<tr>
<td>⚡ 优先队列</td>
<td>高峰期不排队,响应更快</td>
</tr>
<tr>
<td>新模型抢先</td>
<td>第一时间体验最新模型</td>
</tr>
</tbody>
</table>
<p>光一个 WebSearch 就挺实用 —— 以前写代码遇到问题要 Claude ↔ 浏览器来回切,现在直接说“帮我搜一下 xxx 的最新用法”就搞定了 ✨<br>
(ps: 国产模型的 Coding Plan 也开始提供类似能力...)</p>
<h2 id="13-结论">1.3 结论</h2>
<p>没有完美的方案,只有适合自己的选择。<br>
预算充足且需要官方独占功能(WebSearch/Chrome/RC),Claude Max 5x 综合体验确实很好;<br>
追求性价比和国内直连,阿里云/火山方舟 Coding Plan 首月几块钱就能上手试试;<br>
建议先用低成本方案试试手,找到适合自己的再加大投入 💪</p>
<hr>
<h1 id="二-网络配置代理设置">二、网络配置:代理设置 🌐</h1>
<h2 id="21-为什么需要代理">2.1 为什么需要代理?</h2>
<p>Claude 对中国大陆 IP 有地区限制,直连会被拒绝 🙅♂️<br>
我们需要通过代理将出口 IP 切换到美国。</p>
<h2 id="22-配置步骤">2.2 配置步骤</h2>
<p>开启代理,从注册到使用过程全程都要科学上网,并且要保障节点稳定性,不要随意切换代理 IP。</p>
<h2 id="23-终端代理配置两种方式">2.3 终端代理配置(两种方式)</h2>
<p>代理开启后,还需要让 Claude Code 的流量也走代理。这里提供两种配置方式:</p>
<h3 id="方式一通过-claude-code-settingsjson-配置推荐">方式一:通过 Claude Code settings.json 配置(推荐 ⭐)</h3>
<p>编辑 <code>~/.claude/settings.json</code>,在 <code>env</code> 字段中配置代理:</p>
<pre><code class="language-json">{
"env": {
"HTTPS_PROXY": "http://127.0.0.1:你的端口",
"HTTP_PROXY": "http://127.0.0.1:你的端口"
}
}
</code></pre>
<p>这种方式的好处:只对 Claude Code 生效,不影响终端其他命令。配一次永久生效,不用每次 source。</p>
<h3 id="方式二通过-shell-环境变量配置">方式二:通过 shell 环境变量配置</h3>
<p>在 <code>~/.zshrc</code>(或 <code>~/.bashrc</code>)中添加:</p>
<pre><code class="language-bash"># 将端口替换为你实际的代理端口
export https_proxy=http://127.0.0.1:你的端口
export http_proxy=http://127.0.0.1:你的端口
export all_proxy=socks5://127.0.0.1:你的端口
</code></pre>
<p>保存后执行 <code>source ~/.zshrc</code> 生效。这种方式对终端所有命令都生效。</p>
<h3 id="如何确认代理端口">如何确认代理端口?</h3>
<p>在终端执行:</p>
<pre><code class="language-bash"># macOS 查看系统代理设置
scutil --proxy | grep -E "HTTPPort|SOCKSPort"
# 或者查看代理进程监听的端口
lsof -i -P | grep LISTEN | grep -E "7890|1087|1080|8080|13659"
</code></pre>
<h3 id="验证代理是否生效">验证代理是否生效 ✅</h3>
<pre><code class="language-bash">curl -s https://ipinfo.io/json | python3 -m json.tool
</code></pre>
<blockquote>
<p>如果使用 方式一 配置,只能在 claude 命令输入框里输入检测,如果是方式二任意命令行工具或者访问 <a href="https://whatismyipaddress.com/">https://whatismyipaddress.com/</a>都可以</p>
</blockquote>
<p>确认 <code>city</code> 和 <code>country</code> 是代理地区(比如美国)就对了 🎉</p>
<p>⚠️ 核心原则:<strong>注册、购买、登录、日常使用,全程保持同一个代理</strong>。<br>
IP 频繁变动是封号的头号原因 ☠️</p>
<hr>
<h1 id="三-账号注册">三、账号注册 📝</h1>
<h2 id="31-注册前准备清单">3.1 注册前准备清单</h2>
<ul>
<li>✅ 代理已开启,节点在 USA</li>
<li>✅ 一个可用的邮箱(Gmail 推荐)</li>
<li>✅ 海外手机号用于接收验证短信(下面教你怎么搞 👇)</li>
</ul>
<h2 id="32-用-hero-sms-接收验证短信">3.2 用 Hero SMS 接收验证短信</h2>
<p>Claude 注册需要海外手机号验证,国内号码不行 🙅<br>
推荐使用接码平台 Hero SMS:</p>
<ol>
<li>访问 <a href="https://hero-sms.com/cn/services">https://hero-sms.com/cn/services</a></li>
<li>注册账号并充值(支持支付宝 💰)</li>
<li>在服务列表搜索 "Claude" 或 "Anthropic"</li>
<li>选择国家:推荐 🇺🇸 美国 或 🇬🇧 英国</li>
<li>获取临时号码 → 填到 Claude 注册页 → 回 Hero SMS 查看验证码 → 搞定! 🎉</li>
</ol>
<figure data-type="image" tabindex="1"><img src="https://hbuecx.com/post-images/1776435226570.png" alt="" loading="lazy"></figure>
<p>如果出现这种情况,可能是这类号码都被封禁了,可以尝试切换成 🇧🇷巴西 或者 🇸🇬新加坡 的号码。</p>
<h2 id="33-完整注册流程">3.3 完整注册流程</h2>
<ol>
<li>访问 <a href="https://claude.ai">https://claude.ai</a>(确保代理已开)</li>
<li>点击 Sign Up</li>
<li>用 Google 账号或邮箱注册</li>
<li>手机号验证 → 用 Hero SMS 的临时号码</li>
<li>输入验证码,注册完成 ✅</li>
</ol>
<blockquote>
<p>💡 注册完成后建议立即绑定邮箱和设置密码。接码平台号码是临时的,但注册后不需要再次验证,放心~</p>
</blockquote>
<p>如果注册时遇到了此类问题:</p>
<blockquote>
<p>Unfortunately, Claude is not available to new users right now. We’re working hard to expand our availability soon.</p>
</blockquote>
<p>Claude 可能批量把一些邮箱加入了黑名单,尝试更换你的邮箱,建议使用gmail ,就可以跳过这个拦截了。</p>
<hr>
<h1 id="四-订阅购买">四、订阅购买 💳</h1>
<h2 id="41-为什么通过应用商店买">4.1 为什么通过应用商店买?</h2>
<p>国内信用卡直接在官网付款基本会被拒 🚫<br>
需要通过 Google Play 或 Apple Store 的美区账号订阅。</p>
<p>应用商店购买虽然贵一点,但有一个重要优势:</p>
<table>
<thead>
<tr>
<th></th>
<th>官网直购</th>
<th>应用商店购买</th>
</tr>
</thead>
<tbody>
<tr>
<td>支付方式</td>
<td>需要海外信用卡</td>
<td>Gift Card / 信用卡均可</td>
</tr>
<tr>
<td>被封后退款</td>
<td>基本无望 😢</td>
<td>大概率可以申请到退款 🙏</td>
</tr>
</tbody>
</table>
<p>⚠️ 关于退款的说明:通过 Google Play / Apple Store 申请退款属于平台标准退款流程,根据个人经验和社区反馈,大概率能退款成功,但不能 100% 保证。退款结果取决于平台审核,具体以实际申请结果为准。相比之下,官网直购被封后退款的可能性要低得多。多花的 $25~$50 可以理解为降低封号经济损失的风险成本。</p>
<h2 id="42-各套餐应用商店价格">4.2 各套餐应用商店价格</h2>
<table>
<thead>
<tr>
<th>套餐</th>
<th>官网</th>
<th>应用商店</th>
<th>差价</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pro</td>
<td>$20/月</td>
<td>$20/月</td>
<td>无</td>
</tr>
<tr>
<td><strong>Max 5x</strong> ⭐</td>
<td>$100/月</td>
<td>$125/月</td>
<td>+$25</td>
</tr>
<tr>
<td>Max 20x</td>
<td>$200/月</td>
<td>$250/月</td>
<td>+$50</td>
</tr>
</tbody>
</table>
<h2 id="43-方案一google-play-美区推荐">4.3 方案一:Google Play 美区(推荐 👍)</h2>
<ol>
<li>准备美区 Google 账号(注册时地区选美国)</li>
<li>在 Google Play 搜索 "Claude" by Anthropic,下载</li>
<li>添加支付方式:购买 Google Play Gift Card / 绑定信用卡</li>
<li>在 App 内订阅 Max 5x 🎉</li>
</ol>
<h2 id="44-方案二apple-store-美区">4.4 方案二:Apple Store 美区</h2>
<ol>
<li>准备美区 Apple ID(地区选美国,地址用免税州如 Oregon)</li>
<li>在 App Store 搜索 "Claude",下载</li>
<li>购买 Apple Gift Card / 信用卡支付</li>
<li>在 App 内订阅 Max 5x</li>
</ol>
<h2 id="45-关于支付方式gift-card-vs-信用卡">4.5 关于支付方式:Gift Card vs 信用卡</h2>
<p>两种都 OK:</p>
<ul>
<li>Gift Card 🎫:淘宝等平台即可购买,门槛最低</li>
<li>信用卡 💳:有 Visa/Mastercard 等国际卡可以直接绑定</li>
</ul>
<blockquote>
<p>国内发的visa好像不能绑定美区ID(我这里试了几个都失败了),走礼品卡方式比较靠谱。</p>
<p>然后美国部分州是收税的,可能买一个20刀的月订阅,账户余额要在22刀才能完成订阅,不然会提示余额不足。</p>
<p>也有的州不收税,看你的美区ID注册地址。</p>
</blockquote>
<h2 id="46-防封要点">4.6 防封要点</h2>
<ul>
<li>🔒 全程同一代理:注册、购买、使用保持同一个 USA 节点</li>
<li>🚫 不要频繁换区:今天美国明天日本是封号最快的方式 💀</li>
<li>✅ 保持活跃:订阅后正常使用,不要注册后闲置</li>
</ul>
<h2 id="47-同样的方式也能订阅-chatgpt">4.7 同样的方式也能订阅 ChatGPT</h2>
<p>上述流程(美区账号 + Gift Card + App 内订阅)同样适用于 ChatGPT Plus / Pro:</p>
<ul>
<li>操作完全一样,一套流程搞定两个 ✌️</li>
<li>ChatGPT 风控比 Claude 宽松很多,被封概率更低</li>
</ul>
<hr>
<h1 id="五-claude-code-安装与使用-️">五、Claude Code 安装与使用 🛠️</h1>
<h2 id="51-安装">5.1 安装</h2>
<pre><code class="language-bash"># npm 全局安装
npm install -g @anthropic-ai/claude-code
# 验证
claude --version
</code></pre>
<h2 id="52-登录️-关键步骤">5.2 登录(⚠️ 关键步骤)</h2>
<pre><code class="language-bash"># ❗ 如果之前用过 API Key 方式,必须先登出
claude logout
# 用官方订阅账号登录
claude login
# 浏览器会弹出 OAuth 授权页面,确认即可
</code></pre>
<p>⚠️ 重要:之前用 API Key(ANTHROPIC_API_KEY)的同学,<strong>必须先 <code>claude logout</code></strong>。<br>
否则 Claude Code 会继续走 API 扣费,而不是用你的订阅额度,白花钱 💸</p>
<h2 id="53-项目配置claudemd">5.3 项目配置:CLAUDE.md</h2>
<p>在项目根目录创建 <code>CLAUDE.md</code>,让 Claude 了解你的项目约定:</p>
<pre><code class="language-markdown"># Project Guidelines
- 技术栈:TypeScript + React
- 测试:Jest
- 风格:遵循 .eslintrc
- 提交:Conventional Commits
</code></pre>
<p>每次启动 Claude Code 会自动读取,不用重复交代背景~</p>
<h2 id="54-官方订阅独享功能实操">5.4 官方订阅独享功能实操</h2>
<p>这些是买了官方订阅才能用的能力,中转 API 统统没有 😎</p>
<h3 id="websearch-联网搜索">🔍 WebSearch — 联网搜索</h3>
<p>不需要额外配置,直接问就行:</p>
<ul>
<li>“帮我搜一下 React 19 的 useOptimistic 最新用法”</li>
<li>“这个报错在 GitHub Issues 里有没有人遇到过”</li>
</ul>
<p>Claude 会自动联网搜索并整合结果到回答中,再也不用 Claude ↔ 浏览器来回切了 🎉</p>
<h3 id="chrome-浏览器控制">🌐 Chrome 浏览器控制</h3>
<pre><code class="language-bash"># 启动时加 --chrome 参数
claude --chrome
# 或者在会话内输入 /chrome 永久开启
</code></pre>
<p>开启后 Claude 可以:打开网页、点击按钮、填写表单、读取控制台日志、监控网络请求、录制浏览器操作 GIF。前端同学的调试神器 🦸♂️</p>
<blockquote>
<p>💡 需要先安装 Claude in Chrome 扩展。Claude 会共享你的浏览器登录状态,遇到登录页或验证码会暂停让你手动处理。</p>
</blockquote>
<h3 id="remote-control-手机遥控max-专属">📱 Remote Control — 手机遥控(Max 专属)</h3>
<pre><code class="language-bash"># 在会话中执行
claude remote-control
# 或者简写
/rc
</code></pre>
<p>会生成一个二维码,手机扫码即可远程控制当前 Claude Code 会话。适合以下场景:</p>
<ul>
<li>🏢 在工位起了个大任务,去会议室开会也能用手机盯着进度</li>
<li>🛋️ 下班前让 Claude 跑个重构,回家躺沙发上用手机审批改动</li>
<li>📊 同时监控多个 Claude 会话的状态</li>
</ul>
<p>笔记本合盖 / 断网后会自动重连(10 分钟内),非常省心。</p>
<h2 id="55-日常使用技巧">5.5 日常使用技巧</h2>
<ul>
<li>提供充分上下文 — 别说“修个 bug”,要说“src/pages/Home.tsx 用户登录后白屏,报错 xxx” 🎯</li>
<li>先理解再动手 — 复杂任务分两步:先让 Claude 读代码理解架构,再提需求 🧠</li>
<li>善用 Plan Mode — 多文件大改动前,让 Claude 先出方案你审核 📋</li>
<li><code>/commit</code> 自动提交 — 写完代码直接说“提交”,自动生成规范的 commit message ✍️</li>
</ul>
<h2 id="56-推荐配套插件">5.6 推荐配套插件</h2>
<h3 id="claude-hud-实时状态面板强烈推荐">⭐ Claude HUD — 实时状态面板(强烈推荐!)</h3>
<p>GitHub: jarrodwatts/claude-hud(1.8k+ Stars)</p>
<p>在终端底部实时显示:上下文用量、额度消耗百分比、工具活动、子 Agent 追踪、任务进度。装了之后感觉从“盲开”变成“有仪表盘” 🏎️💨</p>
<pre><code class="language-bash">/plugin marketplace add jarrodwatts/claude-code
/plugin install claude-hud
/claude-hud:setup
</code></pre>
<p>三条命令搞定,装完立即生效!</p>
<h3 id="其他值得关注的插件">其他值得关注的插件</h3>
<table>
<thead>
<tr>
<th>插件</th>
<th>用途</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Claude-Mem</td>
<td>长期记忆</td>
<td>跨会话保持上下文和偏好</td>
</tr>
<tr>
<td>Local-Review</td>
<td>代码审查</td>
<td>提交前多 Agent 并行审查 diff</td>
</tr>
<tr>
<td>Superpowers</td>
<td>结构化工作流</td>
<td>TDD、Debug、Review 等流程</td>
</tr>
<tr>
<td>Chrome DevTools MCP</td>
<td>浏览器调试</td>
<td>检查网络请求、控制台报错</td>
</tr>
</tbody>
</table>
<p>💡 更多插件看这里 👉 awesome-claude-code-plugins。建议从 2~3 个开始,按需扩展。</p>
<h2 id="57-注意事项">5.7 注意事项</h2>
<table>
<thead>
<tr>
<th></th>
<th>注意事项</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>🔌</td>
<td>代理常开</td>
<td>每次使用前确认 USA 节点在线</td>
</tr>
<tr>
<td>🔐</td>
<td>敏感信息</td>
<td>不要让 Claude 处理密码、密钥等文件</td>
</tr>
<tr>
<td>🔴</td>
<td>代码合规</td>
<td>涉及核心业务/敏感仓库严禁使用外部模型!</td>
</tr>
<tr>
<td>💾</td>
<td>及时保存</td>
<td>重要修改后立即 git commit</td>
</tr>
<tr>
<td>🌐</td>
<td>网络波动</td>
<td>响应中断可以继续上一个对话</td>
</tr>
</tbody>
</table>
<hr>
<h1 id="六-常见问题">六、常见问题 ❓</h1>
<p><strong>Q: 代理开了还是连不上?</strong><br>
A: 排查三步:① 确认 USA 节点 ② <code>echo $https_proxy</code> 或查 <code>~/.claude/settings.json</code> ③ <code>curl ipinfo.io</code> 确认出口 IP</p>
<p><strong>Q: 被封了怎么办? 😰</strong><br>
A: 如果是通过应用商店订阅的,可以尝试去 Google Play / Apple Store 申请退款,根据经验大概率能成功,但不保证。然后换邮箱重新注册,保持稳定的美国 IP 重新订阅。</p>
<p><strong>Q: 之前用 API Key,怎么切到订阅?</strong><br>
A: <code>claude logout</code> → <code>claude login</code>,按提示授权。不 logout 会继续走 API 计费 💸</p>
<blockquote>
<p>请先关掉所有claude相关Terminal窗口,重开再继续执行。</p>
</blockquote>
<p><strong>Q: 阿里云/火山方舟 Coding Plan 和 Claude 官方订阅选哪个?</strong><br>
A: Coding Plan 价格低、国内直连、多模型可选,适合预算敏感或不想折腾代理的同学。Claude 官方胜在模型能力天花板和独占功能(WebSearch/Chrome/RC)。两者不冲突,可以先用 Coding Plan 首月优惠试试,觉得需要更强能力再上 Claude 官方。</p>
<p><strong>Q: 智谱 GLM-5 不是说逼近 Claude 了?</strong><br>
A: 性能确实提升大,但涨价 30%+,Max 要 469 元/月。和 Claude Max 5x 比,价格差距缩小了但能力和生态仍有差距。</p>
<p><strong>Q: 额度用完了怎么办?</strong><br>
A: 等 5 小时窗口重置 ⏰ 或开启 Extra Usage(按 API 价格按量续费)。合理拆分任务到多个窗口期。</p>
<p><strong>Q: Chrome 功能为什么连不上?</strong><br>
A: 确认:① 安装了 Claude in Chrome 扩展 ② Claude Code 是最新版 ③ 重启 Chrome 后重试。注意 Chrome 控制要求 Claude Code 和 Chrome 在同一台机器上。</p>
<hr>
<h1 id="附录openai-codex-代理配置指南">附录:OpenAI Codex 代理配置指南 🔧</h1>
<p>OpenAI Codex 同样需要代理才能在国内正常使用。Codex 有两种使用形态,代理配置方式完全不同,这里分别说明。</p>
<h2 id="cli-工具代理配置">CLI 工具代理配置</h2>
<p>Codex CLI 是终端命令行工具,它的进程环境变量由启动它的 shell 决定。<br>
直接在 <code>~/.zshrc</code> 里 <code>export HTTPS_PROXY</code> 会对所有终端命令生效,如果你只想对 <code>codex</code> 命令单独走代理、不影响其他命令,可以用 shell 函数封装。</p>
<h3 id="配置步骤">配置步骤</h3>
<p>在 <code>~/.zshrc</code> 中添加:</p>
<pre><code class="language-bash"># codex CLI 自动走代理(只对 codex 命令生效)
function codex() {
HTTPS_PROXY=http://127.0.0.1:你的端口 HTTP_PROXY=http://127.0.0.1:你的端口 command codex "$@"
}
</code></pre>
<p>保存后执行 <code>source ~/.zshrc</code> 使配置生效。</p>
<h3 id="原理说明">原理说明</h3>
<p>这里用一个同名 shell 函数“覆盖”了系统中原始的 codex 可执行文件。每次在终端输入 <code>codex</code> 时,shell 会优先执行这个函数:</p>
<ul>
<li>函数内的 <code>HTTPS_PROXY=... HTTP_PROXY=...</code> 写在命令前,仅作为该进程的临时环境变量注入,不会影响当前 shell 会话或其他命令;</li>
<li><code>command codex "$@"</code> 中的 <code>command</code> 关键字是显式调用原始二进制文件(绕过函数本身),<code>"$@"</code> 将所有参数原样透传,确保正常使用不受影响。</li>
</ul>
<h2 id="native-app-代理配置">Native App 代理配置</h2>
<p>Codex Native App 是 macOS 桌面应用,通常从 Dock、Launchpad 或 Spotlight 启动。<br>
这类 GUI 应用不是由终端 shell 派生的,因此完全不会继承 <code>~/.zshrc</code> 中的任何环境变量,上面的 shell 函数对它无效。</p>
<p>需要借助 macOS 原生的 LaunchAgent 机制来解决这个问题。</p>
<h3 id="原理说明-2">原理说明</h3>
<p>macOS 上所有进程(包括 GUI 应用)都由系统的 launchd 进程管理。<br>
<code>launchctl setenv</code> 命令可以向 launchd 的全局环境中写入键值对,这些键值对会被所有由 launchd 派生的子进程继承——包括从 Dock 点开的任何 Native App。</p>
<p>LaunchAgent 是一种用户级别的后台任务配置,存放在 <code>~/Library/LaunchAgents/</code>,登录时由 launchd 自动加载执行。<br>
把 <code>launchctl setenv</code> 写进 LaunchAgent,就能实现每次登录后自动向系统注入代理环境变量,一劳永逸。</p>
<h3 id="配置步骤-2">配置步骤</h3>
<p>第一步:创建 LaunchAgent 配置文件 <code>~/Library/LaunchAgents/com.user.proxy-env.plist</code>:</p>
<pre><code class="language-xml"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>com.user.proxy-env</string>
<key>ProgramArguments</key>
<array>
<string>/bin/sh</string>
<string>-c</string>
<string>launchctl setenv HTTPS_PROXY http://127.0.0.1:你的端口 &amp;&amp; launchctl setenv HTTP_PROXY http://127.0.0.1:你的端口</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>
</code></pre>
<p>第二步:加载 LaunchAgent,让它立即执行(后续重启后会自动加载,无需重复操作):</p>
<pre><code class="language-bash">launchctl load ~/Library/LaunchAgents/com.user.proxy-env.plist
</code></pre>
<p>第三步:验证环境变量是否已注入到 launchd:</p>
<pre><code class="language-bash">launchctl getenv HTTPS_PROXY
# 输出 http://127.0.0.1:你的端口 则说明注入成功
</code></pre>
<p>第四步:重启 Codex App。已经在运行的 App 不会感知到新注入的环境变量,必须重新启动才能继承。</p>
<p>⚠️ 注意:<code>launchctl setenv</code> 注入的变量对所有 GUI 应用生效。如果某个应用自带代理设置且不需要走代理,可在该应用内部单独关闭,不受此影响。</p>
<h2 id="三种方案对比">三种方案对比</h2>
<table>
<thead>
<tr>
<th>场景</th>
<th>配置方式</th>
<th>作用范围</th>
<th>是否持久</th>
</tr>
</thead>
<tbody>
<tr>
<td>Codex CLI</td>
<td>~/.zshrc shell 函数封装</td>
<td>仅 codex 命令</td>
<td>永久</td>
</tr>
<tr>
<td>Codex Native App</td>
<td>LaunchAgent + launchctl setenv</td>
<td>所有 GUI 应用</td>
<td>登录后自动生效</td>
</tr>
<tr>
<td>Claude Code CLI</td>
<td>~/.claude/settings.json 的 env 字段</td>
<td>仅 Claude Code</td>
<td>永久(推荐)</td>
</tr>
</tbody>
</table>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Gridea 上手教程]]></title>
<id>https://hbuecx.com/post/gridea-shang-shou-jiao-cheng/</id>
<link href="https://hbuecx.com/post/gridea-shang-shou-jiao-cheng/">
</link>
<updated>2026-02-11T14:00:01.000Z</updated>
<summary type="html"><![CDATA[<p><a href="https://zhuanlan.zhihu.com/p/71681116">Gridea 上手教程</a></p>
]]></summary>
<content type="html"><![CDATA[<p><a href="https://zhuanlan.zhihu.com/p/71681116">Gridea 上手教程</a></p>
<!-- more -->
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[装饰器的妙用]]></title>
<id>https://hbuecx.com/post/zhuang-shi-qi-de-miao-yong/</id>
<link href="https://hbuecx.com/post/zhuang-shi-qi-de-miao-yong/">
</link>
<updated>2024-03-18T14:38:08.000Z</updated>
<summary type="html"><![CDATA[<h2 id="前言">前言</h2>
<p>最近在做一个新项目,在需求来临之前需要先把技术框架搭建起来,跟我同组的老大哥给我一个代码仓库地址,并让我梳理出来这个仓库的技术框架和实现思路,然后复刻一个。<br>
不就是抄🐴,这还不简单。</p>
]]></summary>
<content type="html"><![CDATA[<h2 id="前言">前言</h2>
<p>最近在做一个新项目,在需求来临之前需要先把技术框架搭建起来,跟我同组的老大哥给我一个代码仓库地址,并让我梳理出来这个仓库的技术框架和实现思路,然后复刻一个。<br>
不就是抄🐴,这还不简单。</p>
<!-- more -->
<h2 id="装饰器">装饰器</h2>
<p>我大概梳理了这个参考仓库的思路,主要是使用了插件化的思路。而在实现插件化过程中的注册插件时,妙用了装饰器来完成:</p>
<ol>
<li>首先使用了单例模式,在一个文件中导出了用于存储插件的变量:</li>
</ol>
<pre><code class="language-ts">export const registry: Record<string, IPluginConstructor<any>> = {};
</code></pre>
<ol start="2">
<li>定义了一个向这个变量上挂载插件的函数:</li>
</ol>
<pre><code class="language-ts">export const regPluginHoc = ({ name }: { name: string }) =>
(target: any) => {
if (registry[name] && registry[name].toString() !== target.toString()) {
logger.warn({
msg: `插件 ${name} 已存在,请重新命名`,
});
return;
}
registry[name] = target;
};
</code></pre>
<p>从这个编写方式,你很容易就可以看出来这是一个装饰器函数。<br>
3. 然后我们把这个装饰器用到我们的插件上:</p>
<pre><code class="language-ts">@regPluginHoc({ name: 'init' })
export class InitPlugin extends Plugin<{}> {
// ……
}
</code></pre>
<p>让我们回溯一下,这个装饰器会把这个插件的构造函数挂载到 register 变量中。你必须知道的是,装饰器的运行是在编译时完成的,而不是运行时。因此,理论上在项目启动后,你就可以在项目入口文件中打印 register 变量,并且得到其上挂载的插件构造器对象,然后通过 new 生成一个插件实例。<br>
但实际上,到这里并没有结束。因为即使装饰器是编译时执行的,但也首先要保证,项目在编译时可以索引到这个插件文件,也就是说我们必须在主入口的直接或者间接依赖文件中导入这个插件文件。<br>
4. 导入这个插件文件</p>
<pre><code class="language-ts">import '../plugins/initPlugin';
</code></pre>
<p>是的,只需要导入,在编译时可以索引到该文件即可,无需重命名任何实例。<br>
5. 然后在启动后的项目里,可以直接打印 register 这个变量:</p>
<pre><code class="language-ts">console.log(register);
</code></pre>
<h2 id="备注">备注</h2>
<p>至今为止,装饰器仍然是一个实验性的能力,要让装饰器真正在我们项目中生效不报错,我们需要配置一下 tsconfig.ts 文件,将 experimentalDecorators 属性设置为 true。</p>
<pre><code class="language-json">{
"compilerOptions": {
"experimentalDecorators": true,
}
}
</code></pre>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[铠甲与牢笼]]></title>
<id>https://hbuecx.com/post/kai-jia-yu-lao-long/</id>
<link href="https://hbuecx.com/post/kai-jia-yu-lao-long/">
</link>
<updated>2024-02-25T15:40:58.000Z</updated>
<summary type="html"><![CDATA[<p>某些保护我的东西,可能也在束缚我。</p>
]]></summary>
<content type="html"><![CDATA[<p>某些保护我的东西,可能也在束缚我。</p>
<!-- more -->
<p>我最大的问题可能是我没有心,不懂得去关注身边的人。现在这个自我封闭的我似乎并不是我理想状态下的最优的我,我觉得最好的我应该是一个开朗,懂得关心别人的人。或许我应该好好休息一段时间,多出去走走,以便能遇到更多人,不带负担的与陌生人搭讪,攀谈和交流,从而学会一些我从未习得的东西。</p>
<p>眼下的我,把自己关在一个封闭的自我适应的空间里,不敢随意的踏出一步,也就是大家常说的舒适圈。但我却并不这么想,我从心底里并不认为这是个令我舒适的地方,而是一个迫于外界环境和自身能力不匹配的情况下而衍生出的一个让自己感到安全的领域,所以我更愿意把这个范围叫做安全圈,而不是舒适圈,因为还有很多事情我想做却没有付出行动,仅仅从这一点就可以感觉到我没有达到理想中的自由:想做什么就做什么,不想做什么就不做什么。没有自由也就谈不上舒适。</p>
<p>我的脑子里始终有很多的小人在斗争,做还是不做,做了好的结果是什么,坏的结果是什么?这些在过往经历的磨砺中所形成的缜密的思维框架,像铠甲一样时时刻刻在保护我的安全,但终究不是所有的问题都能用逻辑思维来解决,甚至于我们一生中大多数问题都不能仅凭逻辑思维来解决,那么这种根深蒂固的逻辑框架决定行为的模式从另一种程度上讲这也是一个深深把我囚禁的牢笼,令我的一切行为都无法挣脱它的束缚,我也无法踏足和感受这铠甲以外的领域。</p>
<p>但在眼下这个充斥着人情世故的工作环境中,我想我很难脱下铠甲,繁多的工作也让我没有精力在不褪下铠甲的情况下,还能运动自如。或许从解决方案上讲,我应该找一段时间,脱离工作的环境,回归到自然社会中,真正的让自己空闲和冷静下来,或许在那时我才有足够精神和毅力破茧而出,去做一些以往我一直想做却从来没做过的事情。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[如何调试旧版本谷歌浏览器]]></title>
<id>https://hbuecx.com/post/ru-he-yong-diao-shi-jiu-ban-ben-gu-ge-liu-lan-qi/</id>
<link href="https://hbuecx.com/post/ru-he-yong-diao-shi-jiu-ban-ben-gu-ge-liu-lan-qi/">
</link>
<updated>2023-12-28T15:32:05.000Z</updated>
<summary type="html"><![CDATA[<p>今天遇到一个问题,部署出去的网站在客户的电脑上打开之后,很多样式都丢失了,导致页面出现大批量的错位,无法正常使用。</p>
]]></summary>
<content type="html"><![CDATA[<p>今天遇到一个问题,部署出去的网站在客户的电脑上打开之后,很多样式都丢失了,导致页面出现大批量的错位,无法正常使用。</p>
<!-- more -->
<p>询问了一下,客户的浏览器用的谷歌浏览器,但是版本还是76(这个是2019年发布的版本),初步怀疑是浏览器版本过低的原因。</p>
<p>于是提醒用户更新浏览器,然后我也想验证一下是不是浏览器版本过低导致的问题,所以我就准备找旧版本的浏览器调试一下。</p>
<p>先找到了可以现在老版本谷歌浏览器的网址:</p>
<ol>
<li><a href="https://www.slimjet.com/chrome/google-chrome-old-version.php">www.slimjet.com</a>.</li>
<li><a href="https://www.chromedownloads.net/chrome64osx/">www.chromedownloads.net</a></li>
</ol>
<p>到这里下载了老版本谷歌浏览器,软件安装也成功了。安装成功后,应用列表里会多一个 <code>Google Chrome 2</code> ,当我想打开这个软件的时候,怎么弄都打不开。</p>
<p>查了相关资料找到了解决方案,需要在终端中执行如下命令来启动老版本浏览器:</p>
<pre><code class="language-shell">/Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome --user-data-dir=%HOME/chrome-profile --chrome-version=61.0.3163.79
</code></pre>
<ul>
<li><code>/Applications/Google\ Chrome\ 2.app/Contents/MacOS/Google\ Chrome</code>: 指定要打开的应用程序在系统中的位置,可以把 Google Chrome 2 拖到终端里查看路径</li>
<li><code>--user-data-dir=%HOME/chrome-profile</code>: 指定用户数据存放的路径</li>
<li><code>--chrome-version=61.0.3163.79</code>: 指定 Chrome 版本</li>
</ul>
<p>一般来说,我们只要修改这个命令中的 版本号 就可以直接运行了。</p>
<p>这种启动的浏览器存在一个小问题,就是我们在当前浏览器上的各种数据都不会同步到通过命令启动的浏览器上,需要重新登陆一遍。</p>
<p>回到原始问题,当我用老版本浏览器来访问我们的产品时,确实发生了样式布局错乱的问题,由此确定,确实是浏览器版本导致的样式问题。</p>
<p>所以我们给出的解决方案是让用户把浏览器升级到最新版本,同时,给出了一个建议最低版本是 v88(该版本建议源自公司内同类产品建议)。</p>
<p>原文:</p>
<iframe width="100%" height="600px" src="https://www.baobangdong.cn/running-an-earlier-version-of-chrome-on-a-mac/" />]]></content>
</entry>
<entry>
<title type="html"><![CDATA[调试页面循环重定向问题]]></title>
<id>https://hbuecx.com/post/diao-shi-ye-mian-xun-huan-chong-ding-xiang-wen-ti/</id>
<link href="https://hbuecx.com/post/diao-shi-ye-mian-xun-huan-chong-ding-xiang-wen-ti/">
</link>
<updated>2023-01-12T13:37:09.000Z</updated>
<content type="html"><![CDATA[<p>前端页面出现循环重定向问题时,由于页面不断地刷新,所以打开控制台查看接口,根本看不到接口response里的数据,难以调试。</p>
<p>如何解决呢?</p>
<h2 id="解决方案">解决方案</h2>
<ol>
<li>开一个新窗口,打开控制台</li>
<li>切换到 <code>Sources</code> 面板,在面板右侧找到 <code>Event Listener Breakpoints</code> ,勾选 <code>load</code> 监听器。</li>
<li>然后再在当前窗口访问目标网页URL,这样页面在跳转之前会停留在当前页面,不会跳走,就可以尝试调试了。<br>
<img src="https://hbuecx.com/post-images/1673531064293.jpg" alt="" loading="lazy"></li>
<li>如果你知道重定向的代码的根源在哪,那么你可以在 <code>Sources</code> 面板的左面板找包含重定向代码的 JS 文件,去文件里搜索重定向代码,然后给它打上断点。然后一步步溯源就可以解决问题。<br>
<img src="https://hbuecx.com/post-images/1673531350213.jpg" alt="" loading="lazy"></li>
</ol>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[租房的哲学]]></title>
<id>https://hbuecx.com/post/zu-fang-de-zhe-xue/</id>
<link href="https://hbuecx.com/post/zu-fang-de-zhe-xue/">
</link>
<updated>2022-12-11T14:20:12.000Z</updated>
<summary type="html"><![CDATA[<p>租房三件套:租客、中介、房东。</p>
]]></summary>
<content type="html"><![CDATA[<p>租房三件套:租客、中介、房东。</p>
<!-- more -->
<h2 id="租客的哲学">租客的哲学</h2>
<p>租客关注是否合适。</p>
<h3 id="讲价">讲价</h3>
<p>作为租客,找到合适的房子后,最重要的事情是讲价。一般来说,租客都可以在出租房的报价上砍下来两百到三百不等的价格,自如这种平台型除外。</p>
<h2 id="中介的哲学">中介的哲学</h2>
<p>中介关注能否成交。</p>
<p>在租房交易中,中介起到了非常重要的意义。而他们也是最乐意看到这单交易成交的人,所以他总是想方设法在租客和房东中间寻找一种平衡。为此,他们有时可能需要使用一些语言艺术。</p>
<h3 id="18号-or-1号">18号 or 1号</h3>
<p>我准备签合同那天是 7 号,而我当前房子的到期时间是 18 号,所以我期望可以晚几天签合同或者将合同上的时间延几天。</p>
<p>为了让我的延期要求看起来更加合理,中介与出租房的在沟通时说我的房子到期时间是下个月 1 号,以一种夸张的方式来说服出租房延长时间。</p>
<p>最终确实出租房同意了延期 6 天,即从 13 号开始计算起租日。一般来说,起租日不会延期超过5天。</p>
<h3 id="帮公司干活-or-帮自己干活">帮公司干活 or 帮自己干活</h3>
<p>在我和中介大哥聊天的时候,我发现他们似乎是脱离平台自己做的业务,通过短暂的交流,我确认了这一点。</p>
<p>出于好奇,我询问了中介大哥关于收入高低的问题,他坦言自己跑比在公司里赚得多。另外,他在这里已经做了 5 年多,手上一百多个房东的名字,他几乎是滚瓜烂熟,这一点我还是蛮佩服他的。</p>
<h3 id="一人带看-or-两人带看">一人带看 or 两人带看</h3>
<p>我跟这个大哥出来看房两次,每次看房他都会带一个同事一起,这让我感觉有些奇怪,因为在我看来,这件事情一个人也能干得了,为什么要出动两个人呢?好像在效率上会稍显逊色一些。</p>
<p>中介大哥给了两个答案:</p>
<ol>
<li>绝大多数情况下都是两个人一起看房,要么是跟朋友一起看,要么是情侣。如果是一个人带看,一辆电瓶车坐不下,不方便;</li>
<li>既是一起做业务,也是老手带新手,传授经验。</li>
</ol>
<p>挺有意思的,如果不发问,我可能也想不到。</p>
<h2 id="房东的哲学">房东的哲学</h2>
<p>房东关注是否利益最大化。</p>
<h3 id="报价">报价</h3>
<p>这个新房东,她手上应该有上百套房产出租,成立了一个公寓品牌。所有的房源都录入在系统里,而价格也都是在她的目标价位上加价三百左右,既是给租客讲价的空间,也是保障自己的利益。</p>
<h3 id="12个月与15个月">12个月与15个月</h3>
<p>这次签约是,房东期望能够签 15 个月,至于原因倒是不难理解,12 月是一年中租房行情比较差的时候,如果我只租一年,到了明年 12 月她这个房子可能还不好租出去。可要是我租了 15 个月,就是第二年的 3 月份,一旦过了年,租房的人多了起来,加价租出去都可以。</p>
<h3 id="雇人清洁-or-自己清洁">雇人清洁 or 自己清洁</h3>
<p>晚上来签约的时候,房东自己带了清洁工具来给房间做清洁。对这件事起初我还是有些不理解的,因为手上握有这么多房产,应该不差钱才对,为什么还要自己做保洁,而不是请人来做呢?</p>
<p>房东的回答是自己做保洁会让租客感觉上会更亲切一些,拉进距离。这倒是合理的,也是比较有趣的人际交往的知识。</p>
<h2 id="我是尾巴">我是尾巴</h2>
<p>总之,我的租房合同签了。虽然不是很满意,凑合凑合还行吧。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[window.onstorage 跨标签页通信]]></title>
<id>https://hbuecx.com/post/windowonstorage-kua-biao-qian-ye-tong-xin/</id>
<link href="https://hbuecx.com/post/windowonstorage-kua-biao-qian-ye-tong-xin/">
</link>
<updated>2022-12-05T08:08:27.000Z</updated>
<summary type="html"><![CDATA[<p>某些场景下需要完成夸标签页通信,比如,从列表页新开一个新增页面,新增完成后,需要更新列表页的数据。</p>
]]></summary>
<content type="html"><![CDATA[<p>某些场景下需要完成夸标签页通信,比如,从列表页新开一个新增页面,新增完成后,需要更新列表页的数据。</p>
<!-- more -->
<h2 id="util-封装">util 封装</h2>
<p>代码封装如下:</p>
<pre><code class="language-ts">import { v4 as uuidV4 } from 'uuid';
// 特定前缀,避免 Storage 覆盖
const prefix = '@@';
export function trigger(type: string, payload: any) {
localStorage.setItem(prefix + type, JSON.stringify({
payload,
temp: uuidV4()
}));
}
export function on(type: string, handler: (value: any) => void) {
const storageHandler = (e: StorageEvent) => {
const { key, newValue } = e;
if (key !== prefix + type) return;
try {
const payload = JSON.parse(newValue || '');
handler(payload.payload);
} catch (e) {
console.warn('storage error with key of ', key);
}
};
window.addEventListener('storage', storageHandler);
return () => {
window.removeEventListener('storage', storageHandler);
}
}
</code></pre>
<h2 id="使用">使用</h2>
<h3 id="监听">监听</h3>
<pre><code class="language-ts">// 需要注销监听时可以调用 off 函数
const off = on('a', (value) => {
console.log(value);
});
</code></pre>
<h3 id="触发">触发</h3>
<pre><code class="language-ts">trigger('a', '急急急');
</code></pre>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[绍兴乔波滑雪🏂🏻小记]]></title>
<id>https://hbuecx.com/post/qiao-bo-hua-xue-xiao-ji/</id>
<link href="https://hbuecx.com/post/qiao-bo-hua-xue-xiao-ji/">
</link>
<updated>2022-11-28T16:25:53.000Z</updated>
<content type="html"><![CDATA[<p>甜姐载着晋问、晋问女朋友、破凉和我,车上总共 5 个人。早上八点半出发,接近十点到达乔波滑雪场。</p>
<p>在咸鱼买的票,240元,官方票价266,限时 4 小时,还挺贵的。而且票价只包括雪服、雪鞋和雪板,如果需要头盔或者手套,需要自己提前买或者当场买。另外这里不提供雪仗,买都没不了,有点难受。</p>
<p>这里没有雪仗提供也是有原因的,我们去的时候,发现这里 90% 的人都在玩单板,而且很多人都是自带雪板的。对于剩下的少部分双板的玩家,可能需要牺牲掉他们的一部分利益来保全商家的利益了。</p>
<p>上一次滑雪还是两年前在北京的云佛山滑雪场,这是人生的第二次,2022年的第一次。</p>
<p>刚去的时候,直接去滑中级道,由于隔了两年,很多技巧都忘掉了,平衡感也掌握不好,所以摔了好几次。于是调整策略,在训练区联系了很多次,确定自己在练习区能做到游刃有余的时候,又重新回到了中级道。确认有效,在经过训练区的反复尝试习得的经验下,再上时就没有滑倒过。</p>
<p>滑雪结束后,由于没有做拉伸,导致第二天胳膊和屁股都酸痛得厉害。这是血与泪的教训,开始滑雪和结束滑雪时都需要做热身和拉伸,不然免不了酸痛。</p>
<figure data-type="image" tabindex="1"><img src="https://hbuecx.com/post-images/1670232801912.JPG" alt="" loading="lazy"></figure>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[关于Tech快报]]></title>
<id>https://hbuecx.com/post/guan-yu-tech-kuai-bao/</id>
<link href="https://hbuecx.com/post/guan-yu-tech-kuai-bao/">
</link>
<updated>2022-11-20T13:48:16.000Z</updated>
<content type="html"><![CDATA[<p>我承接了一份“额外的工作”,在工作之余,我每两周必须抽时间完成一份最新前端周刊。开始的一段时间,这份工作令我为之困扰。</p>
<h2 id="这是一件怎样的工作">这是一件怎样的工作</h2>
<ul>
<li>每次讲说,我只有5到10分钟时间,所以讲述的内容不能太多</li>
<li>内容必须与前端强关联,因为听众都是前端开发者</li>
<li>内容不能太基础,因为听众大多是骄傲的人,他们不愿意听他人给他们讲基础,因为这会玷污他们的专业性</li>
<li>内容不能太高端,太过高端的内容曲高和寡,简短的时间根本不能让他们理解一件事情</li>
<li>选题不能落后,落后的内容他们不想听</li>
<li>选题不能太前沿,他们没用过的内容他们也并不关心</li>
</ul>
<h2 id="最大的问题">最大的问题</h2>
<p>最大的问题是,除了自己部门的成员以外,其他人的偏好我并不了解,所以哪些内容应当被收录,以及如何编辑他们让我产生了困扰。</p>
<h2 id="我的预期">我的预期</h2>
<p>既能帮助自己拓展知识面,也能对周边人产生帮助,最好能获得他们的认可。</p>
<h2 id="或者是我自己把这件是将塑造得太过困难">或者,是我自己把这件是将塑造得太过困难</h2>
<p>作为前端开发者,最关心的两件事情:第一是这能否对我现阶段的工作产生帮助;第二是能否对我的职业生涯产生帮助。</p>
<p>绝大多数人只关心这两件事情,如果按照这个思路,那我需要满足这两条即可。</p>
<h2 id="他们对哪些事情感兴趣">他们对哪些事情感兴趣</h2>
<ul>
<li>
<p>React 的新提案</p>
<ul>
<li>useEvent</li>
<li>use</li>
</ul>
</li>
<li>
<p>ES features</p>
<ul>
<li>ES12 features</li>
</ul>
</li>
<li>
<p>TC39提案<br>
+<br>
+</p>
</li>
<li>
<p>拥有更高、更快、更强噱头的新框架诞生 or 重大更新</p>
<ul>
<li>solidjs</li>
<li>vite 3.0</li>
<li>Turbopack</li>
</ul>
</li>
<li>
<p>前端技术方案实现 or 原理浅析</p>
<ul>
<li>微前端技术方案实现</li>
<li>eslint原理</li>
<li>无界微前端方案</li>
<li>ShadowRealm:沙箱环境</li>
</ul>
</li>
<li>
<p>内部开源工具实践</p>
<ul>
<li>umijs升级</li>
<li>雨燕3.0发布</li>
<li>bigfish 4发布</li>
</ul>
</li>
</ul>
<h2 id="他们对哪些事情不感兴趣">他们对哪些事情不感兴趣</h2>
<ul>
<li>前端行业资讯
<ul>
<li>字节1024kb小游戏大赛</li>
</ul>
</li>
<li>前端行业报告
<ul>
<li>开发者调查报告</li>
<li>前端生态趋势报告</li>
</ul>
</li>
<li>与实践无关的框架更新
<ul>
<li>Flutter 3.0发布</li>
<li>Astro 1.0</li>
</ul>
</li>
<li>“基础”的前端知识
<ul>
<li>你不知道的HTML属性</li>
<li>git常见问题使用方法</li>
<li>eslint配置方式</li>
<li>react csr ssr渲染模式</li>
</ul>
</li>
<li>前端相关开源工具科普
<ul>
<li>用于查找内存泄漏的工具:Memlab</li>
</ul>
</li>
</ul>
<h2 id="中性内容">中性内容</h2>
<ul>
<li>网络相关
<ul>
<li>HTTP 3.0</li>
</ul>
</li>
<li>实践相关
<ul>
<li>新的npm语法</li>
</ul>
</li>
</ul>
<h2 id="感兴趣与不感兴趣的原因">感兴趣与不感兴趣的原因</h2>
<p>令他们感兴趣的是可以马上实践、将会实践或者身边人也会感兴趣并能与之交流的内容。<br>
令他们不感兴趣的他们不会去使用也不会与人交流的内容。</p>
<h2 id="像是抖音的推荐算法">像是抖音的推荐算法</h2>
<p>做完分析之后,我发现这有点像抖音的智能推荐算法,区别仅仅在于使用工具的不同,一个比另一个更灵活,一个另一个更高效。</p>
<h2 id="快报的初心与意义">快报的初心与意义</h2>
<p>真正的根据喜好去投喂是对的吗,我想是不对的。就像许多偏食的人由于营养不均衡导致身体素质差一样,太过偏科也不是一个好习惯。</p>
<p>《人类简史》中曾谈到智人(现代人类的祖先)往往拥有多种生存技能,即使单独一个人也能完成生活中所需的一切。而现在的社会中,现在人类太过于原子化,每天做着同一份工作,技能逐渐专业化,也逐渐单调化,一旦社会体系崩溃,大多数人都将随之灭亡。就像疫情期间,很多被困在家的人不会做饭只能煮泡面一样,差不多是一个道理。</p>
<h2 id="自我解放">自我解放</h2>
<p>当我把这些内容进行分类整理之后,我的精神压力减轻了不少,因为经过统计、分析和筛选,我的目标更清晰了。</p>
<p>我大致理清了听众的喜好,但我不应该让听众的偏好干扰我自己的学习计划。区分开两者,但又不是完全的隔离,要用两条腿走路。</p>
<h2 id="自我反思">自我反思</h2>
<p>似乎也只有在筛选文章这件事情上,能让我长时间的去翻看新文章,但是这中带着任务的紧迫感,会让我的心稍稍浮躁,为了追求结果而浅尝辄止。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[良渚遗址公园一游]]></title>
<id>https://hbuecx.com/post/liang-zhu-yi-zhi-gong-yuan-yi-you/</id>
<link href="https://hbuecx.com/post/liang-zhu-yi-zhi-gong-yuan-yi-you/">
</link>
<updated>2022-11-18T15:08:51.000Z</updated>
<summary type="html"><![CDATA[<p>第一次一个人外出游玩,以前一直都不敢,也没有兴趣一个人出门,但是这次的体验告诉我,一个人游玩也可以很开心。<br>
This is first time I traveling alone.</p>
]]></summary>
<content type="html"><![CDATA[<p>第一次一个人外出游玩,以前一直都不敢,也没有兴趣一个人出门,但是这次的体验告诉我,一个人游玩也可以很开心。<br>
This is first time I traveling alone.</p>
<!-- more -->
<p>不同于与伙伴同游的交流分享之乐,独行的快乐来自于自由的灵魂。<br>
Unlink the pleasure of the talking and sharing with a partner, the plessure of being alone coming form a free soul while traveling.</p>
<p>这里很开阔,这里有花,有树,有白鸽,有梅花鹿,广袤的草原和绵长的溪流。我喜欢这里,如果时间允许,并且但我有兴致的话,我会再来这里一次。</p>
<p>我在这里帮一群学生拍了照片,有一男一女两名学生走到我面前,问我能不能帮他们拍张照,男生先开口说:“叔叔,能帮我们拍张照吗?” 女生立马纠正了他,笑着对他说到:“说什么呢!叫哥哥!” 说罢又转过头看了看我。</p>
<p>对于这样的误会我不是第一次遇见了,看来我看起来确实显老,哈哈哈哈。</p>
<p>巧合的是,在同一个地方,我正好拍了三张照片,我认为非常棒,可惜我无法形容它。</p>
<p><img src="https://hbuecx.com/post-images/1669477062122.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477078350.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477088860.jpeg" alt="" loading="lazy"></p>
<p>当然,我还拍了很多照片,我想记录下来这里美好的一切。</p>
<p><img src="https://hbuecx.com/post-images/1669477679295.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477703363.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477713850.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477726108.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477739240.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477747555.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477752767.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477758825.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477763645.jpeg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1669477770503.jpeg" alt="" loading="lazy"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[徽杭古道徒步之旅]]></title>
<id>https://hbuecx.com/post/hui-hang-gu-dao-tu-bu-zhi-lu/</id>
<link href="https://hbuecx.com/post/hui-hang-gu-dao-tu-bu-zhi-lu/">
</link>
<updated>2022-11-13T08:15:32.000Z</updated>
<summary type="html"><![CDATA[<p>周六,第一次参加徒步,全程 15 公里,虽然风景没有特别吸引人,但是不可否认,这是一段有趣的旅程。</p>
]]></summary>
<content type="html"><![CDATA[<p>周六,第一次参加徒步,全程 15 公里,虽然风景没有特别吸引人,但是不可否认,这是一段有趣的旅程。</p>
<!-- more -->
<ul>
<li>徒步之旅</li>
<li>在忘我中寻找真我</li>
<li>雷团长的智慧</li>
</ul>
<h2 id="一-徒步之旅">一、徒步之旅</h2>
<p>早上七点半从蚂蚁A空间发车,大概九点半到达徽杭古道临安的入口。而回程要比去程更久一些,要从安徽境内绕路高速,整体的路程会不少。所以我们四点半就从安徽上了车,快九点钟才回到A空间。</p>
<p>团费215(原价225,发了朋友圈减了10块钱😂)</p>
<h3 id="老太太卖拐杖">老太太卖拐杖</h3>
<p>快到终点时,我们本次徒步的领队雷团长提醒我们待会儿下车之后,会有很多老太太围上来卖给我们登山杖,到了终点会有另外一拨老太请求游客把登山杖送给她们,这样就等于游客花钱买了登山杖的使用权。如果用得上登山杖的游客,倒是没什么。而我根本不需要登山杖这种东西,不仅毫无作用,反倒是个累赘。</p>
<p>我粗略观察了一下,我所在的这个小团队应该没有人持有老太太们卖的登山杖。Everyone is strong as me.<br>
<img src="https://hbuecx.com/post-images/1668350019696.JPG" alt="" loading="lazy"></p>
<h3 id="老家的后山">老家的后山</h3>
<p>徒步刚开始时,我不得不说,这与我老家的后山没什么区别。<br>
<img src="https://hbuecx.com/post-images/1668353141273.jpg" alt="" loading="lazy"></p>
<h3 id="庆华面馆">庆华面馆</h3>
<p>在徒步的旅途中,有一家农家面馆,叫“庆华面馆”。他们家的生意非常红火,绝大部分经过这里的游客都会在这里点一碗面。<br>
<img src="https://hbuecx.com/post-images/1668353452248.jpg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668355509511.jpg" alt="" loading="lazy"></p>
<p>一碗素面的 12 元,加了鸡蛋和大排之后是 20 元。幸运的是,我有足够的钱支付后者。<br>
<img src="https://hbuecx.com/post-images/1668354324591.jpg" alt="" loading="lazy"></p>
<p>严格的说,它并不是真正意义上的面馆,做饭还是在跟我们老家一样的土灶上,烧的还是柴火。其实这就是一处农家,只不过恰好住在这个地方,又恰好这条路被开发成了旅游景点。或许,他们在建这间房子的时候,恐怕怎么也想不到有一天自己家会开上一家面馆。</p>
<p>尝过这里的面后,我得中肯的说一句,还不错。但我也不知道,是因为面好吃,还是我太饿了。</p>
<h3 id="孤独的盛开">孤独的盛开</h3>
<p>整个旅途里面,让我倾心的美景有三个,这是其中之一:孤独盛开的花。虽是最微小的景,但是最微小的往往最能打动人心。越是渺小,越是有韧性,越是坚韧越有生命力的东西就越能打动人。这两簇花如果能配上光影效果,拍摄的效果也许会更美妙。<br>
<img src="https://hbuecx.com/post-images/1668354387131.jpg" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668355336020.jpeg" alt="" loading="lazy"></p>
<h3 id="越过山丘">越过山丘</h3>
<p>第二个是长满狗尾巴草的山丘,微风从这里经过,吹得它们摇曳生姿,像是大地母亲的发丝随风飘摇。有人说男人就应该多看看山川大河,那样能开阔心胸。我想这里也不错,有山有水,还有这样一座长满狗尾巴草的山丘。<br>
<img src="https://hbuecx.com/post-images/1668348979593.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668349027972.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668349039531.JPG" alt="" loading="lazy"></p>
<h3 id="江南第一关">江南第一关</h3>
<p>第三个是江南第一关,这里的石碑记录着,这是一个邵姓人为了躲避战乱,率亲族逃离到这里的,随后建桥修路,以保证可以与外界沟通。<br>
孤独的花代表着生命力,山丘代表着宽阔的胸怀,而这里所代表的是深邃。<br>
<img src="https://hbuecx.com/post-images/1668350076597.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668355741921.jpg" alt="" loading="lazy"></p>
<h3 id="悠闲地人">悠闲地人</h3>
<p>出来景点之后,我听到一位悠闲地大哥在那里唱歌。<br>
<img src="https://hbuecx.com/post-images/1668354415342.jpg" alt="" loading="lazy"></p>
<h3 id="值得庆幸">值得庆幸</h3>
<p>在整个旅程中,最令人庆幸的是:这条路上人并不是太多。毕竟有不少的路在山地上穿梭,尘土飞扬,很多城市里生活惯了的人是接受不了的,即使这在农村很平常。<br>
<img src="https://hbuecx.com/post-images/1668355809713.JPG" alt="" loading="lazy"></p>
<h3 id="晚餐">晚餐</h3>
<figure data-type="image" tabindex="1"><img src="https://hbuecx.com/post-images/1668354425692.jpg" alt="" loading="lazy"></figure>
<h2 id="二-在忘我中寻找真我">二、在忘我中寻找真我</h2>
<p>这次旅程,我最大的一点收获是我发现在这次旅程中,我并没有显得很内向。一部分原因是我在运动中,我能从运动中获得力量,忘记疲劳,忘记工作,运动就是我的充电站;另外一部分则是,有人与我一起出行,与同伴同行更是一件美妙的事情,因为要找到能与你有相同兴趣的人太难了,不是因为少,而是找到同伴对有些不擅长打交道的人来说太难。</p>
<p>也正是在这样的旅程中,忘记所有的事情,忘记所有的烦恼,我只有一个目标:往前走,一直到终点。</p>
<p>在抛却所有烦恼后,你会发现你真正的兴趣所在。</p>
<h2 id="三-雷团长的智慧">三、雷团长的智慧</h2>
<p>在这次旅程开始之前,我从我们的领队雷团长那里学到一样很重要的技能:利益无关的事情,只说事实,不说建议。<br>
<img src="https://hbuecx.com/post-images/1668351373345.PNG" alt="" loading="lazy"></p>
<p>我在看到群里有人问的时候,我在想雷团长会给出怎样的答案:能 or 不能?</p>
<p>他的答案令我惊讶,他的回答仅仅是如图所言,没有更多的回复。我突然意识到,这件事情,不论如何给出反馈和建议,都有可能出错。唯一能保证不出错的方法就是只讲事实,不提建议。</p>
<p>这在我上次组织团队Outing时也有类似的事情发生,但是我由于太过重视自己的建议导致有些时候会失去重心,但很明显这么做是不对的。只有自己才能给出最合适的建议,因为只有自己最了解自己,只要陈述事实即可,至于作何决定由个人独自决定。</p>
<h2 id="四-some-image">四、some image</h2>
<p><img src="https://hbuecx.com/post-images/1668350397218.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350407204.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350415758.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350424531.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350469039.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350482976.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668350433848.JPG" alt="" loading="lazy"><br>
<img src="https://hbuecx.com/post-images/1668355760304.jpg" alt="" loading="lazy"><br>