编程开发 | 进击之路 - Alan的个人博客

Img onerror实现图片404兜底

Sat, 16 May 2026 19:34:00 +0800

img有onerror事件，理论上图片加载失败时会触发这个事件，但最近我测试遇到了没触发的场景，分析后发现这里有细节点要注意。

例子

# 不会触发onerror事件
<img src="https://i.postimg.cc/76vzQ3fQ/C01.jpg" onerror="alert(111)" />


# 会触发onerror事件
<img src="C01.jpg" onerror="alert(111)" />

如上图的图片请求返回时404状态码，但还是会返回图片格式的内容，因此并不会触发onerror事件。所以可以得出结论onerror并不看状态码，而是看是不是个正确的图片格式内容。

If an error occurs while loading or rendering an image, and an onerror event handler has been set for the error event, that event handler will get called. This can happen in several situations, including:

The src or srcset attributes are empty ("") or null.
The src URL is the same as the URL of the page the user is currently on.
The image is corrupted in some way that prevents it from being loaded.
The image’s metadata is corrupted in such a way that it’s impossible to retrieve its dimensions, and no dimensions were specified in the element’s attributes.
The image is in a format not supported by the user agent.

所以MDN的描述也说明了onerror事件是根据图片是否能正确加载来触发的，而不是根据HTTP状态码来判断的。

结论

onerror只能用于兜底图片本身无法加载的情况，如果服务本身返回了一个404状态码但内容是个正确的图片格式，那么onerror事件是不会被触发的。因此在使用onerror事件时需要注意这一点。如果确实需要根据HTTP状态码来判断图片是否加载成功，可能需要使用其他方法，比如通过JavaScript的fetch API先请求图片资源，检查状态码后再决定是否设置img的src属性。

了解Trezor硬件钱包

Tue, 28 Apr 2026 16:49:49 +0800

imkey不支持自定义刷固件，因此这里team内多了解了下另一个品牌，Trezor的硬件钱包。这里mark下一些资料，方便以后回顾。

固件

https://github.com/trezor/trezor-firmware

看来所有型号都是统一一个固件。

apps支持

https://github.com/trezor/trezor-firmware/tree/main/core/src/apps

模拟器

https://docs.trezor.io/trezor-firmware/core/build/emulator.html

自定义固件

https://trezor.io/trezor-suite?srsltid=AfmBOortBR02GKnAknyFOeS8YWKwWmQuYZeSHtu-ix4v0_7UJaBYd-5w

推特粉丝数

trezor 大概230k粉丝
ledger 大概670k粉丝数据来看，trezor的粉丝数是ledger的三分之一左右，说明在社区的影响力可能不如ledger。

网页与钱包通讯

@trezor/connect-web

固件开发/打包

$ git clone git@github.com:trezor/trezor-firmware.git

# 把子模块的资源都拉取下
$ git submodule update --init --recursive --force --progress

# install nix,支持Linux/MacOS，安装完成后需要重启shell。
$ curl -L https://nixos.org/nix/install | sh

$ nix-shell --arg devTools true

# 环境
$ uv sync

$ source .venv/bin/activate

# 测试环境是否搭建成功
$ python -c "import click; print('click ok')"

# 进入core目录，安装依赖
$ cd core

# 拉取第三方
$ make vendor


# 注意，如果代码没有变动，但是重复生成固件，直接会报错，提示文件已经存在了。正常打包会提示比如 cp build/firmware/firmware.bin build/firmware/firmware-T3T1-2.11.2-6daa3bd.bin (trezor-firmware) 
$ make build_firmware
# 比如如果是T3B1型号的设备，指定环境变量
$ TREZOR_MODEL=T3B1 make build_firmware

# TREZOR_MODEL=T3B1 make upload

# 设备列表，可以确认设备是否连接且被正确识别
$ trezorctl list

固件文件

构建打包后文件在core/build/firmware/firmware-T3B1-2.11.3-3a8d901.bin

注意：如果本身git文件没完全提交，那么构建的固件会有dirty标记。

查看机器真正型号

trezorctl get-features | grep -E "model|internal_model|vendor|major_version"

刷机

解锁 `如果提示不通过则增加解锁`

$ trezorctl device unlock-bootloader

根据提示进行解锁。

说明：trezorctl是官方python写的命令行工具。推荐走固件开发流程，去安装环境

$ git clone git@github.com:trezor/trezor-firmware.git

# 把子模块的资源都拉取下
$ git submodule update --init --recursive --force --progress

# install nix,支持Linux/MacOS，安装完成后需要重启shell。
$ curl -L https://nixos.org/nix/install | sh

$ nix-shell --arg devTools true

# 环境
$ uv sync

$ source .venv/bin/activate

# 到此，其实去执行trezorctl命令就会work，比如 trezorctl list 就可以看到设备列表了。

进入bootloader模式

硬件钱包两个按键同时按住，连接电脑，即可进入bootloader模式。
硬件钱包点击 Install FW，会提示waiting for host.

命令安装固件 `安装方法1`

# 这个会唤起真机进行固件刷机，也可以利用trezor suite进行刷机
$ make upload

trezor suite安装固件 `安装方法2`

安装的前提是进入bootloader模式，进入后会硬件会提示安装，点击安装，然后PC端左上角选择连接设备。

suite安装地址见官网

说明：固件大小的话，我看也就1-2MB，安装很快，需要硬件钱包侧确认。

注意：本地自定义签名固件后，启动钱包会提示warning，只有重新刷回官方签名固件，才会消除这个warning。

web3js与trezor的交互

走PB消息协议
连通的话，走webusb或者bridge协议

关于中国境内的备案问题

Tue, 14 Apr 2026 12:16:31 +0800

备案是跟域名还是服务器？

举个例子：域名在阿里云备案后，可以解析到腾讯云的服务器，但需要先做接入备案。‌根据相关法规，备案跟着云服务器走，而不是域名。如果你的域名在阿里云备案，但想要将该域名解析到腾讯云的服务器，你需要进行接入备案流程‌。

所以结论是：备案是跟服务器走的，而不是域名。无论你的域名在哪里备案，只要服务器在国内，就需要进行备案。当然如果比如是阿里云服务器换到另一台阿里云，其实是不用重新备案的。

备案需要多长时间？

一般在国内云厂商网页上会有提示大概的时间，总之不会很高效，因为老爷们是不加班的，理解这点就好了，这个时间永远不要乐观，按照最长时间评估就行了。

备案主体

有时候一个公司是有多个主体的，这点注意主体，因为最近我遇到个问题，微信开发者账号主体跟想绑定的域名备案主体不一致，导致出现了问题。

香港或者境外就不必备案了么？

是，但代价也有，比如接入百度站长，想挣广告费就不行了，国内所有站点必须备案.

网页底部的备案号是必须的吗？

是的，按照相关法规，所有在中国境内运营的网站都必须在网页底部显示备案号。备案号是由国家互联网信息办公室颁发的，表示该网站已经完成了备案手续，并且符合相关法规的要求。
网站首页，比如封闭系统，那么登陆页一定要有备案号，其他页面可以没有，但如果是开放系统，建议每个页面都放备案号，毕竟用户可能会直接访问其他页面。

写在最后

国内的业务不备案没法推进，当然备案的恶心程度是无解，只能接受。
如果不考虑国内业务，那么自由随便了。

使用Exa AI 搜索

Sun, 05 Apr 2026 20:57:48 +0800

当前AI都有联网检索能力，比如cc下的Claude Code结合了网络检索能力，当AI执行联网检索，你可以清晰的看到它调用了WebFetch,但听说Exa是个不错的AI搜索，于是我用了一段时间，发现确实很强，这里分享下。

Exa搜索的优势

个人的理解 1.质量，2.速度。因为AI的联网搜索本质就是直接去搜，但是exa的搜索目前看是有一个自己的索引库的，质量上会好很多，速度上也会快很多。

免费/付费"

Exa目前是有免费额度的，但属于付费产品，注册会赠送10USD，这个额度经常会变，以官方为准。免费额度是可以使用一段时间，之后需要付费，好在支持国内Visa支付。

我目前还在使用免费额度阶段，毕竟有60多刀，用完后，也许会考虑付费。

额度抵扣码

Exa偶尔会有一些活动，提供额度抵扣码，如果有的话，可以在此页面输入进行兑换。

如果你找不到抵扣码，可以社交媒体或者闲鱼上找找。

安装

Exa本身有直接提供MCP和SDK，API，因此按需使用即可.

这里以Claude MCP为例。

claude mcp add exa -e EXA_API_KEY=YOUR_API_KEY -- npx -y exa-mcp-server

具体MCP Server配置的话，参考下面。

 "exa": {
 "command": "npx",
 "args": ["-y", "exa-mcp-server"],
 "env": {
 "EXA_API_KEY": "xxxxxx"
 }
 }

使用

这里介绍下MCP下如何让AI调用MCP，其实方法跟其它MCP也一样。

最简单的方式是在与Claude对话时，直接输入比如用exa搜下微信小程序如何预览图片即可。之后就可以看到相对高质量的回复，并且响应速度上看确实很快。
也可以比如项目提示词直接约定联网搜索用Exa MCP，这样AI在判别调用工具时就会使用exa MCP，而不是内置的联网搜索。

具体选哪个，看着来。

除了MCP，SDK或者API就简单了，按照文档要求调用即可。

写在最后

没玩过的建议试试exa，个人觉得很不错。

了解OneKey硬件钱包

Wed, 25 Mar 2026 00:00:00 +0800

最近工作需要，研究硬件钱包，之前调研了下Ledger，另一个主流OneKey也需了解下，从而方便做出技术选型。

自定义区块链网络/新链的支持

对于一个自定义的区块链网络/新链，想要利用OneKey的安全存储和签名功能。

firmware下开发App，然后提交PR，审核通过后OneKey升级固件后就支持了。
利用官方SDK比如WEB SDK在对应的场景下连接钱包从而支持。

用户如何用

OneKey下不存在说安装某个App，因此用户能做的就是升级固件。

Ledger和OneKey的对比

Ledger需要安装App，OneKey不需要，但OneKey需要升级固件。一个可以看到App，一个可以看作OS。
Ledger App提交是发起上架商店请求，而OneKey是GitHub 开源项目下发起PR，审核通过后就支持了。
开发环境下，如果是非真机，两者都是走模拟器，真机的话，Ledger有硬件限制，必须是支持侧载的型号，而OneKey没有限制，但需要升级固件。

onekey支持自己刷开发固件吗？

支持，但并非所有型号都支持。

刷固件

固件构建打包，最终的产物是一个bin文件。
通过，https://firmware.onekey.so/ 进行固件升级。

Twitter Card分享配置

Sat, 21 Mar 2026 21:56:10 +0800

平时需要推特X进行分享博客内容，一方面就是单纯分享，一方面也算是个人推广吧。有时发现博客的图片没有正确显示，有时也觉得标题内容不合适等等，研究后发现是Twitter Card也是可以进行配置的，下面是一些基本的配置项，供大家参考。

配置

 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@alanhe421">
 <meta name="twitter:creator" content="@alanhe421">
 <meta name="twitter:title" content="文章标题">
 <meta name="twitter:description" content="文章描述">
 <meta name="twitter:image" content="https://...图片URL">
 <meta name="twitter:image:alt" content="图片描述">

关于分享文章-图片的建议

以我个人blog为例。我取图片的逻辑优先级如下。

twitter:image 优先级（高→低）：

twitter[0].image（frontmatter twitter: - image:）
image.filename（frontmatter，HTTP URL）
内容第一张图（$first_content_image）
featured_image 文件（页面目录下 featured 资源）
assets/media/sharing.png（站点兜底图）

card validator

以前为了验证配置是否正确，都是可以访问Card validator,现在这个站点功能已经无法用了。目前唯一的办法是直接发推上进行预览即可，或者别点发布，其实也可以看出来是否正确了。

最终效果

配置正确，但不work？

缓存问题，可以尝试重新发链接，让推重去抓取就行了。

写在最后

以上就是一些关于Twitter Card的配置和使用建议了，欢迎大家参考使用，如果有更好的建议也欢迎留言交流。

了解Ledger硬件钱包

Fri, 20 Mar 2026 09:42:15 +0800

Ledger/'ledʒər/ 是硬件钱包品牌。最近项目需要验证一条新链上的硬件钱包签名方案，我拿到了 Ledger Nano X 设备进行验证。

本文记录整个工作过程和相关技术要点。

ledger钱包购买

我目前手里的是公司给采购的，感兴趣想买的，直接官网即可，👉 戳这里

概念

通过物理隔离技术和安全元件芯片实现加密资产私钥的安全存储。

做什么

私钥存储(不暴露给电脑或手机)
交易签名(签名动作在设备内完成)

eth交易签名流程（例子）

sequenceDiagram box 客户端 participant U as 用户 participant D as dApp participant M as MetaMask end box 外部签名设备 participant L as Ledger Device (Ethereum App) end box 区块链基础设施 participant R as RPC / Ethereum Network end U->>D: 发起转账 / Approve / Swap D->>M: 请求钱包发起交易 M->>R: 获取 nonce / gas / fee / chainId R-->>M: 返回链上参数 M->>U: 展示交易确认信息 U->>M: 在 MetaMask 点击确认 M->>L: 发送未签名交易数据 L->>U: 设备屏幕展示关键信息 U->>L: 按键确认/拒绝 alt 用户确认 L-->>M: 返回签名结果 M->>R: 广播已签名交易 R-->>M: 返回 tx hash / pending / confirmed M-->>U: 展示交易状态 else 用户拒绝 L-->>M: 拒绝签名 M-->>U: 交易取消/失败 end

自定义区块链网络/新链的支持

对于一个自定义的区块链网络/新链，想要利用ledger的安全存储和签名功能。

开发一个Ledger Device App，安装在设备上，提供特定区块链的交易签名功能。
开发一个连接Ledger Device App的插件，安装在MetaMask等钱包中，提供与新链交互的功能.
- 如果是使用web3js等库，就需要修改库，从而支持通过Ledger Device App进行交易签名。

调用链 / 数据流图

你的代码
 ↓
Ledger SDK（封装 APDU）
 ↓
WebHID（传输）
 ↓
Ledger 设备
 ↓
你的 ChainMaker App（解析 APDU）

说明：HID即 human interface device，APDU即 application protocol data unit。

Ledger Device App

Ledger Device App会安装在设备上，提供特定区块链的交易签名功能。

要求

开发语言只能是C/Rust，因为设备资源有限，比如我手里的Nano X，内存只有MB级别。
- 官方提供了Rust脚手架模版
- 官方提供了C语言脚手架模版
- 推荐走官方脚手架，避免无法被插件正常识别。我个人目前选的走Rust，更好维护些。
安装官方的VSCode插件，提供了开发环境和调试工具。
构建打包device app的话，需要Docker环境，官方提供了Docker镜像，里面包含了构建和打包所需的工具链和依赖。
模拟器进行测试的话，本地还需安装Speculos模拟器，提供设备的模拟环境.

VSCode插件

如图，可以看到插件提供了完善的开发/构建/调试功能，极大提升了开发效率。

真机 vs 模拟器

对比项	真机 (WebHID)	模拟器 (Speculos)
连接方式	`TransportWebHID.create()` — 浏览器弹出 HID 设备选择器，用户手动选择 USB 设备	`SpeculosHttpTransport.open(url)` — 直接 HTTP 连到 `localhost:5001`
通信协议	USB HID 帧协议（浏览器 WebHID API → USB → 设备固件）	HTTP POST JSON `{ data: "hex..." }` → Speculos HTTP API → 模拟固件
用户确认	签名时需要在真机物理按键确认	Speculos 手动确认
LedgerSigner 创建	显式传 `signDigest` 和 `fetchPublicKey`（第 1043-1044 行）	用默认值（构造函数里默认就是 `rawApduSignDigest` / `rawApduFetchPublicKey`）
后续流程	`isReady()` → `fetchPublicKey()` → `signMessage()` → 上链	完全一样

发布上线流程

你需要提交的是：App 的源码仓库 + 一系列交付物（deliverables），Ledger 会 fork 你的 App 仓库，在他们自己的 Git flow 中管理部署代码。所以不是你自己打包一个二进制文件，而是提交源码让 Ledger 来构建和签名。

具体步骤：

先联系 Ledger 团队 — 填写表单介绍你的项目，达成合作意向（分为 Ledger

开发 或 自主开发两条路径），表单提交地址见[这里](https://developers.ledger.com/docs/device-app/submission-process/submission-form)

确保代码符合要求 — 满足安全、密码学和开发规范
准备交付物（Deliverables）：

- App 源码仓库（含 docs/apdu.md 文档，描述 APDU 命令和状态字）
- 用户文档（Google Doc 格式或已发布的文档 URL）
- App 兼容性信息（需支持 Nano S Plus、Nano X、Stax、Flex 所有设备）
- 法律实体信息、邮箱、地址等

填写提交表单 — 官方有专门的 device app 提交表单和 plugin 提交表单
安全审计 — Ledger 的合作审计方会对你的 App 进行安全审查，审计通过后Ledger 才会发布
- 要求走官方提供的合作审计方进行审计。
- 费用问题自负。

说明：提交审核需要很多信息，且审核包含安全审计因此上架的周期很长(几周到几个月，无确定时间周期)。

用户如何用

用户需要安装 Ledger Wallet 应用，连接并设置好 Ledger 设备。
用户需要在 Ledger Wallet 中安装目标App。
- 未上线App，需要走官方VSC插件进行侧载安装。

侧载测试

连接设备，VSC下打开ledger app，利用插件进行测试。
除了自己开发的app外，单纯想体验下侧载的话，可以走官方已上架app测试，比如eth app

其它问题

硬件钱包为什么那么多型号，那么贵？

硬件钱包，比如 Ledger ≠ 只是安全芯片
型号不同，安全级别 × 交互体验 × 使用场景的取舍不同，另外存储空间也不同，价格自然不同。

navigator.hid

navigator.hid（WebHID）是连接物理 USB HID 设备的，而 Speculos
是模拟器，它只暴露 TCP socket（端口 9999）和 HTTP API（端口 5000），不是真实 USB 设备，所以浏览器扫描不到任何 HID 设备。

联系官方

discord
邮件 hello@ledger.fr

个人 AI 常用的 MCP 清单及安装方法

Thu, 12 Mar 2026 14:57:25 +0800

MCP（Model Context Protocol）是让 AI 连接外部工具和数据源的协议。实际使用中，MCP 是不可或缺的能力扩展，这里总结一下我个人常用的 MCP 工具，以及举例如何在 Claude Code 中安装配置。

安装方式说明

Claude Code 中安装 MCP 有两种主要方式：

方式一：claude mcp add 命令（推荐）

# 基本格式
claude mcp add <server-name> -- <command> <args...>

# 常用参数
# -s user 全局安装（所有项目可用）
# -s project 项目级安装（仅当前项目）
# -e KEY=VAL 设置环境变量

方式二：手动编辑配置文件

项目级配置写在项目根目录的 .mcp.json，全局配置写在 ~/.claude/settings.json 的 mcpServers 字段。

// .mcp.json 示例
{
 "mcpServers": {
 "server-name": {
 "command": "npx",
 "args": ["-y", "package-name"],
 "env": {
 "API_KEY": "your-key"
 }
 }
 }
}

Context7

文档搜索神器，直接从官方文档库中检索最新的 API 文档和代码示例，避免 AI 用过时的训练数据回答问题。

安装：

claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

使用场景： 查 React、Next.js、Prisma 等任何库的最新文档时，让 AI 去查实际文档而不是凭记忆回答。

Exa

替代 AI 内置的 WebFetch/WebSearch，优势是搜索质量高、速度快，支持语义搜索。

安装：

# 先去 https://exa.ai 注册获取 API Key
claude mcp add exa -e EXA_API_KEY=your-api-key -- npx -y exa-mcp-server

使用场景： 技术调研、查找最新文章和博客、搜索特定领域的内容。

Figma

Figma + Claude Code 快速还原设计稿，让 AI 直接读取 Figma 设计文件并生成对应代码，效率很高。

安装：

# 先去 Figma 获取 Personal Access Token
# Figma → Settings → Personal access tokens → Generate
claude mcp add figma \
 -e FIGMA_PERSONAL_ACCESS_TOKEN=your-token \
 -- npx -y figma-developer-mcp --stdio

使用场景： 将 Figma 设计稿直接转换为前端代码，AI 可以读取设计文件中的布局、颜色、字体等信息。

TAPD

项目管理工具 TAPD 的 MCP 插件，让 AI 能读取需求、缺陷、迭代等项目信息，更好地理解业务上下文。

安装：

# 先去 TAPD 获取 API 凭证
# TAPD → 公司管理 → API 应用
claude mcp add tapd \
 -e TAPD_USERNAME=your-api-id \
 -e TAPD_PASSWORD=your-api-key \
 -- npx -y tapd-mcp

使用场景： 开发前让 AI 先读取 TAPD 上的需求描述和验收标准，coding 时有更完整的业务理解。

Claude in Chrome

浏览器自动化插件，让 Claude Code 可以直接操控 Chrome 浏览器，实现网页交互、调试、截图等操作。

安装：

在 Chrome 应用商店搜索安装 Claude in Chrome 扩展
安装后扩展会自动启动本地 MCP 服务，Claude Code 中添加：

claude mcp add claude-in-chrome -- npx -y @anthropic/claude-in-chrome-mcp

使用场景： Coding 时联合网页调试，写爬虫/自动化脚本，测试前端页面交互。

Chrome DevTools

通过 Chrome DevTools Protocol 直接与浏览器交互，可以执行 JS、抓取网络请求、做性能分析等。

安装：

claude mcp add chrome-devtools -- npx -y @anthropic/chrome-devtools-mcp

使用场景： 调试前端性能问题、分析网络请求、执行页面脚本、截图对比。

管理已安装的 MCP

# 查看所有已安装的 MCP
claude mcp list

# 移除某个 MCP
claude mcp remove <server-name>

# 查看某个 MCP 的详细配置
claude mcp get <server-name>

小贴士

API Key 安全：不要把 API Key 直接写在项目的 .mcp.json 中提交到 Git，建议用 -s user 安装到全局配置
按需安装：不需要一次装所有 MCP，根据实际工作场景按需添加
项目级 vs 全局：通用工具（Context7、Exa、TAPD）建议全局安装，项目专属工具建议项目级安装

OpenClaw(小龙虾) 部署硬件要求：服务器配置推荐与性能需求指南

Fri, 06 Mar 2026 17:48:36 +0800

最近朋友问我：部署 OpenClaw（原 ClawdBot）到底要什么机器？结论先说：它本身很轻量，硬件资源瓶颈本身不在它，低配机器也能跑起来，但你要不要“跑得稳、跑得快”，取决于具体场景。

OpenClaw 最低要求

OpenClaw 官方定位是“低门槛部署”，下面这套配置可以作为起步线：

处理器：2 个及以上 CPU 核心（英特尔 N 系列、入门 AMD 锐龙、ARM 都可以）
内存：4GB RAM（仅基础聊天功能最低可到 2GB）
存储：至少 2GB 可用磁盘空间（数 GB 即可）
软件环境：Node.js v22+
操作系统：Linux、Windows（通过 WSL2）或 macOS 13+
网络：稳定互联网连接，如果是国外模型，注意网络要解决

部署方案

1) 云端

低成本 VPS：每月 5 美元档位，国内某某云这些也都行。
免费方案：Oracle Cloud 免费套餐（可用 4 个 ARM 核心 + 24GB 内存）。

适合：

希望 24 小时在线
不想占用本地电脑资源

2) 本地部署

可选 Docker 部署
或直接在主机安装 Node.js 后运行，我个人的话，目前是家里Mac mini部署。

适合：

调试和开发频繁
对数据本地化有要求

什么时候要上更高配置

OpenClaw 本体轻量，但以下场景会明显抬高硬件需求：

运行本地大模型：建议至少 8GB-16GB 内存
开启浏览器自动化：建议 16GB 内存，体验更稳定
多任务并发（采集、自动化、聊天同时进行）：CPU 和内存都需要留冗余

实操建议

如果你只是先试用，2 核 + 4GB + Node.js 22+ 就够起步。如果你打算长期跑自动化任务，建议直接上 4 核 + 16GB + SSD，后续省很多排查和重启时间。

另外，安装流程通常支持 CLI 单行命令一键部署，先跑起来再按负载升级配置，会更高效。

OpenClaw(小龙虾) MCP 配置教程：如何让 AI 助手接入第三方工具

Wed, 04 Mar 2026 17:35:58 +0800

有需求在龙虾虾调用tapd mcp，尝试发现原来官方本身是不支持MCP的，需要借助第三方解决。官方推荐用 MCPorter 作为中间层。

安装 mcporter

npm i mcporter

which uvx

curl -LsSf https://astral.sh/uv/install.sh | sh

source ~/.bashrc # 或 source ~/.profile

添加MCP

npx mcporter config add mcp-server-tapd
–stdio “uvx mcp-server-tapd”
–env TAPD_ACCESS_TOKEN=xxxx
–env TAPD_API_BASE_URL=https://api.tapd.cn
–env TAPD_BASE_URL=https://www.tapd.cn

具体配置文件位置在 /root/config/mcporter.json

查看

执行命令可以查看具体MCP情况。

mcporter list

使用

一开始可以明确让龙虾用mcporter下的mcp-server-tapd，存入记忆后，之后可以简单化直接发单子链接就行了。

使用Tapd MCP

Tue, 03 Mar 2026 17:08:22 +0800

工作中TAPD用的比较多，最近在接入MCP，这里以ClaudeCode来说，列下怎么搞，其它AI类似。

配置

注意，可以走token，或者账号密码，任君选。token添加位置在这里

"mcpServers": {
 "mcp-server-tapd": {
 "type": "stdio",
 "command": "uvx",
 "args": [
 "mcp-server-tapd"
 ],
 "env": {
 "TAPD_ACCESS_TOKEN": "xxxx",
 "TAPD_API_USER": "",
 "TAPD_API_PASSWORD": "",
 "TAPD_API_BASE_URL": "https://api.tapd.cn",
 "TAPD_BASE_URL": "https://www.tapd.cn",
 "BOT_URL": ""
 }
 }
 }

测试

OK后，Claude进入回话，/mcp可以看到Tapd mcp的连接状态。

腾讯云静态资源迁移到 Cloudflare R2 完全指南

Sun, 01 Feb 2026 17:41:35 +0800

由于对国内云厂商的厌恶提升，且为了blog服务性能提升，这里将博客静态资源从腾讯云迁移到 Cloudflare R2，其实步骤还是挺繁琐的，包括 rclone 配置、Worker 部署和自定义域名绑定。但得益于AI协助，整个迁移过程大概 1 小时，0.5G 静态资源零停机切换完成。这里大概记录下完整步骤，供大家参考。

背景与目标

将静态资源从腾讯云迁移到 Cloudflare R2 主要有两个目的：

降低成本：Cloudflare R2 出口流量完全免费，后期计划废弃服务依赖国内云，实在是从登录到使用充满了流氓气息。
提升性能：利用 Cloudflare 全球 CDN 加速，优化博客访问速度和 SEO

最终架构

服务器本地目录
/var/www/blog/static-assets
 ↓ (rclone sync)
Cloudflare R2 (private bucket)
 ↓ (Worker)
static.1991421.cn (自定义域名)

架构特点：

博客 URL 不变
R2 Bucket 保持私有
通过 Worker 提供访问
零出口流量费用

一、安装 rclone

在服务器上安装 rclone：

curl https://rclone.org/install.sh | sudo bash

二、配置 rclone 连接 R2

1. 启动配置向导

rclone config

2. 创建新的 remote

按照以下步骤配置：

选择 n 新建 remote
名称输入：cf-r2
存储类型选择：s3（S3 兼容对象存储）
Provider 选择：47（Any other S3 compatible provider）

为什么不选 Cloudflare R2 选项？ R2 不在内置厂商列表中，必须使用通用 S3 兼容配置。

3. 填写认证信息

在 Cloudflare R2 控制台创建 API 令牌后，你会看到三个字段，这里列下字段对应关系：

Cloudflare 页面字段	rclone 配置项	是否使用
访问密钥 ID	`access_key_id`	✅ 必填
机密访问密钥	`secret_access_key`	✅ 必填
令牌值	-	❌ 忽略

在 rclone 中输入：

access_key_id> [你的访问密钥 ID]
secret_access_key> [你的机密访问密钥]

4. 配置连接参数

Region（留空）：

region> [直接回车]

R2 没有 region 概念，留空是官方推荐做法。

Endpoint（必填）：

endpoint> https://<AccountID>.r2.cloudflarestorage.com

示例：https://xxxxx.r2.cloudflarestorage.com

你可以在 R2 控制台的 Bucket 详情页找到这个地址。

Location Constraint（留空）：

location_constraint> [直接回车]

ACL（留空 = private）：

acl> [直接回车]

R2 不使用 S3 ACL，权限交给 Worker 管理。

Advanced config（不需要）：

Edit advanced config? n

5. 确认配置

y) Yes this is OK

配置完成！

三、执行数据迁移

首次迁移（推荐使用 copy）

rclone copy /var/www/blog/static-assets cf-r2:static-assets \
 --progress \
 --transfers=16 \
 --checkers=16

copy 命令只复制文件，不会删除目标端的文件，更安全。

日常同步（使用 sync）

rclone sync /var/www/blog/static-assets cf-r2:static-assets \
 --progress \
 --transfers=16 \
 --checkers=16

sync 会让目标端与源端完全一致，会删除目标端多余的文件。

参数说明：

--progress：显示传输进度
--transfers=16：并发传输 16 个文件
--checkers=16：并发检查 16 个文件

四、配置 Cloudflare R2 Bucket

在 Cloudflare 控制台创建 R2 Bucket：

Bucket 名称：static-assets
存储类型：标准
区域：自动（Auto）
公开访问：❌ 关闭（保持私有）

重要：不要开启公开访问，我们通过 Worker 来控制访问权限。

五、部署 Cloudflare Worker

1. 创建 Worker

在 Cloudflare 控制台：

进入 Workers & Pages
点击 创建应用程序
选择 创建 Worker
选择 从 Hello World 开始

2. 编写 Worker 代码

将以下代码粘贴到 Worker 编辑器：

export default {
 async fetch(request, env) {
 const url = new URL(request.url);
 const key = url.pathname.slice(1);

 if (!key) {
 return new Response('Not Found', { status: 404 });
 }

 const object = await env.STATIC_ASSETS.get(key);
 if (!object) {
 return new Response('Not Found', { status: 404 });
 }

 return new Response(object.body, {
 headers: {
 'Content-Type':
 object.httpMetadata?.contentType || 'application/octet-stream',
 'Cache-Control': 'public, max-age=31536000, immutable'
 }
 });
 }
};

代码说明：

从 URL 路径提取文件键名
从 R2 获取对象
设置正确的 Content-Type
添加长期缓存头（1 年）

3. 绑定 R2 Bucket

这是最关键的一步，很容易遗漏！

在 Worker 设置中：

进入 设置 > 变量和机密信息
选择 R2 存储桶绑定（不是环境变量！）
添加绑定：
- 变量名：STATIC_ASSETS
- R2 Bucket：选择 static-assets

注意：必须使用 R2 Bucket 绑定，不能用环境变量或纯文本。

4. 测试 Worker

部署后，使用 workers.dev 域名测试：

curl -I https://static-assets.你的账号.workers.dev/2018-06-06-Validate.jpg

能正常返回图片说明 Worker 到 R2 的链路已打通。

六、绑定自定义域名

1. 添加自定义域名

在 Worker 设置中：

进入 触发器
点击 添加自定义域
输入域名：static.1991421.cn

如果域名已在 Cloudflare 托管：

DNS 记录会自动创建
HTTPS 会自动启用
通常在 1 分钟内生效

2. 验证域名

curl -I https://static.1991421.cn/2018-06-06-Validate.jpg

检查响应头：

server: cloudflare
cache-control: public, max-age=31536000, immutable

看到这些说明已经正式上线！

七、更新博客引用

如果使用了新的域名，需要更新博客中的静态资源 URL，当然我这里保持不变，所以不需要这一步。如果需要更新，可以批量替换：

旧：https://old-domain.com/image.jpg
新：https://static.1991421.cn/image.jpg

可以使用批量替换工具完成。

总结

通过这次迁移实现了：

✅ 成本优化：R2 出口流量 $0
✅ 性能提升：Cloudflare 全球 CDN 加速
✅ 架构优化：Private Bucket + Worker 的标准实践
✅ 零停机迁移：URL 保持不变，用户无感知

整个迁移过程仅耗时 1 小时，0.5G 静态资源全部迁移完成。这是 Cloudflare R2 + Worker 做法。

使用AI构建一个前后端项目

Thu, 22 Jan 2026 21:59:44 +0800

使用AI是可以快速搭建一个好使的前后端项目的，为了避免来回修改，这里基于实际项目经验，总结了一下技术栈。使用中可以直接投给AI或放入项目文档中，总之喂给AI就行。

前端技术栈

包管理工具：npm
React
TypeScript
Vite
dayjs
Tailwind CSS+ ShaCDN Components
需要图表展示，使用 ECharts

后端技术栈

包管理工具：npm
NestJS
TypeScript
数据库：MySQL
ORM：TypeORM
使用 JWT 做身份验证
使用 Swagger 做接口文档

小程序技术栈

包管理器：npm
使用 Taro 框架
使用 TypeScript
打包工具选Vite
使用 dayjs 处理时间
组件库 Tdesign Mini

使用miniprogram Ci实现微信小程序自动发包

Thu, 15 Jan 2026 17:52:17 +0800

小程序每次发一个新版本到体验版，我需要做的是，打包=>打开微信开发者工具=>点击上传=>点击提交，总之很繁琐。这里的发布体验版流程充满了低效，所以我想通过脚本来实现自动化发包，查了下官方有miniprogram-ci这个NPM包，经过摸索终于解决了痛点，但官方文档实在是太简陋了，记录下我的解决方案。

我本来的项目情况

我是使用taro，每次需要发包前需要先执行npm run build:weapp，编译打包后的文件夹在/dist/weapp，每次是将该文件夹进行上传发布。

使用miniprogram-ci实现自动发包

发布开发版的脚本代码如下。基于如下代码块，做一个publish.js脚本即可。至于结合打包也都很easy了。

(async () => {
 const project = new ci.Project({
 appid: "",
 type: "miniProgram",
 projectPath: path.resolve(__dirname, "../", "dist"),
 privateKeyPath: path.resolve(__dirname, "private.key"),
 ignores: ["node_modules/**/*"],
 });

 // 通用编译配置
 const setting = {
 // 关键：禁用 ES6 转 ES5，因为 Taro 已经处理过了
 es6: false,
 // 禁用增强编译
 enhance: false,
 // 禁用 ES7 转 ES5
 es7: false,
 // 代码保护（混淆）
 minified: true,
 // 是否自动补全样式
 autoPrefixWXSS: true,
 // 压缩 WXML
 minifyWXML: true,
 // 压缩 WXSS
 minifyWXSS: true,
 // 将 JS 编译成 ES5
 codeProtect: false,
 };

注意

官方文档很多细节都是没有提及，这里说明下。

注意如果本身该版本在微信公众平台设置为了体验版，那么发布后就是体验版，否则就是开发版。
private.key文件需要从微信公众平台下载，路径：开发->开发设置->下载开发者工具配置文件，解压后可以找到private.key文件。
这里projectPath即project.config存在的目录，我因为使用的taro，因此taro负责了编译到微信小程序语言，因此我在上述配置中就需要关闭编译那些开关。如果本身你是原生开发，那么我理解可以直接选择走项目配置即可。
本身ci工具的upload仅仅是有个大小检测，并不会检查语法之类的，因此假如选错了目录，或者多配置了编译等，结果就是上传成功，但预览白报错，比如Component is not found in path "wx://not-found"

总结

miniprogram-ci不是好不好的问题，凑合用吧。
微信小程序文档真的够烂，社区也就那样，随便一翻就是吐槽，说明什么，烂但你又不得不用，凑合吧。

Claude Code结合Exa MCP

Wed, 14 Jan 2026 18:24:18 +0800

当前AI其实都有联网检索能力，比如cc下的Claude Code结合了网络检索能力，但是听说Exa是个不错的AI搜索，于是我尝试了下，玩了1天，感觉还不错，这里分享下。

Exa搜索的优势

免费/付费

Exa目前是有免费额度的，注册后赠送15USD，可以免费使用一段时间，之后需要付费，好在支持国内Visa支付。我目前还在使用免费额度阶段，用完后，考虑付费。

安装

注册后，访问 https://dashboard.exa.ai/api-keys 获取key

终端下执行如下命令

claude mcp add exa -e EXA_API_KEY=YOUR_API_KEY -- npx -y exa-mcp-server

注意CC下安装后建议重新进入cc，然后/mcp即可查看是否安装及运行状态。

因为我平时也会用VSC，因此这里也贴下VSC下的安装方式

 "exa": {
 "command": "npx",
 "args": ["-y", "exa-mcp-server"],
 "env": {
 "EXA_API_KEY": "xxxxxx"
 }
 }

使用

最简单的方式是在与Claude对话时，直接输入比如用exa搜下微信小程序如何预览图片即可。之后就可以看到相对高质量的回复，并且响应速度上看确实很快。

替代AI内置的联网搜索

每次都明确在提示词里指定exa很烦，那么可以修改在claude.md这个全局上下文里，添加如下约束，这样AI在判别调用工具时就会使用exa MCP，而不是内置的联网搜索。


# Tool Usage Policy

When performing any search, retrieval, or web-based research task:

- You MUST use the `exa` MCP for all search and content discovery.
- Do NOT use Claude's built-in web search.
- Do NOT use any other MCPs for searching unless explicitly instructed.
- If `exa` is unavailable, you must ask the user how to proceed instead of falling back to other tools.

This rule applies to:
- Technical research
- Documentation lookup
- News or blog discovery
- Any task that requires external information


# Tool Usage Policy

When performing any search, retrieval, or web-based research task:

- You MUST use the `exa` MCP for all search and content discovery.
- Do NOT use Claude's built-in web search.
- Do NOT use any other MCPs for searching unless explicitly instructed.
- If `exa` is unavailable, you must ask the user how to proceed instead of falling back to other tools.

This rule applies to:
- Technical research
- Documentation lookup
- News or blog discovery
- Any task that requires external information

结论

总体来说，Exa结合Claude Code的使用体验还是不错的，尤其是搜索质量和速度上有明显提升，推荐大家尝试使用。
cc下目前我高频使用的mcp就2个，figma和exa，其他的mcp我还没怎么用过。

使用Web Scraper爬取网页站点数据

Thu, 18 Dec 2025 13:55:16 +0800

最近玩小程序，经常需要查看官网文档，但是官网文档个人觉得烂的不行，于是想到了用 web scraper 爬取官网数据，然后自己做个 GPT 或者 Claude Skill 来查询。以前没用过 web scraper，经过一顿学习入手，发现这东西实在太爽了。

安装 Web Scraper 插件

Web Scraper 有官方爬取服务，只是属于付费服务，个人觉得没必要，直接用浏览器插件就行了。插件的局限性就是只能爬取网页文本数据。不过目前对于我的需求来说已经足够了。
官方仅提供 Chrome 浏览器插件，非 Chrome 系并没支持。

配置

个人习惯开发者工具中配置使用。

导出数据

导出目前支持 xlsx，csv，个人目前用 CSV 格式导出，方便 AI 模型使用。

AI 使用

AI 使用方法就多了，比如我这里直接 ChatGPT 下创建了一个 Custom GPT，导入数据后，就可以直接查询官网数据了。

比如我这里爬取微信小程序官网数据，然后导入 ChatGPT，构建的微信小程序官方文档小助手，你可以试试看如何。

点击这里微信小程序官方文档小助手 GPT

写在最后

对于属于爬取一般使用专门的 API，但是很多站点是屏蔽爬虫的，而 web scraper 这种浏览器插件就能很好的解决这个问题，个人觉得非常好用，推荐试试。

Antigravity + Figma MCP Server使用教程：免费AI前端开发工具配置指南

Tue, 16 Dec 2025 15:27:30 +0800

最近玩了下Google的Antigravity 反重力IDE，搭配G3模型+Figma MCP Server，效果还不错，这里分享下咋玩的。

Antigravity安装

这个不用废话了，官方下载安装就行了，需要Google登陆。Antigravity免费版就可用g3，额度的话，实际测试我发现我能用2天。不够的话，可以考虑付费或切换账号了。

Figma MCP Server安装

Antigravity的MCP安装相对方便，但也比较隐蔽。

搜索安装Figma MCP Server，安装即可。

使用

实际使用的话，提示词里贴上figma设计稿的图层链接即可，同时指出是按照figma设计稿生成代码即可。

Figma MCP设置

一个小细节是Figma侧可以设置对于图片图标的处理，这样，使用中AI可以将figma资源down到项目下，或者直接使用WEB地址等。官方文档写的很粗糙，这里特意说明下。

使用感受

目前觉得相对Sonnet/GPT，算是还原度最高的了。推荐玩玩。

利用Claude Code创建Claude Skills

Sun, 14 Dec 2025 18:13:15 +0800

最近OpenAI宣布拥抱Claude Skills,可以看到Skills成了AI标准。Skills让AI可以拥有更多能力，最近我在开发小程序中发现我玩的AI对于小程序的支持并不好，因此我决定自己动手开发一个微信小程序文档的Claude Skills。

爬取微信小程序文档数据

访问，https://webscraper.io/，安装chrome插件。

配置导航，内容，选择需要爬取的内容。点击开始爬取，插件会打开新的Chrome窗口进行爬取。因为数据量大，因此需要等待。

爬取完成后，导出为CSV文件。

Claude Code下制作Skills

利用Claude Code官方Skills进行创建。创建后文件是.skill结尾的压缩文件，本质是个zip文件。进入~/.claude/skills目录，解压缩即可。

添加官方Skills

https://github.com/anthropics/skills.git

创建微信小程序文档查询Skill

目前claude code下无法查询显示已安装的skills，只能通过命令行查看。

使用

比如在Claude Code中使用：

微信小程序下如何获取用户头像。

会发现会自动触发微信小程序文档查询的Skill，返回相关内容。当触发对应Skill时，Claude会有相关的提示。

写在最后

目前觉得还不错，但具体是不是很费token，还需要长期使用才可以发现，done。

Codex下自定义斜杠命令

Sun, 07 Dec 2025 23:02:18 +0800

CC 下自定义斜杠命令还是挺爽的，比如我经常执行一些特定的操作，直接 slash 命令就能搞定，高效，codex cli 下也能实现类似的功能。

创建 prompts 文件

在用户主目录下创建一个prompts文件夹，注意不是项目目录下。
```
mkdir -p ~/.codex/prompts
```
编辑 prompt 文件在~/.codex/prompts/目录下创建一个新的文本文件，例如deploy.md，并在其中编写你想要的 prompt 内容。

重启 codex 会话

/prompts:deploy-dev回车即可执行目标指令。

Claude Pro尼日利亚低价区订阅教程：最便宜的开通方法与支付指南

Sat, 29 Nov 2025 16:09:50 +0800

最近梳理每年App订阅费用，发现现在太高了，其中一个大头是Claude Pro，一个月20刀(140多CNY)，粗估一年1800CNY，太贵，为了节省成本这里切换到尼区订阅，大概88CNY一个月，节省快小一半了。这里分享下做法。

为什么选择尼区订阅

我也有使用土区订阅一个服务，比如YouTube Premium,GPT Plus，但是Claude订阅土区价格跟没区差不多，没什么优势，因此这里选择尼区订阅。
如果本身不差钱，或者公司报销，那就没必要折腾了，直接走美区之类的就行了。
从下图可以看到Claude尼区还是比美区便宜的多，以Max为例，Max美区是200刀，而尼区是144.6刀，差距还是挺大的。Pro就差距更明显了。

准备条件

尼区AppleID账号，我这里是新注册的，如果直接创建尼区账号总失败，可以考虑先选中国区，美区等都行，之后再切换账户所在国家也是可以的。
- 如果不懂尼区账号注册或者遇到了问题，可以参考这篇文章的教程。
如果你有尼区支付方式更好，后期订阅需要，没有的话，也别担心，可以直接购买尼区礼品卡就行，购买渠道如果是中国用户可以走闲鱼，如果是不具备中国闲鱼账号，可以走其它渠道购买。

🎁

尼日利亚区 iTunes 礼品卡

约 14,900–15,000 NGN · 24 小时内发码 · 价格略高，用于覆盖服务和交易手续费

USD $--/张

⚠️ 正在加载...

正在加载礼品卡库存...

打开App Store，登录尼区AppleID账号。
点击右上角头像，点击充值，选择使用礼品卡或代码，输入你购买的尼区礼品卡码进行充值。
打开Claude App，登录账号，选择订阅。
选择月订阅，根据提示进行扣款支付即可。
如果只想购买一个月的话，注意订阅后记得及时取消订阅-自动续费。

说明：为了实现跨区购买，你需要用iPhone设备登录尼区AppleID账号，iPad下理论上也可以，Android机等场景我不清楚，需自查。

订阅失败/无法订阅

新注册的号或刚转区的号，苹果有限购保护，初期可能会造成部分软件付费订阅失败，这是苹果风控机制的正常现象，非卡问题，一般等待数日即可自行解除。
我之前在订阅Youtube Premium等服务时也遇到过类似问题，可以尝试等几天。

写在最后

通过低价区订阅的Claude Pro，功能上跟美区等其他区是一样的，没有任何区别，这点不用担心。
平时注册个尼区和土区账号都挺方便的，早晚有用，推荐大家常备。
关于我自己目前都订阅了哪些服务，可以参考我的App订阅清单一文。

使用Gemini CLI

Thu, 27 Nov 2025 22:05:13 +0800

安装

brew install gemini-cli

# 或者使用npm
npm install -g @google/gemini-cli

升级

brew upgrade gemini-cli

登陆

gemini进入回话后，/login进行登陆，当前gemini免费g3，因此可以选择Google账户进行使用。

安装Figma MCP

官方维护的Figma MCP。

gemini extensions install https://github.com/figma/figma-gemini-cli-extension

# 卸载
gemini extensions uninstall figma

登录报错

错误1

Failed to login. Message: This account requires setting the GOOGLE_CLOUD_PROJECT or GOOGLE_CLOUD_PROJECT_ID env var. See https://goo.gle/gemini-cli-auth-docs#workspace-gca

错误2

│ │ Failed to login. Message: Your current account is not eligible for Gemini Code Assist for │ │ individuals. To use Gemini Code Assist for individuals you must be 18 years old or older. If │ │ you think you are receiving this message in error, please ensure you have verified your age and │ │ try to log in again. │

统一解决办法

执行如下命令 npx https://github.com/google-gemini/gemini-cli.git#feat/ineligible-tier-error

如果提示年龄，那就手动更新年龄或提交证件信息进行年龄验证，通过后，CLI重新登录即可。我自己测试是这样解决的。

WakaTime小程序客户端

Sun, 23 Nov 2025 12:03:49 +0800

平时喜欢用WakaTime来统计编程时间的朋友，可能会觉得在手机上查看数据不太方便。于是我就做了小程序版，但N年前烂尾了，核心是因为颜值不行，自己都不喜欢。不过现在有了AI，我就打算重新用AI来重新辅助进行开发，于是经过几个小时的coding，还说的过去的v2.0就出炉了。之后再根据实际的诉求不断迭代吧。

说明

该小程序只是个WakaTime的客户端，所有数据都来自WakaTime官网，所以需要你本身就注册了WakaTime账号，并且在你常用的IDE中安装了WakaTime插件，才能统计数据。
考虑到侵权问题，这里就不直接叫WakaTime小程序了，改成CodeTracker小程序。这样也可以发展一些其它功能。

小程序

感兴趣的可以试试，看看好玩不。

未来

我自己实际用起来的话，还是发现有些点子的，比如可以配置个定时推送，每天晚上7点推送今天的coding情况之类的。再比如coding的时长会有有个虚拟人物来表示，比如coding时间太长，眼镜就是黑眼圈之类的。总之先把基础功能做起来，后续再慢慢迭代吧。

Waline评论实现邮件通知

Sun, 16 Nov 2025 20:15:11 +0800

博客系统之前就接了waline评论系统，最新发现网友有评论文章咨询问题，但是没有通知功能导致我没及时回复。查询发现waline评论系统有支持通知配置，因此搞了下，这里mark下基本实现过程。方便后续自己回顾。

通知方案

微信因为压根没开放Bot接口，有也是Hack的，因此放弃。TG太频繁了，个人觉得邮件更合适。

邮件服务商

这里我还是用我的QQ邮箱。反正只是作为发送方，找个不容易被当垃圾邮件的邮箱即可。

QQ的话，需要登录邮箱获取授权码，作为SMTP的邮箱登录密码使用，注意不是邮箱密码。

说明：实际测试发现授权码可以用在多个客户端，比如我这里用到了2个Waline server。

Waline Server端配置

我这里是vercel部署的Waline server，因此只需要配置环境变量即可。

配置后重启服务即可。

环境变量名	说明
SMTP_SECURE	true
SMTP_USER
SMTP_PASS
SMTP_SERVICE	QQ
SITE_URL
SITE_NAME

更多配置项，见官方文档

效果

写在最后

Waline评论系统的邮件通知功能还是挺方便的，尤其是对于博主来说，可以及时收到评论通知，方便互动。希望未来Waline能继续完善这方面的功能，提供更多的自定义选项。
对于轻量级博客系统来说，Waline是一个不错的选择，评论系统搭建和配置也都很方便，给开源点赞。

参考文档

Waline评论通知

Claude Code下自定义斜杠命令

Tue, 11 Nov 2025 23:01:33 +0800

最近开发的项目需要部署到开发机器，虽然可以走流水线，但有时嫌慢，还是一句SCP命令更直接。由于平时习惯cc cli了，虽然也可以!去执行bash命令，但是总觉得不够舒服，因此摸索了下Claude Code下自定义斜杠命令的方法，分享如下。

配置

项目目录 .claude/commands/，比如创建deploy-dev.md,内容的话，md写下命令描述，代码块里写脚本，比如

npm run build
scp -r ./dist user@dev-machine:/path/to/deploy

保存后，重新进入cc, cli，输入 /deploy-dev 即可执行。

权限

由于scp属于敏感命令，默认肯定是没权限的，要么启动cc时候，--dangerously-skip-permissions。要么就是执行询问时候，选择允许不要再次询问，即加入了项目的命令白名单即可。

总结

这里只是个简单的应用，当然实际上可以自然语言描述，丰富该命令操作。总之按需使用即可。
claude code的cli目前肯定算是最好的AI Cli了，总之用好的话，效率提升还是很明显的。

Claude Code + Codex联合使用教程：双AI编程工具配置与实战指南

Sun, 09 Nov 2025 22:57:38 +0800

平时主要是使用Claude Code,但是Pro会员给的额度实在是不多，经常出现超额，只能等周额度或者小时额度重置，因此决定再找个backup，DS价格低但是质量还是差点意思，因此决定尝试一下Codex，没想到确实很可以了。不过由于两者毕竟不是一家公司的产品，因此在使用上还是有一些区别的，下面就简单记录一下两者结合使用的经验。

持续更新

要求

Codex的话需要Plus或者其它级别会员，免费用户不可用。
Claude Code的话需要Pro会员或者Max会员，也可以是API付费用户。

项目配置文件

codex下使用/init是可以生成Aegnts.md文件，而cc下使用/init是生成CLAUDE.md文件。平时如果两个都单独维护太麻烦了。我个人的话，是这样。agents.md下增加一句句read CLAUDE.md for more details on development commands, project architecture, and key directories.。实际测试发现codex就可以自动也读取CLAUDE.md文件的内容了。这样之后就可以单独维护CLAUDE.md文件了。当然你也可以反过来，只维护agents.md文件，然后在CLAUDE.md文件下增加一句read AGENTS.md for more details on development commands, project architecture, and key directories.。这点看个人喜好了。

自定义命令

claude与codex的自定义命令是不同的，因此这点无法复用，只能单独进行配置。如果你没有该需求，可以忽略。

写在最后

目前单说cli的体验，cc是完胜codex的，比如会话恢复，cc是登陆后可以，而codex必须是启动命令直接要选，而且codex的会话没有做repo隔离，导致还可以选其它repo的，这点体验并不好。
codex的代码质量跟claude比，个有千秋，比如结合figma mcp生成的稿子代码，肉眼可见的比cc强，但平时coding又觉得cc更好些。总之各有优点。
目前考虑到额度问题再结合成本，选择了GPT Plus+Claude Pro的方案，两个会员本身除了CLI也可以使用Web端，因此也不算很亏，如果你也纠结claude额度不够用，可以考虑这个方案。

Codex + Figma MCP Server配置教程：AI自动生成前端代码实战指南

Sun, 09 Nov 2025 22:13:30 +0800

cc结合figma mcp还不错，但是最关键是cc的额度有限，不够了只能周刷新额度了。正好手里也有订阅GPT，因此这里尝试结合Codex和figma mcp，官方并没有介绍如何解决codex的使用，经过尝试发现是可以走通的，效果还不错，so 这里介绍下。

要求

figma dev权限或更高full权限
ChatGPT会员
- 我这里需求并不算大，因此开通的GPT Plus。
- 目前codex并不提供免费用户使用。

Codex配置

配置文件位置：~/.codex/config.toml

experimental_use_rmcp_client = true

[mcp_servers.figma_local]
url="http://127.0.0.1:3845/mcp"

这里我是走的本地mcp server，因此需要安装本地Figma MCP。

配置完成后，可以codex命令启动，如果MCP真的连接失败会有报错，没有任何异常即成功了。

说明：experimental_use_rmcp_client表示启用实验特性即支持http stream，如果不开启，无法接入figma mcp server。

使用

Figma中拷贝图层链接
codex下自然语言沟通，让其根据设计进行代码生成/修改即可。

Assets下载

关于资源下载的文件名/位置等信息，利用提示词进行约束就行了。

个人感受

codex比claude的还原度个人觉得更高些，当然仅限于figma稿子还原这点，其它的话，claude coding还是最强的。不过即使是codex,还做不到完整还原，都是需要后期修改调整的，不过已经很不错了，省事了不少。
claude pro会员的周额度肯定是不够的，如果你也这样，可以考虑跟我一样，同时订阅GPT plus+cc会员，成本的话，目前是250CNY/月。

Claude Code + Figma MCP Server配置教程：AI驱动设计稿转代码

Sat, 01 Nov 2025 23:46:44 +0800

项目视觉设计提供的是figma文件，而figma最近有发布官方mcp server，因此这里尝试结合ClaudeCode和figma mcp来进行设计稿的代码生成/修改。

要求

figma dev权限或更高full权限
claude code会员或API Key使用如果使用其它客户端可以不需要claude code会员

Claude Code配置

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

# 检查mcp列表，确定是否正确添加
claude mcp list

使用

在Figma中选择一个图层节点
右键点击该节点，选择“Copy Link”选项
- Mac下可以使用热键 Cmd + L 进行拷贝。
在Claude Code中粘贴该链接，自然语言告诉AI使用该figma设计稿子进行代码生成/修改即可。

使用感受

效果已经很不错，但是谈不上100%还原，很多时候都有些瑕疵，需要手动去调整下。

PB生成 Grpc Web和Grpc SDK

Fri, 10 Oct 2025 17:40:07 +0800

最近开发web3js，需要重新玩grpc,整理下牵扯的grpc-web和grpc。

首先pb生成grpc和grpc-web的代码是不同的。因此必须使用不同的插件来生成代码。

PB生成grpc-web

生成的代码是commonjs格式的。
生成代码可以是js，同时包含dts定义。
mode根据需要设定，其实两种模式都可以选择，只是说跟后端比如代理网关有关。

 protoc --proto_path="$PROTO_PATH" \
 --js_out=import_style=commonjs,binary:"$OUTPUT_DIR" \
 --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:"$OUTPUT_DIR" \
 "$relative_dir/$proto_filename" \
 -I "$PROTO_PATH"

PB生成grpc

需要安装grpc_tools_node_protoc_ts包，支持生成TS定义。
需要安装grpc-tools，其中工具是grpc_tools_node_protoc。

 # 使用 grpc_tools_node_protoc 一次性生成 JS + TS
 grpc_tools_node_protoc \
 --plugin=protoc-gen-ts=../../node_modules/.bin/protoc-gen-ts \
 -I="$PROTO_PATH" \
 --js_out=${IMPORT_STYLE}${OUTPUT_DIR} \
 --grpc_out=grpc_js:${OUTPUT_DIR} \
 --ts_out=grpc_js:${OUTPUT_DIR} \
 "$grpc_proto"

PB文件中依赖的第三方包

比如import "google/api/http.proto"，需要下载google的proto文件，放到指定目录下，避免生成时报错找不到对应包。

写在最后

综上就生成对应WEB JS和NodeJS的grpc客户端代码了。

Claude桌面App配置Chrome DevTools MCP教程：AI调试网页完整指南

Mon, 29 Sep 2025 14:46:00 +0800

Chrome 官方推出了 MCP 工具，也就是 AI 可以方便操作 Chrome 部分功能了。这里我测试玩一下，因为平时搞文章翻译之类的，流程总是，翻译，打开网页，拷贝粘贴，有了 MCP，按理可以自动化。实际操作发现配置还有坑，因此这里 mark 下。

安装 chrome Devtools Mcp

理论上 Claude 下增加如下配置即可，但注意 mcp 程序依赖于 node,因此不同 mcp 可能版本要求不同，比如 chrome-devtools-mcp 要求 node22+。

{
 "mcpServers": {
 "chrome-devtools": {
 "command": "npx",
 "args": ["chrome-devtools-mcp@latest"]
 }
 }
}

注意：配置文件修改不还是提示报错的话，可能需要重启 Claude App。

nvm 下安装 chrome-devtools-mcp 会有报错。

比如我的 Mac 下有使用 nvm 进行 node 版本管理，本地有 16-22 N 个版本。而上面也提到了 chrome-devtools-mcp 要求 node22+，因此如果当前 nvm 使用的版本低于 22，则会报错。

Claude 使用的哪个版本呢？目前来看使用的是第一个版本，因此比如我这里就是 v16。如何解决呢

本地卸载 22 以下版本
直接配置里换成本地方式使用 chrome-devtools-mcp

这里由于开发需要我选择方案 2。因此 Claude 下配置就会是这。

npm install -g chrome-devtools-mcp

{
 "mcpServers": {
 "chrome-devtools": {
 "command": "/Users/alanhe/.nvm/versions/node/v22.15.1/bin/node",
 "args": [
 "/Users/alanhe/.nvm/versions/node/v22.15.1/lib/node_modules/chrome-devtools-mcp/build/src/index.js"
 ]
 }
 },
 "globalShortcut": ""
}

实际测试 OK。

Claude Project 下使用 MCP

实际使用场景里，我经常是在 Project 下使用 MCP。发现提示词在编写时需要注意，比如明确要求 AI 严格执行步骤，比如某一步打开网页之类的，这样可以尽可能确保 MCP 执行生效，否则会出现不 work 的问题。

写在最后

目前 chrome-devtools-mcp 功能是 OK 的，但是我发现比如让它执行打开网页，拷贝内容到网页中的某个输入框，看到一个字还是打字机效果，因此很慢，够慢的话，那就还不如人工了，因此个人觉得目前 chrome-devtools-mcp 的实用性不高。但可以尝尝鲜。

关于网页剪贴板拷贝失效问题

Thu, 25 Sep 2025 15:07:08 +0800

最近一个项目用的腾讯tea组件，其中有个Copy组件，依赖的是copyToClipboard，而copyToClipboard依赖的是document.execCommand('copy')，这个API其实有坑，这里总结下。

遇到的问题

IP网址下，节点Element进行全屏时，点击Copy组件，拷贝无效。

Copy组件的包依赖关系

Copy组件的实现

本质就是Document创建一个不可见元素，填充文本，然后选中，执行document.execCommand('copy')，然后移除这个不可见元素。

分析

document.execCommand(‘copy’)，首先是不提倡使用了，但还是需要用，主要是其在浏览器没有赋予剪贴板Clipboard 权限时还能拷贝。
document.execCommand(‘copy’)，在Chrome下节点元素全屏时无效，不报错，但不work。
Clipboard作为新的API，在非HTTP S站点也是不支持的，因此比如内网站点，Clipboard也是不work的。

解决方案

优先使用Clipboard API，报错时拿document.execCommand(‘copy’)兜底。
利用document.fullscreenElement判断是否全屏，全屏时不需要兜底了，直接提示用户。

使用hugoblox

Wed, 24 Sep 2025 12:15:03 +0800

之前博客从hexo迁移到hugo，使用的是hugoblox主题框架，经过半年的使用，觉得不错，这里分享一些使用心得。

hugoblox升级

建议过段时间就检测升级下，避免太过时，以后不好升级维护。

hugo mod get -u

注意，上述只是升级这个博客模版框架，而不是hugo本身。升级hugo的话，其实就是构建环境调整，如果是本地那就是用brew等方式升级即可。

定制化-插入自己的代码

hooks,编写自己的代码片段即可，文件名任意，如意，多个代码片段的话，顺序就是文件顺序。支持hooks清单见官方文档。
layouts下直接编写新的布局文件
重写默认的布局文件，比如single.html，直接拷贝_vendor/github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind/layouts/_default/single.html到layouts/_default/single.html，然后修改即可。

写在最后

祝玩好

OpenAI Codex是什么？安装配置与使用完全指南

Sun, 14 Sep 2025 21:28:58 +0800

Codex是OpenAI推出的代码工具，也提供CLI接口。因为订阅了ChatGPT Plus，所以也可以使用Codex。这里就介绍下Codex的使用。

前置要求

需要解决网络问题，可以正常使用。比如终端中要可以正常访问openai服务。

Codex付费使用

Claude Code是付费的，使用方式有两个

需要有OpenAI账号，并且订阅ChatGPT Plus。

GPT的订阅价钱为20刀/月，当前还有低价区，但是很快就要取消了。我个人目前走的土耳其区AppStore订阅，价格大概为100元人民币/月。

走OpenAI API key，进行按量计费。

使用

安装codex-cli

npm i -g @openai/codex

权限

codex与cc一样，对于一些敏感操作，比如scp,rm等等会有授权确认提示，如果你想跳过这些提示，可以启动命令时直接添加参数，这样会话时都不会再提示。

codex --dangerously-bypass-approvals-and-sandbox

用量限制

codex与cc一样都有用量限制。

本地任务：普通用户每5小时可发送30至150条消息，并设有每周上限。云端任务：限时享有宽松的使用限制。最适合：每周需要进行几次集中编程会议的开发者使用。

具体说明见官方文档

查看用量情况

vsc下codex插件安装后可以查看用量情况。

目前的感受

速度上相对Claude是慢慢慢。
自动执行这块觉得比Claude的Sonnet模型更好。
功能缺失，比如执行Shell命令，命令行工具没自动升级。这俩功能对我来说是刚需。
代码生成方面还不确定，需要大量使用才能给出结论。

写在最后

对于订阅GPT Plus的用户，推荐用用，别浪费。
普通AI CLI用户，cc还是codex，看个人喜好，有一个就行了。

Claude Code ccstatusline 安装教程：实时监控额度、模型与使用情况

Thu, 28 Aug 2025 09:00:17 +0800

在~/.claude/settings.json下加入如下配置，即可查看Claude Code 消耗、使用模型等信息了。如果没有该配置文件，则手动创建即可。

{
 "statusLine": {
 "type": "command",
 "command": "npx ccstatusline@latest",
 "padding": 0
 }
}

注意，终端下执行npx ccstatusline@latest也可以进行自定义显示组件。具体配置方式唤起后，根据提示操作即可。

Claude Code太贵怎么办？接入 DeepSeek 的低成本使用教程

Fri, 22 Aug 2025 21:13:36 +0800

平时我订阅Claude的Pro会员，但额度有限经常出现用完的情况，之前DeepSeek发布了v3.1，同时还提供了兼容ClaudeCode的API接口，今天我就试着连上DeepSeek玩了玩。对于访问ClaudeCode有网络问题或者额度不足的都可以试试DS。个人觉得还行，这里就mark下操作姿势吧。

Claude Code CLI 和 Claude

首先需要有个认识，Claude Code CLI是不需要翻墙的，因为它本身是通过Anthropic的API来访问Claude模型的，同时CLI有暴露环境变量设置从而能够指向非Anthropic的API地址，因此我们可以通过设置环境变量来指向DeepSeek的兼容接口，从而使用DeepSeek的模型。

Shell配置

打开~/.zshrc或~/.bashrc文件，添加以下内容：

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN=sk-
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat

其中ANTHROPIC_AUTH_TOKEN的话，访问 https://platform.deepseek.com/api_keys 获取即可。

配置后，重新开启终端会话或者source ~/.zshrc或source ~/.bashrc使配置生效。

唤起 Claude Code

终端下输入claude即可。如果正确配置代理，则会看到打印的信息里有代理后的服务地址。

│ • API Base URL: │
│ https://api.deepseek.com/anthropic

到此就可以使用DeepSeek版的ClaudeCode了，使用体验与Claude一致，毕竟只是换了模型。

灵活切换deepseek和claude - 升级玩法

如上的方式下，开启后只能使用DeepSeek的模型，如果想切换回Claude的模型，就得再注释掉环境变量，重新开启终端会话。这样太麻烦了，因此这里提供更灵活的方式。


alias claudeds="claude --settings '{\"env\":{\"ANTHROPIC_BASE_URL\":\"https://api.deepseek.com/anthropic\",\"ANTHROPIC_AUTH_TOKEN\":\"sk-xxxxx\",\"ANTHROPIC_MODEL\":\"deepseek-reasoner\",\"ANTHROPIC_SMALL_FAST_MODEL\":\"deepseek-chat\"}}'"

配置如上命令后，任意终端会话下，如果需要使用deepseek的模型，则输入claudeds即可，如果需要使用Claude的模型，则输入claude即可。这样就不用来回操作环境变量了。

说明：命令行传递的settings优先级最高，但会merge本身在目录下和用户主目录下的配置文件，并不是就不读取了。

目前DS的问题

实际使用后，个人觉得DS还是差一点。

请求速度比Claude慢一些，但还能接受。
AI理解上不如Claude，比如让AI翻译MD文章时不要修改某些meta字段，还是会改。另外AI生成代码还不如Claude。不过毕竟便宜，且用在一般的场景下，还是可以的。
还不支持多模，对比图片。

注意资费

DeepSeek API注册时会赠送一些额度，如果不够用了，需要充值，因为DS比Claude还是便宜的，因此资费会小点。但平时还是注意下，毕竟Claude Code方式还是费token的。

我玩了1h用DS来做文章中英翻译，花费3元多，还行。

写在最后

个人觉得DS搞兼容接口挺好的，也省得开发一个独立CLI了，对于用户来说，也多了个便宜的方式使用ClaudeCode。虽然目前DS的速度和代码质量不如Claude，但对于一般的使用场景还是可以满足的。so，没玩的同学可以试试。

使用corepack

Tue, 12 Aug 2025 10:47:17 +0800

在翻看metamask-extension源码时候看到package.json中有个字段"packageManager": “yarn@4.9.1”，但在npm中查看yarn，最新版还是1.22.22，奇怪，那么实际项目怎么安装这个v4的yarn呢。仔细查下发现，其中是使用了corepack来做包管理器和版本管理。

说明

corepack是nodejs下官方项目，非第三方。当前最新版为v0.34.0。

如何使用corepack呢

corepack enable


# 使用yarn,pnpm,npm等正常进行安包

yarn install
pnpm install
npm install

当执行该包命令时，corepack会自动切换到指定版本，如果没有该包管理器或者该版本包管理器都会自动进行安装和切换使用。

corepack是内置的吗

从 Node.js v16.9.0 开始，Corepack 是 Node.js 的内置特性

corepack默认启用吗

实际测试发现比如nodejs v20也没有默认启用，还是需要手动corepack enable。

写在最后

个人觉得corepack确实解决了痛点，因为不同版本包管理器在安装依赖时会有不同行为，经常造成lock文件变动，神烦，这样大家统一包管理器及版本，lock的变动就很稳定了。当然如果不是在项目下的话需要使用包管理器，比如yarn,还是需要自行全局安装了。

Claude Pro美区订阅教程：开通方法、支付方式与 Claude Code 使用说明

Mon, 04 Aug 2025 18:16:02 +0800

最近2个原因导致我决定订阅Claude Pro，1是Claude Code太火了，2是GPTs的对于系统提示词的理解总是掉链子即逻辑性还是不够强，因此决定尝试一下Claude Pro。这里mark下我是如何解决Claude Pro美区订阅的。

前置要求

网络，本身Claude AI服务在国外，如果本身访问WEB版有困难，那Claude Code也一样，建议先解决网络再说。
苹果非国区账户，比如美区账户。
Visa信用卡，中国大陆的信用卡就行。

购买礼品卡

推荐使用Apple官网进行购买即可，支持Visa支付。具体使用教程可以参考下美区AppleID支付问题

兑换礼品卡

登录Apple ID账户，进入账户设置页面，点击“兑换礼品卡或代码”，输入购买的礼品卡代码即可。

下载安装Claude Pro

手机端或PC端都行，直接在App Store搜索“Claude”即可找到。

https://apps.apple.com/us/app/claude-by-anthropic/id6473753684

Claude Pro的权益

使用Claude客户端，可以使用Claude Chat的模型，比如sonnet等。
终端下可以使用Claude Code，不需要二次付费。这里因为是终端所以也就跨平台了，只要有终端就可以使用Claude Code。

写在最后

个人觉得Claude目前是最强的coding模型，其它方面的话，还是GPT更强一些，大家按需使用即可。

小程序头像昵称获取

Mon, 04 Aug 2025 15:30:00 +0800

最近处理小程序，发现微信小程序中获取用户头像和昵称有变动，当然官方文档给的容易让人搞错。这里mark下当前方案。

当前方案如下

wx.getUserProfile-服务端解密获取用户信息

注意：wx.getUserProfile不再提示授权弹窗，但会正常获取encrypted_data/code/iv信息。消息体里的userinfo只是为了兼容老版本，不要使用。

小程序端支持用户修改头像/昵称信息

1. 头像获取

使用 <button open-type="chooseAvatar"> 让用户主动选择头像：

<!-- wxml -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
 <image class="avatar" src="{{avatarUrl || '/images/default-avatar.png'}}"></image>
</button>

// js
Page({
 data: {
 avatarUrl: ''
 },

 onChooseAvatar(e) {
 const { avatarUrl } = e.detail
 this.setData({
 avatarUrl: avatarUrl
 })

 // 可选：上传到服务器
 this.uploadAvatar(avatarUrl)
 },

 uploadAvatar(tempFilePath) {
 wx.uploadFile({
 url: 'https://your-server.com/upload',
 filePath: tempFilePath,
 name: 'avatar',
 success: (res) => {
 console.log('头像上传成功', res)
 }
 })
 }
})

2. 昵称获取

使用 <input type="nickname"> 让用户输入昵称：

<!-- wxml -->
<form bindsubmit="onSubmit">
 <input
 type="nickname"
 class="weui-input"
 placeholder="请输入昵称"
 value="{{nickname}}"
 bindinput="onNicknameInput"
 />
 <button formType="submit">保存</button>
</form>

// js
Page({
 data: {
 nickname: ''
 },

 onNicknameInput(e) {
 this.setData({
 nickname: e.detail.value
 })
 },

 onSubmit(e) {
 const { nickname } = e.detail.value
 if (!nickname.trim()) {
 wx.showToast({
 title: '请输入昵称',
 icon: 'none'
 })
 return
 }

 this.saveUserInfo(nickname)
 },

 saveUserInfo(nickname) {
 // 保存到本地或服务器
 wx.setStorageSync('nickname', nickname)
 wx.showToast({
 title: '保存成功'
 })
 }
})

写在最后

微信小程序的文档还是如此烂，大家只能一边恶心，一边用吧，珍重。

Claude Code是什么？安装、配置与使用完全指南

Fri, 01 Aug 2025 17:27:10 +0800

Cursor 出圈之后，Claude Code紧接着横空出世，万万没想到终端下写代码竟然也可以这么厉害，当时看到出圈很好奇，就上手玩了下，第一步就踩坑，在折腾几回后，终于用上了，我想说真不错。这里就mark下基本的使用。

前置要求

网络，本身Claude AI服务在国外，如果本身访问WEB版有困难，那Claude Code也一样，建议先解决网络再说。
虚拟卡或者苹果非果区账户，两者有其一就行。具体原因下面会提到。

Claude Code付费使用

Claude Code是付费的，使用方式有两个

Claude订阅用户，比如Claude Pro或者更高的Max等订阅：
- 个人觉得苹果App Store订阅是最方便的，比如我这里Apple官网购买礼品卡，然后iPhone上登陆美区账户，直接订阅即可。具体怎么美区购买APP，可以参考美区AppleID支付问题。
Anthropic Console account账户，直接绑定信用卡，进行按量计费，如果没有比如美国信用卡，只能使用虚拟信用卡了。我这里之前用的nobepay,但是官方停止申请新卡了，所以这里目前不做推荐。

我个人选的是Claude Pro订阅，毕竟有其他功能可以用。之前订阅的GPT正好到期了，先不续订GPT了。

Claude安装

安装的话，直接使用以下命令：

curl -fsSL https://claude.ai/install.sh | bash

官方已废弃npm安装方式，不推荐使用了。

终端代理

PC 本身全局代理

shell配置proxy

在终端profile(~/.bashrc或~/.zshrc)下设置环境变量，使用以下命令：

export http_proxy=http://127.0.0.1:6152
export https_proxy=$http_proxy
export all_proxy=$http_proxy
export HTTPS_PROXY=http://127.0.0.1:6152
alias disproxy='unset http_proxy https_proxy all_proxy'

使用

Claude使用上的话，初级比较简单。

输入claude，首次会进入登陆，选择对应方式进行登陆。
进入交互模式，直接描述问题，Claude会自动识别并给修改。如此不断反复即可。

复杂的使用，推荐查看官网即可。

用量查看

/usage即可查看，或者Claude App下也可以查看。

自动接受修改

要么设置里全局修改，要么命令行启动时设置该参数。如果你想一劳永逸，也可以在项目下.claude/settings.json下直接添加该配置。避免每次都要修改。

claude --permission-mode acceptEdits

对于非敏感项目，我其实更喜欢设置为yolo模式，即"defaultMode": "bypassPermissions"。

使用Agent/Skills

比如我个人的话，为了节省token，我自己的博客并不想用Claude来做翻译，那么我就可以配置一个DeepSeek 翻译Agent，这样Claude Code在遇到翻译需求时，就会自动调用DeepSeek来做翻译，从而节省token。实际调用的话，有如下几个方式。

手动，交互模式下@agent或者skills即可，也可提示词上直接明确使用该工具。
系统提示词约定好xxx场景使用目标agent/skills即可。配置后则实际交互中，AI会自动调用对应agent/skills。

mcp

mcp是为了拓展CC能力。

# 查看安装的mcp
claude mcp list

注意

部分mcp不work的时候，大概率就是mcp没通，上述命令其实也会健康度检查，如果连接不上，建议直接拷贝执行mcp执行命令来确认问题。
部分mcp对于node版本要求较高，可以考虑升级到最新的node版本。

权限

无论是mcp还是cc自身，权限都是个问题，每次手动授权安全但也繁琐，有些操作可以考虑直接权限加白。

# 直接开放某个mcp下所有tool权限
"mcp__chrome-devtools"

Bash下的命令补全

在之前的版本cc就说了退出了命令补全，我怎么玩都不work，最近的新版本说支持了历史命令补全，我这次玩才work。可能上一次只是底层的支持，而这次真正的能用了，当然仅限于历史，其实对标传统的shell，这个叫autosuggestion，并不是autocomplete，真要是补全，应该是一堆的选项，你去选择才对。

具体效果如下图。

注意

首次不会有补全提示，你只有输入并成功执行一次了，cc才会记录历史，进而下次进行匹配建议。
这里cc的bash历史是单独存储，并非用的zsh/bash的历史文件，验证方式是你把全局的清空，这里还是可以有补全。
因为这里其实是autosuggesion所以每次只提示一个，你不断的调整，建议会不断的变化。

个人觉得如果能够支持把命令本身的补全建议全拿到提示会更棒，期待cc继续迭代强化吧。

Solo模式

对于一些敏感操作，比如scp,rm等等会有授权确认提示，你可以在提示时选择不再提醒，本质就是AI将该操作加入项目下的配置白名单，但其它操作还是会提醒，这里也可以一劳永逸，直接授权AI全部权限。这样等价于Gemini的Solo模式。

claude --dangerously-skip-permissions

写在最后

目前Claude Code的使用体验还是不错的，虽然在国内使用可能会遇到一些网络问题，但整体上还是很方便的。希望这份指南能帮助到有需要的朋友们。

了解Tailwind

Thu, 24 Jul 2025 18:10:37 +0800

最近一个开源项目需要做个H5版，决定试试Tailwind，这里mark下我对它的认识和使用后的感受。

学习资料，当然首推官网，这里主要说下我的粗认识。

定位

CSS框架，不是UI组件库，也不是UI组件CSS，比如它并不等价Bootstrap。

使用方式

直接CDN加载JS即可，淡然坏处就是全量加载了，体积问题需要考虑。
PostCSS插件形式，很方便接入Webpack、Vite等构建工具。这种方式相当于构建环节生成最终CSS，按需加载，体积小。

特点

原子化CSS，好处就是按需用很舒服，可以组合很多样式，坏处就是类名会很多
样式名字很表意，玩多了就会很熟悉，能快速上手

实际使用的项目

最近小程序项目采用的Taro+Webpack，Taro支持Tailwind，因此也很方便的就接入使用了。
移动网页H5项目的话，因为使用的Webpack，所以也可以接入Tailwind。

Tailwind vs Bootstrap

比较并不合适，但对于小白用户来说，是可以了解其差异的。

Bootstrap 是一个 UI 组件库，即最终产品是一个遵循 Bootstrap 设计系统的预先设计的按钮。
Tailwind 是一个 CSS 实用程序库，即最终产品是一组以示意图定义的 CSS 类，可供您以示意图方式构建自己的按钮。

这两个是针对不同用例的不同工具。

写在最后

Tailwind个人觉得足够简单和纯粹使得它可以成为一个很好的CSS框架，实际项目中也并不影响使用其它UI组件库样式等，因此是个很好的工具，确实适合快速开发。

嵌套对象的keyof

Tue, 22 Jul 2025 18:27:32 +0800

需求

interface User {
 parent: {
 name: string;
 };

 age: number;
 name: string;
}

type Column = {
 key: keyof User;
};

const columns: Column[] = [
 {
 key: 'name'
 },
 {
 key: 'name1'
 },
 {
 key:'parent.name'
 }
];

解决办法

type Paths<T> = T extends object ? { [K in keyof T]:
 `${Exclude<K, symbol>}${"" | `.${Paths<T[K]>}`}`
}[keyof T] : never

type Column = {
 key: Paths<User>;
};

除了自己写Paths类型外，还可以使用现成的库，比如type-fest中的Path类型。

效果

const columns: Column[] = [
 {
 key: 'name'
 },
 {
 key: 'parent.name' // ok
 },
 {
 key: 'parent.name1' // error
 }
];

NotebookLM 音频播客实测：目前的几个缺点

Fri, 27 Jun 2025 23:09:16 +0800

NotebookLM玩了几个月了，其中音频概览即语音播客功能属于高频使用的功能，这里总结下目前我发现的一些缺点吧。

音色/声速

目前不支持提示词控制语音讲解速度，不能选择男女人声的音色，比如选择输出语言为中文，那么男女人声都是固定的了。

互动模式

PodcastLM的互动模式，支持你参与其中语两位主持人之间沟通，但目前不支持中文。假如输出的播客为中文，则无法看到互动模式的按钮。

播客输出语言只能全局设定

造成我如果修改了输出语言，则新输出的任意notebook的播客都是该语言。

写在最后

查看官方发现NotebookLM还有一些功能即将推出，只能希望早点推出，如果真需要购买，只要足够好，可以考虑。

如何使用API提交百度收录

Fri, 02 May 2025 22:33:53 +0800

最近需要提升百度搜索对于我博客的收录量，因此决定使用百度收录的API提交方法，这里介绍下具体步骤。

访问百度搜索资源平台

点击对应站点域名，查看普通收录 - 资源提交 - API提交。可以看到token信息。注意该token即该站点提交收录信息所需要的token，不能随意泄露给他人。

提交收录

这里以我的hugo博客为例。下面为nodejs实现代码，任何语言均可。

const SITEMAP_FILE = path.join(__dirname, '../public/sitemap.xml'); // sitemap.xml 文件路径
const BAIDU_API_URL = `http://data.zz.baidu.com/urls?site=1991421.cn&token=${process.env.BAIDU_ZZ_TOKEN}`; // 百度提交 API 地址
const MAX_URLS = 5; // 提交的最大 URL 数量

async function submitToBaidu(urls) {
 try {
 console.log('正在提交URL', urls);
 const response = await fetch(BAIDU_API_URL, {
 method: 'POST',
 headers: {
 'Content-Type': 'text/plain'
 },
 body: urls.join('\n') // 将 URL 列表用换行符拼接
 });

 if (!response.ok) {
 throw new Error(`HTTP 错误: ${response.status}`);
 }

 const data = await response.json();
 console.log('提交成功:', data);
 } catch (error) {
 console.error('提交失败:', error.message);
 }
}

我的用法

目前我是将提交百度收录的代码放在github action，每天repo构建后会生成sitemap.xml文件，脚本提取sitemap中前N条最新的URL提交到百度收录。

常见问题

API提交URL额度

额度是每天10条
如果单次提交超过额度，直接报错，返回400

400报错

API提交常会遇到400报错，常见原因如下

额度不足
token错误
site错误，注意site不要携带协议，比如我博客是site=1991421.cn

写在最后

虽说百度恶心，但为了考虑国内的用户，还是需要提交下的。希望能有点效果吧。如果你有其他更好的方法，欢迎在评论区留言讨论。

博客从hexo迁移到hugo

Wed, 30 Apr 2025 18:26:20 +0800

博客使用hexo已9年，虽然hexo还活着，但hexo主题匮乏，视觉疲劳，且定制成本还是太高了。因此这里借着假期，我决定尝试把迁移到hugo。

具体步骤

安装hugo

brew install go

brew install hugo

注意，hugo版本过高有时会有报错情况，以我这里为例，在使用hugoblox时出现hugo启动报错，最终解决办法是下载安装hugo@0.134.2。如果大家遇到奇怪的报错问题，可以考虑降级解决。

使用hugoblox

hugoblox是个高级框架，这里使用hugoblox来简化主题的定制和开发功能。它提供了丰富的功能和灵活的定制选项，适合各种需求。

访问hugoblox主题库，选择主题，注意如果是付费的主题，并没有编辑按钮，是需要单独购买。这里我选择了免费的主题，点击Edit，会跳转到GitHub。在GitHub下点击基于模版创建仓库。创建OK后，剩下的工作就是主题配置了。

主题定制

本地git拉取创建的仓库。参考官方教程可以进行部分简单的定制修改。

这里举几个例子

开启站内检索
favicon图标
分享按钮等等，设置项很多。

hexo 文章迁移到hugo下

主题配置完成后，接下来是博客迁移，因为我的站点已运行多年，搜索引擎和其它平台也有收录了URL，因此需要保持原有的URL不变，这里就有一些工作要做。

hexo 元数据description修改为summary。
hexo 元数据addrlink修改为slug。

hugo配置文件url规则修改。

permalinks:
blog: '/:year/:month/:day/:slug/' # 输出: /2025/04/30/my-post/

补充问题

安装低版本hugo

brew等包管理器下并没有低版本hugo，上述版本错误出现时需要手动安装指定版本。这里推荐直接GitHub下载指定版本tag下的二进制包，比如Mac的话，下载darwin-universal.tar.gz

执行如下命令拷贝到目标目录

 mv $HOME/Desktop/hugo_0.134.0_darwin-universal/hugo /opt/homebrew/bin/

执行会提示安全风险，隐私安全中，选择打开。之后即可正常使用，比如输入hugo version，查看版本号。

写在最后

到此博客就迁移完成了，总耗时1天。

VSC下dart开发指南

Mon, 28 Apr 2025 11:19:22 +0800

最近需要搞下flutter，主要开发工具为vscode，因此这里介绍下基本的工具/环境配置。

工具

vscode - 编辑器
- vsc下安装dart插件，flutter插件
fvm - flutter/dart版本管理工具。
Android Studio - 安卓模拟器，SDK版本管理。

dart插件使用tips

在pubspec.yaml中修改依赖后，默认是自动更新，但比如是git分支依赖，需要手动唤起命令，选择pub upgrade即可。尽量别删除lock来解决。
插件使用的dart版本优先级为编辑器设置Sdk路径，其次为全局path设定路径。因此比如设置不配置，全局走fvm global也可行。

使用taro开发小程序

Fri, 18 Apr 2025 11:23:32 +0800

最近有个项目小程序开发，因为过去的N年使用的技术主要是react，所以经过权衡，决定使用taro，毕竟taro支持react进行编写。这里积攒了一些经验，总结下，以备之后查。

Get Started


# 建议使用最新稳定版本，大版本号v4。
npm i -g @tarojs/cli

taro init

# 如果未来计划使用taro-ui，则需要选择sass，因为taro-ui使用的sass，统一没坏处。

npm install taro-ui

官方初始指南，戳这里

UI组件库

taro-ui

也调研了下其它的，考虑到维护和使用的便捷性，最终选择taro-ui。

@import "~taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式二

配置文件下添加如下

esnextModules: [’taro-ui’],

一些类库-轮子

表单状态管理，可以使用react-hook-form
状态管理，可以使用redux
网络请求，可以使用axios
二维码生成，可以使用taro-code

常见问题

白屏

没有具体的报错，这时可以尝试直接升级taro相关包版本，升级后，重新构建打包。

Component is not found in path “wx://not-found”.

开发环境下OK，但生产构建打包报错。分析发现是taro bug,组件嵌套超过了3层，路径出现问题。建议不要超过3层嵌套。

写在最后

taro帮忙填了小程序语法糖极端不舒服的坑，给react开发小程序提供了很好的支持。
可用，能用，当然也是一堆的问题，比如构建打包我总遇到奇怪报错，但总体来说，还是能用的。毕竟免费，要啥自行车。

fvm使用指南

Tue, 15 Apr 2025 17:44:50 +0800

flutter项目多的话，也面临跟nodejs项目一样的多版本环境维护问题，好在有同类产品fvm，这里就简单介绍下。

安装

brew install fvm

安装某个版本

fvm install 3.19.2

注意，当安装后fvm list会发现dart等模块并没有安装，而是提示需要配置。这个需要真正使用时才会安装即fvm use。

使用某个版本

fvm use

use后会发现真正开始安装，安装完成后，重新执行list则会看到dart版本信息。

生成项目下的fvm配置

fvm use *** --save

注意save后则会生成项目下的配置，以后直接fvm use即可。

全局包版本设定

有时为了方便使用需要全局设定版本，这样不用每次都fvm命令操作了，具体设置方式如下。


# zshrc下配置PATH
export PATH="$HOME/fvm/default/bin:$PATH"

# 设置全局版本
fvm global

# 取消全局版本
fvm global -u

TS编译打包

Wed, 02 Apr 2025 18:01:02 +0800

项目中，关于打包时的ts编译，看到有些用ts,ts-loader,babel-loader,没懂几者什么区别，因此调研总结下。

TSC

官方提供的编译器，本身编译中包含了类型检测，当然也可以设置关闭。只是建议开启，不然TS的价值就体现不出来了。

ts-loader

ts-loader 是 webpack 的 loader，其底层编译用的就是tsc，只是可以配置关闭类型检测，从而提升编译速度

babel-loader

babel本身是个很强大的编译器，其中ts的编译只是babel的插件之一.但注意babel的编译速度快是有代价的，比如没有类型检测。因此安全起见的话，还可以搭配其它使用，比如ForkTsCheckerWarningWebpackPlugin。

用哪个？

目前从我所在team来看，ts-loader，babel-loader都可以，不同项目可能用的不同，纯粹喜好了。

前端基础题-P3

Wed, 02 Apr 2025 14:56:19 +0800

AI发展看样子可以替代IT？当然不是，还早，关注AI没错，但不要忘了基础，基础是根本，AI是工具，工具再强大，也离不开人的操作。最近看到一个关于JS数组的问题，分享一下。

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const list2 = [,undefined, null, '', 0, false, NaN, 1,];

for (let item of list) {
 console.log(item);
 list2.map(item => console.log(item));
}

console.log('list2.length', list2.length);

// 1、输出啥
// 2、list2长度是多少

输出

1
undefined
null

0
false
NaN
1
2
undefined
null

0
false
NaN
1
3
undefined
null

0
false
NaN
1
4
undefined
null

0
false
NaN
1
5
undefined
null

0
false
NaN
1
6
undefined
null

0
false
NaN
1
7
undefined
null

0
false
NaN
1
8
undefined
null

0
false
NaN
1
9
undefined
null

0
false
NaN
1
10
undefined
null

0
false
NaN
1

8

考察点

数组头部,意味着前面有个空槽,但是尾部的话，并不会多一个空槽。
数组遍历，空槽元素不会触发callback，但注意是不触发callback，而不是不执行，因此每次的index都是正确的，比如第一个打印出来会是1，而不是0。

Webpack会有6吗

Wed, 02 Apr 2025 11:35:50 +0800

Webpack 5 已经发布很久了，好奇 Webpack 6还会有吗，还是说Webpack之后就退出历史舞台？最近翻了下Repo，得到了答案。

查询资料发现v5发布于2020年。

有Webpack 6吗？

YES，Webpack还远没到退出历史的阶段。Webpack仍然是使用最广泛的构建工具之一，并且仍然在积极开发中。

Roadmap for Webpack 6?

目前并没有对外公布的v6计划，开发团队聚焦于Webpack 5的稳定性和性能优化。并非所有好的功能推出都需要一个大版本号。

其它构建工具往往以性能优势作为卖点，Webpack如何响应呢

Team意识到了这个问题，并且在Webpack 5中引入了一些性能优化，且持续在优化。

写在最后

实际team中，Webpack仍然是主要构建工具，部分项目使用vite。

参考

https://github.com/webpack/webpack/issues/16377

React Hook Form使用指南

Mon, 31 Mar 2025 14:18:19 +0800

表单作为用户交互中常见形式，值的验证/状态管理是个问题。

在react技术栈下中React Hook Form包名: react-hook-form功能强大，对于复杂表单管理，是个不错的方案。为了能灵活恰当的使用它，这里把常用场景/使用/容易忽略的点/核心原理做一个总结，如有疏漏，请斧正。

使用🔨

实际使用中，我们常用的可能只是useForm/Controller/getValues，hook-form还有其他一些方法/配置，这里就介绍下。

useForm中的mode

mode不同，影响表单校验的时机，比如validate之后的errors获取，会有所不同。。

mode缺省值是onSubmit

export const VALIDATION_MODE = {
 onBlur: 'onBlur',
 onChange: 'onChange',
 onSubmit: 'onSubmit',
 onTouched: 'onTouched',
 all: 'all',
} as const;

注意：mode影响的验证策略，form一直会感知到值得变化，Validation strategy before submitting behaviour.

reValidateMode

注意：如果mode本身配置了onChange，那么reValidateMode没意义。

useFormContext

hook，如果form是一个N级的组件树，那么这样复杂嵌套的表单项的管理和form控制参数传递就成了问题。我们需要将create form创建的的control/setValue等等传递给子组件，子组件再传递给下级组件，一层一层传递，非常麻烦。如果是使用useFormContext，那么就可以直接在组件内部管理form的值，而不需要一层一层传递。

层层传递

Context

<FormProvider {...formProps}>
...
</FormProvider>


const {control} = useFormContext();

useFieldArray

hook，有时数据存在数组/List类型。比如动态添加项，使用useFieldArray会更为方便。

 const { fields, append, prepend, remove, swap, move, insert } = useFieldArray(
 {
 control, // control props comes from useForm (optional: if you are using FormProvider)
 name: 'test' // unique name for your Field Array
 }
 );

注意：不使用useFieldArray仍然可以使用数组，只是不够方便


<Form.Item label={'Person 0'}>
 <input
 {...register('persons.0', {
 })}
 />
 </Form.Item>

watch

watchfunc，useWatch用来监听关心的字段变化，或者所有字段当前的值，但假如想知道每次变化哪个字段，或者批量watch用于逻辑处理的话，可以使用watch方法。

useEffect(() => {
 const wFn = watch((data, {name}) => {
 console.log('column changed', data, name) // data为修改后最新值集合
 });
 return wFn.unsubscribe;
 }, [])

注意：订阅时需要注意需要取消订阅。

watch vs useWatch

react-hook-form中有两个watch方法，一个是useWatch，一个是watch。useWatch是hook方法，watch是函数方法。在针对单个字段的订阅，可以使用watch，也可以使用useWatch，但推荐使用useWatch。WHY ?

const allFieldWatch = useWatch({
 control,
 name:['price'], // 如果name不传，则是watch所有字段
 })

const priceWatch = watch(['price']);

register

 <input
 {...register('address', {
 validate: (s) => {
 console.log('address validate', s);
 }
 })}
 />

注意：

name支持嵌套写法，比如persons.0，address.city。
针对数组，是可以直接以非0下标开始注册。

register vs Controller

如上所说，register适合原生，Controller适合高阶表单组件，如第三方。

<Form.Item label={'Person 0'}>
 <input
 {...register('persons.0', {
 // valueAsNumber: true,
 })}
 />
 </Form.Item>
 <Form.Item label={'Person 1'}>
 <Input
 {...register('persons.1', {
 // valueAsNumber: true,
 })}
 />
 </Form.Item>

PS: 官方更提倡更提倡使用register。

Controller vs useController

Controller本质即调用的useController，因此一样，仅仅使用方式的不同，一个组件标签，一个hook函数。

const Controller = <
 TFieldValues extends FieldValues = FieldValues,
 TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 TTransformedValues = TFieldValues,
>(
 props: ControllerProps<TFieldValues, TName, TTransformedValues>,
) =>
 props.render(useController<TFieldValues, TName, TTransformedValues>(props));

export { Controller };

reset`func`/ setValue

reset方法如果没有声明字段值，则会重置为defaultValues设置的值。
```
reset();
```
reset操作是面向所有字段进行重置，并非部分字段。比如reset只标注了A字段，那么其它字段则会是undefined.
如果想reset单个字段，应该使用setValue法或者reset时候携带所有字段值
```
 reset({
 ...getValues(),
 price: 111
})
```

注意：有setValue，而没有setValues，因此setValue实现多值，只能自己遍历处理

shouldDirty

setValue时候的第二个参数中有shouldDirty，表示是否需要设置dirty状态。当设置为true时，form会去校验dirty状态，从而确定更新dirtyFields。比如如果跟defaultValues对比没有变化,那么dirtyFields就会有值。

注意：reset之后，defaultValues可能会被更新为新设置的值。

valueAsNumber/valueAsDate

 <input
 {...register('quantity', {
 // valueAsNumber: true,
 })}
 />


// "quantity": "2121212121"
// "quantity": 2121212121

如果是Controller方式，需要自行实现，比如field.onChange(Number(value))

dirtyFields

formState中有dirtyFields，表示当前表单中被修改过的字段。当需要判断表单哪些字段被修改过时，可以使用这个属性。

```shell
 const {isDirty, dirtyFields} = useFormState({
 control
 });

官方推荐-实践👊

transform/parse

react-hook-form介绍的transform和parse只是个实践，并不是内置的功能。

const form_fields = [
 {
 name: 'price',
 transform: {
 output: v => +v
 }
 },
 {
 name: 'num'
 },
 {
 name: 'quantity'
 }

]

 {
 form_fields.map(item => <Form.Item label={item.name}>
 <Controller key={item.name} render={({field}) => <Input {...field}
 onChange={v => {
 return field.onChange(item?.transform?.parse ? item.transform.output(v) : v);
 }}
 />} name={item.name}
 control={control}/>
 </Form.Item>)
 }

配套-yup等校验类库

常见的类库有 yup/Joi/Superstruct/zod。

const schema = yup
 .object()
 .shape({
 price: yup.number().required(),
 quantity: yup.number().min(1).max(100).required(),
 })
 .required();

const formProps = useForm({
 ...,
 resolver: yupResolver(schema),
});

注意：触发校验还是取决于mode的设置。

常见问题❓

setValue 值为null

当我们在设置值为null/undefined时，受控表单组件不会正常渲染更新。

这点是由于react对于受控组件处理机制，而非hook-form的特殊处理。

setValue('price', null, {
 shouldDirty: true,
});

const [inputValue, setInputValue] = useState(1_0);
<div>
 <label>
 <span>姓名</span>
 <input value={inputValue}/>
 </label>
 <button onClick={() => {
 setInputValue(5);
 }}>
 设置为空
 </button>
 </div>

解决办法

比如如下，在render时处理下。

<input value={inputValue??''}/>

源码👀

这里通过阅读hook-form的部分源码，解答一些问题。

包依赖 - zero dependency

react-hook-form没有dependency，只有peerDependencies。因此只要是react项目，就可以正常使用react-hook-form???

"peerDependencies": {
 "react": "^16.8.0 || ^17 || ^18 || ^19"
 },

比如微信小程序开发框架taro是使用的react进行开发，那么如果需要表单校验的话，可以使用react-hook-form吗？

答案：YES。

一段taro小程序代码如下，UI表单组件使用的taro-ui

 const { control } = useForm({
 mode: 'onChange',
 });

...

<Form>
 <Controller
 control={control}
 name="name"
 render={({ field }) => <AtInput {...field} title="Name"/>}
 />
 <Controller
 control={control}
 name="test"
 render={({ field }) => <AtInput {...field} title="Test Input"/>}
 />
 </Form>

resolver原理

react hook form之所以能够跟不同的schema验证库对接，是因为单独有个包 - @hookform/resolvers 对各个库做了对应的适配支持。

2. resolver中根据formState的值结合schema进行校验，之后按照约定返回格式错误信息给form。

...
if (result.error) {
 return {
 values: {},
 errors: toNestErrors(
 parseErrorSchema(
 result.error,
 !options.shouldUseNativeValidation &&
 options.criteriaMode === 'all',
 ),
 options,
 ),
 };
 }
...

性能好?

避免不必要的re-render。
使用原生表单注册机制 + ref 管理。
Controller 实现受控组件的最小渲染。
按需解构状态，而非一次性全部读取。

useWatch原理

本身是在hook的effect中调用了form.control的subscribe方法，来监听表单值的变化，一旦值变动了，则会更新value对象。

export function useWatch<TFieldValues extends FieldValues>(
 props?: UseWatchProps<TFieldValues>,
) {
 ...
 React.useEffect(
 () =>
 control._subscribe({
 name: _name.current as InternalFieldName,
 ...
 callback: (formState) =>
 !disabled &&
 updateValue(
 generateWatchOutput(
 _name.current as InternalFieldName | InternalFieldName[],
 control._names,
 formState.values || control._formValues,
 false,
 _defaultValue.current,
 ),
 ),
 }),
 [control, disabled, exact],
 );

 const [value, updateValue] = React.useState(
 control._getWatch(
 name as InternalFieldName,
 defaultValue as DeepPartialSkipArrayKey<TFieldValues>,
 ),
 );
...
 return value;
}

补充信息🔗

react-hook-form什么时候推出的

查询发现，react-hook-form于Mar 3, 2019发布的第一个版本，目前也属于高频维护。

包大小

当前版本：v7.56.3，GZIP压缩使用的包体积为11KB左右。

支持接入第三方UI-表单组件

比如tea-component、mui、antd。

其它form方案选择

SFTP 续传完整指南：ssh2-sftp-client 断点续传实战教程

Fri, 21 Mar 2025 00:00:00 +0800

之前使用ssh2-sftp-client来实现了终端文件上下载，同时因为支持流方式，所以做到了分片上传和下载，同时也就有了进度条。但传输时候网路是有不确定性的随时中断，那么就需要断点续传。这里了解了下ssh2-sftp-client的实现，发现实际上支持断点是具备可行性的。

put/get方法

put/get方法的第三个参数是options。其中有writeStreamOptions/readStreamOptions。这两个对象仔细查看定义，会发现其中有一个start参数，这个参数表示从哪个位置开始传输。

有了这个参数，就可以实现断点续传了。

export interface ReadStreamOptions extends ReadableOptions {
 flags?: OpenMode;
 mode?: number;
 start?: number;
 end?: number;
 autoClose?: boolean;
 handle?: Buffer;
}

export interface WriteStreamOptions extends WritableOptions {
 flags?: OpenMode;
 mode?: number;
 start?: number;
 autoClose?: boolean;
 handle?: Buffer;
 encoding?: BufferEncoding;
}

理论上的实现

以上传为例，传输成功后，前端记录下已传输的位置，确定断点位置。这样假如说网络终端，下次传输还是以断点位置开始传输即可，本质来说，断点传输跟分片传输其实是一样的。

nextjs项目构建发布速度优化

Thu, 20 Mar 2025 00:00:00 +0800

最近接触一个项目使用的nextjs，构建发布整个时间消耗为12min，或者更长。查看整个构建过程，发现还是有优化点的，这里mark下。

说明

CD流水线使用的腾讯Coding。

优化前logic

流水线拉取后直接走docker构建，dockerfile中有如下几步

builder中间过程，npm install安装包
next build，打包前端资源
run流程，安装包，next启动项目

优化后

先说时间，平均为6min，目前最快为5min。

CI流水线加载自定义镜像环境进行build，这里使用nodejs镜像
挂载/root/workspace/.next/cache和npm缓存
自定义镜像下进行打包，且选择next standalone模式
docker build 构建镜像不需要多步骤，只CP next所有资源进目录，node server.js启动

说明下，优化后打包的镜像为300MB，优化前为2GB。

总结

尽可能的降低构建时间，从而提升交付速度。

EventEmitter中的once处理

Tue, 18 Mar 2025 00:00:00 +0800

EventEmitter初版

class EventEmitter{

 constructor(){
 this.events={}
 }

 on(type,listener){
 if(!this.events[type]){
 this.events[type]=[]
 }
 this.events[type].push(listener)
 }


 emit(type,...args){
 this.events[type].forEach(listener=>{
 listener.call(this,...args)
 })
 }

 off(type,listener){
 if(this.events[type]){
 const index=this.events[type].indexOf(listener)
 if(index!==-1){
 this.events[type].splice(index,1)
 }
 }
 }


 once(type,listener){
 const onceListener=(...args)=>{
 listener.call(this,...args)
 this.off(type,onceListener)
 }
 this.on(type,onceListener)
 }
}

测试

const eventEmitter=new EventEmitter()
const listener=(args)=>{
 console.log(args);
}
eventEmitter.once('test',listener)
eventEmitter.off('test',listener)
eventEmitter.emit('test',{a:1})

执行上述代码，会发现test事件被触发了一次，预期应该是不执行的，因为off了。解决办法如下。

once失效

...
 off(type,listener){
 if(this.events[type]){
 const index=this.events[type].findIndex(l=>l.fn===listener||l===listener)
 if(index!==-1){
 this.events[type].splice(index,1)
 }
 }
 }

...

 once(type,listener){
 const onceListener=(...args)=>{
 listener.call(this,...args)
 this.off(type,onceListener)
 }
 onceListener.fn=listener
 this.on(type,onceListener)
 }

写在最后

多看源码

VSC WebView中加载node_modules资源

Mon, 17 Mar 2025 00:00:00 +0800

最近开发的gitlink插件遇到个问题，在WebView中加载node_modules资源，当然也可以直接使用CDN资源，只是速度上来说不如直接加载本地资源，因此这里解决下如何加载node_modules资源。

配置

npm安装依赖

npm install @highlightjs

注意是依赖不是开发依赖。

webview配置localResourceRoots

 const panel = vscode.window.createWebviewPanel(
 'codeImage',
 'Code Snippet Image',
 vscode.ViewColumn.Beside,
 {
 enableScripts: true,
 retainContextWhenHidden: true,
 localResourceRoots: [
 vscode.Uri.joinPath(extensionContext.extensionUri),
 ]
 }
 );

这里直接使用extensionContext.extensionUri作为localResourceRoots，这样就可以直接拓展中的node_modules资源了。

在webview中加载资源

<link rel="stylesheet" href="node_modules/@highlightjs/cdn-assets/styles/github-dark.min.css">

注意使用相对路径写法不要使用绝对路径写法，决定路径并不支持，WEB地址支持。

HTML中href路径处理

const readHtml = async (htmlPath: string, panel: vscode.WebviewPanel) =>
 (fs.readFileSync(htmlPath, {
 encoding: 'utf8'
 }))
 .replace(/%CSP_SOURCE%/gu, panel.webview.cspSource)
 .replace(
 /(src|href)="([^"]*)"/gu,
 (_, type, src) =>
 `${type}="${panel.webview.asWebviewUri(
 vscode.Uri.file(path.resolve(htmlPath, '../../../', src))
 )}"`
 );


this._panel.webview.html = await this._getHtmlContent(code, language, options);

 let htmlTemplate = await readHtml(
 path.resolve(this._extensionContext.extensionPath, 'resources/webview/index.html'),
 this._panel
 );

比如我这里是这么处理的，即将html中的所有资源根据html所处的路径，处理下，最终得到node_modules资源路径的相对拓展的路径即可。

注意

.vscodeignore文件中不需要添加node_modules文件夹，否则打包会不携带node_modules。

写在最后

如上即可解决在WebView中加载node_modules资源的问题，这样假如之后需要升级，只需要npm update包，之后重新打包即可。

VSC拓展国际化支持

Fri, 14 Mar 2025 00:00:00 +0800

最近开发的VSC拓展需要做下国际化，发现官方文档介绍这里是空白，只是给了个例子，这里就总结下如何做国际化。

国际化部分也分几种情况，菜单国际化和拓展内容的国际化，比如提示信息。

菜单国际化

配置package.json

 "contributes": {
 "commands": [
 {
 "command": "gitlink.openInGitHub",
 "title": "%command.openInGitHub.title%"
 }
 ]
 }

注意title使用key形式，key需要%进行包裹。

项目根目录下国际化JSON文件

如下是两种语言，默认英文和简体中文，如果需要其他语言，可以添加对应的JSON文件。

package.nls.json
package.nls.zh-cn.json

内容格式如下

{
 "command.openInGitHub.title": "Open in GitHub"
}

拓展内容国际化

创建l10n文件夹

在项目根目录下创建l10n文件夹。

配置package.json

{
 "l10n": "./l10n",
}

执行抽离资源命令

执行下面的命令会从src目录下抽离出所有字符串形成国际化JSON文件

npx @vscode/l10n-dev export --outDir ./l10n ./src

注意文件中需要如下使用才可被正确抽离

vscode.l10n.t('Congratulations, your extension "GitLink" is now active!')

创建目标语言JSON文件

测试

到此国际化就配置OK了，实际运行中，尝试把VSC进行修改，就可以体验到不同的语言了。

参考

https://github.com/microsoft/vscode-extension-samples/tree/main/l10n-sample

HTTP请求报文中的Host字段

Thu, 13 Mar 2025 00:00:00 +0800

最近刷到一个前端问题在发送 http 请求报文时，Host 是必要的吗，我平时没注意这点，因此简单查了下，这里总结下

Host必要性

需要，比如同一个机器，实际上可以多host绑定同一个端口。比如我的博客服务器里，有绑定1991421.cn,en.1991421.cn等等。如果没有host，实际上我也不清楚，我到底应该访问哪个。

Chrome Network下看不到Host

H2开始，使用的是:authority字段。
如果查看H1，请求，可以看到Host字段。

当我们服务端去查看时，一般都可以正常使用req.host,因为往往框架会磨平了字段不同的差异。

Cloudfare安全检查

Mon, 10 Mar 2025 00:00:00 +0800

最近群里收到消息一个朋友在填写manus的waitlist时遇到有报错，他以为是站点的问题。我查看了一下，发现是Cloudflare的问题，确定了问题也就好解决了。我直接使用我的代理节点，帮忙填写了表单。通过这个小问题，也说明了很多人没注意到Cloudflare的安全检查，这里就简单总结下。

Cloudflare安全检查结果

如上截图，是manus网页下的Cloudflare的安全检查页面。图1是成功，图2是失败。

接入了Cloudflare的站点，在访问时，Cloudflare会进行安全检查，如果检查不通过，就会导致进一步操作失败，比如无法表单提交。

安全检查检查什么

基础安全验证
Bot 检测
威胁情报检查
DDoS 防护检查等等，总之简单点，比如IP不行也会导致检查不通过。

需要注意的是

如果您在中国大陆访问，由于 CF 的很多 IP 被墙，可能需要使用代理
某些正常的代理或 VPN 可能会触发 CF 的安全检查
检查的严格程度可以由站点所有者在 CF 控制面板中调整

作为访问站点用户，如何解决安全检查

更换代理节点，如果是国内，需要加代理，因为CF很多IP已被墙。

比如我自己使用的Surge，规则中有如下配置，即CF会命中走指定节点代理。

DOMAIN-SUFFIX,cloudflare.com,Final-select

写在最后

这里就浅浅的了解下CF的安全检查。因为我目前个人搭建的站点还需要服务国内，因此暂时不考虑使用CF。

node-sass 停止维护

Mon, 10 Mar 2025 00:00:00 +0800

最近看一个老项目的依赖包升级，注意到node-sass已停止维护了，特地记录一下。

主要原因

1. 维护人力不足

最近的维护团队已经没有足够的带宽（精力和时间）继续更新项目
node-sass 已经一年半没有新的发布版本

2. 技术演进历程

node-sass 是最早在 JavaScript 生态系统中可用的官方 Sass 编译器
它本质上是 LibSass 的 Node.js 包装器
现在官方推荐使用 Dart Sass 作为主要实现

3. 当前状态

npm 包已被标记为废弃（deprecated）
GitHub 仓库已被归档，以避免与活跃的 Sass 仓库产生混淆
底层的 LibSass 实现：
- 虽然被废弃但尚未完全终止生命周期
- 维护者 Marcel Greter 仍在偶尔进行修复
- 已无官方支持的方式从 Node.js 使用此实现

迁移建议

如果你当前还在使用 node-sass，官方强烈建议迁移到主要实现 Dart Sass。

历史意义

这个变化标志着 Sass 生态系统的重要转变：

最初在 Ruby 社区发展
node-sass 帮助它在 JavaScript 生态系统扎根
现在转向 Dart Sass 作为主要实现

参考来源

Node Sass is end-of-life

Cursor中使用Firecrawl MCP

Sun, 09 Mar 2025 00:00:00 +0800

功能

先说下调用Firecrawl MCP能做些什么。

支持抓取、爬取、搜索、提取、深度研究和批量抓取
使用 JS 渲染进行网页抓取
URL 发现与爬取
带有内容提取的网页搜索
自动重试与指数退避
内置速率限制的高效批量处理
云 API 的信用使用监控
全面的日志系统
支持云端和自托管的 FireCrawl 实例
移动/桌面视口支持
智能内容过滤，支持标签包含/排除

配置

Cursor里配置Firecrawl MCP Server启动的命令。

env FIRECRAWL_API_KEY=your-api-key npx -y firecrawl-mcp

# Windows
cmd /c "set FIRECRAWL_API_KEY=your-api-key && npx -y firecrawl-mcp

当前我手里只有Mac，因此windows并没测试。

可用工具

可以看到，Cursor里已经集成了Firecrawl的所有工具。因此只需要自然语言与Cursor对话，即可使用Firecrawl的所有工具。

效果

说明：提示词越详细，越可以准确调用firecrawl的工具，越能得到更准确的信息。我这里只是简单测试了下。

总结

AI爬虫firecrawl目前觉得还不错，如果需要爬取网页数据，可以考虑使用。

GitLink for VSCode: 跨平台代码分享的无缝体验

Sun, 02 Mar 2025 00:00:00 +0800

JetBrains下我经常使用GitLink插件，主要实现了一键拷贝当前文件的git web链接，这样交流代码非常方便。最近因为工作需要，使用VSCode多些，我发现VSCode下同类插件很少，且还不好用。为了使的更顺手些，我决定自己动手，开发一个VSCode插件。这里就介绍下我现在开发的 Beautiful GitLink。

实际效果

先上效果

功能

无论是资源管理器，还是文件编辑器下均可以一键拷贝当前文件的git web链接。
拷贝内容格式支持：链接/markdown链接/包含code snippet的markdown链接。
支持一键打开git web链接。
内置支持了我目前常用的git平台，当然也支持自定义git平台及自定义平台URL模版。

目前内置支持的git平台

目前内置支持的git平台如下，当然即使不够也不用担心，因为插件支持自定义git平台，可以自行添加即可。

GitHub
GitLab
Gitee
腾讯Coding
腾讯工蜂(社区版，内网版)

安装

https://marketplace.visualstudio.com/items?itemName=AlanHe.cn-alanhe-gitlink

配置同步

VSC本身支持配置同步，所以你只需要在VSCode中登录你的GitHub账号，然后就可以在其他机器上同步配置了。如果是Cursor IDE，需要自己手动同步配置或者安装某个同步插件了。

数据安全

插件不牵扯服务器端，不收集任何用户数据。

写在最后

插件还会持续维护和开发，欢迎大家提issue。

GitHub Action构建实时监控网页排名

Thu, 20 Feb 2025 00:00:00 +0800

最近有需求监控一个的活动中某个参赛作品的排名情况，尴尬的是该活动自己没有一个排名页面，活动数据是分页且无序的。因此这里想到了用GitHub Action来构建一个实时监控网页排名的工具。

实现思路

GitHub Action设置schedule cron定时任务，比如每10分钟执行一次。
执行脚本请求网页的API接口，获取数据信息，这里我想对熟悉JS，因此采用nodejs来实现。
根据数据信息，计算排名情况，处理成需要的数据。
根据数据，更新到HTML。
SSH连接到服务器，上传HTML文件。
同时发送数据到TG，做到IM即时通知。

最终产物

HTML页面，展示排名信息，每10分钟刷新一次
TG机器人，发送排名信息

GitHub Action使用补充

GitHub Action的cron表达式目前不支持设置时区
GitHub Action针单个账号/组织，非public仓库，执行是有额度的，目前为2000分钟，如果超了将停止使用额度情况：https://github.com/settings/billing/summary
GitHub Action中执行环境有MacOS，如果有需要可以配置选择使用Mac环境

写在最后

搭建上述一套连带开发也就个把小时时间，不得不说GitHub Action确实强大，借此可以玩出很多花样，上述的定时Job和爬虫也只是冰山一角，后续可以继续深入。

网页开发-ios键盘底部显示搜索按钮

Thu, 20 Feb 2025 00:00:00 +0800

网页的输入框在手机侧触发输入时会唤起系统键盘，其中如果想键盘底部显示搜索按钮是需要设置的。

input type=“search”

如下设置后，实际测试iOS下并不会显示搜索按钮，但Android下会显示。

<input type="search" />

enterKeyHint=“search”

如下设置后，实际测试iOS下会显示搜索按钮。同时也保证了android手机能够正常显示。

<input type="search" enterKeyHint="search" />

search事件触发

Android下，当用户按下搜索按钮时，会触发search事件。但iPhone下，当用户按下搜索按钮时，只是触发enter事件。因此需要监听enter事件，并判断是否是搜索按钮。

el.addEventListener('search', (e) => {
 console.log(e)
})

el.addEventListener('enter', (e) => {
 if (e.key === 'Enter') {
 console.log('搜索')
 }
})

写在最后

如上即可解决在iOS/Android下输入框唤起键盘时，底部显示搜索按钮的问题。

参考

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint

ESLint使用指南

Wed, 19 Feb 2025 00:00:00 +0800

常用插件

 "eslint-config-tencent"
 "plugin:react/recommended",
 "plugin:@typescript-eslint/recommended",
 "plugin:react-hooks/recommended"

WebPack插件实现变量名自动修改

Fri, 14 Feb 2025 00:00:00 +0800

以前做了个webpack插件domain-replace-loader，主要是实现将前端JS中域名进行替换，比如替换为新的域名或者全局window的JS属性，这样就避免了需要人工检索所有repo仓库。但有些需求并不是替换域名。最近就接到了同事提过来的需求，即需要将代码里的变量名进行替换。比如原先叫T_PROJECT, 需要自动修改为P_PROJECT。为此我改造了下插件，使其支持了变量名自动修改。

改造思路

本身插件能做到替换的关键点是利用esprima解析代码，然后分析每个token，然后根据token的类型进行操作。

可以看到属性对象的type是Identifier，因此只需要判断属性对象的name是否符合要求，如果符合要求，则进行替换。

需要注意的点是，替换时需要注意性能开销。

关键代码

if (item.type === 'Identifier') {
 const {value} = item;
 let res = value;
 q?.forEach((obj) => {
 res = res.replace(obj.reg, `${obj.value}`);
 });
 if (value === res) return;
 source = source.replace(value, res);
 }

写在最后

当支持了变量名自动修改后，其实可以实现很多有意思的功能。比如关键词脱敏，当然关键词脱敏如果要支持，这里需要不止Identifier，本身字符串也要开启替换。

npm缓存

Thu, 13 Feb 2025 00:00:00 +0800

使用npm开发中会发现，比如将node_modules文件夹删除，然后重新安装依赖，会发现安装速度非常快，这是因为npm有缓存机制。

什么是npm缓存

npm缓存是npm在安装依赖时，将依赖包下载到本地缓存目录，下次安装时，如果依赖包已经在缓存目录中，则直接从缓存目录中获取，而不是重新下载。

如何查看npm缓存


npm config get cache

npm cache ls

不同包管理工具的缓存目录

包管理工具	缓存目录
Maven	/root/.m2/
Gradle	/root/.gradle/
npm	/root/.npm/
composer	/root/.cache/composer/
yarn	/usr/local/share/.cache/yarn/

写在最后

done。

openresty使用指南

Fri, 07 Feb 2025 00:00:00 +0800

最近有需要修改WEB服务的GZIP配置，简单查看network，发现respond头部写着server:openresty/1.21.4.1，因此知道了网关侧使用的是openresty。在跟后端确认后，需要修改GZIP配置，因此需要对openresty进行一些了解。

什么是openresty

openresty是一个基于nginx的web服务器，它集成了nginx的强大性能和lua的动态性。

openresty修改GZIP配置

openresty的GZIP配置与nginx的配置类似，主要通过gzip指令进行配置。

nginx配置路径：/usr/local/openresty/nginx/conf/nginx.conf

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 256;

测试配置

在实际使用中，需要先测试配置是否正确，再进行重启。

openresty -t

重启openresty

openresty -s reload

查看openresty版本

openresty -v

写在最后

目前还只接触到openresty的GZIP配置，后续有接触到其他配置再进行补充。
截至目前还是更喜欢Caddy的配置方式，简洁明了。

vite构建工具下前端浏览器兼容性处理

Fri, 07 Feb 2025 00:00:00 +0800

vite构建工具下官方有提供方案来处理浏览器兼容性。

方案如下👇

安装插件

官方插件

npm install @vitejs/plugin-legacy

配置插件

 plugins: [
 ... ,
 legacy({
 targets: [
 'defaults',
 'chrome >= 55',
 'safari >= 12',
 'not IE 11',
 'firefox >= 52',
 ],
 }),
 ...
 ],

可以看出plugin-legacy让这配置变得比以前简单了，并不需要直接接触browserlist/corejs。

注意

plugin-legacy的配置，由于需要根据目标浏览器来处理polyfill，因此构建耗时会增加。
plugin-legacy本身处理了browserlist/corejs，因此一般情况下都不要手动配置corejs。

写在最后

done。

检测并删除项目中不用的依赖包

Sun, 26 Jan 2025 00:00:00 +0800

最近看一些项目发现依赖包很多，随便拿了几个搜索下，发现并没有用，因此可以删除了。但这样的包，一个个查询检索确认删除还是太麻烦。想着怎么能高效的检测并删除不用的依赖包，基于这个需求，我写了一个小工具。

@stacker/remove-unused-deps

使用方法：项目根目录下执行如下命令，通过交互式选择不用的依赖包，回车即可卸载删除。

npx @stacker/remove-unused-deps@latest

原理

depcheck 主要是该工具很棒，可以检测出项目中不用的依赖包和开发依赖包。但是该包有个缺点是只输出不用的依赖包，但不会主动卸载。因此需要配合其他工具来完成。
fs扫描项目lock文件，从而判断包管理器是yarn还是npm
构建交互式命令行，在用户选择了需要删除的依赖包后，执行对应的卸载命令

特殊情况包

有些包虽然被扫描出来，但可能并不是不用的，而是项目中确实需要用到的。比如项目依赖了包A，包A用到了包B，但是依赖里却没写包B。因此还是需要用户手动确认。

写在最后

有了该工具，可以很方便的检测并删除项目中不用的依赖包。
删除无用包有助于清晰项目依赖，同时避免开发直接看到有包就用，造成项目同时并存多种方案包。
该工具目前只支持yarn和npm，其他包管理器还未支持，这点之后随着需求驱动再支持，

流水线优化-缓存目录

Sat, 25 Jan 2025 00:00:00 +0800

实际项目中，经常会遇到流水线自动化部署，以前端为例，经常需要安包，如果是每次节点服务器都是全量重新拉代码/安npm包，那么速度会很慢，这时候就需要考虑缓存目录的问题。

一般情况，缓存NPM包

适用场景：节点服务器每次都会npm install。但该方案下不满足走docker的情况，因为docker里面执行的npm install，不会影响到宿主机的node_modules。

Docker下，缓存NPM包

pipeline {
 agent any
 stages {
 stage('npm 缓存') {
 steps {
 script {
 docker.image('node:14').inside('-v /root/.npm/:/root/.npm/') {
 sh 'npm install'
 }
 }
 }
 }
 }
}

适用场景：CI节点服务器是每次通过docker build来构建前端镜像，镜像中的构建步骤牵扯到npm install。

缓存开启前后，时间对比

写在最后

流水线无论前后端，都需要考虑缓存目录的问题，以提高流水线的执行效率。

Alfred实现一键打开VSCode项目

Thu, 23 Jan 2025 00:00:00 +0800

最近使用Cursor(VSCode)写代码比较多，但每次打开项目很低效，所以想通过Alfred实现一键打开VSCode项目。调研发现VSCode对于已打开项目是有进行存储记录的，因此技术上可以做到。所以这里就花了点时间，实现了一个Alfred Workflow，来实现一键打开VSCode项目。

当前效果

下载地址: VSCode-Open Project

实现思路

访问DB

VSCode或基于VSCode的Cursor会将最近打开文件/文件夹历史存放在下面的DB文件中。

VSCode $HOME/Library/Application\ Support/Code/User/globalStorage/state.vscdb
Cursor $HOME/Library/Application\ Support/Cursor/User/globalStorage/state.vscdb

注意上述Application Support是包含空格的，因此上述路径在命令行中使用需要\进行转义。

查询DB数据

通过ruby查询从DB中提取最近打开的项目路径，具体是从ItemTable表的history.recentlyOpenedPathsList字段中获取数据，并使用jq解析JSON数据以获项目列表。

Mac内置了SQLite，因此可以直接使用。

输出为Alfred格式

有了数据这里就简单了，按照Alfred Script Filter的格式输出即可。

唤起VSCode/Cursor打开文件

这里有多个方案

URL Scheme
命令行，比如vscode、cursor直接打开目标文件即可。

我这里使用的是URL Scheme，因为VSCode和Cursor都支持URL Scheme。

写在最后

基于上述思路即可实现。有了这个Workflow，打开VSCode/Cursor项目就方便多了。

命令行git操作重复提示账号密码

Mon, 06 Jan 2025 15:02:31 +0800

终端下执行git pull/push等操作总是提示输入账户密码，即使我已经输入过了，但下次操作仍然提示。这里记录下解决方法。

Git提示输入账号密码

Username for 'https://git.xxx.com': Password for 'https://git.xxx.com':

解决方法

打开终端，执行 git config --global credential.helper store 命令，将凭证存储在本地。
执行 git pull/push 操作，输入一次账户密码，下次操作就不会再提示了。

命令影响范围说明

使用 --global 参数时，该设置会影响当前用户的所有Git仓库。配置会被保存在用户主目录下的 ~/.gitconfig 文件中。
如果只想对当前仓库生效，可以去掉 --global 参数，执行 git config credential.helper store，配置会被保存在当前仓库的 .git/config 文件中。

其他解决方案

如果上述操作不生效，可以尝试以下步骤：

先清除已有的凭证配置：

git config --global --unset credential.helper

重新设置凭证存储：

git config --global credential.helper store

写在最后

Git属于高频使用的工具，因此对于常见问题，需要及时记录，以便后续查阅。

nodejs部署在多核机器上是否存在资源浪费

Mon, 06 Jan 2025 00:00:00 +0800

我们server端项目是集群部署，每个POD跑一个docker-nodejs应用，POD配置为CPU2核，内存16G。nodejs是单线程，那么这里是不是存在资源浪费呢。关于这个问题思考下。

应用情况

app.js下起了多个http server，每个server监听一个端口。

这里虽然起了多个端口服务，但还是只占用机器的一个进程，同时nodejs是单线程，所以这里多个WEB服务本身也是跑在一个线程中，它们之间是存在资源竞争。

CPU浪费？

查看现网项目实际情况，发现CPU使用率很低，最高只到18%。

有无可能用到多核？

nodejs应用跑在单个进程下，但nodejs中有些命令比如child_process，cluster，worker_threads，这些命令可以创建子进程，子进程可以跑在不同的线程中，这样就可以利用多核。因此是有存在多核使用的可能性的。

结论

单线程的nodejs应用，在多核机器上，存在资源浪费的可能性。但保险起见以实际负载情况为准
考虑到nodejs是有多进程使用的可能性，多核也没问题。

了解peerDependencies

Thu, 02 Jan 2025 11:05:26 +0800

package.json中除了dependency和devDependency之外，还有一个peerDependency。这里通过解决一个实际报错来了解下它。

报错信息

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: a@0.0.1-beta
npm ERR! Found: ssh2@1.15.0
npm ERR! node_modules/ssh2
npm ERR! ssh2@"1.15.0" from the root project
npm ERR! ssh2@"^1.12.0" from ssh2-sftp-client@9.1.0
npm ERR! node_modules/ssh2-sftp-client
npm ERR! ssh2-sftp-client@"^9.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer ssh2@"1.16.0" from a@0.0.1-beta
npm ERR! packages/a
npm ERR! a@0.0.1-beta
npm ERR! node_modules/a
npm ERR! workspace packages/a from the root project
npm ERR!
npm ERR! Conflicting peer dependency: ssh2@1.16.0
npm ERR! node_modules/ssh2
npm ERR! peer ssh2@"1.16.0" from a@0.0.1-beta
npm ERR! packages/a
npm ERR! a@0.0.1-beta
npm ERR! node_modules/a
npm ERR! workspace packages/a from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/alanhe/.npm/_logs/2025-01-02T02_53_13_141Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alanhe/.npm/_logs/2025-01-02T02_53_13_141Z-debug-0.log

错误分析

项目的直接依赖中，ssh2的版本是1.15.0，而包a的peerDependency中，ssh2的版本是1.16.0。

peerDependency作用是使用a包的项目中在安装ssh2的时候，需要使用1.16.0的版本。因此这里报错了。

解决方案

知道了问题的直接原因也就好解决了。解决办法：升级主项目的ssh2版本即可。

总结

回头来看peerDependencies。就是说它可以约定限制使用了该包的项目中，依赖目标包的版本。即通过该配置你可以限制运行该包的项目中如果依赖该包，版本必须满足要求。
peerDependencies声明包，而主项目dependency没有，目前的npm比如v9是不会直接安装的，除非是有其它包有作为依赖，则还是会安装。

click-to-component源码阅读

Tue, 31 Dec 2024 00:00:00 +0800

click-to-component 是一个react组件，接入后可以实现一键跳转到源码，很大程度提升了开发效率。这里我尝试阅读源码，并记录一些关键点。

源码结构

项目整体使用了pnpm作为包管理工具，使用pnpm workspace管理多个包。

其中packages下的click-to-component-react是核心包，而apps下的是接入该组件包的项目，用于测试验证。

├── apps
│   ├── cra
│   ├── next
│   └── remix
├── package.json
├── packages
│   └── click-to-react-component
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json

源码阅读

源码上从index入口开始解读。

export const ClickToComponent =
 process.env.NODE_ENV === 'development' ? Component : () => null

这里使用NODE_ENV来判断是否是开发环境，如果是开发环境，则返回Component组件，否则返回一个空组件。这样做的好处是生产打包状态下，这个组件不会被引入，从而减少打包体积。

在整个组件加载时，window直接监听了click/contextmenu/keydown/keyup/mousemove/blur事件。当点击时，事件可以获取到目标element元素。

开发状态下，元素的属性中是有__reactInternalInstance$或者__reactFiber开头的属性。这个属性指向的就是fiber对象。

fiber对象中有_debugOwner属性，这个属性指向的就是fiber对象的父级fiber对象。即当使用下面逻辑可以获得层层嵌套的fiber对象直到根fiber对象。

 const instances = new Set()
 let instance = getReactInstanceForElement(element)

 while (instance) {
 instances.add(instance)

 instance = instance._debugOwner
 }

同时fiber对象中有_debugSource属性，这个属性指向的就是源码文件。

 const {
 columnNumber = 1,
 fileName,
 lineNumber = 1,
 } = instance._debugSource

注意:生产打包元素身上也是有fiber属性，但没有debug调试属性信息

当知道了源码文件路径，行列号，只需要搭配URL Scheme就可以跳转到对应的源码文件。vscode有很好的URL Scheme，可以参考vscode的URL Scheme。

写在最后

到此就完成了整个组件的源码阅读，整个组件的实现逻辑并不复杂。但也考察了基础的知识。

react fiber
tree shaking
事件监听
URL Scheme

通过GitHub教育认证，免费使用Copilot

Fri, 27 Dec 2024 21:38:18 +0800

AI代码辅助工具相对做的比较好的就是Cursor/GitHub Copilot/JB的AI Assistant。因为成本考虑我只订阅ChatGPT，但JB IDE下始终还是需要个AI工具。这里决定走学生身份进行GitHub教育认证，从而免费使用Copilot。

申请

申请地址：https://education.github.com/pack

这里按照官方要求填写即可。

注意

并不需要GitHub账号邮箱一定是edu的，只要身份信息认证OK即可
在申请Github学生认证的全程都禁止使用代理（除了Bing地图，下文会提及），并保持给予Github定位权限（必须）

完整的申请指南，推荐看网友贡献的这篇文章

审核快的话当天会收到邮件告知结果。然后几天内就会收到GitHub Pro会员和Copilot。

其它教育认证福利

关于教育认证的福利还有很多，当然不仅局限于GitHub。

比如

JetBrains
Notion
Axure

利用click-to-component提升开发体验

Thu, 26 Dec 2024 00:00:00 +0800

实际开发中，找代码的操作往往是这样，浏览器中拷贝样式或者文案，然后到IDE中搜索。有没有办法直接点击页面任意元素就直接跳转到IDE中打开对应代码文件呢，click-to-component就是这样一个工具。

效果

安装

npm install click-to-component

使用

在render中添加如下代码即可，推荐使用环境变量控制IDE，这样具体开发人员自己控制打开的IDE。如果大家都一致的话，可以写死，比如vscode。

 <ClickToComponent editor={process.env.REACT_APP_CTC_EDITOR} />

注意，ClickToComponent可以放在任意渲染位置，并不要求必须放在根组件中。

依赖

click-to-component只需要你安装并配置该组件到项目中及对应编辑器正常安装即可，不需要其它安装。

锦上添花：如果你安装了react devtools会更好，这样会提升该工具找到组件的速度。

生产打包

ClickToComponent中已经做了环境变量检查，所以生产打包时，只要确保NODE_ENV=production，就不会将ClickToComponent打包到环境中。

JetBrains IDE支持？

官方repo目前仅支持vscode/vscode-insiders/cursor，关于JB IDE的支持，我已经提交了PR，等待合并。如果你着急使用，可以直接关联commit作为版本。

{
 dependencies: {
 "click-to-component": "https://github.com/alanhe421/click-to-component.git#abc56dfb574efcc49cb31e14743e769c5429c85f"
 }
}

JB的使用与vscode比稍微麻烦些。

需要安装JB的插件IDE Remote Control。
IDE需要打开项目。

写在最后

click-to-component的初衷是提升开发体验，减少开发中找代码的时间，提升开发效率。我这里已经使用了一段时间了，很喜欢，推荐大家使用下。
如果你好奇这个工具的实现，推荐查看下具体源码。

了解JetBrains URL Scheme

Wed, 25 Dec 2024 00:00:00 +0800

最近在使用click-to-component时发现并没支持JB IDE的集成，因此花了下时间集成支持了下。这里mark下JB的URL Scheme支持情况

JB IDE本身并没有提供直接的URL Scheme支持，调研后发现方案有如下2个。

JetBrains Toolbox

toolbox安装后即会提供JB 各个IDE支持。

支持IDE清单

IntelliJ IDEA
AppCode
CLion
PyCharm
PhpStorm
RubyMine
WebStorm
Rider
GoLand
RustRover

动作支持如下

checkout某个仓库，使用对应对应IDE打开

jetbrains://${toolTag}/checkout/git?checkout.repo=${cloneUrl}&idea.required.plugins.id=Git4Idea

打开某仓库，某文件及移动到对应行列位置

jetbrains://${toolTag}/navigate/reference?project=${project}&path=${filePath}:${lineIndex}:${columnIndex}

具体的URL Scheme规则见仓库jetbrains-url-schemes

该方案的缺点是没有提供直接打开某个文件的功能。

IDE Remote Control

JB官方有提供官方的IDE Remote Control支持，本质即IDE提供了控制Server，通过HTTP API可以操作IDE。

API规范

 * @apiExample {curl} Absolute path
 * curl http://localhost:63342/api/file//absolute/path/to/file.kt
 *
 * @apiExample {curl} Relative path
 * curl http://localhost:63342/api/file/relative/to/module/root/path/to/file.kt
 *
 * @apiExample {curl} With line and column
 * curl http://localhost:63342/api/file/relative/to/module/root/path/to/file.kt:100:34
 *
 * @apiExample {curl} Query parameters
 * curl http://localhost:63342/api/file?file=path/to/file.kt&line=100&column=34

具体详情见JB官方commit

该方案的缺点是IDE需要安装IDE Remote Control插件。且因为是HTTP服务，可能与本地端口冲突，需要手动修改。

写在最后

上述方案2个均可以实现点击文件跳转，但均存在不足，期待后续JB IDE可以直接提供完善的URL Scheme支持。

gzip压缩无效？

Sat, 14 Dec 2024 22:15:28 +0800

最近有个站点访问特慢，分析后发现其中一个原因就是GZIP竟然没打开。但是配置中也是遇到了问题，这里Mark下。

GZIP的好处

对于JS/HTML等文本文件，压缩后体积为原来的1/3，因此没特殊情况都应该打开下GZIP。
要注意的是Nginx默认是没打开GZIP的，且默认仅对于text/html进行压缩。Caddy默认是打开的。

开启GZIP

这里以Nginx为例，需要如下配置才可以解决目标文件类型的压缩。

gzip on;
gzip_types text/plain application/xml text/css application/javascript application/json text/javascript text/html; # 启用对指定类型的压缩

当我把这个配置加到我们的服务后，发现并不work。原来是修改没覆盖到网关服务。

服务架构

这里要提下服务的架构，简化下会是下面这样。GZIP如果仅配置到B服务，A服务到B服务之间会以GZIP形式快速传输，但由于A服务没有开启GZIP，那么A服务最终丢给浏览器客户端的还会是解压的内容。因此必须A开启配置才work。

当A也打开GZIP，实际测试浏览器收到的就是开启压缩的内容了。那么B到底还需要开启吗，个人觉得开启肯定更好，毕竟AB之间速度可以加快，只是说A开启否更重要。

决定GZIP work的因素

客户端发起请求头中携带了accept-encoding:gzip，这个浏览器默认均会携带。
服务端支持并开启GZIP。

写在最后

GZIP开启虽然简单，但还是要注意它到底是怎么用的。

react-hook-form中的useFieldArray

Fri, 06 Dec 2024 00:00:00 +0800

WEB页面交互，表单是常见的元素，针对表单的校验/管理，react-hook-form是个常用的不错的辅助库。比如其中对于数组值的管理用到的useFieldArray，再比如嵌套复杂的组件表单用到的formContext。了解这些用法，可以更好的去使用它。

场景

在表单处理时，有时会需要处理数组表单项，比如用户可以动态添加N行的表单项。那么useFieldArray就可以面向于这种数组处理的。

例子

function FormTest() {
 const {control, register, getValues} = useForm();
 const {fields, append, prepend, remove, swap, move, insert} = useFieldArray({
 control, // control props comes from useForm (optional: if you are using FormProvider)
 name: "test", // unique name for your Field Array
 });

 console.log(fields, 'fields');
 return (
 <form>
 {fields.map((field, index) => (
 <div><input
 key={field.id} // important to include key with field's id
 {...register(`test.${index}.value`)}
 /></div>
 ))}

 <Button onClick={() => {
 append({
 value: 1,
 })
 }}>
 Add
 </Button>
 {
 JSON.stringify(getValues())
 }
 </form>
 );
}

上述可以看到，当点击Button添加时，fields可以自行插入一个新值，同时每个值也一样可以走register/controller进行监听维护。

注意细节

append值必须是个对象，比如 append(1)就不行。也就是fields维护的必须是对象，比如test.${index}.value就无法设置为test.${index}。

写在最后

表单处理需求推荐尝试下该Lib解决。

iframe下实现站点免密登陆

Sun, 24 Nov 2024 00:00:00 +0800

最近私有化项目遇到个需求就是iframe包含的站点需要实现免密登陆。这里先大概想下几个方案。

站点IP白名单免登陆？

任何一个请求到服务端都是可以在req上拿到请求IP的，因此也就可以做到by ip的登陆，但这个的弊端是用户一旦换了网络环境自然也就不可以登陆了。

同站+跨域

如果两个站点是同站跨域，cookie在写登陆信息时domain写的是父域名，那么在请求时本身就会携带该cookie信息，自然就会免登陆

不同站

如果两个站点不是同站，那么需要解决下登陆。

iframe动态加载时访问的是登陆链接，登陆成功后跳转到目标页面。

monaco-editor实现语法高亮

Thu, 07 Nov 2024 00:00:00 +0800

monaco editor如果想做语法高亮的话，需要配置language，这里介绍下相关操作。

设置语言

如果是初始化时设置语言的话，操作如下

monaco.create(el, {
...
language: 'sol',
 })

如果是动态设置语言的话

const model = editor.getModel();
monaco.editor.setModelLanguage(model, 'json');

monaco内置的语言支持

内置了支持语法高亮的语言有哪些呢，可以通过以下几个方式明确。

程序中获取。

const languages = monaco.languages.getLanguages();

注意，该方式获取的语言数量也是会包含业务中自定义注册的语言的，即并不仅仅局限于内置语言。

访问 https://microsoft.github.io/monaco-editor/ ，直接查看language下拉选项即可。
直接访问npm包 monaco-editor/esm/vs/basic-languages，内置的语言都是在此注册。

注意，每个文件夹的名字并不代表着语言名字，语言名字以ID为准。

按需打包语言文件

monaco editor内置的语言支持很多，如果全量打包未免过大，因此可以按需打包语言。

1.导入monaco editor方式是

# 正确做法
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

# 错误写法
import * as monaco from 'monaco-editor';

同时webpack配置如下

new MonacoWebpackPlugin({
 filename: 'monaco_[name].worker.[contenthash].js',
 languages: ['json', 'solidity', 'sql'],
 })

注意：webpack进行语言配置后，打包发现还是全量语言时，一般是因为导入monaco的方式不对。

写在最后

到此，我们就知道如何在实际项目中配置语言从而实现语法高亮了。

Git Merge时选择哪个

Wed, 30 Oct 2024 00:00:00 +0800

项目分支开发提交MR时，会有三个选项，Merge、Rebase、Squash，这三个选项有何区别，又该如何选择呢。这里Mark下。

Merge

Merge本质是创建新的commit节点，同时源分支提交也都会带过去。假如本身有3个commit，那么Merge之后，就会多出4个commmit节点。其中1个是Merge Commit。同时Merge创建的commit还会携带源分支的提交信息。因此在很多Git GUI工具还会根据这些信息形成提交关系图。

Rebase

Rebase的本质是修改commit的parent节点，将源分支的提交都移动到目标分支的后面。假如本身有3个commit，那么Rebase之后，就会多出3个commit节点。与Merge不同不同的是不会创建新的commit节点。因此在很多Git GUI工具里去看就是一条笔直的线。

Squash

Squash的本质是合源分支的提交为1个提交，也重新生成commit message。因此在很多Git GUI工具里去看就是多了一个最新的提交节点。

选择？

了解了3者的区别，那么如何选择呢？这里我总结下：

优先选择Squash，因为Squash可以减少commit数量，同时可以减少commit message的重复，让提交关系更清晰。一个开发在自己的分支下进行提交可能会是多次。如果选择Merge或者Rebase都会使得主干过多的提交。而Squash可以减少提交数量。当然开发也可以在自己的分支下reset再重新commit，但是毕竟繁琐些。
其次可以选择Rebase，但坏处就是不会保留合并的信息，如果不在乎分支之间的合并关系，而只是在乎提交的内容和提交人的话，这个也不错。
最后选择Merge，因为Merge是最简单的，而且可以保留分支之间的合并关系。当然坏处就是关系图复杂些。

a标签中的自定义target

Thu, 24 Oct 2024 00:00:00 +0800

技术周会上了解到a标签的自定义target属性，这里记录下。

MDN规范

HTML target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL: _self,_blank,_parent,_top。

按照规范所说，上述几个字面值只是特殊意义，即我们是可以自定义名称的。

自定义名称

举个例子，当点击如下链接

首次会打开新TAB窗口，效果与_blank相同。
再次点击并不会打开新TAB，而是切换到原打开TAB，且页面会自动刷新。

<a href="https://x.com/alanhe421" target="myTarget">My Twitter</a>

由此也就知道了自定义target的意义，即可以自定义打开的TAB窗口，且可以切换到原打开TAB窗口。

写在最后

了解了自定义target的意义，那么就可以根据实际需求来使用，比如想控制不再重新打开TAB，那么可以自定义target名称。

快速修复开源社区repo的bug

Thu, 24 Oct 2024 00:00:00 +0800

项目中经常会使用很多第三方的NPM包，比如Mousetrap，很多时候会遇到bug，但是官方的bug还没修复或者还没合并发包，那么这个时候怎么办呢。这里总结下方法。

Fork仓库，走PR流程

fork仓库，源码修改，提交PR，等待官方合并和发布新包。这个方式肯定是最好的，取之社区，也回馈了社区。

但这个方式的缺点，也很明显，比如官方动作特别慢且本身我们又紧急依赖于该包的，那么这时这个方案就显得不是很合适了。

npm依赖版本调整

使用commit hash或者不同的repo地址。 package.json里本来也可以使用git commit hash，即直接锁定某个提交版本，这样合并与否都不影响。或者我们fork后，完全可以自己发布一个包，只是包名无法跟之前的完全一致而已，比如增加@namespace前缀。

npm install from Git in a specific version

"dependencies": {
 "package": "git://github.com/username/package.git#commit"
}

pkg alias

"dependencies": {
 "package-a": "npm:@stacker/package-b@1.0.0"
}

如何patch-package

除了上面的2个方案外，我们还可以使用patch-package来快速修复bug。这个方案的本质是利用git diff来生成补丁文件，然后通过npm scripts钩子来直接执行布丁文件，从而修改了node_modules里的文件。我们如果抛开patch-package，直接修改源码会造成无法纳入版本管理，而patch-package则可以相对优雅的解决补丁和没有纳入版本管理的第三方包源码之间的冲突。

直接修改node_modules里下的目标包文件内容源码，比如mousetrap下的mousetrap-record.js
生成补丁文件
```
npx patch-package mousetrap
```
配置npm scripts钩子
```
"scripts": {
 "postinstall": "patch-package"
}
```
如果未来官方修复了bug，那么我们就可以删除补丁文件，删除该包直接执行npm install即可。

写在最后

上述即修复开源项目的几个方法，按需使用即可。

浏览器指纹

Tue, 22 Oct 2024 00:00:00 +0800

WEB如果提供了账户登录，我们自然可以区分。如果是匿名用户我们如何区分呢，这时就需要浏览器指纹了。浏览器指纹是浏览器在特定时间点上，由用户设备上所有可用的信息生成的唯一标识符。浏览器JS本身是无法直接提供指纹的，需要自行实现，当然社区已有成熟的类库，比如 fingerprintjs。

fingerprintjs v3

fingerprintjs最新版是v4，但是v4和v3的License不同，v4使用的协议是BSL，要求版本推出4年后才会转MIT，因此2024年，我们还无法使用v4，而v3是MIT协议，则可以放心使用。

准确率

开源版准确率为(40% - 60%)，商用版为99.5%，注意服务端之所以准确率高，是因为也包含了服务端组件。
指纹有效期只有几周。

使用

const fpPromise = new FingerprintJS.load();
 fpPromise
 .then(fp => fp.get())
 .then(result => {
 const visitorId = result.visitorId;
 console.log(visitorId)
 })

了解ua-parser-js

Fri, 18 Oct 2024 00:00:00 +0800

实际开发中经常解析UA头部来判断用户设备信息，比如判断是Win还是Mac，或者判断是不是移动设备等等。我们直接用userAgent的话就自己手动解析该字符串，并不是很方便。比较简单的办法是引入ua-parser-js，这是一个成熟的类库，有了它就可以方便的获取ua中携带的信息了。

用法

先说下用法。

const parser = new UAParser();

console.log(parser.getBrowser());
// {"name":"Chrome","version":"130.0.0.0","major":"130"}

console.log(parser.getOS());
// {name: 'Mac OS', version: '10.15.7'}

console.log(parser.getDevice());
// {vendor: 'Apple', model: 'Macintosh', type: undefined}

// 推荐使用v2版时，开启客户端提示
UAParser().withClientHints();

通过UAParser解析后的结果是一个对象，包含浏览器、设备、系统、引擎、CPU等信息。

注意

ua-parser-js v2版还是beta，但推荐使用v2，v2下使用js的一些新特性，从而确保了准确性。
nodejs/浏览器环境均可使用。

TS类型安全

v1版中，ua-parser-js默认并不携带ts类型定义，需要手动引入，否则会报错。v2版中已经自带ts类型定义，不需要手动引入。

npm install --save @types/ua-parser-js

体积

无论v1还是v2，体积均为20kb左右。

查看源码ua-parser-js没有配置sideEffects，因此即使是v2的ES模块引入也无法做到tree shaking。

源码

ua-parser-js的源码本质是对navigator.userAgent及navigator.userAgentData的解析，所以解析的逻辑很简单，就是正则匹配，然后根据匹配结果组装成对象。

局限性

目前源码中使用到的API主要是

navigator.userAgent
navigator.userAgentData

因此也就决定了一些缺陷，比如：

M系列Mac下navigator.userAgent返回的还是intel，原因是Mac下发起请求携带的ua不对，属于OS层面问题，这点只能等Apple修复。但v2下使用了userAgentData从而确保了准确性。
navigator.userAgentData存在明显兼容性问题，因此即使使用v2也不能保证所有浏览器均OK。
ua没有提供的信息也就无法获取，比如设备内存，GPU情况等。

v2版的准确性-User-Agent Client Hints

v2版本下使用到了navigator.userAgentData.getHighEntropyValues方法，该方法可以获取CPU架构，CPU处理器位数信息。

举例如下。

navigator.userAgentData
 .getHighEntropyValues([
 "architecture",
 "bitness",
 "formFactor",
 "fullVersionList",
 "model",
 "platformVersion",
 "wow64",
 ])
 .then((ua) => {
 console.log(ua);
 });

在线验证

官方有提供站点，可以直接输入UA或选择示例UA，解析获得设备信息。

https://uaparser.dev/
因为个人使用习惯，这里我基于官方站点做了些交互改动，提供另一个选择。但功能及使用的ua js版本一致。

https://uaparser.1991421.cn/

写在最后

关于ua-parser-js的介绍，也就这些了，希望能够帮到大家。同时如果希望设备信息足够准确和丰富，也建议使用v2版。

前端可视化图编辑技术

Thu, 17 Oct 2024 00:00:00 +0800

最近项目需要提供用户有个可视化设计流程处理的feat，因此需要实现下可视化。这里调研总结下市面上的一些方案。

IBM的开源项目Node-RED

Apache协议

图形布局库dagre-d3

MIT协议

图形布局库cola.js

MIT协议

开源画图库Joint

MPL-2.0协议+GPL2协议

开源画图库jsPlumb

MIT协议和

drawio

Apache License Version 2.0

开源Draw2D

Apache License Version 2.0

GGEditor

MIT协议

X6

MIT协议

补充说明：前端做可视化图形可以用svg、canvas、html+css或者混用。

看法

个人推荐使用有活跃度+MIT协议的项目。

Linux机器免密登录

Thu, 19 Sep 2024 16:41:56 +0800

一般免密登录为了保证安全性，都是使用的公私钥方式。这里Mark下配置方式

登录客户端机器创建公私钥，如果有的话不需要创建。

公私钥存储位置在~/.ssh下。
登录目标服务器上，打开~/.ssh/authorized_keys文件。

authorized_keys文件记录着授权登录的公钥列表。
拷贝客户端机器的公钥到该文件中，保存。
重新SSH登录目标机器，发现并不需要输入密码了。

WebShell中获取任意文件所在当前目录

Thu, 19 Sep 2024 14:14:29 +0800

基于xterm.js的webshell在实现选中文件名直接下载文件时遇到了困难，这个feat里如何获取文件名所在的目录。经过实际调研确定了解决方案，这里Mark下。

实现方案

首先终端会话留中能够返回每次命令执行后的目录是利用了函数钩子。
这里利用registerOscHandler，来监听Ansi序列，进而提取整个数据中的CurrentDir。

const cwdArr = []; // index 0没用到
term.parser.registerOscHandler(1337, data => {
 const currenDirArr = data?.match?.(/(;CurrentDir=)([^;\u0007]+)/);
 if (currenDirArr?.length >= 3) {
 cwdArr[term.buffer.active.baseY + term.buffer.active.cursorY] = currenDirArr[2];
 }
})

监听选中事件，根据选中的位置结合cwdArr来计算选中文件名所在的CWD路径。

term.onSelectionChange(() => {
 const selection = term.getSelection();
 if (!selection) {
 return;
 }
 const selectionPosition = term.getSelectionPosition();
 term.getSelection() && copyToClipboard(term.getSelection());
 let rowNum = selectionPosition.start.y; // 行号
 while (rowNum < cwdArr.length && !cwdArr[rowNum]) {
 rowNum++;
 }
 const cwd = cwdArr[rowNum];
 console.log('选中文件', pathJoin(cwd, selection));
});

写在最后

WebShell下的命令补全实现的关键实际上类似于上述问题，关键点即用好registerOscHandler。

babel-plugin-import介绍

Tue, 17 Sep 2024 00:00:00 +0800

因为打包体积问题，重新了解babel-plugin-import，以前对该插件认识不清晰，这里梳理下。

插件介绍

babel-plugin-import是一个支持模块化导入的Babel插件。插件的功能是根据配置将全量导入转换为按需导入。

解决的问题

导入路径还是全量，这样路径短。
按需导入，这样体积小。

举例

正如官方提到的，经典的例子就是antd/lodash，当然这里其实更应该指的是老版本的antd，lodash。

antd

import { Button } from 'antd';

import Button from 'antd/lib/button';

注意，虽然这里以antd，lodash来说明，但实际这两个包都不需要使用babel-plugin-import了。

antd支持treeshaking。
lodash释放了ES版的包lodash-es,切换到该包名下即可，也支持tree shaking。

与tree shaking矛盾吗

并不是所有项目都用到了babel-plugin-import，为啥，因为有tree shaking。

两者矛盾吗？并不矛盾，但最终目的一致，即都是为了按需加载/打包。当组件库之类的支持了tree shaking，那么构建工具本身打包时就会删除unused的模块。因此只要组件库支持tree shaking，那么就可以使用按需加载，而无需使用babel-plugin-import。

翻看插件的提交时间和webpack支持treeshaking支持的时间，也就理解了为啥以前需要用babel-plugin-import。因为当时还没支持tree shaking。

如下为babel-plugin-import的提交时间

而webpack支持treeshaking是在webpack v4，大概是2019年的事了。

写在最后

OK，关于babel-plugin-import就分析到这里。

npm命令下的registry不work

Tue, 17 Sep 2024 00:00:00 +0800

有时因为网络或安全问题，需要切换项目中的npm包源。一般做法是切换npmrc中源，但切换后进行安装包时，会发现install后，包还是会走老的源，尤其是lock文件已生成的情况。这里就分析下registry不work的问题。

版本信息

这里我使用如下版本来做验证。

npm v9.5.1
node v18.16.1

当前lock文件信息

翻看lock文件，以@babel/plugin-proposal-private-property-in-object包为例，会发现lock文件中直接记录了对应包版本下的地址，这里为https://registry.npmjs.org/

npmrc

尝试使用npmrc文件配置源来进行更新，配置如下。

registry=https://registry.npmmirror.com

实际测试，执行npm i 并不会从新的源地址下载包。

install –registry

既然rc配置源不行，尝试直接npm install –registry进行源覆盖。

npm i @babel/plugin-proposal-private-property-in-object --registry=https://registry.npmmirror.com

实际测试执行安装包命令，--registry是可以进行覆盖安装。

直接安装全部包呢？

npm i –registry=https://registry.npmmirror.com

测试发现并没有变化。

删除lock文件呢

删除lock文件的前提下，重新npm install,会发现还是缓存包

删除node_modules

重新npm install,会发现包的resolved并不是走的npmrc的配置。

删除node_modules，lock文件后，执行install –registry

发现所有的包下载地址均是https://registry.npmmirror.com。此时安装新包，比如npm install antd。发现不需要手动设定registry，即会走npmrc中配置的源。

结论

通过上述的测试，明白了npm安装包时，对于registry的优先级处理是下面这样：

命令参数--registry
lock文件中resolved/缓存中
npmrc或缺省registry

基于这个优先级，那么当实际项目中我们需要改变包源，那么对于存量的包，我们要么删除node_modules,package-lock.json，重新执行安包，要么就需要手动编辑lock文件，直接替换所有的registry地址了。个人觉得后者更佳，毕竟可以不影响包版本。

redux-logger tree shaking不work

Sat, 14 Sep 2024 00:00:00 +0800

现象

使用redux-logger的项目中，在使用webpack生产模式打包后，还是有redux-logger的存在。

理论上logger也只是在开发环境下使用到，按理打包后应该去掉才对，因此带着这个疑问，分析下问题。

代码详情

"redux-logger": "^3.0.6"

redux-logger内部

"main": "dist/redux-logger.js",

这里用main指向入口文件，main既可以指向ES文件，也可以是CJS文件，因此该配置OK
redux-logger.js文件是UMD规范，即兼容CommonJS和AMD。Webpack下的treeshaking是不支持UMD。

基于上述情况，redux-logger是无法进行treeshaking，因此现象符合预期。

升级redux-logger

"redux-logger": "4.0.0",

查看NPM发现redux-logger有beta4.0，并且支持ES规范，因此这里尝试下。

当仅仅升级包版本，进行打包测试的话，会发现还是不work，因为TreeShaking还有要求是sideEffects。

但注意引入的文件已经变成了ES的。

打包体积如下

修复redux-logger

为了验证效果，直接手动把包的package.json中添加 "sideEffects": false,重新发布一个包，然后打包分析。结果如下。

"redux-logger": "npm:@stacker/redux-logger@4.0.1",

写在最后

到此，redux-logger这个生产打包带来的问题就解决了。

monaco-editor实现SQL代码补全

Sun, 08 Sep 2024 00:00:00 +0800

最近使用monaco-editor来实现SQL编辑器，为了提升用户体验，需要实现代码补全。研究后发现了实现方法，因此这里Mark下。

内置补全？

YES，默认monaco-editor是内置了一些语言支持，比如JavaScript、TypeScript、CSS、JSON、HTML。对于已内置支持的语言。只需要将编辑器语言设置为javascript，就可以实现代码补全了。

而比如SQL语言是没有内置支持的，当我们将编辑器语言设置为sql，只可以实现语法高亮。

monaco.editor.create(editorElRef.current, {
 ...
 language: 'sql',
 ...
 autoClosingBrackets: 'always',
 autoClosingOvertype: 'always',
 autoClosingQuotes: 'always',
 })

自定义补全？

比如SQL语言，如果想自动补全只能走自定义补全的方式解决。

调研发现可以通过monaco.languages.registerCompletionItemProvider方法来注册对应语言的补全逻辑。

registerCompletionItemProvider方法可以定义当不同的输入上下文情况下，提供给用户的补全选项列表，当然该方法也支持异步返回，因此比如请求后台实现补全也是可行的。

registerCompletionItemProvider vs registerInlineCompletionsProvider

仔细看API会发现，补全相关的方法有两个。一般来说我们需要实现的都是registerCompletionItemProvider，那么两者什么区别呢。

registerCompletionItemProvider提供的补全项是弹出选项列表，正如文章一开始贴出的图片，而registerInlineCompletionsProvider提供的补全项是直接显示在光标位置后

在ZSH里的话，就类似于autosuggestion与autocompletion的区别。

举例子

以下即实现最简单的SQL高亮，在特定的输入情况下，进行SQL关键字，数据库名称，表名称，字段名称的补全提示。

monaco.languages.registerCompletionItemProvider('sql', {
 triggerCharacters: ['.', ' '],
 provideCompletionItems: function (model, position) {
 let suggestions: any[] = [];
 const { lineNumber, column } = position;
 const textBeforePointer = model.getValueInRange({
 startLineNumber: lineNumber,
 startColumn: 0,
 endLineNumber: lineNumber,
 endColumn: column,
 });
 const tokens = textBeforePointer.toLocaleLowerCase().trim().split(/\s+/);
 const lastToken = tokens[tokens.length - 1]; // 获取最后一段非空字符串
 const word = model.getWordUntilPosition(position);
 const range = {
 startLineNumber: position.lineNumber,
 endLineNumber: position.lineNumber,
 startColumn: word.startColumn,
 endColumn: word.endColumn,
 };
 if (lastToken.endsWith('.')) {
 suggestions = [...tableSuggest];
 } else if (textBeforePointer.endsWith(' ')) {
 if (textBeforePointer.match(/from\s+$/i)) {
 suggestions = [...databaseSuggest];
 } else if (textBeforePointer.match(/where\s+$/i)) {
 suggestions = [...columnSuggest];
 } else {
 suggestions = [...sqlKeywordsSuggest];
 }
 } else {
 suggestions = [...sqlKeywordsSuggest];
 }
 console.log('suggestions', suggestions);
 return {
 suggestions: suggestions.map(item => ({
 ...item,
 range,
 })),
 };
 },
})

写在最后

通过上述方法即了解了如何在monaco-editor中实现SQL代码补全，延伸下该方法，实际上也可以通过AI服务实现SQL代码补全，毕竟Monaco提供的补全注册方法是支持异步返回的。

前端模块导入方式对打包体积的影响

Sun, 25 Aug 2024 00:00:00 +0800

最近内部CR聊到了模块导入方式对体积的影响，个人觉得这个还挺重要的，因此这里mark下。

这里以一个组件库为例，在组件库的包中会看到有lib/es两个文件夹，实际上在开发我们在import时候是要注意的，如果import姿势不同，体积大小差异会巨大。

例子

先来个例子吧，下面截图可以看出import from es和import包根路径，实际上体积是一样的，但是当import from lib就差很远。

分析

Webpack有treeshaking。当JS是es module写法且构建为production,则会开启tree shaking.
如上的组件库，当我们走es import，则最终可以tree shaking，但走那么Webpack之类的本身就会去按需打包并不会全量打包。
如上的组件库的package.json中可以看到同时声明了main/module
```
 "main": "lib/index.js",
 "module": "es/index.js",
```

写在最后

前端构建体积一直是个很重要的问题，CDN/按需加载/按需打包/GZIP等等手段。上述体积问题只是一环。

ssh2连接时设置环境变量

Tue, 20 Aug 2024 23:11:21 +0800

使用nodejs ssh2客户端连接服务器时可以设置环境变量吗，经过调查发现是可以的，这里Mark下。

设置环境变量

代码如下

this.conn.shell({
 env: {
 X_LOGIN_IP: '128.1.1.123',
 X_ENVIRONMENT_VARIABLE: "desiredvalue"
 }, term: 'xterm-256color', // term: 'dumb',
 cols: connectOpts.cols, rows: connectOpts.rows,
 }, (err, s) => {
 if (err) {
 console.log('ssh shell error', err);
 throw err;
 }
})

局限性

这个环境变量是受限于/etc/ssh/sshd_config中是否允许指定规则变量设置，不同系统，默认允许的环境变量设置不同。

如果需要开放指定变量，设置指令是 AcceptEnv。例子如下，即支持设置X_前缀的环境变量

默认支持设置的环境变量

正如上述所说不同系统，默认设置不同。

Ubuntu默认为AcceptEnv LANG LC_*
Debian默认为AcceptEnv LANG LC_*
CentOS9默认未设置AcceptEnv，即不允许任何环境变量设置。

写在最后

关于客户端进行环境变量设置，你需要了解的就这些了。

WEB中监听网络断开

Mon, 12 Aug 2024 00:00:00 +0800

最近接到一个前端issue是关于用户网络断开和恢复带来的乱码问题，调研后发现WEB中网络变化没有监听及处理造成的，这里Mark下相关方法。

监听网络变化

通过online/offline事件监听网络变化。比如当把Wi-Fi关闭时offline事件触发，打开时online事件触发。

window.addEventListener('online', () => {
 console.log('网络在线');
});
window.addEventListener('offline', () => {
 console.log('网络中断');
});

判断网络状态

通过如下方法可以实时判断网络在线状态

navigator.onLine // true/false

Chrome下模拟网络断开状态

了解了监听网络变化和判断网络状态，那么如何模拟网络断开状态呢？好在Chrome下可以直接针对网页设置离线状态，从而不必直接修改整个设备的网络状态。

离线时，WebSocket连接会断开？

当浏览器处于离线状态时，WebSocket连接并不会立即断开。同时当网络恢复，那么WebSocket中的数据会继续发到后端。

写在最后

了解下网络变化和判断网络状态，可以更好的处理网络断开带来的问题。

了解ShellCheck

Wed, 07 Aug 2024 00:00:00 +0800

由于工作需要了解了下ShellCheck，觉得不错。ShellCheck可以检测并修复Shell中语法问题。这里Mark下。

安装

首先ShellCheck是跨平台的，支持多个系统，同时很多App也都集成了，多种方式下都可以使用。

直接网页使用-ShellCheck Web
Visual Studio Code插件ShellCheck
JetBrains内置插件Shell Script支持，不需要额外安装。实际测试觉得并不是完整版ShellCheck功能。

命令行安装

MacOS brew install shellcheck
EPEL based distros

sudo yum -y install epel-release
sudo yum install ShellCheck

完整安装方式见官方介绍

Shell支持

需要注意ShellCheck静态分析并不支持所有Shell。

支持bash, sh, ksh, and zsh。
不支持fish、tcsh 和 csh。
对 zsh 和 ksh 的支持仅限于与 bash 兼容的地方。

功能

无论是手动触发还是自动触发，shellcheck的目的就是指出Shell中的语法错误。

例子

Web端支持？

这里调研了下完全前端运行ShellCheck是否可行。

官方给出的Web例子本身是将Web输入的Shell发送到服务端执行的Shell Check。
完全的Web端运行，官方当前没有给予支持，但可以试试将Haskell转为WASM进行尝试，目前还无结论。

写在最后

对于日常编写Shell，推荐尝试在编辑器中安装该插件，可以避免一些Shell语法错误。

Wave Terminal使用评测：这款开源终端到底好在哪？

Sun, 21 Jul 2024 00:00:00 +0800

因为工作需要，使用过很多终端，比如iTerm2，Warp，Tabby，Hyper等。

最近调研下Wave Terminal，觉得也有些亮点，这里就介绍下。

平台

Wave 是一款本地终端，非Web，目前支持

MacM系列也支持
Linux
Windows WSLWindows也可以！

以Mac端为例，大小有224MB，还行。

免费+开源

Wave是一款开源免费的终端，因为跟Warp有相似之处，比如块模式显示，因此也被称为是开源免费的Warp替代品。

使用

这里说下怎么使用。首先，Wave不需要登录，这点给个👍。

连接

为了登录远程机器，这里首先是创建连接。

创建后可以尝试连接，提示安装远程脚本的话，点击安装，当连接成功即可。

关于连接配置，个人觉得删除连接配置的路径还是太麻烦了。目前需要：选中连接-删除-确认删除。

workspace

Wave里点击某个workspace，点击Create New Tab，选择终端连接即可登录目标机器，同时可以会话Tab的自定义主题颜色。

workspace在这里就是会话分组的一种形式。实际实践中觉得，可以分为比如生产/开发/测试之类的，这样也避免了操作错误。

历史命令

Wave下会将终端执行的任意命令都记录了下来，命令内容，执行所在终端连接，执行时间等等。

除了可以在历史页面进行命令的检索之外，在实际的终端会话中也可以热键唤起历史提醒，从而可以快速

实际是记录在了本地App数据库，位置是$HOME/.waveterm/waveterm.db

历史命令可以在任意终端会话中被唤起进行检索-插入执行。你可以选择该机器的历史命令也可以是任跨机器的任意一条历史命令。

文件浏览

Wave对于文件相关操作很弱，唯一支持是终端输入codeedit filename来唤起文件编辑操作，你可以设置成分屏，或者块显示方式。
但并不支持lrzsz命令上下载文件，同时也并没有提供可视化的文件管理功能。

其它

上述即Wave的核心功能，除此之外，Wave也提供了几个目前很常见的功能，比如AI，命令补全。

Wave AI 支持本地AI模型和云端模型(仅支持OpenAI)

使用方式

右侧AI聊天入口
终端会话中/chat命令
命令块中AI图标

命令补全的话个人觉得目前很鸡肋，不好用，这里就不介绍了。

OK，Wave的基本功能就这些了。说下个人看法吧。

亮点和缺点

缺点就是问题多。

正如Wave开源项目中的issue一样，实际使用中问题很多比如连接配置删除无效，编辑配置无效，连接远程机器中无法正常安装远程Shell等等。实际的使用中你会遇到很多的问题。不过wave开源项目是起于Jun 5, 2022，我们需要给予更多的时间，让它发展下，正如其版本号，目前还没到v1.0。同时因为是开源项目，你也可以去贡献自己的力量，无论是issue还是pr。

亮点是一些功能体验很新颖

workspace的组织形式很新颖
终端支持输入命令来操作功能，比如/chat进行AI问答，/codeedit进行文件编辑

总结

wave还很不成熟，对于高频使用终端的用户，我不建议使用它，因为问题是在太多以至于会阻塞使用。
对于低频用户，可以忍受问题的，可以使用它，毕竟这是一个开源免费又具备Warp块显示功能的终端。

本地登录Google虚拟机

Fri, 12 Jul 2024 00:00:00 +0800

最近调研Google IAP，玩了下Google云机器登录，这里Mark下。

注册

GMail

绑定支付，如果不绑定支付的话，无法购买机器。

初次赠送的赠金有有效期，过期后，金额还显示，但实际支付是不会抵扣的。

实际测试Visa没问题

创建机器

以虚拟机实例为例，机器按秒计费，但注意单位是刀的话，还是挺贵的，临时使用的话，注意及时销毁。

创建后，可以二次修改关闭公网IP，开启日志等。注意日志记录的话，由于日志需要存储也会单独计费。

写在最后

done.

Webpack中自定义SourceMap生成

Sun, 30 Jun 2024 00:00:00 +0800

线上发布Web为了方便追溯用户的具体报错，我们会开启SourceMap，是发包发布时会将SourceMap上传到我们的RUM平台，这样当用户出现报错时，通过RUM平台上的SourceMap也可以追溯到源码的报错位置。但也并非构建打包的所有文件都需要生成sourcemap，那么如何定制呢？

开启SourceMap

Webpack中，简单点呢的话会是如下配置。

{
 ...
 devtool: 'source-map',
 ...
}

这样做的弊端是所有的JS文件都会生成SourceMap，如果我们想排除某些呢，比如我们懒加载第三方模块，比如MonacoEditor。Webpack也是支持定制化SourceNap生成的。

定制SourceMap

注意devtool: 'source-map'需要关闭，或者配置为false。否则插件配置会不work.

 devtool: false,
 plugins: [
 new webpack.SourceMapDevToolPlugin({
 filename: '[file].map[query]',
 exclude: [/monaco_/],
 })
 ]

如上配置即可排除掉文件名包含monaco_的JS文件。

注意：我们构建打包JS文件时一般会选择文件名上配置内容哈希，那么当开启SourceMap，JS文件结尾有增加//# sourceMappingURL=x x x.4ea8e146beed0e49c7c5.js.map这样的注释，那么本身这个JS文件的内容哈希也会发生变化。

写在最后

done。

SSH2开启会话时指定启动文件可行性分析

Sat, 29 Jun 2024 23:51:19 +0800

在翻看inshellinsense代码时看到is建立本地终端时有控制加载指定目录下的启动文件。因此我在想SSH2连接Web 终端会话是否也可以呢，这里讨论下可行性。

inshellisense的做法

以bash为例

shellArgs = ["--init-file", path.join(shellFolderPath, "shellIntegration.bash")];

this.#pty = pty.spawn(shellTarget, shellArgs ?? [], {
 name: "xterm-256color",
 cols,
 rows,
 cwd: process.cwd(),
 env: { ...convertToPtyEnv(shell, underTest, login), ...env },
 });

可以看到实现的原理是spawn的第二个参数传入了shell参数，比如bash有–init-file参数

SSH2

https://github.com/mscdex/ssh2?tab=readme-ov-file#client-methods

查看SSH2的connect方法中并没有类似的参数，因此直接通过该方法是不可以。

这样不行的情况下，解决办法只有2个。

通过交互式会话执行source命令去加载集成脚本，但弊端是会有回显问题。
```
stream.write('');
```
通过执行命令修改启动shell文件，比如bashrc,将加载目标位置脚本的命令写入，这样之后连接后则不会有回显问题。
```
conn.exec('');
```

写在最后

done。

OpenCloudOS SSH连接执行报错

Wed, 12 Jun 2024 00:00:00 +0800

WebShell SSH登陆OpenCloudOS 9会直接断开。仔细调查后明白了问题点，这里总结下。

WebShell SSH登陆流程

这里WebShell使用的nodejs-ssh2实现终端登录

ssh connect开启登陆交互Shell
登陆成功后，SSH底层连接复用，开启exec命令执行Channel，这里并发执行了4个命令。

报错信息

开启调试日志的话，相关记录如下。

...
Inbound: CHANNEL_DATA (r:0, 57)
Inbound: CHANNEL_OPEN_CONFIRMATION (r:1, s:1)
Outbound: Sending CHANNEL_REQUEST (r:1, exec: env)
Inbound: CHANNEL_OPEN_CONFIRMATION (r:2, s:2)
Outbound: Sending CHANNEL_REQUEST (r:2, exec: curl https://1991421.cn)
Inbound: CHANNEL_OPEN_CONFIRMATION (r:3, s:3)
Outbound: Sending CHANNEL_REQUEST (r:3, exec: pwd)
Inbound: CHANNEL_OPEN_CONFIRMATION (r:4, s:4)
Outbound: Sending CHANNEL_REQUEST (r:4, exec: id)
Socket ended
Socket closed
/Users/alanhe/GitHub/express-demo/node_modules/ssh2/lib/client.js:1836
 cb(had_err !== true ? had_err : new Error('Unable to exec')); ^

可以看到，就是直接断开了，因此最后报错会是Unable to exec。

分析

尝试关闭命令执行，或者只保留1个命令执行，发现是OK的。
该机器是1核1G内存，尝试升级机器配置，发现升级到8GB之类的就不报错了。
重装系统到OpenCloudOS 8发现即使是同配置没问题。
OpenCloudOS9的OpenSSH是v9.3，而8的是v8.x，测试其它镜像比如Fefora 40 OpenSSH v9.6是没问题。

因此推断9版存在某种限制，导致开启的终端执行channel过多就会断开，该问题并非是因为OpenSSH 9.x兼容性导致的问题。

查看服务侧OpenSSH版本

ssh -V

解决办法

OpenCloudOS 9修复该SSH问题，毕竟其它系统目前没遇到该类问题。
在未确定具体限制外，可以关闭或者避免并发执行多命令来解决。

写在最后

虽然目前还没确定OS是哪里限制了，但至少明确了是什么造成的。基于目前了解到的信息，并行执行命令并没有任何错也不该是个问题，但还是别过多了，毕竟MaxSessions之类的也还是会限制下。

Shell里判断CPU架构

Tue, 11 Jun 2024 00:00:00 +0800

开发时遇到需求是Shell里需要执行下载安装CodeServer，因此就需要识别机器的CPU架构从而下载对应的程序包了。

CodeServer程序包

不同CPU架构需要安装不同程序

脚本

脚本里使用uname可以获取架构情况。

arch() {
 uname_m=$(uname -m)
 case $uname_m in
 aarch64) echo arm64 ;;
 x86_64) echo amd64 ;;
 *) echo "$uname_m" ;;
 esac
}

ARCH=${ARCH:-$(arch)}

能够识别出架构，按需安装就简单了。

云服务器架构

以腾讯云为例，我们在购买机器时是可以看到CPU架构说明。如下即可选择不同的架构机器。

写在最后

done。

tar: Ignoring unknown extended header keyword

Tue, 11 Jun 2024 00:00:00 +0800

在Mac下执行tar压缩文件后在Linux CentOS下执行发现异常输出tar: Ignoring unknown extended header keyword LIBARCHIVE.xattr.com.apple.metadata:kMDItemTextContentLanguage，查询后发现是Mac下的tar不一样导致，这里总结下问题。

问题

Mac下执行如下命令进行tar打包

tar -czvf ../xxxx.tar.gz --exclude='.DS_Store' xxxx/*

目标机器CentOS下执行tar解压缩

tar -C xx/lib -xz

执行中即有如下输出

tar: Ignoring unknown extended header keyword LIBARCHIVE.xattr.com.apple.metadata:kMDItemTextContentLanguage

原因

在 macOS 中使用 BSD tar 创建归档文件时会有 xattr 头文件。而CentOS不是BSD tar，而是GNU tar。
虽然执行中出现了异常输出，但不影响使用，仅仅只是提示，并不算报错。

解决办法

Mac下安装brew install gnu-tar，之后执行gtar -czvf ../xxxx.tar.gz --exclude='.DS_Store' xxxx/*即可。

Shell中支持autosuggestion

Mon, 10 Jun 2024 00:00:00 +0800

终端中输入命令时，光标后面会给出一个推荐命令，如果OK，按➡️就可以快速选择输入，这种功能业界叫autosuggestion.

autosuggestion!=autocompletion

首先搞清楚相关概念的不同。

autosuggestion是基于历史或其它逻辑自动给出推荐的命令输入，这个命令是完整的，推荐位置在光标后面
autocompletion是基于命令规范或其它逻辑给出当前输入命令的选项值，需要按键触发，一般是Tab键，补全的并不是完整的命令，而是当前命令的选项值，同时补全推荐会是多个，需要用户自行去选择。

由上可以知道两者不同，且并无冲突。

autosuggestion配置

这里我们聚焦suggestion的支持，不同Shell，autosuggestion配置不同。

bash

目前社区并无方案，但终端产品还是看到warp支持了，不确定它是怎么做到的。

zsh

推荐使用Oh My Zsh来安装。

# 安装oh-my-zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# zsh-autosuggestions插件配置
plugins=(
 ...
 zsh-autosuggestions
)

fish

安装fish后默认就已经有autosuggestions，不需要任何设置

写在最后

个人建议开启autosuggestion，毕竟很多时候命令会重复输入，有了suggestion会节约一些时间。

filesaver源码解读

Sat, 08 Jun 2024 15:03:32 +0800

网页实现文件下载可以使用成熟的类库FileSaver.js，其压缩后的大小也就2KB，引入的话也并不会对站点有多大的体积负担。同时我们也需要了解下该pkg的实现，这里梳理下实现逻辑。

saveAs API

先看下API方法的参数情况，可以看到直接传入文件数据或者URL都可。

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

处理流程

操作DOM创建a标签元素，由于a标签没有设置content，因此也不会出现在当前页面。
a元素设置download属性，值即为指定的文件名。
a元素设置rel值为noopener，设置的好处是性能和安全。
判断save存储的是不是字符串
1. 是字符串的话，将会被视为URL，然后根据是否跨域决定是不是直接就可利用a标签直接下载保存，如果跨域，download属性不会work，因此必须XHR下载数据然后再作为blob进行下载保存，如果不跨域，a标签直接挂URL和download即可保证下载和保存。
2. 非URL的话，blob数据直接作为a元素的href，触发a.click即可。

下载文件而不是打开文件

当我们直接URL下载文件时会发现浏览器会默认打开该文件，如果我们想改变这个行为有几个办法

同源文件下载的话，a标签方式下设置download属性即可，浏览器会视为设置了Content-Disposition:attachment，因此会作为附件进行下载。
非同源文件下载，download属性不会work，因此需要通过异步下载文件获得blob数据，之后构建a标签保存，或者是服务端返回设置Content-Disposition:attachment。

防止内存泄漏

可以留意到，a元素的href在绑定objectURL后，会通过setTimeout然后再执行click下载，之后再延迟进行 URL.revokeObjectURL(a.href)。这里这么做主要是担心文件过大的情况下，这里会出现内存泄漏，需要手动进行内存回收。
这里因为a元素并没有被追加到document.body上，因此并不存在手动删除a元素，所以这里才会走revoke，如果是a元素绑定到document.body上，这里实际上通过删除元素也可以解决。

写在最后

done.

node项目下的安全组件扫描处理

Sun, 02 Jun 2024 00:00:00 +0800

公司有job会每天扫描研发项目，其中node项目会针对pkg的组件漏洞及时提醒，有必要的话我们都是要及时处理的，毕竟安全无小事，这里总结下做法。

组件漏洞一般是指采用的npm包版本在开源漏洞库中有记录，即社区里已经告知了该版本存在漏洞，因此是建议升级到某些版本的。

在接到这样的通知时要做的就是尽快升级。当然实际的操作会分几种情况

直接依赖如果pkg是作为直接依赖，那么直接升级即可，只是需要注意如果是大版本更新，要考虑使用上是否有变动，是的话，需要调整下调用写法，当然更多是要验证，影响大的话，要降低发布速度，安全第一。
间接依赖如果pkg是作为间接依赖，会麻烦一点。优先是把直接依赖找出来，进行升级，如果直接依赖的包并没有新版本，这时可以利用resolution直接控制包版本。当然这里一样是要确定版本升级是否是大版本更新，同时修复发布的话，风险有多大。

npm ls pkg

这里介绍个小技巧，利用npm ls 可以快速确定某个包在项目下的依赖树结构，同时根据安全报告提示的版本信息等，你可以快速确定是直接依赖还是间接依赖，即使是间接也可以明确知道是哪个包引入的该版本。

npm-check

无论是使用npm-check还是yarn,pnpm自带的交互式检查更新，都是很不错的方式去查询版本升级信息，这里我推荐用起来。

写在最后

done。安全无小事，每次暴露的安全漏洞还是建议仔细看一下，而不仅仅是更新一个版本号的事。

浏览器network中的ping请求

Fri, 31 May 2024 00:00:00 +0800

Chrome浏览器的network中经常会看到ping类型的请求，好奇是怎么发起又有什么作用呢。这里分析总结下。

navigator.sendBeacon

调查后发现ping类型请求是通过navigator.sendBeacon发起，该方法可携带数据。实际上发送的还是post请求。即服务端还是按照post请求去处理和返回。

该请求是由浏览器异步发起的，发起方是navigator并非是所在网页内的单线程JS。由于这个特性，网页的开关不会影响这个请求的执行。

举个例子

比如unload页面时，可以通过sendBeacon发送请求告诉服务端用户关闭了网页，如果是传统的使用XHR或者fetch，其实可能请求还没发出去网页就已经关闭，而通过sendBeacon就没有这种风险。

极端情况下除外，比如浏览器异常关闭或者电脑直接关机了，这种肯定是没办法了。

不同浏览器下的不同表现

sendBeacon请求在不同浏览器下显示上会有所不同。

Chrome显示为bing类型
Safari显示为beacon类型
Firefox显示为beacon类型

不过糟糕的是以Chrome为例，在network中无法直接快速筛选出ping类型请求，只能选择other或者通过请求URL去筛选。

发起ping类型请求

具体如何发起该请求呢，这里举个例子。

navigator.sendBeacon('/beacon', new Blob([JSON.stringify({
 type: 'hello'
})], {type: 'application/json'}));

使用场景

该方法的特性决定了很适合做数据埋点，比如页面关闭时发送消息。

在实际的项目中我也发现数据上报类库会采用sendBeacon来实现。

写在最后

我所了解的就这些了。

login shell

Wed, 15 May 2024 00:00:00 +0800

最近接到一个WebShell用户反馈，即debian系统-终端登陆发现没有加载～/.profile. 这里经过分析是底层开启的交互式非登陆Shell没有走登陆Shell导致。

登陆Shell

登陆Shell会加载 ~/.bash_profile, .profile，/etc/profile文件，非登陆Shell不会加载这些，但会加载~/.bashrc。

profile加载顺序

/etc/profile：首先，Shell 会读取系统范围内的全局配置文件 /etc/profile。
~/.bash_profile, ~/.bash_login, 和 ~/.profile（按此顺序），Shell 会查找并尝试执行用户的个人配置文件。它首先检查 ~/.bash_profile，如果这个文件存在，则停止读取其他文件。如果 ~/.bash_profile 不存在，它会查找 ~/.bash_login。如果这个文件也不存在，最后会尝试读取 ~/.profile。

流写入文件时造成的文件内容被清空问题

Sat, 27 Apr 2024 16:40:58 +0800

ssh2-sftp-client提供了put方法，可以传入可读流将数据持续写入远程文件。最近遇到问题是当写入流刚开始程序终端的话，会发现文件内容被清空。这里分析下原因

put方法中localSrc可以是可读流。remotePath即远程服务器中文件路径。

 async put(localSrc, remotePath, options) {
 try {
 if (typeof localSrc === 'string') {
 const localCheck = haveLocalAccess(localSrc);
 if (!localCheck.status) {
 throw this.fmtError(
 `Bad path: ${localSrc} ${localCheck.details}`,
 'put',
 localCheck.code,
 );
 }
 }
 return await this._put(localSrc, remotePath, options);
 } catch (e) {
 throw e.custom ? e : this.fmtError(`Re-thrown: ${e.message}`, 'put', e.code);
 }
 }

根据远程文件路径，sftp创建了可写流，writeStreamOptions设置了可写流的一些配置。可读流不断读取写入SFTP的可写流中。

 _put(lPath, rPath, opts, addListeners = true) {
 let listeners, wtr, rdr;
 return new Promise((resolve, reject) => {
 if (addListeners) {
 listeners = addTempListeners(this, '_put', reject);
 }
 opts = {
 readStreamOptions: { ...opts?.readStreamOptions, autoClose: true },
 writeStreamOptions: { ...opts?.writeStreamOptions, autoClose: true },
 pipeOptions: { ...opts?.pipeOptions, end: true },
 };
 if (haveConnection(this, '_put', reject)) {
 wtr = this.sftp.createWriteStream(rPath, opts.writeStreamOptions);
 ...
 if (lPath instanceof Buffer) {
 this.debugMsg('put source is a buffer');
 wtr.end(lPath);
 } else {
 rdr =
 typeof lPath === 'string'
 ? fs.createReadStream(lPath, opts.readStreamOptions)
 : lPath;
 ...
 rdr.pipe(wtr, opts.pipeOptions);
 }
 }
 }).finally(() => {
 if (addListeners) {
 removeTempListeners(this, listeners, '_put');
 }
 });
 }

sftp的可写流是基于nodejs的可写流进行的继承改造。flag如果没有设置默认为w

查询NodeJS官网，'w': Open file for writing. The file is created (if it does not exist) or truncated (if it exists).

到此其实可以知道内容被清空是因为这个w。但SFTP又是怎么受这个flag影响的呢，继续。

function WriteStream(sftp, path, options) {
 ...
 WritableStream.call(this, options);

 this.path = path;
 this.flags = options.flags === undefined ? 'w' : options.flags;
 this.mode = options.mode === undefined ? 0o666 : options.mode;

 this.start = options.start;
 this.autoClose = options.autoClose === undefined ? true : options.autoClose;
 this.pos = 0;
 this.bytesWritten = 0;
 this.isClosed = false;

 this.handle = options.handle === undefined ? null : options.handle;
 this.sftp = sftp;
 this._opening = false;

 if (this.start !== undefined) {
 checkPosition(this.start, 'start');

 this.pos = this.start;
 }

 if (options.encoding)
 this.setDefaultEncoding(options.encoding);

 // Node v6.x only
 this.on('finish', function() {
 if (this._writableState.finalCalled)
 return;
 if (this.autoClose)
 this.destroy();
 });

 if (!Buffer.isBuffer(this.handle))
 this.open();
}

写入流的第一步是打开流，而打开时候有传入该参数flags。sftp的open方法中，stringToFlags(flags_)会对该stream的flag进行转换即转换成SFTP协议中打开文件的flag值。

WriteStream.prototype.open = function() {
 if (this._opening)
 return;

 this._opening = true;

 this.sftp.open(this.path, this.flags, this.mode, (er, handle) => {
 this._opening = false;

 if (er) {
 this.emit('error', er);
 if (this.autoClose)
 this.destroy();
 return;
 }

 this.handle = handle;

 const tryAgain = (err) => {
 if (err) {
 // Try chmod() for sftp servers that may not support fchmod() for
 // whatever reason
 this.sftp.chmod(this.path, this.mode, (err_) => tryAgain());
 return;
 }

 // SFTPv3 requires absolute offsets, no matter the open flag used
 if (this.flags[0] === 'a') {
 const tryStat = (err, st) => {
 if (err) {
 // Try stat() for sftp servers that may not support fstat() for
 // whatever reason
 this.sftp.stat(this.path, (err_, st_) => {
 if (err_) {
 this.destroy();
 this.emit('error', err);
 return;
 }
 tryStat(null, st_);
 });
 return;
 }

 this.pos = st.size;
 this.emit('open', handle);
 this.emit('ready');
 };

 this.sftp.fstat(handle, tryStat);
 return;
 }

 this.emit('open', handle);
 this.emit('ready');
 };

 this.sftp.fchmod(handle, this.mode, tryAgain);
 });
}

 open(path, flags_, attrs, cb) {
 if (this.server)
 throw new Error('Client-only method called in server mode');

 if (typeof attrs === 'function') {
 cb = attrs;
 attrs = undefined;
 }

 const flags = (typeof flags_ === 'number' ? flags_ : stringToFlags(flags_));
 if (flags === null)
 throw new Error(`Unknown flags string: ${flags_}`);

 let attrsFlags = 0;
 let attrsLen = 0;
 if (typeof attrs === 'string' || typeof attrs === 'number')
 attrs = { mode: attrs };
 if (typeof attrs === 'object' && attrs !== null) {
 attrs = attrsToBytes(attrs);
 attrsFlags = attrs.flags;
 attrsLen = attrs.nb;
 }

 /*
 uint32 id
 string filename
 uint32 pflags
 ATTRS attrs
 */
 const pathLen = Buffer.byteLength(path);
 let p = 9;
 const buf = Buffer.allocUnsafe(4 + 1 + 4 + 4 + pathLen + 4 + 4 + attrsLen);

 writeUInt32BE(buf, buf.length - 4, 0);
 buf[4] = REQUEST.OPEN;
 const reqid = this._writeReqid = (this._writeReqid + 1) & MAX_REQID;
 writeUInt32BE(buf, reqid, 5);

 writeUInt32BE(buf, pathLen, p);
 buf.utf8Write(path, p += 4, pathLen);
 writeUInt32BE(buf, flags, p += pathLen);
 writeUInt32BE(buf, attrsFlags, p += 4);
 if (attrsLen) {
 p += 4;

 if (attrsLen === ATTRS_BUF.length)
 buf.set(ATTRS_BUF, p);
 else
 bufferCopy(ATTRS_BUF, buf, 0, attrsLen, p);

 p += attrsLen;
 }
 this._requests[reqid] = { cb };

 const isBuffered = sendOrBuffer(this, buf);
 this._debug && this._debug(
 `SFTP: Outbound: ${isBuffered ? 'Buffered' : 'Sending'} OPEN`
 );
 }

const stringFlagMap = {
 'r': OPEN_MODE.READ,
 'r+': OPEN_MODE.READ | OPEN_MODE.WRITE,
 'w': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.WRITE,
 'wx': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.WRITE | OPEN_MODE.EXCL,
 'xw': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.WRITE | OPEN_MODE.EXCL,
 'w+': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE,
 'wx+': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE
 | OPEN_MODE.EXCL,
 'xw+': OPEN_MODE.TRUNC | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE
 | OPEN_MODE.EXCL,
 'a': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.WRITE,
 'ax': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.WRITE | OPEN_MODE.EXCL,
 'xa': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.WRITE | OPEN_MODE.EXCL,
 'a+': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE,
 'ax+': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE
 | OPEN_MODE.EXCL,
 'xa+': OPEN_MODE.APPEND | OPEN_MODE.CREAT | OPEN_MODE.READ | OPEN_MODE.WRITE
 | OPEN_MODE.EXCL
};

到此也就明白了为什么会为空即上传文件时如果原文件存在，实际上是先trucate进行清空的。

那如何避免该问题呢？

解决办法就是在sftp上传文件时首先上传到临时目录下，之后mv重命名为原文件比较保险。

parseInt

Mon, 22 Apr 2024 23:37:56 +0800

今天看到公司内部平台推送了一道关于parseInt的问题，发现结果出乎一聊，根本原因是对于parseInt执行理解不清晰，这里Mark下。

问题

parseInt('0xf',16)
// 15

parseInt('0xf')
// 15

parseInt(0xf,16)
// 21

parseInt(15,16)
// 21

解释

parseInt第一个参数，会从首个非空格字符开始，对于非字符串会做ToString转换，因此parseInt(15,16)本质就是parseInt(‘15’,16)。
parseInt(‘0xf’,16)，JS识别字符串是16进制数字，radix也是16进制，因此直接解析为15。parseInt(‘0xf’)虽然没有传radix，但是根据字符串0x前缀还是识别为16进制因此还是15。

面试题

了解了处理逻辑，这里分析下代码

['1', '2', '3'].map(parseInt)

上述程序的每次回调逻辑如下。

parseInt(1,0); // 1

parseInt(2,1); // NaN

parseInt(3,2); // NaN

radix为0等价于10进制。radix为1，因此为NaN。2进制下不会有3，因此为NaN。

个人觉得记住这些处理逻辑并没有多大价值。真正的价值点是

注意自动类型转换，JS下这种问题很多。
map(parseInt)之类回调写法注意，避免将index误传入造成最终结果不符合预期。

通过腾讯云函数理解下serverless

Sat, 20 Apr 2024 00:00:00 +0800

腾讯云函数用了几次了，确实很方便。腾讯云函数就是serverless产品。这里从云函数的使用上理解下serverless。

需求1

在开发微信小程序时需要个中间服务端，其业务非常简单，更多是调用大后端，云函数里只是简单的分发请求和DB查询操作。如果自己部署有成本。考虑后决定使用云函数。

使用云函数后，就不需要关心服务器运维了。

需求2

有个需求是用户可以自行编程实现自己的AI聊天逻辑，只是规范化输入和输出，最终还是在我们的Web中使用。一开始我考虑的是使用WebWorker,但弊端是国内AI服务有跨域限制，因此考虑在服务端解决，同时因为如果直接在后端项目中执行又会有安全风险，需要在沙盒环境下，考虑后决定使用云函数。

云函数本身是个服务端应用，因此没有跨域问题，同时独立沙盒执行不会对我的服务有任何影响。

需求3

有个需求是我需要搭建一个代理服务，如果自己购买服务器，需要考虑机器配置，域名，后期维护等。但使用云函数只需要自己上传下代理代码即可。域名不需要考虑，本身云函数也可以动态调整配置负载，即使是代理日志的话也通过简单的配置即可。

serverless是什么

在多次使用云函数后回过头再看下serverless的定义，就理解了。

Serverless 是一种云原生开发模型，允许开发人员构建和运行应用程序而无需管理服务器。 Serverless 并不意味着不需要服务器，只是服务器由云厂商提供服务器的维护，更新，扩展等无差异化的服务器管理的日常工作。开发人员可以将其代码简单的打包部署在无服务器，最大化利用云的弹性可扩展性构建自己的应用程序。

写在最后

比如我们在云厂商上买个服务器VPS，我们需要在机器这个粒度上自己去搭建服务，而Serverless的粒度比机器/更细达到一个函数的程度。

综上可以发现云函数的使用中确实是一种聚焦应用/函数，不需要关心服务器的感觉。

AI聊天中使用SSE

Sat, 13 Apr 2024 00:00:00 +0800

ChatGPT火了一年了，技术上的话也带动了SSE的使用。这里也总结下我对它的认识。

SSE的优势

使用标准的HTTP协议，并非WebSocket。相对比WebSocket全双工资源开销相对较小。
SSE传输的文本数据，使用开销简单。

服务端实现

服务端实现相对简单，只要responseType设置为text/event-stream;，持续发送数据到前端直到结束即可。

客户端实现

EventSource

const evtSource = new EventSource("sse.php");
evtSource.onmessage = (e) => {
 console.log(`message: ${e.data}`);
};

Fetch

fetch('/api/openai/stream', {
 method: 'post',
 headers: {
 'Content-Type': 'application/json;charset=utf-8',
 },
 body: JSON.stringify({
 messages
 })
 }).then(res => {
 const reader = res.body.getReader();
 let buffer = '';
 const readChunk = () => {
 reader.read()
 .then(({
 value,
 done
 }) => {
 if (done) {
 console.log('Stream finished');
 return;
 }

 const chunkString = new TextDecoder().decode(value);
 buffer += chunkString;

 let position;
 while ((position = buffer.indexOf('\n\n')) !== -1) {
 const completeMessage = buffer.slice(0, position);
 buffer = buffer.slice(position + 2);
 completeMessage.split('\n').forEach(line => {
 if (line.startsWith('data:')) {
 const jsonText = line.slice(5).trim();
 if (jsonText === '[DONE]') {
 console.log('done');
 return;
 }
 try {
 const dataObject = JSON.parse(jsonText);
 console.log(dataObject);
 } catch (error) {
 console.error('JSON parse error:', error, jsonText);
 }
 }
 });
 }
 readChunk();
 })
 .catch(error => {
 console.error(error);
 });
 };
 readChunk();
 })

如上两个办法

对比

两者兼容性差不多，当然IE是都不考虑。
EventSource的缺点是无法发送请求体，所以一般需要先建立一个请求发送消息，之后再发起EventSource。而Fetch与XHR一样可以携带请求体。所以没特殊需求fetch是更好的选择。

ChatGPT的打字机效果

ChatGPT很早就支持了流返回，用户体验到的是打字机效果。那么GPT是如何做的呢。

抓包分析ChatGPT使用的是fetch，发起请求是将message信息携带，返回结果类型为text/event-stream; charset=utf-8，即服务端不断返回回答信息直到结束。

具体请求为network中检索https://chat.openai.com/backend-api/conversation

done。

xterm中的attachCustomKeyEventHandler

Sat, 13 Apr 2024 00:00:00 +0800

xterm.js中监听按键执行特殊处理需要用到attachCustomKeyEventHandler，这里说明下。

源码解读

/**
 * Attaches a custom key event handler which is run before keys are
 * processed, giving consumers of xterm.js ultimate control as to what keys
 * should be processed by the terminal and what keys should not.
 * @param customKeyEventHandler The custom KeyboardEvent handler to attach.
 * This is a function that takes a KeyboardEvent, allowing consumers to stop
 * propagation and/or prevent the default action. The function returns
 * whether the event should be processed by xterm.js.
 *
 * @example A custom keymap that overrides the backspace key
 * ```ts
 * const keymap = [
 * { "key": "Backspace", "shiftKey": false, "mapCode": 8 },
 * { "key": "Backspace", "shiftKey": true, "mapCode": 127 }
 * ];
 * term.attachCustomKeyEventHandler(ev => {
 * if (ev.type === 'keydown') {
 * for (let i in keymap) {
 * if (keymap[i].key == ev.key && keymap[i].shiftKey == ev.shiftKey) {
 * socket.send(String.fromCharCode(keymap[i].mapCode));
 * return false;
 * }
 * }
 * }
 * });
 * ```
 */
attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void;

源码位置

 protected _keyDown(event: KeyboardEvent): boolean | undefined {
 this._keyDownHandled = false;
 this._keyDownSeen = true;

 if (this._customKeyEventHandler && this._customKeyEventHandler(event) === false) {
 return false;
 }
 ...
 }
 protected _keyUp(ev: KeyboardEvent): void {
 this._keyDownSeen = false;

 if (this._customKeyEventHandler && this._customKeyEventHandler(ev) === false) {
 return;
 }
 ...
 }
 protected _keyPress(ev: KeyboardEvent): boolean {
 let key;

 this._keyPressHandled = false;

 if (this._keyDownHandled) {
 return false;
 }

 if (this._customKeyEventHandler && this._customKeyEventHandler(ev) === false) {
 return false;
 }
 ...
 }

源码位置

由上可以看出

attachCustomKeyEventHandler中回调函数是在xterm.js中优先处理，之后才是xterm.js控制。回调函数在keydown/keyup/keypress阶段均会被触发。而回调函数返回值为void还是true效果一致，只有false才会阻止xterm.js进一步处理该按键输入，

举例

比如我希望xterm.js下按`ctrl ``时执行某个特殊动作，比如唤起AI，因此如下操作即可。

term.attachCustomKeyEventHandler((event)=>{
 if (event.type==='keydown'&&'`' === event.key && event.ctrlKey) {
 // dosomething
 return false;
 }
});

假如执行处理后还需要xterm.js继续处理，则return void或者true即可。

done。

nodejs项目中下加载esmdule

Wed, 10 Apr 2024 08:24:01 +0800

nodejs支持esmodule导入，通过import可以加载esmodule，但也有些条件，如果不满足仍然会报错。

注意：nodejs下import与浏览器侧有区别。

import本地JS模块

js文件所在文件夹目录下package.json中声明type:module
文件后缀为mjs

import URL

node下执行import(url)报错ERR_UNSUPPORTED_ESM_URL_SCHEME

错误代码解释如下：

import with URL schemes other than file and data is unsupported.

由此可以知道nodejs下动态import是不支持URL的，但比如deno是支持URL的，不过deno不考虑commonjs没有这个历史包袱。

了解shebang

Tue, 02 Apr 2024 00:00:00 +0800

经常会看到Shell文件首行有个#!/bin/sh. 有时没有私护也能运行，不清楚是干嘛的。直到最近在编写Alfred Workflow时才了解到这个叫做Shebang。这里就mark下。

Shebang

Shebang即#!，如果存在的话一定是该文件第一行的前两个字符。
在文件中存在Shebang的情况下，类Unix操作系统的程序加载器会分析Shebang后的内容，将这些内容作为解释器指令，并调用该指令，并将载有Shebang的文件路径作为该解释器的参数。
文件可以没有Shebang首行，但文件将不能直接被执行，但如果调用文件执行时直接使用解释器则可以运行。

例子

#!/bin/sh—使用sh，即Bourne shell或其它兼容shell执行脚本
#!/bin/csh—使用csh，即C shell执行
#!/usr/bin/env node—使用node，即nodejs执行，这里使用env的话，可以避免使用node绝对路径。

node例子

#!/usr/bin/env node
console.log(
 JSON.stringify({
 response: process.env.ruleContent,
 footer: process.env.ruleName
 })
);

如上在终端下可以直接执行，如果删除首行，直接执行将报错，除非node xxx执行即可。

FileReader读取大文件

Sun, 31 Mar 2024 22:15:36 +0800

前端采用FileReader可以读取文件内容，但是在读取大文件，比如1-3GB文件时发现会有显著卡顿。这里Mark下优化办法。

卡顿原因

全量读取文件的话，文件内容会都存入浏览器内存中，因此会出现卡顿。

解决办法

文件file进行slice分片，每次异步读取分片数据。

const chunkSize = 1 * 1024 * 1024; // 1MB
 function readChunk(file, start, chunkSize) {
 const reader = new FileReader();
 return new Promise(resolve => {
 reader.onload = (evt) => {
 // console.log(evt.target.result);
 resolve(evt.target.result);
 };
 reader.readAsArrayBuffer(file.slice(start, Math.min(start + chunkSize, file.size)));
 })
 }

对比

以2.3GB数据为例

使用FileReader.readAsArrayBuffer分1MB片读取数据，时间开销如下
使用FileReader.readAsArrayBuffer全量读取文件，发现一直没有读取结束

以1.98GB数据为例

分片读取

全量读取

结论

由上可以看到，分片读取文件内容是节约性能的，且更快能够读取到指定部分内容，但读取总时间并不一定比全量少。但文件越大，差距会越大。
2GB以上文件浏览器一次性全量读取会有问题。

延伸

在前端处理文件二进制是经常会遇到Blob和ArrayBuffer，如果只是单纯分片数据推荐Blob，blob只是原数据视图本身并没有打开销，因此比如上传文件，可以直接file.slice进行分片发送服务端即可。但如果需要前端读取文件内功，或者还要修改文件，则推荐ArrayBuffer。

PowerShell常用命令

Sun, 31 Mar 2024 11:38:26 +0800

最近WebShell需要支持PowerShell环境下的文件管理，为了实现文件相关操作需要了解下相关命令。这里总结下

压缩文件夹

Compress-Archive -Path '${formatted}' -DestinationPath '${zipTempPath')}'

复制文件/文件夹

Copy-Item -Path '${filePath}' -Destination '${dirPath}' -Recurse -Force

移动文件/文件夹

Move-Item -Path '${filePath}' -Destination '${targetPath}' -Force

解压ZIP包

Expand-Archive -Path '${path}.zip' -DestinationPath '${destinationPath}';Remove-Item -Path '${path}.zip' -Force

注意：Path参数必须zip后缀，否则报错。

删除文件/文件夹

Remove-Item -Path '${formatted}' -Recurse -Force

创建文件夹

New-Item -Path '${formatted}' -ItemType Directory

重命名

Rename-Item -Path '${formatted}' -NewName '${newName}'

多命令执行

如果需要执行多个命令，不同于Linux下以 && 连接，powershell需要使用;

Move-Item -Path '${path}' -Destination '${path}.zip';Expand-Archive -Path '${path}.zip' -DestinationPath '${destinationPath}';Remove-Item -Path '${path}.zip' -Force

常见问题

w2：无法加载文件 C:\Program Files\node js\w2.ps1，因为在此系统上禁止运行脚本。

# 管理员身份运行powershell

# 检查当前的 PowerShell 脚本执行策略
get-ExecutionPolicy
# 设置 PowerShell 的执行策略为 RemoteSigned，
set-executionpolicy remotesigned

Path包含[]

如果path中包含[]，比如执行Move-Item，不报错，但执行不成功。原因是无论单双引号，路径中包含的半角[]均会被视为正则。解决办法2个

增加`对[]进行转义

比如

Move-Item -Path 'C:\Windows\Temp\`[漫威`] xxx.jar_1717312576427' -Destination 'C:\Windows\system32\config\systemprofile\`[漫威`] xxx.jar' -Force

将-Path修改为-LiteralPath

 Move-Item -LiteralPath 'C:\Windows\system32\config\systemprofile\123 456\[漫威] xxx.jar' -Destination 'C:\Windows\system32\config\systemprofile\789\[漫威] xxx.jar' -Force

New-Item不支持LiteralPath参数，直接使用Path即可，也会被视为字符串。

写在最后

在windows时下执行命令时有PowerShell和CMD选择，如何选择呢。可以参考微软说法，官方是提倡使用PowerShell，CMD已进入维护阶段。

文档

https://stackoverflow.com/questions/21008180/copy-file-with-square-brackets-in-the-filename-and-use-wildcard

xterm终端写入欢迎信息

Fri, 29 Mar 2024 09:41:29 +0800

登录终端总是会提示一段欢迎语，那么想改变这段欢迎语该如何做呢。最近在做WebShell时考虑如何解决该需求

服务器设置

最直接的方式即服务器配置，比如bashrc中增加echo 'hello world'。那么在登录WebShell后则会有该信息的打印。

但服务器端设置缺陷是

简单的增加欢迎语言，会使得任何终端登录都有该信息，影响面广。
需要修改服务器配置，成本高一些，比如WebShell想实现该设置，则需要执行指定命令修改bashrc等文件。

xterm.js-终端客户端设置

除了服务端设置，通过直接客户端修改也是可行的。WebShell的话即通过xterm.js实现。比如在终端连接成功后执行如下命令

term.write("\x1B[34;43mmy github is https://github.com/alanhe421 my github is https://github.com/alanhe421 my github is https://github.com/alanhe421 my github is https://github.com/alanhe421\x1B[0m"

 + '\r\n', () => {
 webshell.sendData('resize', {
 rows: term.rows,
 cols: term.cols,
 });
 });

这里解释下代码

term.write后信息是直接写入终端模拟器，并非发送到服务端终端后进行的回显。
因为非服务器发送回来的信息，因此终端的尺寸服务器端并不知道，因此需要发送下rows/cols信息，避免在之后的终端操作中，服务端的回显出现错位情况。

Terminal的URL-Scheme支持

Thu, 21 Mar 2024 00:00:00 +0800

MacOS/Windows都自带了终端App，如果有URL Scheme支持的话，那么通过网页超链接就可以唤起终端SSH会话。这里调研下其可行性。

URL-Scheme支持

MacOS

ssh://<username>@<host>:<port>

点击测试

默认是Terminal运行，可以通过iterm2等第三方终端App设置修改为对应App打开。

Windows

实际验证默认不支持，Putty等App可以经过配置进行支持，给个例子。

Windows 整体内置的URL Scheme也有一些，比如支持唤起商店指定App如Terminal产品页，点击测试

另外了解下，Windows11预装Terminal，之前系统需要手动安装。

写在最后

期望Windows能改进下这块的支持，对比Mac还是差一截。

GitHub开源项目提交PR

Sun, 17 Mar 2024 00:00:00 +0800

GitHub上如果是自己玩项目比较简单，但如何协作贡献开源项目呢，这就比较有意思了。这里mark下我在贡献开源项目，比如inshellisense积攒的经验。

这里以项目inshellisense为例

fork开源项目，microsoft/inshellisense => alanhg/inshellisense
新建分支，比如fix/file-template，进行开发
- 有UT的话更新UT，确保测试通过
- 这里不直接使用主分支，是因为主分支用来同步项目更新，避免开发中，原项目有了新commit
- 同时新建分支也可以更好的利用分支名表示在做的修改是feat还是fix等
提交到上游即alanhg/inshellisense
开源项目microsoft/inshellisense如果有更新，拉取更新Sync fork
提交分支fix/file-template进行rebase with主干分支，确保最新已同步
重新推送到上游alanhg/inshellisense
发起Pull Request，详细描述改动，等待合并
- 如果PR review中有任何问题，积极反馈及解决
合并成功即🎉
可以将分支fix/file-template删除，切换到主分支，如果还有新的贡献可重新走步骤5进行操作

Pnpm结合Vite进行本地包调试问题

Sun, 03 Mar 2024 00:00:00 +0800

Pnpm+Vite进行项目开发时，当进行本地包调试开发，Vite下加载的还是老版包。这里分析并解决下该问题

本地包调试步骤

因为包管理器是pnpm，所以对应的调试包挂载步骤就是这样

本地包执行pnpm link --global
具体项目下执行pnpm link pkgname --global

执行上述步骤浏览器访问Web即复现现包版本不对的问题。

这里先分析下在vite/pnpm

.vite

vite构建项目时会在node_modules下创建.vite文件夹

.vite更是需要满足以下任意一点的变动

Package manager lockfile content, e.g. package-lock.json, yarn.lock, pnpm-lock.yaml or bun.lockb.
Patches folder modification time.
Relevant fields in your vite.config.js, if present.
NODE_ENV value.

同时vite下如果想强制刷新需要--force或者删除.vite，相关介绍见官方

当执行pnpm link时会发现lock是没变动的，因此.vite缓存也就不会更新。

.pnpm

node_modules下的包都会软链接到.pnpm文件夹。当执行pnpm link

lock文件不会有变动
node_modules下对应的pkg软链接到全局link的包下

问题分析

综上，问题原因是pnpm link后lock文件并不会更新，虽然依赖的包链接改了即内容改了，但vite是无感知的。因此vite缓存需要手动刷新。手动删除vite，重新执行vite，会发现加载内容正确。

js中str.trim方法

Sat, 02 Mar 2024 22:25:08 +0800

string字符串有trim方法，但trim并非只是处理首尾空格，最近使用时发现有认识上的错误。因此mark下

根据MDN中介绍可以看到，trim处理的是首尾的white space+ line terminators

A new string representing str stripped of whitespace from both its beginning and end. Whitespace is defined as white space characters plus line terminators.

而空格只是其中一种white space。那具体有哪些字符呢

White space


Code point	Name	Abbreviation	Description	Escape sequence
U+0009	Character tabulation		Horizontal tabulation	\t
U+000B	Line tabulation		Vertical tabulation	\v
U+000C	Form feed		Page breaking control character (Wikipedia).	\f
U+0020	Space		Normal space
U+00A0	No-break space		Normal space, but no point at which a line may break
U+FEFF	Zero-width no-break space		When not at the start of a script, the BOM marker is a normal whitespace character.
Others	Other Unicode space characters		Characters in the “Space_Separator” general category

Line terminators


Code point	Name	Abbreviation	Description	Escape sequence
U+000A	Line Feed		New line character in UNIX systems.	\n
U+000D	Carriage Return		New line character in Commodore and early Mac systems.	\r
U+2028	Line Separator		Wikipedia
U+2029	Paragraph Separator		Wikipedia

所以说字符串中首尾包含上述字符在trim后都会被删除。

举例子

这里测试下几个字符

console.log('\r123\r'.trim().length) // 3
console.log('\n123\n'.trim().length) // 3
console.log(' \n123\n'.trim().length) // 3

只处理空格

console.log(' \n123\n'.replace(/^\x20+|\x20+$/g,'').length)

写在最后

之所以发现该问题还是因为程序中字符串被被赋值为\r，而str.trim后会是空字符串，这个不符合预期。因此才重新看下trim逻辑，发现了理解有误

HTTP3使用指南

Sat, 02 Mar 2024 16:57:17 +0800

最近把博客所在服务器从Nginx改为Caddy，而Caddy也支持了HTTP3，所以这里也尝试下HTTP3升级。

说明：2022年6月6日，IETF QUIC和HTTP工作组成员Robin Mark在推特上宣布，历时5年，HTTP/3终于被标准化为 RFC 9114，这是HTTP超文本传输协议的第三个主要版本

配置

Caddy

{
 servers {
 protocols h1 h2 h2c h3
 }
}

执行命令查看端口情况，netstat -tulpn | grep caddy

UDP端口不需要监听

端口开放

确保防火墙开放443/UDP端口

客户端/浏览器/Chrome

除了服务端支持外，客户端也需要确保开启。以Chrome为例，新版本比如v122.0.6261.69默认是开启了Quic支持

确定开启状态可以查看：chrome://flags/#enable-quic

测试站点是否支持HTTP3

https://http3check.net/

执行命令

docker run --rm ymuski/curl-http3 curl -IL --http3 https://1991421.cn

$TERM介绍

Sun, 25 Feb 2024 00:00:00 +0800

在开发Webshell时会遇到一些脚本中关于有$TERM环境变量的使用。没明白到底干嘛的。

这里总结下

TERM

The $TERM is an environmental variable in Linux and Unix shell environments. This variable defines the terminal type. In other words, it sets the terminal type for which output is to be prepared.

如上可看出TERM定义了终端类型，不同类型会影响终端功能，比如颜色显示/光标控制

可能的值

进行SSH连接会话后，执行echo $TERM会看到值，可能是下面的某个

xterm
xterm-color
xterm-256color
vt220
vt100
dumb
linux

我个人实际测试，比如开启交互式会话，会看到是xterm-256color，当我走非交互会话执行命令会发现是dumb或空。通过上面理解term的含义也就理解非交互式会话功能简单，比如颜色根本不需要。

值设定

比如bashrc/bash_profile中都可以设置
客户端开启SSH会话时会进行设定。比如ssh2客户端。

修改测试

ubuntu系统下当我把bashrc中设置term为vt100或者xterm-256color，返回的终端信息，xterm-256color带颜色，vt100不带。

写在最后

如上也就了解了TERM，实际使用中该值并不需要自己进行设定，本身终端模拟器已经会进行设定。当然如果还是想自己设定也没问题。

hexo下常用插件

Thu, 08 Feb 2024 10:43:35 +0800

博客目前还坚守着hexo技术栈。这里Mark下我使用到的插件

注意：配置所在文件为_config.yml

hexo-abbrlink

permalink: :year/:month/:day/:abbrlink/

hexo-algoliasearch

文章检索，免费额度够用

# https://github.com/LouisBarranqueiro/hexo-algoliasearch
algolia:
 appId:
 applicationID:
 apiKey:
 adminApiKey:
 chunkSize: 5000
 indexName: my_blog
 fields:
 - content:strip:truncate,0,200
 - title
 - permalink
 - tags

hexo-excerpt

自动摘要

# https://github.com/chekun/hexo-excerpt
excerpt:
 depth: 5
 excerpt_excludes: ['img']
 more_excludes: []
 hideWholePostExcerpts: true

hexo-generator-archive

归档页面生成

# https://github.com/hexojs/hexo-generator-archive
archive_generator:
 enabled: true
 per_page: 10
 yearly: true
 monthly: false
 daily: false
 order_by: -date

hexo-generator-feed

生成feed.xml订阅链接，服务RSS

# https://github.com/hexojs/hexo-generator-feed
feed:
 type: atom
 path: atom.xml
 limit: 20
 hub:
 content:
 content_limit: 140
 content_limit_delim: ' '

hexo-generator-sitemap

生成站点xml，SEO有用

#Generate sitemap.
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
 path: sitemap.xml

hexo-generator-tag

生成TAG标签页面

# https://github.com/hexojs/hexo-generator-tag
tag_generator:
 per_page: 10
 order_by: -date

hexo-symbols-count-time

文章统计数据生成，比如字数，大概需要阅读时长等

# @see https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
 symbols: true
 time: true
 total_symbols: true
 total_time: true
 exclude_codeblock: false
 awl: 2
 wpm: 300

hexo-theme-next

站点主题，我比较喜欢theme-next，主要是配置也挺丰富

# https://github.com/next-theme/hexo-theme-next
theme: next

写在最后

hexo目前还属于active状态
博客的维护重点还是内容，目前hexo还算够用

GitHub Copilot CLI使用

Thu, 08 Feb 2024 00:00:00 +0800

Copilot CLI已经公测了，之前一直没玩，现在尝试用了下，这里介绍下如何使用及我的看法

CLI当前版本version 0.5.4-beta (2024-01-04)

要求

与GitHub Copilot一样，需要订阅付费

安装

# 安装GitHub CLI
brew install gh

# 更新GitHub CLI
brew upgrade gh

# 登录GitHub
gh auth login

# 安装copilot
gh extension install github/gh-copilot

如上安装后即可正常使用

使用

目前CLI功能比较单一

解释命令
```
gh copilot explain "git push"
```
建议命令
```
gh copilot suggest "安装 git"
```

目前无法设置提示词，因此返回结果会是英文，但命令提示词是可以中文描述，毕竟底层OpenAI是多语言支持的

到此CLI功能就完了，就这些，期待CLI继续更新吧，比如支持系统提示词，比如支持聊天而非一定限制在命令？

ssh2包介绍

Sun, 14 Jan 2024 10:31:13 +0800

开发WebShell时会用到ssh2包，这里介绍下它的使用

说明：ssh2模块即openssh协议的NodeJS版客户端实现。

常用方法

Client
1. connect-建立连接
连接支持密码/密钥/交互键盘输入，确定连接成功后就可以做些基本操作了

如果是连接失败，可以开启debug，方便排查失败原因。一般而言，本地终端可以连接上，那么ssh2也一样，因为都是openssh客户端
1. con.shell

开启交互Shell，即平时终端中不断输入输出，终端的话，比如直接断连接，长时间不输入，输入exit多种方法均可

3. con.exec

执行命令，比如cd命令，执行完后，该执行直接就结束了，即stream.end

httpAgent

这里的agent可以实现内网穿透，比如目标机器有个127.0.0.1:80的web服务，那么就可以使用ssh建立的agent穿透访问

sftp

文件操作的话，推荐使用基于ssh2实现的ssh2-sftp-client

Server

创建ssh server

在使用ssh2时，一定会遇到Channel的概念，需要单独说明下

Channel

ssh2下connect是建立一条ssh连接，ssh连接是基于tcp的，而tcp支持多路复用。所以ssh2下这些不同的操作是可以建立在同一个连接下。

交互shell/sftp开启文件操作/exec执行命令，这些都是开启不同的channel，即它们并不相通，比如交互shell中sudo了用户，那么sftp,exec都是无感知的。当然可以复用也就可以不复用，只要走不同的connection即ssh2下的Client，那就不会复用

目标机器里如果想查看ssh连接数，可以走命令netstat -an | grep ':22'

一些问题

cwd可控？

openssh不支持，因此ssh2也就不支持，目前做不到.shell开启会话后在指定CWD，目前唯一的做法是stream.write(cd /var/www\n)。

但坏处是该输入会存在回显问题

写在最后

到此ssh2下的基本操作就这些了。

xterm-headless介绍

Mon, 25 Dec 2023 00:00:00 +0800

xterm.js官方repo中除了浏览器组件/插件外，还有headless组件支持，那么xterm-headless是什么东西呢。

最近在翻看inshellisense时看到其中用到了xterm-headless，研究后理解了headless的作用。这里Mark下。

headless-nodejs支持

首先通过官方介绍也就知道了headless是用在nodejs侧的。即服务端也可以实例化一个terminal的客户端组件，然后操作执行。

注意点

目前无官方nodes插件，但还是支持自定义开发的，只是不要依赖DOM API

使用

使用上的话，因为跟浏览器端一致，直接使用xterm.Terminal即可

使用场景

了解服务端也支持xterm.js后，那么最关键是使用场景在哪。

举个例子，服务端ssh2连接用户端，与目标服务器的通讯数据是流，一般我们是发送到客户端，然后写入xterm.js组件，xterm.js帮我们把数据结构化，当我们需要写入数据的时候也是通过xterm.js进行写入的。当有了服务端支持，那么举个例子，我们完全可以把数据也塞到服务端一份，那么假如用户关闭了浏览器终端，服务端还有个正常再跑，我们也可以进行任务写入数据，这不就是个远程连接—-哨兵模式吗。

inshellisense

再说回前面提到的inshellisense，简称is。is之所以会用到headless，是因为需要利用它将终端数据写入这样有一个虚拟的终端，方便计算终端光标位置，提取终端信息等。感兴趣的可以看下源码

写在最后

因此，headless还是有一定作用的，即服务端也可以完全实例化一个xterm

油猴使用

Sat, 23 Dec 2023 00:00:00 +0800

今年油猴脚本用的多些。这里总结下目前的使用情况。

定位

油猴用于强化网页，比如支持网页视频多倍速，网页样式修改，自动化一些操作等

常用脚本

JD Review

右键-自动评论，获得一点京豆
中信还款

进入中信银行页面后，自动进入我的贷款页面，统计当前利息占比等信息。银行网页并不这些信息，而这些才是最重要的。
视频变速

有些网页没有开放视频的多倍速变速，因此脚本增加了右键菜单的多倍速切换
文本选中支持
工作定制化脚本
- 比如加载某网页时，自动执行一些选项操作等

油侯配置

开启同步服务

多个设备使用的话，推荐开启同步服务。

注意首先配置模式选择高级。Userscript 中run按钮如果为灰色不可选时，先点击save即可。

常见问题

格式化代码

当前插件本身并未提供格式化代码工具，推荐走VSC等编辑器解决。

写在最后

如果有些网页高频使用但又不满意的话，可以考虑是否可以通过油猴进行增强。

node命令中的inspect

Wed, 20 Dec 2023 23:53:19 +0800

当使用WebStorm/Visual Studio Code时针对package.json中定义的脚本，我们都可以直接点击debug启动脚本，为什么这样做就可以调试呢，这里粗粒度解释下

IDE下的debug

比如原脚本是 "start": "node app.js",当我们需要调试这个node服务时，点击debug按钮，打印信息如下

/Users/alanhe/.nvm/versions/node/v18.16.1/bin/npm run start

> express-demo@0.0.1 start
> node app.js

Debugger listening on ws://127.0.0.1:63206/3fc8664c-10d9-4f99-8ed8-04efd382d9ae
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Example app listening on port http://127.0.0.1:8000!

可以看到多了一个ws请求，这个即服务调试的连接。接下来也说明白了其实就是nodejs下的inspector

IDE这里做了什么呢？其实就是追加了inspect参数设置

node下的inspect

如上的debug等价于如下的命令

node --inspect=127.0.0.1:63206 app.js

因此，即使不使用IDE的debug也是可以做到的，但是当我们直接使用该命令，还不会进入IDE断点，还需要在IDE下配置下才行。

WebStorm下的话，需要启动Attach to Node.js/Chrome，VSC下是Debug:Attach to Node Process

进行attach后即可以正常在IDE中调试断点了。

inspect具体说明戳这里
inspect缺省配置是127.0.0.1:9229

写在最后

之所以困惑这个问题是，当脚本里直接自行配置了inspect，IDE下又debug操作会发现进入不了断点。原因即手动inspect，IDE并无法自动捕捉到对应的进程，因此也就不work了。

前端开发常用npm包

Wed, 20 Dec 2023 23:04:11 +0800

这里罗列下作为前端开发者常用到的npm包

local-web-server

ws一下，随时起一个web server
whistle

代理服务
chalk

console输出彩色化
readline

终端交互输入

JS中打开新页面方式

Wed, 20 Dec 2023 22:54:05 +0800

前端代码中经常需要打开新页面，这里总结下做法和遇到的问题

做法

a标签
window.open

两者具体来说window控制会更为精细，比如可以控制窗体宽高等。a标签的话需要DOM下需要创建出a标签元素，只是具体可见不可见就看情况了。a标签相比较更为推荐，因为代表着用户行为驱动的交互形式。

pwa中的行为表现

pwa是网页的一种展示形态。如果是pwa中使用了上述两种打开新页面的方式，行为也有不同。

a标签会回到传统浏览器UI下打开
window的话还是会以pwa配置的形式打开，比如pwa配置standalone，则打开的window也是

个人觉得pwa下应该使用location.href，不要打开新tab页面，尽可能创造类App体验。

guacamole-common-js

Sun, 10 Dec 2023 22:24:47 +0800

最近遇到个问题，即远程桌面开启后，切换到别的tab页，输入事件失效了。

var keyboard = new Guacamole.Keyboard(document);

keyboard.onkeydown = function(keysym) {
// Do something ...
};

keyboard.onkeyup = function(keysym) {
// Do something ...
};

代码大致如上。

原因

Guacamole.Keyboard进行了事件捕获且阻止了冒泡，因此只要没有销毁就会一直捕获网页所有按键。

解决办法

keyboard.onkeydown/onkeyup绑定事件可以保存到其它地方，将keyboard.onkeydown=null,keyboard.onkeyup=null。之后再触发恢复即可。
new Guacamole.Keyboard绑定元素设置为RDP桌面的元素即可

线上故障-隐藏的定时器问题

Sat, 09 Dec 2023 19:45:51 +0800

最近线上接到一个严重问题，即我们的服务端疯狂的向另一个某SDK服务方发送心跳请求。排查后发现是没注意到的一个点造成的，其中与定时器有关，因此这里Mark下

问题情况

现状是一分钟/一个服务IP请求了超 4000次。实际上正常情况应该是5分钟只会报一次。

分析

整个排查过程还是比较简单/清晰的

心跳请求确认后是SDK本身在初始化实例对象时就会自动触发，我们的逻辑里没有任何关于心跳设置和心跳调用的logic，因此一定是初始化的逻辑问题
- SDK类的构造函数中有setInterval逻辑
查询程序发现目前有4处初始化实例对象，其中1处是服务启动时初始化，而其它3处在API调用时触发，因此假如API调用次数足够的多，那么即会带来N个定时器
生产日志查看，相关API的调用频次上升也与另一个服务监测的数据时间点有关

OK，确定问题后，解决也很清晰，即去掉在API调用中进行实例化SDK对象的逻辑。我们这里根据实际情况应该维持单例，且是服务启动时初始化即可。

修复后，重新监测，发现正常了。

总结

JS函数执行完毕会销毁相关对象但并不会销毁定时器，因此在调用开启定时器这种逻辑时，必须注意销毁逻辑。
如上这种调用某函数，存在隐藏的定时器logic会是个坑，这点需多加注意。

输入框实现自动补全效果

Sat, 25 Nov 2023 00:00:00 +0800

最近做WebShell有个需求即命令输入框支持自动补全。除了本身补全逻辑之外，需要解决的就是补全样式效果实现。

这里总结下实现技巧

补全效果涂上，输入框输入h,补全显示之后的ello。但是两者颜色一定是不同的。

CSS本身并不支持文本字符中比如前几个字符颜色，因此无法纯CSS解决如上的文本颜色显示。

因此需要DOM+JS解决。

解决办法

input输入框之前增加div显示完整的补全文本，颜色即补全文本颜色
通过定位保证与输入框文本位置重叠
input所在元素图层要高于补全div

注意

input所在元素图层z-index高于补全原因是造成，这样可以避免光标操作会受补全框影响，比如鼠标不可以选中补全部分文本
补全文本div里内容是完整文本，比如是hello，因此div需要确保刚好与input文本对齐重叠，因此字体大小，字重等确保一致

例子🌰

https://github.com/alanhe421/express-demo/blob/master/test/input-completion/index.html

WebShell下拷贝粘贴支持

Thu, 23 Nov 2023 23:27:19 +0800

WebShell下拷贝粘贴的支持最近遇到了问题，这里总结下

浏览器剪贴板权限

当浏览器剪贴板权限关闭的情况下，在使用Clipboard API时会报错。但由于有些用户的浏览器有安全要求，因此剪贴板权限是不打开的，那么这时WebShell还可以正常支持复制粘贴吗。答案是可以的，因为浏览器也有拷贝和粘贴支持

浏览器的拷贝粘贴

以Windows为例，拷贝是⌃+c，粘贴是⌃+v

以Mac为例，拷贝是⌘+c，粘贴是⌘+v

以上热键是固定的，即当我们唤起该组合键即可执行对应行为

虽然是这样，但该事件是可以在页面逻辑里捕获并阻止以上的缺省行为的，因此也就可能会有问题，比如windows下的xterm.js

xterm.js下的ctrl+c,ctrl+v

由于xterm.js对于按键是有监听并处理的，因此会造成该热键不work。那么如何解决呢

attachCustomKeyEventHandler方法中针对热键进行处理，返回false即可保证缺省行为继续执行

customKeyEventHandler – The custom KeyboardEvent handler to attach. This is a function that takes a KeyboardEvent, allowing consumers to stop propagation and/or prevent the default action. The function returns whether the event should be processed by xterm.js.


attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void;

浏览器热键支持拷贝粘贴并不能完美替代clipboard，那么clipboard不可用的情况下，还可以实现拷贝粘贴吗。

答案是一半一半

document.execCommand(‘copy’）

document对象的execCommand方法支持拷贝，所以测试下来发现，在没有clipboard支持的情况下，也可以动态拷贝指定文本到剪贴板。

但paste是不支持的，听说IE支持。当然还需注意，该API不提倡，属于老古董了。但作为兜底支持拷贝，个人觉得还不错。

写在最后

到此，拷贝粘贴使用也就这些了。

总结，除了我们使用clipboard支持之外，在没有权限的浏览器下，我们还是可以使用浏览器的默认热键实现最基本的文本选中，当然注意别阻止该行为就行了。

done.

Mousetrap使用指南

Sun, 19 Nov 2023 00:00:00 +0800

网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态，但胜在好用，还是很推荐。

这里介绍下使用

feat

支持单/组合键/gmail风格/Konami Code 按键绑定

gmail风格即比如g i，连续输入这样的按键可以执行某个动作，这种热键的好处是很容易规避浏览器/插件的热键
Konami Code 就有点像魂斗罗时，特定的按键触发30条命一样。个人认为这种按键绑定，如有必要，设计成网页彩蛋挺合适

除了热键绑定基本feat外，mousetrap也有一些拓展可以解决特定诉求

Pause/unpause

停止该mousetrap的绑定和恢复
Record

热键录制，这个在实现网页自定义热键时有用
Bind dictionary

支持字典形式，一次性绑定多个热键。

使用

mousetrap构造函数参数即热键监听绑定元素，如果不传则默认为document
```
let mousetrap = new Mousetrap(window);
```

bind

mousetrap.bind(['command+k','g i'], function(e,combokey) { highlight(combokey); });

注意，回调第二个参数即按键组合，比如command+k或g i

unbind
```
 mousetrap.unbind(['command+k']);
```
注意，ubind这里的按键与bind一致，因此也可以是数组/字符串
trigger
```
 mousetrap.trigger(['g i']);
```
stopCallback
```
 mousetrap.stopCallback = function () {
 return false;
 };
```
控制回调阻止逻辑，默认是input/textarea/editable情况下不触发热键绑定，如上即所有请求情况下均触发
reset()
```
 mousetrap.reset();
```
重置即删除所有绑定
addKeycodes
```
 Mousetrap.addKeycodes({
 144: 'numlock'
 });
```
添加键码映射，一般不用动。这里是因为库老化，整个实现里是用的kecode而不是key。目前MDN已经不提倡使用KeyCode

record

mousetrap.record(function(sequence) {
 alert('You pressed: ' + sequence.join(' '));
 });

注意record的超时时间为1s，且不支持持续record

mousetrap的问题

record超时时间写死了1s，目前需要改源码拓展为参数，或修改值解决

 function _restartRecordTimer() {
 clearTimeout(_recordTimer);
 _recordTimer = setTimeout(_finishRecording, 1000);
 }

mousetrap采用的事件冒泡，如果想走事件捕获，也需要修改源码拓展支持解决

 function _addEvent(object, type, callback) {
 if (object.addEventListener) {
 object.addEventListener(type, callback, false);
 return;
 }

 object.attachEvent('on' + type, callback);
 }

record插件导入打包会遇到报错，原因是for循环中i未定义，严格模式下打包会报错。
```
 ```js
for (i = 0; i < modifiers.length; ++i) {
_recordKey(modifiers[i]);
}
```
```

写在最后

如果是WEB下实现热键绑定，还是可以考虑使用mousetrap

WebShell中实现命令面板

Sat, 18 Nov 2023 20:02:35 +0800

最近做的WebShell-命令面板功能上线，这里Mark下其中的设计/思考

解决痛点

先解释下，为什么要做。

网页WebShell的功能在不断增加，不可避免会造成用户进行一些操作时，整个操作路径会很长。举个🌰，用户想登录一台机器。没有命令面板之前，需要这样做e

光标点击连接管理
光标聚焦搜索
光标选中连接配置
点击登录

可以看出这个操作路径是长的，怎么缩短大量这样的操作路径呢。命令面板就是一个解决方案。整个功能类似于Mac下比较火的效率启动器Alfred/Raycast.

即命令面板提供一个用户不离开键盘即可快速完成动作的一个交互方式。

有了命令面板支持后

热键唤起命令面板
输入框+方向键组合执行选中连接配置-某个连接
回车登录

似乎步骤上并不算少，但用户手可以不用离开键盘，几个操作即登录一台机器

设计

命令面板根本上来说，即一堆操作的列表展示，那么这里就是先把命令抽象下。so，抽象这样一个概念即CommandAction，命令面板任何一个菜单即一个CommandAction，

CommandAction

 {
 uid: string;
 icon?: React.ReactNode;
 title: string;
 match?: string[];
 render?: (item?: CommandAction) => React.ReactNode;
 hotkey?: GlobalAction;
 action: ({ setQuery }: { setQuery: (q: string) => void }) => void;
 actionMap?: {
 [comboKey: string]: ({ close, shaking }) => void
 };
 windowDontCloseOnAction?: boolean;
 preCheck?: () => React.ReactNode;
 variables?: {
 [index: string]: any;
 },
};

解释部分属性设计

uid确保了每一个命令可以唯一，这样在做命令历史排序等有用
match的话，这里学习的Alfred的设计，如果只是单纯靠title来匹配检索，有时候觉得很不对，比如搜索关键词会命中谷歌，在命令面板这里怎么做到呢，最好方式是针对命令可以有机会配置命中关键词
action可以定义命令回车动作，但随着命令面板发展会发现单纯的回车不够使用了，那么为了丰富功能，可以再搭配修饰键+回车，这样就可以丰富了，因此也就有了actionMap的需求。action可以视作actionMap中的[enter]键值
hotkey用于显示该命令的操作热键
variables定义该命令下的一些变量，这些变量用于在该命令选中/执行时作为上下文

CommandAction List

有了CommandAction，那么这样的列表从何来呢，一种是固定值即程序里提前声明的，还有一种是JS动态生成的，比如call后台请求build出CommandAction表。命令面板在接收这样的数据后显示处理即可。

检索/筛选

针对已全量显示的命令列表，筛选的话简单

针对title进行模糊匹配，中文命令面板的话，支持下拼音检索的话，UE会更好
- 内存区保存着全量的命令列表数据，不断根据关键词进行筛选和显示
match配置的话，完整匹配，如果这里也是模糊匹配，有时命中项太多，从而质量也就低了

多级CommandAction List

命令面板发展起来后，会发现一级不足够了，比如提供给了用户SSH连接的命令，但是现在希望用户可以直接在面板里选择目标连接，回车进行连接。为此命令面板就有了多级需求。

这里最关键的是如何联系起这多级命令呢。

方法1

创建一个ScriptCommandsMap，key即关键词，value即命令面板列表生成函数，注意这里的关键词不是用户的筛选关键词而是触发关键词，比如一级命令就是空，连接配置如果作为二级命令，比如叫connect。这样用户当输入关键词为connect时，命令面板识别到，从而根据ScriptCommandsMap找到对应的显示命令列表函数，进而执行即可。

方法2

CommandAction可以增加一个属性比如叫type，用于区分该命令的类型，如果是一个subcommand，说明用户回车后面板并不需要关闭，同时执行action的结果为列表，从而继续显示

个人目前采用的方案1，但之后考虑切换到2，这样做的好处是内存区其实不用管理一个大大的ScriptCommandsMap，而是每个命令自己根据实际情况关联logic。整个控制上更易维护

写在最后

命令面板本身并没有给用户带来任何新的feat，而是缩短部分功能的操作路径。这一点已足够了。

Keyboard Lock API 怎么用？网页锁定键盘输入的使用指南

Sun, 12 Nov 2023 15:30:13 +0800

最近在做WebShell自定义热键，遇到的问题是网页热键受限于浏览器和操作系统，有些热键无法捕获，比如command t。

经过调查发现navigator.keyboard.lock可以解决这个限制问题，这里记录下使用过程中的一些问题和心得

不可拦截热键

以Mac为例，实际测试比如以下几个热键不支持拦截。即JS层面我们无法捕获这类按键，也就阻止默认行为

⌘ N 创建新window
⌘ T 创建新Tab
⌘ W 关闭Tab
⌘ ⇧ [ 左Tab
⌘ ⇧ [ 右Tab

这个似乎无解，但有了lock api 这些就有可能解决了

lock api

lock可以不传入参数即锁定所有按键
lock可以传入参数即锁定指定按键，这里的按键并不支持锁定修饰键

navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);

目前仅支持全屏模式，非全屏模式下lock并不会报错但也不work。

System keyboard lock is only available when the document is in fullscreen mode, and only from a secure origin.

见 https://github.com/WICG/keyboard-lock/blob/gh-pages/explainer.md

兼容性上：Chrome/Edge/Opera支持，Firefox/Safari不支持

见https://caniuse.com/mdn-api_keyboard_lock

例子

PWA下

PWA下即使非全屏，navigator.keyboard.lock后也是可以正常捕获按键的。但不同OS下表现并不一致，因此即使PWA，也建议在全屏下使用热键，体验会是最好的。

写在最后

lock api解决了网页热键受限的痛点，但可惜的是几个主流浏览器还没完全支持，期待支持的一天吧。

WebShell中实现图片显示

Sun, 05 Nov 2023 00:00:00 +0800

终端可以显示图片吗？当然，这里就总结下基于xterm.js实现图片显示

效果

实现

服务器端

这里以Mac作为目标服务器来进行库安装。

# sixel协议
brew install libsixel

# imgcat也可以使用iTerm2的Shell integration打包安装
brew install eddieantonio/eddieantonio/imgcat

WebShell

前端配置部分也很简单，只要加载@xterm/addon-image即可。

注意@xterm/addon-image为xterm官方插件

npm install --save @xterm/addon-image

 const customSettings = {
 enableSizeReports: true, // whether to enable CSI t reports (see below)
 pixelLimit: 16777216, // max. pixel size of a single image
 sixelSupport: true, // enable sixel support
 sixelScrolling: true, // whether to scroll on image output
 sixelPaletteLimit: 256, // initial sixel palette size
 sixelSizeLimit: 25000000, // size limit of a single sixel sequence
 storageLimit: 128, // FIFO storage limit in MB
 showPlaceholder: true, // whether to show a placeholder for evicted images
 iipSupport: true, // enable iTerm IIP support
 iipSizeLimit: 20000000 // size limit of a single IIP sequence
 }
 const imageAddon = new ImageAddon.ImageAddon(customSettings);

 term.loadAddon(imageAddon);

图片插件未加载

假如WebShell中未加载ImageAddon插件，效果如下。可以看出图片数据是包裹在隐藏序列中，因此正常不会显示在终端中。

写在最后

到此WebShell终端即可支持图片显示了。但终端显示图片的实际价值是什么呢？这点就看怎么设计和使用了。

css使用-has函数

Wed, 01 Nov 2023 10:13:08 +0800

最近WebShell开发时，遇到一个动态调整样式的需求即当终端开启上下分屏，上侧出现编辑器的时候，下侧的终端需要调整样式，具体来说是调整最小高。这里考虑走css实现。

分析

has函数可以使用css选择器来判断后面或者子后代是否存在某个元素，因此这样利用has可以捕获到上下分屏的情况下的编辑器元素，之后就可以正常使用+获取兄弟元素，再实际调整样式了。当然JS也可以实现，但CSS实现更加简单

例子

 <style>
 .terminal {
 width: 100%;
 min-height: 200px;
 background-color: #4bd58d;
 }
 .editor{
 width: 100%;
 height: 100px;
 background-color: #003dfd;
 }

 .editor:has(+.terminal) +.terminal{
 background-color: #ff0000;
 }
 </style>

兼容性

css函数使用中都要考虑下兼容性， has函数目前Firefox是不支持的，当然我这里因为功能属于锦上添花，因此兼容性就不用考虑了，如果需要兼容，可以考虑使用JS实现

写在最后

css函数还是可以一定程度避免通过js实现，因此在开发中可以多多利用，当然兼容性也是需要考虑的，毕竟兼容性是前端开发中的一大难题。

Shell安装使用

Tue, 31 Oct 2023 10:27:11 +0800

最近WebShell在支持各Shell函数钩子时遇到了些问题，针对各Shell的安装使用做个记录，以便后续使用。

这里以Ubuntu为例

Bash

chsh -s $(which bash)
# 版本 
bash --version

Zsh

sudo apt install zsh
chsh -s $(which zsh)

# 版本
zsh --version

Fish

sudo apt install fish
sudo chsh -s $(which fish)

Tcsh

sudo apt install tcsh
chsh -s $(which tcsh)

一些区别

bash,zsh在printf "PreExecMarker;$1";打印字符串时不会对参数进行转义，导致可能会出现报错，但是对于fish,tcsh会自动转义，不存在问题。举个例子$1是date +%Y

解决办法是printf "PreExecMarker;%s" "date +%Y";

WebShell中实现SFTP文件管理

Sun, 24 Sep 2023 16:44:40 +0800

WebShell终端给了用户网页形式操作终端的能力后，还需要提供可视化的文件管理，具体来说就是文件上下载，权限修改，在线编辑等。

这里总结下关于这块的实现。

ssh2+ssh2-sftp-client

使用ssh2模块进行解决终端连接后，继续使用ssh2-sftp-client来实现文件的相关操作

list方法实现文件列表获取
- 返回值中可以拿到文件类型，文件名称，文件所属用户id，文件所属用户组id，文件大小，访问时间，修改时间
- 需要说明，如果是软链接，返回的type是l，硬连接的话会是-
get/put方法实现流方式的上下载
rename方法实现文件重命名
delete方法实现文件删除
stat方法实现文件信息获取
mkdir方法实现文件夹创建
rename方法实现文件重命名

如上使用这些方法可以解决了文件管理的一些基本问题，但还有些问题需要处理

问题

判断当前用户是否有权限

首先需要知道当前用户的uid,gid，因此需要走ssh2的exec执行id命令从而获取这些信息，然后当list方法返回文件的uid,gid后，两者进行比较判断即可确定权限

用户列表

GUI上需要实现修改文件所有者，通过执行文件list或者stat命令可以知道文件归属的uid,gid，因此只需要再获取user list即可。这里使用执行命令

# 返回格式如下
# root,0
grep /bin/bash /etc/passwd | awk -F: '{print $1 "," $3}'

文件列表-隐藏文件显示控制

如果需要隐藏文件不可见，如下配置正则表达式，即过滤掉.开头文件
```
conn.list(path, /^[^.]/);
```
这里有意思的是SFTP协议是没有针对文件列表过滤支持的，因此ssh2实际上还是拿了全量的文件列表，在客户端进行的过滤。

ssh2-sftp-client v9已经调整了list方法，filter从正则改为了回调函数，还是可以实现上述效果
以终端会话的当前工作路径作为缺省打开路径

这个文件严格来说是终端部分，并不是SFTP问题，但支持该功能，非常提升UE。这个feat的实现简单，主要是利用了终端钩子，用户每次执行命令后，执行PWD命令，并将解决返回客户端，客户端解析PWD了解当前的路径并存储起来。这样当用户操作到某个路径下时，打开SFTP，将该路径作为path参数传入即可
```
source /usr/local/bash-precmd/bash-preexec.sh
preexec() { printf "\x1B]1337;PreExec;Timestamp=$(date +%s);\x7"; }

precmd() { printf "\x1B]1337;PostExec;Exit=$?;CurrentDir=$(pwd);Timestamp=$(date +%s);CurrentUser=$USER;\x7"; }
```

除了SFTP协议下支持文件管理，还有一些其它情况，比如kubectl

kubectl

如果是kubectl管理连接的容器，那么并不能使用sftp协议，因此需要走透传执行各种命令来解决。命令获取后则解析结果

ls等命令来实现文件列表。但问题在于不同容器系统下命令存在一定程度的兼容性，这里就需要区分处理了
```
ls -l --time-style=full-iso /
```
- 如果是不显示隐藏文件，则增加A选项
- full-iso用于控制时间的格式化，如果不加的话，时间参数的格式受系统locale影响
文件属性的方法不建议采用stat命令做，因为命令结果存在国际化部分，比如其中的文件类型，下图显示是directory，但是如果目标机器locale不是en，则会不同。

因此，这里推荐仍然走ls命令解决，注意携带参数d，这样结果只有一个，即目标文件/文件夹。另外注意与ls -l相比，没有第一行的统计结果。
```
ls -ld --time-style=full-iso /
```

写在最后

以上即为文件管理的大致实现，当然实际会比上述复杂些，但关键点还是这些
在WebShell上线了文件管理相关功能后，通过长期的观察，文件功能属于现有所有功能的No1，可见该功能非常重要。

WebShell中接入AI

Sat, 16 Sep 2023 23:43:22 +0800

AI服务现在赋能各个领域产品，比如我们做的WebShell目前也接入了AI服务。

这里罗列下目前基于AI服务我所做到的一些工作及一些TODO

提示词调优

如果AI服务支持系统提示词的话，那么可以如下配置系统提示词

你是一个Shell专家，我想要知道如何在终端或命令行下完成特定任务吗？我给你这方面的问题，你返回我解决办法。如果问你是谁，你就说我是 WebShell AI 助手，如果问与Shell无关的问题，你就说与Shell无关，我不清楚
如果AI服务不支持系统提示词的话，需要如下进行用户提示词调优，比如下面这样子

你是一个Shell专家，我想要知道如何在终端或命令行下完成特定任务吗？我给你这方面的问题，你返回我解决办法。如果问你是谁，你就说我是 WebShell AI 助手，如果问与Shell无关的问题，你就说与Shell无关，我不清楚 我的问题是:{{userPrompt}}

可以看出用户提示词调优其实类似于系统提示词

提示词中英文差异

受限于AI原理，目前同样的提示词也可能得到不同的结果，比如AI API中的温度参数就可以控制这种随机性。那么中英文提示词也是一样的情况，中英文差异毕竟决定了提示词的不同，那么也就会得到不同的结果。比如这里我使用的是国内AI服务，那么提示词就设置为了中文。

聊天上下文信息处理

聊天历史不可能无限制的发送给AI，比如永远取最近的5条信息即2轮对话+用户的最新Prompt。

因此处理数量之外，一定会是奇数条
一对对话即一句user+一句assistant。假如聊天中发送了一个问题，在AI还没有回复的情况下，点击了停止，那么再继续发送给AI的聊天上下文中不要携带这种没有assistant回复的user信息，即永远保持住一问一答

Token消耗

使用AI付费计费方式一般是根据token，在实际使用中，问和答都会消耗token
为了节省token开销，有些AI服务比如OpenAI API是支持最大token数限制的OpenAI下是max_tokens参数，但国内AI服务，比如混元/文心一言还不支持
AI聊天一般支持流或者普通请求，比如流式返回，假如我们中断流请求，AI本身的推理是可以中断的，这样生成token会少，用户接受的也就少

流形式

流返回有两个优势

提升UE，AI在生成第一个/第一批token时就会开始返回，并持续返回所有内容，用户端就会第一时间看到生成的部分内容，感官上会觉得速度变快了，当然全部内容显示完成时间与非流其实一致
token可能开销会减少，以之所以说可能，因为 AI服务不同，可能 token开销不同。

以OpenAI为例，流请求模式下，每次接受1个token。流请求中断后，AI服务会在几秒内中断生成新token，这样用户还是AI服务本身开销都变小。但有些AI服务做不到请求中断后就停止推理。这样的话，开销就还是全量token的。

TODO

精调

提示词的调优可以引导AI回答的方向，或者控制AI回答的领域范围，但很多时候还是无效的，为此更好的方式是做精调，我理解精调即针对同类/相似问题引导了AI回答的方向，毕竟针对这种通用AI模型，即使是同一个问题，也可以有N中答案，而我们通过很多的样本数据改变了这些答案的权重，自然而言回答也就更倾向于我们提供的方向/答案了。

当前我的WebShell还没开始搞AI 精调，这里就先留坑吧。

写在最后

受限于我当前使用的AI服务还不支持系统提示词，因此当前是使用的用户提示词拼接方案，效果还是很差的。

Linux下ls命令中的time-style参数

Tue, 05 Sep 2023 21:40:18 +0800

在做WebShell时为了实现文件文件管理需要确定ls命令下如何获取文件列表及相关信息，这里mark下

实现命令

ls -Al --time-style=full-iso

通过上述命令执行可以得到如下格式结果

total 190600
-rw-r--r-- 1 root root 1781 2023-07-24 09:56:56.520113036 +0800 cosfs.sh
drwxrwxrw- 3 root root 4096 2023-06-05 16:32:39.466006640 +0800 dir1
drwxrwxrw- 2 root root 4096 2023-05-27 20:46:06.219707419 +0800 dir2
lrwxrwxrwx 1 root root 4 2023-09-05 21:45:49.401943527 +0800 dir3 -> dir1
drwxr-xr-x 3 root root 4096 2023-05-06 06:57:38.000000000 +0800 docs
drwxr-xr-x 484 root root 20480 2023-05-06 15:42:58.494411265 +0800 node_modules
drwxr-xr-x 4 root root 4096 2023-08-29 11:07:33.162370076 +0800 .orca_term
-rw-r--r-- 1 root root 195132152 2023-06-14 19:04:12.167000570 +0800 test 2.zip

根据结果，再通过正则可以获取到

权限信息
所属用户
所属组
文件大小
ISO时间，包含时区信息
文件名，->即软链接

局限性/兼容性

如上time-style参数并非所有Linux均支持，另外类Unix的系统也并不支持。

这里举几个例子

Alpine Linux即不支持，同时并没有内置的命令可以等效time-style。
类Unix如FreeBSD也并不支持

解决办法

安装coreutils，FreeBSD下执行pkg install coreutils ，Alpine Linux下执行apk add coreutils
放弃使用time-style参数，组合使用stat命令解决，当然坏处就是性能会差些，毕竟需要多命令执行

写在最后

Linux系统众多，因此在平时使用的一些命令也需要注意兼容性，兼容性来自于两方面，1是命令版本，2是Linux/Unix遵从的规范不同，命令参数也会有所差异。

WebShell实现终端搜索

Mon, 21 Aug 2023 11:58:25 +0800

install

npm i xterm-addon-search

const searchAddon = new SearchAddon();

term.loadAddon(searchAddon);

说明

alertnate屏，比如vi模式下，检索结果是不准确的，毕竟vi打开文件时获取的内容不一定是全量的，但比如cat文件时就可以，因此alternate下检索不支持终端检索，推荐用户使用vi本身自带的检索之类的会更有效

关于终端当前是normal还是alternate可以采用如下判断logic

term.buffer.active.type === 'normal'

如果是监听改变的话，可以走term.onBufferChange

monaco-editor使用

Sun, 09 Jul 2023 00:00:00 +0800

安装

npm i react-monaco-editor monaco-editor

npm i monaco-editor-webpack-plugin -D

Webpack打包

 new MonacoWebpackPlugin({
 // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
 languages: ['shell', 'json', 'xml', 'yaml', 'sql', 'dockerfile', 'bat', 'ini', 'markdown', 'javascript'],
 filename: '/monaco-editor/[name].worker.[contenthash].js',
 publicPath: '',
 features: ['coreCommands'],
 globalAPI: false,
 }),

注意：filename配置只影响了主文件，动态加载的语言模块文件名并不受该设置影响。解决办法如下

output:{
 chunkFilename: ({ chunk }) => {
 const regex = /((?<=esm_)vs_(basic-languages|language)_.+)/;
 const language = chunk.id.match(regex);
 return language ? `vendor/monaco-${language[1]}.[chunkhash].js` : 'vendor/[name].[chunkhash].js';
 },
 },
 ...

 optimization: {
 chunkIds: 'named',
 ...
 }

xterm-addon-web-links使用

Thu, 06 Jul 2023 23:31:24 +0800

xterm.js下终端内容实现链接识别并可点击可使用xterm-addon-web-links插件，配置方面，但还是有些细节问题。这里Mark下

焦点保持原标签页

 term.loadAddon(new WebLinksAddon.WebLinksAddon(
 (event, uri) => {
 if (isMac ? event.metaKey : event.ctrlKey) {
 window.open(uri);
 }
 }));

浏览器针对链接点击有两种行为

LeftClick是直接打开新标签页，焦点聚焦新页面
MetaKey+LeftClick是打开新标签页，但焦点还是原页面
- Mac下⌘
- Windows下Ctrl

我这里因为需求是不希望点击链接焦点丢失，因此只能在点击事件这里增加metaKey判断来确保用户点击触发时焦点不丢失

Mac下可以使用ctrl而不是meta吗

Ctrl+LeftClick在Mac下行为等价于RightClick即右键菜单，因此不可以

hover时候给出提示

假如用户并不知道⌘+LeftClick点击链接，为此可以在hover捕捉到链接时给提示信息。

{
 hover: (event, text, location) => {
 console.log(event, text, location);
 }
 }

WebLinksAddon第二个参数为配置参数，其中有hover回调函数，event中可以拿到光标的位置信息，因此可以利用位置信息做个tooltip展示之类的

写在最后

over

AntiDebug实现

Sat, 24 Jun 2023 13:52:24 +0800

最近玩文心一言时，打开开发者工具，发现会进入一个匿名函数的断点中，点击继续执行则直接变成空标签页面。这里明显是做了反debug。这里就该实现技术分析下。

分析

在断点位置查看调用栈发现有setInterval。
匿名函数这里的标签显示是VM，所以包含断点的匿名函数是eval或者new Function生成的代码。
断点执行后，执行window.location.replace(“about:blank”);。但具体是如何判断进入了断点，因为这里做了代码混淆，没分析出来。但是可以想到一个办法就是利用时间判断来做。进入debugger之后的逻辑执行肯定是会明显的变晚，算一个时间差就可以判断出是不是开了开发者工具。

例子

 (function () {
 setInterval(() => {
 const startTime = performance.now();
 eval('(function() { debugger;})()');
 const stopTime = performance.now();
 if ((stopTime - startTime) > 1000) {
 window.location.replace("about:blank");
 }
 }, 400)
 })()

讯飞星火的方案

查看了下星火，发现星火也做了反爬虫，但方案不同，星火是利用打开开发者工具打开后会挤压网页文档的高或者宽，通过计算这个差来判断。但这个方案是有弊端的，开发者工具如果需要独立窗口，这个检测就无效了。

const widthThreshold = window.outerWidth - window.innerWidth > threshold;
const heightThreshold = window.outerHeight - window.innerHeight > threshold;
const orientation = widthThreshold ? 'vertical' : 'horizontal';

反AntiDebug

大致分析出了实现方案，那么对应的破解方案也就简单了。星火这类最简单，正如刚才提到的，开发者工具直接走独立窗口直接就破解。

百度的因为是用到了定时器，因此重写定时器实现即可。推荐使用Tampermonkey

 window.setInterval = function(callback, delay) {
 // 在这里，我们简单地不调用原始的setInterval函数，从而阻止所有的定时器
 console.log('Blocked a setInterval call with delay ' + delay);
 };

Never Pause Here

写在最后

只论技术AntiDebug有意思，比如了解了debugger的触发机制，判断开发者工具打开的HACK技巧，如何破解AntiDebug等等。
抛开技术来说的话，鼓吹自研的某度，某星火，怕啥前端debug呢，心虚100%为啥？

升级博客主题:2.0

Sat, 03 Jun 2023 13:39:23 +0800

最近进行第二次博客升级，避免积攒技术升级过多后期不好调整。

这里描述下改动

升级hexo框架

# 直接检测升级相关包，比如hexo,hexo-cli等
npm-check -u

hexo7还是rc且目前使用的next主题中依赖也是6.x，这里也就不大版本升级了

升级next主题

以前是直接删除旧文件夹，拉取新的覆盖，现在采用NPM包管理更方便些。

npm install hexo-theme-next

我这里版本从7.8.0升级到8.17.0

该版本存在breaking change，因此这里将source/_data/next.yml移动到根目录下，并重命名为_config.next.yml

关于hexo-theme-next有两个repo，next-theme/hexo-theme-next和iissnan/hexo-theme-next。推荐使用next-theme/hexo-theme-next，NPM包托管的即该repo

开启addtoany

原分享服务AddThis已关闭，这里开启新的addtoany。

到此，博客升级完成。

部署个人 chatgpt-telegram-bot

Wed, 26 Apr 2023 00:00:00 +0800

ChatGPT使用太不稳定了，为了避免不可用时耽误事，搭建个私人TG Bot备用。调研发现chatgpt-telegram-bot不错，因此选择服务来搭建

搭建步骤

TG下访问@BotFather创建Bot
TG下访问@useridinfobot，获取个人账号UserID，注意不是名字

选择HK或者境外服务器，拉取镜像

docker pull n3d1117/chatgpt-telegram-bot:latest

创建.env文件，配置环境变量，参考https://github.com/n3d1117/chatgpt-telegram-bot/blob/main/.env.example

主要是这四个配置

# Your OpenAI API key
OPENAI_API_KEY=XXX

# Your Telegram bot token obtained using @BotFather
TELEGRAM_BOT_TOKEN=XXX

# Telegram user ID of admins, or - to assign no admin
ADMIN_USER_IDS=ADMIN_1_USER_ID,ADMIN_2_USER_ID

# Comma separated list of telegram user IDs, or * to allow all
ALLOWED_TELEGRAM_USER_IDS=USER_ID_1,USER_ID_2

启动容器

docker run -d --name "chatgpt-telegram-bot" --env-file ./.env n3d1117/chatgpt-telegram-bot:latest

此时，TG下访问Bot就可以玩了

配置更新，服务自动重启

目前的版本是docker run container，环境变量对应的配置文件更新，容器是不会自更新的。因此需要解决配置更新-服务重新创建的问题。这里使用inotify-tools解决。这里以CentOS7为例

sudo yum -y install inotify-tools
创建watch_env.sh文件

#!/bin/sh
while true; do
 inotifywait -e modify .env
 echo ".env file has been modified. Restarting the container..."
 docker stop chatgpt-telegram-bot
 docker rm chatgpt-telegram-bot
 docker run -d --name "chatgpt-telegram-bot" --env-file /root/chatgpt-telegram-bot/.env n3d1117/chatgpt-telegram-bot:latest
done

创建watch-env.service

sudo vi /etc/systemd/system/watch-env.service

服务配置如下

[Unit]
Description=Watch and restart Docker container on .env file changes

[Service]
Type=simple
ExecStart=/bin/bash /root/chatgpt-telegram-bot/watch_env.sh
Restart=always
User=root

[Install]
WantedBy=multi-user.target

服务自启动/运行

sudo systemctl daemon-reload

sudo systemctl enable watch-env.service

sudo systemctl start watch-env.service

GPT4

需要申请获取权限后，修改.env中OPENAI_MODEL=gpt-4

申请地址：https://openai.com/waitlist/gpt-4-api

写在最后

到此，个人bot就有了，虽然也付费，但相对算稳定。期待API-GPT4早点拿到资格，这样更香了。

ssh2-HTTPAgent源码阅读

Wed, 19 Apr 2023 23:24:21 +0800

ssh2包中提供了HTTPAgent，使用该HTTP Agent是可以接管请求，底层再通过SSH建立的与目标机器连接，从而实现内网穿透。

最近需要开发自定义的HTTP Agent，因此这里研究下实现。

整个HTTPAgent实现是在项目下的lib/http-agents.js

const { Agent: HttpAgent } = require('http');
const { Agent: HttpsAgent } = require('https');

for (const ctor of [HttpAgent, HttpsAgent]) {

...
 exports[ctor === HttpAgent ? 'SSHTTPAgent' : 'SSHTTPSAgent'] = SSHAgent;
}

这里可以看到for循环将nodejs下的Agent进行改造并重新导出。

nodejs下的Agent构造函数如下

new Agent([options])

这里因为底层还需要SSH的配置，因此构造函数就是2个参数

 constructor(connectCfg, agentOptions) {
 super(agentOptions);

 this._connectCfg = connectCfg;
 this._defaultSrcIP = (agentOptions && agentOptions.srcIP) || 'localhost';
 }

第一个参数connectCfg即SSH连接需要的参数，第二个是丢给了nodejs下的Agent，因此具体配置直接查看nodejs文档即可，ssh2这里主要是丢给了父类即Agent.

agentOptions中的srcIP在nodejs下是没有的，这个参数是ssh2这里增加的，主要用于底层TCP连接。

createConnection(options, cb)是Agent根据连接池策略动态创建。这里主要就是将TCP连接socket以回调形式返回为第二个参数cb。

这里是new了一个SSH的client，根据connectCfg建立连接，ready后，执行forwardOut，然后得到了TCP连接的socket，在cb(null, decorateStream(stream, ctor, options)); 这里的stream即socket。

之所以还走decorateStream，我理解是socket转为HTTP Agent需要的socket还需要一些属性方法，因此走空方法赋值。

针对异常部分的处理。

如果tcp连接通讯中出现了异常，cb的第一个参数即error返回，同时会主动断掉ssh的client连接
如果tcp连接关闭了，则主动断掉ssh的client连接，此时不用cb返回error.

tcp本地起服务是需要占用端口的，这里即localPort，如果没有明确指定则都0，但0不代表最终端口是0而是系统找寻空置的端口。

const srcPort = (options && options.localPort) || 0;

WebShell中实现编辑器代理

Wed, 05 Apr 2023 13:16:34 +0800

去年针对WebShell做了编辑器功能，截止到目前才算是稳定。这里总结下

调研

终端类产品很少有做编辑器支持的，仅仅只是支持了SFTP。
Google

设计

实现

这里列下关键的实现点

服务端SSH连接用户机器执行code-server安装运行
服务端SSH forward内网支持代理访问内网code-server服务
服务端搭建代理服务器接收浏览器请求再转发到用户机器从而访问code-server服务

写在最后

done!

WebShell中实现前端图片压缩

Wed, 05 Apr 2023 11:57:39 +0800

最近调研前端图片压缩，这里总结下

MIME

media type

<input type="file" id="selectImg" accept="image/*"/>

比如图片上传选择框进行限制，非图片类不可选，则可以使用image/*
该限制比如在Windows下可以被绕开，因此在提交逻辑/后端还可以再严格限制下，方案也是通过mime

 if (!file.type.startsWith('image/')) {
 e.target.value = '';
 return;
 }

压缩手段

尺寸

可以通过调整图像的像素尺寸来减小文件大小
质量

图像的压缩质量通常是通过牺牲图像的细节和准确信息来实现的

格式对比

兼容性

JPEG 2000 by the JPEG group, the oldest of the JPEG successors, available in Safari
WebP by Google, available in all browsers
HEIC by the MPEG group, based on HEVC and available in iOS
- 各浏览器均不支持
AVIF by the Alliance for Open Media (AOM), available in Chrome and Firefox
JPEG XL by the JPEG group, the next-generation codec
WebP2 by Google, an experimental successor to WebP

前端压缩可行性

canvas

Compressor.js

 new Compressor(selectedImg, {
 strict: true,
 quality: 0.6,
 maxHeight: 2160,
 maxWidth: 3840,
 convertSize: 2000000,
 mimeType: 'auto',
 success(result) {

 },
 error(err) {
 console.log(err.message);
 },
 });

自动降级显示图片

HTML img

<picture>
 <source srcset="111.avif" type="image/avif">
 <source srcset="111.webp" type="image/webp">
 <img alt="WebShell中实现前端图片压缩-图1" src="111.png" />
</picture>

CSS background-image

css层面目前没有最有效的方式，推荐走JS判断确定当前系统是否支持avif/webp，从而确定显示对应图片。

function isAvifSupported() {
 return new Promise(resolve => {
 var image = new Image();

 image.onload = function() {
 resolve(true);
 };
 image.onerror = function() {
 resolve(false);
 };

 image.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
 });
}

网上检索到的@supports方式存在问题，比如Mac BigSur+Safari16下，命中但实际并不支持avif从而造成显示黑屏。

写在最后

由上我们可以有几点收获

权衡兼容性可以尝试使用avif/webp格式
前端在不考虑动画图片格式的前提下做前置压缩了

WebShell中实现终端自定义背景图

Mon, 06 Mar 2023 23:50:40 +0800

最近推出的WebShell实现了自定义背景图，这里mark下整体方案

技术方案

整体方案如图，大致的实现细节是

终端方案xterm.js支持透明背景，因此这里设置为透明背景
补充一个终端的兄弟DOM元素，且在前，通过CSS设置背景图，背景图作为终端的底，但是同时通过opacity设置透明度
终端的父元素设置为纯色，不需要透明度

如上即可实现具备透明度的自定义终端背景图了

Demo

戳这里

WebShell中实现网页添加到桌面

Mon, 27 Feb 2023 21:51:19 +0800

最近有需求将我们的PC版WebShell支持下PWA，主要是想利用其特性实现安装到桌面，这样用户可以App形式访问，WebShell也就多了个桌面入口。

这里就mark下基本实现。

PWA配置

首先是基本的PWA配置

manifest配置说明

manifest.webmanifest清单文件，内容是JSON格式

参考

display

minimal-ui

standalone
name/short_name/display配置修改更新

比如name修改，再浏览器重启访问网站是会提示更新，但比如display配置修改，重启浏览器访问app，不会提示，直接会使用最新的。
description
- 该字段配置后，在Windows系统下，光标移动到快捷方式时，hover显示内容，因此不建议很长，推荐与name/short_name一致即可。
- 后期manifest更新description时，Windows下的快捷方式并不会同步更新，必须重新创建才行。
theme_color

如果想动态修改theme_color，可以通过动态修改<meta name="theme-color" content="#0066ff"/>来解决

icon

尺寸建议配置192/512，包含maskable的，共4个图标即可。

screenshots

尺寸建议，narrow的为400x822，wide的为1280x676
图片格式推荐png，webp测试不可用

service-worker.js注册

参考

调试

Chrome隐私模式下不支持PWA安装提示，也不支持ServiceWorker提示

兼容性

PWA支持的浏览器挺多，比如Firefox，Safari都有支持，但支持程度不同。

针对安装这个特性，PC版目前Edge/Chrome，Windows/Mac均支持，具体来说，还有版本限制。

准确判断的话，可以使用以下事件，只有触发了beforeinstallprompt事件，安装提示才会出现。

 window.addEventListener('beforeinstallprompt', (e) => {
 // 可以用于区分是否可以安装，非空表示可以安装，但空表示不支持安装或已经安装过了
 // isInstallAvailable
 window.deferredPrompt = e;
 });

测试发现即使是新的浏览器，比如Chrome，有些同事的电脑访问网页也没有安装提示，不确定是否有些设定可以禁用。

如上配置再结合beforeinstallprompt即可实现网页添加到桌面了。

但还有些细节问题需要处理。

常见问题

判断是否是应用图标启动

 function isStandalone() {
 if (window.matchMedia('(display-mode: standalone)').matches || ('standalone' in navigator && (navigator.standalone === true))) {
 return true;
 }
 return false;
 }

访问网页时检测是否已经安装过

如果安装过，beforeinstallprompt事件是不会触发的，但是beforeinstallprompt不存在三种可能性，因此并没有准确的办法判断，需要按需选择能用的办法。
1. 不支持安装，比如Firefox
2. 不满足使用条件，比如有些同事同版本浏览器没出现安装提示，具体原因不明
3. 支持且已经安装过了
程序化控制从网页选择用App打开

目前不存在这样的接口实现
重复打开

App本质还是个标签网页，因此如果用户多次点击Open with，那么也就会打开多个App

自定义安装提示

可以自行增加一个安装按钮/弹窗，增加一个自定义提示，但最终还是会唤起浏览器自带的安装弹窗

 installApp.addEventListener('click', async () => {
 if (deferredPrompt !== null) {
 deferredPrompt.prompt();
 const {outcome} = await deferredPrompt.userChoice;
 if (outcome === 'accepted') {
 window.deferredPrompt = null;
 }
 }
 });

App启动欢迎画面设定?

不支持，唯一的做法是自己在页面的整个渲染过程中可以适当增加动画，提升体验
隐私模式下不会触发beforeinstallprompt

但支持ServiceWorker
非HTTPS不支持PWA?是的，安全考虑，要求必须上HTTPS。

参考站点

PC版实现了添加到桌面的网页并不多，这里罗列些。

写在最后

综上，这里只是实现了PWA的一个特性应用即增加了入口-添加到桌面。

OpenAI实现根据描述创建shell命令

Fri, 27 Jan 2023 22:48:25 +0800

最近调研openai实现该需求的可行性，这里总结下

验证

demo见这里

实际测试使用gpt/codex来生成shell命令都是可以的，这点符合预期。

但模型/配置在两种模型下有所区别。以下是需要注意的地方。

模型-prompt

gpt和codex在上下文的构建上有区别。codex需要明确语言环境，gpt需要明确具体需求。

codex

#!/bin/bash\n\n# ${text}.\n

我想写一个命令，需求是${text}。\n

要有句号，如上可以看到句号和换行，这个有必要
temperature的值0-1差别很大，0是完全准确，1是最大程度可能的答案即模糊，在上面调研部分发现，iterm2配置的0，而zsh配置的0.5。具体多少还是看选择的模型和使用场景决定吧，这里也是仅供参考。

写在最后

综上，在使用openai前提下，根据描述生成命令很容易实现了。实际体验来说，该功能只能算是个辅助，毕竟单靠一句自然语言描述很难准确生成一条命令，因此在确保体验流畅的前提下给用户提供命令参考OK。

文件下载引发的网页崩溃

Sun, 25 Dec 2022 00:00:00 +0800

最近实现了个异步下载文件的功能，Chrome下只要触发一定大小比如200MB的文件下载，浏览器网页会崩掉，其它网页浏览器却是OK的。查看控制台也并没有任何报错。同样操作测试Safari/Firefox是OK的，仅有Chrome有此问题。该问题最终解决，这里mark下。

报错信息

说明：

开发者工具-控制台无其它报错信息。
网页报错信息为Error code:RESULT_CODE_KILLED_BAD_MESSAGE

分析

由于刚好有一种API下载是可以的，而区别仅仅是分片大小，因此问题直接定位到了，即分片大小过小导致200MB数据创建内存数组长度过大，因此网页崩溃。至于其它浏览器没有崩溃也好理解，即不同浏览器对此限制不同。

解决

对此，简单将3KB的分片大小调节为100KB即可。但假如之后文件大小增大，这样的问题还是会出现，因此需要根治解决。

根治的办法有2种

是直接流化保存，JS也有Stream支持，可以流化保存就不用耗费大内存，尤其是大文件
很多大文件下载是暴露URL，交付给了浏览器下载，这里blob算是网页自己管理了下载的过程，所以内存开销绕不开，尤其大文件出问题。

延伸

比如chrome，单个页签内存有限，比如网页中用一个参数保存300-500MB的数据，网页也是会崩溃，因此内存使用还是需要谨慎。针对下载，尤其是大数据量，还是优先使用同步下载方案。

input文件上传时取消事件监听

Wed, 07 Dec 2022 00:00:00 +0800

最近在处理文件上传时需要知道用户是否点击了取消，为此查了下可行性，这里总结下

<input type="file"/>

JS并不支持

首先官方没提供方案，即如果用户唤起文件选择弹窗，然后点击取消，JS是没有暴露事件告诉我们取消的，因此这里需要HACK解决下。当然如果可以接受再加一层弹窗也可以，即用户主观自己点击了下我们提供的取消按钮。

HACK方案

这里介绍下HACK方案

// fileEl即inputFile
const files = await new Promise((resolve) => {
 fileEl.onchange = async (_e) => {
 const { files } = fileEl;
 resolve(files);
 };
 fileEl.onclick = (_e) => {
 fileEl.value = null;
 };
 document.body.onfocus = () => {
 setTimeout(() => {
 if (fileEl.files.length === 0) {
 resolve(fileEl.files);
 }
 }, 500);
 };
 });

onchange,onclick,onfocus的执行顺序是onfocus->onclick->onchange
用户点击取消弹窗，onfocus一定会触发，考虑到如果选择了文件也会先执行onfocus，同时因为fileEl获取到文件信息是有延迟的，因此这里补充timeout和判断文件长度来确保logic OK
之所以onclick时进行赋空值处理，是因为如果还是选择同一个文件onchange并不会触发，如果没有此需求可以去掉

官方论坛

官方论坛有该需求的讨论，至少目前还未支持

https://www.w3.org/Bugs/Public/show_bug.cgi?id=25452

WebShell中实现右键文件下载

Sat, 26 Nov 2022 16:58:16 +0800

最近WebShell支持右键下载，这里总结下实现过程。

说明

使用技术栈

技术实现

文本选中
- xterm.js支持双击选中部分文本，匹配模式为word，因此如果如果文件夹名称是hello world，那只能自己再拖拽选择了。
- shell中无法具体直接识别字符是不是文件，文件夹还是PS1这类的提示符，通过Shell配置只是可以控制颜色，但是反向根据颜色来判断是否是文件夹这是没用的，毕竟主题不同，颜色值也会不同。
文件所在目录即Current Working Directory
- 这个需要Shell integration来解决，本质就是函数钩子，在每次执行一条命令结束时获取当前所在目录并发送消息出来。同时目录信息存储在隐藏字符中避免显示到终端上，程序中我们持续提取当前目录即可。
```
source /usr/local/bash-precmd/bash-preexec.sh
preexec() { printf "\x1B]1337;PreExec;Timestamp=$(date +%s);\x7"; }

precmd() { printf "\x1B]1337;PostExec;Exit=$?;CurrentDir=$(pwd);Timestamp=$(date +%s);\x7"; }
```
- 有了目录，同时支持选中文件，最基础的执行下载就OK了。
目录历史
- 如果说用户选中最新一行的文件那没问题，但是终端下，每一行信息所在的目录是不同的，因此CWD要持续记录
- 记录的标准并不应该按照xterm显示终端的行号进行一对一，因为比如一个ls命令显示文件列表，可能会具体显示为2行，因此最佳的方式是CWD针对这次写入终端信息所在的N行对齐即可
获取文件信息
- 选中文本并不能保证一定是个文件，因此我们还需要根据选中文本能够识别出文件类型/大小/权限等等。ssh2-sftp-client下有stat方法可以支持
- stat方法返回的mode值是二进制，比如33279，需要转化后才可以具体指导rwx权限
```
(rslt.mode& parseInt('777', 8)).toString(8)
```
- 针对软链接类型文件，list接口返回的类型为l，但是stat方法返回的isSymbolicLink却是false，这种情况两者不一致，目前还没有解决办法。
文件下载
- 在明确了可以下载的前提下，执行下载方法就很多了。ssh2-sftp-client下提供的get，或者fastGet均可实现下载，如果是终端连接的ssh会话也可以走sz下载均可。
- 空文件下载以上方法均支持，只是注意针对get的流方法，该流的onData数据不会被触发，但end方法可以正常执行。

写在最后

支持了右键下载，下载的体验就会更舒服流畅，但背后的下载执行仍然是跟其它下载方式一致。

Cannot use import statement outside a module

Sat, 29 Oct 2022 21:12:40 +0800

最近本地docker构建node项目时报错Cannot use import statement outside a module”,”event”:”uncaughtException。排查解决后，这里mark下。

环境说明

NodeJS版本为v12
整个项目是CommonJS规范

错误含义

根据错误栈最后查到是node_modules/axios/lib/core/buildFullPath.js位置。本地开发环境下查看文件并没有问题，但进入docker容器中查看果然该文件中采用的ES import写法。由此确定根本问题。

原因追溯

docker构建时package.lock文件及Node版本都是确定的，按理应该是与开发环境高度一致，但现在出现了不一致，只有可能是docker构建存在缓存之类的。
查看历史发现之前我曾安装过axios@latest即v1版本，因为安装时不指定版本即会走最新版。查看v1版发布包，发现内容已经变成了ES版本，所以大概原因应该是这样，docker构建环节的问题。查询发现docker builder prune可以清除构建缓存。因此尝试下，重新构建发现OK。

ssh登录失败-Connection reset by peer

Thu, 20 Oct 2022 00:00:00 +0800

SSH登录失败如遇到kex_exchange_identification: read: Connection reset by peer，可以根据如下步骤排查

ssh时，v参数用于调试信息打印，从信息里可以看到，服务端并没有发送任何消息，如果第一步通讯正常应该或发送远程协议版本信息。

大致可能会有几个地方影响

/etc/ssh/sshd_config

排查端口是否正确，可能并不是22，如果修改配置，需要重启服务生效service sshd restart
/etc/hosts.allow和/etc/hosts.deny

默认两个文件配置会是空状态，没有任何生效配置

注意上述配置文件vi需要sudo或root用户

SSH登录GitHub失败

Sun, 02 Oct 2022 00:00:00 +0800

最近有事呆在湖北，访问GitHub时遇到问题-SSH登录GitHub在确定公钥配置正常的情况下总是登录失败，最后发现跟DNS污染有关。这里记录下问题及解决方案。

网络环境

湖北省咸宁市电信

测试脚本

在git相关操作时提示输入git@github.com密码即登录失败，测试登录状态时可以使用以下脚本。

ssh -vT git@github.com

执行发现公钥验证失败，首先怀疑的是公钥没有在GitHub上配置正确，在确定正确后还是登录失败，那么大概率就是DNS污染了。

本地尝试将终端切换到代理模式下，发现登录成功。。。于是问题进一步实锤。

分析

这里我使用dig命令在默认DNS Server下及谷歌DNS Server[8.8.8.8]发现默认返回的域名解析A记录223.75.236.241根本不是GitHub的WEB服务地址，而正确的IP地址20.205.243.166直接浏览器访问会发现跳转GitHub正确。

解决办法

这里考虑到只是临时遇到问题，因此直接修改host文件解决，直接增加以下解析记录。

20.205.243.166 github.com

当然除此之外也可以设置终端走代理服务解决。

写在最后

为了正常访问GitHub及谷歌等，总是问题问题，权当练习技术吧。

关于npm publish发包

Sat, 24 Sep 2022 16:43:36 +0800

无论是发布JS包到私有/公有源，都会走npm publish命令进行发布，但之前并注意到publish时针对lock文件处理，又比如resolutions字段处理等。这里将我所了解的问题点整理下。

发布包不包含package-lock.json

开发JS包，源码管理时我们需要将package-lock.json纳入VSC管理，但publish时lock文件是不会被publish。
在具体项目中当我们执行npm install命令，顶级包也即目标项目的lock文件会被识别进行具体版本的安装，但依赖的包中所包含的lock文件是会被直接忽视的。

发布包中包含lock文件？

npm-cli >=v6情况下，无论package.json-files白名单中是否配置package-lock.json，都不会被发布。但老版CLI下，通过白名单配置是可以发布的。
实测v6即会出现该问题。通过官方版本历史查询可以看到比如安装nodev8默认npm cli为v6，尝试该版本即可复现该问题。

preinstall执行resolutions不行

有时为了控制间接依赖的包版本会用到resolutions，同时配置到preinstall钩子下进行执行，但如上所说发布的包不包含lock文件，因此该钩子也需要删除，否则实际项目中npm install会包找不到lock文件错误。

"scripts": {
 "preinstall": "npx npm-force-resolutions"
}

npm pack提取打包

有时想提取打出的npm包，可以在项目下执行npm pack即可。如果是想直接具体项目下调试开发包使用npm link

Google Cloud免费试用3个月

Thu, 08 Sep 2022 00:00:00 +0800

Google Cloud有推出免费计划，获享 $300 赠金，免费试用 90 天。因工作需要所以体验了下，这里就mark下操作过程。

申请条件

Visa卡
Google账户
支持外网访问

申请步骤

直接访问https://console.cloud.google.com
如果未登录Google账户，执行登录，登陆后，直接点击试用
填写信息，地区/Visa卡
进入控制台
- 首先点击结算-概览即可看到到账的赠金300刀，及试用天数。我这里是HK币种，所以显示2K+
- 注意不要点击顶部右侧激活按钮。如果激活，免费试用期结束后，系统会自动开始计费
有了钱就可以买机器了。这里点击左侧菜单-选择虚拟机实例-创建实例-按需选择即可

除了虚拟机实例其它服务也可以购买选择，注意底部提示信息，只要支持使用赠金购买即可。

创建实例后，如果想使用本地终端登录，需要手动编辑实例，添加公钥即可，本地SSH登录用户名即公钥对应用户名，可以在添加后查看。

到此，就拿到了一台Google Cloud机器。

写在最后

我这里开了一台HK的虚机，走Surge SSH连接，测试速度还成。

按照谷歌的说法，到期后如果没有激活也并不会自动续费，所以只管用好赠金即可，到期不管就成。

FreeBSD密码登录报错timeout

Sun, 21 Aug 2022 19:33:31 +0800

线上WebShell在执行密码登录FreeBSD 13.0 64位时，报错超时进而开始调研，这里分析下

排查

错误的直接原因是SSH登录超时，查看SSH2模块及具体调用逻辑发现有两种可能性会造成超时
1. 有执行键盘交互登录时，用户一直未输入会提示为超时，如果本身网络不通报错会是ECONNRESET
2. SSH握手服务端一直没有响应会触发超时
按照当前客户端登录逻辑，虽然客户端有多种登录方式轮流尝试的方式，当前逻辑里开启了键盘交互登录，但能够触发的前提也是公钥登录失败
测试环境保证与线上程序一致的情况下测试发现并复现，而生产环境稳定复现。本地终端比如iTerm2直接登录并不复现该问题。
尝试在生产服务器上直接使用ssh命令

具体计时测试发现，生产服务器上测试直接命令行执行ssh连接，在20s+后，报错ssh_exchange_identification: read: Connection reset by peer。对照上述默认超时时间，也就可以说通了。
1. 生产环境
1. 测试环境

基于此基本确定与环境不同有关

分析

了解了下当前生产环境与测试环境有一点明显不同是测试环境机器本身直连外网，而生产并不是，靠着这个明显差异作为切入点，最后咨询系统/网络专家总算搞清楚了问题点，

在生产环境/测试环境抓包ssh握手过程发现，生产环境在TCP握手过程中，发送ACK时没有带时间戳，而预发环境有携带
FreeBSD 是严格按 rfc1323 的 paws 机制设计的， syn 和 syn+ack 两个步骤都含 timestamp option ，就会启用 paws 机制。第三个 ack 包不含 timestamp，就直接丢了
FreeBSD系统默认开启了check时间戳机制，而别的系统比如Ubuntu/CentOS之并没开启，或者没有该设置

采用以下命令可看到相关配置
```
sudo sysctl -a | grep net|grep rfc
```
FreeBSD12.3中net.inet.tcp.tolerate_missing_ts 默认是1，而13中默认是0

解决方案

FreeBSD端修改

# 临时修改方案
sysctl -w net.inet.tcp.tolerate_missing_ts=1

# 永久修改
sysctl.conf
net.inet.tcp.tolerate_missing_ts=1

/etc/rc.d/sysctl reload

即设置后忽视对于时间戳的验证

客户端即当前WebShell所在客户端侧修改

net.ipv4.tcp_wan_timestamps=1，当然也需确保net.ipv4.tcp_timestamps=1

即非公网也携带时间戳

最终我们选择方案1，方案2被否是因为当前服务是以容器部署，并没有该设定，需要修改母机，同时改动网络，风险大。

测试如上方案，发现问题解决。

补充

命令行脚本

如上提到的终端ssh连接可以用来调试登录认证过程，这里贴下脚本

ssh -p 22 -v root@ip

ssh -p 22 -v -i privateKey root@ip

抓包工具

tcpdump
分析工具使用wireshark

SSH服务端登录验证配置

针对键盘交互登录方式会不会尝试除了客户端本身控制之外，也依赖于服务端是否开启。不同系统下对于登录方式默认支持有所区别，Ubuntu/CentOS系统下针对keyboard-interactive方式默认是关闭而FreeBSD是开启

配置文档见：https://www.freebsd.org/cgi/man.cgi?query=ssh_config

ChallengeResponseAuthentication yes

写在最后

到此问题解决。针对此除了本身SSH握手在时间戳上会造成握手失败的情况外，也需要注意SSH登录本身会尝试多种登录方式。

whoer中DNS查询原理

Sun, 07 Aug 2022 00:00:00 +0800

最近因为注册Spotify了解到了whoer这个网站，发现其可以检测到DNS服务器地址，觉得很好奇，所以查资料，这里梳理下实现原理。

whoer网站发起了一个CSS请求https://sdvtq1659862.ed.whrq.net/css/null.css?_=1659862263203

这个域名是随机生成的子域名，文件名也可以看出是不存在的文件
因为该DNS本地肯定没有缓存，因此会一层层向上找，最终会指向whrq.net DNS服务器，根据查询请求，DNS服务器记录下了sdvtq1659862及来源DNS IP地址
whrq将该信息同步给了站点服务，之后用户端会发起携带sdvtq1659862参数的请求，服务端即返回了DNS相关信息

综上，whoer是利用了DNS解析查询过程拿到了DNS服务器地址信息，因为DNS解析过程中上下文只有域名，因此动态域名解决了状态信息，利用子域名来区分各个用户。

综上即明白了whoer是如何做到的，延伸下其它字段是如何获得的，操作系统/浏览器版本，这些可以根据请求头UA字段拿到，而提供商则是可以根据IP地址去查。

done，原理即如此。

WebShell中热键规划

Mon, 01 Aug 2022 23:02:16 +0800

最近在做的WebShell需要支持热键，整体方案这里总结下

热键理念

先明确设计理念

热键组合需要考虑表意化方便用户理解记忆，不要反常识，同时用户很好操作
热键要规避常用的热键，比如浏览器的一些热键，即使可以拦截覆盖也要谨慎考虑

热键冲突

Web网页受限于系统/浏览器/浏览器插件热键冲突，同时这里做的是网页终端，终端本身也有一些热键/按键，因此要考虑几方面的热键

终端本身一些热键

⌥ ⬅️ 光标向左移动到上一个词的开始，Windows下没对应支持
⌥ ➡️ 光标向左移动到下一个词的开始，Windows下没对应支持
⌘ ⬅️ 光标移动到行首，Windows下是Home
⌘ ➡️ 光标移动到行尾，Windows下是End
Control C 取消

浏览器层面部分热键

浏览器本来就有一些热键，同时部分热键可拦截，部分又不可以

在Mac- Chrome下实际测试尝试后有以下结果

可拦截热键

⌘ F
⌘ L
⌘ P
⌘ ,
⌘ S
ESC

不可拦截热键

⌘ N 创建新window
⌘ T 创建新Tab
⌘ W 关闭Tab
⌘ ⇧ [ 左Tab
⌘ ⇧ [ 右Tab

系统热键

⌘ Tab App切换

最终方案

基于上述情况，设计如下方案

抽离如下几个概念

Action动作，比如term:clearScreen即清屏，该动作term部分表示作用域，clearScreen部分表示功能是清屏
HotKey热键，比如command+k即某个热键

Action可以绑定多个热键，同一个热键组合也可以被绑定到多个Action上。

处理逻辑

全局捕获监听N个Action下的所有热键

当某个热键触发时，根据爆发事件的元素及绑定时所挂的Action从而确定是不是目标Scope爆发的事件，如果不是，则ignore该事件，如果是，则触发对应的action行为，同时事件标记为catched.这样方便之后的冒泡事件处理。

热键规划

这里列出一些，供参考

功能	Mac	Windows
热键介绍	⌘ /	Ctrl /
设置	⌘ ,	Ctrl ,
Tab切换	⌃ 1-5	Ctrl 1-5
Tab新建	⌥ T	Alt T
Tab关闭	⌥ W	Alt W
搜索	⌘ F	Ctrl F
放大字体	⌘ ⇧ +	Ctrl +
缩小字体	⌘ ⇧ -	Ctrl -
AI命令	⌃ `	Ctrl `
命令面板	⌘⇧P

延伸

苹果平台判断

不同平台下热键绑定不同，因此需要进行平台判断。


/Mac|iPod|iPhone|iPad/.test(navigator.platform)

mod键

在热键规划上，Mac下的⌘键对应win下的⌃键，而不是windows键，这点需要注意

Windows下ctrl left/right

hyper下已经关闭该支持，但我个人测试是可以的

全热键支持

如上所说网页上很多热键因为被浏览器直接支持，所以并无法捕获处理。但通过keyboard.lock锁定部分按键，同时网页处于PWA/全屏下可以解决该痛点。

实际测试发现P/N按键无法锁定成功。
keyboard.lock api受限兼容性，目前Chrome OK，Safari/Firefox还不支持。

alternate screen介绍

Thu, 28 Jul 2022 22:42:13 +0800

在利用xterm.js实现终端搜索高亮时需要能够识别终端当前是否在vi编辑器模式，调查后发现xterm.buffer.active.type可以用来实现。

查看对应类型定义发现值只有两种normal和alternate。不明白为什么叫alternate，所以进一步调查，原来这个概念来源于terminal下的alternate screen。这里整体介绍下。

alternate screen-备用屏幕

该中文翻译采用苹果的中文翻译，xshell叫终端替换屏幕
alternate screen是临时性交互输入内容的屏幕，最终还要返回。比如VI模式下，屏幕显示区域与正常模式一样，当激活备用屏幕时，原屏幕内容被保存，当退出备用屏幕时，源内容被恢复。
所以xterm下的normal/alternate概念并非是原创，而是终端本身的设计上就这两种模式，普通和备用

写在最后

xterm.js只是xterm的一种实现，为了更好的理解xterm.js还是需要多了解xterm-终端模拟器的一些设计。

了解Makefile

Sun, 24 Jul 2022 15:48:11 +0800

在查看项目时，发现一些项目尤其后端项目有个Makefile文件，这样一些构建命令可以方便的封装调用。

之前没了解过该工具，这里mark下。

特点

Mac/Linux天然支持，这样声明创建后，直接执行即可
- shell文件的话，还需手动增加执行权限chmod +x *.sh
- 项目中使用nodejs实现构建工具也行，但是毕竟还有环境依赖
支持变量传参

举个例子

# 构建前端镜像 make build version=1.0.0
build:
 docker build -t stacker/web:v$(version) .

比如封装如上命令到Makefile，以后想打包新镜像文件，直接make build version=1.0.0即可

语法说明

文件名推荐为Makefile，但也可以是makefile
只支持单行注释
@开头命令声明，表示该命令输出结果不打印

常见错误

Makefile:5: *** missing separator. Stop.

命令前面是锁进，不要用空格

参考配置

Ubuntu 22.04 SSH-RSA登录失败

Mon, 18 Jul 2022 00:00:00 +0800

最近用户反馈我们的WebShell在使用ssh密钥登陆Ubuntu系统时报认证错误，为此调查了下。

SSH2模块下报错如下

Client: publickey auth failed Error: All configured authentication methods failed

排查

公私钥密码使用的RSA加密算法
尝试本地终端SSH登陆，终端App为Mac自带Terminal

ssh -v -i ~/test.pem ubuntu@1.221.54.8

登陆发现可以成功，而WebShell报错，因此WebShell大概率有问题

注意

SSH如果报错Permissions 0644 for ’test.pem’ are too open.即需要确保私钥文件权限合适，执行chmod 400 test.pem解决文件权限
SSH登陆成功后，想退出直接输入exit即可

分析

本地终端Terminal或iTerm2均可登陆成功，WebShell不可以，WebShell中用到了node模块ssh2。同使用该模块的shell产品，如tabby/electerm，均登陆失败，因此可确定跟ssh2模块实现有关。
ubuntu22.04是2022年4月发布的新系统，使用老版系统是发现没有该问题，因此也跟系统升级有关，查询发现新系统默认禁用SSH--RSA签名

综上可以确定新系统关闭RSA验证引发了该问题，而本地终端可以应该该情况支持，但node下ssh2模块明显没支持。

解决方案

确定了现象/问题，解决方案有以下几种

方案1-服务器配置修改

sudo vi /etc/ssh/sshd_config

增加如下配置PubkeyAcceptedKeyTypes +ssh-rsa

重启sshd服务sudo service sshd restart

方案2-公私钥算法调整

重新创建公私钥，生成算法选其它的，比如ed25519

方案3-客户端SSH2升级

实际处理逻辑应该是本地终端一样做了处理。社区大佬已有PR，支持，在没有合并发布新SSH2包之前可以临时调整版本到关联如下commit来解决。

"ssh2": "git@github.com:Eugeny/ssh2.git#22735cecf1d9c118b2b8af1c2f80fe5b04996fe1",

测试以上三种方案，均可解决

不提倡的ssh-rsa

摘自OpenSSH官网的一段介绍

Future deprecation notice

It is now possible[1] to perform chosen-prefix attacks against the SHA-1 hash algorithm for less than USD$50K. For this reason, we will be disabling the ssh-rsa public key signature algorithm that depends on SHA-1 by default in a near-future release.

This algorithm is unfortunately still used widely despite the existence of better alternatives, being the only remaining public key signature algorithm specified by the original SSH RFCs.

客户端SSH2实现

Ubuntu22.04虽然默认关闭了ssh-rsa但支持rsa-sha2-512/256，而这两个摘要算法与ssh-rsa都是采用的RSA算法只是摘要算法选择的SHA2而非SHA1。因此只要客户端在签名时将ssh-rsa公钥的签名算法设置为sha2-512/256即可。

之所以登录失败是因为当前客户端在做签名时走的SHA1，而服务端已不支持

具体 change见https://github.com/Eugeny/ssh2/commit/22735cec

写在最后

综上RSA安全性目前还是有保证的，仅是SHA1摘要算法安全性较低，因此面对已经生成的RSA公钥并不需要过多担心，更多是注意不要使用SHA1即可