2026-08-01 20:56:52

润了 ​

如题 😄 嘿嘿，7月底从 美团 离职了。

下一步 ​

前端基本已经不需要古法手搓了，准备转 Agent 方向研究了！

顺便搞点 Agent/AI 相关项目练练手。

家人们有合适的机会也可以推一推。🫶

之前都在干什么 ​

• 2025.01 - 2026.07：SSR 周边（网关/DevOps），Agent 初步落地 DevOps
• 2023.11 - 2024.12：低代码 B/C
• 2022.11 - 2023.10：大前端 DevOps
• 2021.07 - 2022.11：业务产品：开店宝，前端研发框架：Rome

2026-07-29 17:55:45

VitePress 产品卡片展示插件介绍 ​

笔者维护的 VitePress 博客主题 中包含一个「作品/产品卡片」的能力，可以在 markdown 里通过简单的 ::: card 容器语法快速展示项目。为便于在主题之外复用，将其抽离为独立插件 vitepress-plugin-product-card。

如何使用 ​

3 步接入：

1. 安装

pnpm add vitepress-plugin-product-card

2. 在 .vitepress/config.ts 中注册 markdown 容器插件

import { defineConfig } from 'vitepress'
import { productCardMarkdownPlugin } from 'vitepress-plugin-product-card'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(productCardMarkdownPlugin, {
        showCreated: true, // 默认 true
        showUpdated: true // 默认 true
      })
    }
  }
})

3. 在 .vitepress/theme/index.ts 中注册 Vue 组件

import DefaultTheme from 'vitepress/theme'
import { registerProductCard } from 'vitepress-plugin-product-card/client'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    registerProductCard(app)
  }
}

在 Markdown 中使用 ​

::: card 我的产品
- title: sugar-blog
  desc: 简约风的 VitePress 博客主题
  icon: 📝
  iconColor: '#42b883'
  link: https://theme.sugarat.top
  github: https://github.com/ATQQ/sugar-blog
  tags: [VitePress, Vue3, TypeScript]
----
- title: 另一个项目
  desc: 单卡覆盖全局默认
  github: https://github.com/some/repo
  showCreated: false
:::

• 顶部标题（::: card 我的产品）可选，不写则不渲染分组标题
• 多张卡片之间使用 ---- 分隔
• 每张卡片以 - title: xxx 开头

支持的字段 ​

插件参数 ​

在 @sugarat/theme 中使用 ​

主题内置该插件，直接在文章里用 ::: card 即可。

2026-07-28 17:00:25

个人作品 ​

为我造过的轮子与写过的项目,书写传记

个人精力有限,感兴趣有能力的朋友可以帮忙迭代维护

目录 ​

• Kite：把构建留在本地，把部署丢给 Kite
• VitePress 产品卡片插件介绍
• 开发一个美观的 VitePress 图片预览插件
• 用Trae做了个公众号小工具
• 用AI做了个图片上传/下发应用
• VitePress 的公告插件开发实记
• 使用Pagefind为VitePress文档添加离线全文搜索能力
• 一个简约风的vitepress博客主题
• 组装个支持记笔记的CodePen
• ESCheck工具原理解析及增强实现
• 一款检测代码中TODO的eslint插件
• 实现一个Web UI检测(视觉走查)工具ing
• 从0-1实现文件下载CLI工具
• 内联JS处理(ES语法降级&内容压缩)
• Node CLI工具原理解析
• 我打造的在线简历生成应用
• 助你轻松编写与分享snippet的VsCode插件
• SourceMap解析CLI工具实现
• 一个通过NPM包共(分)享代码块的解决方案

2026-06-14 19:00:00

分享一下最近 VibeCoding 的项目部署工具：Kite ​

前言 ​

我服务器上有几十个 Web 站点，因为服务器配置较低，都是在本地完成构建后通过 scp 推到服务器，每个项目里就维护了一个 shell 脚本。

大概下面这样：(zx 脚本)

await $`scp ${compressPkgName} ${user}@${fullOrigin}:./`

await $`ssh -p22 ${user}@${fullOrigin} "tar -xf ${compressPkgName} -C ${destDir}"`

这个样子持续了差不多好多年，但始终感觉不优雅，最近刚好 AI 够强，就把一直想实现的一个部署的 CLI 实现了。

服务器只管收 + 解压 + 重启（如果带后端服务）。

于是有了 Kite —— 装一个 CLI 就能跑起 Web 管理端 + Server 后端 + 一键上传。

快速开始 ​

npm install -g @kitecd/cli
kite serve

启动后浏览器打开 http://127.0.0.1:5431 就是管理后台。

Starting Kite Server...
  Runtime: bun v1.3.12
  Host: 127.0.0.1
  Port: 5431
  Web Dir: /Users/sugar/Documents/fe/Kite/packages/cli/dist/web
  DB Dir: /Users/sugar/.kite
  Admin Token: admin_fb3635137

🦊 Server is running on bun at http://127.0.0.1:5431
🔑 Login Token: admin_fb3635137

线上部署可以通过 pm2,使用 NG 反向代理站点。

kite serve --pm2

新建项目 ​

只需要录入项目名和部署目即可

部署 ​

项目概览页提供了部署的指令复制即可。

本地项目里执行初始化指令，生成 kite.config.json。

kite init --project proj_669571accfa5 --out ./dist --server http://127.0.0.1:5431 --token kt_a6029f276c354caca86b65960804d22c

{
  "projectId": "proj_669571accfa5",
  "serverUrl": "http://127.0.0.1:5431",
  "outputDir": "./dist",
  "files": [
    "**/*"
  ]
}

部署，执行 kite push 即可。

kite push 会自动完成：合并配置 → 打包 outputDir → 上传到 Server → 依次执行 preDeploy / 解压 / postDeploy。

kite push

多环境支持 ​

如果一个项目需要推到多个服务器或者不同项目目录。

会自动扫描符合 kite.config.xx.json 的配置。 kite push --env xx 即可，或者交互式选择。

使用的技术栈 ​

• 前端：Vue 3 + Vite + Pinia + Vue Router
• 后端：Bun / Node + Elysia + libSQL(Drizzle ORM)
• CLI: cac + ora + chalk

GPT + MiMo 一起写出来的 ​

MiMo 完成了大概 80% 的代码，15% 是 GPT。

这个CLI服务端 支持 Bun 和 Node两个运行时，部分适配靠 GPT 搞定

流程：先使用 plan 模式把需求和实现的核心功能确定下来。

然后拆好 step ，让它挨着执行，然后配合给到的测试用例，验收一下。

然后就是 case by case 的修复问题。

最后 ​

• 仓库：https://github.com/ATQQ/Kite
• 文档：https://docs.kite.sugarat.top/

下一个 VibeCoding 的新坑也开好了，猛猛的蹬。

欢迎评论区交流 & 拍砖。

2026-05-06 17:04:53

分享一下笔者的 Mac 装机必备软件 ​

碎碎念...

本周上班干活的时候，笔记本屏幕直接黑了 GG。最开始我还以为是没电了，结果插上电，重启大法试了一下，屏幕也就只会亮1s。

不过外接显示器能正常用，庆幸核心没搞坏，那 8 成是屏幕相关的问题了，就拿去维修（2周左右要），换了一台旧电脑临时用一下。（公司电脑 💻 (#^.^#)）

又得从头来一遍"装机"，趁此机会搞个清单，下次就不用对着旧电脑搞了。

看合集直接划到最后😋

装机必备 ​

1. Itsycal ​

状态栏 日历/时间 小组件。平时排期就拿这个看时间。

还有复古的整点报时。

2. Bartender ​

状态栏图标管理工具。

Mac 软件装多了，顶部状态栏里 各种杂七杂八的软件图标，有些不会用到，但占用着很烦。

用这个能方便的管理哪些展示哪些不展示。

都给我去装上 (^▽^)！

3. Snipaste ​

简单但强大的截图工具，用了都说好!

支持剪贴板内容转图，截图钉在屏幕上，截图历史回溯，这几个我最常用的功能，。

4. Alfred ​

比较老牌的一个聚合工具平台。

笔者主要就用它内置的 剪贴板 功能，足够简洁，切性能比试用过的其它的专门的剪贴板软件要好。

5. Arc ​

Arc 浏览器，用习惯了非常方便，支持多端数据同步（不支持插件），支持多身份的设计。竖向的标签排列。

只可惜主创团队，现在不更新功能了，只更新 Chrome 内核版本，转向 Dia 的 AI 浏览器了

不过同事推荐说公司出的这个 AI浏览器也挺好用 Tabbit 浏览器，感兴趣的可以试试

6. BetterDisplay ​

调节显示器亮度，分辨率等非常方便。

7. Tencent Lemon ​

日常拿来清理一下垃圾。不然过几天 500G 的盘又满了。

办公搭子 ​

1. BongoCat ​

”可爱互动的桌面宠物应用“，基于 Tauri 制作，支持三端！

鼠标和键盘的动作，猫猫都会同步。

赶紧装上，敲键盘又多了一点乐趣

2. HealthTick ​

久坐提醒工具。

3. Shui ​

全屏展示的提醒喝水的软件！。

上班安排起来，给尿喝清亮！

4. drawio ​

画图神器，工作中拿来画流程图架构图必备。

5. Kap ​

录屏软件，支持导出多种常用格式，支持基础的编辑。

使用起来非常方便，软件也是开源github:kap的。

6. Easydict ​

聚合翻译软件，速度也快，支持快捷唤起。

开发相关 ​

0. Homebrew ​

Mac，必备，安装软件和各种终端工具。

使用知乎大佬提供的一键安装脚本。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

推荐选 Gitee 和 阿里的源。

1. Warp ​

强大又美观的终端工具，内置 AI 能力集成！

相较于传统的终端工具，其更加智能，编辑指令也非常方便。

2. Kiro CLI ​

笔者主要用这个终端输入提示的功能。

这个功能最早是在 Fig 里，后来被亚马逊收购了。

3. EasyDevo ​

Mac垃圾清理 & 系统监控软件，开发者友好。

系统监控	node_modules 清理	项目统计

4. uTools ​

聚合工具平台，笔者主要装了一些开发相关的插件。

5. Whistle Client ​

代理调试抓包工具！

6. IDE ​

笔者就常用 TRAE 和 Cursor，自打AI大爆发以来，VS Code 直接不装了。

终端指令 ​

1. fnm ​

Node 版本管理工具！

2. zoxide ​

快速切换目录的工具！

3. yrm ​

npm 镜像源管理。

yrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npmmirror.com/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  yarn --- https://registry.yarnpkg.com

4. ni ​

npm i -g @antfu/ni

常用的 ni 装依赖，nr 运行 npm 指令。

5. killport ​

使用 killport 可以一步到位，直接杀死占用端口的进程

其它推荐 ​

1. Marta ​

文件管理软件，可以拿来替代系统默认的 Finder。支持双栏展示，移动和整理文件的时候也比较方便。

2. LocalSend ​

多设备之间相互传输文件。足够简单且好用。

汇总 ​

2026-04-18 15:50:17

🚀 VitePress 插件开发计划 ​

前言 ​

主题在近几年集成了非常的多功能了，如 通知消息，公告，评论，图片预览，阅读时间分析 等等基础功能，有许多的用户反馈说能不能把这些能力独立成插件，以便于集成进现有的文档站中。

当然我自己也一直有这个想法，于是便有了这个文章来记录一下这个过程，同时抛出&探讨一些问题。

现有的一些问题 ​

1. 生态缺少一个官方维护的 awesome-vitepress 来聚合 VitePress 相关的周边。
2. VitePress 本身并不提供插件机制去拓展各个部分，提供的是一套主题方案（重写布局+通用插槽），编写插件需按 Vite 的插件机制去实现。
3. 主题有部分功能 和 element-ui 绑定在一起，拆分的时候部分需要考虑再手写一遍。

计划 ✅ ​

3 步走：

1. 摸索出 VitePress 在 Vite 的插件机制下提供的上下文，看看哪些口子可以用来做拓展。
2. 以全局公告/文章评论/图片预览3个场景的插件的开发入手，整理出较通用的 VitePress 插件开发实践方案。
3. 逐步拆分博客主题中的通用能力为独立插件。

通用插件开发方案 ​

插件开发模板：vitepress-plugin-slot-inject-template：适用基于默认 Layout 拓展的场景

原理见：插件模板介绍

已拆分插件 ​

vitepress-plugin-pagefind ​

• 基于 pagefind 提供离线化的全文搜索功能。

vitepress-plugin-rss ​

• 基于 feed 提供 RSS 订阅链接生成功能。

vitepress-plugin-51la ​

• 提供一键接入 51.LA 网站数据统计分析的功能。

vitepress-plugin-announcement ​

• 提供全局公告窗口。

vitepress-plugin-giscus ​

• 基于 giscus 提供文章评论功能。

vitepress-plugin-image-preview ​

VitePress 图片预览插件，样式参考 Element Plus Image Viewer。

vitepress-plugin-artalk ​

• 基于 Artalk 提供文章评论功能。

vitepress-plugin-back-to-top ​

• 提供回到顶部按钮功能。

规划中的插件 ​

• 标签页
• 文章时间轴
• 代码块折叠
• OhMyLive2D
• 文章底部投币
• 短链
• 文章右下二维码分享
• ...

最后 ​

如果读者有其它建议或者想法可以私信或评论区交流。