用 Timeline 組件畫事故處理過程3 步搞定【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/gh_mirrors/antde/ant-design值班時被追著問「故障什么時候發(fā)生、現(xiàn)在處理到哪一步」在群里貼一段純文字沒人看得下去。Ant Design 的 Timeline 時間軸組件能把處理過程變成帶圓點和連線的一列豎排節(jié)點誰都能一眼看清狀態(tài)。先跑起來3 行代碼畫出故障時間軸npm install antd --save后直接引入組件。每個節(jié)點就是一行文字時間跟在句子末尾import { Timeline } from antd; ReactDOM.render( Timeline Timeline.Item創(chuàng)建服務(wù)單 2023-11-02 09:15/Timeline.Item Timeline.Item確認為網(wǎng)絡(luò)異常 2023-11-02 09:40/Timeline.Item Timeline.Item修復(fù)完成 2023-11-02 11:05/Timeline.Item /Timeline, mountNode );渲染后頁面左側(cè)出現(xiàn)一條豎線每個節(jié)點一個藍色圓點加一行說明節(jié)點間距自動均勻連線在最后一個節(jié)點處自然收尾不用手動處理。把文字換成你自己的業(yè)務(wù)事件就能直接上線。Timeline 的 3 種用法流程展示、狀態(tài)標(biāo)記、更新反饋下面這幾種組合覆蓋了大多數(shù)時間軸需求按需取用。一個節(jié)點一個事件串起處理流程把事件按時間從上往下排時間和描述寫在同一行。節(jié)點內(nèi)容盡量保持一行視覺最緊湊太長就換多行寫法見后文進階部分。節(jié)點文字默認 12px節(jié)點多也不會顯得擠。用 3 個預(yù)設(shè)顏色標(biāo)記狀態(tài)color只支持blue、green、red三個值藍色表示「進行中」綠色表示「已完成」紅色表示「告警或出錯」。倉庫里的示例也是按這個約定傳達狀態(tài)的。別嘗試 orange 或 purple樣式層不認它們Timeline Timeline.Item colorgreen數(shù)據(jù)恢復(fù)完成 2023-11-02 10:30/Timeline.Item Timeline.Item colorredCPU 占用率超閾值 2023-11-02 09:52/Timeline.Item Timeline.Item正在排查根因 2023-11-02 10:05/Timeline.Item /Timelinepending 在末尾提示「還在更新」故障沒結(jié)單時時間軸末尾出現(xiàn)一個沒有內(nèi)容的節(jié)點相當(dāng)于告訴看的人「流程還沒走完」。pending既能傳布爾值也能傳節(jié)點傳true只顯示一個空心點傳 React 節(jié)點則可以在末尾掛上「查看更多」這類鏈接Timeline pending{a href#查看更多/a} Timeline.Item創(chuàng)建服務(wù)單 2023-11-02 09:15/Timeline.Item /Timeline處理超出單行內(nèi)容的節(jié)點與邊界情況節(jié)點內(nèi)容不限于一個字符串children 里塞多段內(nèi)容即可上面放結(jié)論、中間放細節(jié)、最后放時間節(jié)點高度會跟著撐開Timeline.Item colorred p根因數(shù)據(jù)庫連接池打滿/p p已擴容連接數(shù)觀察中/p p2023-11-02 11:05/p /Timeline.Item幾個邊界情況提一下最后一個節(jié)點會被自動標(biāo)記last圓點下方的尾線直接隱藏不需要自己處理。開啟pending后最后一個節(jié)點的尾線會重新顯示把線接到 pending 節(jié)點上避免線「斷頭」。想讓「最新事件在頂部」倒序展示這一版組件沒有 reverse 開關(guān)在數(shù)據(jù)層把數(shù)組反轉(zhuǎn)后再渲染即可。想放大文字時用 style 覆蓋默認的 12px 字號比改 less 變量省事。Timeline 參數(shù)速查真正用到的只有 2 個這個版本里時間軸相關(guān)的參數(shù)就兩個寫的時候直接對照參數(shù)設(shè)置在哪說明默認值pendingTimeline末尾「未完結(jié)」節(jié)點的內(nèi)容true只顯示圓點falsecolorTimeline.Item圓點顏色可選blue/green/redblue避坑指南圓點顏色、倒序與升級最容易踩的 3 個問題現(xiàn)象傳colororange沒生效圓點還是藍色。原因樣式表只為 3 個預(yù)設(shè)顏色定義了類名其他值會被忽略。解法用藍、綠、紅三檔表達狀態(tài)確實要別的顏色自己給節(jié)點包一層自定義樣式?，F(xiàn)象想要倒序展示找不到reverse參數(shù)。原因這個版本的 Timeline 沒有內(nèi)置倒序開關(guān)組件永遠按子節(jié)點順序渲染。解法渲染前自己反轉(zhuǎn)數(shù)據(jù)數(shù)組例如list.slice().reverse()?，F(xiàn)象項目升級到新版 antd 后Timeline.Item寫法收到廢棄警告。原因新版把節(jié)點配置改成了items數(shù)組形式舊的子組件寫法逐步退出。解法升級時對照官方升級說明把節(jié)點數(shù)據(jù)整體遷移成items結(jié)構(gòu)別兩種寫法混用。一個 Timeline 組件參數(shù)不多把狀態(tài)對上顏色、把「還沒完」交給pending時間軸自然就能讀懂。Timeline 組件文檔圓圈顏色示例源碼Timeline 實現(xiàn)源碼【免費下載鏈接】ant-designAn enterprise-class UI design language and React UI library項目地址: https://gitcode.com/gh_mirrors/antde/ant-design創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考