Roadmap

怎麼看這一頁

每項標了狀態與「決策／執行」是誰。有 佐證 標記的，敘述在 GUIDELINE 查得到原文。

• 待拍板16 項
• 已完成16 項
• 進行中3 項
• 短期8 項
• 中期3 項

我們這端做不了決定的事。前幾件正在擋住下游接自動安裝管線——技術上已驗通，缺的只有決定。

• 1

  安裝管線的鑰匙政策：用誰的帳號、開多大的權限、多久換一次

  擋住「下游正式接自動安裝管線」。管線已端到端驗通，缺的只有這個決定。

  GUIDELINE 明文記為「未定」。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「取用端的 token 政策」
• 2

  共同維護流程：誰能改、誰能合併、要不要加自動檢查

  要讓 HHG 端也能改這個庫得先訂規則，否則兩邊各改一份就會分岔。

  決策／執行：🔸 Anting 拍板
• 3

  組織層的 GitHub 自動化要不要開啟

  自動化程式已寫好，但組織層沒開啟就不會執行、也不會報錯，現在靠人工補。開了之後貼版本標籤就自動產生。

  決策／執行：🔸 Anting 拍板
• 4

  元件遷移的優先序

  建議的六族隊列已跑完，剩下沒開始的是檔案上傳／附件、通知面板、可編輯明細表格。我們給建議順序，哪個下游先受益是經營面的決定。

  決策／執行：🔸 Anting 拍板
• 5

  兩筆已登記的「待觀察」要不要動手

  一是 16 與 18 兩個相鄰數值階要不要收成一階；二是數值 22 同時當狀態標籤高度與說明鈕直徑，要不要拆成兩顆。

  庫的規則是「同值不同語意不合併」。22 在 GUIDELINE v1.17.0 段有登記；16／18 查不到登記，所以只用文字描述。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「同值不同語意」
• 6

  輸入框框線和底色的對比只有 1.22，看不清楚欄位在哪

  輸入框框線、未勾選的 checkbox、關閉的 switch 三個控件邊界都掉在同一個很淺的區間，而這是使用者判斷「這裡能打字」的唯一線索，沒有文字兜底。

  WCAG 非文字對比門檻 3:1；量到框線 1.22、checkbox 1.72、switch 軌 1.55。兩個方向：明文寫成「已知且刻意」，或開一個「控件邊界」專用色階（別直接加深分隔線那顆——它同時是表格線）。⊕ 同族併看四件：①輸入框沒有停用樣式；②標成錯誤時提示字不轉紅，空的必填欄位只剩提示字；③錯誤訊息文字 4.11（門檻 4.5）；④必填星號 2.48。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「三處文字對比未達 WCAG 4.5:1」
• 7

  最淺的那階文字色，換一張比較深的淺底卡片就可能看不清楚

  這階撐著全站最小的字（欄位提示、輸入框提示字、頁首副標），但沒規定它可以坐哪幾層淺底；坐在較深那層就低於門檻。

  WCAG AA 4.5:1，量到 4.42。兩個方向：加一句「只准坐最淺的兩層底色」，或整階加深（會改到既有畫面）。

  決策／執行：🔸 Anting 拍板
• 8

  橘底 CTA 按鈕上的白字，靜止態對比只有 2.66

  舊版靠 hover 換深色文字補到 8.10——用一個狀態補償靜止態，而手機沒有 hover。React 版統一模式不動前景色，問題就露出來了。

  WCAG AA 4.5:1（CTA 字 13px／500）。前景色已是獨立變數，改一顆全庫生效。三個方向：前景改深色（CTA 從此不是白字）、橘色壓暗（改品牌視覺重量）、或限定 CTA 只用大字級（3:1 門檻，2.66 仍不夠，要配更大字級才成立）。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「用狀態去補償靜止態的不合格」
• 9

  全庫的文字連結其實都不是粗體——那一行 CSS 寫錯了、整條被瀏覽器丟掉

  那條規則把「跟著繼承」塞進不接受它的簡寫，整條宣告不合法被丟棄，實測是一般粗細。連結常是表格裡唯一的鍵盤入口。

  修法是把簡寫拆成粗細、字體、行高三行。要你拍板是因為修好後全庫連結會真的變粗，那是所有採用者眼中的外觀變動；React 版目前照搬，拍板後兩層一起改。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「全庫的文字連結都不是設計者以為的 600」
• 10

  深色外框只夠畫導覽列，別的東西放上去就沒地方配色；側欄的鍵盤焦點環也直接看不見

  深色外框是預設做法不是特例，但深底只有 6 顆色階、零狀態色，要放狀態標籤／輸入框／停用項目就沒得配，而規則禁止自己調灰階。焦點環是「深環＋外圈白間隙」，側欄的底就是那個深色，環會吃進底色消失。

  深色端 6 階（文字 2、面 3、線 1），淺色端有 4 階文字，深底少了輔助說明與停用兩階。庫寫明「正確階數與值要拿實作對照著量」，拍板前最好先有一個真用到深底的頁面（可與短期的頂欄一起排）。焦點環要決定：環換色、間隙跟著底走、或跟著文字色走。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「深底中性色階梯」
• 11

  「狀態色文字對比先不用改」是針對短標籤訂的，但提示條也套用了同一條

  例外的理由是「短標籤旁邊還有別的欄位幫忙讀」，但提示條是一整段要被讀完的說明。不切開範圍，每個下游都會自己抓一次分寸。

  量到 amber 2.05、green 3.05、red 3.77（slate 6.15 過）。要拍板的是把例外縮回短標籤，並把下游的做法（底色表狀態／文字用一般字色／狀態色只上圖示）寫進提示條規範。⊕ 狀態標籤字級 11.5px、門檻 4.5，五個 tone 只有 slate 達標——短標籤本身也不合格，「縮回短標籤」要再想一次。⚠️ 灰 tone 量到的 1.00 是腳本疊底的等效值、不可信，拍板前重量。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「badge 五個 tone 的靜止態只有 slate 達標」
• 12

  進度指示現在有兩套顏色講法，下游做簽核流程設定頁時又長出第三套

  時間軸用琥珀實心圈表示「這一關還沒結束」，精靈用空心圈表示「走到第幾步」，兩套沒統一；下游又做了第三套。現在三套並存、沒有一張表統一管。

  要拍板的是分幾種語意（走到第幾步／這一關的狀態／關卡的定義），三種各配哪個顏色。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「進度指示的顏色」
• 13

  圖表這一層庫明講「不做」但沒給指引；色盤能不能加新色系也沒講——兩邊下游已各自長出一套

  庫不收資料視覺化層、也沒說色盤封不封閉，下游只能自己造：某下游的關聯圖長出一整套配色，含庫色盤沒有的藍色，同一下游的兩份文件甚至互相矛盾。

  建議一次拍兩句：①給圖表最低指引（中性色的透明度階配一個強調色、不借狀態色當分類色、字級線寬照既有階梯）②講清楚色盤是否封閉、加新語意色要不要回來登記。

  決策／執行：🔸 Anting 定規範佐證：GUIDELINE.md「本庫不含資料視覺化層」
• 14

  三筆優先序較低但已有具體證據的登記：填色成功鈕缺變體、圓角階梯少一階、決策表缺「附說明的直向單選」

  三筆現況都不算壞，但各自已有清楚的下游證據，先登記，不急著動。

  ①綠色的「成功」填色鈕缺 hover 變體，下游因此自配兩顆綠色——只補變體、深底版一起做，不推翻「三種填色 hover 先不硬統一」。②「欄位卡」與「輸入框」兩級圓角升階後同值，階梯少一階，將來要拉開沒位置。③庫刻意不做圓點單選（短選項改用分段切換），但選項要帶兩行說明時分段塞不下、下拉看不到說明——要不要開一種「附說明的選擇卡片」。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「填色成功鈕 hover」
• 15

  深色外框主面板上的圖示按鈕（例如漢堡選單鈕）會整顆消失

  深底覆寫把圖示按鈕改成半透明白字，還原規則只寫在側欄範圍內。漢堡鈕長在主面板（白底）套不到，白字疊白底整顆看不見；明細表刪列鈕、詳情頁複製單號鈕同理。

  根治做法是圖示按鈕顏色改成跟著文字色走，但會牽動所有既有採用者的淺色外觀。這次組裝先換成一般按鈕繞過，不是修好。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「深底覆寫的還原範圍」
• 16

  分頁列上的「共 N 筆」小標籤和分頁按鈕高度不一樣，同一列一高一低

  小標籤吃較矮的一級、分頁按鈕吃較高的一級，而兩者幾乎永遠同列——是「同類控件同級高度」規則的破口。

  要決定的是開一個與分頁按鈕同高的小標籤變體，還是明講兩者不該同列。

  決策／執行：🔸 Anting 拍板佐證：GUIDELINE.md「同列同高」

已進庫、發過版，接手的系統重新同步一次就會拿到。

• 整套配色換成「暖色」版本，並成為庫的預設

  分發出去之前，最後一次可以免費改整體視覺的時機。

  決策／執行：已由你拍板（v1.14.0）

• 畫面寬度的分界點從三段改成四段

  開發端已有一組 992 的用法，庫若沿用舊分界值，他們 992～1200 這段版面會無聲壞掉。

  標為「會影響既有專案」，接手的系統重新同步後要再看一次版面。

  決策／執行：已由你拍板（v1.15.0）

• 所有元件補上「手指按下去那一瞬間」的視覺回饋

  手機平板沒有滑鼠停留效果，使用者按了不知道有沒有按到。桌機外觀不變。

  決策／執行：已完成（v1.16.0）

• 下游第一份正式回饋（issue #1）全部落地

  下游數過 41 個輸入框與 35 顆按鈕，回報同列控件高度對不起來、找不到小尺寸按鈕。這一版補上同列同高對照表、三顆共用變數、小尺寸按鈕與中尺寸下拉，並訂下收變數的判準。

  決策／執行：已完成（v1.17.0）

• 發版通知機制建好了

  先前連三次發版，GitHub 上沒有可訂閱的事件。現在貼版本標籤就自動產生發布說明，固定四欄（變數／元件／行為／有無破壞性）。

  ⚠️ 下游要自己把訂閱設成「Releases」才收得到。

  決策／執行：已完成（v1.17.0 同批）

• DS 展示網站上線（就是你現在看的這個站）

  不用抓 repo，打開網頁就看到整套變數與元件的現值。

  決策／執行：已完成（v1.17.0 同批）

• 元件自動安裝管線整條走通（含私有 repo 的鑰匙）

  「帶鑰匙抓檔 → 落地 → 比對差異 → 覆寫」整條路已驗通，落地檔案與線上一致。

  正式開放給下游還缺鑰匙政策，見「待拍板」第 ① 條。

  決策／執行：已完成（驗證）

• 第一族元件（下拉選單）改寫成 React 版並完成驗收

  換底第一族，也是唯一有實測成本數字的一族：靜態計數說 11 條規則，實際遷了 25 條——族數只能當母體，不能當工作量分配。

  決策／執行：已完成佐證：GUIDELINE.md「第 1 期成本取樣」

• 換底遷移隊列的六族全部改寫完成並通過驗收（按鈕、輸入框、狀態標籤／頁籤、表格、對話框、整頁框架）

  換底主線。連同下拉選單與可搜尋下拉，React 版目前 11 支，全部雙層等值驗收通過才進管線。

  九族合計 236 條規則、5,999,504 次屬性比對，白名單外差異 0。按鈕、輸入框、狀態標籤、頁籤四族舊版沒有行為程式，以 grep 證明不存在。

  決策／執行：已完成佐證：GUIDELINE.md「236 條規則」

• 可搜尋的下拉（combobox）卡點解除，已進管線

  原本行為比對 8 步有 1 步對不上，沒過驗收就不放出去；重驗後全過，元件進管線。

  行為契約 82 條，逐步核對 81／83 列通過，未通過的兩列各有理由。可搜尋多選同檔一起收，從下拉選單族借用 18 個內部件、零複製貼上。

  決策／執行：已完成佐證：GUIDELINE.md「81/83 列通過」

• 填色按鈕的滑過效果統一成一套（只在 React 版）

  三種填色按鈕原本三種做法，這次統一成「明度往白端推進剩餘空間的固定比例」，彩度與色相不動。

  ⚠️ 舊樣式檔不動 ⇒ 過渡期兩層的滑過效果不一樣，那是刻意的。

  決策／執行：已完成佐證：GUIDELINE.md「填色成功鈕 hover／active 的統一模式 — 結案（僅 React 層）」

• 下拉選單「向上展開」的變體（只在 React 版）

  選單開在畫面下緣會被切掉，是採用登記表上掛最久的欠條。現在自動判斷方向，也留了強制指定的開關。

  ⚠️ 舊樣式檔零改動 ⇒ 吃舊樣式的採用端看不到。⚠️ 還有一件沒收：下拉有 200px 最小寬度，工具列上的窄篩選光寫寬度沒用。

  決策／執行：已完成佐證：GUIDELINE.md「select 選單向上展開 — 結案（僅 React 層）」

• 變數轉換程式收成一份，放進 repo 根

  同一件事原本 repo 一份、網站一份，長期一定分岔而且不報錯。現在收成一份放 repo 根，網站呼叫它（等值以檔案雜湊逐字證明）。

  另補 6 項出廠檢查，任一不過網站 build 就失敗。

  決策／執行：已完成佐證：GUIDELINE.md「同規格兩份實作結清」

• 寫一份不綁框架的行為規格

  原本規格只保證 React 版怎麼做，非 React 下游只能自己猜。現在 12 族各有一份一步一斷言的編號步驟。

  合計 406 條步驟、39 筆已知矛盾照實寫下來。⚠️ 表單驗證的無障礙語意還沒併進來——那是全庫唯一「顏色是單一資訊管道」的地方。

  決策／執行：已完成佐證：GUIDELINE.md「新文件：行為規格 12 族 ＋ 採用策略」

• 下游銜接：採購系統（用另一套 UI 套件）的換底策略

  那個系統不能直接吃 React 版元件。策略文件建議漸進換過來——只有這條路能讓「DS 改了什麼」變成一道可跑的指令，其他兩條都得靠人讀 diff。

  ⚠️ 「拿不到元件層」的三個解除條件已到位兩個，剩下的是待拍板第 ① 條。

  決策／執行：已完成（文件已交付，執行由該專案自己排程）佐證：GUIDELINE.md「採購審核系統的採用策略」

• 網站補一頁「版本紀錄」

  原本只能去 GitHub 翻，現在網站上有一頁，非工程角色也讀得到；內容 build 時直接讀發版說明原始檔，不手抄。

  決策／執行：已完成佐證：GUIDELINE.md「build 時讀 `releases/*.md`，不手抄」

手上正在動的事。沒過驗收的不會放出去給下游。

• 元件層改寫成 React 版，舊的樣式檔一族一族退役

  舊樣式檔已凍結、不再新增元件，新元件一律寫成 React 版。過渡期兩邊不一樣是刻意的。

  ⚠️ 「元件遷移完成」與「舊樣式可以刪掉」是兩條進度。11 支遷完後舊樣式仍一條都不能刪：下拉選單與可搜尋下拉卡在舊行為程式是唯一實作；按鈕的舊行為程式與原型頁鏡射副本還在產生 markup；表格是可編輯明細表的地基；選單是通知面板的基座；輸入框被可搜尋下拉的搜尋框用著。

  決策／執行：DS 端執行佐證：GUIDELINE.md「族數進度 ≠ CSS 退役進度」

• 換底工程的規模：舊樣式檔 454 條規則，React 版目前涵蓋約 259～261 條（11 支元件）

  舊樣式檔已凍結 ⇒ 下面「短期」清單裡凡是「缺某個元件」的項目，都不能再用「補一條 CSS」結案，得排進 React 遷移的隊伍。

  母體 454 條。分子＝各族自報相加：按鈕 30、輸入框 26、狀態標籤 7、頁籤 6、分段切換 14、可搜尋下拉 21、表格 35、對話框 22、整頁框架 61、選單 14，共 236；加下拉選單 25 得 261；最多 2 條可能被兩族各算一次，故寫 259～261。行為層 12 族已核對 7 族，未動的是提示訊息、說明鈕、通知、可編輯明細表。⚠️ 舊的提示訊息（toast）本有完整無障礙語意，下游拿不到只能重寫，重寫後全站零命中。

  決策／執行：DS 端執行佐證：GUIDELINE.md「只能當母體，不能當工作量分配」

• 規範文件收成單一版本

  現在有內部版與對外版兩份，對外版是機械生成的。收成一份可以少一次「改了一邊忘了另一邊」。

  決策／執行：來源檔在 HHG 端

規模不大、方向已清楚，多半是規範要補的文字。

• 金額、日期、沒有值的時候要顯示什麼——這三件事全庫都沒有規定

  這批系統全是單據、金額、日期、筆數，各自決定的後果是同一個金額在兩個頁面長得不一樣，而且不會有人報這種 bug。

  採購系統實測：空值破折號與連字號並存、同一行甚至混用；金額三套寫法競爭，全站只有一處帶貨幣單位；日期沒裂開，因為下游自己補了共用工具並禁止各頁自拼。空值要破折號還是留白要問 Anting；千分位、小數位、日期格式可直接寫文件。

  決策／執行：DS 端執行

• 空狀態、載入失敗、篩選後查無結果——三種情況共用同一種樣子，也沒有清除篩選的出路

  現有空狀態元件只有一種結構、沒有動作區，「載入失敗，請重試」沒有元件可掛。查無資料的畫面在後台幾乎每天出現。

  採購系統實測：空狀態手刻 9 處、文案十幾種講法，只有 1 處分辨「篩選後查無結果」與「本來就沒資料」。載入態下游放棄骨架屏改整頁轉圈，而庫的規範明文不建議。

  決策／執行：DS 端執行

• 鍵盤焦點環沒有蓋到所有能點的東西；跳到主要內容、螢幕報讀的即時通知也沒人管

  焦點環規則是逐一列元件名的清單，新加的元件沒列進去就落回瀏覽器預設（唯一被完全拿掉的是輸入框，已另案登記）。跳到主要內容與即時通知是頁面級的事，庫和下游都當作不是自己的事——但外框元件已進庫，掛點就在庫裡。

  焦點環目前只覆蓋 11 個元件，圖示按鈕、側欄項目、選單項目沒列進去，用一條共用清單補齊即可、不動外觀。即時通知：庫在 toast 上做對了，但下游整套重寫後語意消失（呼叫近 30 次、屬性 0 次）。

  決策／執行：DS 端執行佐證：GUIDELINE.md「.ds-input:focus{outline:none}」

• 規定了圖示要用哪個圖庫，但沒規定同一件事該用哪一顆圖示

  指定圖庫之後線條風格統一了，但沒解決「叫什麼名字」——「編輯」在同一個圖庫裡就有三種同樣合規、畫出來卻不一樣的圖示。

  下游的語意對照自己做了兩份、彼此不同，尺寸也各用各的。要做的是一張表：編輯、刪除、複製、匯出、匯入、篩選、排序、搜尋、關閉、更多、返回、展開、通知、設定、使用者各對應哪一顆，加一句線條粗細與尺寸。挑圖示要 Anting 過目。

  決策／執行：DS 端執行

• 頂欄的高度、內容區的內距——已經有三份各自獨立的實作，還沒有共用規則

  外框元件沒有頂欄，下游已自己做了、算式還照抄庫某個原型頁的公式 ⇒ 這個高度可以收斂。內容區內距同樣：兩份實作數字完全一樣，但共用元件沒有這個內距。

  內距用到的 28 不在既有間距階梯上，收斂方向要問 Anting 一句。

  決策／執行：DS 端執行佐證：GUIDELINE.md「內容區內距」

• 清單頁點進詳情頁、詳情頁點進子單，中間沒有位置指示

  多層級頁面缺一個「現在在哪裡、怎麼回去」的元件。下游已自己做了一個看起來像頁首、其實只有一顆返回鈕的按鈕列。

  要先決定做完整麵包屑還是只做「回上一層」按鈕列——內部後台多半後者就夠，成本差很多，形態要 Anting 看過。

  決策／執行：DS 端執行

• 庫有「控件」跟「元件」，缺「頁面骨架」那一層：五個小容器全要宿主自己發明

  內容區內距、區塊垂直間距、窄畫面才顯示、分頁列容器、密集控制列容器——組一個真的頁面時這五個全會撞到，合起來只有十幾行 CSS，但每個新系統都要各寫一次。

  整頁 prototype 實測（括號內是暫時解法）：①主內容區零內距，而頁首契約寫「上內距歸宿主」（`.pp-pad`）②區塊垂直間距沒有統一來源，有些元件自帶邊距會疊加③沒有「只在窄畫面顯示」的共用寫法（`.pp-only-narrow`）④分頁列沒有容器，借工具列容器違反「只能放同一級控件」的契約（`.pp-pagebar`）⑤卡片內一列密集控件同樣（`.pp-dense-row`）。

  決策／執行：DS 端執行

• 三個常見情境沒有對應變體：對話框裝不下「單頭＋多筆明細」、表頭不能點擊排序、KPI 卡不能做篩選捷徑

  這三個都是清單頁／表單頁幾乎必然會遇到的情境，現在都要宿主自己繞。

  整頁 prototype 實測：①對話框只有一個寬度、欄位單欄堆疊，這次把明細改放到頁面上的獨立卡片。②表頭排序完全沒有元件，庫已把某下游的排序表頭登記為升庫候選但還沒做。③KPI 卡沒有可點擊變體（表格列、手機卡片都有）。

  決策／執行：DS 端執行佐證：GUIDELINE.md「th-sort」

方向確定但還沒排到，多半跟怎麼銜接下游系統有關。

• 檔案上傳／附件這個元件族完全不存在

  採購、報帳都要傳附件，但庫裡沒有拖放區、已選檔案列、上傳中或失敗的狀態。這是全新的一族，得走 React 元件的管線。

  要做的包含：拖放區（含拖曳經過態）、已選檔案列（檔名、大小、移除）、上傳進度與失敗重試、格式與大小限制的文案位置、單檔與多檔差異。形態要 Anting 看過。

  決策／執行：DS 端執行

• 一批元件的窄畫面（手機）行為還沒有規格

  33 節型錄裡只有 7 個元件寫清楚了窄畫面要怎麼變。明細表最痛——它要在現場（多半是手機）填寫，而它的無框格線本身還沒經過使用者驗證。

  下游已寫出大部分答案可直接當對照：清單頁窄畫面改「表格換卡片」；黏底操作列補了手機安全區域內距（庫沒提過）。工具列搜尋框寬度、對話框與抽屜的手機形態、分頁與頁籤的溢出只是「隱含降級堪用」，成本低可先補一句立場。另有一筆沒查完：小提示框在極窄畫面有殘餘橫向捲動。

  決策／執行：DS 端執行佐證：GUIDELINE.md「的寬度政策」

• 卡片、KPI 卡、鍵值列表沒有骨架屏；下拉、面板、對話框也沒有各自的等待態

  現有骨架屏只有三種最基礎的形狀，詳情頁最常見的 KPI 卡與鍵值列表沒有骨架。

  跟 registry 管線綁在一起，隨換底逐族做；文案與空狀態動作區已排進短期清單。

  決策／執行：DS 端執行