From eee01220925e3b17908f39f80edeaa8d88dac60a Mon Sep 17 00:00:00 2001
From: root <root@qq.com>
Date: Tue, 11 Aug 2026 17:06:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20status=20pie=20=E2=80=94=20draw=20tr?=
 =?UTF-8?q?ue=20annulus=20slices=20(hollow=20center),=20fixes=20yellow=20b?=
 =?UTF-8?q?lob?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The center 'hole' was faked by overpainting a small circle with var(--card), which exposed a yellow/warm card background blob and a visible seam. Now each slice is a real ring sector (outer+inner arc, reverse) so the center is genuinely transparent and matches the card. Deployed (bak .bak.20260811p), server active.
---
 internal/gateway/ui/index.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/internal/gateway/ui/index.html b/internal/gateway/ui/index.html
index c0cc5ac..b59f1d0 100644
--- a/internal/gateway/ui/index.html
+++ b/internal/gateway/ui/index.html
@@ -966,24 +966,22 @@ function drawStatusChart(rows) {
   const total = (rows||[]).reduce((a,x)=>a+x.reqs,0);
   if (!total) return;
   const palette = ['#3fb27f', '#4fa3d8', '#f0a45c', '#e06c6c', '#b06ce0', '#8a9bb5', '#6fbfa0', '#d0a45c'];
-  const r = Math.min(rect.width, H) / 2 - 2;
+  const rOut = Math.min(rect.width, H) / 2 - 2;
+  const rIn = Math.max(rOut * 0.45, 1);
   const cx = rect.width / 2, cy = H / 2;
   let a0 = -Math.PI / 2;
   rows.forEach((row, i) => {
     const sweep = row.reqs / total * Math.PI * 2;
+    const a1 = a0 + sweep;
     ctx.beginPath();
-    ctx.moveTo(cx, cy);
-    ctx.arc(cx, cy, r, a0, a0 + sweep);
+    // outer arc, then inner arc reversed -> true annulus slice (hollow center)
+    ctx.arc(cx, cy, rOut, a0, a1);
+    ctx.arc(cx, cy, rIn, a1, a0, true);
     ctx.closePath();
     ctx.fillStyle = palette[i % palette.length];
     ctx.fill();
-    a0 += sweep;
+    a0 = a1;
   });
-  // carve a clean center hole (donut) instead of a solid pie with a number
-  ctx.beginPath();
-  ctx.arc(cx, cy, Math.max(r * 0.45, 1), 0, Math.PI * 2);
-  ctx.fillStyle = 'var(--card)';
-  ctx.fill();
 }
 function paintKeyTable(rows, keyNames) {
   const el = $('#tb-key'); if (!el) return;