Skip to content

Latest commit

 

History

History
75 lines (55 loc) · 4.96 KB

File metadata and controls

75 lines (55 loc) · 4.96 KB

GUI 筆記

DESIGN.md 已刪除(多數內容是 impeccable 設計工具的過程紀錄:從畫布回寫的宣告、 種子 key、被否決的挑戰者清單,對之後維護這份程式碼沒有幫助)。這裡只留下真的 有工程意義、後續改 src/ui/app.css 與 src/ui/app.js 時用得到的規則。

席位編碼:等明度、等彩度,只變色相

值 oklch 對 #1b1f26(機架底)的對比度
SUB 訂閱 #43a08e 0.645 0.092 178.4 5.24:1
PRV 第三方 #ad8649 0.645 0.092 77.5 4.95:1

兩者的 L 與 C 逐位相同,只有色相(hue)不同 —— 因為訂閱與第三方沒有高下之分, 哪一邊在畫面上更搶眼都是說謊。改配色時要維持這個等式,不要只憑肉眼調亮度。

告警色 #e0563c(oklch 0.631 0.178 32.7)是唯一被允許打破這個色階的顏色: 明度落在兩個席位色附近,但彩度是它們的 1.93 倍,所以它一出現就代表被擋下了。 小級數文字用 --alarm-ink #e8705a(對比度 4.9:1),色塊與粗體標題才用原色。

prefers-reduced-motion

全部動畫包在 @media (prefers-reduced-motion: reduce) 的關閉分支裡(見 app.css 的 .slot, .strip, .band > div, .load > i, .clearance { transition: none } 與 .slot.fresh > .strip { animation: none })。閒置時整面板本來就是死的,會動的只有 三件事:新進條印進機架的下滑淡入、進條推出/收回的位移、分流帶每一段的寬度變化 —— 這三個在 reduced-motion 下全部關掉,不做退化成「變慢」的處理,直接消失。

重繪會換掉整個 #view,焦點要自己放回去

render() 用 innerHTML 整頁重畫,機架與流量分頁每 3 秒輪詢一次。innerHTML 會把焦點 丟回 body,所以 render() 換之前記下焦點所在控制項的選擇器(data-act/data-key/ data-f 加上外層的 data-eid/data-rid/data-pid,文字欄位連游標位置),換完放回去。 新增可聚焦的控制項時要帶這些 data 屬性之一,否則重繪後焦點會掉。使用者在 #view 裡選字時 輪詢跳過那一輪,不然選取會被換掉。

等寬字堆疊(--data)要在 monospace 之前列出漢字字型

等寬字族(Cascadia Mono / Consolas / SF Mono / Menlo)沒有任何漢字。字堆疊裡沒列 漢字字型的話,中文會一路掉到泛用的 monospace、由瀏覽器隨便挑,跟同一行的拉丁字母 分屬兩個無關字族。以前的做法是「.num 不准套在中文上」,但這條規則守不住:額度窗、 批註欄、送出的 model 這些欄位的值有時是翻譯字串,還是會套到等寬字。現在 --data 在 monospace 之前列了 JhengHei/Noto Sans TC/PingFang TC,中文逐字掉到它們身上; .num 仍然只該給對齊用的數字與 token,中文說明照樣走 .hint / .han。

功能性文字最小 11px

標牌 .lbl、旗標、圖例、按鈕(含 .btn.tiny)、批註欄名都算。壓縮字體在 10px 以下的高 DPI 與小視窗上讀不出來。旗標另外要實色、不用透明度 —— 它是「顏色不是唯 一訊號」的承載點,自己不能掉到對比地板以下。

模擬出來的狀態不能長得像常態

路由分頁機架上的 HIT / SHDW / PASS 是「跑過一次排程預覽」的答案,不是規則 自身的狀態。沒跑過預覽就一條都不標,每條只印自己的 ON / OFF —— 一進畫面就把 第一條點亮、其餘壓暗,會被讀成「下面那幾條規則不會生效」。標記亮著的時候,抬頭掛 一塊模擬中的標示連同這次模擬的條件,旁邊給一顆收掉它的鍵;規則一改就把整組標記收 掉,因為模擬只描述按下預覽當下的那份規則。

Provider 測試的結果列依「壞掉的樣子」分兩種

沿用機架的位置語彙:必要項目沒過(Claude Code 跑不起來)是 hold +告警色標籤 塊;能力項目沒過(跑得起來、只是某個能力靜默失效)是 chk,推出 14px、標籤塊維 持導軌灰(上面用淺色字,深色字只有 1.9:1),不發告警色。兩種都印 FAIL,差別在位置 與框,每一列另外印出它屬於必要還是能力。把「看不到 PDF」畫得跟「連不上」一樣響,就是在誇大。 無法判定(模型沒給出測試讀得懂的回覆)印 N/A、放在 chk 的位置:它沒證明 provider 壞了。

結論放在各列上面:先回答「能不能用」,細節才往下看。測試之後改了這個 provider 的任何欄位, 結果壓暗並標出「這是舊設定的結果」—— 不重繪(游標會跳走),直接改那幾個節點。

席位卡的快取命中格

沿用「在途請求」那一格的形式(大數字+兩行標牌),不另做量表或圓環:它是一個比 例,而分母(tokens)就印在下一行。沒有用量資料時印 –,不印 0% —— 那會被讀成 「快取全沒命中」。