UI 组件
结合原始资料，按需应用到自己的设计中。
实现一个额度悬浮球（原生 HTML/CSS/JS，零依赖，单文件交付，以网页版悬浮 widget 交付，可 fixed 定位嵌入任意页面右下角）： 【效果描述】 页面右下角悬浮一枚半透明磨砂圆形小球，实时展示剩余额度百分比；颜色随额度状态变化（充足绿 / 中等黄 / 不足红 / 读取失败灰）。鼠标悬停时展开一张背景模糊的圆角信息卡片，显示重置时间、剩余额度数字与百分比、最近一次刷新状态。小球可拖拽、可双击最小化，右键弹出操作菜单。 【交互参数】 - 触发条件：悬停展开卡片；拖拽移动；双击最小化/恢复；右键打开菜单；每 15 秒自动刷新 - 关键数值：球直径 56px；默认透明度 70%；状态阈值 >70% 绿 #00FF00 / 30-70% 黄 #FFFF00 / <30% 红 #FF0000 / 失败灰 #808080；信息卡片圆角 12px + backdrop-filter: blur(12px)；状态变化抖动动画 0.4s - 边界情况：拖拽时限定在视口内；右键菜单不超出页面边界；刷新失败时置灰并标注"读取失败" 【使用示例】 嵌入任意页面右下角：<div class="uw-quota-orb" data-quota="85">，JS 初始化后自动运行。 数据源接入：把 demo 里的随机模拟换成真实 API 轮询，保持 15 秒间隔即可。 【实现要点】 1. 悬浮球 fixed 定位 + backdrop-filter: blur(8px) 实现磨砂，box-shadow 做边缘微阴影，opacity 0.7 2. 悬停用 :hover 或 mouseenter 展开信息卡片（transform/opacity 过渡），卡片三段式：顶部重置时间、中部剩余额度数字+百分比、底部刷新状态 3. pointerdown/move/up 实现拖拽；dblclick 切换最小化（缩为 16px 小圆点）；contextmenu preventDefault 后渲染自定义菜单（立即刷新/设置/退出），点击页面任意处关闭 4. setInterval 15000ms 自动刷新；刷新时球体做 0.6s 旋转动画；状态变化时加 shake 类播放 0.4s 抖动 【质量要求】 - 不污染全局样式，类名加 uw- 前缀；fixed 定位 + 较高 z-index，不干扰宿主页面布局 - prefers-reduced-motion 时禁用抖动/旋转动画 - 注释标出可调参数（球径、透明度、阈值、刷新间隔） 【参考资源】 - 资料详情：https://ui.undoai.cn/components/quota-orb/ - 效果快照：https://ui.undoai.cn/components/quota-orb/cover.png - Demo 源码：https://ui.undoai.cn/components/quota-orb/demo.html
将提示词与你的页面背景、技术栈和目标尺寸一起交给代码助手。实现后对照原图检查布局和状态，再验证键盘、触控和减少动态效果。
展开后加载源代码
查看 Markdown 全文，复制或下载 design.md 后交给开发者使用。
# 额度悬浮球 — design.md 内容版本：sha256:25f1646f2372cf54c6f4706d61602d90e86009d82e06dc6d155fce72dd6eb817 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产：components/quota-orb；语义类型：interaction。 - 分类：其他。 - 标签：悬浮球、状态指示、桌面挂件、拖拽。 - 场景：AI 额度监控、桌面效率挂件、后台任务状态指示。 - 平台：未提供。 - 风格：未提供。 ### 亮点声明 - 四色状态阈值：剩余额度 >70% 显示绿色 #00FF00，30-70% 黄色 #FFFF00，<30% 红色 #FF0000，读取失败灰色 #808080，状态变化时轻微抖动提示 - 磨砂悬浮球：56px 半透明磨砂圆形（backdrop-filter 模糊 + 边缘微阴影），默认透明度 70%，悬停展开圆角信息卡片（重置时间 / 剩余额度 / 刷新状态） - 完整桌面级交互：支持拖拽移动、双击最小化为小圆点、右键菜单（立即刷新 / 设置 / 退出），每 15 秒自动刷新一次额度 ### 实际文件与参考资源 - `cover.png`（sha256:2ab447f2e19e6a69e01b1dbdf95759af5da8817617518691851206d11c668984） - `demo.html`（sha256:d3d3a9efe30af5cb3adcb843d3040c79c124b8aee12f8c9c9a4e28c66a07a019） - `meta.yml` - 实现摘要：sha256:d3d3a9efe30af5cb3adcb843d3040c79c124b8aee12f8c9c9a4e28c66a07a019。 ## 未提供 - 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断；亮点中的数值属于元数据声明，demo 的存在与摘要不代表浏览器行为已验收。 ## 实现建议 - 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。 - 使用语义化元素，验证键盘操作、焦点可见性、触控目标和减少动效偏好。 - 以 demo.html 为实现参考，逐项验证交互、窄屏布局、文本溢出和错误恢复；具体参数由实现与验收确认。
在完整提示词后补充你的要求；生成提示词不会创建新资产。
DESIGN NOTES
GOOD FOR