From ca6f4c510c8c71f3f8745fe110aa4d65f6a2e4a7 Mon Sep 17 00:00:00 2001
From: JianFeeeee <JianFeeeee@users.noreply.gitcode.com>
Date: Sun, 20 Sep 2026 10:39:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(site):=20priority=20=E5=9B=BE=E8=A1=A5?=
 =?UTF-8?q?=E4=B8=8A=E3=80=8C=E6=8E=92=E9=98=9F=E8=BE=93=E5=85=A5=E3=80=8D?=
 =?UTF-8?q?=E8=BF=99=E4=B8=80=E7=B1=BB=EF=BC=88=E7=94=A8=E6=88=B7=E6=8C=87?=
 =?UTF-8?q?=E5=87=BA=E7=9A=84=E6=BC=8F=E9=A1=B9=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 漏项

文案写「输入走两条路」，但图上只有 L1–L4 —— **排队的完全没出现**。
源码 `scheduler.go` 开篇就写明是**两类别**：

- TaskInterrupt（InjectInterrupt*）：带 L1..L4，可抢占
- TaskQueued（InjectText*/InjectInputSync*）：**无级别**，可被任何中断打断

「级别只属于中断」是这套调度模型的关键一句，图里不表达就等于漏了一半。

## 改法

图改成左右两列，标题直接写清差异：

    中断 · 带级别            排队 · 无级别
    ├ L4 内核独占            ├ 队列条（先到先处理）
    ├ L3 需及时处理          └ 任何中断都能插它前面
    ├ L2 消息类                      │
    └ L1 完全可等                     │
        └───────────┬──────────────┘
                正在跑的任务

- 排队列用**虚线框 + 素色条**（不发光），与左侧的实线发光级别条刻意区分 ——
  「无级别」这件事本身就该在视觉上体现
- 两路汇入「正在跑的任务」，并标注「同一时刻只一个」

## 顺带修的两处

- **浅色下排队条看不见**：原先复用 `gCard`，而浅色下 gCard 是白的，
  白底白条等于没画。改用独立的 `--dv-queue-item` 令牌
- **横向虚线穿过队列条**：原想表达「处理方向」，结果画在了条内部。
  改为右侧竖线 + 向下箭头

## 验证

- 双主题：控制台错误 0、横向溢出 0、图元零越界
- 一滑一页仍生效；JS 禁用 24/24 可见；reduce 下吸附停用
- 390/768/1440 溢出均 0
---
 site/index.html | 99 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 35 deletions(-)

diff --git a/site/index.html b/site/index.html
index 28cc11c..2c81e11 100644
--- a/site/index.html
+++ b/site/index.html
@@ -69,6 +69,9 @@
         --fig-inner-bottom: rgba(0, 0, 0, 0.35);
         --fig-glow: rgba(56, 189, 248, 0.10);
         --fig-grain: 0.16;
+        /* 排队列：不能直接用 gCard —— 浅色下 gCard 是白的，
+           在白色玻璃面板上等于看不见。给一个独立色调。 */
+        --dv-queue-item: rgba(119, 128, 154, 0.22);
         --code-bg: rgba(6, 10, 22, 0.85);
         --code-fg: #cdd3f5;
         --nav-bg: rgba(7, 11, 22, 0.72);
@@ -106,6 +109,7 @@
         --fig-inner-bottom: rgba(15, 23, 42, 0.06);
         --fig-glow: rgba(37, 99, 235, 0.08);
         --fig-grain: 0.08;
+        --dv-queue-item: rgba(37, 99, 235, 0.13);
         --text: #0d1526;
         --text-dim: #48546c;
         --text-muted: #78849a;
@@ -601,6 +605,21 @@
         text-anchor: middle;
         letter-spacing: 0.08em;
       }
+      /* 排队类：无级别，用虚线框 + 不发光，与中断类刻意拉开 */
+      .dv-queue {
+        fill: none;
+        stroke: var(--border);
+        stroke-width: 1.3;
+        stroke-dasharray: 5 4;
+      }
+      .dv-qitem { fill: var(--dv-queue-item); opacity: 0.95; }
+      /* 处理方向指示 */
+      .dv-qdir { fill: none; stroke: var(--text-muted); stroke-width: 1.2; opacity: 0.6; }
+      .dv-qdir-tip { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
+      /* 两列标题 */
+      .dv-colcap { fill: var(--text-dim); font-size: 10px; text-anchor: middle; letter-spacing: 0.04em; }
+      .dv-colcap-dim { fill: var(--text-muted); }
+      .dv-caps { fill: var(--text-muted); font-size: 8.8px; text-anchor: middle; }
       @media (prefers-reduced-motion: no-preference) {
         .dv-pkdot { animation: pkPulse 1.8s ease-in-out infinite; }
         @keyframes pkPulse {
@@ -1877,52 +1896,62 @@
               </p>
             </div>
             <div class="alt-visual">
-              <svg viewBox="0 0 360 250" role="img" aria-label="四级中断与抢占">
-                <!-- 背景：强度条形，从 L1 到 L4 逐级变亮，用高度表现「紧迫度」 -->
+              <svg viewBox="0 0 360 250" role="img" aria-label="输入分排队与中断两类别，中断带 L1–L4 四级">
+                <!-- 两列标题 -->
+                <text class="dv-colcap" x="94" y="20">中断 · 带级别</text>
+                <text class="dv-colcap dv-colcap-dim" x="266" y="20">排队 · 无级别</text>
+
+                <!-- 左列：四级中断。强度条做背景，越靠上越亮 -->
                 <g class="dv-gauge">
-                  <rect class="dv-gauge-bg" x="34" y="26" width="292" height="160" rx="10" />
+                  <rect class="dv-gauge-bg" x="14" y="26" width="160" height="124" rx="9" />
                   <g class="dv-gauge-fill">
-                    <rect x="34" y="139" width="292" height="47" rx="0" class="dv-g1" />
-                    <rect x="34" y="104" width="292" height="35" rx="0" class="dv-g2" />
-                    <rect x="34" y="75"  width="292" height="29" rx="0" class="dv-g3" />
-                    <rect x="34" y="26"  width="292" height="49" rx="0" class="dv-g4" />
+                    <rect x="14" y="120" width="160" height="30" class="dv-g1" />
+                    <rect x="14" y="90"  width="160" height="30" class="dv-g2" />
+                    <rect x="14" y="60"  width="160" height="30" class="dv-g3" />
+                    <rect x="14" y="26"  width="160" height="34" class="dv-g4" />
                   </g>
                 </g>
-
-                <!-- 四级：每级一条，左侧级别、右侧语义 -->
                 <g class="dv-lv">
-                  <rect class="dv-box dv-l4" x="46" y="32" width="268" height="37" rx="8" />
-                  <text class="dv-badge" x="62" y="56">L4</text>
-                  <text class="dv-tsl" x="94" y="56">内核独占 · 立即打断</text>
-                  <text class="dv-end" x="298" y="56">panic</text>
+                  <rect class="dv-box dv-l4" x="22" y="31" width="144" height="24" rx="6" />
+                  <text class="dv-badge" x="32" y="47">L4</text>
+                  <text class="dv-tsl" x="56" y="47">内核独占</text>
 
-                  <rect class="dv-box dv-l3" x="46" y="75" width="268" height="29" rx="8" />
-                  <text class="dv-badge" x="62" y="95">L3</text>
-                  <text class="dv-tsl" x="94" y="95">需及时处理</text>
-                  <text class="dv-end" x="298" y="95">交互</text>
+                  <rect class="dv-box dv-l3" x="22" y="61" width="144" height="24" rx="6" />
+                  <text class="dv-badge" x="32" y="77">L3</text>
+                  <text class="dv-tsl" x="56" y="77">需及时处理</text>
 
-                  <rect class="dv-box dv-l2" x="46" y="110" width="268" height="29" rx="8" />
-                  <text class="dv-badge" x="62" y="130">L2</text>
-                  <text class="dv-tsl" x="94" y="130">消息类</text>
-                  <text class="dv-end" x="298" y="130">QQ / 邮件</text>
+                  <rect class="dv-box dv-l2" x="22" y="91" width="144" height="24" rx="6" />
+                  <text class="dv-badge" x="32" y="107">L2</text>
+                  <text class="dv-tsl" x="56" y="107">消息类</text>
 
-                  <rect class="dv-box dv-l1" x="46" y="145" width="268" height="29" rx="8" />
-                  <text class="dv-badge" x="62" y="165">L1</text>
-                  <text class="dv-tsl" x="94" y="165">完全可等</text>
-                  <text class="dv-end" x="298" y="165">批量任务</text>
+                  <rect class="dv-box dv-l1" x="22" y="121" width="144" height="24" rx="6" />
+                  <text class="dv-badge" x="32" y="137">L1</text>
+                  <text class="dv-tsl" x="56" y="137">完全可等</text>
                 </g>
 
-                <!-- 抢占：从级别条右侧指向「正在跑」，语义是「有更高优先级来抢」
-                     标签必须留在 viewBox 内侧：玻璃面板有内边距，
-                     贴边（x=349）会被裁掉。 -->
-                <path class="dv-pk" d="M322 100 H332 V213 H314" />
-                <circle class="dv-pkdot" r="3.5" cx="322" cy="100" />
-                <text class="dv-pkcap" x="341" y="160" transform="rotate(90 341 160)">抢占</text>
+                <!-- 右列：排队。无级别，故用虚线框与素色条，与左侧拉开区分 -->
+                <rect class="dv-queue" x="186" y="26" width="160" height="124" rx="9" />
+                <g class="dv-qitem">
+                  <rect x="198" y="38" width="136" height="17" rx="4" />
+                  <rect x="198" y="59" width="136" height="17" rx="4" />
+                  <rect x="198" y="80" width="136" height="17" rx="4" />
+                </g>
+                <!-- 处理方向：左侧竖线 + 向下箭头，表示先到先处理
+                     （之前在条内画横向虚线，等于穿过了第一个队列条） -->
+                <path class="dv-qdir" d="M340 38 V97" />
+                <path class="dv-qdir-tip" d="M336 93 L340 98 L344 93" />
+                <text class="dv-cap" x="266" y="114">先到先处理</text>
+                <text class="dv-caps" x="266" y="130">任何中断都能插它前面</text>
 
-                <rect class="dv-box dv-run" x="46" y="192" width="268" height="42" rx="9" />
-                <text class="dv-tsl" x="62" y="209">正在跑的任务</text>
-                <text class="dv-end" x="298" y="209">被抢占</text>
-                <text class="dv-s" x="180" y="226">现场压入中断栈 · 稍后从栈顶原样恢复</text>
+                <!-- 两路汇入正在跑的任务 -->
+                <path class="dv-line" d="M94 150 V176 H180" />
+                <path class="dv-line" d="M266 150 V176 H180" />
+                <path class="dv-arrow" d="M180 176 V186" />
+
+                <rect class="dv-box dv-run" x="40" y="188" width="280" height="38" rx="9" />
+                <text class="dv-tsl" x="58" y="204">正在跑的任务</text>
+                <text class="dv-end" x="302" y="204">同一时刻只一个</text>
+                <text class="dv-caps" x="180" y="220">被打断的现场压入中断栈，稍后原样恢复</text>
               </svg>
             </div>
           </div>