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