基于 Vue 3 + Vite + reka-ui + Tailwind CSS v4 的 Komari Monitor 毛玻璃主题

komari-theme-Glassmorphism 是一个为 Komari Monitor 打造的毛玻璃（Glassmorphism）风格主题，以简洁现代的设计理念，打造清爽的监控面板视觉体验。此项目在原始 Komari Emerald 主题基础上进行了完整改造，优化了整体设计、色彩方案、卡片样式和交互体验。

• 添加了根据识别到的cpu信息对vps进行打分的内容(仅供娱乐)
• 全局采用毛玻璃（Glassmorphism）设计风格，卡片和容器具有半透明玻璃效果
• 默认背景重新设计为柔和冷色渐变光斑 + 细网格纹理，和旧版绿色顶光背景明显区分
• 地球仪改用纯白色背景，搭配淡蓝色柔和光晕，提升整体洁净感,连线从访客ip出发到所有节点
• 地球连线采用更细更浅的设计，减少视觉压力，强调数据流向的轻盈感

• 头部总览卡片支持独立开关、排序和扩展指标展示
• 首页支持真实 3D 地球、点阵地球和平铺世界地图三种展示样式
• 平铺地图使用左右分区布局：左侧地图展示节点旗帜，右侧自适应图例展示城市与 ASN / 地区信息
• 调整节点卡片尺寸和间距，增强可读性和视觉层次感
• 优化色彩方案，深色和浅色模式都采用现代配色

• 迁移至 reka-ui + Tailwind CSS v4，移除 Naive UI 和 UnoCSS
• 采用 shadcn-vue 组件库设计模式，确保高度可定制性
• 优化性能和包体积

这次主要是一次性能与稳定性维护更新，重点优化节点数量较多时的首页流畅度、地球渲染压力和轮询开销。

• COBE 点阵地球性能优化：移除标签位置对 Vue computed 的逐帧依赖，节点国旗标签改为直接同步 DOM transform，减少每帧全量 diff；同时取消 devicePixelRatio: 3 硬编码，按设备实际 DPR 渲染并限制上限，降低 GPU 压力。
• 地理聚合与 IP 定位优化：地区聚合和地区速率合并为一次遍历；IP 地理解析改为分批并发和批量写入缓存，避免多节点同时解析时频繁重建 Map；访客坐标和 IP Geo provider 请求增加超时保护。
• 首页总览卡片优化：在线节点统计合并为单次遍历，卡片定义改为按需生成，避免每轮轮询都重建所有指标卡；默认动画 key 不再拼接全量节点 UUID。
• 节点列表与排序优化：节点分组预解析到 groups 字段，搜索和分组过滤不再反复 split；月成本、总流量、峰值等快捷排序改为预计算后排序。
• 轮询与 RPC 一致性修复：详情页近一天峰值改用统一 RPC；实时状态高频刷新、节点元数据低频刷新，减少重复请求；数据刷新间隔统一由主题配置解析，并支持下一轮轮询动态生效。
• 图表与主题细节修复：Ping 历史桶计算改为滑动指针扫描，降低历史记录较多时的计算量；主题变量读取增加响应式刷新，切换浅色 / 深色模式后颜色 token 可正确更新。
• 背景遮罩修复：默认背景下正数遮罩现在也会生效，负数透明度设置也不再只作用于自定义背景。

• 地球 / 地图展示重构：新增 realistic / cobe / tiled 三种首页地球样式，默认使用真实贴图 3D 地球，也可切换点阵地球或平铺世界地图。
• 平铺世界地图优化：地图与图例改为左右分区，地图国旗放大，右侧图例按节点数量自动压缩单条高度，并显示城市与 ASN / 地区信息。
• 首页总览适配：平铺地图模式下默认展示 8 张总览卡片，减少地图与卡片拥挤问题。
• 快捷控制增强：新增「月成本」快捷排序，可按节点折算月成本从高到低查看。
• 版本与预览更新：同步主题版本到 v2.0.0，并更新最新预览图。

• 在线天数修正：节点卡片左上角「在线 X 天」改为使用机器 uptime，作为稳定性观测指标，并与价格显示解耦，避免有价格 / 无价格主机混排时卡片高度不一致。
• 移动端控制栏优化：手机端节点分组与快捷控制栏支持横向滑动，避免按钮挤出屏幕。
• 节点卡片细节修复：修复左上角绿色心跳动效被容器裁切的问题。
• 设置说明补充：自定义头部卡片与自定义快捷按钮补充英文 key 示例和中文含义，方便用户填写。
• 页脚布局修复：恢复 Theme by Komari Glassmorphism 在页脚右侧显示。

• 主页快捷控制：新增分组旁快捷按钮，可按默认、总流量、实时上行、实时下行、实时峰值、离线、高负载、即将到期快速筛选 / 排序节点。
• 头部格子扩展：新增实时峰值、上下行最高、离线节点、高负载节点、即将到期、流量预警、连接峰值、地区 / 系统 / 虚拟化分布、月费用和年费用等可选总览卡片；不再提供温度卡片。
• 主题设置页精简：移除备案设置，把头部卡片和快捷控制改为中文预设方案 + 高级自定义项，减少长串开关和英文 key 对普通用户的干扰。
• 节点卡片信息修复：节点左上角「在线 X 天」始终显示，未登录隐藏价格时仅隐藏金额信息，不再隐藏在线天数。
• 链接与版本更新：页脚主题链接改为当前 GitHub 项目地址，并同步更新 v1.0.5 版本信息。

• 节点卡片尺寸方案：新增 compact / comfortable / large 三套节点卡片尺寸，compact 保持一排更多卡片，comfortable 与 large 提供更宽松的大卡片展示。
• 节点卡片排版优化：三列小信息盒保持等宽，优化「剩余 xxx 天」与价格行排版，避免天数单位丢失，同时满足统一盒子尺寸的视觉一致性。
• 访客信息开关：新增访客信息显示开关与访客位置连线开关，可分别关闭底部访客信息卡片和地球访客坐标请求。
• 厂商识别增强：新增厂商自定义别名配置，支持商家 / 网络双显示，并在详情页提供识别来源 tooltip；厂商文本与 tooltip 支持自然换行，避免长内容溢出或不合适切断。

• 头部总览卡片可配置：新增「头部卡片设置」，现有 6 张总览卡片可独立开关，并支持通过英文逗号配置显示顺序；额外提供在线节点、平均 CPU、平均负载、交换内存、进程总数、连接数、平均温度、CPU 核心、流量配额等可选卡片
• 默认背景重绘：内置默认背景改为浅蓝、薄荷绿、淡紫渐变光斑与细网格纹理，保持毛玻璃通透感的同时与旧版配色明显区分

• 节点卡片信息重构：卡片左上角显示「在线天数 + 价格」，流量旁第三列显示「剩余天数 + 剩余价值」（剩余价值按剩余天数占计费周期的比例折算），并加图标与相邻列对齐
• 未登录隐藏价格：新增主题设置项，开启后未登录访客在卡片 / 列表中只看到在线天数、剩余天数，价格与剩余价值被隐藏；总览与详情页对应金额显示为 ***
• 节点详情页增强：
  • 硬件信息显示节点 IP（仅登录可见，未登录回退架构），GPU 按需显示（无 GPU 不占位）
  • 系统信息显示 城市 · 厂商 · ASN，厂商按 IP 的真实 ASN 精准识别（含 ASN 号兜底，如 AS36352→ColoCrossing）+ 节点名/标签辅助识别 + 扩充厂商库
  • 总流量进度条 按使用率分级配色（≥80% 红 / 60-80% 琥珀 / <60% 绿），内嵌 IPv4/IPv6 支持角标，并显示近一天网速峰值
  • 顶部显示节点自定义标签，两侧信息卡等高对齐
• 地球城市级定位：节点按各 VPS 的 IP 在线解析定位到具体城市；多服务轮询调度（ip.sb / ipinfo.io / ipwho.is / ipapi.co 轮流起始 + 按 IP 缓存）分摊请求、避免频控；解析不到 IP 时自动回退国家级
• 运行时性能优化：节点状态轮询改为「就地按字段更新、仅在值变化时赋值」，避免每轮整体替换对象导致的全量重渲染，节点越多收益越明显

1. 从当前仓库的 Release 页面 下载最新的 komari-theme-Glassmorphism-build-*.zip 文件
2. 登录 Komari Monitor 后，点击"设置"，进入"主题管理"选项卡
3. 点击"上传主题"，选择下载的 zip 文件
4. 刷新页面，即可应用主题

• Node.js: ^20.19.0 或 >=22.12.0
• Bun: >=1.2.0

# 安装依赖
bun install

# 启动开发服务器
bun run dev

# 代码检查
bun run lint

# 类型检查 + 生产构建
bun run build

# 预览生产构建
bun run preview

• 支持真实贴图 3D 地球、cobe 点阵地球和平铺世界地图三种首页展示样式
• 按节点 IP 在线解析定位到具体城市，解析失败回退国家级
• 实时服务器位置标记和带宽流向可视化
• 平铺地图提供独立图例区域，显示城市、ASN / 地区和在线状态色彩
• 3D 地球支持鼠标拖拽旋转，自动旋转可在主题设置中关闭

• 完全响应式布局，适配桌面、平板和移动设备
• 深色/浅色模式自动切换，支持用户偏好设置
• 流畅的过渡动画和交互反馈

• 实时节点监控信息，包括在线状态、CPU、内存、带宽等
• 网络延迟和性能图表展示
• 访问者地理位置信息展示

• 原始主题作者：Tokinx
• Komari
• Komari Naive
• Vue 3
• Vite
• reka-ui
• Tailwind CSS

本项目在原有 Komari Emerald 主题基础上进行了毛玻璃风格改造，特此感谢原作者 Tokinx 的贡献。

MIT