jianf/HomeAgent
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/HomeAgent.git synced 2026-09-22 18:08:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): priority 图补上「排队输入」这一类（用户指出的漏项）

Browse Source 
## 漏项

文案写「输入走两条路」，但图上只有 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
This commit is contained in:
JianFeeeee
2026-09-20 10:39:53 +08:00
parent 88923ed663
commit ca6f4c510c
1 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
site/index.html
View File

@ -69,6 +69,9 @@
--fig-inner-bottom: rgba(0, 0, 0, 0.35); --fig-inner-bottom: rgba(0, 0, 0, 0.35);
--fig-glow: rgba(56, 189, 248, 0.10); --fig-glow: rgba(56, 189, 248, 0.10);
--fig-grain: 0.16; --fig-grain: 0.16;
/* 排队列：不能直接用 gCard —— 浅色下 gCard 是白的，
在白色玻璃面板上等于看不见。给一个独立色调。 */
--dv-queue-item: rgba(119, 128, 154, 0.22);
--code-bg: rgba(6, 10, 22, 0.85); --code-bg: rgba(6, 10, 22, 0.85);
--code-fg: #cdd3f5; --code-fg: #cdd3f5;
--nav-bg: rgba(7, 11, 22, 0.72); --nav-bg: rgba(7, 11, 22, 0.72);
@ -106,6 +109,7 @@
--fig-inner-bottom: rgba(15, 23, 42, 0.06); --fig-inner-bottom: rgba(15, 23, 42, 0.06);
--fig-glow: rgba(37, 99, 235, 0.08); --fig-glow: rgba(37, 99, 235, 0.08);
--fig-grain: 0.08; --fig-grain: 0.08;
--dv-queue-item: rgba(37, 99, 235, 0.13);
--text: #0d1526; --text: #0d1526;
--text-dim: #48546c; --text-dim: #48546c;
--text-muted: #78849a; --text-muted: #78849a;
@ -601,6 +605,21 @@
text-anchor: middle; text-anchor: middle;
letter-spacing: 0.08em; 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) { @media (prefers-reduced-motion: no-preference) {
.dv-pkdot { animation: pkPulse 1.8s ease-in-out infinite; } .dv-pkdot { animation: pkPulse 1.8s ease-in-out infinite; }
@keyframes pkPulse { @keyframes pkPulse {
@ -1877,52 +1896,62 @@
</p> </p>
</div> </div>
<div class="alt-visual"> <div class="alt-visual">
<svg viewBox="0 0 360 250" role="img" aria-label="四级中断与抢占"> <svg viewBox="0 0 360 250" role="img" aria-label="输入分排队与中断两类别，中断带 L1–L4 四级">
<!-- 背景：强度条形，从 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"> <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"> <g class="dv-gauge-fill">
<rect x="34" y="139" width="292" height="47" rx="0" class="dv-g1" /> <rect x="14" y="120" width="160" height="30" class="dv-g1" />
<rect x="34" y="104" width="292" height="35" rx="0" class="dv-g2" /> <rect x="14" y="90" width="160" height="30" class="dv-g2" />
<rect x="34" y="75" width="292" height="29" rx="0" class="dv-g3" /> <rect x="14" y="60" width="160" height="30" class="dv-g3" />
<rect x="34" y="26" width="292" height="49" rx="0" class="dv-g4" /> <rect x="14" y="26" width="160" height="34" class="dv-g4" />
</g> </g>
</g> </g>
<!-- 四级：每级一条，左侧级别、右侧语义 -->
<g class="dv-lv"> <g class="dv-lv">
<rect class="dv-box dv-l4" x="46" y="32" width="268" height="37" rx="8" /> <rect class="dv-box dv-l4" x="22" y="31" width="144" height="24" rx="6" />
<text class="dv-badge" x="62" y="56">L4</text> <text class="dv-badge" x="32" y="47">L4</text>
<text class="dv-tsl" x="94" y="56">内核独占 · 立即打断</text> <text class="dv-tsl" x="56" y="47">内核独占</text>
<text class="dv-end" x="298" y="56">panic</text>
<rect class="dv-box dv-l3" x="46" y="75" width="268" height="29" rx="8" /> <rect class="dv-box dv-l3" x="22" y="61" width="144" height="24" rx="6" />
<text class="dv-badge" x="62" y="95">L3</text> <text class="dv-badge" x="32" y="77">L3</text>
<text class="dv-tsl" x="94" y="95">需及时处理</text> <text class="dv-tsl" x="56" y="77">需及时处理</text>
<text class="dv-end" x="298" y="95">交互</text>
<rect class="dv-box dv-l2" x="46" y="110" width="268" height="29" rx="8" /> <rect class="dv-box dv-l2" x="22" y="91" width="144" height="24" rx="6" />
<text class="dv-badge" x="62" y="130">L2</text> <text class="dv-badge" x="32" y="107">L2</text>
<text class="dv-tsl" x="94" y="130">消息类</text> <text class="dv-tsl" x="56" y="107">消息类</text>
<text class="dv-end" x="298" y="130">QQ / 邮件</text>
<rect class="dv-box dv-l1" x="46" y="145" width="268" height="29" rx="8" /> <rect class="dv-box dv-l1" x="22" y="121" width="144" height="24" rx="6" />
<text class="dv-badge" x="62" y="165">L1</text> <text class="dv-badge" x="32" y="137">L1</text>
<text class="dv-tsl" x="94" y="165">完全可等</text> <text class="dv-tsl" x="56" y="137">完全可等</text>
<text class="dv-end" x="298" y="165">批量任务</text>
</g> </g>
<!-- 抢占：从级别条右侧指向「正在跑」，语义是「有更高优先级来抢」 <!-- 右列：排队。无级别，故用虚线框与素色条，与左侧拉开区分 -->
标签必须留在 viewBox 内侧：玻璃面板有内边距， <rect class="dv-queue" x="186" y="26" width="160" height="124" rx="9" />
贴边（x=349）会被裁掉。 --> <g class="dv-qitem">
<path class="dv-pk" d="M322 100 H332 V213 H314" /> <rect x="198" y="38" width="136" height="17" rx="4" />
<circle class="dv-pkdot" r="3.5" cx="322" cy="100" /> <rect x="198" y="59" width="136" height="17" rx="4" />
<text class="dv-pkcap" x="341" y="160" transform="rotate(90 341 160)">抢占</text> <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> <path class="dv-line" d="M94 150 V176 H180" />
<text class="dv-end" x="298" y="209">被抢占</text> <path class="dv-line" d="M266 150 V176 H180" />
<text class="dv-s" x="180" y="226">现场压入中断栈 · 稍后从栈顶原样恢复</text> <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> </svg>
</div> </div>
</div> </div>