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

发表于 2026-03-15 23:02 更新于 2026-03-16 01:17 2552 字 13 min read

cos avatar

cos

FE / ACG / 手工 / 深色模式强迫症 / INFP / 兴趣广泛养两只猫的老宅女 / remote

FE Bits Vol.28 | 爱酱的诞生、Vite 8.0 正式发布、Astro 6.0 上线FE Bits Vol.27 | Oxfmt Beta 发布,Chromium「CSS 漏洞」实为 UAFFE Bits Vol.26 | Gatsby 支持 React 19,Rspress 2.0 发布FE Bits Vol.25 | Yarn 6 将用 Rust 重写,CSS Grid Lanes 进展FE Bits Vol.24 | Rolldown 1.0 RC、Anime.js v4.3 自动布局与 Chrome 145 100vw 滚动条感知FE Bits Vol.23 | jQuery 4 发布,Chrome 新增垂直标签页功能,Astro 被 Cloudflare 收购FE Bits Vol.22 | CSS @scope 全面可用,ViteLand 12 月回顾FE Bits Vol.21 | 博客圣诞特效与 Moe Copy 更新,AntV 推出 InfographicFE Bits Vol.20 | 博客更新与 FEDAY 见闻,Shadcn Create 发布FE Bits Vol.19|站点新功能与 React 披露两个新的 RSC 漏洞FE Bits Vol.17|WebGPU 主流浏览器全支持,AntD 6 正式发布FE Bits Vol.16|Cloudflare 事故报告出炉,CSSWG 确认 Masonry 布局语法 grid-lanesFE Bits Vol.15|Chrome 宽高动画重排优化,Node Type Stripping 稳定FE Bits Vol.14|Chrome 支持左右分屏、npm 强制 2FA、Rspack 1.6FE Bits Vol.13|TypeScript 首次成为 GitHub 最常用语言、VoidZero A 轮融资 1250 万美元FE Bits Vol.12|Next.js 16 发布、Docusaurus 3.9 AI 搜索、ChatGPT Atlas 发布FE Bits Vol.11|React Native 0.82 新架构落地、Bun 1.3 全栈运行时FE Bits Vol.10|React Compiler v1.0 发布、React 成立基金会,Vite 纪录片与 Vite+ 上线FE Bits Vol.9|Chrome DevTools 推出 MCP,Nuxt UI Pro 开源免费FE Bits Vol.8|PyCon 之行、Cloudflare 大 Bug 与 NPM 沙虫警报FE Bits Vol.7|chalk 和 debug 等 npm 包安全警告;Remotion 赞助 MediabunnyFE Bits Vol.6|变与不变,Chrome 17 周年与 CSS Mixins 草案FE Bits Vol.5|Nx 包被投毒、ESLint 多线程 Linting 和 Firefox 实验性 PWAFE Bits Vol.4|Next 15.5、RN 0.81、几个顺手工具FE Bits Vol.3|CSS attr() 类型化进化,PostCSS 复盘 12 年FE Bits Vol.2|V8 提速 JSON.stringify 2x,Vite 周下载首超 WebpackFE Bits Vol.1|Hello World、TanStack DB 首个 Beta 版发布
本期周刊聚焦前端工具链重大更新:Vite 8.0 采用 Rust 编写的 Rolldown 替代 esbuild,构建速度提升 10-30 倍;Astro 6.0 带来重构开发服务器与实时内容集合;尤雨溪官宣专为 Vite 打造的 Void 原生部署平台。文章精选涵盖 Popover API 实践、十亿行数据虚拟滚动技术、纯 CSS 里程表动画及 Sanitizer API 安全替代方案。CSS 新特性关注 border-shape 几何盒模型。个人动态分享了自制 AI Bot 的趣事与季度番剧推荐。
关于本周刊

本期网址 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_memoriesget_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_rssmark_rss_read 让我成了专属情报官,每天准时推送感兴趣的圈子动态。

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

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

本季度番剧推荐

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

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

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

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

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

也不知道能看几个(

38 米米解锁节

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

n8n 周刊制作流程

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

工作流一:Telegram 实时收集器

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

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

工作流二:S3 Upload Service(子工作流)

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

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

工作流三:周刊生成器

每周日凌晨 12 点定时触发(也支持手动),这个是重头戏:

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

文章

CSS 新特性

工具

喜欢的话,留下你的评论吧~