Grokbot 做出可翻面毛玻璃资产监控屏

本文同步自 X Articles：原帖

为什么做

AI 订阅家底散在各家后台：主力模型还剩多少额度、哪张 API 快见底、哪台机器还活着。靠脑子记，迟早会漏。

我就跟 bot 说，做一块深色大屏，四区上墙，卡片是毛玻璃，点一下能翻面，正面看数、背面看详情。

演示数据。

演示数据。

你将得到什么

一份能扔进 AI 跟做的组件清单：四区骨架、毛玻璃卡样式要点、正反面字段怎么分、桌面翻面／窄屏改走底部抽屉的交互、一份脱敏 mock。

不动生产登录，也不碰采集密钥。

界面为重绘示意图，非真实截图。

怎么做

先定四块墙，别一上来堆特效。

01 主力模型——家里天天用的那几家订阅，比如 ChatGPT、DeepSeek，或带用量环的订阅位。

02 第三方 API——OpenRouter、RunningHub 这类按量用的接口。

03 VPS——机器是否在线、粗粒度状态。

04 其他订阅——即梦一类杂项。

同页还可以挂态势总览、服务健康、到期时间线。

卡片走玻璃拟态，别做成白底表格。半透明深蓝渐变底、细边、顶部一道内高光，四角再勾一小段括号线，整块就像嵌在大屏上的瓷片。

backdrop-filter 的模糊可以留给顶栏 tabs、底部抽屉、遮罩层；每张卡不必硬挂一层 blur，渐变半透明加上角括号，玻璃感已经够。背景再给一点网格或星云缓动，页面自己会呼吸。

正反面字段要锁死。

• 正面：标题、图标、主数字（环图、月费量级、余额量级、进度条）、一句短副标。
• 背面：头写「详细信息」，下面多行键值——套餐名、重置日、接口级说明、采集时间。

源码注释里那句还成立：front = key numbers, back = details。精确账单别写真数，mock 用整数量级或打码位。

翻面交互分两路。

• 桌面：点一下，或左右滑，走 rotateY 翻面；键盘 Enter／空格也能翻。
• 窄屏别硬翻 3D——matchMedia 判到小屏，改弹出底部 sheet，把背面内容摊开。

可翻的卡加一个 class，正面一块、背面一块，翻开时切显示；记得给焦点描边，别让键盘用户摸黑。

数据用本地 mock 就够。做一份假的 status.json，或直接把示意对象写进页面。字段对齐四区：模型用量、API 余额量级、VPS 在线、订阅到期。

页面可以每分钟刷一次显示；跟做阶段不必接真采集。线上那套是采集侧算完数字再推，钥匙不过海——你本地复现时，同样别把各家 API 钥匙写进页面文件。

把下面这段扔给 bot，一般就能出一页可点的静态演示（把示意名换成你自己的也行）：

前端（可内嵌 CSS/JS），要求：
1) 四区：01 主力模型、02 第三方 API、03 VPS、04 其他订阅
2) 卡片毛玻璃：半透明渐变底 + 细边 + 内高光 + 四角括号；tabs/sheet 可用 backdrop-filter
3) 至少一张可翻面卡：正面关键数字，背面「详细信息」+ KV；桌面 rotateY，窄屏改底部 sheet
4) 数据用 mock status.json 或内嵌对象；禁止真实密钥、完整公网 IP、真实账单
5) 键盘 Enter/空格可翻；完成标准：本地打开即见四区与至少一张可翻卡

演示数据，非真实截图。

坑与边界

窄屏硬上 3D 翻面，手指一划卡片就歪，内容还看不清。小屏走底部抽屉，桌面再翻，省心。

对比度比「假高级」光效重要。深底叠半透明字，屏上一糊就废。玻璃边可以炫，字必须先能读。大屏要的是一屏信息量，不是滤镜秀。

想给别人看一眼可以用一次性链接：对方打开看完即焚毁。

秒数、域名、后端怎么搭，这里不展开；要写分享专题另开一篇。