Hi, ziheng

树莓派 + 7.3 寸墨水屏 + 宜家画框，攒一台电子相册

Sun, 20 Sep 2026 00:00:00 GMT

做一块能自己换照片的墨水屏。不发光，断电之后画面还在，摆着像一幅画，而不是一块屏幕。

三件硬件

件	型号	说明
屏幕	微雪 7.3 寸彩色墨水屏（`epd7in3e`）	800×480，SPI 接口
主机	树莓派 Zero 2 W	小、便宜、带 Wi-Fi
画框	宜家 RÖDALM	木纹

屏幕背面是一个 40 针母座。树莓派顶上的排针对准了压下去，硬件就接好了——不用焊接，不用杜邦线，也不用想怎么固定。对不想动烙铁的人来说，这一点比参数重要。

软件：InkyPi

InkyPi 在树莓派上跑一个网页服务，专门管这块墨水屏：

浏览器打开就能用，不用敲命令行
插件制：相册、天气、日历、时钟、每日漫画、RSS
一键安装脚本，装完注册成 systemd 服务，开机自启

装完之后，平时用浏览器就能管它。另外，配好 SSH 之后，源码和树莓派上的配置都可以让 AI 在本地改好，再推上去——这台机器的安绞、播放列表、插件排版，基本就是这么调出来的。

组装

只有三步：

屏幕背面的母座对准树莓派排针，四角均匀用力压下去
把屏幕装进画框
接上电源线

通电后屏幕会闪几次，然后画面出来。

上手

浏览器打开树莓派的地址，进 InkyPi 的管理界面。相册插件里选一张图，点 Update Now，墨水屏就开始刷新；想让它自己换，就在播放列表里排几个插件，再设一个间隔时间。

发现相框挡住了屏幕边缘

上面都还算顺利。真正装进画框用起来之后，才发现屏幕边缘被挡住了。

问题出在相框的卡纸：它的开孔比屏幕小一圈，装进去之后就直接压住了屏幕边缘。这事很难靠买解决——木框的尺寸是固定的，卡纸本身又占掉一圈边，市面上很难找到开孔刚好等于屏幕尺寸的相框。

被遮掉的量是量出来的：

方向	被遮住
左 / 右	各 64 px
上	33 px
下	31 px

800×480 的屏，左右两边一共压掉了 16% 的显示宽度。

解决

只能从软件这边适配，把内容从被遮住的边缘挪开。

第一反应是把整幅画面缩小塞进中间——这样不行：背景会跟着一起缩，四周留出一圈白边，看起来比被裁掉还难看。

改成内容往中间收、背景照旧铺满：每个插件把自己的文字和图形往内缩，背景色仍然铺满整个屏幕，被相框压住的就只是背景的边缘。

边距不是估的，是量出来的：把插件渲染出来的图存下来，逐像素看四边留白，改的时候也按量出来的数字改。

改完之后，装进画框就是完整的一屏：

手机 + Tailscale + pi-web 随时随地跑 AI Agent

Thu, 20 Aug 2026 00:00:00 GMT

pi-web 是 pi coding agent 的浏览器界面，我把它跑在家里的 Mac mini 上，平时的项目文件、会话记录和 API key 都在那台机器上。出门在外的时候，想用手机打开它接着干活，而不是只能等回家。

家里的机器本来就组了一张 Tailscale 内网（下称 tailnet），Mac mini、NAS 都在里面。手机只要进了这张网，访问 pi-web 就没有问题。实际配置下来，在 Android 上折腾了几步，这里记录一下最终能用的方案。

让 Clash 同时扮演两个角色

最直接的想法是手机装个 Tailscale 官方 App。但 Android 同一时间只允许启用一个 VPN 应用，而我平时要用 Clash 走代理，两者都要占用这个位置，装上也必须二选一。

既然不能两个 App 各管一头，那就让一个 App 全包。Mihomo（Clash Meta 使用的内核）自带 tailscale 类型的出站，在配置里加一个节点即可：

proxies:
  - name: Tailscale
    type: tailscale
    hostname: android-clash
    state-dir: ./tailscale
    ephemeral: false
    udp: true
    accept-routes: true
    interface-name: wlan0
    ip-version: ipv4-prefer

这样 CMFA 一个 App 同时承担代理和 tailnet 接入，VPN 槽位只被占用一次。它和机场节点是并存的：平时照常选机场节点走代理，只有发往 tailnet 地址（100.64.0.0/10）的流量会被规则自动交给 Tailscale，不需要手动切换。

其中两个参数是必须的：

interface-name: wlan0 —— 不指定的话，Android 上内核识别不到默认路由，Tailscale 起不来，日志会刷 magicsock: Rebind IPv4 failed 和 couldn't find ip
ip-version: ipv4-prefer —— 手机所处的网络 IPv6 不一定可达，优先 IPv4 可以避开初始化时的卡顿

另外不要给它加 dialer-proxy。我一开始想让这条出站也走代理，加上之后就是前面那个报错，删掉才恢复正常。

补上域名解析

节点配好、Tailscale 也连上之后，用主机名访问还是失败，报 couldn't find ip: mac-mini。

原因是内嵌的 Tailscale 不会把 tailnet 的 MagicDNS 注入 Android 系统，系统不知道这些主机名该解析到哪里。在配置里手工建立对应关系即可：

hosts:
  mac-mini: 100.x.x.x

dns:
  use-hosts: true

把 tailnet 流量交给 Tailscale

域名能解析了，访问 100.x.x.x 仍然不通。这次是分流规则的问题：tailnet 的地址段没有被指给 Tailscale 出站，请求被后面的 GEOIP 或兜底规则接走了。

在 rules 最前面补一条：

rules:
  - IP-CIDR,100.64.0.0/10,Tailscale,no-resolve

100.64.0.0/10 是 Tailscale 使用的地址段，no-resolve 表示直接按 IP 匹配、不做域名解析。这条必须放在所有规则之前。

完整配置

把前面几处合起来，和 Tailscale 相关的部分是：

mixed-port: 7890
mode: rule
log-level: warning

hosts:
  mac-mini: 100.x.x.x

dns:
  enable: true
  ipv6: false
  enhanced-mode: fake-ip
  fake-ip-range: 198.18.0.1/16
  use-hosts: true
  nameserver:
    - 223.5.5.5
    - 119.29.29.29

proxies:
  - name: Tailscale
    type: tailscale
    hostname: android-clash
    state-dir: ./tailscale
    ephemeral: false
    udp: true
    accept-routes: true
    interface-name: wlan0
    ip-version: ipv4-prefer

proxy-groups:
  - name: 节点池
    type: select
    proxies:
      # 平时用的机场节点，Tailscale 不需要放进来

rules:
  - IP-CIDR,100.64.0.0/10,Tailscale,no-resolve
  - GEOIP,CN,DIRECT
  - MATCH,节点池

几个容易出错的地方：

不要给 Tailscale 出站加 dialer-proxy
interface-name 和 ip-version 不能省
hosts 配合 use-hosts 用来补 MagicDNS
100.64.0.0/10 那条规则必须在最前面
state-dir 不要随意清除，删掉后需要重新登录 tailnet

现在的效果

不需要做任何切换，手机照常用原来的机场节点上网；访问家里 tailnet 里的地址时，流量会自动走 Tailscale：

打开 http://mac-mini:30141 使用 pi-web（pi-web 监听在所有网卡上），让家里的 Mac mini 接着处理任务
手机上选一份本地 PDF 上传，家里的 agent 直接读取文件内容
其它机器上的 Web 服务，通过它们在 tailnet 里的地址同样可以直接打开

使用 Playwright MCP 自动生成产品文档

Mon, 03 Aug 2026 00:00:00 GMT

整理 Web 产品的操作文档。

正常的做法是手动打开页面，按流程一步步截图，用标注工具在图片上画框编号，再根据截图写出与之匹配的操作步骤。

但这种方式有两个问题：

效率低
如果产品跟新了内容，需要同步更新文档和标注图

能不能把这套东西直接交给 AI 来做？

2. 最小实验

完整跑一遍性价比太低。AI 控制浏览器本来就不快，中途遇到问题，排查路径也太长。

所以我没有让 AI 跑完整流程，而是只挑了最核心的几个动作：

登录 → 进入首页 → 截图、标注、脱敏

只给入口和目标，看它自己怎么完成。目的不是完美结果，而是以小见大——用最小成本把问题暴露出来。

跑完这一小段，发现了两个问题：

截图的时候，页面上突然弹出一个提示弹窗，把我们要截的内容挡住了。所以需要判断这个弹窗是不是当前需要截图的对象——如果不是，就该关掉；如果弹窗本身就是业务操作的一部分，就不能关。
标注和脱敏的逻辑其实很"死板"。画方框就是读坐标、画 SVG，脱敏就是找文字节点、加 blur，做完再恢复。既然这么固定，直接封装成 JS 脚本就好，不需要 AI 每次自己琢磨。

一次最小实验，把两种东西分清楚了：需要现场判断的，和做法固定可重复的。

3. 开始拆分动作

根据实验中发现的问题，我把这些动作逐个拆开，发现每个动作都可以抽成两种行为模式：

Markdown 规则：需要结合现场判断的，写成说明文档，AI 会根据当前场景读取对应的规则
JavaScript 脚本：做法固定、输入输出明确的，封装成可调用的工具

具体来看：

登录 — 要不要登录、用哪种方式、验证码怎么办 → Markdown；检查登录状态、填写账号、点击登录 → JS
弹窗处理 — 弹窗是不是截图对象、能不能关 → Markdown；发现弹窗、匹配按钮、执行关闭 → JS
脱敏 — 什么数据必须挡、什么可以保留 → Markdown；加 blur、截图后恢复 → JS
标注 — 标哪个按钮、编号怎么排 → Markdown；读坐标、画方框、清理图层 → JS
页面探索 — 如何遍历菜单、识别页面结构、记录滚动模型 → Markdown；提取菜单树并持久化为 JSON → JS。探索过一次之后，后续任务直接复用这份数据，不用每次重新找菜单。

打个比方：没必要每次都让 AI 从零造一台电风扇。提前造好，告诉它开关在哪，用的时候它只需要决定"开"还是"关"。标注和脱敏就是这个电风扇——AI 只需要说"把这个按钮标上编号 1"，脚本直接就执行了。

按这个思路拆完，最终产出了 7 个 Markdown 规则（登录判断、浏览器会话、菜单提取、页面探索、截图标注、脱敏判定、文档写作）和 5 个 JS 脚本（自动登录、截图标注、文字脱敏、弹窗处理、任务管理）

4. AI 自主组合，不做流程编排

规则和脚本都拆好之后，传统思路是再写一个"编排层"把流程串起来——先做 A、再做 B、然后 C。

但 AI 本身就有理解和决策的能力，不需要被编排。

Markdown 规则和 JS 脚本就像一套乐高积木，每个都是独立的行为单元。AI 根据用户的需求，自己决定拿哪些、按什么顺序组合。

用户说"帮我看看这个产品有什么功能"，AI 自己知道要连接页面、确认登录、探索菜单，不需要截图也不用写文档。

用户说"把登录页截图标注一下"，AI 自然会跳到截图和标注的规则和脚本。

顶层 Skill 不规定执行顺序，它只做三件事： 告诉 AI 有哪些行为可用、每个行为怎么用、有哪些底线不能碰。剩下的组合方式，由 AI 根据用户意图自己决定。

这意味着同一套工具，不同用户、不同任务、不同问法，会组合出完全不同的执行路径。

5. 沉淀下来的方法

整个过程可以归纳为几步：

选一条最小流程让 AI 做一遍，暴露问题
把反复出现的行为抽象出来，拆成"判断"和"执行"
判断写成 Markdown 规则，执行写成 JS 脚本
让 AI 自主组合这些行为，不做流程编排

AI Skills + Tailscale 管理 VPS 和 Mac mini

Fri, 06 Mar 2026 00:00:00 GMT

为什么需要 AI 辅助

在上一篇文章中，我介绍了如何用 VPS + Mac mini + FRP 搭建家用服务器。但实际运维中会遇到很多问题：

记不住各种配置文件的位置和语法
端口冲突、SSL 证书和各种配置容易出错
故障排查需要查日志、测试连接
新增服务需要修改多处配置

AI 改变了这个流程。现在我用 Claude Code + Tailscale，可以：

快速生成并部署新服务
快速诊断和修复故障
远程管理两台机器，无需记忆命令

架构图

flowchart TD
    subgraph Internet[互联网]
        User[用户访问]
    end

    subgraph DevMachine[开发机]
        direction TB
        AI[Claude Code<br/>自然语言描述]
        Skills[Skills <br/>连接等命令]
        TSClient1[Tailscale 客户端]
        AI --> Skills
        Skills --> TSClient1
    end

    subgraph VPS[阿里云 VPS]
        direction LR
        Nginx[Nginx<br/>端口: 443/80<br/> 域名配置]
        FRPS[FRPS 服务<br/>隧道端口: 7000<br/>HTTP端口: 8080<br/>管理面板: 7500]
        TSClient2[Tailscale 客户端]
    end

    subgraph MacMini[Mac mini 家用服务器]
        direction TB
        FRPC[FRPC 客户端<br/>跟据域名分请求发到不同 docker]
        TSClient3[Tailscale 客户端]

        subgraph Docker[Docker 容器]
            direction LR
            Blog[博客服务<br/>端口: 4321]
            API[API 服务<br/>端口: 4322]
            Dashboard[管理面板<br/>端口: 4323]
        end
    end

    User -->|HTTPS 请求| Nginx
    Nginx -->|转发到 8080| FRPS
    FRPS <-->|隧道通信 7000| FRPC
    FRPC --> Blog
    FRPC --> API
    FRPC --> Dashboard

    TSClient1 -.->| | TSClient2
    TSClient1 -.->| | TSClient3

核心 Tailscale + Skills

使用 Tailscale 让开发机、VPS、Mac mini 组成一个虚拟局域网，无需公网 IP 就能互相访问。

在 Claude Code 中创建 Skills，通过 SSH 别名快速连接：

部分代码:

阿里云 VPS Skill (aliyun.md)

---
name: aliyun
description: 在管理 aliyun vps 时使用
---

# 连接方式

ssh aliyun

# 常用命令

systemctl status nginx systemctl reload nginx tailscale status

Mac mini Skill (macmini.md)

---
name: macmini
description: 在管理 macmini 开发机时使用
---

# 连接方式

ssh macmini

# Docker 管理

ssh nas "docker ps" ssh nas "docker logs -f <container>" ssh nas "docker restart <container>"

现在只需要在 claude code 中输入 "检查 aliyun 的 Nginx 状态"或"查看 nas 的 Docker 容器"<br/> 它就会自动通过 Skill 执行命令。

快速上线新服务

假设我要部署一个新的监控服务，域名是 monitor.quillbloom.cn，运行在 Mac mini 的 Docker 容器端口 8085。

传统方式需要：

在 Mac mini 上修改 FRPC 配置，添加新的 [[proxies]]
重启 FRPC 服务
在 VPS 上配置 Nginx 域名
测试连接是否正常

AI 辅助方式：

我直接告诉 Claude：

在 Mac mini 上配置 frpc，域名 monitor.quillbloom.cn，端口 8085

Claude 自动完成：

通过 Skill 连接到 Mac mini
读取现有 FRPC 配置文件 /usr/local/frp/frpc.toml

生成新的 [[proxies]] 配置：

[[proxies]]
name = "monitor"
type = "http"
localIP = "0.0.0.0"
localPort = 8085
customDomains = ["monitor.quillbloom.cn"]

追加到配置文件
重启 FRPC 服务：sudo launchctl restart com.frpc
测试连接

整个过程非常快，还没有心智负担。

总结

AI + Tailscale + Skills 的组合使运维效率提升了非常多而且不再需要记忆大量命令和配置语法

用自然语言管理多服务器 Docker 部署

Mon, 02 Mar 2026 00:00:00 GMT

最近需要在多台远程服务器上启动多个 Docker 容器，并分配不同的端口。

传统方式

打开终端，SSH 连接到服务器，回忆 docker 命令的参数格式，手动启动容器，遇到错误排查日志，重复这一套流程。

如果经常遇到类似任务，通常会封装成 shell 脚本：

bash deploy.sh --targets "A,B" --ports "5000,5001,5002"

但这种方式也有问题：

脚本的参数格式是什么？--targets 还是 --hosts？
端口列表用逗号还是空格分隔？
脚本是否还有未发现的 bug？

不管手动执行还是用脚本，本质上都需要记住特定的命令格式和参数规则。

AI 方式

用 AI 辅助的方式，同样的任务是这样完成的：

输入：

在服务器 A 和 B 上启动容器 A、B、C，端口从 5000 开始

AI 自动完成：

理解意图：需要在 2 台服务器上启动 3 个容器
提取参数：服务器列表 [A, B]，容器列表 [A, B, C]，起始端口 5000
自动递增：计算端口分配 5000, 5001, 5002
构建命令：生成 SSH + Docker 的完整命令
执行并返回结果

维度	传统方式	AI 方式
输入	`bash deploy.sh --targets "A,B" --ports "5000,5001,5002"`	`启动 A、B 容器，端口从 5000 开始`
学习成本	需要记住参数格式	自然语言描述需求
容错性	参数错误直接报错	AI 理解意图并纠正
适应性	脚本修改后需要重新学习	AI 自动适配变化
调试	手动排查每个步骤	AI 自动处理异常

本质区别

传统方式像手动挡汽车：你需要知道什么时候换挡、怎么踩离合。

AI 方式像自动挡汽车：你只需要说"前进"或"后退"，底层细节由系统处理。

这不是简单的封装，而是抽象层级的提升——从"命令参数"提升到"意图理解"。

技术原理

工作流程

AI CLI 的工作流程可以分为三个步骤：

用户自然语言输入
    ↓
1. 理解意图（需要做什么？）
    ↓
2. 提取参数（目标、端口、容器...）
    ↓
3. 执行命令（SSH → Docker → 返回结果）

用户不需要知道命令格式、参数顺序、错误处理细节，只需要描述想要什么。

Skills 和 Commands 的角色

如果有多台服务器需要管理，可以为每台服务器定义一个 Skill：

---
description: 管理 A 服务器的 Docker 容器
---

A 服务器信息：

- 系统：Kali GNU/Linux Rolling
- Docker：27.5.1

连接方式：ssh A检查容器：ssh A "docker ps" 检查端口：ssh A "ss -tlnp | grep :5000"

Skills：AI 自动判断用户需要操作哪台服务器 Commands：用户手动触发，执行封装好的操作逻辑

两者配合，实现完整的自动化工作流。

用户体验对比

传统方式需要：

记住 SSH 连接方式
手动检查端口占用
计算端口递增
记住脚本参数格式

AI 方式只需要：

说一句话："在 A 服务器启动 A、B 容器，端口从 5000 开始"

总结

从命令行到自然语言，表面上是输入方式的改变，本质上是抽象层级的提升。

命令行：需要记住工具的语法和参数
自然语言：只需要表达想要什么

我想“财富自由”

Mon, 29 Sep 2025 00:00:00 GMT

我想在清晨悠闲地喝咖啡、和朋友聊天、健身或游泳；晚上在河边绿道跑步出汗。生活的节奏不再是被动的，而是主动的、自洽的。

我想在冬天去北方滑雪，夏天去海边冲浪；还想学习各种运动：自由潜水、皮划艇、登山、攀岩、徒步、拳击、瑜伽……从容地热爱这个世界。

表面上看，这些事情我现在也能做。偶尔我也会旅游、运动、探索。但是每次都伴随着一些代价，不论是金钱还是时间。更难受的是：每次短暂的“自由”之后，回归现实的落差仿佛南柯一梦，留下一地的经济压力和精神的空虚。

我不想再只是短暂地“逃走”去追逐自由。我想要的是——一种稳定的生活方式。我渴望的不是度假，而是让生活本身就像度假一样自然、流畅，并且拥有选择的余地。

这或许就是我对财富自由的真正渴望：不是多么奢侈的消费，而是不再需要为选择而受限，不再为热爱而计算代价。

卖掉使用四年的相机

Sat, 27 Sep 2025 00:00:00 GMT

摄于 2022 年 1 月 27 日，我离开苏州住所的那一天。

过程

2025 年 9 月 27 日中午，我在京东入口的“爱回收”下了一个 Sony E PZ 18-105mm f/4.0 G OSS 镜头的回收订单。

我选择的估价信息全是“完美”品相，平台参考价是 1968 元（新机参考价 3019 元）。

系统提示大约 15:00–17:00 上门。过了一会儿师傅打来电话，说今天非常忙，可能会晚点到。我记不太清具体时间了，应该是 4 点多到的。

我请师傅进屋里聊。师傅放下装备后自报家门：“我是爱回收的工作人员，工号……”。他穿着工作服，里面的 T 恤上印着“爱回收”，带了一个偏高的方形工具箱。

我把镜头递给师傅。他从箱子里拿出检验灯检查镜头：“外观这里有划痕，镜片内有一点微尘，这里掉了一块漆……”。最终镜头估价给到一千出头，加上平台优惠券大概是 1350 元左右。

随后我又把相机给师傅看。相机估价大概在 2100 元左右。我当时买的就是二手机，所以现在成色确实一般。师傅给出的两件合计成交价大约是 3500 元，这和我心理预期有些差距，我没有当场成交。

师傅问我心里合适的价格，我说 4000 元。其实那一刻我还没做好卖的心理准备，但被问到，也得给个明确的数字。师傅开始在我的手机上叠加各种优惠券，最后把合计凑到了 4000 元。

我还是没有卖。师傅问原因，我说“还没到预期”，他有点生气：“如果没打算卖，为什么要让我过来？我从西溪那边过来十多公里，后面还有好几个单子。”我向他道歉，说确实耽误了他的时间，但在他上门检验前，我也无法确定自己是否能接受实际价格。

反思

回过头想，这次处理确实是我不妥。

没有提前设定价格区间和底价。
平台估价没有严格按品相填写，导致预估虚高，与现实落差大。
和师傅还价后，在对方满足价格时仍未成交，我的做法不合规矩。
心态上没提前做好“真的要卖”的准备。

我重新梳理了“卖”与“不卖”的动机。

不卖的动机

相机 + 镜头当年合计约 8800 元，现在合计 4000 元，价值缩水。
如果以后还想重新玩相机，重新启动的成本会比较高。
有感情因素：陪了我四年，不舍得。即便不常用，偶尔拿出来把玩也不错。

卖的动机

现在几乎不用，继续放着就是“负资产”，卖了就是“变现”，4000 元总比 0 强。
技术迭代很快，可能会有更小更强的设备，覆盖相机的大部分场景。
相机 + 镜头重量接近 1 kg，体积也不小，出门携带不便。
未来可能会换更轻便的微单或运动相机，符合现在的使用习惯。

决定

想清楚前后的逻辑后，我决定还是卖掉相机。我又给师傅打了电话，约在晚上 9:00 后上门交易。还是原先的流程：自报家门、重新验机。最后师傅让我在手机上点击“确认”按钮，交易就完成了。

确实不好意思，麻烦师傅又跑了一趟，做这行不容易。

他说，今天跑了 20 多单。

我下次尽量把事情办得周全，不能因为自己的事情耽误别人。

VPS、Mac mini、Frp 搭建内网穿透家用服务器

Thu, 24 Jul 2025 00:00:00 GMT

import WrapImage from '@/components/WrapImage/index.astro' import constructImage from '@/assets/images/blog/vps-frp-docker/construct.webp' import { cn } from '@/lib/cn'

为什么这么设计

核心问题：

家里的 Mac mini 性能强劲，但没有公网 IP，无法直接从外网访问
阿里云 VPS 有公网 IP，但配置较低（2 核 2G），性能不足以运行复杂服务

解决方案：

VPS 负责流量转发：利用公网 IP 作为流量入口，通过 Nginx + FRP 将请求转发到内网
Mac mini 负责实际服务：利用强劲性能运行各种 Docker 服务，处理真正的业务逻辑

这样既解决了公网访问问题，又充分利用了现有硬件资源，避免购买高配 VPS 的额外成本。

概览

流量流向

当用户访问你的服务时，请求的完整路径如下：

用户浏览器 → VPS 公网 IP (443/80)
         ↓
    Nginx 接收并转发
         ↓
    FRPS (8090) 接收 HTTP 流量
         ↓
    通过 FRP 隧道 (7100) 传输
         ↓
    Mac mini FRPC 接收
         ↓
    转发到本地 Docker 容器 (4321/4322/4323...)
         ↓
    容器处理请求并返回响应

整个过程中，VPS 只负责流量中转，真正的业务逻辑都在 Mac mini 的 Docker 容器中处理。

VPS

Nginx

流量转发：通过 443/80 端口接收外部流量，并转发至本地 8090 端口（FRPS 服务）

server {
   listen 443 ssl http2; # 监听 443 端口(HTTPS)并启用 SSL 和 HTTP/2
   ...

   # 代理配置 - 将请求转发到本地 8090 端口
   location / {
      proxy_pass http://localhost:8090;
      ...
   }
}

FRPS

一个快速反向代理，帮助你将 NAT 或防火墙后的本地服务器暴露到互联网

流量桥接：接收 8090 端口的 HTTP 流量，通过 7100 端口与客户端建立隧道连接

bindPort = 7100  # FRPS（服务端）与 FRPC（客户端）建立隧道通信的主要端口
auth.token = "******"  # 客户端和服务端之间的认证 Token

vhostHTTPPort = 8090  # FRPS 用于对外暴露 HTTP 服务的端口

# 管理面板（Dashboard）
webServer.port = 7500  # 管理面板端口
webServer.user = "admin"
webServer.password = "******"
webServer.addr = "0.0.0.0"  # 允许所有 IP 访问（公网可访问）

Mac Mini

FRPC 客户端

Mac mini 通过 FRPC 客户端与 VPS 建立隧道，并通过 [[proxies]] 配置实现多域名分流

隧道连接：与 VPS 上的 FRPS 服务建立稳定连接
多域名代理：通过 [[proxies]] 配置实现不同域名到本地端口的映射

[[proxies]]
name = "blog"
type = "http"
localPort = 4321 # 个人博客服务
customDomains = ["blog.example.com"]

[[proxies]]
name = "api"
type = "http"
localPort = 4322 # API 服务
customDomains = ["api.example.com"]

[[proxies]]
name = "dashboard"
type = "http"
localPort = 4323 # 管理面板
customDomains = ["admin.example.com"]

这里的 localPort 对应的并不一定是 Mac mini 本机的实际端口，大多数情况下是运行在 Docker 容器中的应用服务。

例如：<br /> 4321 → API 服务容器（如 FastAPI、Node.js）<br /> 4322 → Nginx 容器，用于个人博客或静态站点

换句话说，FRPC 就像"公网入口"，而 Docker 是"本地应用商店"：你在 Mac mini 上随时可以用 Docker 启动一个新服务，分配一个本地端口，然后只需在 FRPC 配置中增加一个 [[proxies]]，几秒钟就能让它通过独立域名对外提供访问。

AI 使用：种子页面复用、迭代设计与 Figma to html

Mon, 26 May 2025 00:00:00 GMT

场景一：结构逻辑高度重复的页面

针对结构相似的页面，我会采用以下工作流：

创建种子模板：先实现一个功能完整的"种子页面"作为参考基准
描述差异点：向 AI 提供新页面的具体差异信息：
- 数据表格的字段定义
- 搜索条件的配置项
- 表单字段的属性
- 页面布局的预期效果
参照实现：指定以种子页面为模板，让 AI 生成相似结构的新页面

场景二：非重复页面

对于结构独特的页面，采用迭代设计的方式：

需求描述：向 AI 说明页面的结构布局和交互逻辑
方案生成：让 AI 基于需求生成初步实现方案
迭代优化：审阅方案，通过多轮沟通调整，直到方案符合预期
开始执行：跟据方案内容执行代码

场景三：基于设计稿生成代码

当有完整的设计稿时，可以直接利用 MCP (Model Context Protocol) 工具将设计转换为代码。

推荐工具：Figma MCP

这种方式适用于设计规范明确、视觉还原度要求高的场景。

最佳实践

为提升 AI 生成代码的质量，以下技巧值得注意：

提供准确的参考信息

当有参考页面时，截图提供给 AI 能显著提升理解准确度
确保依赖库文档的可获取性：
- 对于较新的依赖包，使用 context7 MCP 获取最新文档
- 对于较旧的依赖包，可将相关文档下载到本地，让 AI 直接读取

View Transition API 实现主题色过渡切换效果。

Thu, 13 Feb 2025 00:00:00 GMT

import WrapImage from '@/components/WrapImage/index.astro' import { cn } from '@/lib/cn'

最小实现

流程：

startViewTransition 函数执行，并记住当前页面的“快照”
执行回调函数，当“视图更新”完成后，会触发 ::view-transition-old 和 ::view-transition-new 的动画
动画结束后，视图更新完成

这段代码是 View Transition API 的最小实现。<br/>复制为 html 文件，打开即可看到效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    @keyframes opacity-fade-out {
      to {
        opacity: 0;
      }
    }

    ::view-transition-old(root) {
      animation: opacity-fade-out 1s ease-out;
    }
  </style>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      document.querySelector('#toggle').addEventListener('click', () => {
        document.startViewTransition(() => {
          if (document.documentElement.style.backgroundColor === 'black') {
            document.documentElement.style.backgroundColor = 'white'
          } else {
            document.documentElement.style.backgroundColor = 'black'
          }
        })
      })
    })
  </script>

  <body>
    <button id="toggle">toggle</button>
  </body>
</html>

兼容性

演示地址

github: first-view-transition

参考

MDN View Transition API

如何检测 PDF 文件的是否已加载完成

Mon, 14 Oct 2024 00:00:00 GMT

在网页中，如何判断 iframe 中的 PDF 是否已经加载完成呢？

网页中常规展示 PDF 的方式

<object data='filename.pdf' type='application/pdf'>
  <p>您的浏览器不支持嵌入式 PDF</p>
</object>

上述写法虽然简洁，但存在一个问题 —— 你无法通过代码判断 PDF 是否加载完成。

尤其是对于较大的 PDF 文件（例如 10MB），加载过程可能需要几秒钟时间，用户体验不佳。

改进方案：使用 Fetch 请求 PDF 后再加载

为了更好地控制加载流程，我们可以使用 fetch 请求 PDF 文件，再通过 Blob 创建一个临时 URL 来展示 PDF。整体流程如下：

通过 fetch 请求 PDF 文件；
将请求到的文件转换为 Blob 对象；
使用 createObjectURL 创建临时本地 URL；
使用该 URL 来展示 PDF。

这样你可以在加载过程中设置 loading 状态，甚至配合进度条或提示信息，显著提升用户体验。

👉 示例代码 standbox:usePDFUrl

代码实现

import { useCallback, useEffect, useRef, useState } from 'react'

interface PdfRenderProps {
  url: string // PDF 的远程地址
  params: Record<string, any> // 可选的 PDF 参数，如页码等
}

// 将参数序列化为 URL 查询字符串
const serialization = (obj: Record<string, any>) => {
  const params = new URLSearchParams()
  for (let key in obj) {
    params.append(key, obj[key])
  }
  return params.toString()
}

/**
 * 自定义 Hook：根据远程 URL 异步加载 PDF 文件，并返回本地 URL
 */
export const usePdfUrl = (props: PdfRenderProps) => {
  const { url, params } = props

  const [pdfLocalUrl, setPdfLocalUrl] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const abortController = useRef<AbortController | null>(null)

  // 拼接参数（如页码、缩放比例等）
  const wrapperUrl = pdfLocalUrl ? `${pdfLocalUrl}#${serialization(params)}` : null

  const fetchPdf = useCallback(async (requestUrl: string) => {
    if (abortController.current) {
      abortController.current.abort()
    }

    setLoading(true)

    abortController.current = new AbortController()
    const signal = abortController.current.signal

    try {
      const response = await fetch(requestUrl, { signal })
      abortController.current = null

      if (!response.ok) {
        throw new Error(`HTTP 请求错误，状态码：${response.status}`)
      }

      const blob = await response.blob()
      const pdfBlob = new Blob([blob], { type: 'application/pdf' })

      const localUrl = URL.createObjectURL(pdfBlob)
      setPdfLocalUrl(localUrl)
    } catch (error) {
      console.error('加载 PDF 失败：', error)
    }

    setLoading(false)
  }, [])

  useEffect(() => {
    if (url) {
      fetchPdf(url)
    }

    return () => {
      abortController.current?.abort()
      abortController.current = null
    }
  }, [fetchPdf, url])

  return {
    pdfLocalUrl: wrapperUrl,
    loading,
  }
}

总结

通过使用 fetch + Blob + URL.createObjectURL 的方式，我们可以更好地掌控 PDF 的加载过程：

可以监听加载状态（如 loading）；
支持设置 URL 参数（如指定页码）；
可扩展性更强，适用于需要精细控制的业务场景。

这种方法相比直接嵌入 <object> 更具灵活性。

博客技术栈介绍

Fri, 27 Sep 2024 00:00:00 GMT

欢迎来到我的博客！这是一个使用现代 Web 技术构建的极简个人博客。

项目名称寓意"羽笔绽放"，象征着文字的生长和创造力的迸发。

核心设计理念

使用 Astro 作为核心框架，确保网站的快速加载和良好的 SEO 表现。

秉承"小而美"的设计原则，尽量避免使用 JS；一些特定的交互如果需要使用 JS，则使用内联的 WebComponent 实现。

技术栈详解

核心框架

Astro 5.7+

现代静态站点生成器，支持多种前端框架。Astro 的核心优势在于零 JavaScript 的默认行为，只在需要交互时才加载 JavaScript，显著提升了页面性能。

样式与 UI

Tailwind CSS 4.0+
React 19

内容管理

内容集合 (Content Collections)

Astro 内置的内容管理方案，使用 Zod 进行类型验证，支持 Markdown 和 MDX 格式，提供类型安全的内容查询。
MDX 支持

在 Markdown 中嵌入 React 组件，实现更丰富的内容表达。

图片处理

Sharp

高性能的 Node.js 图像处理库，用于自动生成不同尺寸的图片和 WebP 格式转换。

Markdown 处理插件

rehype-autolink-headings

为标题自动添加锚点链接。
rehype-slug

为标题生成唯一的 ID 属性。

开发与构建

TypeScript
ESLint & Prettier
pnpm

部署方案

Vercel
Docker

使用快捷指令 + vipsthumbnail 修改图片

Fri, 20 Sep 2024 00:00:00 GMT

解决方案展示

最终成果快捷指令压缩裁剪转换图片

首先来看下效果；下面视频中展示的是使用方法：

把四张总计 50 M 大小的小猫照片，压缩裁剪成总计 661 KB 的 1080 分辨率大小的图片。

使用方法

右键点击图片 -> 鼠标移动到快捷操作 -> 点击图片大小
或是，选中图片 -> 点击图片大小

为什么需要压缩裁剪图片

图片分享的常见问题

我想通过微信把相机照片分享给我的好友，但是我的照片太大了，拍的照片大小都是 10M 以上。这就会导致以下几个问题：

如果"体积"过大，微信会自动进行压缩，导致图片模糊不清。
加载时间过长，体验感很差。
流量消耗过多。

如果可以对图片压缩后分享；如果是尺寸特别大的图片，还可以再把图片的尺寸"缩小"至 4k 以内，这样会大大缩小图片的"体积"，就可以避免上述问题。

我使用过的方案

TinyPNG

TinyPNG 使用智能有损压缩技术将您的 WebP, PNG and JPEG 图片的文件大小降低。通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。
Iloveimg

通过批量处理，您可以同时转换多张照片。iLoveIMG 支持 PNG、JPG、GIF、WEBP、HEIC、RAW 等多种格式转换，并提供高级功能，每项任务最多可批量转换高达 1GB 的文件。
Caesium Image Compressor

Caesium 是一款图像压缩软件，助您存储、发送和分享数字图片，支持 JPG、PNG、WebP 和 TIFF 格式。您可以快速减小文件大小（并根据需要调整分辨率），同时保持图像的整体质量。

局限性

TinyPNG、Iloveimg 等在线工具使用不方便。每次使用都要打开浏览器 -> 打开网站 -> 传图片 -> 等待压缩 -> 下载。
Caesium 本地软件也有一定使用成本。其实已经能满足我的所有需要，但我还是觉得不够方便。

我需要记住，压缩裁剪图片需要使用什么软件、压缩视频、Twitter 视频下载需要使用什么软件... 实际上我想；选中视频，右键压缩；选中图片，右键压缩。

命令行工具的探索

ImageMagick

官方简介：ImageMagick 是一款免费、开源的软件套件，用于编辑和处理数字图像。它可以用于创建、编辑、合成或转换位图图像，并支持多种文件格式，包括 JPEG、PNG、GIF、TIFF 和 Ultra HDR。

它提供了 magick CLI 命令行工具，可以使用 shell 脚本调用。下面是使用 magick 最简单的例子：

magick picture.jpg -resize 1080 picture-1080.jpgmagick picture.jpg -resize 1080 picture-1080.jpgmagick picture.jpg -resize 1080 picture-1080.jpgmagick picture.jpg -resize 1080 picture-1080.jpg

Vipsthumbnail

官方简介：libvips 是一个按需驱动、水平线程化的图像处理库。与类似库相比，libvips 运行速度快且内存占用小。

libvips 附带了一个便捷的命令行 vipsthumbnail CLI 命令行工具，可以使用 shell 脚本调用。下面是一个使用 vipsthumbnail 最简单的例子：

vipsthumbnail picture.jpg --size 1080 -o picture-1080.jpg

ImageMagick 速度测试

测试素材 30 张 jpg 格式的图片，总计 550M 左右。

测试代码：

# 开始计时
start_time=$(date +%s)

magick '*.JPG' -resize 1080 thumbnail%03d.jpg

# 结束计时
end_time=$(date +%s)

# 计算并打印执行时间
execution_time=$((end_time - start_time))
echo "Execution time: $execution_time seconds"

执行结果：压缩时间：15 秒

压缩后的图片总大小：26.6 MB

Vipsthumbnail 速度测试

测试代码：

# 开始计时
start_time=$(date +%s)

vipsthumbnail *.JPG -s 1080

# 结束计时
end_time=$(date +%s)

# 计算并打印执行时间
execution_time=$((end_time - start_time))
echo "Execution time: $execution_time seconds"

执行结果：压缩时间：5 秒

压缩后的图片总大小：7.3 MB

ImageMagick 和 Vipsthumbnail 速度和压缩大小对比

特性	vipsthumbnail	ImageMagick
压缩时间	5 秒	15 秒
压缩后大小	7.3 MB	26.6 MB

这是一个测试 Markdown 语法文档

Wed, 19 Jun 2024 00:00:00 GMT

这是一个完整的 Markdown 语法测试文档，涵盖了所有常用的格式和语法规则。无论你是初学者还是想要查阅特定语法，这份文档都能为你提供清晰的示例和说明。

标题

以下 HTML <h1>—<h6> 元素代表六个级别的章节标题。<h1> 是最高级别的标题，而 <h6> 是最低级别。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落

段落是最基本的文本单元。在 Markdown 中，段落由一个或多个连续的文本行组成。相邻的两行文本，如果中间没有空行，会被视为同一个段落内的文本。

如果你想创建一个新的段落，只需要在两段文字之间添加一个空行即可。这样可以保证文档的清晰结构和良好的可读性。

图片

语法

![替代文本](./完整/或/相对/图片路径)

引用

引用元素用于表示引用自其他来源的内容，可选择性地包含引用源信息，引用源信息必须位于 footer 或 cite 元素内，也可以包含内联修改，如注释和缩写。

无引用源的引用

语法

> 代码是写给人看的，只是顺便能在机器上运行。**注意**你可以在引用中使用 _Markdown 语法_。

效果

代码是写给人看的，只是顺便能在机器上运行。注意你可以在引用中使用 Markdown 语法。

有引用源的引用

语法

> 不要通过共享内存来通信，而要通过通信来共享内存。<br> — <cite>Rob Pike[^1]</cite>

效果

不要通过共享内存来通信，而要通过通信来共享内存。<br> — <cite>Rob Pike[^1]</cite>

[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的演讲。

表格

语法

| 斜体   | 粗体     | 代码   |
| ------ | -------- | ------ |
| _斜体_ | **粗体** | `代码` |

效果

斜体	粗体	代码
斜体	粗体	`代码`

代码块

语法

我们可以使用三个反引号 ``` 在新行中开始代码块，编写代码片段，然后在新行中用三个反引号结束。要启用特定语言的语法高亮，请在第一个三反引号后写上语言名称，例如：html、javascript、css、markdown、typescript、txt、bash

```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 示例文档</title>
  </head>
  <body>
    <p>测试内容</p>
  </body>
</html>
```

效果

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 示例文档</title>
  </head>
  <body>
    <p>测试内容</p>
  </body>
</html>

列表类型

有序列表

语法

1. 第一项
2. 第二项
3. 第三项

效果

第一项
第二项
第三项

无序列表

语法

- 列表项
- 另一个项目
- 再一个项目

效果

列表项
另一个项目
再一个项目

嵌套列表

语法

- 水果
  - 苹果
  - 橙子
  - 香蕉
- 乳制品
  - 牛奶
  - 奶酪

效果

水果
- 苹果
- 橙子
- 香蕉
乳制品
- 牛奶
- 奶酪

其他元素 — abbr、sub、sup、kbd、mark

语法

<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

按下 <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> 来结束会话。

大多数 <mark>蝾螈</mark> 都是夜行动物，以昆虫、蠕虫和其他小生物为食。

效果

<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

按下 <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> 来结束会话。

大多数 <mark>蝾螈</mark> 都是夜行动物，以昆虫、蠕虫和其他小生物为食。

文本格式

基础文本样式

这是 **粗体文本** 这是 _斜体文本_ 这是 **_粗斜体文本_** 这是 ~~删除线文本~~ 这是 `行内代码`

效果：

这是 粗体文本 这是 斜体文本 这是 粗斜体文本 这是 ~~删除线文本~~ 这是 行内代码

链接

内联链接

这是一个 [内联链接](https://www.example.com) 这是一个带标题的 [链接](https://www.example.com '链接标题')

效果：

这是一个内联链接这是一个带标题的链接

引用式链接

这是一个 [引用式链接][1] 这是另一个 [引用式链接][link-ref]

[1]: https://www.example.com
[link-ref]: https://www.example.com '可选标题'

效果：

这是一个引用式链接这是另一个引用式链接

分隔线

语法

---
---

---

效果

任务列表

语法

- [x] 已完成的任务
- [ ] 待完成的任务
- [x] ~~已完成并删除的任务~~
- [ ] 另一个待完成任务
  - [x] 子任务已完成
  - [ ] 子任务待完成

效果

[x] 已完成的任务
[ ] 待完成的任务
[x] ~~已完成并删除的任务~~
[ ] 另一个待完成任务
- [x] 子任务已完成
- [ ] 子任务待完成

转义字符

当你需要显示 Markdown 语法字符本身时，可以使用反斜杠进行转义：

语法

\*这不是斜体\* \*\*这不是粗体\*\* \# 这不是标题 \[这不是链接\](http://example.com)

效果

*这不是斜体* **这不是粗体** # 这不是标题 [这不是链接](http://example.com)

脚注

语法

这里有一个脚注引用[^note1]。

这里是另一个脚注[^note2]。

[^note1]: 这是第一个脚注的内容。

[^note2]: 这是第二个脚注的内容，可以包含多行。

    甚至可以包含代码块和其他格式。

效果

这里有一个脚注引用^note1。

这里是另一个脚注^note2。

甚至可以包含代码块和其他格式。

总结

这份文档涵盖了 Markdown 的主要语法特性。掌握这些语法后，你就能够创建结构清晰、格式美观的文档了。记住，Markdown 的哲学是简单易读，所以即使不渲染，原始的 Markdown 文本也应该是易于阅读的。

最后更新：2024年6月19日

Hi, ziheng

树莓派 + 7.3 寸墨水屏 + 宜家画框，攒一台电子相册

三件硬件

软件：InkyPi

组装

上手

发现相框挡住了屏幕边缘

解决

手机 + Tailscale + pi-web 随时随地跑 AI Agent

让 Clash 同时扮演两个角色

补上域名解析

把 tailnet 流量交给 Tailscale

完整配置

现在的效果

使用 Playwright MCP 自动生成产品文档

2. 最小实验

3. 开始拆分动作

4. AI 自主组合，不做流程编排

5. 沉淀下来的方法

AI Skills + Tailscale 管理 VPS 和 Mac mini

为什么需要 AI 辅助

架构图

核心 Tailscale + Skills

快速上线新服务

总结

用自然语言管理多服务器 Docker 部署

传统方式

AI 方式

本质区别

技术原理

工作流程

Skills 和 Commands 的角色

用户体验对比

总结

我想“财富自由”

卖掉使用四年的相机

过程

反思

不卖的动机

卖的动机

决定

VPS、Mac mini、Frp 搭建内网穿透家用服务器

为什么这么设计

概览

流量流向

VPS

Nginx

FRPS

Mac Mini

FRPC 客户端

AI 使用：种子页面复用、迭代设计与 Figma to html

场景一：结构逻辑高度重复的页面

场景二：非重复页面

场景三：基于设计稿生成代码

最佳实践

相关工具：HTML 转 Figma 插件

1. HTML to Design

2. HTML to Design by Demoway

View Transition API 实现主题色过渡切换效果。

最小实现

兼容性

演示地址

参考

如何检测 PDF 文件的是否已加载完成

网页中常规展示 PDF 的方式

改进方案：使用 Fetch 请求 PDF 后再加载

代码实现

总结

博客技术栈介绍

核心设计理念

技术栈详解

核心框架

样式与 UI

内容管理

图片处理

Markdown 处理插件

开发与构建

部署方案

使用快捷指令 + vipsthumbnail 修改图片

解决方案展示