[{"content":"具体流程： 细节： 由于不能直接原文转载，会触发原创校验，导致发表方式变为分享。所以要对文章轻微改写，改写后由于文章差异无法将图片按照原文进行定位，所以将图片全部放到文章底部，需要运营人员重新将图片进行排版；\ndify通过Tavily Extract抓取链接原文，llm改写成md并通过JSON POST发送至中转服务器，服务器先校验X-Relay-Token，然后WeMD将md转换成html，以及#js_content 补图，最后调微信 draft/add 写入草稿箱\nTavily 检索 vs Tavily Extract\nTavily 检索：输入：关键字 作用：搜索引擎，在网上找相关页面，返回标题、摘要、链接列表\nTavily Extract：输入：url 作用：打开你给的那几个 URL，抽出该页正文\n思路： 飞书-dify-微信公众号后台草稿\n飞书与dify通过langbot cloud连接\ndify与微信公众号后台通过服务器发送post请求（没有使用dify中微信公众号插件原因：不知道dify cloud的ip，无法在微信公众号后台添加白名单）\n","permalink":"https://yuehai.space/posts/wechat-ai-workflow/","summary":"\u003ch4 id=\"具体流程\"\u003e具体流程：\u003c/h4\u003e\n\u003cp\u003e\u003cimg loading=\"lazy\" src=\"/images/uploads/image2.png\"\u003e\u003c/p\u003e\n\u003ch4 id=\"细节\"\u003e细节：\u003c/h4\u003e\n\u003cp\u003e由于不能直接原文转载，会触发原创校验，导致发表方式变为分享。所以要对文章轻微改写，改写后由于文章差异无法将图片按照原文进行定位，所以将图片全部放到文章底部，需要运营人员重新将图片进行排版；\u003c/p\u003e\n\u003cp\u003edify通过Tavily Extract抓取链接原文，llm改写成md并通过JSON POST发送至中转服务器，服务器先校验X-Relay-Token，然后WeMD将md转换成html，以及#js_content 补图，最后调微信 draft/add 写入草稿箱\u003c/p\u003e\n\u003cp\u003eTavily 检索 vs Tavily Extract\u003c/p\u003e\n\u003cp\u003eTavily 检索：输入：关键字 作用：搜索引擎，在网上找相关页面，返回标题、摘要、链接列表\u003c/p\u003e\n\u003cp\u003eTavily Extract：输入：url 作用：打开你给的那几个 URL，抽出该页正文\u003c/p\u003e\n\u003ch4 id=\"思路\"\u003e思路：\u003c/h4\u003e\n\u003cp\u003e飞书-dify-微信公众号后台草稿\u003c/p\u003e\n\u003cp\u003e飞书与dify通过langbot cloud连接\u003c/p\u003e\n\u003cp\u003edify与微信公众号后台通过服务器发送post请求（没有使用dify中微信公众号插件原因：不知道dify cloud的ip，无法在微信公众号后台添加白名单）\u003c/p\u003e","title":"微信公众号文章转载工作流"},{"content":"superpowers-skill使用： anthropics frontend-desgin skill: 按场景推荐的impeccable命令流 下面是可直接套用的流程，按你现在这种前端页面迭代场景来排。\n新页面从 0 到 1（需求到落地） teach（仅首次或上下文缺失时）\nshape [feature/page]（先定结构、信息层级、交互）\ncraft [feature/page]（按方案实现）\nharden [target]（补错误态、空态、i18n、边界）\npolish [target]（视觉和交互收口）\n适用：新功能页、新活动页、新模块首版。\n旧页面提质（你现在最常用） critique [target]（先找问题并排序）\nlayout [target]（先把结构和节奏理顺）\ntypeset [target]（提升可读性和层级）\nclarify [target]（修正文案、按钮、提示语）\npolish [target]（最后统一细节）\n适用：已有页面“能用但不高级/不清晰”。\n页面太素、缺品牌感 bolder [target]（提升视觉张力）\ncolorize [target]（建立更明确的配色策略）\ndelight [target]（加入记忆点）\npolish [target]（防止“花但乱”）\n适用：看起来“模板味重”、缺识别度。\n页面太吵、信息过载 quieter [target]（先降噪）\ndistill [target]（只保留核心表达）\nlayout [target]（重建阅读路径）\ntypeset [target]（降低认知负担）\npolish [target]\n适用：视觉冲突多、用户不知道先看哪里。\n上线前质量闸门（发布前必过） audit [target]（a11y / 响应式 / 性能）\noptimize [target]（修关键性能瓶颈）\nadapt [target]（多端收口）\nharden [target]（边界和异常补齐）\npolish [target]\n适用：提测前、发版前、验收前。\n首次使用/冷启动体验优化 onboard [target]（首屏引导、空状态、激活路径）\nclarify [target]（关键提示语和行动文案）\nharden [target]（异常分支覆盖）\npolish [target]\n适用：注册后首用、功能第一次进入、低留存入口。\n动效专项（只改 motion 不大改结构） animate [target]（加入有目的动效）\noptimize [target]（检查动效性能）\npolish [target]（统一时序与手感）\n适用：页面“静态生硬”、交互反馈弱。\n高强度创意探索（概念稿/视觉突破） overdrive [target]（先拉高上限）\ndistill [target] 或 quieter [target]（回收可用部分）\nadapt [target]（落地到真实设备）\npolish [target]\n适用：活动页、品牌页、需要“惊喜感”的场景。\n实操建议（最省事）\n首次接入项目先跑一次：teach\n大多数页面改版用这条“通用五步流”：\ncritique -\u0026gt; layout -\u0026gt; typeset -\u0026gt; clarify -\u0026gt; polish\n发版前固定补一条：\naudit -\u0026gt; optimize -\u0026gt; adapt -\u0026gt; harden -\u0026gt; polish\nandrej-skills: 按 andrej-skills 规则：先列3步计划+验证点，再实施，最后汇报改动文件和验证结果。\ncaverman-skill：简化输出 explain-diff-optimization:用于解释修改代码，并生成html页面和相应题目： 📎SKILL.md\nmattpocock中的handoff，teach，grill-with-docs（grilling，domain-modeling)，code-review https://github.com/mattpocock/skills\n中文版\nvue-admin-standards： 项目规范skill：使用项目规范关键字即可，eg：检查该页面是否符合项目规范\n📎SKILL.md\narchify：\n将一段话、一个计划、一个代码仓库变成互动式网页流程图：\nhttps://github.com/tt-a1i/archify\n","permalink":"https://yuehai.space/posts/skills/","summary":"\u003ch6 id=\"superpowers-skill使用\"\u003esuperpowers-skill使用：\u003c/h6\u003e\n\u003cp\u003e\u003cimg loading=\"lazy\" src=\"/images/uploads/pasted-image-1790144432676.png\"\u003e\u003c/p\u003e\n\u003ch6 id=\"anthropics-frontend-desgin-skill\"\u003eanthropics frontend-desgin skill:\u003c/h6\u003e\n\u003cp\u003e\u003cimg loading=\"lazy\" src=\"/images/uploads/pasted-image-1790144482234.png\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg loading=\"lazy\" src=\"/images/uploads/pasted-image-1790144491931.png\"\u003e\u003c/p\u003e\n\u003ch6 id=\"按场景推荐的impeccable命令流\"\u003e按场景推荐的impeccable命令流\u003c/h6\u003e\n\u003cp\u003e下面是可直接套用的流程，按你现在这种前端页面迭代场景来排。\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e新页面从 0 到 1（需求到落地）\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eteach（仅首次或上下文缺失时）\u003c/p\u003e\n\u003cp\u003eshape [feature/page]（先定结构、信息层级、交互）\u003c/p\u003e\n\u003cp\u003ecraft [feature/page]（按方案实现）\u003c/p\u003e\n\u003cp\u003eharden [target]（补错误态、空态、i18n、边界）\u003c/p\u003e\n\u003cp\u003epolish [target]（视觉和交互收口）\u003c/p\u003e\n\u003cp\u003e适用：新功能页、新活动页、新模块首版。\u003c/p\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003e旧页面提质（你现在最常用）\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003ecritique [target]（先找问题并排序）\u003c/p\u003e\n\u003cp\u003elayout [target]（先把结构和节奏理顺）\u003c/p\u003e\n\u003cp\u003etypeset [target]（提升可读性和层级）\u003c/p\u003e\n\u003cp\u003eclarify [target]（修正文案、按钮、提示语）\u003c/p\u003e\n\u003cp\u003epolish [target]（最后统一细节）\u003c/p\u003e\n\u003cp\u003e适用：已有页面“能用但不高级/不清晰”。\u003c/p\u003e\n\u003col start=\"3\"\u003e\n\u003cli\u003e页面太素、缺品牌感\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003ebolder [target]（提升视觉张力）\u003c/p\u003e\n\u003cp\u003ecolorize [target]（建立更明确的配色策略）\u003c/p\u003e\n\u003cp\u003edelight [target]（加入记忆点）\u003c/p\u003e\n\u003cp\u003epolish [target]（防止“花但乱”）\u003c/p\u003e\n\u003cp\u003e适用：看起来“模板味重”、缺识别度。\u003c/p\u003e\n\u003col start=\"4\"\u003e\n\u003cli\u003e页面太吵、信息过载\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003equieter [target]（先降噪）\u003c/p\u003e\n\u003cp\u003edistill [target]（只保留核心表达）\u003c/p\u003e\n\u003cp\u003elayout [target]（重建阅读路径）\u003c/p\u003e\n\u003cp\u003etypeset [target]（降低认知负担）\u003c/p\u003e\n\u003cp\u003epolish [target]\u003c/p\u003e\n\u003cp\u003e适用：视觉冲突多、用户不知道先看哪里。\u003c/p\u003e\n\u003col start=\"5\"\u003e\n\u003cli\u003e上线前质量闸门（发布前必过）\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eaudit [target]（a11y / 响应式 / 性能）\u003c/p\u003e\n\u003cp\u003eoptimize [target]（修关键性能瓶颈）\u003c/p\u003e\n\u003cp\u003eadapt [target]（多端收口）\u003c/p\u003e\n\u003cp\u003eharden [target]（边界和异常补齐）\u003c/p\u003e","title":"常用skills"},{"content":"将赞比亚公司电脑设置成节点，做 TCP 转发 赞比亚星链出口：国内 Linux 中转 Starlink 无法公网入站、软路由装不了 Tailscale 时，用国内 Linux 做 单端口 TCP 转发：PassWall → Linux:20152 → Tailscale → 赞比亚 Xray → 星链出口。\n中转 192.168.0.108端口 20152不改默认路由 / DNS / 财务 1方案 国内 Linux（同时跑财务）只充当 Tailscale 客户端 + socat 端口转发， 把软路由打来的 Shadowsocks TCP 流量转到赞比亚 Windows 上的 Xray； 全程旁路，禁止 Exit Node / 子网路由 / DNS 接管。\n允许做的只有三件事： ① 安装 Tailscale（关 DNS/路由）　② 新增专用端口转发（如 20152）　③ 防火墙仅放行软路由 192.168.0.100\n2流量路径 [办公设备] ↓ 网关 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\n192.168.0.108 软路由 WAN\n192.168.0.100 转发端口\n20152 协议\nSS / aes-128-gcm PassWall 地址\n192.168.0.108 Tailscale 安全参数\n--accept-dns=false --accept-routes=false 4执行顺序 注册 Tailscale + openssl rand -base64 24 生成强密码 赞比亚：Tailscale + Xray（listen 仅绑 TS IP）+ 防火墙 + 自启 国内 Linux：Tailscale（必须关 DNS/路由） 国内 Linux：socat systemd 转发 + 防火墙只放行 192.168.0.100 财务系统回归测试（必过） 软路由 PassWall：赞比亚节点改为 192.168.0.108:20152，伪装改 none 验收 ip.sb = Zambia；用访问控制指定设备走赞比亚 5关键命令 生成密码\nbash · 任意机器复制\nopenssl rand -base64 24 国内 Linux · 安装 Tailscale（关接管）\nbash · 192.168.0.108复制\ncurl -fsSL https://tailscale.com/install.sh | sh sudo tailscale up --accept-dns=false --accept-routes=false 国内 Linux · socat 转发服务（把赞比亚 TS IP 换成真实值）\nbash · zambia-forward.service复制\nsudo tee /etc/systemd/system/zambia-forward.service \u0026gt;/dev/null \u0026lt;\u0026lt;EOF [Unit] Description=Forward 192.168.0.108:20152 to Zambia Tailscale Xray After=network-online.target tailscaled.service Wants=network-online.target [Service] Type=simple ExecStart=/usr/bin/socat TCP-LISTEN:20152,bind=192.168.0.108,fork,reuseaddr TCP:赞比亚TS_IP:20152 Restart=always RestartSec=3 [Install] WantedBy=multi-user.target EOF sudo systemctl daemon-reload sudo systemctl enable --now zambia-forward.service 防火墙 · 仅放行软路由（ufw 示例）\nbash · ufw复制\nsudo ufw allow from 192.168.0.100 to any port 20152 proto tcp comment \u0026#39;passwall-to-zambia-forward\u0026#39; 赞比亚 · Xray 监听（listen 填真实 TS IP，勿用 0.0.0.0）\njson · C:\\xray\\config.json复制\n{ \u0026#34;log\u0026#34;: { \u0026#34;loglevel\u0026#34;: \u0026#34;warning\u0026#34; }, \u0026#34;inbounds\u0026#34;: [ { \u0026#34;tag\u0026#34;: \u0026#34;ss-zambia\u0026#34;, \u0026#34;listen\u0026#34;: \u0026#34;赞比亚TS_IP\u0026#34;, \u0026#34;port\u0026#34;: 20152, \u0026#34;protocol\u0026#34;: \u0026#34;shadowsocks\u0026#34;, \u0026#34;settings\u0026#34;: { \u0026#34;method\u0026#34;: \u0026#34;aes-128-gcm\u0026#34;, \u0026#34;password\u0026#34;: \u0026#34;你的强密码\u0026#34;, \u0026#34;network\u0026#34;: \u0026#34;tcp,udp\u0026#34; } } ], \u0026#34;outbounds\u0026#34;: [ { \u0026#34;tag\u0026#34;: \u0026#34;direct\u0026#34;, \u0026#34;protocol\u0026#34;: \u0026#34;freedom\u0026#34; } ] } 财务异常 · 立即回滚\nbash · 回滚复制\nsudo systemctl disable --now zambia-forward.service # 仍异常再执行： sudo tailscale down 6PassWall 节点改动 字段 旧 新 地址 0415zby.live66.live 192.168.0.108 端口 20152 20152 密码 旧密码 新强密码 加密 aes-128-gcm aes-128-gcm 伪装 http none TLS 关 关 日常用访问控制指定设备走赞比亚，避免全局切换影响全网。\n7验收与红线 # 检查 预期 1–2 两边 Tailscale Connected 3 tailscale ping 赞比亚TS_IP 通 4–5 Xray + zambia-forward 监听 / active 6 nc -zv 192.168.0.108 20152 通 7–8 PassWall + ip.sb 有延迟 / Zambia 9–10 财务 / Docker / VM 完全正常 禁止： Exit Node、advertise-routes、accept-routes、accept-dns、改默认网关/netplan、动 Docker 网桥、占用 80/443/3306/8080、对 0.0.0.0 开放 20152。\n8故障速查 现象 先查什么 PassWall 超时 systemctl status zambia-forward；防火墙源 IP 是否为 192.168.0.100 有连通但非 ZM IP 是否真走赞比亚节点 / 访问控制是否生效 tailscale ping 不通 同一账号；星链 / 国内网络 财务异常 立刻回滚，再排查 赞比亚 TS IP 变了 改 service 目标 IP → daemon-reload \u0026amp;\u0026amp; restart bash · 看转发日志复制\njournalctl -u zambia-forward -e --no-pager 源自：赞比亚-国内Linux中转实施方案.md\n内网地址查询 Windows：ipconfig，看「IPv4 地址」\nLinux：ip -4 addr 或 hostname -I\n确保端口没有被已有服务占用 四种网络场景选型 情况一：若赞比亚有公网静态 IP，且为单层 NAT，直接进行端口转发 + 安装配置 xray + 强密码，国内这边直接用软路由连接\n情况二：若赞比亚有公网静态 IP，为双层 NAT，尝试光猫桥接模式，再进行端口转发 + 安装配置 xray + 强密码，国内这边直接用软路由连接\n情况三：若赞比亚非静态 IP，单层 NAT，配置 DDNS，域名指向公网 IP，再进行端口转发 + 安装配置 xray + 强密码，国内这边直接用软路由连接\n情况四：若赞比亚非静态 IP，双层 NAT，配置 DDNS，域名指向公网 IP，尝试光猫桥接模式，再进行端口转发 + 安装配置 xray + 强密码，国内这边直接用软路由连接（或不使用光猫桥接，而是使用建立隧道，在隧道内进行端口转发）\n流量转发全部情况-方案.md\nTailscale / 现场参数与附件 linux，内网 192.168.0.108\n赞比亚 Tailscale IP：100.100.215.10\n软路由 WAN IP：192.169.0.100（对外）　192.168.10.1（对内）\n强密码：M/nFvKnMyYnV00PHf2S6raANm/TV5XX1\ncursor_ssh_connection_to_zambia_pc.md\n软路由节点分配与链式代理 软路由节点分配 状态-概览，将设备 MAC 地址设为静态 网络-DNS-静态地址分配，添加刚刚设为静态的 MAC 地址 服务-Passwall-访问控制，TCP 节点设置想要分配的节点，UDP 与 TCP 节点相同即可 软路由使用 IP 服务商的 IP（只支持海外环境使用） Passwall-节点列表，新增节点，备注链式代理，类型选择 Xray，Xray 通常会出现「前置代理」字段，可以选一个已有的海外节点做跳板（链式代理相当于一个跳板/中间件） 若 Passwall 版本过旧，没有前置代理功能，可以使用 Xray 的「分流节点」做链式代理。Xray 类型下，可以选择分流协议，之后会弹出前置代理选项 在访问控制中对相应设备配置链式代理即可 前置代理和默认代理尽量使用相同类型，eg：都是 Xray ","permalink":"https://yuehai.space/posts/zambia-tcp/","summary":"\u003ch1 id=\"将赞比亚公司电脑设置成节点做-tcp-转发\"\u003e将赞比亚公司电脑设置成节点，做 TCP 转发\u003c/h1\u003e\n\u003ch1 id=\"赞比亚星链出口国内-linux-中转\"\u003e赞比亚星链出口：国内 Linux 中转\u003c/h1\u003e\n\u003cp\u003eStarlink 无法公网入站、软路由装不了 Tailscale 时，用国内 Linux 做 \u003cstrong\u003e单端口 TCP 转发\u003c/strong\u003e：PassWall → Linux:20152 → Tailscale → 赞比亚 Xray → 星链出口。\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-plain\" data-lang=\"plain\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e中转 192.168.0.108端口 20152不改默认路由 / DNS / 财务\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"1方案\"\u003e1方案\u003c/h2\u003e\n\u003cp\u003e国内 Linux（同时跑财务）只充当 \u003cstrong\u003eTailscale 客户端 + socat 端口转发\u003c/strong\u003e， 把软路由打来的 Shadowsocks TCP 流量转到赞比亚 Windows 上的 Xray； 全程旁路，禁止 Exit Node / 子网路由 / DNS 接管。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e允许做的只有三件事：\u003c/strong\u003e ① 安装 Tailscale（关 DNS/路由）　 ② 新增专用端口转发（如 20152）　 ③ 防火墙仅放行软路由 \u003ccode\u003e192.168.0.100\u003c/code\u003e\u003c/p\u003e\n\u003ch2 id=\"2流量路径\"\u003e2流量路径\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-plain\" data-lang=\"plain\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e[办公设备]\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e      ↓ 网关 192.168.10.1\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e[软路由 PassWall]  ──TCP──→  192.168.0.108:20152\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e  WAN: 192.168.0.100              ↑\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           [国内 Linux 中转]\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           · 财务系统（不动）\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           · Tailscale + socat\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                                      ↓ Tailscale\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           [赞比亚 Windows]\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           · Xray SS :20152\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                                      ↓ Starlink\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                           互联网（ZM IP）\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"3关键速查\"\u003e3关键速查\u003c/h2\u003e\n\u003cp\u003e国内 Linux\u003c/p\u003e","title":"赞比亚-TCP转发"},{"content":"开发工具 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,页面骨架）\n可生成用于图表、差异审查、计划审核、数据表和项目总结的丰富 HTML 页面或幻灯片：https://github.com/nicobailon/visual-explainer 编程代理 Pi agent 的插件，自动批准低风险的权限确认，高风险依然会交给用户确认：https://github.com/Europa2061/pi-auto-approval AI 笔记本，谷歌 NotebookLM 的开源替代品：https://github.com/MODSetter/SurfSense 在线文字转方言语音工具，目前支持 16 种方言、63 个音色：https://xiangyinge.com/zh 一个自托管的字幕应用，根据你的视频，自动搜五个字幕源，用 AI 找出最合适的字幕：https://github.com/fancydirty/subtitle-scout 识别视频语音、并自动添加字幕的 Web 应用。通过本地模型完成识别，视频、字幕、导出结果均在本地完成，不上传服务器：https://github.com/anghunk/video-transcript；同类：https://github.com/open-subs/opensubs 网络与IP ip 地址查询：https://worldip.io/104.28.223.246 罗拉 ip：https://console.rola-ip.co/dashboard ipluxe：https://www.ipluxe.com/pricing/ 外网 ip 服务商：https://froxy.com/zh-cn/locations/zm 对当前出口 IP 地址与浏览器的时区、语言和环境特征，同时检查 WebRTC、DNS 和 IPv6 泄露，用来确认 IP 地址与你的其他网络特征一致：https://github.com/harrisonwang/detect-radar 一个代理网关，将各种出口流量放到一个 Web 控制台下管理：https://github.com/tianrking/Vespero 三毛 vpn： https://gw-1.xn\u0026ndash;ehqx7tcnnope.com/#/dashboard https://xn\u0026ndash;ehqx35aimmzwv.com/ xfltd：https://www.xfltd.org/#/dashboard 青云梯：https://v4speed.pro/#/dashboard 基于 Cloudflare 的 VPS 虚拟主机管理平台，支持在网页上 SSH 登录管理你的各种 VPS 主机：https://github.com/aozorae/EdgeSSH 学习与博客 通过 git 阅读代码：https://piechowski.io/post/git-commands-before-reading-code/ 前端个人 blog：https://www.yuque.com/hutaoao/blog ai 查看浏览器，在页面中用 JS 脚本，定义当前页面的 MCP 接口，以供 AI 调用：https://sreenathmenon.com/blog/2026-08-04-webmcp-teaching-websites-to-talk-to-ai-agents/ 阮一峰博客：https://www.ruanyifeng.com/blog/ 没有三颗心脏博客：https://wmyskxz.cn/wiki/whats_ai/ barrd 的个人博客：https://barrd.dev/ 滚动条设计：https://www.404media.co/the-u-s-military-quietly-turned-gps-into-a-global-numbers-station-evidence-suggests/ 外网博客：https://substack.com/ 一个英文教程，用通俗语言解释 Linux 基础概念，可以当做入门教材：https://github.com/ahegazy0/linux-basics-for-hackers-notes 这个英文网站使用大量漫画，解释 DNS 安全扩展 (DNSSEC) 的机制，它可以防止 DNS 投毒：https://howdnssec.works/ Hacker News：https://news.ycombinator.com/news 开源的 Web 应用，通过打字学习英语单词，加深记忆，有发音和例句，内置多个常用词库：https://github.com/zyronon/TypeWords 生活娱乐 开屏广告跳过：https://github.com/gkd-kit/gkd 全球广播电台：https://radio.garden 追剧资源：https://github.com/laoma2053/awesome-zhuiju-free 26 年天文摄影作品：https://www.rmg.co.uk/stories/space-astronomy/zwo-astronomy-photographer-year-2026-shortlist 围棋教程：https://online-go.com/learn-to-play-go 开源的 Windows 输入法：https://github.com/metasequoiaime/MetasequoiaImeTsf 这个网站在地图上实时显示大型货轮的位置：https://atlas.flexport.com/ 天气实时图像：https://zoom.earth/ b 站评论，弹幕查询：https://www.aicu.cc/ 分辨图片是否是ai游戏：https://slop-sense.labtoagi.com/ 一个桌面的本地 TTS 配音工具，支持音色复刻和情绪调节，可以按照文稿生成配音，语音在本地生成：https://github.com/leemysw/yovoice 这个网站将维基百科上面的画作，按照艺术流派，变成可以步行参观的 3D 画廊：https://artmuseum.artfrompixels.com/ 查询汉字字源的网站，可以显示常用字的字形等变化：https://ivan666jjj.github.io/yigezi/ 书法网站：https://zidian.dapengshufa.com/ 账号与订阅 xgpt（非官方）：https://shopgpt.plus/ 折扣信息：https://kubonus.com/ 土耳其 gpt plus 账号鸭：https://www.zhanghaoya.com/ Facebook：\n这里的非洲账号是随机国家的，不能指定国家。他的库存经常变，上面这张图是最新的，下面是 20 分钟之前的\nTikTok：\n账号星球：https://www.accountboy.com/zh-cn-cny/buy-fb Facebook：\n这里的非洲账号是随机国家的，不能指定国家\nTikTok：\n","permalink":"https://yuehai.space/posts/tools-bookmarks/","summary":"\u003ch2 id=\"开发工具\"\u003e开发工具\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003egithub 开源项目（ossnav）\u003c/strong\u003e：\u003ca href=\"https://github.com/maxiaobang7/ossnav?tab=readme-ov-file#%E5%8A%9E%E5%85%AC%E8%BD%AF%E4%BB%B6\"\u003ehttps://github.com/maxiaobang7/ossnav?tab=readme-ov-file#%E5%8A%9E%E5%85%AC%E8%BD%AF%E4%BB%B6\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e验证是否为人类\u003c/strong\u003e：\u003ca href=\"https://github.com/mortspace/playcaptcha\"\u003ehttps://github.com/mortspace/playcaptcha\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e工具网站\u003c/strong\u003e：\u003ca href=\"https://fmhy.net/system-tools#remote-desktop\"\u003ehttps://fmhy.net/system-tools#remote-desktop\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e前端文件预览\u003c/strong\u003e：\u003ca href=\"https://github.com/flyfish-dev/file-viewer\"\u003ehttps://github.com/flyfish-dev/file-viewer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e该网站可以上传 CSV 数据文件，自动生成可视化图形\u003c/strong\u003e：\u003ca href=\"https://visprex.com/#datasets\"\u003ehttps://visprex.com/#datasets\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003emarkdown 转 html\u003c/strong\u003e：\u003ca href=\"https://github.com/bruits/satteri\"\u003ehttps://github.com/bruits/satteri\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e第三方授权登录\u003c/strong\u003e：\u003ca href=\"https://github.com/apache/casbin\"\u003ehttps://github.com/apache/casbin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ec++ 性能单元测试框架\u003c/strong\u003e：\u003ca href=\"https://github.com/google/benchmark\"\u003ehttps://github.com/google/benchmark\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eweb 前端浏览 office 文件，支持浏览器，vscode，agent 读取 office 文件\u003c/strong\u003e：\u003ca href=\"https://github.com/yukiyokotani/office-open-xml-viewer\"\u003ehttps://github.com/yukiyokotani/office-open-xml-viewer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e隐私政策生成器\u003c/strong\u003e：\u003ca href=\"https://www.freeprivacypolicy.com/free-privacy-policy-generator/\"\u003ehttps://www.freeprivacypolicy.com/free-privacy-policy-generator/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e通过声音（喇叭和麦克风），发送和接收数据的一个开源工具\u003c/strong\u003e：\u003ca href=\"https://github.com/solst-ice/chirp\"\u003ehttps://github.com/solst-ice/chirp\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e多协议下载器\u003c/strong\u003e：\u003ca href=\"https://github.com/zerx-lab/FluxDown\"\u003ehttps://github.com/zerx-lab/FluxDown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个轻量级的数据库迁移工具，支持各种主流数据库\u003c/strong\u003e：\u003ca href=\"https://github.com/amacneil/dbmate\"\u003ehttps://github.com/amacneil/dbmate\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个测试邮件发送功能的应用程序，嵌入你的应用，用它测试应用的邮件发送功能，自带 Web 后台\u003c/strong\u003e：\u003ca href=\"https://inbucket.org/\"\u003ehttps://inbucket.org/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e代码对比工具\u003c/strong\u003e：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2026/png/57443523/1781487764244-e4d60c44-028a-47cb-8920-be295263faae.png\"\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e浏览器分签页管理\u003c/strong\u003e：\u003ca href=\"https://github.com/zarazhangrui/tab-out\"\u003ehttps://github.com/zarazhangrui/tab-out\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e部署在 Cloudflare 的免费图片/文字中转池，方便在不同设备之间分享内\u003c/strong\u003e：\u003ca href=\"https://github.com/Defiabell/shotsync\"\u003ehttps://github.com/Defiabell/shotsync\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e区分扫描二维码手机是安卓还是苹果，然后重定向到各自的应用商店\u003c/strong\u003e\u003ca href=\"https://matthuggins.com/blog/posts/qr-codes-that-route-to-the-appropriate-app-store\"\u003ehttps://matthuggins.com/blog/posts/qr-codes-that-route-to-the-appropriate-app-store\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个服务器体检脚本，检查硬件、性能、IP 质量、网络质量等：\u003c/strong\u003e\u003ca href=\"https://github.com/CleanIP/sh.cd\"\u003ehttps://github.com/CleanIP/sh.cd\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e跑大模型工具：\u003c/strong\u003e\u003ca href=\"https://github.com/ggml-org/llama.cpp\"\u003ehttps://github.com/ggml-org/llama.cpp\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e微信公众号文章排版工具：\u003c/strong\u003e\u003ca href=\"https://github.com/tenngoxars/WeMD\"\u003ehttps://github.com/tenngoxars/WeMD\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e谷歌官方推出的 AI 识别工具：\u003c/strong\u003e\u003ca href=\"https://synthid.com/\"\u003ehttps://synthid.com/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一款开源的、可选择使用不同 AI 模型的图像超分辨率（放大）工具，最高可将图片放大4倍。所有处理均在浏览器本地完成：\u003c/strong\u003e\u003ca href=\"https://github.com/isixe/bg2x\"\u003ehttps://github.com/isixe/bg2x\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个开源的安卓 App，手机安装后，扫码与电脑配对，电脑就可以编写脚本用来操作手机。手机端不用开 USB 调试，也不用 root：\u003c/strong\u003e\u003ca href=\"https://github.com/KnifeLemon/Droidline\"\u003ehttps://github.com/KnifeLemon/Droidline\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个 macOS 开源软件，在 Claude Code、Codex 等 AI 编程代理工作时阻止 Mac 休眠，支持合盖保持唤醒、过热暂停、低电量退出：\u003c/strong\u003e\u003ca href=\"https://github.com/s3onghyun/bulchimbeon\"\u003ehttps://github.com/s3onghyun/bulchimbeon\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e这个网站可以检查你的浏览器指纹，泄漏了多少个人信息，给出有问题的地方：\u003c/strong\u003e\u003ca href=\"https://envtrace.net/zh\"\u003ehttps://envtrace.net/zh\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"前端与设计\"\u003e前端与设计\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e苹果商城截图生成器\u003c/strong\u003e：\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.appshots.top/\"\u003ehttps://www.appshots.top/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://tool.tushuoit.com/screenshot\"\u003ehttps://tool.tushuoit.com/screenshot\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003epretext 是一个 npm 上的 JavaScript/TypeScript 库：在不用 DOM 测量（getBoundingClientRect 等）的情况下，快速、准确地计算多行文本的高度和换行\u003c/strong\u003e：\u003ca href=\"https://github.com/chenglou/pretext\"\u003ehttps://github.com/chenglou/pretext\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ecss 组件\u003c/strong\u003e：\u003ca href=\"https://www.beercss.com/\"\u003ehttps://www.beercss.com/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003etailwindcss\u003c/strong\u003e：\u003ca href=\"https://github.com/tailwindlabs/tailwindcss\"\u003ehttps://github.com/tailwindlabs/tailwindcss\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个开源的设计工具将可视化的布局设计转为 CSS + HTML 代码\u003c/strong\u003e：\u003ca href=\"https://github.com/penpot/penpot\"\u003ehttps://github.com/penpot/penpot\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e图标\u003c/strong\u003e：\u003ca href=\"https://www.flaticon.com/search?word=procurement\"\u003ehttps://www.flaticon.com/search?word=procurement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e图标\u003c/strong\u003e：\u003ca href=\"https://reicon.dev/\"\u003ehttps://reicon.dev/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e轻量，0 依赖滚动条\u003c/strong\u003e：\u003ca href=\"https://github.com/wurencaideli/dumogu-scrollbar/blob/master/docs/README.zh-CN.md\"\u003ehttps://github.com/wurencaideli/dumogu-scrollbar/blob/master/docs/README.zh-CN.md\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e这个网站收集各种网页滚动的动画效果，使用 Web Animations API (WAAPI) 和 CSS Animations API 实现\u003c/strong\u003e：\u003ca href=\"https://scroll-driven-animations.style/\"\u003ehttps://scroll-driven-animations.style/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e手绘风格svg：\u003c/strong\u003e\u003ca href=\"https://github.com/guokaigdg/naive-icons\"\u003ehttps://github.com/guokaigdg/naive-icons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个基于 Tailwind 的 UI 组件库：\u003c/strong\u003e\u003ca href=\"https://github.com/thedevdojo/pines\"\u003ehttps://github.com/thedevdojo/pines\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e前端的远程页面调试工具。在页面插入一个脚本，就可以远程打开该网页的控制台，查看各种信息，接收实时报错，适合调试手机端页面：\u003c/strong\u003e\u003ca href=\"https://github.com/2234839/silkpulse\"\u003ehttps://github.com/2234839/silkpulse\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个把 HTML 网页动画逐帧渲染成 MP4 视频的命令行工具：\u003c/strong\u003e\u003ca href=\"https://github.com/wx4766/html-to-video\"\u003ehttps://github.com/wx4766/html-to-video\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"ai与agent\"\u003eAI与Agent\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003emattpocock/skills：一个类似于 caveman 的 skill\u003c/strong\u003e：\u003ca href=\"https://github.com/mattpocock/skills\"\u003ehttps://github.com/mattpocock/skills\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e图片翻译\u003c/strong\u003e：\u003ca href=\"https://otranslator.com/zh\"\u003ehttps://otranslator.com/zh\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e提示词优化器\u003c/strong\u003e：\u003ca href=\"https://prompt.always200.com/#/basic/system\"\u003ehttps://prompt.always200.com/#/basic/system\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e存储清理 skill\u003c/strong\u003e：\u003ca href=\"https://github.com/KKKKhazix/khazix-skills\"\u003ehttps://github.com/KKKKhazix/khazix-skills\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e根据视频的语音生成 SRT 字幕，并把字幕翻译成其他语言\u003c/strong\u003e：\u003ca href=\"https://github.com/Blue-B/WhisperSubTranslate\"\u003ehttps://github.com/Blue-B/WhisperSubTranslate\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e生成代码图，方便 ai 读取 mcp\u003c/strong\u003e：\u003ca href=\"https://github.com/colbymchenry/codegraph\"\u003ehttps://github.com/colbymchenry/codegraph\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e开源密码管理，协助 agent 使用密码避免泄漏问题\u003c/strong\u003e：\u003ca href=\"https://github.com/oomol-lab/open-connector\"\u003ehttps://github.com/oomol-lab/open-connector\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e开源的 Windows 磁盘清理工具，用 AI 分析垃圾文件\u003c/strong\u003e：\u003ca href=\"https://github.com/vudsen/ai-disk-cleaner\"\u003ehttps://github.com/vudsen/ai-disk-cleaner\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e一个 MCP 服务器，让 Claude Code、Cursor、Codex 等 AI 代理直接操作 Figma，能读设计稿也能画设计稿\u003c/strong\u003e：\u003ca href=\"https://github.com/awdr74100/figwright\"\u003ehttps://github.com/awdr74100/figwright\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e基于 codex 的代码漏洞扫描\u003c/strong\u003e：\u003ca href=\"https://github.com/openai/codex-security\"\u003ehttps://github.com/openai/codex-security\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e讲解代码变化并出题测试\u003c/strong\u003e：\u003ca href=\"https://gist.github.com/geoffreylitt/a29df1b5f9865506e8952488eac3d524\"\u003ehttps://gist.github.com/geoffreylitt/a29df1b5f9865506e8952488eac3d524\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e优化版本：\u003ca href=\"https://gist.github.com/ankitg12/8e808d387799de4e9839bc393f8e6405\"\u003ehttps://gist.github.com/ankitg12/8e808d387799de4e9839bc393f8e6405\u003c/a\u003e（正确答案随机不再是最长的那个；不需要生成重复的 css,js,页面骨架）\u003c/p\u003e","title":"工具-收藏链接"},{"content":"Vue 组件封装与可见性 组件封装：.sync / visible / v-if 问题： 弹窗/抽屉子组件在父组件数据未就绪时提前初始化，导致 props 监听失效；关闭后可见状态与父组件不同步。\n原因： 仅用父组件一个 visible 不够稳；子组件内部 Drawer 的 update:visible 需要回写父级；data 与 computed 不能同名，否则计算属性失效。\n做法：\n从 HTML 梳理功能所需数据/方法/子组件，写入 props；父组件不需要的删掉。 父传 :dshow.sync=\u0026quot;dshow\u0026quot;，子内用内部变量接 :visible.sync=\u0026quot;detailShow\u0026quot;，再 watch dshow/detailShow 双向同步。 .sync 等价于 :visible + @update:visible。 或用 computed getter/setter 兼监听与回写。 两种稳妥模式：① visible + v-if（子组件不必自己控显隐）；② 双 visible（父属性名与子 props 名对齐）。本质都是「两个可见状态」：仅打开时才创建子组件，父数据就绪后再挂载。 父组件调用子组件函数 问题： 父组件需要直接调用子组件方法。\n做法： 通过 $refs 拿到子实例后调用其方法（见截图）。\nmounted + watch 获取父组件数据 问题： 子组件既要处理首次打开/刷新时已有数据，也要处理后续动态点开详情时数据变化。\n原因： 仅 mounted 或仅 watch 都会漏场景。\n做法： mounted 处理首次已有数据；watch 处理动态变更。\n嵌套与动态增减表单 问题：（备忘）嵌套表单与动态增减字段。\n说明： 创建题目页与答题页这类场景会用到嵌套 + 动态增减。\n做法： 按业务拆嵌套表单项，用数组驱动增删。\nv-for 遍历嵌套对象 问题： v-for 遍历数组里嵌套对象时字段取不到。\n做法： v-for=\u0026quot;item in 数组\u0026quot;，再用 item.对象字段 访问。\nel :value 与 v-model 类型一致 问题： el-select 想默认选中某 option，却显示成字符串 \u0026quot;1\u0026quot; 或选不中。\n原因： option 的 :value 是 number，而 v-model 绑定成了 string，类型不一致。\n做法： 默认值也用 number（如 parseInt(this.$route.query.type)），与 option value 类型对齐。\n$modalForm 等自定义插件方法 问题：（备忘）项目里自定义弹窗/表单插件。\n说明： 概念备忘。\n做法： 使用 $modalForm 等挂在实例上的自定义插件方法；配合 $refs / $nextTick 做组件交互。\n响应式与渲染更新 响应式原理与 render / watchEffect / $set 问题： 何时会触发重新运行？为何原始类型「响应式」会失效？\n原因： 响应式依赖「对象形态的数据」+「函数运行期间读到了该数据」；原始类型在部分场景（如 VueUse 取 props）会失效。\n做法：\n用 render / watch（Vue2）/ watchEffect（Vue3）/ computed 监听响应式对象（ref、reactive）。 render、watchEffect 一开始就会同步跑一遍。 给对象新增属性用 $set，否则视图不更新。 $set 的使用 问题： 给对象/数组新增属性后视图不更新；或要把后端列表重组为「姓名→年龄」映射。\n原因： Vue2 无法探测直接赋值的新属性；需 $set(target, key, value)。\n做法：\n新增：this.$set(this.myInfo, 'age', 24)，不要 this.myInfo.age = 23。 重组：遍历 info，$set(this.newInfo, item.name, item.age) 得到 name→age。 删除对象属性与 $forceUpdate 问题： 用 delete 删掉对象键后界面不刷新，又不想再请求接口。\n原因： 直接 delete this.tableDetail[no] Vue 侦测不到。\n做法： 用 previousNumber 记上次审批单号；@change 调 setFinance，对比当前 currentAuthNumbers 做增删；删除后调用 $forceUpdate() 强制重渲染。\nfee 对象重组与 Object.keys 问题： 返回数据是对象或数组，要把 id/fee_id/currency_id/money_input/remark 收进 fee，再随 dataForm 提交。\n原因： 对象结构需按 key 下钻；数组可直接遍历；后端若不需要 fee 则不必收集。\n做法：\n对象：Object.keys 遍历，再 foreach 推入 feeItems。 数组：直接遍历。 不需要 fee：直接发 dataForm 的 money_input、remarkWriteoff。 JS 对象间映射（fee_type） 问题： table 遍历 B，却要用 A 上的 fee_type（两边通过共同 no 关联）。\n原因： 两对象字段分散，需要先建映射再查。\n做法： 遍历 A 建 feeTypeMap[no] = fee_type，模板里 {{ feeTypeMap[key] }}。\n数组去重 问题： finance 列表里 uid 重复，需要唯一 uid 列表。\n做法： [...new Set(res.data.finance.map(item =\u0026gt; item.uid))]。\nArray.isArray 判断数组 问题： typeof 得到 \u0026quot;object\u0026quot;，分不清对象和数组。\n原因： JS 里数组的 typeof 也是 \u0026quot;object\u0026quot;。\n做法： 用 Array.isArray(...)。\nnull / undefined 与 0 的比较 问题：（备忘）null/undefined 和 0 怎么比。\n说明： 概念备忘。\n做法： null !== 0、undefined !== 0、null != 0、undefined != 0 均为 true；Number(undefined) 是 NaN，NaN !== 0 也是 true。\nprice_edit_open !== false 问题： 接口可能返回 true/false/undefined/null，开关默认该开还是关？\n原因： 直接赋值会把 undefined/null 原样带下去；业务要「只有明确 false 才关」。\n做法： this.price_edit_open = res.data.price_edit_open !== false → false 才为 false，其余（含未返回）为 true。\n浮点数相加精度 bug 问题： 123.08 + 1.1 期望 124.18，截断后却得到 124.17。\n原因： 0.08、0.1 二进制无限循环，IEEE754 只能存近似值，和为 124.17999999999999，截断变 124.17。\n做法： ① 整数分/厘累加再除 100/1000；② decimal.js / big.js；③ 四舍五入。\nJS 默认参数 问题：（备忘）函数参数想有默认值。\n说明： 概念备忘。\n做法： function test(a, b = 10)：有传用传入值，没传用默认；打开详情可写 test(1) 不必 test(1, 10)。\nencodeURIComponent 问题：（备忘）URI 组件编码。\n说明： 概念备忘。\n做法： encodeURIComponent(str) 把非字母数字（除 -_.!~*'()）编成 % + 两位十六进制（UTF-8）。\nBootstrap 栅格断点 问题：（备忘）多端栅格适配。\n说明： 概念备忘。\n做法： xs\u0026lt;576 / sm≥576 / md≥768 / lg≥992 / xl≥1200；用 col 的 xs/sm/md/lg/xl 列数（如大屏 8、小屏 24 整行）。\n路由守卫与页面标题 路径参数与 Query 参数 问题： path 参数和 query 参数怎么写、有何区别。\n做法： 路径参数写在 path 段；Query 用 ?key=。见截图对比。\n路由标题：is_draft 与 beforeRouteEnter / Update 问题： 采购管理与草稿共用页、靠 is_draft 区分，但 meta 标题要不同。\n原因： 只写 beforeRouteUpdate → 首次直达带 query 不触发；只写 beforeRouteEnter → 同组件内切参数不触发。\n做法： 两个守卫都写：按 to.query.is_draft === '1' 设「采购计划-草稿」否则「采购计划管理」。\n拆分新建 / 编辑项目路由 问题： 新建与编辑共用一个路由配置时，页签标题/权限混乱（如编辑却显示新建）。\n原因： router 里只配了一条路由。\n做法： 拆成 newProject 与 editProject 两条（可共用同一组件文件），各自 meta.title / auth。\n客户 list_trade / list_clearance 路由 问题： 贸易客户与清关客户列表要分路由、分标题，组件可复用。\n做法： 配 list_trade（meta.is_trade: 1）与 list_clearance（is_trade: 2），同组件 ClientManage，keepalive + 各自 title。\n国际化 i18n 下拉选项按 locale 切换与 $t 占位符 问题： 接口返回中英文字段的下拉，要随当前语言切换；静态文案与带变量确认文案怎么翻。\n原因： 选项 label 来自接口字段；静态文靠语言包；占位符名不能带空格。\n做法：\nconst currentLang = this.$i18n.locale，map 时 label: currentLang === 'en' ? (name_en || name) : name。 静态：{{ $t('message....') }}。 占位符：词条用 {source}/{target}（不能 { source }），调用 $t(key, { source, target })。 watch $i18n.locale 重新拉选项。$i18n 来自 /src/i18n/index.js。 项目中，中英语言切换实现： 📎2026-09-14-default-locale-english-design.md\naxios 传参（params / data） params 与 data：数组传参 问题： 要把数组参数正确发给后端（尤其 PUT）。\n原因： GET/部分场景 params 会序列化成 ids[]=1\u0026amp;ids[]=2；body 应用 data。\n做法： PUT 等 body 用 data 而非 params: data。\nAPI 请求的五种参数格式 问题：（备忘）项目里常见的五种入参写法。\n说明： 概念备忘。\n做法： ① 多参数（多用于 GET）；② 对象 {params, data, options}；③ 请求体（POST/PUT，含简写）；④ 路径+对象混合；⑤ REST 路径参数。\n多选下拉数组序列化 问题： 多选提交出现 industry_ids[]=… 等非预期格式，后端解析失败或格式不对。\n原因： multiple 使 v-model 成数组；若用 params 发送，axios 默认 PHP 风格 industry_ids[]=13\u0026amp;industry_ids[]=14。\n做法：\n需要字符串：调用前 industry_ids: this.formData.industry_ids.join(',')。 需要真正数组 JSON：改用 data（body）。 口诀：params=信封地址（筛选/分页）；data=信封内容（提交/复杂 JSON）。GET/DELETE 一般用 params；POST/PUT/PATCH 一般用 data。GET 用 data 常传不出去。 传参为 0 时勿用假值判断 问题： 接口合法值是 0，前端却丢成空。\n原因： 0 || '' 在 JS 里把 0 当假值。\n做法： 显式判空：this.source = (res.source !== null \u0026amp;\u0026amp; res.source !== undefined) ? res.source : ''。\n接口封装与 axios 层 问题： API 要同时支持 .then 与 async/await。\n做法： API 函数 return request({...}) 返回 Promise；request.js 用 axios.create + 请求/响应拦截（token、status!==200 则 reject）。\nPromise 与 async Promise 链式 vs async/await 问题： Vue 里调接口用哪种写法。\n说明： 两者本质都是 Promise；async/await 是语法糖，现代首选。\n做法： .then/.catch 链式，或 async + try/catch/finally；接口必须返回 Promise。\nPromise.all / race / allSettled 问题： 多请求并发时选哪个聚合 API。\n说明：\nall：全成功才成功，一败俱败（快失败）；适合首屏缺一不可。 race：谁先 settle 听谁；适合超时、多源竞速。 allSettled：全结束再看各自 status；适合尽量多拿结果、统一关 loading。 做法： 订单详情+收支列表并发用 allSettled；初始化用户+权限+配置用 all；超时用 race(fetch, timeout)。注意 all 短路后其他请求仍在跑；allSettled 要判 status 再取 value。\nPromise 实用模版 问题：（备忘）常见并发/超时/降级/重试写法。\n说明： 概念备忘。\n做法：\n首屏 Promise.all + finally 关 loading。 多区域 allSettled 按 status 分别赋值/警告。 withTimeout = race(promise, timeoutPromise)。 主接口失败 try 兜底接口。 retry(fn, times, delay) 循环重试。 当前场景：先开 loading，起两个 promise，await allSettled，再关 loading。 避坑：勿 forEach(async) 控串行；all 结果顺序=输入顺序；用 finally 或 allSettled 后统一关 loading；频繁刷新加「最后一次请求生效」。 表格勾选与跨页选择 分页勾选数据丢失与跨页回显 问题： 翻页后勾选丢失；或 ids 里还有、勾选框却空；下载/打印后需清空。\n原因： 表格 DOM 随 dataList 重建，仅当前页 selection 不够；$nextTick 前 toggle 找不到新行；reserve-selection alone 仍有局限。\n做法：\n维护全局 selectedRows / selectedIdsSet + 提交用 ids。 @select / @select-all → handleSelectRow(selection)：对当前页 ids，选中则加入集合、取消则移除，再 ids = [...selectedIdsSet]。 getList 赋值后 $nextTick → restoreSelection：对当前页每行 toggleRowSelection(row, true/false)。 下载/打印成功后清空选择。 Element Plus 的 row-key + reserve-selection 可作辅助，但仍建议手动集合 + 回显。 列表展示与行内编辑 列表 on-change 与 fastEdit 误触发 问题： 查询刷新时批量打 fastEdit；清空单元格时 fastEdit 打两次。\n原因： getList 更新 v-model 触发 on-change；清空时 clear + v-model 同步各触发一次。\n做法：\nisLoadingData：拉数前 true，双 $nextTick 后再 false；updateProductField 开头若 loading 则 return。 防抖：记录 rowId_field_value 时间戳，100ms 内重复跳过。 或 @on-clear → handleClear 传 ''，updateProductField 对 undefined 直接 return。 on-change 用事件参数：(value) =\u0026gt; updateProductField(row, field, value)，勿依赖 row.xxx 时序。 关闭弹窗后再刷新列表 问题： 操作成功后立刻开列表仍是旧数据，再开才是新数据。\n做法： 成功回调里先关弹窗（formShow = false），再 getList()。\nel-table :data 必须是数组 问题： :data 绑对象时报错/不渲染。\n原因： el-table 的 data 只接受数组。\n做法： tableDetail 为对象时 v-for=\u0026quot;(value, key)\u0026quot; 且 :data=\u0026quot;value\u0026quot;（value 已是数组）；为数组时 :data=\u0026quot;[item]\u0026quot;。\niview Table render 可编辑单元格 问题： iview 表格列要可编辑输入。\n做法： columns 的 render(h, params) 返回 h('Input', { props, on: { 'on-change': e =\u0026gt; formData.contacts[params.index].name = e.target.value } })；params.row/index/column 可用。\n列表最后一行单独样式 问题： 只要最后一行特殊样式。\n做法： 模板三元 + JS 函数返回布尔，决定是否加 class。\n操作后更新行状态 问题： 行操作成功后要改该行状态，不必整表重拉。\n做法： 在成功回调里直接改当前行字段（见截图）。\n状态字段映射 问题： 后端 status 为 0/1/-1/100，要显示文案和颜色。\n做法： getStatusText / getStatusColor 用 map；模板里 Tag 绑定二者。\nid→name 供应商映射（iview + element） 问题： 行里只有 supplier_id，要显示 fullName，且数据量大不能手写 statusMap。\n做法： 拉供应商列表建 supplierMap[id]=fullName。 - iview：render 里 h('span', this.supplierMap[params.row.supplier_id])。 - element：formatter / 作用域插槽 / computed 预处理加 supplier_name。\niview Select 宽度与 filterable 问题： 未开搜索时选框可随 label 自适应，开 filterable 后宽度不再自适应。\n说明： 组件行为备忘。\n做法： 需要固定/百分宽时手动设 style=\u0026quot;width:…\u0026quot;；知悉 filterable 会关掉自适应。\n欠款报表：动态列与多级表头 问题：（备忘）欠款报表要动态列 + 多级表头。\n说明： 源笔记仅有主题名，无具体实现细节。\n做法： 按业务配置动态 columns / 多级表头（待补实现笔记）。\n表单、数字与校验 下拉框「不限」与 null 问题： 「不限」用空字符串时，初始化若也设 ''，占位符不生效且默认像已选不限；接口选项会覆盖手写「不限」。\n原因： 空串与「不限」option value 冲突；直接赋值数组会冲掉前置不限项。\n做法： 初始用 null 让 placeholder 生效；请求前把 null 滤掉；接口选项用中间变量拼 [不限, ...res] 再赋给 options。\n千位分隔符与 toLocaleString 问题：（备忘）金额千分位、百分比、货币、位数、时间格式化。\n说明： 概念备忘。\n做法： 正则 toFixed(2) 后整数部 replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')；或 num.toLocaleString() / 带 style:'percent'|'currency'、最小最大小数位、日期 toLocaleString。\n表单验证 trigger 与 number 类型 问题： 输入数字后校验失败且提示为空；不知用 blur 还是 change。\n原因： 默认 rule type 是 string；number 值类型不匹配。\n做法： Input 用 trigger:'blur'；Select/Date/Checkbox/Radio 用 change；数值字段加 type:'number'。\nSelect 严格相等 === 类型匹配 问题： Select 有值却显示不出选中项。\n原因： 用 === 匹配，\u0026quot;1\u0026quot; !== 1。\n做法： option 数组元素类型与 v-model 一致；后端是数字则用数字/parseInt，初始别用 '' 而用 0（若业务允许）。\nvalidator.js 与 props validator 问题：（备忘）邮箱/手机/URL 校验，以及限制 prop 枚举。\n说明： 概念备忘。\n做法： 第三方 validator.isEmail/isMobilePhone/isURL；props 里 validator: v =\u0026gt; ['trade','order','commission'].includes(v)（Vue 内置，非同一库）。\n导出、打印与下载 打印弹窗：先 window.open 空白页 问题： 异步拿到打印 URL 后再 window.open，被浏览器当弹窗拦截。\n原因： 非用户手势同步上下文打开窗口易被拦。\n做法： 点击时立刻 printWindow = window.open('', '_blank')；拦截则提示；成功后 printWindow.location.href = res.data.url；失败/!url 则 close() 并报错。\n打印与导出方法 问题： 打印/导出文件怎么触发下载。\n做法：\n打印：window.open(res.data.url)（或空白页方案）。 导出：① 后端返回 URL → location.href；② \u0026lt;a download\u0026gt;；③ window.open；④ Blob + URL.createObjectURL + a.click + revoke（适合文件流）。 打印 / 导出 icon 问题：（备忘）按钮图标。\n做法： el-icon-printer / el-icon-download。\nuni-app / 小程序 / CRM getSystemInfoSync 问题：（备忘）取状态栏高度、屏幕、平台等。\n做法： uni.getSystemInfoSync()，Android/iOS/H5 返回字段不同（如 statusBarHeight、platform）。\nimage aspectFill / widthFix 问题：（备忘）小程序 image mode 怎么选。\n说明： 缩放/裁剪共 13 种；常用 aspectFill（短边填满可裁切）、widthFix（宽固定高自适应）等。\n做法： 按展示需求选 mode（见表截图）。\nswiper iOS 高度塌陷 问题： iOS 上 swiper 默认高 150px，图片上半被裁。\n原因： iOS 默认高度；#ifdef APP-IOS 打包后可能不生效。\n做法： 用 getSystemInfoSync().platform === 'ios' 动态算高度/marginTop（可参考 statusBarHeight*2+110）。\nsafeAreaInsetBottom 问题： iOS 弹窗底部多一块空白。\n原因： u-popup safeAreaInsetBottom 默认为 true，预留底部安全区。\n做法： 不需要留白时设 false；需要防手势条遮挡则保持 true。\nToken：Vuex + 本地存储 问题： 重启 App 丢失登录态；登录页重复进。\n做法：\n登录成功 mutation：写 Vuex + uni.setStorageSync。 onLaunch：getToken() 有则 commit 恢复。 登录页 onLoad：本地已有 token 则 reLaunch 首页。 懒加载方案 问题： 是否等全部图加载完再揭开整页。\n原因： 整页等齐拖垮 TTFB、浪费流量，不适合信息流。\n做法： 骨架/固定槽位 → 接口先渲染文案 → 列表 lazy-load → 可选仅预加载 Banner/分类图标。\nGoogle Play 照片选择器与 excludePermissions 问题： 上架被拒：不能靠宽泛媒体权限/uni.chooseImage 扫相册。\n原因： Play 政策要求系统照片选择器，target 高版本勿申请 READ_MEDIA_*（除非核心功能无法替代）。\n做法： 优先 uni.chooseMedia 或 Photo Picker 插件；manifest 加 Camera 模块；excludePermissions 排除 READ_MEDIA_IMAGES/VIDEO 等；注意 abiFilters、min/targetSdk。\n业务模块备忘 核销 → 审批 → 任务 → 收支 问题：（备忘）核销业务链路怎么点进去。\n说明： 领域路径备忘。\n做法： 核销管理 → 审批单号 → 任务单号 → 任务详情 → 收支费用 → 收支详情。\nSpring Boot 连接数据库 问题： 如何用 application.yml 连库，表从无到有。\n做法： pom 加驱动/连接池 → yml 配 URL/用户/密码 → 建表可用 JPA ddl、SQL 脚本、Flyway/Liquibase；库本身通常需先手动创建（Boot 默认不建库，除非额外配置）。\nGit、地图与其它工具 git stash → pull → stash pop 问题： 有本地未提交改动时 pull 失败/怕被覆盖。\n做法： git stash → git pull（可用 --rebase）→ 冲突则处理并 rebase --continue → git stash pop。\nCursor 生成提交信息 问题：（备忘）用 AI 根据 diff 生成 commit message。\n做法： 使用「生成提交信息」/@diff of working state 从当前差异生成。\nAPI key 保护 问题： 密钥怎么存放才相对安全。\n做法： 私密仓可写 config + 控制台限制；公开仓用 .env.*（示例用 .env.example）+ 限制；或接口下发 key；或 Vault。\nGoogle 地图 API 问题：（备忘）地图相关 API 分工。\n做法： Static（静态图）、Maps JavaScript（动态）、Places（搜索提示）、Geocoding（经纬度↔地址）。\n防止浏览器缓存 问题： 页面/资源被旧缓存卡住。\n做法： HTML meta 禁缓存；URL 加时间戳；服务端 Cache-Control 等响应头。\nuseRouter / useRoute / openAPI / byteMD 问题：（备忘）零散工具名。\n说明： 源笔记一句话备忘，无展开。\n做法： useRouter 跳转；useRoute 读当前路由；openAPI 按接口文档生成请求；byteMD 作 Markdown 相关能力。\n在2c/4g上自建dify 问题：页面502\n说明：全开满内存，需要关闭部分服务\n做法：关闭weaviate服务，知识库检索功能无法使用或关闭其他服务来保证空余部分内存，Sandbox / plugin_daemon 不能长期关 — Code 节点与微信插件依赖它们。\n","permalink":"https://yuehai.space/posts/vue-component-visibility/","summary":"\u003ch2 id=\"vue-组件封装与可见性\"\u003eVue 组件封装与可见性\u003c/h2\u003e\n\u003ch3 id=\"组件封装sync--visible--v-if\"\u003e组件封装：.sync / visible / v-if\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e问题：\u003c/strong\u003e 弹窗/抽屉子组件在父组件数据未就绪时提前初始化，导致 props 监听失效；关闭后可见状态与父组件不同步。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e原因：\u003c/strong\u003e 仅用父组件一个 \u003ccode\u003evisible\u003c/code\u003e 不够稳；子组件内部 Drawer 的 \u003ccode\u003eupdate:visible\u003c/code\u003e 需要回写父级；\u003ccode\u003edata\u003c/code\u003e 与 \u003ccode\u003ecomputed\u003c/code\u003e 不能同名，否则计算属性失效。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e做法：\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e从 HTML 梳理功能所需数据/方法/子组件，写入 props；父组件不需要的删掉。\u003c/li\u003e\n\u003cli\u003e父传 \u003ccode\u003e:dshow.sync=\u0026quot;dshow\u0026quot;\u003c/code\u003e，子内用内部变量接 \u003ccode\u003e:visible.sync=\u0026quot;detailShow\u0026quot;\u003c/code\u003e，再 watch \u003ccode\u003edshow\u003c/code\u003e/\u003ccode\u003edetailShow\u003c/code\u003e 双向同步。\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e.sync\u003c/code\u003e 等价于 \u003ccode\u003e:visible\u003c/code\u003e + \u003ccode\u003e@update:visible\u003c/code\u003e。\u003c/li\u003e\n\u003cli\u003e或用 computed getter/setter 兼监听与回写。\u003c/li\u003e\n\u003cli\u003e两种稳妥模式：① \u003ccode\u003evisible\u003c/code\u003e + \u003ccode\u003ev-if\u003c/code\u003e（子组件不必自己控显隐）；② 双 \u003ccode\u003evisible\u003c/code\u003e（父属性名与子 props 名对齐）。本质都是「两个可见状态」：仅打开时才创建子组件，父数据就绪后再挂载。\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847140-7be85776-0603-495c-9627-0a7ab86adbd6.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847094-ea6ce963-a64e-4105-9ad9-53d37f885082.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847133-00864cb3-ebb8-4ec1-8252-51bba77dc81a.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847124-61a5b7f0-83d8-4477-b71e-37ded19e41a9.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847954-a2ccc0a8-e572-4ccf-aa76-2416052bbdc5.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847714-e0bc35af-dc2c-4c19-b7a1-30a5bade42f4.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847762-9dd65096-3129-4c49-aa8e-da87a9ea8aa3.png\"\u003e\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847893-3c4968c9-2391-4f45-92e9-8c1b33730cc6.png\"\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"父组件调用子组件函数\"\u003e父组件调用子组件函数\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e问题：\u003c/strong\u003e 父组件需要直接调用子组件方法。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e做法：\u003c/strong\u003e 通过 \u003ccode\u003e$refs\u003c/code\u003e 拿到子实例后调用其方法（见截图）。\u003cimg loading=\"lazy\" src=\"https://cdn.nlark.com/yuque/0/2025/png/57443523/1764811847153-01f94237-9916-4c3c-b735-66fafc916e09.png\"\u003e\u003c/p\u003e\n\u003ch3 id=\"mounted--watch-获取父组件数据\"\u003emounted + watch 获取父组件数据\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e问题：\u003c/strong\u003e 子组件既要处理首次打开/刷新时已有数据，也要处理后续动态点开详情时数据变化。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e原因：\u003c/strong\u003e 仅 \u003ccode\u003emounted\u003c/code\u003e 或仅 \u003ccode\u003ewatch\u003c/code\u003e 都会漏场景。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e做法：\u003c/strong\u003e \u003ccode\u003emounted\u003c/code\u003e 处理首次已有数据；\u003ccode\u003ewatch\u003c/code\u003e 处理动态变更。\u003c/p\u003e","title":"项目知识库"}]