Compare commits

...
14 Commits
Author SHA1 Message Date
cpplaandGitHub 5322a9105e Update README.md
CI / validate (push) Has been cancelled
1.1.9 screen
2026-07-09 19:15:34 +08:00
cppla 3b0705edc1 update client linux and psutil 2026-07-09 18:01:57 +08:00
cppla 2b799a524f raw域名被限流,替换为api 2026-07-09 17:13:58 +08:00
cppla 783d27732d cpu short 2026-07-09 17:07:59 +08:00
cppla efb2768fa8 1.1.9 2026-07-09 16:09:02 +08:00
cppla a8fc0b81ab 1.1.9
CI / validate (push) Has been cancelled
2026-07-09 10:43:40 +08:00
cppla 66e6179332 update 2026-07-09 10:10:08 +08:00
cppla 6ad3a8c294 update
CI / validate (push) Has been cancelled
2026-07-07 17:39:32 +08:00
cppla 03db91c873 update 2026-07-07 17:27:29 +08:00
cppla 007c9bccd5 new style 2026-07-07 16:52:04 +08:00
cppla e8e90275a2 增加月流量重置按钮
CI / validate (push) Has been cancelled
2026-07-06 14:02:12 +08:00
cppla 8e4590699b update css for nomac
CI / validate (push) Has been cancelled
2026-07-02 16:24:04 +08:00
cppla 51ae186243 update 2026-07-02 13:07:35 +08:00
cppla bbec425c51 少于10时折叠筛选 2026-07-02 12:02:36 +08:00
10 changed files with 677 additions and 172 deletions
+9 -7
View File
@@ -7,9 +7,9 @@ ServerStatus 是一个轻量的服务器探针和云监控面板,支持多节
[![Python Support](https://img.shields.io/badge/python-3.6%2B%20-blue.svg)](https://github.com/cppla/ServerStatus)
[![C++ Compiler](http://img.shields.io/badge/C++-GNU-blue.svg?style=flat&logo=cplusplus)](https://github.com/cppla/ServerStatus)
[![License](https://img.shields.io/badge/license-MIT-4EB1BA.svg?style=flat-square)](https://github.com/cppla/ServerStatus)
[![Version](https://img.shields.io/badge/Version-Build%201.1.8-red)](https://github.com/cppla/ServerStatus)
[![Version](https://img.shields.io/badge/Version-Build%201.1.9-red)](https://github.com/cppla/ServerStatus)
![Latest Host Version](https://dl.cpp.la/Archive/serverstatus_1_1_8.png)
![Latest Host Version](https://dl.cpp.la/Archive/serverstatus_1_1_9.webp)
`Watchdog 的 `interval` 是最小通知间隔,用于避免频繁报警,并不是探测间隔。`rule` 使用 Exprtk 表达式,当前窄字符解析对中文等 Unicode 字符不友好,规则中建议使用英文、数字和字段名。`
@@ -23,8 +23,9 @@ ADMIN_TOKEN='your-strong-token' docker compose -f docker-compose-server.yml up -
```bash
# Docker Run
wget --no-check-certificate -qO ~/serverstatus-config.json \
https://raw.githubusercontent.com/cppla/ServerStatus/master/server/config.json
wget -qO ~/serverstatus-config.json \
--header='Accept: application/vnd.github.raw' \
'https://api.github.com/repos/cppla/ServerStatus/contents/server/config.json?ref=master'
mkdir -p ~/serverstatus-monthtraffic
docker run -d --restart=always --name=serverstatus-server \
@@ -61,7 +62,7 @@ docker run -d --restart=always --name=serverstatus-client \
```bash
# Shell Run
wget --no-check-certificate -qO client-linux.py 'https://raw.githubusercontent.com/cppla/ServerStatus/master/clients/client-linux.py' && (nohup python3 client-linux.py SERVER=127.0.0.1 USER=s01 >/dev/null 2>&1 &)
wget -qO client-linux.py --header='Accept: application/vnd.github.raw' 'https://api.github.com/repos/cppla/ServerStatus/contents/clients/client-linux.py?ref=master' && (nohup python3 client-linux.py SERVER=127.0.0.1 USER=s01 >/dev/null 2>&1 &)
```
客户端环境变量和注意事项:
@@ -295,8 +296,9 @@ server {
`client-linux.py`
```bash
wget --no-check-certificate -qO client-linux.py \
https://raw.githubusercontent.com/cppla/ServerStatus/master/clients/client-linux.py
wget -qO client-linux.py \
--header='Accept: application/vnd.github.raw' \
'https://api.github.com/repos/cppla/ServerStatus/contents/clients/client-linux.py?ref=master'
nohup python3 client-linux.py SERVER=127.0.0.1 USER=s01 PASSWORD=USER_DEFAULT_PASSWORD \
>/dev/null 2>&1 &
+71
View File
@@ -133,6 +133,73 @@ def get_cpu():
result = 100-(t[len(t)-1]*100.00/st)
return round(result, 1)
def get_cpu_cores():
try:
with open('/proc/stat') as f:
cores = sum(1 for line in f if re.match(r'^cpu\d+\s', line))
if cores > 0:
return cores
except Exception:
pass
return os.cpu_count() or 0
def normalize_cpu_model(value):
return re.sub(r'\s+', ' ', str(value or '')).strip()[:160]
def is_generic_cpu_model(value):
v = normalize_cpu_model(value).lower().replace('-', '').replace('_', '').replace(' ', '')
return v in ('', 'unknown', 'x8664', 'amd64', 'i386', 'i686', 'aarch64', 'arm64') or v.startswith('armv')
def get_lscpu_info():
result = {}
try:
output = subprocess.check_output(['lscpu'], stderr=subprocess.DEVNULL, timeout=2).decode(errors='ignore')
for line in output.splitlines():
if ':' not in line:
continue
key, value = line.split(':', 1)
key = key.strip().lower()
value = normalize_cpu_model(value)
if value and key not in result:
result[key] = value
except Exception:
pass
return result
def get_cpuinfo_values():
result = {}
try:
with open('/proc/cpuinfo') as f:
for line in f:
if ':' not in line:
continue
key, value = line.split(':', 1)
key = key.strip().lower()
value = normalize_cpu_model(value)
if value and key not in result:
result[key] = value
except Exception:
pass
return result
def get_cpu_model():
cpuinfo = get_cpuinfo_values()
lscpu = get_lscpu_info()
for value in (
cpuinfo.get('model name'),
lscpu.get('model name'),
cpuinfo.get('hardware'),
cpuinfo.get('processor'),
platform.processor(),
):
value = normalize_cpu_model(value)
if value and not value.isdigit() and not is_generic_cpu_model(value):
return value
vendor = normalize_cpu_model(lscpu.get('vendor id') or cpuinfo.get('vendor_id'))
if vendor:
return vendor
return normalize_cpu_model(lscpu.get('architecture') or platform.machine() or platform.processor())
def liuliang():
NET_IN = 0
NET_OUT = 0
@@ -505,6 +572,8 @@ if __name__ == '__main__':
print(data)
raise socket.error
CPUCores = get_cpu_cores()
CPUModel = get_cpu_model()
while True:
CPU = get_cpu()
NET_IN, NET_OUT = liuliang()
@@ -530,6 +599,8 @@ if __name__ == '__main__':
array['hdd_total'] = HDDTotal
array['hdd_used'] = HDDUsed
array['cpu'] = CPU
array['cpu_cores'] = CPUCores
array['cpu_model'] = CPUModel
array['network_rx'] = netSpeed.get("netrx")
array['network_tx'] = netSpeed.get("nettx")
array['network_in'] = NET_IN
+50
View File
@@ -92,6 +92,52 @@ def get_hdd():
def get_cpu():
return psutil.cpu_percent(interval=INTERVAL)
def get_cpu_cores():
return psutil.cpu_count(logical=True) or 0
def normalize_cpu_model(value):
return " ".join(str(value or "").split())[:160]
def is_generic_cpu_model(value):
v = normalize_cpu_model(value).lower().replace('-', '').replace('_', '').replace(' ', '')
return v in ('', 'unknown', 'x8664', 'amd64', 'i386', 'i686', 'aarch64', 'arm64') or v.startswith('armv')
def get_platform_cpu_vendor():
values = [
platform.processor(),
getattr(platform.uname(), 'processor', ''),
platform.machine(),
getattr(platform.uname(), 'machine', ''),
platform.platform(),
]
text = " ".join(normalize_cpu_model(v).lower() for v in values)
if 'genuineintel' in text:
return 'GenuineIntel'
if 'authenticamd' in text:
return 'AuthenticAMD'
if 'intel' in text:
return 'Intel'
if 'amd' in text:
return 'AMD'
if sys.platform.startswith('darwin') and platform.machine().lower() in ('arm64', 'aarch64'):
return 'Apple'
if any(token in text for token in ('aarch64', 'arm64', 'armv7', 'armv8', ' arm ')):
return 'ARM'
return ''
def get_platform_cpu_arch():
return normalize_cpu_model(platform.machine() or platform.processor() or platform.architecture()[0])
def get_cpu_model():
for value in (platform.processor(), getattr(platform.uname(), 'processor', '')):
value = normalize_cpu_model(value)
if value and not is_generic_cpu_model(value):
return value
vendor = normalize_cpu_model(get_platform_cpu_vendor())
if vendor:
return vendor
return get_platform_cpu_arch()
def liuliang():
NET_IN = 0
NET_OUT = 0
@@ -472,6 +518,8 @@ if __name__ == '__main__':
print(data)
raise socket.error
CPUCores = get_cpu_cores()
CPUModel = get_cpu_model()
while 1:
CPU = get_cpu()
NET_IN, NET_OUT = liuliang()
@@ -498,6 +546,8 @@ if __name__ == '__main__':
array['hdd_total'] = HDDTotal
array['hdd_used'] = HDDUsed
array['cpu'] = CPU
array['cpu_cores'] = CPUCores
array['cpu_model'] = CPUModel
array['network_rx'] = netSpeed.get("netrx")
array['network_tx'] = netSpeed.get("nettx")
array['network_in'] = NET_IN
+1
View File
@@ -28,6 +28,7 @@ mkdir -p "$WEB_DIR/json"
nginx
CONFIG_PATH="$CONFIG_PATH" \
STATS_PATH="${STATS_PATH:-$WEB_DIR/json/stats.json}" \
SERGATE_PID_FILE="$SERGATE_PID_FILE" \
ADMIN_API_BIND="$ADMIN_API_BIND" \
ADMIN_API_PORT="$ADMIN_API_PORT" \
+136
View File
@@ -11,6 +11,7 @@ from urllib.parse import unquote, urlparse
CONFIG_PATH = os.environ.get("CONFIG_PATH", "/ServerStatus/server/config.json")
STATS_PATH = os.environ.get("STATS_PATH", "/usr/share/nginx/html/json/stats.json")
SERGATE_PID_FILE = os.environ.get("SERGATE_PID_FILE", "/tmp/serverstatus-sergate.pid")
ADMIN_TOKEN = os.environ.get("ADMIN_TOKEN", "")
API_BIND = os.environ.get("ADMIN_API_BIND", "127.0.0.1")
@@ -31,6 +32,36 @@ def load_config():
return json.load(f)
def load_json_file(path):
with open(path, "r", encoding="utf-8") as f:
return json.load(f)
def load_stats_file():
try:
return load_json_file(STATS_PATH)
except FileNotFoundError:
return load_json_file(f"{STATS_PATH}~")
def write_json_file(path, data):
directory = os.path.dirname(path) or "."
os.makedirs(directory, exist_ok=True)
mode = os.stat(path).st_mode if os.path.exists(path) else 0o644
payload = json.dumps(data, ensure_ascii=False, indent="\t") + "\n"
fd, tmp_path = tempfile.mkstemp(prefix=".json.", suffix=".tmp", dir=directory)
try:
with os.fdopen(fd, "w", encoding="utf-8") as f:
f.write(payload)
f.flush()
os.fsync(f.fileno())
os.chmod(tmp_path, mode)
os.replace(tmp_path, path)
finally:
if os.path.exists(tmp_path):
os.unlink(tmp_path)
def normalize_required_strings(item, required, kind, index=None):
missing = [field for field in required if item.get(field) is None or not str(item.get(field, "")).strip()]
if missing:
@@ -238,6 +269,27 @@ def signal_sergate(sig):
return pid
def wait_for_pid_exit(pid, timeout=2.5):
deadline = time.time() + timeout
while time.time() < deadline:
try:
os.kill(pid, 0)
except OSError:
return True
time.sleep(0.05)
return False
def wait_for_sergate_pid(previous_pid=None, timeout=4.0):
deadline = time.time() + timeout
while time.time() < deadline:
pid = get_sergate_pid()
if pid and pid != previous_pid:
return pid
time.sleep(0.1)
return get_sergate_pid()
def find_server(config, username):
servers = config.get("servers", [])
for index, server in enumerate(servers):
@@ -262,6 +314,81 @@ def find_collection_item(config, key, item_id):
return -1, None
def stats_server_matches(config_server, stats_server):
return all(str(stats_server.get(field, "")) == str(config_server.get(field, "")) for field in ["name", "type", "host", "location"])
def find_stats_server(stats, config_server):
servers = stats.get("servers", [])
if not isinstance(servers, list):
raise ApiError(500, "stats.json has invalid servers data")
for index, stats_server in enumerate(servers):
if isinstance(stats_server, dict) and stats_server_matches(config_server, stats_server):
return index, stats_server
return -1, None
def as_counter(value, field):
try:
return int(value)
except (TypeError, ValueError):
raise ApiError(409, f"{field} is missing or invalid in stats.json")
def require_resettable_stats(stats, server, username):
stats_index, stats_server = find_stats_server(stats, server)
if stats_index < 0:
raise ApiError(404, "server stats were not found", {"username": username})
if "network_in" not in stats_server or "network_out" not in stats_server:
raise ApiError(409, "server has no current traffic counters; it may be offline", {"username": username})
return stats_index, stats_server
def reset_server_month_traffic(username):
config = load_config()
_, server = find_server(config, username)
if server is None:
raise ApiError(404, "server was not found", {"username": username})
require_resettable_stats(load_stats_file(), server, username)
old_pid = signal_sergate(signal.SIGTERM)
wait_for_pid_exit(old_pid)
stats = load_stats_file()
stats_index, stats_server = require_resettable_stats(stats, server, username)
network_in = as_counter(stats_server.get("network_in"), "network_in")
network_out = as_counter(stats_server.get("network_out"), "network_out")
previous_last_in = as_counter(stats_server.get("last_network_in", 0), "last_network_in")
previous_last_out = as_counter(stats_server.get("last_network_out", 0), "last_network_out")
stats["servers"][stats_index]["last_network_in"] = network_in
stats["servers"][stats_index]["last_network_out"] = network_out
stats["updated"] = str(int(time.time()))
write_json_file(STATS_PATH, stats)
new_pid = wait_for_sergate_pid(previous_pid=old_pid)
if new_pid:
os.kill(new_pid, signal.SIGHUP)
return {
"server": server,
"stats": {
"network_in": network_in,
"network_out": network_out,
"previous_last_network_in": previous_last_in,
"previous_last_network_out": previous_last_out,
"last_network_in": network_in,
"last_network_out": network_out,
"month_in_before": max(0, network_in - previous_last_in),
"month_out_before": max(0, network_out - previous_last_out),
},
"oldPid": old_pid,
"pid": new_pid,
}
def collection_routes():
endpoints = []
for key in ["monitors", "sslcerts", "watchdog"]:
@@ -290,6 +417,7 @@ def api_schema():
{"method": "POST", "path": "/api/servers", "auth": True, "body": "server JSON"},
{"method": "PUT", "path": "/api/servers/{username}", "auth": True, "body": "server JSON"},
{"method": "DELETE", "path": "/api/servers/{username}", "auth": True},
{"method": "POST", "path": "/api/servers/{username}/reset-traffic", "auth": True},
*collection_routes(),
{"method": "POST", "path": "/api/reload", "auth": True},
{"method": "POST", "path": "/api/restart", "auth": True},
@@ -379,6 +507,14 @@ class Handler(BaseHTTPRequestHandler):
config, pid = write_and_reload(config)
self.send_json(201, {"ok": True, "server": server, "reloaded": True, "pid": pid, "config": config})
return
if path.startswith("/api/servers/") and path.endswith("/reset-traffic"):
username = unquote(path[len("/api/servers/"):-len("/reset-traffic")].rstrip("/"))
if not username:
raise ApiError(400, "username is required")
if method == "POST":
result = reset_server_month_traffic(username)
self.send_json(200, {"ok": True, "operation": "reset-traffic", **result})
return
if path.startswith("/api/servers/"):
username = unquote(path[len("/api/servers/"):])
if not username:
+62 -7
View File
@@ -17,6 +17,48 @@
static volatile int gs_Running = 1;
static volatile int gs_ReloadConfig = 0;
static void JsonEscape(const char *pSrc, char *pDst, int DstSize)
{
if(!pDst || DstSize <= 0)
return;
int Out = 0;
if(!pSrc)
{
pDst[0] = 0;
return;
}
for(const unsigned char *p = (const unsigned char *)pSrc; *p && Out < DstSize - 1; ++p)
{
const char *pEsc = 0;
switch(*p)
{
case '"': pEsc = "\\\""; break;
case '\\': pEsc = "\\\\"; break;
case '\b': pEsc = "\\b"; break;
case '\f': pEsc = "\\f"; break;
case '\n': pEsc = "\\n"; break;
case '\r': pEsc = "\\r"; break;
case '\t': pEsc = "\\t"; break;
default: break;
}
if(pEsc)
{
for(const char *q = pEsc; *q && Out < DstSize - 1; ++q)
pDst[Out++] = *q;
}
else if(*p < 0x20)
{
if(Out < DstSize - 6)
Out += snprintf(pDst + Out, DstSize - Out, "\\u%04x", *p);
else
break;
}
else
pDst[Out++] = *p;
}
pDst[Out] = 0;
}
static int64_t ParseOpenSSLEnddate(const char *line)
{
// line format: notAfter=Aug 12 23:59:59 2025 GMT
@@ -380,6 +422,10 @@ int CMain::HandleMessage(int ClientNetID, char *pMessage)
pClient->m_Stats.m_IOWrite = rStart["io_write"].u.integer;
if(rStart["cpu"].type)
pClient->m_Stats.m_CPU = rStart["cpu"].u.dbl;
if(rStart["cpu_cores"].type)
pClient->m_Stats.m_CPUCores = rStart["cpu_cores"].u.integer;
if(rStart["cpu_model"].type == json_string)
str_copy(pClient->m_Stats.m_aCPUModel, rStart["cpu_model"].u.string.ptr, sizeof(pClient->m_Stats.m_aCPUModel));
if(rStart["online4"].type && pClient->m_ClientNetType == NETTYPE_IPV6)
pClient->m_Stats.m_Online4 = rStart["online4"].u.boolean;
if(rStart["online6"].type && pClient->m_ClientNetType == NETTYPE_IPV4)
@@ -635,28 +681,38 @@ void CMain::JSONUpdateThread(void *pUser)
pClients[i].m_LastNetworkOUT = pClients[i].m_Stats.m_NetworkOUT;
}
char aCustomEsc[2048] = { 0 };
char aOSEsc[128] = { 0 };
char aCPUModelEsc[384] = { 0 };
JsonEscape(pClients[i].m_Stats.m_aCustom, aCustomEsc, sizeof(aCustomEsc));
JsonEscape(pClients[i].m_Stats.m_aOS[0] ? pClients[i].m_Stats.m_aOS : "", aOSEsc, sizeof(aOSEsc));
JsonEscape(pClients[i].m_Stats.m_aCPUModel[0] ? pClients[i].m_Stats.m_aCPUModel : "", aCPUModelEsc, sizeof(aCPUModelEsc));
str_format(pBuf, sizeof(aFileBuf) - (pBuf - aFileBuf),
"{ \"name\": \"%s\",\"type\": \"%s\",\"host\": \"%s\",\"location\": \"%s\",\"online4\": %s, \"online6\": %s, \"uptime\": \"%s\",\"load_1\": %.2f, \"load_5\": %.2f, \"load_15\": %.2f,\"ping_10010\": %.2f, \"ping_189\": %.2f, \"ping_10086\": %.2f,\"time_10010\": %" PRId64 ", \"time_189\": %" PRId64 ", \"time_10086\": %" PRId64 ", \"tcp_count\": %" PRId64 ", \"udp_count\": %" PRId64 ", \"process_count\": %" PRId64 ", \"thread_count\": %" PRId64 ", \"network_rx\": %" PRId64 ", \"network_tx\": %" PRId64 ", \"network_in\": %" PRId64 ", \"network_out\": %" PRId64 ", \"cpu\": %d, \"memory_total\": %" PRId64 ", \"memory_used\": %" PRId64 ", \"swap_total\": %" PRId64 ", \"swap_used\": %" PRId64 ", \"hdd_total\": %" PRId64 ", \"hdd_used\": %" PRId64 ", \"last_network_in\": %" PRId64 ", \"last_network_out\": %" PRId64 ",\"io_read\": %" PRId64 ", \"io_write\": %" PRId64 ",\"custom\": \"%s\", \"os\": \"%s\" },\n",
"{ \"name\": \"%s\",\"type\": \"%s\",\"host\": \"%s\",\"location\": \"%s\",\"online4\": %s, \"online6\": %s, \"uptime\": \"%s\",\"load_1\": %.2f, \"load_5\": %.2f, \"load_15\": %.2f,\"ping_10010\": %.2f, \"ping_189\": %.2f, \"ping_10086\": %.2f,\"time_10010\": %" PRId64 ", \"time_189\": %" PRId64 ", \"time_10086\": %" PRId64 ", \"tcp_count\": %" PRId64 ", \"udp_count\": %" PRId64 ", \"process_count\": %" PRId64 ", \"thread_count\": %" PRId64 ", \"network_rx\": %" PRId64 ", \"network_tx\": %" PRId64 ", \"network_in\": %" PRId64 ", \"network_out\": %" PRId64 ", \"cpu\": %d, \"cpu_cores\": %" PRId64 ", \"cpu_model\": \"%s\", \"memory_total\": %" PRId64 ", \"memory_used\": %" PRId64 ", \"swap_total\": %" PRId64 ", \"swap_used\": %" PRId64 ", \"hdd_total\": %" PRId64 ", \"hdd_used\": %" PRId64 ", \"last_network_in\": %" PRId64 ", \"last_network_out\": %" PRId64 ",\"io_read\": %" PRId64 ", \"io_write\": %" PRId64 ",\"custom\": \"%s\", \"os\": \"%s\" },\n",
pClients[i].m_aName,pClients[i].m_aType,pClients[i].m_aHost,pClients[i].m_aLocation,
pClients[i].m_Stats.m_Online4 ? "true" : "false",pClients[i].m_Stats.m_Online6 ? "true" : "false",
aUptime, pClients[i].m_Stats.m_Load_1, pClients[i].m_Stats.m_Load_5, pClients[i].m_Stats.m_Load_15, pClients[i].m_Stats.m_ping_10010, pClients[i].m_Stats.m_ping_189, pClients[i].m_Stats.m_ping_10086,
pClients[i].m_Stats.m_time_10010, pClients[i].m_Stats.m_time_189, pClients[i].m_Stats.m_time_10086,pClients[i].m_Stats.m_tcpCount,pClients[i].m_Stats.m_udpCount,pClients[i].m_Stats.m_processCount,pClients[i].m_Stats.m_threadCount,
pClients[i].m_Stats.m_NetworkRx, pClients[i].m_Stats.m_NetworkTx, pClients[i].m_Stats.m_NetworkIN, pClients[i].m_Stats.m_NetworkOUT, (int)pClients[i].m_Stats.m_CPU, pClients[i].m_Stats.m_MemTotal, pClients[i].m_Stats.m_MemUsed,
pClients[i].m_Stats.m_NetworkRx, pClients[i].m_Stats.m_NetworkTx, pClients[i].m_Stats.m_NetworkIN, pClients[i].m_Stats.m_NetworkOUT, (int)pClients[i].m_Stats.m_CPU, pClients[i].m_Stats.m_CPUCores, aCPUModelEsc, pClients[i].m_Stats.m_MemTotal, pClients[i].m_Stats.m_MemUsed,
pClients[i].m_Stats.m_SwapTotal, pClients[i].m_Stats.m_SwapUsed, pClients[i].m_Stats.m_HDDTotal, pClients[i].m_Stats.m_HDDUsed,
pClients[i].m_Stats.m_NetworkIN == 0 || pClients[i].m_LastNetworkIN == 0 ? pClients[i].m_Stats.m_NetworkIN : pClients[i].m_LastNetworkIN,
pClients[i].m_Stats.m_NetworkOUT == 0 || pClients[i].m_LastNetworkOUT == 0 ? pClients[i].m_Stats.m_NetworkOUT : pClients[i].m_LastNetworkOUT,
pClients[i].m_Stats.m_IORead, pClients[i].m_Stats.m_IOWrite,
pClients[i].m_Stats.m_aCustom,
pClients[i].m_Stats.m_aOS[0] ? pClients[i].m_Stats.m_aOS : "");
aCustomEsc,
aOSEsc);
pBuf += strlen(pBuf);
}
else
{
// sava network traffic record to json when close client
// last_network_in == last network in record, last_network_out == last network out record
str_format(pBuf, sizeof(aFileBuf) - (pBuf - aFileBuf), "{ \"name\": \"%s\", \"type\": \"%s\", \"host\": \"%s\", \"location\": \"%s\", \"online4\": false, \"online6\": false, \"last_network_in\": %" PRId64 ", \"last_network_out\": %" PRId64 ", \"os\": \"%s\" },\n",
char aOSEsc[128] = { 0 };
char aCPUModelEsc[384] = { 0 };
JsonEscape(pClients[i].m_Stats.m_aOS[0] ? pClients[i].m_Stats.m_aOS : "", aOSEsc, sizeof(aOSEsc));
JsonEscape(pClients[i].m_Stats.m_aCPUModel[0] ? pClients[i].m_Stats.m_aCPUModel : "", aCPUModelEsc, sizeof(aCPUModelEsc));
str_format(pBuf, sizeof(aFileBuf) - (pBuf - aFileBuf), "{ \"name\": \"%s\", \"type\": \"%s\", \"host\": \"%s\", \"location\": \"%s\", \"online4\": false, \"online6\": false, \"last_network_in\": %" PRId64 ", \"last_network_out\": %" PRId64 ", \"os\": \"%s\", \"cpu_model\": \"%s\" },\n",
pClients[i].m_aName, pClients[i].m_aType, pClients[i].m_aHost, pClients[i].m_aLocation, pClients[i].m_LastNetworkIN, pClients[i].m_LastNetworkOUT,
pClients[i].m_Stats.m_aOS[0] ? pClients[i].m_Stats.m_aOS : "");
aOSEsc, aCPUModelEsc);
pBuf += strlen(pBuf);
}
}
@@ -1118,4 +1174,3 @@ int main(int argc, const char *argv[])
return RetVal;
}
+2
View File
@@ -76,8 +76,10 @@ class CMain
int64_t m_threadCount;
int64_t m_IORead;
int64_t m_IOWrite;
int64_t m_CPUCores;
double m_CPU;
char m_aCustom[1024];
char m_aCPUModel[192];
// OS name reported by client (e.g. linux/windows/darwin/freebsd)
char m_aOS[64];
// Options
+67 -102
View File
@@ -1,19 +1,19 @@
:root{--bg:#0f1115;--bg-alt:#171a21;--border:#262a33;--text:#e2e8f0;--text-dim:#7a899d;--accent:#3b82f6;--accent-glow:#60a5fa;--danger:#ef4444;--warn:#f59e0b;--ok:#10b981;--radius:10px;--radius-sm:4px;--shadow:0 4px 12px -2px rgba(0,0,0,.4);--font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans SC',sans-serif;--trans:.25s cubic-bezier(.4,0,.2,1);--logo-start:#3b82f6;--logo-end:#2563eb;--logo-accent-grad-start:#5fa8ff;--logo-accent-grad-end:#93c5fd}
body.light{--bg:#f6f7f9;--bg-alt:#ffffff;--border:#e2e8f0;--text:#1e293b;--text-dim:#64748b;--accent:#2563eb;--accent-glow:#3b82f6;--shadow:0 4px 20px -4px rgba(0,0,0,.08);--logo-start:#2563eb;--logo-end:#1d4ed8;--logo-accent-grad-start:#1d4ed8;--logo-accent-grad-end:#60a5fa}
:root{color-scheme:dark;--bg:#0d1117;--bg-alt:#171d27;--surface:#1d2530;--surface-soft:#151b24;--border:#334155;--text:#f1f5f9;--text-dim:#a7b4c8;--accent:#3b82f6;--accent-glow:#7db5ff;--danger:#f05252;--warn:#fbbf24;--ok:#10b981;--radius:10px;--radius-sm:4px;--shadow:0 8px 22px -10px rgba(0,0,0,.75);--font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans SC',sans-serif;--trans:.25s cubic-bezier(.4,0,.2,1);--logo-start:#3b82f6;--logo-end:#2563eb;--logo-accent-grad-start:#8bc1ff;--logo-accent-grad-end:#d4e8ff}
body.light{color-scheme:light;--bg:#f6f7f9;--bg-alt:#ffffff;--surface:#ffffff;--surface-soft:#f8fafc;--border:#e2e8f0;--text:#1e293b;--text-dim:#64748b;--accent:#2563eb;--accent-glow:#3b82f6;--shadow:0 4px 20px -4px rgba(0,0,0,.08);--logo-start:#2563eb;--logo-end:#1d4ed8;--logo-accent-grad-start:#1d4ed8;--logo-accent-grad-end:#60a5fa}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
html.light{background:var(--bg)}
html.light{background:var(--bg);color-scheme:light}
body,button{font-size:14px;line-height:1.35}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-glow)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.brand{font-weight:600;letter-spacing:.5px;font-size:15px}
.nav{display:flex;gap:.5rem}
.nav button{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.45rem .9rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:var(--trans);font-weight:500}
.nav button.active,.nav button:hover{color:var(--text);background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow),0 4px 10px -2px rgba(0,0,0,.5)}
.nav button{background:var(--surface-soft);border:1px solid var(--border);color:var(--text-dim);padding:.45rem .9rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:var(--trans);font-weight:600}
.nav button.active,.nav button:hover{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow),0 4px 10px -2px rgba(0,0,0,.5)}
.actions{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.actions button{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);height:32px;width:38px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:var(--trans)}
.actions button:hover{color:var(--text);border-color:var(--accent);background:var(--accent)}
.actions button:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
.wrapper{max-width:1680px;margin:1.2rem auto;padding:0 1.2rem;display:flex;flex-direction:column;gap:1.25rem}
.notice{padding:.9rem 1rem;border:1px solid var(--border);background:linear-gradient(145deg,var(--bg-alt),var(--bg));border-radius:var(--radius);display:flex;align-items:center;gap:.75rem;font-size:13px}
.notice.info:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
@@ -21,71 +21,29 @@ a:hover{color:var(--accent-glow)}
.panel.active{display:flex}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-alt);box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
table.data thead th{position:sticky;top:0;background:var(--bg-alt);font-weight:500;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);padding:.7rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
table.data thead th{position:sticky;top:0;background:var(--surface-soft);font-weight:700;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);padding:.7rem .75rem;border-bottom:1px solid var(--border);white-space:nowrap}
table.data tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;white-space:nowrap}
/* 防止数值变化导致列抖动:为月流量(7)/当前网络(8)/总流量(9)设置固定宽度并使用等宽数字 */
/* 防止数值变化导致列抖动 */
table.data th,table.data td{font-variant-numeric:tabular-nums}
/* 月流量(2) 左对齐;当前网络(8)/总流量(9) 居中 */
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
/* 月流量列:向左贴近协议(减小左 padding),同时加大右 padding 拉开与节点距离 */
width:128px;min-width:128px;max-width:128px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;padding:0 1.05rem 0 .15rem;
}
/* 节点列加宽,避免被月流量胶囊视觉挤压 */
#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){
width:160px;min-width:160px;max-width:160px;
}
/* 协议列继续收紧右侧 padding 与固定宽度 */
#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){
padding-right:.14rem;width:78px;min-width:78px;max-width:78px; /* 扩大协议列并恢复适度间距 */
}
/* 让双色胶囊更靠近协议列 */
#serversTable tbody td:nth-child(2) .caps-traffic.duo{margin-left:-6px;} /* 向协议方向微移,视觉更靠近;右侧 padding 增大避免靠近节点 */
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8),
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
width:132px;min-width:132px;max-width:132px;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-align:center;
/* 进一步拉开与 CPU/内存/硬盘 组的视觉距离 */
padding-right:1.95rem;
}
/* CPU / 内存 / 硬盘 列:居中 + 固定宽度 与仪表盘一致 */
#serversTable thead th:nth-child(10),#serversTable tbody td:nth-child(10),
#serversTable thead th:nth-child(11),#serversTable tbody td:nth-child(11),
#serversTable thead th:nth-child(12),#serversTable tbody td:nth-child(12){
width:70px;min-width:70px;max-width:70px;text-align:center;padding-left:1.1rem;padding-right:0; /* 继续右移并贴近右侧列 */
}
/* 月流量胶囊 */
.caps-traffic{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);padding:3px 12px 3px 10px;border-radius:999px;font-size:12px;line-height:1;font-weight:500;position:relative;box-shadow:0 2px 4px -2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03);}
.caps-traffic:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 70%);pointer-events:none;}
.caps-traffic .io{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;letter-spacing:.3px;}
.caps-traffic .io.in{color:var(--ok);}
.caps-traffic .io.out{color:var(--accent);}
.caps-traffic .sep{opacity:.4;font-size:11px;display:none;}
.caps-traffic.sm{padding:2px 8px 2px 7px;font-size:11px;gap:5px;}
.caps-traffic.sm .io{font-size:11px;}
/* 双色胶囊 */
.caps-traffic.duo{background:none;border:0;gap:0;padding:0;box-shadow:none;position:relative;border-radius:999px;overflow:hidden;font-size:12px;}
/* 宽度按内容自适应(不再拉伸占满列),每半边仅为其文本 + padding,可容纳最大 111.1MB */
/* 宽度按内容自适应,每半边仅为其文本 + padding */
.caps-traffic.duo .half{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:2px 4px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.25; /* 与 .pill 保持一致高度 */ letter-spacing:.25px;color:#fff;font-size:12px;white-space:nowrap;}
/* 双色胶囊配色
normal (默认): 左绿右蓝
heavy (>=1000GB 总量): 黄色提醒不再使用故障红
*/
/* normal 初始:淡绿色(入) + 淡蓝色(出) */
.caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;} /* emerald-100 / text-emerald-800 */
body.light .caps-traffic.duo.normal .half.in{background:#d1fae5;color:#065f46;}
.caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;} /* blue-200 / text-blue-900 */
body.light .caps-traffic.duo.normal .half.out{background:#bfdbfe;color:#1e3a8a;}
.caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;}
body.light .caps-traffic.duo.heavy .half.in{background:#fde68a;color:#78350f;}
.caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;}
body.light .caps-traffic.duo.heavy .half.out{background:#fbbf24;color:#111827;}
/* 半之间分隔线 */
.caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.18);}
body.light .caps-traffic.duo .half + .half{border-left:1px solid rgba(0,0,0,.08);}
.caps-traffic.duo.sm .half{padding:1px 4px;font-size:10px;min-width:0;}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:rgba(255,255,255,.04)}
table.data tbody tr:hover{background:rgba(59,130,246,.045)}
.badge{display:inline-block;padding:2px 6px;font-size:11px;border-radius:12px;font-weight:500;line-height:1.2;background:var(--bg);border:1px solid var(--border);color:var(--text-dim)}
.badge.ok{background:rgba(16,185,129,.15);color:var(--ok);border-color:rgba(16,185,129,.3)}
.badge.warn{background:rgba(245,158,11,.15);color:var(--warn);border-color:rgba(245,158,11,.4)}
@@ -101,8 +59,6 @@ table.data tbody tr:hover{background:rgba(255,255,255,.04)}
/* modal styles */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem;z-index:50;backdrop-filter:blur(4px)}
.modal-box{position:relative;width:100%;max-width:560px;background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px -6px rgba(0,0,0,.6);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.9rem;animation:fade .25s ease}
.modal-box.high-load{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.38),0 10px 28px -10px rgba(239,68,68,.28)}
body:not(.light) .modal-box.high-load{background:linear-gradient(180deg, rgba(239,68,68,.24), rgba(239,68,68,.12)), var(--bg-alt)}
.modal-title{margin:0;font-size:16px;font-weight:600;letter-spacing:.5px}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;padding:4px;border-radius:8px;transition:var(--trans)}
.modal-close:hover{color:var(--text);background:var(--bg)}
@@ -110,16 +66,6 @@ body:not(.light) .modal-box.high-load{background:linear-gradient(180deg, rgba(23
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .75rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));border:1px solid var(--border);border-radius:10px}
.kv span{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
/* 资源使用百分比色彩标签 */
/* 回退:移除资源使用百分比彩色标签样式 */
/* 详情弹窗三列信息行 */
/* 旧 spark 样式已移除,现使用半圆仪表盘 */
/* 全圆旧样式(保留以便回退) */
.gauge{--p:0;--col:var(--accent);width:74px;height:74px;position:relative;display:grid;place-items:center;font-size:11px;font-family:ui-monospace,monospace;font-weight:600;color:var(--text);}
.gauge:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--col) calc(var(--p)*1turn),rgba(255,255,255,0.06) 0);mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 59%);border:1px solid var(--border);box-shadow:0 2px 6px -2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);}
.gauge span{position:relative;z-index:1}
/* 半圆仪表盘 */
.gauge-half{--p:0;width:60px;height:34px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:ui-monospace,monospace;font-size:10px;font-weight:600;gap:0;color:var(--text);}
@@ -133,12 +79,10 @@ body:not(.light) .modal-box.high-load{background:linear-gradient(180deg, rgba(23
/* 阈值颜色:CPU>=75%、内存>=80%、硬盘>=85% 警告黄,>=90% 危险红 */
.gauge-half[data-warn] path.arc{stroke:var(--warn)}
.gauge-half[data-bad] path.arc{stroke:var(--danger)}
/* 指针:以中心(50,50)为原点旋转;半圆角度范围 180deg -> 从 180deg (左) 到 0deg(右) */
.gauge-half span{line-height:1;position:relative;top:-6px;font-size:12px;}
/* 亮色模式细化对比度 */
body.light .gauge-half path.track{stroke:color-mix(in srgb,var(--text-dim) 28%,transparent)}
body.light .gauge-half path.arc{filter:none}
body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text-dim))}
/* status pill */
.pill{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600;border-radius:999px;letter-spacing:.45px;min-width:48px;text-align:center;line-height:1.25;border:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);transition:var(--trans);color:#fff}
@@ -146,6 +90,23 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text
.pill.off{background:var(--danger)}
.pill.on:hover{filter:brightness(1.1)}
.pill.off:hover{filter:brightness(1.1)}
.proto-signal{display:inline-grid;grid-template-columns:1fr 1fr;width:18px;height:18px;border-radius:50%;overflow:hidden;vertical-align:middle;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);box-shadow:0 2px 5px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
.proto-signal i{display:block;min-width:0;background:color-mix(in srgb,var(--text-dim) 42%,var(--bg-alt));}
.proto-signal[data-v4="1"] .v4,.proto-signal[data-v6="1"] .v6{background:#22c55e}
.proto-signal[data-state="ipv4"] .v4{background:#22c55e}
.proto-signal[data-state="ipv6"] .v6{background:#22c55e}
.proto-signal[data-state="offline"] .v4,.proto-signal[data-state="offline"] .v6{background:var(--danger)}
body.light .proto-signal{border-color:color-mix(in srgb,var(--border) 92%,#94a3b8);box-shadow:0 1px 3px rgba(15,23,42,.12)}
body.light .proto-signal i{background:#cbd5e1}
.virt-pill{--virt:var(--accent);display:inline-flex;align-items:center;justify-content:center;min-width:50px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--virt) 42%,var(--border));background:color-mix(in srgb,var(--virt) 14%,var(--bg-alt));color:color-mix(in srgb,var(--virt) 72%,#fff);font-size:12px;font-weight:650;line-height:1.2;letter-spacing:.25px;white-space:nowrap}
body.light .virt-pill{background:color-mix(in srgb,var(--virt) 12%,#fff);color:color-mix(in srgb,var(--virt) 68%,#111827)}
.node-name{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:750;letter-spacing:.15px;color:var(--text)}
.row-server[data-online="0"] .node-name{color:color-mix(in srgb,var(--text) 72%,var(--text-dim));font-weight:650}
.row-server:hover .node-name{color:var(--accent)}
.load-with-cores{display:inline-flex;align-items:flex-start;gap:.28rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;line-height:1;white-space:nowrap}
.load-value{display:inline-block;min-width:2.55rem}
.load-core-bubble{display:inline-flex;align-items:center;justify-content:center;height:14px;min-width:24px;padding:0 5px;margin-top:-6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 13%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 74%,#fff);font-size:9px;font-weight:800;line-height:1;letter-spacing:0;box-shadow:0 1px 3px rgba(0,0,0,.22)}
body.light .load-core-bubble{background:color-mix(in srgb,var(--accent) 8%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827);box-shadow:0 1px 2px rgba(15,23,42,.08)}
/* buckets CU/CT/CM (simple version) */
.buckets{display:flex;align-items:flex-end;gap:8px;min-width:140px}
@@ -156,12 +117,6 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text
.bucket label{position:absolute;left:0;right:0;bottom:2px;font-size:10px;text-align:center;color:var(--text-dim);pointer-events:none}
.bucket:hover label{color:var(--text)}
/* 居中联通电信移动列 */
#serversTable thead th:last-child, #serversTable tbody td:last-child { text-align:center; }
/* 放大第13列宽度以容纳更宽水桶 */
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){
width:150px;min-width:150px;max-width:150px;padding-left:0;padding-right:.55rem; /* 去除左 padding 进一步贴近 */
}
/* 调整“总流量”表头(第9列)padding 使标题文字居中,不受正文额外右 padding 影响 */
#serversTable thead th:nth-child(9){padding-left:.75rem;padding-right:.75rem;}
.buckets{justify-content:center}
@@ -198,48 +153,46 @@ body.light .gauge-half .needle{background:linear-gradient(var(--text),var(--text
.modal-content{max-height:65vh;overflow:auto;}
}
/* SSL 表(证书)列宽与换行修正,避免复用服务器列宽导致名称与域名重叠 */
#sslTable th,#sslTable td{white-space:nowrap;padding:.55rem .75rem;}
#sslTable th:nth-child(1),#sslTable td:nth-child(1){width:140px;min-width:120px;}
/* 域名允许换行以防过长挤压 */
#sslTable th:nth-child(2),#sslTable td:nth-child(2){white-space:normal;max-width:320px;overflow-wrap:anywhere;}
/* === 覆盖:要求三个表 (servers / monitors / ssl) 全部改为自动宽度 === */
/* 1. 取消全局 table.data 的 min-width 对这三个表的影响 */
/* 三个数据表使用自动宽度,按关键列单独约束 */
#serversTable,#monitorsTable,#sslTable{min-width:0;}
/* 2. 统一去除之前为 serversTable 设定的列固定宽度,允许浏览器自动分配 */
#serversTable thead th,#serversTable tbody td,
#monitorsTable thead th,#monitorsTable tbody td,
#sslTable thead th,#sslTable tbody td{
width:auto!important;min-width:0!important;max-width:none!important;
padding:.55rem .7rem;
}
/* 3. 允许证书域名不受 max-width 限制(如仍需换行可保留 overflow-wrap */
#sslTable th:nth-child(2),#sslTable td:nth-child(2){max-width:none;white-space:normal;overflow-wrap:anywhere;}
/* 4. 取消“联通|电信|移动”列固定宽度 */
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:auto!important;min-width:0!important;}
/* 5. 如需稍微限制仪表盘相关列最小可读宽度,可设定一个较小下限 (可选) -- 暂不设置,完全交由自动布局 */
#serversTable thead th:nth-child(13),#serversTable tbody td:nth-child(13){width:112px!important;min-width:112px!important;max-width:112px!important;padding-left:0!important;padding-right:0!important;text-align:center;}
/* === 新增:为“月流量 / 当前网络 / 总流量”三列设置最小宽度,防止内容被压缩换行或挤压 === */
/* 目标最小宽度按示例 "111.1GB|111.1GB" 设计(13 个字符左右),取 16ch 留余量 */
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2),
#serversTable thead th:nth-child(8),#serversTable tbody td:nth-child(8),
#serversTable thead th:nth-child(9),#serversTable tbody td:nth-child(9){
min-width:22ch !important; /* 保留自动宽度,但不小于此值 */
min-width:20ch !important; /* 保留自动宽度,但不小于此值 */
text-align:center;
font-variant-numeric:tabular-nums;
}
#serversTable thead th:nth-child(2),#serversTable tbody td:nth-child(2){
width:134px!important;min-width:134px!important;max-width:134px!important;text-align:center;padding-left:.35rem!important;padding-right:.35rem!important;font-variant-numeric:tabular-nums;
}
#serversTable thead th:nth-child(1),#serversTable tbody td:nth-child(1){
width:46px!important;min-width:46px!important;max-width:46px!important;text-align:center;padding-left:0!important;padding-right:0!important;
}
#serversTable thead th:nth-child(3),#serversTable tbody td:nth-child(3){
text-align:left;padding-left:18px!important;
}
#serversTable tbody td:nth-child(13) .buckets{
min-width:112px;
gap:6px;
margin:0 auto;
justify-content:center;
}
.cards .card{border:1px solid var(--border);border-radius:12px;padding:.75rem .85rem;background:linear-gradient(145deg,var(--bg),var(--bg-alt));display:flex;flex-direction:column;gap:.45rem;position:relative;}
.cards .card.offline{filter:saturate(.92);}
.cards .card.high-load,
.cards .card.alert-critical{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.12)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.48),0 6px 18px -6px rgba(239,68,68,.28);}
.cards .card.alert-warning{border-color:rgba(245,158,11,.55);background:linear-gradient(180deg, rgba(245,158,11,.16), rgba(245,158,11,.08)), var(--bg-alt);box-shadow:0 0 0 1px rgba(245,158,11,.32),0 6px 18px -8px rgba(245,158,11,.22);}
table.data tbody tr.high-load,
table.data tbody tr.alert-critical{background:rgba(239,68,68,.18) !important;}
table.data tbody tr.high-load:hover,
table.data tbody tr.alert-critical:hover{background:rgba(239,68,68,.26) !important;}
table.data tbody tr.alert-critical:hover{background:rgba(239,68,68,.21) !important;}
table.data tbody tr.alert-warning{background:rgba(245,158,11,.12) !important;}
table.data tbody tr.alert-warning:hover{background:rgba(245,158,11,.18) !important;}
table.data tbody tr.alert-warning:hover{background:rgba(245,158,11,.14) !important;}
/* SSL 域名告警底色:与高负载相同 */
#sslTable td.alert-domain{background:rgba(239,68,68,.18) !important;}
@@ -251,11 +204,15 @@ table.data tbody tr.alert-warning:hover{background:rgba(245,158,11,.18) !importa
3) 行背景叠加轻度渐变以提示 OS
*/
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%);}
table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--os-color, transparent) 12%, 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;}
.spec-chip{display:inline-flex;align-items:center;padding:2px 8px;margin-left:.4rem;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:750;line-height:1.2;background:color-mix(in srgb,var(--accent) 16%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 72%,#fff);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));white-space:nowrap;}
body.light .spec-chip{background:color-mix(in srgb,var(--accent) 10%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827)}
.cpu-model-chip{display:inline-block;max-width:min(240px,58vw);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;padding:2px 8px;margin-left:.4rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--text-dim) 34%,var(--border));background:color-mix(in srgb,var(--text-dim) 12%,var(--bg-alt));color:color-mix(in srgb,var(--text) 84%,var(--text-dim));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;}
body.light .cpu-model-chip{background:color-mix(in srgb,var(--text-dim) 9%,#fff);color:color-mix(in srgb,var(--text) 82%,#111827)}
/* 为常见系统赋色 */
.os-linux{--os-color: rgba(16,185,129,.85);} /* 绿色 (通用 Linux,保持不变) */
@@ -280,8 +237,10 @@ table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color
/* 旧进度条相关样式已清理 */
.cards .card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.cards .card-title{font-weight:600;font-size:.95rem;}
.cards .tag{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;background:var(--border);letter-spacing:.5px;}
.cards .card-title{display:flex;align-items:center;flex-wrap:wrap;gap:.24rem .34rem;min-width:0;font-weight:600;font-size:.95rem;}
.cards .card-spec-chip{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:0 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));background:color-mix(in srgb,var(--accent) 13%,var(--bg-alt));color:color-mix(in srgb,var(--accent) 74%,#fff);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap}
body.light .cards .card-spec-chip{background:color-mix(in srgb,var(--accent) 8%,#fff);color:color-mix(in srgb,var(--accent) 78%,#111827)}
.cards .tag{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;background:var(--surface);color:var(--text);letter-spacing:.5px;}
.cards .status-pill{font-size:.6rem;padding:.2rem .45rem;border-radius:999px;font-weight:500;}
.cards .status-pill.on{background:var(--ok);color:#fff;}
.cards .status-pill.off{background:var(--danger);color:#fff;}
@@ -325,28 +284,33 @@ table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color
/* 运维控制台增强 */
.ops-overview{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:.75rem}
.overview-card{border:1px solid var(--border);background:var(--bg-alt);border-radius:8px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.25rem;min-height:82px}
.overview-card{border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-soft),var(--bg-alt));border-radius:8px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.25rem;min-height:82px}
.overview-card .label{font-size:12px;color:var(--text-dim)}
.overview-card .value{font-size:24px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.overview-card .hint{font-size:12px;color:var(--text-dim);line-height:1.3}
.overview-card.ok{border-color:rgba(16,185,129,.35)}
.overview-card.warn{border-color:rgba(245,158,11,.45)}
.overview-card.err{border-color:rgba(239,68,68,.5)}
.overview-card.traffic-down{border-color:rgba(16,185,129,.38)}
.overview-card.traffic-up{border-color:rgba(59,130,246,.38)}
.ops-toolbar{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;border:1px solid var(--border);background:var(--bg-alt);border-radius:8px;padding:.75rem}
.search-field,.select-field{display:flex;flex-direction:column;gap:.3rem;color:var(--text-dim);font-size:12px}
.search-field input,.select-field select,.config-form input,.config-form textarea{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:0 .65rem;outline:none;transition:var(--trans)}
.search-field input::placeholder,.config-form input::placeholder,.config-form textarea::placeholder{color:color-mix(in srgb,var(--text-dim) 78%,transparent);opacity:1}
.search-field input,.select-field select,.config-form input{height:36px}
.config-form textarea{min-height:92px;resize:vertical;padding:.55rem .65rem;line-height:1.45;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.search-field input:focus,.select-field select:focus,.config-form input:focus,.config-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.search-field input{min-width:280px}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--bg)}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--surface-soft)}
.segmented button{height:36px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--text-dim);padding:0 .8rem;cursor:pointer}
.segmented button:last-child{border-right:0}
.segmented button.active,.segmented button:hover{background:var(--accent);color:#fff}
.icon-text,.primary-btn,.danger-btn{height:36px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);padding:0 .75rem;cursor:pointer;transition:var(--trans);font-weight:600}
.icon-text,.primary-btn,.warn-btn,.danger-btn{height:36px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);padding:0 .75rem;cursor:pointer;transition:var(--trans);font-weight:600}
.icon-text:hover{border-color:var(--accent);color:var(--accent)}
.primary-btn{background:var(--accent);border-color:var(--accent);color:#fff}
.primary-btn:hover{filter:brightness(1.08)}
.warn-btn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.42);color:var(--warn)}
.warn-btn:hover{background:var(--warn);border-color:var(--warn);color:#111827}
.danger-btn{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.38);color:var(--danger)}
.danger-btn:hover{background:var(--danger);color:#fff}
th[data-sort]{cursor:pointer;user-select:none}
@@ -362,7 +326,8 @@ th[data-sort].sorted-desc:after{border-top-color:var(--accent);opacity:1}
.detail-drawer{height:100dvh;max-height:100dvh;width:min(620px,100vw);max-width:min(620px,100vw);border-radius:0;border-top:0;border-right:0;border-bottom:0;padding:1.1rem;overflow:auto;animation:slideIn .24s ease}
.detail-drawer.alert-critical{border-color:rgba(239,68,68,.6);background:linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08)), var(--bg-alt);box-shadow:0 0 0 1px rgba(239,68,68,.38),0 10px 28px -10px rgba(239,68,68,.28)}
.detail-drawer.alert-warning{border-color:rgba(245,158,11,.55);background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06)), var(--bg-alt);box-shadow:0 0 0 1px rgba(245,158,11,.28),0 10px 28px -10px rgba(245,158,11,.2)}
.modal-title{padding-right:2.2rem}
.modal-title{padding-right:2.2rem;display:flex;align-items:center;flex-wrap:wrap;gap:.32rem .4rem}
.modal-title .os-chip,.modal-title .spec-chip,.modal-title .cpu-model-chip{margin-left:0}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.detail-section{border:1px solid var(--border);border-radius:8px;background:linear-gradient(145deg,var(--bg),var(--bg-alt));padding:.75rem;display:flex;flex-direction:column;gap:.65rem}
.detail-section h4{margin:0;font-size:13px;color:var(--text-dim);font-weight:700;letter-spacing:.4px}
@@ -431,7 +396,7 @@ th[data-sort].sorted-desc:after{border-top-color:var(--accent);opacity:1}
}
@media (max-width:640px){
.ops-toolbar{align-items:stretch}
.search-field,.select-field,.search-field input,.select-field select,.segmented,.icon-text,.primary-btn,.danger-btn{width:100%}
.search-field,.select-field,.search-field input,.select-field select,.segmented,.icon-text,.primary-btn,.warn-btn,.danger-btn{width:100%}
.segmented button{flex:1;padding:0 .35rem}
.section-head{flex-direction:column}
.section-actions{width:100%;justify-content:stretch}
+4 -3
View File
@@ -6,7 +6,7 @@
<meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla" />
<title>云监控</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="stylesheet" href="css/app.css?v=20260630-7" />
<link rel="stylesheet" href="css/app.css?v=20260709-19" />
</head>
<body>
<header class="topbar">
@@ -35,7 +35,7 @@
<section class="ops-overview" id="overviewCards" aria-label="运行概览"></section>
<section class="ops-toolbar" id="serversToolbar" aria-label="主机筛选">
<section class="ops-toolbar" id="serversToolbar" aria-label="主机筛选" style="display:none;">
<label class="search-field">
<span>搜索</span>
<input id="serverSearch" type="search" autocomplete="off" placeholder="节点 / 地区 / 系统 / 主机名" />
@@ -177,6 +177,7 @@
<div id="configFields" class="config-fields"></div>
<div class="form-actions">
<button type="submit" class="primary-btn">保存配置</button>
<button type="button" id="resetTrafficBtn" class="warn-btn" style="display:none;">重置月流量</button>
<button type="button" id="deleteConfigItemBtn" class="danger-btn">删除配置</button>
<button type="button" id="resetConfigFormBtn" class="icon-text">清空</button>
</div>
@@ -199,6 +200,6 @@
<a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a>
</footer>
<script src="js/app.js?v=20260630-7" defer></script>
<script src="js/app.js?v=20260709-19" defer></script>
</body>
</html>
+269 -47
View File
@@ -6,6 +6,7 @@ const S = {
loadHist: {},
openDetailKey: null,
activeTab: 'servers',
layoutCompact: null,
osOptionsSignature: '',
suppressStatsReloadUntil: 0,
filters: { query: '', status: 'all', os: 'all', sort: 'name', dir: 'desc' },
@@ -25,6 +26,32 @@ const esc = (v) => String(v ?? '').replace(/[&<>"']/g, ch => ({'&':'&amp;','<':'
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
const num = (v) => typeof v === 'number' && Number.isFinite(v) ? v : 0;
function debounce(fn, wait){
let timer = 0;
const wrapped = (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
timer = 0;
fn(...args);
}, wait);
};
wrapped.cancel = () => {
clearTimeout(timer);
timer = 0;
};
return wrapped;
}
function isCompactLayout(){ return window.innerWidth <= 700; }
function clearHTML(id){
const el = $(id);
if(el && el.innerHTML) el.innerHTML = '';
}
function htmlElement(html){
const tpl = document.createElement('template');
tpl.innerHTML = html.trim();
return tpl.content.firstElementChild;
}
function humanMinMBFromKB(kb){ return humanBytes(num(kb) * 1000, 1000 * 1000); }
function humanMinMBFromMB(mb){ return humanBytes(num(mb) * 1000 * 1000, 1000 * 1000); }
function humanMinMBFromB(bytes){ return humanBytes(num(bytes), 1000 * 1000); }
@@ -39,6 +66,41 @@ function humanBytes(bytes, minUnit){
const out = value >= 100 ? value.toFixed(0) : value.toFixed(1);
return out + units[index];
}
function cpuCores(s){
const value = Number(s?.cpu_cores ?? s?.cpu_core ?? s?.cpu_count ?? s?.cores ?? 0);
return Number.isFinite(value) && value > 0 ? Math.round(value) : 0;
}
function cpuCoreLabel(s){
const cores = cpuCores(s);
return cores > 0 ? `${cores}C` : '';
}
function memoryGbLabel(s){
const kb = Number(s?.memory_total ?? 0);
if(!Number.isFinite(kb) || kb <= 0) return '';
return `${Math.max(1, Math.round(kb / 1024 / 1024))}G`;
}
function serverSpecLabel(s){
const cores = cpuCoreLabel(s);
if(!cores) return '';
return `${cores}${memoryGbLabel(s)}`;
}
function cpuModelLabel(s){
return String(s?.cpu_model || '').trim();
}
function shortCpuModel(model){
const raw = String(model || '').trim();
if(!raw) return '';
const text = raw
.replace(/\((?:R|TM|C)\)/gi, '')
.replace(/\s+@.*$/g, '')
.replace(/\b(?:CPU|Processor)\b/gi, '')
.replace(/\b\d+\s*-?\s*Core\b/gi, '')
.replace(/\b\d+\s*-?\s*Thread\b/gi, '')
.replace(/\b(?:Intel|AMD)\b/gi, '')
.replace(/\s+/g, ' ')
.trim();
return text || raw;
}
function humanAgo(ts){
if(!ts) return '-';
const sec = Math.max(0, Math.floor(Date.now() / 1000 - Number(ts)));
@@ -98,10 +160,6 @@ function lossValues(s){
return [s.ping_10010, s.ping_189, s.ping_10086].map(p => clamp(num(p), 0, 100));
}
function isBlocked(s){
return lossValues(s).every(p => p >= 100);
}
function metrics(s){
const online = !!(s.online4 || s.online6);
const memPct = s.memory_total ? s.memory_used / s.memory_total * 100 : 0;
@@ -202,17 +260,64 @@ function visibleServers(){
function render(){
$('notice').style.display = 'none';
renderOverview();
renderOsOptions();
renderServers();
renderServersCards();
renderMonitors();
renderMonitorsCards();
renderSSL();
renderSSLCards();
renderActivePanel();
updateTime();
if(S.openDetailKey) refreshDetail();
}
function renderActivePanel(){
normalizeServersToolbarState();
if(S.activeTab === 'servers') renderServersView();
else if(S.activeTab === 'monitors') renderMonitorsView();
else if(S.activeTab === 'ssl') renderSSLView();
}
function renderServersView(){
const compact = isCompactLayout();
S.layoutCompact = compact;
normalizeServersToolbarState();
renderOsOptions();
if(compact){
clearHTML('serversBody');
renderServersCards();
}else{
clearHTML('serversCards');
renderServers();
}
}
function renderMonitorsView(){
const compact = isCompactLayout();
S.layoutCompact = compact;
if(compact){
clearHTML('monitorsBody');
renderMonitorsCards();
}else{
clearHTML('monitorsCards');
renderMonitors();
}
}
function renderSSLView(){
const compact = isCompactLayout();
S.layoutCompact = compact;
if(compact){
clearHTML('sslBody');
renderSSLCards();
}else{
clearHTML('sslCards');
renderSSL();
}
}
const scheduleServersRender = debounce(() => {
if(S.activeTab === 'servers') renderServersView();
}, 160);
function renderServersViewNow(){
scheduleServersRender.cancel();
if(S.activeTab === 'servers') renderServersView();
}
function renderOverview(){
const total = S.servers.length;
const online = S.servers.filter(s => metrics(s).online).length;
@@ -223,8 +328,8 @@ function renderOverview(){
$('overviewCards').innerHTML = [
card('在线主机', `${online}/${total}`, '当前在线节点', online === total ? 'ok' : 'warn'),
card('证书风险', sslWarn, sslWarn ? '过期或域名不匹配' : '证书正常', sslWarn ? 'warn' : 'ok'),
card('本月行', humanMinMBFromB(monthUp), '上传累计', ''),
card('本月行', humanMinMBFromB(monthDown), '下载累计', ''),
card('本月行', humanMinMBFromB(monthDown), '下载累计', 'traffic-down'),
card('本月行', humanMinMBFromB(monthUp), '上传累计', 'traffic-up'),
card('活跃告警', alerts.total, `离线 ${alerts.offline} / 异常 ${alerts.abnormal} / 被墙 ${alerts.blocked}`, alerts.total ? (alerts.offline || alerts.blocked ? 'err' : 'warn') : 'ok')
].join('');
}
@@ -242,6 +347,11 @@ function alertStats(){
return stats;
}
function normalizeServersToolbarState(){
const show = S.activeTab === 'servers' && S.servers.length > 10;
$('serversToolbar').style.display = show ? 'flex' : 'none';
}
function renderOsOptions(){
const select = $('osFilter');
const labels = [...new Set(S.servers.map(s => osLabel(s.os)).filter(Boolean))].sort((a,b)=>a.localeCompare(b,'zh-CN'));
@@ -261,11 +371,44 @@ function protoPill(s){
const proto = m.online ? (s.online4 && s.online6 ? '双栈' : (s.online4 ? 'IPv4' : 'IPv6')) : '离线';
return `<span class="pill ${m.online ? 'on' : 'off'}">${proto}</span>`;
}
function protoSignal(s){
const m = metrics(s);
const v4 = m.online && !!s.online4;
const v6 = m.online && !!s.online6;
const state = !m.online ? 'offline' : (v4 && v6 ? 'dual' : (v4 ? 'ipv4' : 'ipv6'));
const label = !m.online ? '离线' : (v4 && v6 ? '双栈在线' : (v4 ? 'IPv4 在线' : 'IPv6 在线'));
return `<span class="proto-signal" data-state="${state}" data-v4="${v4 ? 1 : 0}" data-v6="${v6 ? 1 : 0}" aria-label="${esc(label)}"><i class="v4"></i><i class="v6"></i></span>`;
}
const VIRT_PALETTE = ['#06b6d4','#8b5cf6','#10b981','#f59e0b','#3b82f6','#14b8a6','#6366f1','#a855f7','#22c55e','#eab308'];
function stableHash(value){
let hash = 2166136261;
const text = String(value || '').trim().toLowerCase();
for(let i = 0; i < text.length; i++){
hash ^= text.charCodeAt(i);
hash = Math.imul(hash, 16777619);
}
return hash >>> 0;
}
function virtColor(type){
const key = String(type || 'unknown').trim().toLowerCase() || 'unknown';
return VIRT_PALETTE[stableHash(key) % VIRT_PALETTE.length];
}
function virtPill(type){
const raw = String(type ?? '').trim();
const text = raw || '-';
return `<span class="virt-pill" style="--virt:${virtColor(raw)}" title="虚拟化:${esc(text)}">${esc(text)}</span>`;
}
function trafficCaps(s, small){
const m = metrics(s);
const heavy = m.traffic >= 1000 * 1000 * 1000 * 1000;
return `<span class="caps-traffic duo ${heavy ? 'heavy' : 'normal'}${small ? ' sm' : ''}" title="本月下行 | 上行"><span class="half in">${humanMinMBFromB(m.monthIn)}</span><span class="half out">${humanMinMBFromB(m.monthOut)}</span></span>`;
}
function loadCellHTML(s){
const load = s.load_1 === -1 ? '' : num(s.load_1).toFixed(2);
const cores = cpuCoreLabel(s);
if(!cores) return esc(load);
return `<span class="load-with-cores" title="负载 ${esc(load)} / CPU ${esc(cores)}"><span class="load-value">${esc(load)}</span><span class="load-core-bubble">${esc(cores)}</span></span>`;
}
function gaugeHTML(type, value){
const pct = clamp(num(value), 0, 100);
const thresholds = {
@@ -317,25 +460,29 @@ function buckets(s){
}).join('')}</div>`;
}
function renderServers(){
const rows = visibleServers();
document.querySelectorAll('#serversTable th[data-sort]').forEach(th => {
th.classList.toggle('sorted-asc', th.dataset.sort === S.filters.sort && S.filters.dir === 'asc');
th.classList.toggle('sorted-desc', th.dataset.sort === S.filters.sort && S.filters.dir === 'desc');
});
$('serversBody').innerHTML = rows.map(s => {
const m = metrics(s);
function serverRowSignature(s, m){
const text = [
m.online ? 1 : 0, m.rowLevel, s.online4, s.online6, s.os,
s.name, s.type, s.location, s.uptime, s.load_1, cpuCores(s),
s.network_rx, s.network_tx, s.network_in, s.network_out, s.last_network_in, s.last_network_out,
s.cpu, s.memory_used, s.memory_total, s.hdd_used, s.hdd_total,
s.ping_10010, s.ping_189, s.ping_10086
].map(v => String(v ?? '')).join('\u001f');
return `${stableHash(text).toString(36)}:${text.length}`;
}
function serverRowHTML(s, m, signature){
const netNow = `${humanMinKBFromB(s.network_rx)} | ${humanMinKBFromB(s.network_tx)}`;
const netTotal = `${humanMinMBFromB(s.network_in)} | ${humanMinMBFromB(s.network_out)}`;
const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
return `<tr data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}" class="row-server${alertClass}${osClass(s.os)}" style="cursor:${m.online ? 'pointer' : 'default'};">
<td>${protoPill(s)}</td>
return `<tr data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}" data-sig="${esc(signature)}" class="row-server${alertClass}${osClass(s.os)}" style="cursor:${m.online ? 'pointer' : 'default'};">
<td>${protoSignal(s)}</td>
<td>${trafficCaps(s)}</td>
<td>${esc(s.name || '-')}</td>
<td>${esc(s.type || '-')}</td>
<td><span class="node-name" title="${esc(s.name || '-')}">${esc(s.name || '-')}</span></td>
<td>${virtPill(s.type)}</td>
<td>${esc(s.location || '-')}</td>
<td>${esc(s.uptime || '-')}</td>
<td>${s.load_1 === -1 ? '' : num(s.load_1).toFixed(2)}</td>
<td>${loadCellHTML(s)}</td>
<td>${netNow}</td>
<td>${netTotal}</td>
<td>${m.online ? gaugeHTML('cpu', s.cpu) : '-'}</td>
@@ -343,21 +490,49 @@ function renderServers(){
<td>${m.online ? gaugeHTML('hdd', m.hddPct) : '-'}</td>
<td>${buckets(s)}</td>
</tr>`;
}).join('') || `<tr><td colspan="13" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`;
document.querySelectorAll('#serversBody .row-server').forEach(row => row.addEventListener('click', () => {
if(row.dataset.online !== '1') return;
openDetail(row.dataset.key);
}));
}
function renderServers(){
const rows = visibleServers();
const tbody = $('serversBody');
document.querySelectorAll('#serversTable th[data-sort]').forEach(th => {
th.classList.toggle('sorted-asc', th.dataset.sort === S.filters.sort && S.filters.dir === 'asc');
th.classList.toggle('sorted-desc', th.dataset.sort === S.filters.sort && S.filters.dir === 'desc');
});
if(!rows.length){
if(tbody.dataset.empty !== 'servers'){
tbody.innerHTML = `<tr class="empty-row"><td colspan="13" class="muted" style="text-align:center;padding:1rem;">无数据</td></tr>`;
tbody.dataset.empty = 'servers';
}
return;
}
delete tbody.dataset.empty;
tbody.querySelector('.empty-row')?.remove();
const existing = new Map([...tbody.querySelectorAll('tr.row-server')].map(row => [row.dataset.key, row]));
const desiredKeys = new Set(rows.map(s => s._key));
existing.forEach((row, key) => { if(!desiredKeys.has(key)) row.remove(); });
rows.forEach(s => {
const key = String(s._key);
const m = metrics(s);
const signature = serverRowSignature(s, m);
const current = existing.get(key);
let row = current;
if(!row || row.dataset.sig !== signature){
row = htmlElement(serverRowHTML(s, m, signature));
if(current) current.replaceWith(row);
}
tbody.appendChild(row);
});
}
function renderServersCards(){
const wrap = $('serversCards');
if(window.innerWidth > 700){ wrap.innerHTML = ''; return; }
wrap.innerHTML = visibleServers().map(s => {
const m = metrics(s);
const alertClass = m.rowLevel ? ` alert-${m.rowLevel}` : '';
const spec = serverSpecLabel(s);
return `<div class="card${m.online ? '' : ' offline'}${alertClass}${osClass(s.os)}" data-key="${esc(s._key)}" data-online="${m.online ? 1 : 0}">
<div class="card-header"><div class="card-title">${esc(s.name || '-')} <span class="tag">${esc(s.location || '-')}</span></div>${protoPill(s)}</div>
<div class="card-header"><div class="card-title">${esc(s.name || '-')}${spec ? `<span class="card-spec-chip" title="CPU 核心 / 总内存">${esc(spec)}</span>` : ''} <span class="tag">${esc(s.location || '-')}</span></div>${protoPill(s)}</div>
<div class="kvlist">
<div><span class="key">负载</span><span>${s.load_1 === -1 ? '' : num(s.load_1).toFixed(2)}</span></div>
<div><span class="key">在线</span><span>${esc(s.uptime || '-')}</span></div>
@@ -369,10 +544,6 @@ function renderServersCards(){
${buckets(s)}
</div>`;
}).join('') || '<div class="empty-state">无数据</div>';
wrap.querySelectorAll('.card').forEach(card => card.addEventListener('click', () => {
if(card.dataset.online !== '1') return;
openDetail(card.dataset.key);
}));
}
function parseCustom(str){
@@ -433,10 +604,12 @@ function refreshDetail(){
if(!s){ closeDetail(); return; }
const m = metrics(s);
const title = $('detailTitle');
title.innerHTML = `${esc(s.name || '-')} 详情${s.os ? `<span class="os-chip${osClass(s.os)}">${esc(osLabel(s.os))}</span>` : ''}`;
const spec = serverSpecLabel(s);
const cpuModel = cpuModelLabel(s);
const shortModel = shortCpuModel(cpuModel);
title.innerHTML = `${esc(s.name || '-')} 详情${s.os ? `<span class="os-chip${osClass(s.os)}">${esc(osLabel(s.os))}</span>` : ''}${spec ? `<span class="spec-chip" title="CPU 核心 / 总内存">${esc(spec)}</span>` : ''}${cpuModel ? `<span class="cpu-model-chip" title="${esc(cpuModel)}">${esc(shortModel)}</span>` : ''}`;
const modalBox = document.querySelector('#detailModal .modal-box');
if(modalBox){
modalBox.classList.remove('high-load');
modalBox.classList.toggle('alert-critical', m.rowLevel === 'critical');
modalBox.classList.toggle('alert-warning', m.rowLevel === 'warning');
}
@@ -538,9 +711,10 @@ function bindTabs(){
if(e.target.tagName !== 'BUTTON') return;
const tab = e.target.dataset.tab;
S.activeTab = tab;
scheduleServersRender.cancel();
document.querySelectorAll('.nav button').forEach(btn => btn.classList.toggle('active', btn === e.target));
document.querySelectorAll('.panel').forEach(panel => panel.classList.toggle('active', panel.id === 'panel-' + tab));
$('serversToolbar').style.display = tab === 'servers' ? 'flex' : 'none';
renderActivePanel();
if(tab === 'config') ensureAdminChecked();
});
}
@@ -559,30 +733,43 @@ function bindTheme(){
});
}
function bindFilters(){
$('serverSearch').addEventListener('input', e => { S.filters.query = e.target.value; renderServers(); renderServersCards(); });
$('serverSearch').addEventListener('input', e => { S.filters.query = e.target.value; scheduleServersRender(); });
$('statusFilter').addEventListener('click', e => {
if(e.target.tagName !== 'BUTTON') return;
S.filters.status = e.target.dataset.filter;
document.querySelectorAll('#statusFilter button').forEach(btn => btn.classList.toggle('active', btn === e.target));
renderServers(); renderServersCards();
renderServersViewNow();
});
$('osFilter').addEventListener('change', e => { S.filters.os = e.target.value; renderServers(); renderServersCards(); });
$('osFilter').addEventListener('change', e => { S.filters.os = e.target.value; renderServersViewNow(); });
$('osFilter').addEventListener('blur', renderOsOptions);
$('sortSelect').addEventListener('change', e => { S.filters.sort = e.target.value; renderServers(); renderServersCards(); });
$('sortSelect').addEventListener('change', e => { S.filters.sort = e.target.value; renderServersViewNow(); });
$('sortDirection').addEventListener('click', () => {
S.filters.dir = S.filters.dir === 'desc' ? 'asc' : 'desc';
$('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';
renderServers(); renderServersCards();
renderServersViewNow();
});
document.querySelectorAll('#serversTable th[data-sort]').forEach(th => th.addEventListener('click', () => {
if(S.filters.sort === th.dataset.sort) S.filters.dir = S.filters.dir === 'desc' ? 'asc' : 'desc';
else S.filters.sort = th.dataset.sort;
$('sortSelect').value = S.filters.sort;
$('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';
renderServers(); renderServersCards();
renderServersViewNow();
}));
}
function bindServerInteractions(){
$('serversBody').addEventListener('click', e => {
const row = e.target.closest('.row-server');
if(!row || row.dataset.online !== '1') return;
openDetail(row.dataset.key);
});
$('serversCards').addEventListener('click', e => {
const card = e.target.closest('.card[data-key]');
if(!card || card.dataset.online !== '1') return;
openDetail(card.dataset.key);
});
}
function adminHeaders(){
return { 'Content-Type': 'application/json', 'Authorization': `Bearer ${S.admin.token}` };
}
@@ -731,6 +918,10 @@ function renderConfigEditor(item){
$('configEditorTitle').textContent = `${editing ? '编辑' : '新增'}${def.label}`;
$('configEditorHint').textContent = def.hint;
$('configFields').innerHTML = def.fields.map(field => fieldHTML(field, current)).join('');
const resetTrafficBtn = $('resetTrafficBtn');
const canResetTraffic = editing && S.admin.selectedType === 'servers';
resetTrafficBtn.style.display = canResetTraffic ? '' : 'none';
resetTrafficBtn.disabled = !canResetTraffic || S.admin.saving;
$('deleteConfigItemBtn').disabled = !editing;
}
function fieldHTML(field, item){
@@ -804,6 +995,28 @@ async function deleteConfigItem(key, index){
S.admin.saving = false;
}
}
async function resetServerTraffic(index){
const server = configItems()[index];
if(!server) return setAdminStatus('请先选择要重置月流量的节点。', 'err');
const title = server.name || server.username || '未命名节点';
if(!confirm(`将节点 ${title} 的月流量重置为 0?该操作会重启采集服务以写入当前流量基准。`)) return;
S.admin.saving = true;
S.suppressStatsReloadUntil = Date.now() + 10000;
renderConfigEditor(server);
try{
const data = await api(`/api/servers/${encodeURIComponent(server.username)}/reset-traffic`, { method:'POST' });
const beforeIn = humanMinMBFromB(data.stats?.month_in_before || 0);
const beforeOut = humanMinMBFromB(data.stats?.month_out_before || 0);
setAdminStatus(`${title} 月流量已重置为 0(重置前 ↓${beforeIn} / ↑${beforeOut})。`, 'ok');
setTimeout(fetchData, 1500);
}catch(err){
setAdminStatus('重置月流量失败:' + err.message, 'err');
}finally{
S.admin.saving = false;
S.suppressStatsReloadUntil = Date.now() + 8000;
renderConfigEditor(configItems()[S.admin.selectedIndex]);
}
}
function bindAdmin(){
$('adminToken').value = S.admin.token;
$('adminTokenForm').addEventListener('submit', async e => {
@@ -822,6 +1035,7 @@ function bindAdmin(){
});
$('addConfigItemBtn').addEventListener('click', clearConfigForm);
$('resetConfigFormBtn').addEventListener('click', clearConfigForm);
$('resetTrafficBtn').addEventListener('click', () => resetServerTraffic(S.admin.selectedIndex));
$('adminReload').addEventListener('click', async () => {
try{ await api('/api/reload', { method:'POST' }); setAdminStatus('配置重载已触发。', 'ok'); }
catch(err){ setAdminStatus('重载失败:' + err.message, 'err'); }
@@ -864,11 +1078,19 @@ function bindAdmin(){
$('detailClose').addEventListener('click', closeDetail);
$('detailModal').addEventListener('click', e => { if(e.target.id === 'detailModal') closeDetail(); });
window.addEventListener('resize', () => { renderServersCards(); renderMonitorsCards(); renderSSLCards(); if(S.openDetailKey) refreshDetail(); });
window.addEventListener('resize', debounce(() => {
const compact = isCompactLayout();
if(S.layoutCompact !== compact){
S.layoutCompact = compact;
renderActivePanel();
}
if(S.openDetailKey) refreshDetail();
}, 120));
bindTabs();
bindTheme();
bindFilters();
bindServerInteractions();
bindAdmin();
fetchData();
setInterval(fetchData, 1000);