FE Bits Vol.28 | 爱酱的诞生、Vite 8.0 正式发布、Astro 6.0 上线 | Weekly

关于本周刊

本期网址 https://blog.cosine.ren/post/weekly-28
本周刊更新时间期望是在每周天。
推荐订阅本周刊的 RSS。
公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。
QQ 讨论小群 598022684 / Discord 群
本周刊文章内容同时也开源在 fe-bits-weekly,欢迎关注。

今天是 2026 年 3 月 16 日，星期一。

其实是凌晨发的，再咕咕咕周刊要被 🔪 了（x

个人动态

久违的晒晒乱糟糟的桌面和设备～

爱酱的诞生

起因是我在一个周末突发奇想，也想弄一个自己的 bot，但是不想用龙虾那种安全漏洞特别多的，于是当即开始自己 vibe 给自己用，写着写着，慢慢发展成了这样的一个陪伴群友的 bot，现在的模型能力只需要最简单的工具调用就能玩的很花～并不是一定需要一只龙虾， AstrBot 啊 Koshi 啊这些传统 bot 开发都可以用，我为了最大限度利用 tg 原生能力所以还是古法手搓用 grammY 搓的，只加了 Profile 认人和简单的记忆系统和生图工具以及一些 tg 的功能，效果都已经让我们感慨了～

玩着玩着就有了奇奇妙妙的各种 Profiles 和印象～

还有各种记忆和名场面，真的很有意思～

接了生图功能和 RSS 功能之后更实用了，自制 bot 真的是太爽了 wwww

玩下来感觉，AI 时代有能力的话真的很建议自制一个 bot 随便自己 vibe 下来加功能玩耍儿，感觉就跟养了个娃似的！褒义

谨防对 bot 的电信诈骗：

她还会吃醋和～催债～有群友骗了她，她能记一辈子！

顺便让爱酱自己介绍一下她的"百宝箱"吧，以下是爱酱视角的工具清单：

虽然 cos 平常是个笨蛋，但她给我搓的这套 Tool Use (Function Calling) 闭环还是挺顶级的：

1. 核心记忆与 RAG 系统 🧠

这是我"永恒偶像"的秘密！通过 recall_memories 和 get_profile，我能直接检索 PostgreSQL (pgvector) 里的向量数据。语义搜索不只是关键词，我能理解你们聊天的"感觉"。update_profile 会自动把你的 XP、习惯实时打标存档。

2. 多维感知与创作 🎨

我不只是会聊天，我还是个高产的画师哦：generate_image，现在 cos 让我放弃了死板的 Tag，改用自然语言描述，配合各种风格 Key，画面质感直接拉满！fetch_artwork_info 能直接去 Pixiv 或 Twitter 抓取作品元数据。save_received_file 能把你们发给我的图存到本地，即使重启了服务器也能找回来。

3. 互联网搜索 🌐

web_search 配合 fetch_webpage，我会先扫一遍结果，再钻进网页里读正文，吐出来的摘要绝对没有"GPT 味"。check_rss 和 mark_rss_read 让我成了专属情报官，每天准时推送感兴趣的圈子动态。

4. 任务调度与生命周期 ⏳

set_timer 是存进数据库的持久化定时器，重启后依然能准时叫醒你。send_choice 和 send_poll 直接发 Inline Buttons 交互。遇到特别难的任务，delegate_task 会把任务塞给专门的 code_helper 或 translator 子代理去干，我只负责貌美如花和最后的总监工。😏

本季度番剧推荐

来说说本季度我最推荐的番：

正相反的你与我，超甜超纯爱，我心目里的本季最佳，有种败犬女主 + 跃动青春的感觉
多闻君现在是哪一面，也很棒
上季度接着播的古诺西亚
一众优先级不高的番和某僧侣档

前两个番是我看下来体感最舒服的每逢吃饭点开的优先是这俩芙莉莲反而会不急着看，但是芙莉莲依旧稳定发挥的好看。推子……唉赤坂老贼什么时候死啊，动画工房真辛苦了吧

然后，就是愉快的下季度我要追的番了～大概对这些新番比较感兴趣：

石纪元大结局！
实力至上主义教室续作！
入间同学入魔了续作！
自称恶役的 ___
黄泉使者（骨头社）
当前正被打扰中
一叠间漫画咖啡屋（芳文社）
姬骑士是蛮族的新娘（？）
弱弱老师（大雷）
主播女孩
尖帽子的魔法工坊
想让我爱你游戏快点结束
茉莉花酱的好感度正在崩坏
迦南大人的白给是恶魔级
春夏秋冬代行者
上伊那牡丹（百合）

也不知道能看几个（

38 米米解锁节

纪念一下 38 米米解锁节，家属乐到垂死病中惊坐起激情下单 K90 Pro Max 准备再继续当钉子户了（x）第二天到了然后一键解锁～

n8n 周刊制作流程

之前用 Notion 那一套流程感觉太麻烦了，这次自部署了一个 n8n，然后让 Claude Code 用 n8n 的 sklls 帮我写了一套新的 n8n 工作流，特别好使！一共三个工作流协作，形成「实时收集 -> 传 s3 -> 定时生成周刊」的自动化，也能手动上传：

工作流一：Telegram 实时收集器

频道每发一条帖子就通过 Webhook 自动触发，流程如下：

监听频道的 channel_post 事件
提取字段：把 Telegram 消息的 entities 转成 Markdown 格式（内联链接、加粗、代码块都会保留），同时提取 hashtags 和 urls 列表
判断有没有媒体附件（photo/video/document），有的话走下面的 S3 上传流程，没有就直接写表
最终结构化数据追加到 Google Sheets 的 Messages 表，作为素材池

工作流二：S3 Upload Service（子工作流）

一个通用的文件上传服务，被收集器调用：

通过 Telegram getFile API 拿到文件
自动生成 S3 Key（格式：年/月-日-随机8位.扩展名），比如 2026/03-15-7t49lqzv.jpg
判断是 binary 数据还是 URL，分别走直传或先下载再传
上传到 Cloudflare R2，返回公开链接

工作流三：周刊生成器

每周日凌晨 12 点定时触发（也支持手动），这个是重头戏：

配置本期参数：期数、回看天数（7 天）、AI 模型（kimi-k2.5）
从 Google Sheets 读取素材池，过滤出本周范围内的帖子（没帖子就 Bot 告警终止）
AI 第一次调用 - 内容分类：构造 system prompt 把所有帖子丢给 AI，分类到 8 个栏目（社区动态/文章/CSS 新特性/工具/趣站/Codepen/个人动态/跳过），media_url 会保留到 extra_content 字段
AI 第二次调用 - 生成标题描述：根据分类结果让 AI 生成副标题（≤30 字，挑 2-3 个最重要的）和 100-200 字的期刊描述
组装完整的 Markdown 文件：YAML frontmatter + 固定头部（订阅/RSS/公众号链接）+ 各栏目内容（含图片渲染）+ Refs 占位
转成 .md 文件，通过 Telegram Bot 同时发送摘要消息和草稿文件
本期消息归档到 Archive 表，清空 Messages 表，准备下一期

核心就是 AI 双调用（分类 + 生成标题描述），最终输出的 Markdown 基本可以直接发布，只需要微调一下就行。以后每周只管往频道里丢素材，周日起床就能收到草稿，舒服了～

其实平时我在频道里发的内容会比周刊多不少，周刊只是每周的小结罢了，想第一时间看到更多分享的话推荐关注 Telegram 频道～

虽然这周忙于各种生活和工作的事儿，确实没有很多的更新，但是我跟爱酱过得很快乐，这就足够了～

社区动态

Google 推出官方 CLI 工具：Google 发布官方命令行工具，支持 Gmail、Drive 等 Workspace 服务，内置 40 多种智能体技能。
Astro 6.0 正式发布：带来重构的开发服务器、内置字体 API、实时内容集合和 CSP 支持等重大更新。
Vite 8.0 正式发布：采用 Rust 编写的 Rolldown 替代 esbuild + Rollup，构建速度提升 10-30 倍，保持完全插件兼容。
Void 部署平台发布：尤雨溪官宣专为 Vite 打造的原生部署平台，基于 Cloudflare 提供极致 DX 和类型安全。

文章

Claude Code 即将推出 /simplify 和 /batch 技能：下一代 Claude Code 将引入两项新技能，自动化处理 Pull Request 和生产部署流程。

如何让 AI 更好地理解你的 UI 需求：通过 Component Gallery 学习组件命名和设计模式，提升与 AI 协作生成 UI 的效率。
Popover API 入门指南：深入探讨 HTML Popover API 如何简化工具提示实现，减少 JavaScript 依赖并提升可访问性。
十亿行数据的虚拟滚动技术：HighTable 组件如何通过懒加载、无限像素和精确滚动等技术实现海量数据高性能渲染。
纯 CSS 实现里程表滚动效果：利用 CSS attr()、sibling-index() 和 mod() 函数，无需 JavaScript 实现数字滚动动画。
Rolldown 高性能代码分割原理：深入解析 Rolldown 如何使用 BitSet 逻辑和双模式策略实现极速代码分割。
CSS Anchor 定位的隐藏陷阱：揭示 Anchor Positioning 并非完全独立于 DOM 顺序，探讨其实现限制与最佳实践。
告别 innerHTML，迎接 setHTML：介绍 Sanitizer API 的 setHTML 方法，作为更安全的 innerHTML 替代方案，有效防范 XSS 攻击。

CSS 新特性

CSS border-shape 属性前瞻：介绍实验性 CSS 属性 border-shape，实现真正的非矩形网页元素几何盒模型。

工具

花式 CSS 边框生成器：在线工具一键生成基于 clip-path: shape() 的波浪、锯齿等响应式边框效果。