From c089ac78349df7da44e3626cf7745a0ca6ddb53f Mon Sep 17 00:00:00 2001
From: cppla <i@cpp.la>
Date: Sun, 31 Aug 2025 22:38:03 +0800
Subject: [PATCH] update

---
 web/css/app.css |  3 +++
 web/js/app.js   | 36 +++++++++++++++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/web/css/app.css b/web/css/app.css
index 6b7009e..33fc6f4 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -242,6 +242,9 @@ table.data tbody tr.high-load:hover{background:rgba(239,68,68,.26) !important;}
 table.data tbody tr[class*="os-"]{box-shadow:inset 4px 0 0 0 var(--os-color, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--os-color, transparent) 10%, transparent), transparent 60%);} 
 table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--os-color, transparent) 16%, transparent), transparent 65%);} 
 .cards .card[class*="os-"]{border-color:color-mix(in srgb, var(--os-color, var(--accent)) 60%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--os-color, var(--accent)) 40%, transparent),0 4px 16px -6px color-mix(in srgb, var(--os-color, #000) 35%, transparent);} 
+/* 弹窗 OS 着色：左侧彩条 + 渐变与卡片一致 */
+/* 取消弹窗背景着色，改为仅在标题展示系统胶囊 */
+.os-chip{display:inline-flex;align-items:center;padding:2px 8px;margin-left:.5rem;border-radius:999px;font-size:12px;font-weight:600;line-height:1.2;background:var(--os-color, var(--border));color:#fff;border:0;white-space:nowrap;}
 
 /* 为常见系统赋色 */
 .os-linux{--os-color: rgba(16,185,129,.85);} /* emerald */
diff --git a/web/js/app.js b/web/js/app.js
index 886216c..e2f48aa 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -53,6 +53,32 @@ function osClass(os){
   return pick(v.replace(/[^a-z0-9_-]+/g,'-').slice(0,20));
 }
 
+// 将服务端 os 字段转为友好的显示名称
+function osLabel(os){
+  if(!os) return '';
+  const v = String(os).toLowerCase();
+  const is = (k)=>v.includes(k);
+  if(is('ubuntu')) return 'Ubuntu';
+  if(is('debian')) return 'Debian';
+  if(is('centos')) return 'CentOS';
+  if(is('rocky')) return 'Rocky Linux';
+  if(is('alma')) return 'AlmaLinux';
+  if(is('rhel') || is('redhat')) return 'Red Hat Enterprise Linux';
+  if(is('arch')) return 'Arch Linux';
+  if(is('alpine')) return 'Alpine Linux';
+  if(is('fedora')) return 'Fedora';
+  if(is('amazon')) return 'Amazon Linux';
+  if(is('suse')) return 'SUSE Linux';
+  if(is('freebsd')) return 'FreeBSD';
+  if(is('openbsd')) return 'OpenBSD';
+  if(is('netbsd') || is('bsd')) return 'BSD';
+  if(is('darwin') || is('macos') || is('os x') || is('osx') || is('apple') || is('mac')) return 'macOS';
+  if(is('win')) return 'Windows';
+  if(is('linux')) return 'Linux';
+  // 默认：首字母大写
+  return String(os).charAt(0).toUpperCase() + String(os).slice(1);
+}
+
 async function fetchData(){
   try {
     const r = await fetch('json/stats.json?_='+Date.now());
@@ -336,7 +362,15 @@ function openDetail(i){
   const s = S.servers[i]; if(!s) return;
   const box = document.getElementById('detailContent');
   const modal = document.getElementById('detailModal');
-  document.getElementById('detailTitle').textContent = s.name + ' 详情';
+  const osText = osLabel(s.os);
+  const titleEl = document.getElementById('detailTitle');
+  titleEl.textContent = s.name + ' 详情';
+  if(osText){
+    const chip = document.createElement('span');
+    chip.className = 'os-chip' + osClass(s.os);
+    chip.textContent = osText;
+    titleEl.appendChild(chip);
+  }
   const offline = !(s.online4||s.online6);
   const memPct = s.memory_total? (s.memory_used/s.memory_total*100):0;
   const swapPct = s.swap_total? (s.swap_used/s.swap_total*100):0;