【7k 字的自制软件分享 + 闲聊】WebTooys Quicktools 第三弹：AI 记事本输入法、剪贴板图片保存、AI 驱动的虚拟文章平台 FakeNET
本文转载自我自己的个人博客文章，同时也欢迎参观我的个人网站
一字一句均手打，7k 字不易（去掉 md 语法之前统计出来快有 8k 字了）
首页链接
开始之前，先放链接
随着改名（一会会提到），链接有一点变动，但也顺便增加了一些域名，哪个都行
- Vercel
- Cloudflare Pages
- Netlify tooys.netlify.app
增加了 Cloudflare Pages，更改了 netlify 和 vercel 的域名（旧的也能访问，会重定向）
前言
长文警告！纯手打不易！一定要看到后面！后面更重要
距离上次写它的博客已经 10 个月左右（300 多天）了
（看了一眼博客，上一篇是 2025.2.22）
所以这次我想在开始之前先聊一聊，聊点东西
这次的重点是最后一个哦～请耐心看完～
关于这个东西
WebTooys（Quicktools）这个东西，算是我前端学习路上的一个记录了，从我初学前端的 TODO 到现在的 React，直接的说就是我的成长历程
可以看到，我刚学没多久就解除了 Web Component 组件库了，这也深深影响着我
我对它的定义是，一个纯前端静态网页工具集，不需要打包构建的那种，不过后面这一祖宗之法从现在开始…… 动摇了，后面你就知道了
它还会继续更新的！
关于第__弹
每到发博客的时候，都会写上第几弹这样的东西
其实对于项目本身来说并不存在这种说法，这只是博客的说法罢了
每到一个大项目（开了单独的 Github 仓库的）我就会发一弹
由于上次值更新了两个项目，就不 + 1 了，+0.1 了（其实一开始是 + 0.5 的，但是我后来改了）
改名
这次有一个很大的变动 —— 改名！
Quicktools → WebTooys
原因
原本这个名字是我随便取的，简单易懂
可正是因为如此，重名率 101.0000% × 114514 啊
我刚刚在 bing 搜了一下，第一页 quicktools.* 域名的就有 4 个，其他的也都是写着自己是 Quicktools 的
我觉得，这不行！我要一个新的名字
我回想了一下，所谓 Tools—— 工具，我做到了吗？最初我是这么想的，但是它逐渐变了
它现在还是有着不少 Tools 的，但是也有不少 Toys，实用性几乎没有，娱乐性倒是有
我一拍脑袋！就叫 Tooys 吧！融合了这两个单词，玩具工具都是具
感觉有点简单，稍微补一下
所以新的名字就是：
WebTooys
可是啊，我看了我还是放不下 Quicktools 这个称呼，也懒得改 Github 仓库名，这一改我还得跑到 Netlify 和 Vercel 那边去……
所以，全称就叫做 WebTooys Quicktools，简称 Tooys / WT
以前还简称 QT 呢
Netlify 域名
前面说了，改了名也改了域名
Vercel 好改，允许多个域名 *.vercel.app 同时存在（我设置了 301 重定向），可是 Netlify 就不行了
我想改，但是改不了，改了旧的就没了，可我最常用的就是旧的 Netlify 域名啊，一改就失效了
那就……
创建一个新的叫做 ftz-tools 的项目！
我直接利用 Netlify Drop 上传这个东西（Github Gist）
这里有一个 netlify.toml，直接 301 重定向到新站
可是 Drop 要求我必须要有一个 index.html，那我就快速写了一个多重自动重定向的网页（其实应该够不着这一步的）（用了 http-equiv="refresh" 和 window.location.href 和 <a>）
完美解决！
AI
以前在这个项目中使用 AI 要么是 AI 辅助开发、要么是直接 vibe，但是就是没有 AI 为中心的
现在有了
前面的项目
开始说第三弹之前，我想说说第二弹和第 2.1 弹的两个大项目
Taple
这是我写了一个学期的玩意，那时还没有双休（现在也没有）
写完之后还有不少修修补补，增加了 AI 功能，增加了缩放功能，算是我坚持最久的一个项目了吧
UpDyn
一个批量查看 B 站 UP 主动态的工具，但是没过多久这个破站的风控加强了
用不了了！最后当我找到一个能用的第三方库的时候，我本地能跑通，部署到服务器上就寄了，大概是因为服务器在国外吧
总之 —— 蒙古上单.jpg（█ ███████）
首页重构
其实发了上一弹博客没多久，我就重构界面了
最初的版本长这样：（用的是 mdui1 组件库）（翻 git 第一次提交翻出来的）
其实 mdui2 的表格不作为一个组件存在
material web 进维护模式好几年了你怎么还不活啊
为啥新版本涟漪不放到 Material 3 官方文档上（mdui 遵循官方文档用的是旧涟漪）
后来我觉得太丑了，于是用 mdui2 的卡片重做了一个简单的网页，没有 js，增加项目直接改 html 就行了
（图片自己翻）
而在新的版本，长的差不多，但其实是重构了的，我使用 js 生成组件的方式显示项目
为了方便管理，我把项目配置独立到了 link.js 里面，不用 links.json 的原因是我不想要页面加载完了之后还得等 fetch，同时也不用被 json 严格的格式困扰
这么做的好处就是，我可以添加筛选分类排序功能了！
此外藏了一个小彩蛋（不要作弊哦，看源码全都看光光了，我可没藏多深，不看源码往这恶彩蛋才有意思）
sitemap 和 umami
我想让它上 Bing Webmaster 和 Google Search Console，所以我需要一个 sitemap，一开始我想要写一个脚本直接生成的，后来想了一下，换成手写了，这样可控性高
然后也添加了 umami，分享链接
介绍
已经写了好多字
该开始写每个项目的介绍了～
按时间顺序来吧
AB 追更器
我从小学就开始追更 Alan Becker 的动画了，几年以来技术一直在提升，一度期盼更新，可惜现在生活上有着各种事情，逐渐地在意得少了，当初的热情也消退了许多，但这并不妨碍我依旧热爱
没看过的赶紧给我去看
我学前端之前，我用 python 做了一个用 PythonAnywhere+Flask+API 的查看视频列表的网页，还用的是 MDBootstrap
而我光速重写了
现在那个网页已经变成 api 转发了，现在是用 mdui 做的界面，请求 PythonAnywhere 后端，这样不用工具也能看
图片用了 wsrv.nl 反代 Youtube 图片，国内网络可以访问
直播和首播都会被算进视频列表 API 的，所以不用担心看不上首播 / 直播了
关于旧的那个，看我以前的一篇博客
asak viewer
asak 是我以前写的一个库，支持 py 和 js，写过一篇博客
就我自己而言，作用不怎么大
不过我通过这种方式扩展了 asak.json 的作用
把自己的各种 llm api 收集起来，导入到 viewer 里面，就能够搜索和复制了，方便快速选取自己的多个 api 多个模型
同时还提供了一个测试 api 的功能，直接把参数填进去就能测试这个 api 这个 key 这个模型是否可用，只要没有 CORS
其他没什么好说的，过
AI 记事本
这个东西我发过一个 L 站帖子和一个 B 站视频，就懒得介绍了
但是我想谈谈我的想法，我直接引用帖子里的话吧
原本就是想这样做一个记事本的，想着这样打字都不用考虑选词了，一顿狂敲 ai 自动帮我整理好，输入法什么的都免了
想象很美好现实很骨感
等以后小模型进步了，输出又快又好，这玩意绝对好用（
平常打字的时候，时不时会遇上打错字（拼音同音字），一旦打字打快了打爽了一不小心就漏掉了，说不定你能在这篇文章里面找到一点点错别字，那么我们可以从输入法动手，直接 ai 纠错，这就是我的想法
当然，技术还不够成熟
后面我会写一篇博客，专门来写我的一些想法，或是完成不了，或是我没技术，或是世界的技术还不够，或是我没时间写，或是我后来又觉得不行……
Copic
你只需要按下 PrtSc 键把截图复制到剪贴板，然后打开这个网页按下 ctrl+v，图片就保存了
这个网页不依赖任何第三方资源，你可以按 ctrl+s 把这单个 html 保存下来离线使用，我是用 GLM-4.6 临时搓的，顺手放上去了
其实我自己并不需要用这个东西，我之前写的 LifeLog 电脑端就顺手集成了截图功能，其实我是在整大活，短时间内可能没能整得完，留个悬念
你跟截图过不去了是吧？之前写的第一个 elecron 应用
FakeNET
重点来了！压轴项目！
访问链接（一会解释）
/builts/fakenet/index.html/builts/fakenet/index_jd.html/builts/fakenet/index_jdm.html
简单介绍一下吧
这个在 Github README 已经写了很多，再结合视频，我觉得我不需要讲什么了
先说一下，虽然我提到了 Sora，但是其实这个想法的产生是在 Sora2 发布之前的，在我被另一个项目的 bug 硬控到柳暗花明又一柳暗花明的时候 Sora2 发布了，当我放弃了那个项目之后我才开始制作这个东西
简单地说，这个东西就是让你填入 CloseAI 格式的 API，然后得到一个 伪・文 章 平 台
由 AI 生成文章推送，点击文章之后会由 AI 生成文章内容，等文章内容生成完毕之后生成评论，当你下一次点击刷新按钮的时候，AI 会先根据你看没看过的文章、点不点赞文章评论来分析，修改你的偏好列表，这个偏好列表会应用到全部请求
我觉得效果不算好，可能是模型的原因，也可能是提示词的原因，不过你可以改系统提示词，只要 AI 输出一样，如果可以的话，有没有大佬贡献一个更好的提示词
界面用了 Fluent UI React Component，好看吧，这是 WebTooys (Quicktools) 第一次上需要构建的项目，祖宗之法可变！后面还会有别的
开发历程
按照惯例，讲一讲开发历程吧，分享一下开发过程中的一些事情
久久久
开发这玩意用了我两个多月，靠着每周单休去写的，期间还有几次游戏更新，再加上每周各种各样的事，少的一周就写了大概半小时……
砍砍砍
一开始构想的时候，我想这是一个虚假的社交网络平台，分成三个分区：
- 现在你看到的文章分区
- 类似于推特的帖文分区
- 类似于小红书的图文分区
而且一开始我的构想还有个用 AI 给内容生成图片的环节，这些我都懒得搞了
本来想要在模型配置里面做一个全局模型，然没每个模型配置可以选择是否使用全局模型，配置的时候会省事一点，但是开发起来略微有点复杂我懒得搞
bun
开始做之前刷到了 bun 这个玩意，感觉有点意思，那这次就用 bun 写一下吧
感觉比 vite 省事了一点点，但不多，不过我主管觉得它打包速度挺快的
当然，我这里没有用到后端，下次玩玩 bun 的哪些后端 api
提示词的引用方式
写了一堆提示词，一开始我用 md 文件存起来然后尝试用 require 引入这些文件的
但是 bun 在开发服务器里面得到的是_bun/xxx 这样子的字符串，没把它当成文本，它也不支持 require('xxx?raw')(直接报错)，这至少对我调试很不利
我放弃了，于是创建了一个文件
export default {
"zh-CN": {
title: `...`,
//...
},
"en": {
//...
}
};
直接解决，但是太不优雅了
没过多久，AppStore 代码泄露，我在 tg 找到了源码观摩观摩，用的是 Svelte，呃…… 我没玩过……
但是我发现有一点！我想要打开 svg 文件看看，结果预览不了，切换到文本查看我就恍然大悟了
export default "data:image/svg+xml,%3csvg%20viewBox='0%200%2070.76...ntColor'%3e%3c/path%3e%3c/svg%3e" 你给我干哪来了？这还是 svg 吗
于是我就修改了一下，一个 ts 文件一个提示词，每个文件都是 module.export.default = ...
我可不会干这种在 md 文件写 js 的神秘事情
i18n
我想，这次玩一下语言切换吧，使用 react-i18n
可是我在编辑器没有提示没有预览有点难受，然后我找到了 i18n-ally这个 VSCode 插件，挺好用的
最后用 AI 把 zh-CN.json 翻译成了 en.json
但是在写的过程中，其实很多地方都用了三目运算符去处理，尤其是拼接用户提示词的时候
那我为什么不都用三目运算符呢，反正是 react 处理起来也省事
state 深度
我 React 写的不多，就犯了一个错误：一个组件的 state 更改之后用了 useEffect 把 state 同步到另一个组件的 state，这样就触发了 state 深度限制，React 直接崩掉
Markdown 方案更改
一开始写 Markdown 显示的部分我是用了我之前写的一个水项目
但是这个玩意似乎不够好，想了想算了，换了一个方案，支持更丰富的 Markdown 语法，让 AI 更能够发挥富文本能力，那就是 ——GFM (GitHub Flavored Markdown)
import 'github-markdown-css/github-markdown.css';
//... <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[[rehypeKatex, { throwOnError: false }]]}
components={components}
>但是这个背景色和文本颜色不符，其实很简单就能解决：{backgroundColor: 'transparent',color: 'inherit',}
顺手还加上了 Katex 和 react-syntax-highlighter(vscDarkPlus 主题)
九分甚至有十分完善地显示了 Markdown
CVE
就在我做着做着，突然！ 和 两个 10 级的漏洞掉了下来
但其实我这个纯前端项目应该不受什么影响的～～，再怎么样顶多让 Vercel 抗一下～～，但我还是升级了，安心一点
闭包
一直以来闭包相关的事情我都是凭直觉写的，顶多怀疑一下也不会出什么错，但是写 React 就得注意一下，这个 State 跟我的直觉不太一样，得稍加注意一下
这次我偷偷利用了一下闭包，拿没刷新的闭包旧值和用 useEffectEvent 拿到的新值进行比较
结果因为太快了组件没刷新有的情况下 useEffectEvent 拿到的也是旧值
部署 cf pages
cf 更新了新的 ui，点击创建一看就不一样了
我直接点击了 Continue with Github，一路过去，失败了，提示构建失败
欸？我这样一不用构建啊怎么就失败了
我回来这个界面看了一下” 创建 Worker“？，左边怎么就只有 Worker 没有 Pages 这选项啊
再看看右边” 选择一种方法 “？这啥？
说实话这个界面挺好看的，但是我看了半天我才看到面板下面有一个小小的 "Looking to deploy Pages? Get started"
我寻思着这上一个界面叫 Workers 和 Pages，这两玩意算是同级了吧，怎么 Pages 按钮塞这么小，欺负我眼瞎？
点了一下，马上回到了旧 ui，体验有点割裂
不过也是顺利创建了 CF Pages 版本的部署
我的有点大，你要忍一下
其实有 CF Pages 在我完全不用担心带宽问题
Netlify 和 Vercel 各 100GB 也不用担心好吧大哥
其实根本没那么多人访问这个破站
但是我想出了一个馊主意 ——jsDeliver
这服务好哇，能狗直接拿 Github 上面的文件使用 cdn 引入
简单改一下就是 index_jd.html 和 index_jdm.html 了
何意味
尾声
不知道说什么，希望大家多多支持，我后面还会写的
不知不觉怎么写了怎么多字啊