面向未來的+Vue3.0+桌面組件設計

面向未來的Vue3組件設計ArchSummit全球架構師峰會InfoQ寫在前面的話■■關于我和CarsDesign鄭傲小米汽車?自動駕駛資深前端研發(fā)工程師，曾就職于百度外賣、車好多集團。CarsDesign組件庫是車好多對于Vue3.x桌面端實踐的一種嘗試。作為組件庫核心開發(fā)者，負責企業(yè)內(nèi)前端基礎架構方向的研究與新技術的探索。先后負責企業(yè)級Vue2.0組件庫，ReactMobile組件庫，有豐富組件研發(fā)經(jīng)驗。在組件的設計和表達上有獨到的見解。在車好多推動Vue3.0組件庫研發(fā)和落地工作，從零到一設計了一套完整、易用、獨立的組件庫。InfoQArchSu^mitInfoQ全球架構師峰會

寫在前面的話■■關于我和CarsDesignCarsDesign從設計開始目標就是長久的未來。分梯隊開發(fā)一期交付組件71個，涉及基礎布局、樣式、數(shù)據(jù)展示、表單類、彈窗等場景;Commit近2000次。代碼行數(shù)：142,488行;TypeScript占比大于90%；ArchSu^mitInfoQArchSu^mitInfoQ大綱-組件設計的視角與規(guī)范-企業(yè)級組件的設計與實現(xiàn)?CarsDesign組件庫周邊?—些PublicTopicArchSummitMb InfoCt^全球架構師峰會 —'InfoQInfoQInfoQInfoQArchSu^mit全球架構師峰會/01'組件設計的視角與規(guī)范不同角色對組件的認知、組件設計要遵循基本的設計規(guī)范不同角色對組件的認知、組件設計要遵循基本的設計規(guī)范設計視角（品質(zhì)） 產(chǎn)品視角（溝通）■—套標準的組件庫可以對交付的品質(zhì)兜底，符合大眾預期的設計； ■通過了解組件相關能力可以更加專業(yè)的表達產(chǎn)品能力;■企業(yè)級產(chǎn)品迭代快速，種類繁多，組件庫可以減少用戶的理解成本；■減少溝通Gap；■組件庫可以傳遞設計價值觀；研發(fā)視角（認知）■減少認知能量消耗-研發(fā)使用組件的目的是可以快速完成業(yè)務的開發(fā)。搭建出符合大眾的基礎業(yè)務邏輯。-同時從研發(fā)的角度出發(fā)，對組件的要求又是苛刻的，需要豐富的功能，簡單易用同時又足夠靈活的API。ArchSu^mit全球架構師峰會組件的設計是一個精細活柵格系統(tǒng)建立布局標準組件標準（設計視角）：柵格，間距，布局基數(shù)，行高,字體。豐富API（研發(fā)視角）：GutterInline功能擴展（產(chǎn)品視角）：同行等高布局。ArchSu^mit全球架構師峰會成熟的組件都經(jīng)歷設計、迭代、場景適配等多個產(chǎn)品周期■Step1.理解：將B端業(yè)務場景抽象成基礎組件;■Step2.豐富：考慮到組件的通用性，大量增加組件的API，以服務業(yè)務;■Step3.抽象：抽象設計理念，形成設計價值觀。平行擴展更多的組件;Step4.業(yè)務設計模式的抽象，將部分能力通過配套的周邊服務推廣給更多的開發(fā)者；Step5.提效的下一步：標準的SASS服務，LowCode,ProCode,D2C等等場景，形成完整的產(chǎn)品信任感;ArchSu^mit全球架構師峰會未來的組件庫設計-專注打造產(chǎn)品信任感組件庫和業(yè)務系統(tǒng)對標準化的設計和每一個細節(jié)的實現(xiàn)可以有效將信任感和專業(yè)性傳達給用戶ArchSu^mit全球架構師峰會InfoQ/02企業(yè)級組件的設計與實現(xiàn)梯隊建設、組件多種實現(xiàn)、實現(xiàn)方案的取舍與糾結ArchSu^mit全球架構師峰會InfoQ組件庫梯隊建設一先想好再出發(fā)組件庫梯隊建設一先想好再出發(fā)組件庫梯隊建設一先想好再出發(fā)組件庫梯隊建設一先想好再出發(fā)我的任務G2021年Q2■今天父目標【示例】打贏公司營收攻堅戰(zhàn)整理紀要子目標0未開始【示例】持續(xù)提升續(xù)約能力0未開始【示例】咨詢業(yè)務成為新的營收增長點■明天狀態(tài)關鍵結果進度權重【示例】保質(zhì)保量兌現(xiàn)銷售預期業(yè)績O未開始季度營業(yè)收入突破1000萬元69%50%關聯(lián)項目■本月當前進度690起始。萬元目標1000萬元未開始+新玉相關任務本月收入超過上月收入0%20%+新建目標 查看全部0已完成相關附件lJj上傳當前進度完成未完成O進行中輸出5個新的營收增長方案40%30%0未開始當前進度2起始■已延期O進行中O未開始O進行中■其他工作臺項目消息o*?劉88截止時間：7月1日（O団。個目標5個更新時間：4月18日呼論內(nèi)容，文字上限2000（Ctrl+Enter發(fā)送）46.50%(?我的工作臺+新建Q搜索ArchSu^mit全球架構師峰會?劉WF負責人+新建日程查看全部Progress 眾也?！鮱ttonGroupInputNurnberInputFormCarsDesiqnDatePickerSelectTreeLoadingTagPopoverColorPickerCheckboxTaqSelectArchSu^mit全球架構師峰會InfoQ組件庫梯隊建設是快速迭代的基礎組件庫梯隊建設是快速迭代的基礎組件庫梯隊建設是快速迭代的基礎組件庫梯隊建設是快速迭代的基礎布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令ArchSu^mit全球架構師峰會按實現(xiàn)分類1.0組件名稱建站工具分級幵發(fā)優(yōu)先級布局樣式系列Layout布局LayoutP1Container布局容器Icon圖標Button按鈕ButtonCard卡片PanelP1-ATimeline時間軸低優(yōu)先級Collapse折疊面板P1-BCarousel走馬燈carouselP1-ASteps步驟條P1-BBreadcrumb面包屑P1-BTabs標簽頁TabsP1-AAlert警告AlertP1-ABadge標記P1-BimageP1-AProcess逬度條P1-ALoadingBar加載逬度條Indicator加載進度條P1-BTag標簽P1-ATag標簽P1-AQueto引用/備注P1-BDiliver分割線P1-B布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令ArchSu^mit全球架構師峰會thPopover彈出框系列Popover彈窗框P2P2-BasePoptip文字提示PopConfirm確認框Modal(Dialog)對話框ModalP2-AtoetipP2-Aiooiiip行遊不Dropdown下拉菜單P2-BNavMenu導航菜單P2-BDrawer抽屜drawerP2-ANotification通知P2-BMessageBox彈窗messageP2-AMessage消息提示P2-BLoading加載LoadingP2-AForm表單一Select選擇器P3Select系列Cascader級聯(lián)選擇TimePicker時間選擇器DatePicker日期選擇器DateTimePicker日期時間選擇器ColorPicker顏色選擇器Rate評分布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令ArchSu^mit全球架構師峰會Form表單--Select系列Select選擇器P3Cascader級聯(lián)選擇TimePicker時間選擇器DatePicker日期選擇器DateTimePicker日期時間選擇器ColorPicker顏色選擇器Rate評分Form表單-其他Radio單選框P3-BCheckbox多選框Input輸入框inputInputNumber計數(shù)器inputP1-ATextArea文本域inputP1-ASwitch開關switchSlider滑塊Upload上傳uploadTransfer穿梭框Form表單FormTable數(shù)據(jù)表格TableP1BaseTable*?_布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令Radio單選框Checkbox多選框Input輸入框inputInputNumber計數(shù)器inputTextArea文本域inputSwitch開關switchSlider滑塊Upload上傳uploadTransfer穿梭框Form表單FormP3-BForm表單-其他P1-AP1-ATable數(shù)據(jù)表格TableP1BaseTablelistIframeresult指令組件v-loadingv-click-outsideArchSummit全球架構師峰會InfoInfo組件庫梯隊確立之后需要更易于擴展的架構、層次設計cars-design.bundle.jscars-design.css代碼層工具層語言層ArchSummit全球架構師峰會Info(cars-design.bundle.jscars-design.css代碼層工具層語言層ArchSummit全球架構師峰會Info(Option srcOption srcmain.ts exampleREADME.ndNotification srcmain.ts exampleREADME.ndMessage srcmain.ts exampleREADME.ndLoadingBar srcmain.ts exampleREADME.ndInputTextarea srcmain.ts exampleREADME.nd組件庫是一個多人協(xié)同的技術項目，需要建設一些規(guī)范|-Button|-src|-index.vueI-index.scssI-utils.tsI-main.tsI-README.ndI-ButtonGroupI-test.tsI-srcI-index.vueI-util.tsI-mixinI-main.tsI-README.ndArchSummit全球架構師峰會組件庫開發(fā)逐步進入核心區(qū)，需要執(zhí)行開發(fā)流程保開發(fā)者信息交換來源：組件庫組件開發(fā)流程示意圖ArchSu^nit全球架構師峰會InfoGInfoQInfoQInfoQInfoQ信息交換與討論的過程讓我們的組件庫收獲頗豐我們統(tǒng)統(tǒng)支持并成功落地；讓我們難以取舍，多次爭吵;讓我們興奮了很長一段時間;■討論中Rate投票組件，有3種非常優(yōu)秀的實現(xiàn)方案。我們統(tǒng)統(tǒng)支持并成功落地；讓我們難以取舍，多次爭吵;讓我們興奮了很長一段時間;■討論中Panel布局組件在API設計上存在兩種不同的聲音。■討論中Table組件的實現(xiàn)意外獲得了靈感。甚至每一個組件都會因為API的設計而出現(xiàn)分歧始終堅信CarsDesign從實現(xiàn)、設計、方案上都是勇于嘗試，面向未來開發(fā)者使用更爽快而設計的ArchSu^mit全球架構師峰會CarsDesignCarsDesign鼓勵一個組件的不同實現(xiàn)方式CarsDesignCarsDesign鼓勵一個組件的不同實現(xiàn)方式很少在各類的組件庫中看到同樣的功能組件會有不同的實現(xiàn)方案，甚至各大組件庫中的組件實現(xiàn)和設計都千篇一律。我們鼓勵嘗試更多思路為更多的場景而設計;ArchSu^mit全球架構師峰會InfoQDOM事件+數(shù)據(jù)驅(qū)動完全通過改變偏移數(shù)據(jù)，控制樣式展示HoverClick觸發(fā)事件―計算偏移—改變數(shù)據(jù)驅(qū)動更新Mousein雙層DOM結構覆蓋配合鼠標劃入，移動，離開等事件，控制滑塊尺寸或位置Inputtype=rangeInputtype=range通過修改Input的偽類選擇器實現(xiàn)覆蓋DOM結構inputtype=range來實現(xiàn)，template沒有其他代碼很簡潔通過偽元素：:-webkit-slider-runnable-track滑塊可滑動區(qū)域樣式通過偽元素：:-webkit-slider-thumb滑塊的樣式■通過mask遮罩將圖案遮罩在背景之上，設置圖案為星星或者字符ArchSu^mit全球架構師峰會InfoQ對比維度核心思路代碼量兼容性功能豐富度CarsDesign適合場景事件+數(shù)據(jù)驅(qū)動雙層DOM結構+樣式邏輯Inputtype=range正常很多弱（需要適配）好好均可實現(xiàn)均可實現(xiàn)沒有hover狀態(tài)方案―方案二方案三移動端touch拖拽很少Template及其簡潔PC覆蓋率為有限枚舉PC覆蓋率任意（百分比場景）ArchSummit全球架構師峰會InfoQCarsDesign的取舍與糾結一如何讓開發(fā)者更爽的使用想要實現(xiàn)一個panel布局組件，業(yè)務方有很強的需求；panel尺寸上可以修改，支持無限層級的嵌套；糾結于提供怎么樣的數(shù)據(jù)結構可以讓開發(fā)者使用的更自然;TopPaneRightPaneTopPaneBottomPaneArchSu^mit全球架構師峰會InfoQ扁平化的數(shù)據(jù)結構A<divA扁平化的數(shù)據(jù)結構A<divA<div<divA<div<divA<divA<div</div>style="inset:0%66.667%70%-row"style="inset:0%0%70%33.333%;">.?</div>style="inset:0%33.3335*70%33.333%;">?.</div>-row"style="inset:0%0%70%66.6665%;H>..</div>style="inset:0%0%70%66.6665%;">.?</div>-column"style="inset:30%0%0%;">.?</div>style="inset:30%0%0%div>使用平鋪的結構，可以讓開發(fā)者清楚的自己的絕對位置，便于下一步操作▼<divclass="tssT9b&nu4-root">▼<divclass="mosaic-foxglove-thememosaicmosaic-drop-target">▼<divclass="mosaic-root">▼<divclass="mosaic-tile"style="inset:▼<divclass="mosaic-tilemui-lxgl9mg">▼<divclass="mosaic-windowmosaic-drop-target">?<divclass="mosaic-window-toolbar">-</div>▼<divclass="mosaic-window-body"><divstyle="display:none;"></div>▼<divdata-testid="panel-niouseenter-containerTab!Ixyw5ix"class="PanelRoot src_components_PanelRoot_tsx--17i9g4ykREzuL">▼<divclass="tss-geg3dj-root">?<divclass=Minui-ltx31bl">-</div>▼<divclass="mosaic-foxglove-thememosaicmosaic-drop-target">▼<divclass="mosaic-root">class="mosaic-tile"class="mosaic-splitclass="fnosaic-tile"class="mosaic-splitclass="mosaic-tile"class="mosaic-splitclass="mosaic-tile"A<divclass="drop-target-container">-.</div></div></div>::after</div></div><divclass=Hmosaic-window-body-overlay"x/div><divclass="mosaic-window-additional-actions-bar"x/div>ArchSu^mit全球架構師峰會InfoG使用平鋪的結構，可以讓開發(fā)者清楚自己的絕對位置，便于下一步操作"id":"w":"h":pos:},{W:"w":"h":pos:},{"id":II-1II丄，IIIIIIIIIIII IIII■"A",IIIIIIIIII IIII■iinii"w""h"IIIIIIIIpos:},{"id":IIIIIIII■"w":"h":pos:},{"id":IIIIIIIIIIIIII■"w""h"IIIIII■結論：讓開發(fā)者通過位置描述邊界比較難；■結論：描述邊界線resize時候的影響范圍也比較難;pos}]IIIIIIII■ArchSummit全球架構師峰會InfoQ使用嵌套的數(shù)據(jù)結構，可以讓開發(fā)者清楚的知道每一個panel的邊界嵌套遞歸的數(shù)據(jù)結構<template><divcitM><Splitv-model=',splitl"><template#left><divclass=0denio-split-pan<Splitv-model="split2"<template#top><divclass=ano-paddin

mode="verxdemo-splitTopPane</div></template><template#bottom><divclass=MdemoBottomPane</div></template></Split></div></template><template#right><divclass="demo-split-pRightPane</div></template></Split></div></template>panet-paneArchSu^mit全球架構師峰會InfoQ使用嵌套的數(shù)據(jù)結構，可以讓開發(fā)者清楚的知道每一個panel的邊界[{"id":"I",IIIIIIII[i,i],"w""h"poschildren:[{"d“：2,"direction":"column","w""h"pos},{"idIIIIIIII[IIIIIIIIJIlDIID，"direction":"column","w""h"IIIIIIIIpos:["",""]}]}]■結論：開發(fā)者配置起來很爽快，清晰的知道paneI的邊界和邊界影響范圍;■結論：后向擴展的時候比較麻煩，整體DOM結構比較復雜；實現(xiàn)拖拽功能很難;ArchSummit全球架構師峰會InfoQ糾結組件要如何取舍整合才能幫助開發(fā)者在各個方向的體驗拉滿開發(fā)者組件API入?yún)⑻幚頂?shù)據(jù)拍平用于Panel渲染平鋪數(shù)據(jù)用于邊界渲染vDOM其他用途panelw計算panelh計算panelpos用于伸縮動作vDOMArchSu^mit全球架構師峰會InfoQCarsDesign從組件設計上從來不局限于現(xiàn)有的設計。會使用很多先進的特性與屬性并把方案整合成產(chǎn)品信息交換的過程中，我們討論出一個超棒的技術實現(xiàn)方案ArchSu^mit全球架構師峰會ArchSu^mit全球架構師峰會InfoQInfoQInfoQInfoQInfoQ與ElementPlusTable組件對比FPT效果reflElementsConsoleSourcesNetworkPerformanceh[H0top ▼|<2>Fitter Def5messages[vite]connecting...[vite]connected.FPT：47.40087890625msDOMREADY：1565.44384765625msreflElementsConsoleSourcesNetworkPerformanceh[H0top ▼|<2>Fitter Def5messages[vite]connecting...[vite]connected.FPT：47.40087890625msDOMREADY：1565.44384765625ms4usermessagesNoerrorsArchSu^mit全球架構師峰會Lronsoienews[vite]connecrina與ElementPlusTable組件對比FPT效果■實驗條件：7列*576行數(shù)據(jù)+固定高度300px+固定寬度900px+FixeCo①localhost:3333ViteApp開始IVite官方中文文檔組件IElement應用￡百度一下，你就知道GoogleQ百度翻譯-200種語...CGitHubSeaTable巳工具集巳文檔巳書釜欄Q愛范兒?讓未來觸…［JDailyCollection內(nèi)容介紹（幵始組...flomoQvue3.0Q財富自由CxqJElementsConsole日期2016-05-022016-05-042016-05-012016-05-032016-05-02上海上海上海上海王小虎王小虎王小虎王小虎王小虎普陀區(qū)普陀區(qū)普陀區(qū)普陀區(qū)普陀區(qū)上海市普陀區(qū)金沙江路1518弄上海市普陀區(qū)金沙江路1517弄上海市普陀區(qū)金沙江路1519弄上海市普陀區(qū)金沙江路1516弄上海市普陀區(qū)金沙江路1518弄Element-Plus1.0.2.beta.45(2021.05.28)ArchSummit全球架構師峰會200333200333200333200333200333vite]conDOMREADY：[vite]connecting...[vite]connected.FPT:241.652099609375msDOMREADY：3092.02880859375ConsoleNetworkrequestblocking使用平鋪的結構，可以讓開發(fā)者清楚的自己的絕對位置，便于下一步操作實驗條件：7列火576行數(shù)據(jù)+固定高度300px+固定寬度900px+Fixed列（開啟左右滑動）CarsDesign對比Element-PlusTable組件FPT時間對比OZC400300200100037.331.937.714.732.813.9OZC400300200100037.331.937.714.732.813.98 9 10來源：組件庫BaseTable組件對比Element-Plus1.0.2.beta.45(2021.05.28)當當■Qfomt會架r球全TOPIC：可以通過實驗分析一下影響FPT的渲染有哪些因素ArchSu^mit全球架構師峰會InfoQ對比兩個組件的DOMReady時間實驗條件：7列*576行數(shù)據(jù)+固定咼度300px+固定寬度900px+Fixed列（開啟左右滑動）CarsDesign對比Element-PlusTable組件DomReady時間對比?CarsDesign?Element-Plus40003000E回切□ZL2000100003562300235903287 32062963261504 1522 1458 1440 1464 1420 148來源：組件庫BaseTable組件對比Element-Plus1.0.2.beta.45(2021.05.28)架r球全t會2986 30631716 156310當當■Qfom揭開CarsDesignTable的神秘實現(xiàn)方式揭開CarsDesignTableDOMReady和FPT都遙遙領先的神秘實現(xiàn)方式ArchSu^mit全球架構師峰會InfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQTable組件的起源CarsDesign中BaseTable組件的實現(xiàn)及設計靈感起源于我們組內(nèi)的一次組件API討論討論Layout布局組件的過程中，有一種布局方是使用Grid布局發(fā)現(xiàn)Grid布局可以快速的使用fr和grid-大的屬性配置行和列，就很像是個TableCellCellCellCellCellCellCellCellCellCellCellCellCellCellCell大他們每一行的行高都是自動撐開的，每一列的列寬都是可以自適應和設置固定寬度的ArchSummit全球架構師峰會InfoQInfoQInfoQInfoQCarsDesign的BaseTable組件實現(xiàn)過程1fr1fr40px40pxCellCellCellCell40pxCellCellCellGrid-area-*結論：回歸CSS,因為CSSOM在瀏覽器里有單獨的線程去計算，且瀏覽器針對性的優(yōu)化有很多可以控制CSS實現(xiàn)，自適應寬度，固定寬度，高度寬度分別設置，區(qū)域合并等minmax(1fr,100px)—Cell—Cell—Cell—Cell—1frArchSu^mit全球架構師峰會桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQElement使用一個新的Table通過絕對定位，蓋住原來的TableCellArchSu^mit全球架構師峰會BaseTable對Fixed的處理也有黑科技~ArchSu^mit全球架構師峰會桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQTOPIC：CarsDesign對比Element原理上的優(yōu)勢■Element將Fixed的列計算出新的Table并覆蓋。導致DOM節(jié)點的增多，行數(shù)越多，DOM節(jié)點越多BElement要大量的JS運算來處理這個新的Table帶來的問題，比如滾動跟隨。行數(shù)越多幀數(shù)越低?！鯡lement的新Table導致原有的DOM是割裂的，行高和列寬都需要JS運算得出。'CarsDesign中表格都是Grid對齊的整體塊，行高和列寬都是被CSSGrid所控制的?！鯢ixed的計算使用STICKY粘性布局，把一切的渲染都交給CSS。行數(shù)越多性能越強。ArchSu^mit全球架構師峰會TOPIC：CarsDesign&&Element大數(shù)據(jù)量渲染動態(tài)渲染數(shù)據(jù)量500行DEMOSHOWMERESULTElement-Plus數(shù)據(jù)渲染結果1 一+X☆G3*?無痕模式。localhost:3333加百度—下’你就知道GGoogle百度翻譯-200種語…。GitHub>SeaTable已工具集已文檔田書簽欄。愛范兒?讓未來觸… BDailyCollection$內(nèi)容介紹（開始組…flomo?醫(yī)］閱讀清單■滾動幀數(shù)：12-16FrameRate16.2fpsGPUrasterGPUmemory32016-05-0142016-05-0352016-05-0262016-05-0472016-05-0182016-05-0392016-05-02102016-05-04112016-05-01122016-05-03132016-05-02省份姓名市區(qū)地址郵政編碼上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎槽陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀200333上海王小虎普陀區(qū)上海市普陀20033360.5MBused536.9MBmax[vite]connecting...client.ts:13[vite]connected.client.ts:43FPT:449.050048828125msAdd.vue:30DOMREADY:5411.261962890625ms>Add.vue:32?ConsoleRendering Sensors PerformancemonitorxX[E0top4hidden令Defaultlevels▼后NoIssuesFilterCPUusage0%JSheapsize28.6MB下午7:42:10CPUusage100%Ex5ElementsConsoleSourcesNetworkPerformanceMemory?DOMNodesJSeventlistenersDocumentsDocumentFramesLayouts/secStylerecalcs/sec36,69750%JSheapsize40.0MB20.0MB來源：Element渲染數(shù)據(jù)■滾動CPU:<90%0 DOMNodes40,00020,000Layouts/secJSHeap:29.5MBDOMNodes：36,897CarsDesign的BaseTable數(shù)據(jù)渲染展示0v2_CarsDesign。localhost:3000/table-compare卷：百度一下，你就知道 3Google龍百度翻譯-200種語…。GitHub<SeaTable日工具集巴文檔田書簽欄回愛范兒?讓未來觸…HDailyCollection''內(nèi)容介紹（開始組...crflomo?回閱讀清單FrameRateElementsConsoleSourcesNetworkPerformanceMemory?令16.8fpsFilterDefaultlevels▼目NoIssues省份姓名市區(qū)地址GPUraster[vite]connecting...[vite]connected.FPT:29.044921875msclient.ts:13client.ts:43index.vue:58GPUmemory27.8MBused536.9MBmax2016-05-032016-05-022016-05-042016-05-012016-05-032016-05-02102016-05-04112016-05-01122016-05-03132016-05-02上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海王小虎普陀區(qū)上海市普陀區(qū)金沙江路1517弄上海市普陀區(qū)金沙江路1519弄上海市普陀區(qū)金沙江路1516弄上海市普陀區(qū)金沙江路1518弄上海市普陀區(qū)金沙江路1517弄上海市普陀區(qū)金沙江路1519弄上海市普陀區(qū)金沙江路1516弄上海市普陀區(qū)金沙江路1518弄上海市普陀區(qū)金沙江路1517弄上海市普陀區(qū)金沙江路1519弄上海市普陀區(qū)金沙江路1516弄上海市普陀區(qū)金沙江路1518弄4 來源：CarsDesign數(shù)據(jù)渲染滾動示例DOMREADY:2163.39794921875msindex.vue:60ConsoleRenderingSensorsPerformancemonitorxCPUusageJSheapsize0.1%45.8MBDocumentsJSheapsize1noMRDocumentFramescn0MRLayouts/sec0Stylerecalcs/sec0DOMNodes19,97250%JSeventlistenersDOMNodes60,00030,000CPUusage100%Layouts/sec■滾動幀數(shù)：12-16■滾動CPU:<70%JSHeap:45MBDOMNodes：19,792TOPIC：CarsDesign&&Element大數(shù)據(jù)量渲染 動態(tài)渲染數(shù)據(jù)量2000行Element會由于跟隨計算過慢，導致進程阻塞，出現(xiàn)滾動嚴重卡頓的情況，無法交互CarsDesign會由于CSSLayout重絵時間長，出現(xiàn)短暫白屏現(xiàn)象，白屏后可交互/03CarsDesign組件庫周邊ArchSu^mit全球架構師峰會InfoQInfoQInfoQInfoQInfoQ我們一心想讓組件庫研發(fā)服務化和產(chǎn)品化■使用產(chǎn)品的配置服務，將研發(fā)對樣式分層的理解產(chǎn)品化;■逐步公布迭代計劃，讓我們的用戶有更多的信息很信心;■提供便捷的CLI和項目模板，助力從0到1的工程化創(chuàng)建;ArchSu^mit全球架構師峰會我們一心想讓組件庫研發(fā)服務化和產(chǎn)品化主題色編輯器普通按鈕Alert警告主題色消息提示的文案主題色錯誤提示的文案radio單選框功能色O備選項備選項成功色Progress逬度條警告色Checkbox多選框危險色E復選框A復選框B復選框C信息色Switch開關文字色Steps步驟條主要文字色#495056100%常規(guī)文字色#757A7E100%Input輸入框占位文字色#C0C3C5100%DatePicker日期選擇器邊框色邊框基礎色#DEE2E4100%NavMenu導航菜單/導航導航導航Badge標記100%危險按鈕主要按鈕進行中■#0776fe98%0-已完成ArchSummit全球架構師峰會0%70%80%O評論■■■■背景基礎色二I#F7F9FA背景色樣式抽離與可視化配置InfoG通過不斷的公布迭代計劃使組件庫更加容易被信任組件迭代需求池由鄭傲-前端研發(fā)部-基礎平臺創(chuàng)it,最終由白靜-前端研發(fā)部-基礎平臺修改于八月20,2021組件優(yōu)先級定義:P0-立刻排查修復P1-可單獨發(fā)版修復P2-跟隨小版本修復P3-跟隨大版本修復#ID類型

分類來源需求人BugFix組件按需

引入二測1011BugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFix組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測需求組件問題描述及初步定位需求日期優(yōu)先級狀態(tài)5迭代版本FIXOwner處理結論ca-cascader展幵失效2021.06.24㈣P0兀成2021.06.25（五）ReleaseTag1.1.0jojhTrr^rvue3.1.2更新帶來問題createblockca-cascader-panel無icon2021.06.24㈣P2r~lr±=i口兀成2021.07.01㈣ReleaseTag1.1.1vite新版本更新后不支持eot字體的引入導致cars-icons引入失效ca-checkboxautofocus失敗2021.06.24㈣P2規(guī)劃解決ca-collapse