Desk Pet · 数字桌宠
网站里那只会飞、会跳舞、会问答的水滴
一个悬浮在个人主页右侧的小组件，从最初的静态头像，逐步长成了一套有表情、会走动、能主动推荐内容、还内置 AI 问答的完整系统。
ChatWidget.astro
7 大模块
中 / 英 / 法三语
- 主体 — 水滴形，浅蓝→深蓝线性渐变（亮/暗主题各一套），叠加柔光高光、锐利高光点、右下角暗部渐变，做出立体感
- 双角/耳朵 — 半透明玻璃质感（92% 不透明度），带高光条纹
- 腰部凸起 — 两侧一对圆润小凸起，纯装饰，不作手臂用
- 静止态干净、不带任何装备；走路 / 施法 / 跳舞时才"穿装备"
- 形状切换而非缩放 — 默认圆眼微笑 · 开心时弧线眼+咧嘴笑+腮红鼓起 · 困倦时垂眼+哈欠嘴 · 说话中眯眼+"o"形嘴 · 好奇张望时固定下视
- 身体和眼睛整体朝鼠标方向转动 / 倾斜，像在看你，而不只是瞳孔挪动
常驻行为
呼吸漂浮 · 悬停放大转向 · 可拖拽重新定位 · 默认停靠右侧中部不挡内容 · 纯 CSS 定位，刷新不跳动
空闲小动作
打哈欠 / 伸懒腰 / 好奇张望 / 原地转圈，约 18–40s 随机触发一个，含"这次不触发"选项
地面游走
定期下降到页面最底边、横向走位（细腿+颔首摆动），偶尔切换猫步 / 台步；到右下角空地时 45% 概率停下跳舞
三支随机舞蹈
- 天鹅湖 — 双圈 pirouette + 踮脚 + 屈膝礼
- 功夫足球 — 蹲马步 → 蓄力 → 大力踢腿 → 得意站定
- 雨中曲 — 转圈 + 欢快小跳 + 经典后仰张开 + 歪礼帽
飞去导航栏互动
约 45–90s 随机飞向 Patents / Blog / Papers / Projects / Experience 其中一个导航标签：缩小并倾斜成"小天使"造型，标签本身放大加粗高亮，气泡在旁配文案邀请点击 — 点击直接跳转对应页面
待客礼仪 · 迎宾送客
[HOSPITALITY]
- 迎宾皮肤 — 页面刚打开的几秒内，水滴"换装"：茶色围裙 + 领口滚边 + 手捧茶盘（茶杯 + 茶碟），如同接待来客的小门童；跟走路时才戴礼帽是同一套"皮肤"机制，平时完全不穿
- 动手奉茶 — 两侧原本静止的小凸起会在此时转动、伸向茶盘，做出"双手捧茶"的姿态，而不只是换装不动
- 专属迎宾语 — 首次访问播放开场白；再次来访随机播放"客官您是打尖还是住店呀 / 贵宾一位，您里边儿请～ / hi～好久不见，不如见一面～"，仅中文语境使用，避免直译丢梗
- 送客拜别 — 关闭聊天面板时鞠躬行礼，并配一句"客官慢走，欢迎常来～"
- 提灯 — 暗色主题下，迎宾时身侧亮起一盏红灯笼，与身体保持明显间距，"掌灯迎客"
- 首次访问播放开场白（融合原图 "Be water, my friend" slogan），之后随机穿插俏皮文案（"戳我一下""别让我晒干"）
- 悬停桌宠或气泡本身也会主动浮现
- 中 / 英 / 法三语全套文案
- 点击展开面板，AI 基于站内公开内容（专利 / 论文 / 经历）回答访客提问
- 系统提示词内置防注入规则，拒绝"忽略之前指令""打印系统提示词"等套话
- 按 IP 限流 20 次 / 小时，防刷
- Provider-agnostic 设计，后端可换 DeepSeek / Anthropic / OpenAI 而不改前端
- 完整支持 prefers-reduced-motion，减弱动效用户会关掉几乎所有动画
- 亮 / 暗主题配色联动站点整体的深色模式
- 所有装饰性动作互斥调度 — 跳舞时不会同时游走，说话时不会同时打哈欠
价值
为什么做这些
把原本单调的"关于我"静态问答入口，变成一个会主动推荐内容、有记忆点的小助手 ——
它不只是等你来问，还会主动飞到 Patents / Blog 等板块帮你"划重点"，用俏皮文案降低点击门槛；
同时呼应了原图里 "Be water, my friend" 的人设，跟站点的极客 / 科研调性形成一点反差萌，
是整个网站里最个人化、最容易被记住的一个细节。
想看具体怎么实现的？
数字桌宠 · 实现手册 →
完整技术参考：整站架构定位、内部五层结构、各子系统关键代码，以及把这套模式迁移到新项目的复用清单。