[{"data":1,"prerenderedAt":238},["ShallowReactive",2],{"works":3,"work-\u002Fproject\u002Fniwa":156,"works-reading":234},[4,28,45,62,78,96,112,128,144],{"path":5,"title":6,"short":7,"description":8,"cover":9,"date":10,"source":11,"author":11,"authorShort":11,"origin":12,"stack":13,"tags":19,"link":24,"repo":11,"team":25,"type":26,"no":27},"\u002Fproject\u002Fmaintpilot","MaintPilot：设备检修 AI 诊断系统","MaintPilot","设备检修的 AI 诊断系统，答案能追溯到手册页码。以维修手册和故障案例为知识源，从一句故障描述走到一张能执行的作业单。","\u002Fimages\u002Fcovers\u002Fmaintpilot.webp","2026-05-22",null,"original",[14,15,16,17,18],"Vue 3","Go","Python","PostgreSQL","pgvector",[20,21,22,23],"项目","RAG","多 Agent","全栈","https:\u002F\u002Fmaintpilot.lzwcc.xyz\u002Fwelcome","两人合作：我负责前端和部署，同学负责后端和 AI 服务","project","P01",{"path":29,"title":30,"short":31,"description":32,"cover":33,"date":34,"source":35,"author":36,"authorShort":11,"origin":37,"stack":38,"tags":40,"type":43,"no":44},"\u002Fui\u002Fpaper-scroll","纸张滚动效果","纸张滚动","文字在纸上流动，纸张的边缘与阴影保持原位。","\u002Fimages\u002Fcovers\u002Fpaper.webp","2026-10-05","https:\u002F\u002Fseg6.space\u002F","seg6.space","recreation",[39],"css",[41,42],"滚动","纸张","ui","001",{"path":46,"title":47,"short":48,"description":49,"cover":50,"date":51,"source":52,"author":53,"authorShort":11,"origin":37,"stack":54,"tags":56,"type":60,"no":61},"\u002Fanimation\u002Fdither-ripple-avatar","抖动像素波纹头像","像素波纹头像","指针划过时像素被推开再弹回，点击激起向外扩散的波环。每个像素都是一个带弹簧的粒子。","\u002Fimages\u002Fcovers\u002Favatar.webp","2026-10-08","https:\u002F\u002Fadixcode.com\u002F","adixcode.com",[55],"canvas",[57,58,59],"头像","粒子","指针交互","animation","002",{"path":63,"title":64,"short":65,"description":66,"cover":67,"date":68,"source":69,"author":70,"authorShort":71,"origin":37,"stack":72,"tags":73,"type":60,"no":77},"\u002Fanimation\u002Fclaude-micro-interactions","Claude 风格的文字显现与输入框交互","Claude 风格微交互","逐字模糊消解、输入框的悬浮边框，以及聚焦时的双环反馈。","\u002Fimages\u002Fcovers\u002Fclaude.webp","2026-10-14","https:\u002F\u002Fclaude-storybook.bystanderss.chatgpt.site\u002F","Claude Design System Storybook","Claude Storybook",[39],[74,75,76],"文字动画","输入框","聚焦状态","003",{"path":79,"title":80,"short":81,"description":82,"cover":83,"date":84,"source":11,"author":11,"authorShort":11,"origin":12,"stack":85,"tags":90,"link":93,"repo":94,"team":11,"type":26,"no":95},"\u002Fproject\u002Fniwa","Niwa：一方安静的新标签页","Niwa","我给自己写的浏览器新标签页扩展：随节气和时辰变化的山水，快捷方式和小组件自由摆放。没有服务器，数据只存在自己的浏览器里。已上架 Edge 扩展商店，MIT 开源。","\u002Fimages\u002Fcovers\u002Fniwa.webp","2026-10-19",[86,87,88,89],"WXT","React","TypeScript","Remotion",[20,91,92],"浏览器扩展","开源","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fniwa\u002Faonnmkpdcdkcfhcionbpmigmfbjcmnec","https:\u002F\u002Fgithub.com\u002FLZWcc\u002FNiwa","P02",{"path":97,"title":98,"short":99,"description":100,"cover":101,"date":102,"source":11,"author":11,"authorShort":11,"origin":12,"stack":103,"tags":107,"link":11,"repo":110,"team":11,"type":26,"no":111},"\u002Fproject\u002Ftoken-stats","token-stats：汇总几台机器的 AI 编程用量","token-stats","统计我在几台机器上用了多少 Claude Code 和 Codex 的 token，画成 GitHub 主页上的卡片。服务器上什么都不用装，只依赖 Python 标准库。","\u002Fimages\u002Fcovers\u002Ftoken-stats.webp","2026-10-23",[16,104,105,106],"SQLite","SVG","GitHub Actions",[20,108,109,92],"命令行工具","数据可视化","https:\u002F\u002Fgithub.com\u002FLZWcc\u002Ftoken-stats","P03",{"path":113,"title":114,"short":11,"description":115,"cover":116,"date":117,"source":118,"author":119,"authorShort":120,"origin":37,"stack":121,"tags":122,"type":43,"no":127},"\u002Fui\u002Fgrain-gradient-cover","颗粒渐变封面","几团糊开的色块，上面撒一层 1px 的灰色颗粒。拆解 ElevenLabs 博客封面的做法，做成一个可以导出图片的生成器。","\u002Fimages\u002Fcovers\u002Fgrain.jpg","2026-10-24","https:\u002F\u002Fx.com\u002Fianneo_ai\u002Fstatus\u002F2113225499556381172","Ian (@ianneo_ai)","X @ianneo_ai",[55],[123,124,125,126],"渐变","噪点","封面","背景","004",{"path":129,"title":130,"short":11,"description":131,"cover":132,"date":133,"source":134,"author":135,"authorShort":11,"origin":37,"stack":136,"tags":138,"type":43,"no":143},"\u002Fui\u002Fshiro-header-nav","Shiro 的顶部导航","毛玻璃胶囊导航：鼠标经过时有一团光斑跟着走，切换选中项时图标和底部细线一起滑过去。复刻自 Innei 的博客主题 Shiro。","\u002Fimages\u002Fcovers\u002Fshiro.webp","2026-10-27","https:\u002F\u002Fgithub.com\u002FInnei\u002FShiro","Innei",[137],"motion-v",[139,140,141,142],"导航","共享布局动画","毛玻璃","光斑","005",{"path":145,"title":146,"short":11,"description":147,"cover":148,"date":149,"source":11,"author":11,"authorShort":11,"origin":12,"stack":150,"tags":151,"type":43,"no":155},"\u002Fui\u002Fseal-watermark-card","校徽水印卡","一列写学校的卡片，右半边铺一枚圆形校徽做水印，只露出校徽中间一条横带。来自我博客旧首页的「教育」卡片。","\u002Fimages\u002Fcovers\u002Fseal.webp","2026-10-29",[39],[152,153,154],"卡片","水印","校徽","006",{"id":157,"title":80,"author":11,"authorShort":11,"body":158,"cover":83,"date":84,"description":82,"extension":226,"icon":11,"link":93,"meta":227,"navigation":228,"origin":12,"path":79,"repo":94,"seo":229,"short":81,"source":11,"stack":230,"stem":231,"tags":232,"team":11,"__hash__":233},"project\u002Fproject\u002Fniwa.md",{"type":159,"value":160,"toc":219},"minimark",[161,165,168,175,179,182,185,188,191,194,202,205,208],[162,163,164],"p",{},"Niwa（庭）是我写的浏览器新标签页扩展，Edge 和 Chrome 都能用。",[162,166,167],{},"之前用的新标签页扩展一更新就被浏览器停用，每次都得手动重新打开；想在新标签页看课程表做不到，天气也换不成自己信得过的接口。于是自己写了一个。打开新标签页是一片随季节和时辰变化的山水，深色模式叫「夜庭」，月亮按当天真实的月相画。",[169,170],"project-shot",{":height":171,":width":172,"alt":173,"src":174},"900","1440","Niwa 的新标签页：时间和节气、搜索框，下面是天气、便签、日程、庭等小组件和网站快捷方式","\u002Fimages\u002Fprojects\u002Fniwa\u002Fhome.webp",[176,177,178],"h2",{"id":178},"它有什么",[162,180,181],{},"时间旁边写着今天的节气和七十二候，下面一行小字是这一候在元代吴澄《月令七十二候集解》里的原文。原文取自维基文库，繁体转简体时出错的几个字逐一校对过。",[162,183,184],{},"快捷方式和小组件放在同一张网格里，可以拖到任意位置、留空、竖着叠，快捷方式还能收进文件夹。拖动参照手机桌面：指针停稳了，别的格子才让位，划过去的格子不会动。小组件有 10 种：日程（订阅 iCal 地址，或者直接把课程表的 .ics 文件拖进去）、天气、便签、世界时钟、计时器、热榜、RSS、收藏夹、历史，还有一方小小的「庭」，你打开的天数越多，里面长出的石头、青苔、树和灯笼就越多。Codex 生成的宠物也能导入进来，浮在页面上。",[162,186,187],{},"它没有服务器，不收集、不上传任何数据。打开新标签页本身不联网，只有在你用到订阅日历、查天气这类功能时，才直接请求对应的网站；安装时不申请敏感权限，用到时再问。",[176,189,190],{"id":190},"宣传片",[162,192,193],{},"下面这段 21 秒的视频也是写代码做出来的：用 Remotion（用 React 写视频）把扩展的截图分层做成动画，庭那一段直接用了扩展里的组件。配乐是用代码合成的五声音阶，每个格子弹出、庭每长一次，都对着一个音。",[195,196],"project-video",{":height":197,":width":198,"label":199,"poster":200,"src":201},"720","1280","Niwa 宣传片：山水、七十二候、自由摆放的小组件、日落月升和会生长的庭","\u002Fvideos\u002Fniwa-poster.webp","\u002Fvideos\u002Fniwa.mp4",[176,203,204],{"id":204},"怎么做的",[162,206,207],{},"用 WXT、React 和 TypeScript 写，约 1.1 万行。拖放规则写成纯函数，单元测试用字母画出网格，每条都写明期望的摆放；页面测试用无头 Edge 跑真实的构建产物，21 组测试覆盖文件夹、备份恢复、日历导入、计时器等。",[162,209,210,211,218],{},"导入 Codex 宠物时，图片格式怎么处理、动画怎么省内存，以及每个标签页实测多占多少内存，写在博客里：",[212,213,217],"a",{"href":214,"rel":215},"https:\u002F\u002Flzwcc.xyz\u002Fblog\u002Fniwa-codex-pet\u002F",[216],"nofollow","把 Codex 宠物放进新标签页：格式、动画和内存实测","。",{"title":220,"searchDepth":221,"depth":221,"links":222},"",2,[223,224,225],{"id":178,"depth":221,"text":178},{"id":190,"depth":221,"text":190},{"id":204,"depth":221,"text":204},"md",{},true,{"title":80,"description":82},[86,87,88,89],"project\u002Fniwa",[20,91,92],"_WZ9ksgi9Vzq6sBfyNKlRxNLlAL3CpAmutUEATbaKgM",{"\u002Fui\u002Fcontent-routing":235,"\u002Fui\u002Fgrain-gradient-cover":221,"\u002Fui\u002Fpaper-scroll":235,"\u002Fui\u002Fseal-watermark-card":221,"\u002Fui\u002Fshiro-header-nav":221,"\u002Fanimation\u002Fclaude-micro-interactions":236,"\u002Fanimation\u002Fdither-ripple-avatar":235,"\u002Fproject\u002Fmaintpilot":237,"\u002Fproject\u002Fniwa":221,"\u002Fproject\u002Ftoken-stats":221},1,7,3,1793265917958]