笔记 on yuehai

微信公众号文章转载工作流

Tue, 13 Oct 2026 10:56:00 +0800

具体流程：

细节：

由于不能直接原文转载，会触发原创校验，导致发表方式变为分享。所以要对文章轻微改写，改写后由于文章差异无法将图片按照原文进行定位，所以将图片全部放到文章底部，需要运营人员重新将图片进行排版；

dify通过Tavily Extract抓取链接原文，llm改写成md并通过JSON POST发送至中转服务器，服务器先校验X-Relay-Token，然后WeMD将md转换成html，以及#js_content 补图，最后调微信 draft/add 写入草稿箱

Tavily 检索 vs Tavily Extract

Tavily 检索：输入：关键字作用：搜索引擎，在网上找相关页面，返回标题、摘要、链接列表

Tavily Extract：输入：url 作用：打开你给的那几个 URL，抽出该页正文

思路：

飞书-dify-微信公众号后台草稿

飞书与dify通过langbot cloud连接

dify与微信公众号后台通过服务器发送post请求（没有使用dify中微信公众号插件原因：不知道dify cloud的ip，无法在微信公众号后台添加白名单）

常用skills

Wed, 23 Sep 2026 14:28:00 +0800

superpowers-skill使用：

anthropics frontend-desgin skill:

按场景推荐的impeccable命令流

下面是可直接套用的流程，按你现在这种前端页面迭代场景来排。

新页面从 0 到 1（需求到落地）

teach（仅首次或上下文缺失时）

shape [feature/page]（先定结构、信息层级、交互）

craft [feature/page]（按方案实现）

harden [target]（补错误态、空态、i18n、边界）

polish [target]（视觉和交互收口）

适用：新功能页、新活动页、新模块首版。

旧页面提质（你现在最常用）

critique [target]（先找问题并排序）

layout [target]（先把结构和节奏理顺）

typeset [target]（提升可读性和层级）

clarify [target]（修正文案、按钮、提示语）

polish [target]（最后统一细节）

适用：已有页面“能用但不高级/不清晰”。

页面太素、缺品牌感

bolder [target]（提升视觉张力）

colorize [target]（建立更明确的配色策略）

delight [target]（加入记忆点）

polish [target]（防止“花但乱”）

适用：看起来“模板味重”、缺识别度。

页面太吵、信息过载

quieter [target]（先降噪）

distill [target]（只保留核心表达）

layout [target]（重建阅读路径）

typeset [target]（降低认知负担）

polish [target]

适用：视觉冲突多、用户不知道先看哪里。

上线前质量闸门（发布前必过）

audit [target]（a11y / 响应式 / 性能）

optimize [target]（修关键性能瓶颈）

adapt [target]（多端收口）

harden [target]（边界和异常补齐）

赞比亚-TCP转发

Wed, 23 Sep 2026 14:17:00 +0800

将赞比亚公司电脑设置成节点，做 TCP 转发

赞比亚星链出口：国内 Linux 中转

Starlink 无法公网入站、软路由装不了 Tailscale 时，用国内 Linux 做 单端口 TCP 转发：PassWall → Linux:20152 → Tailscale → 赞比亚 Xray → 星链出口。

中转 192.168.0.108端口 20152不改默认路由 / DNS / 财务

1方案

国内 Linux（同时跑财务）只充当 Tailscale 客户端 + socat 端口转发，把软路由打来的 Shadowsocks TCP 流量转到赞比亚 Windows 上的 Xray；全程旁路，禁止 Exit Node / 子网路由 / DNS 接管。

允许做的只有三件事： ① 安装 Tailscale（关 DNS/路由）　 ② 新增专用端口转发（如 20152）　 ③ 防火墙仅放行软路由 192.168.0.100

2流量路径

[办公设备]
      ↓ 网关 192.168.10.1
[软路由 PassWall]  ──TCP──→  192.168.0.108:20152
  WAN: 192.168.0.100              ↑
                           [国内 Linux 中转]
                           · 财务系统（不动）
                           · Tailscale + socat
                                      ↓ Tailscale
                           [赞比亚 Windows]
                           · Xray SS :20152
                                      ↓ Starlink
                           互联网（ZM IP）

3关键速查

国内 Linux

工具-收藏链接

Wed, 23 Sep 2026 14:12:00 +0800

开发工具

github 开源项目（ossnav）：https://github.com/maxiaobang7/ossnav?tab=readme-ov-file#%E5%8A%9E%E5%85%AC%E8%BD%AF%E4%BB%B6
验证是否为人类：https://github.com/mortspace/playcaptcha
工具网站：https://fmhy.net/system-tools#remote-desktop
前端文件预览：https://github.com/flyfish-dev/file-viewer
该网站可以上传 CSV 数据文件，自动生成可视化图形：https://visprex.com/#datasets
markdown 转 html：https://github.com/bruits/satteri
第三方授权登录：https://github.com/apache/casbin
c++ 性能单元测试框架：https://github.com/google/benchmark
web 前端浏览 office 文件，支持浏览器，vscode，agent 读取 office 文件：https://github.com/yukiyokotani/office-open-xml-viewer
隐私政策生成器：https://www.freeprivacypolicy.com/free-privacy-policy-generator/
通过声音（喇叭和麦克风），发送和接收数据的一个开源工具：https://github.com/solst-ice/chirp
多协议下载器：https://github.com/zerx-lab/FluxDown
一个轻量级的数据库迁移工具，支持各种主流数据库：https://github.com/amacneil/dbmate
一个测试邮件发送功能的应用程序，嵌入你的应用，用它测试应用的邮件发送功能，自带 Web 后台：https://inbucket.org/
代码对比工具：

浏览器分签页管理：https://github.com/zarazhangrui/tab-out
部署在 Cloudflare 的免费图片/文字中转池，方便在不同设备之间分享内：https://github.com/Defiabell/shotsync
区分扫描二维码手机是安卓还是苹果，然后重定向到各自的应用商店https://matthuggins.com/blog/posts/qr-codes-that-route-to-the-appropriate-app-store
一个服务器体检脚本，检查硬件、性能、IP 质量、网络质量等：https://github.com/CleanIP/sh.cd
跑大模型工具：https://github.com/ggml-org/llama.cpp
微信公众号文章排版工具：https://github.com/tenngoxars/WeMD
谷歌官方推出的 AI 识别工具：https://synthid.com/
一款开源的、可选择使用不同 AI 模型的图像超分辨率（放大）工具，最高可将图片放大4倍。所有处理均在浏览器本地完成：https://github.com/isixe/bg2x
一个开源的安卓 App，手机安装后，扫码与电脑配对，电脑就可以编写脚本用来操作手机。手机端不用开 USB 调试，也不用 root：https://github.com/KnifeLemon/Droidline
一个 macOS 开源软件，在 Claude Code、Codex 等 AI 编程代理工作时阻止 Mac 休眠，支持合盖保持唤醒、过热暂停、低电量退出：https://github.com/s3onghyun/bulchimbeon
这个网站可以检查你的浏览器指纹，泄漏了多少个人信息，给出有问题的地方：https://envtrace.net/zh

前端与设计

苹果商城截图生成器：
https://www.appshots.top/
https://tool.tushuoit.com/screenshot
pretext 是一个 npm 上的 JavaScript/TypeScript 库：在不用 DOM 测量（getBoundingClientRect 等）的情况下，快速、准确地计算多行文本的高度和换行：https://github.com/chenglou/pretext
css 组件：https://www.beercss.com/
tailwindcss：https://github.com/tailwindlabs/tailwindcss
一个开源的设计工具将可视化的布局设计转为 CSS + HTML 代码：https://github.com/penpot/penpot
图标：https://www.flaticon.com/search?word=procurement
图标：https://reicon.dev/
轻量，0 依赖滚动条：https://github.com/wurencaideli/dumogu-scrollbar/blob/master/docs/README.zh-CN.md
这个网站收集各种网页滚动的动画效果，使用 Web Animations API (WAAPI) 和 CSS Animations API 实现：https://scroll-driven-animations.style/
手绘风格svg：https://github.com/guokaigdg/naive-icons
一个基于 Tailwind 的 UI 组件库：https://github.com/thedevdojo/pines
前端的远程页面调试工具。在页面插入一个脚本，就可以远程打开该网页的控制台，查看各种信息，接收实时报错，适合调试手机端页面：https://github.com/2234839/silkpulse
一个把 HTML 网页动画逐帧渲染成 MP4 视频的命令行工具：https://github.com/wx4766/html-to-video

AI与Agent

mattpocock/skills：一个类似于 caveman 的 skill：https://github.com/mattpocock/skills
图片翻译：https://otranslator.com/zh
提示词优化器：https://prompt.always200.com/#/basic/system
存储清理 skill：https://github.com/KKKKhazix/khazix-skills
根据视频的语音生成 SRT 字幕，并把字幕翻译成其他语言：https://github.com/Blue-B/WhisperSubTranslate
生成代码图，方便 ai 读取 mcp：https://github.com/colbymchenry/codegraph
开源密码管理，协助 agent 使用密码避免泄漏问题：https://github.com/oomol-lab/open-connector
开源的 Windows 磁盘清理工具，用 AI 分析垃圾文件：https://github.com/vudsen/ai-disk-cleaner
一个 MCP 服务器，让 Claude Code、Cursor、Codex 等 AI 代理直接操作 Figma，能读设计稿也能画设计稿：https://github.com/awdr74100/figwright
基于 codex 的代码漏洞扫描：https://github.com/openai/codex-security
讲解代码变化并出题测试：https://gist.github.com/geoffreylitt/a29df1b5f9865506e8952488eac3d524

优化版本：https://gist.github.com/ankitg12/8e808d387799de4e9839bc393f8e6405（正确答案随机不再是最长的那个；不需要生成重复的 css,js,页面骨架）

项目知识库

Sat, 19 Sep 2026 00:00:00 +0800

Vue 组件封装与可见性

组件封装：.sync / visible / v-if

问题： 弹窗/抽屉子组件在父组件数据未就绪时提前初始化，导致 props 监听失效；关闭后可见状态与父组件不同步。

原因： 仅用父组件一个 visible 不够稳；子组件内部 Drawer 的 update:visible 需要回写父级；data 与 computed 不能同名，否则计算属性失效。

做法：

从 HTML 梳理功能所需数据/方法/子组件，写入 props；父组件不需要的删掉。
父传 :dshow.sync="dshow"，子内用内部变量接 :visible.sync="detailShow"，再 watch dshow/detailShow 双向同步。
.sync 等价于 :visible + @update:visible。
或用 computed getter/setter 兼监听与回写。
两种稳妥模式：① visible + v-if（子组件不必自己控显隐）；② 双 visible（父属性名与子 props 名对齐）。本质都是「两个可见状态」：仅打开时才创建子组件，父数据就绪后再挂载。

父组件调用子组件函数

问题： 父组件需要直接调用子组件方法。

做法： 通过 $refs 拿到子实例后调用其方法（见截图）。

mounted + watch 获取父组件数据

问题： 子组件既要处理首次打开/刷新时已有数据，也要处理后续动态点开详情时数据变化。

原因： 仅 mounted 或仅 watch 都会漏场景。

做法： mounted 处理首次已有数据；watch 处理动态变更。