Day 17|資料有層級時,別只用縮排:Tree View、Nested List、Treegrid 與 Expandable Row
2026 iThome 鐵人賽 Vibe Coding UI Day 17:安安~我是ChiYu~ 昨天把資料值和命令分開後,我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排,點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點,子專案、附件、檢核紀錄和備註全部…
All time
全部文章依開站以來的 GoatCounter 累計點閱數重新排序,長銷文章都在這裡。資料每天自動同步一次。
Ranked by views
有歷史累計點閱紀錄的文章排在前面,其餘依發布日期排列;點閱數每天同步一次。
2026 iThome 鐵人賽 Vibe Coding UI Day 17:安安~我是ChiYu~ 昨天把資料值和命令分開後,我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排,點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點,子專案、附件、檢核紀錄和備註全部…
2026 iThome 鐵人賽 AI CleanCode Day 16:安安~我是ChiYu~ 昨天把服務等級與派工政策分開後,今天我在共同通知介面後方,再放入一個 Queued Provider。Provider 就是負責實際送出通知的替代實作。 Demo 與 Queued 都能實作同一個 Interfa…
2026 iThome 鐵人賽 Vibe Coding UI Day 16:安安~我是ChiYu~ 工作區設定整理完後,我回到專案列表。最後一欄只放了一顆三點按鈕,展開後依序出現: 進行中、編輯、刪除。 畫面排得很整齊,行為卻像一道突襲測驗。 「進行中」會保存任務狀態;「編輯」應該開啟編輯介面;「刪除」則可…
2026 iThome 鐵人賽 AI CleanCode Day 15:安安~我是ChiYu~ 昨天只有兩條通知升級規則,而且都由同一位服務等級政策負責人維護。我因此把判斷集中在 RequiresEscalationNotification,沒有再建立 Interface 或規則集合。對當時的需求來說,一個…
2026 iThome 鐵人賽 WebMCP Day 15:安安~我是ChiYu~ 昨天把網站範圍鎖定在五支 Tool 與三條活動流程,也留下可以重播的正式搜尋基線。今天不再 增加功能,而是正式驗收第一段能力:搜尋活動。 重點不是替 Agent 開一條專用捷徑,而是讓人類表單與 search_events …
2026 iThome 鐵人賽 Vibe Coding UI Day 15:安安~我是ChiYu~ 昨天把 Breadcrumb、Stepper、Pagination 和完成進度分開後,我總算不會再用一條藍線回答所有問題。接著進入工作區設定,畫面又送來一排整整齊齊的 Tabs。 當時我留給 AI 的需求只有…
2026 iThome 鐵人賽 AI CleanCode Day 14:安安~我是ChiYu~ 前天談測試紀律,昨天接著確認整潔的測試與驗收測試能不能真的守住需求。今天,這個系列正式跨過 Part I〈程式碼〉,進入 Part II〈設計〉。 一進入設計,測試全綠就不再是最後答案。 同一個 Agent 交出…
2026 iThome 鐵人賽 Vibe Coding UI Day 14:安安~我是ChiYu~ 昨天把桌面和手機導覽重新分工後,我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路,頁面裡卻一次冒出五種「我現在到哪裡」。 我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少;…
2026 iThome 鐵人賽 AI CleanCode Day 13:安安~我是ChiYu~ 昨天談測試紀律時,我比較了直接完成、TDD 與 TCR。那些實驗回答的是:測試何時介入,會怎麼改變 Agent 的前進節奏與還原範圍。 今天遇到的問題更麻煩:測試介入得很早,不代表測試問對了問題。 在產品範例驅動…
2026 iThome 鐵人賽 WebMCP Day 13:安安~我是ChiYu~ 前天讓 HTML 表單透過 Declarative API 描述自己,昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到網站能力,今天總算輪到 Inspector 下方那顆 S…