[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"works":3,"work-\u002Fui\u002Fseal-watermark-card":156,"works-reading":327},[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":146,"author":11,"authorShort":11,"body":158,"cover":148,"date":149,"description":147,"extension":319,"icon":11,"meta":320,"navigation":321,"origin":12,"path":145,"seo":322,"short":11,"source":11,"stack":323,"stem":324,"tags":325,"__hash__":326},"ui\u002Fui\u002Fseal-watermark-card.md",{"type":159,"value":160,"toc":314},"minimark",[161,165,168,172,175,191,194,197,200,210,213],[162,163,164],"p",{},"把鼠标移到卡片上，边框会加深、出一层浅阴影，点击会打开学校官网。注意右半边：整枚校徽放大到盖满卡片右半边，只露出中间一条横带。",[166,167],"seal-watermark-card",{},[169,170,171],"h2",{"id":171},"做法",[162,173,174],{},"这是我博客旧首页「教育」一栏的卡片，原来放的是我自己学校的校徽，这里换成四所学校的做示例。卡片照博客主题 astro-pure 的 Card：浅灰底、1px 边框、16px 圆角，左边三行字，第一行 18px，下面两行是灰色的 16px，卡片之间隔 12px。",[162,176,177,178,182,183,186,187,190],{},"水印是一张 ",[179,180,181],"code",{},"\u003Cimg>","，绝对定位贴着卡片右边，宽度是卡片的 50%，高度等于卡片，",[179,184,185],{},"object-fit: cover","，不透明度 40%。校徽是正方形，cover 会把它等比放大到和框一样宽。卡片 576px 宽时，框是 287 × 104px，校徽放大到 287px 见方，只露出中间约 36% 的一条横带：外圈文字的左右两段和中间的图案。卡片设了 ",[179,188,189],{},"overflow: hidden","，校徽超出圆角的部分裁掉。校徽保留原来的颜色，乘上 40% 的不透明度后变成淡淡的一层，每张卡片的颜色跟着学校走。",[162,192,193],{},"深色模式下卡片换成深灰，校徽还是原来的颜色，看起来更暗、更淡；伯克利校徽里的书页和飘带是白色填充的，会比别处亮一些。开启「减少动态效果」时，悬停的过渡关掉，边框和阴影直接变。",[169,195,196],{"id":196},"提示词",[162,198,199],{},"复制下面的提示词，再把一枚圆形校徽的 SVG 作为附件一起发给 Claude、ChatGPT 或编码 agent，就能做出本页的卡片。",[201,202,208],"pre",{"className":203,"code":205,"language":206,"meta":207},[204],"language-text","做一列经历卡片（纯 HTML\u002FCSS，放进 Vue、React 组件都行）：每张卡片左边三行字，右半边铺一枚圆形校徽做水印。附件是一枚圆形校徽的 SVG，用它做水印。\n\n1. 卡片：position relative，display block，overflow hidden；padding 12px 20px；1px 边框 hsl(240 5.9% 88%)，圆角 16px，底色 hsl(240 4.8% 96%)。最大宽度 576px，多张卡片纵向排列，间距 12px。\n2. 文字：三行纵向排列，间距 2px。第一行 18px \u002F 28px，字重 500，颜色 hsl(240 10% 3.9%)；后两行 16px \u002F 24px，颜色 hsl(240 3.8% 28.1%)。文字容器设 position relative，压在水印上面。\n3. 水印：\u003Cimg src=\"校徽.svg\" alt=\"\">，写在文字前面。position absolute，top 0，right 0，width 50%，height 100%，margin 0，object-fit cover，opacity 0.4。正方形的校徽会等比放大到框的宽度，卡片又宽又扁，所以只露出校徽中间一条横带（576px 宽的卡片约露出 36%）。校徽保留原色。\n4. 卡片是链接时：transition all 150ms cubic-bezier(0.4, 0, 0.2, 1)；悬停时边框颜色变成文字色的 25%，加 box-shadow 0 1px 2px 0 rgb(0 0 0 \u002F 5%)。prefers-reduced-motion 时去掉过渡。\n5. 深色模式：卡片底色 hsl(240 5.9% 13%)，边框 hsl(240 3.7% 22.9%)，第一行 hsl(0 0% 98%)，后两行 hsl(240 5% 74.9%)。\n6. 容易出错的地方：\n   - 校徽 SVG 如果垫着一块白色底（比如铺在最下面的白色圆），删掉，让底透明，不然深色模式下是一块亮斑。\n   - 页面的全局样式会给 a、h3、p 加下划线和上下边距时，卡片里要显式清掉（text-decoration none、margin 0），否则卡片会被撑高，露出的就不再是一条横带。\n","text","",[179,209,205],{"__ignoreMap":207},[162,211,212],{},"本页用的四枚校徽，可以直接下载当附件。SVG 都来自 Wikimedia Commons，标注为公有领域，除清华外都注明是注册商标，这里只作示例。下载后删掉了注释、编辑器元数据和空白，路径没动；伯克利的去掉了垫在最下面的白色圆底。",[214,215,216,232],"table",{},[217,218,219],"thead",{},[220,221,222,226,229],"tr",{},[223,224,225],"th",{},"学校",[223,227,228],{},"本页用的 SVG",[223,230,231],{},"来源",[233,234,235,257,276,295],"tbody",{},[220,236,237,241,249],{},[238,239,240],"td",{},"北京大学",[238,242,243,248],{},[244,245,247],"a",{"href":246},"\u002Fimages\u002Fseals\u002Fpeking.svg","peking.svg","（34KB）",[238,250,251],{},[244,252,256],{"href":253,"rel":254},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Peking_University_seal.svg",[255],"nofollow","Peking University seal.svg",[220,258,259,262,269],{},[238,260,261],{},"清华大学",[238,263,264,268],{},[244,265,267],{"href":266},"\u002Fimages\u002Fseals\u002Ftsinghua.svg","tsinghua.svg","（422KB）",[238,270,271],{},[244,272,275],{"href":273,"rel":274},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Tsinghua_University_Logo.svg",[255],"Tsinghua University Logo.svg",[220,277,278,281,288],{},[238,279,280],{},"复旦大学",[238,282,283,287],{},[244,284,286],{"href":285},"\u002Fimages\u002Fseals\u002Ffudan.svg","fudan.svg","（18KB）",[238,289,290],{},[244,291,294],{"href":292,"rel":293},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Fudan_University_Logo.svg",[255],"Fudan University Logo.svg",[220,296,297,300,307],{},[238,298,299],{},"加州大学伯克利分校",[238,301,302,306],{},[244,303,305],{"href":304},"\u002Fimages\u002Fseals\u002Fberkeley.svg","berkeley.svg","（35KB）",[238,308,309],{},[244,310,313],{"href":311,"rel":312},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:The_University_of_California_Berkeley_1868.svg",[255],"The University of California Berkeley 1868.svg",{"title":207,"searchDepth":315,"depth":315,"links":316},2,[317,318],{"id":171,"depth":315,"text":171},{"id":196,"depth":315,"text":196},"md",{},true,{"title":146,"description":147},[39],"ui\u002Fseal-watermark-card",[152,153,154],"agP_9ouJNh9V9yBbasLQOsRyUZEjIx8VabAypC_mkfU",{"\u002Fui\u002Fcontent-routing":328,"\u002Fui\u002Fgrain-gradient-cover":315,"\u002Fui\u002Fpaper-scroll":328,"\u002Fui\u002Fseal-watermark-card":315,"\u002Fui\u002Fshiro-header-nav":315,"\u002Fanimation\u002Fclaude-micro-interactions":329,"\u002Fanimation\u002Fdither-ripple-avatar":328,"\u002Fproject\u002Fmaintpilot":330,"\u002Fproject\u002Fniwa":315,"\u002Fproject\u002Ftoken-stats":315},1,7,3,1793265917958]