面向未來的+Vue3.0+桌面組件設(shè)計(jì)

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

寫在前面的話■■關(guān)于我和CarsDesignCarsDesign從設(shè)計(jì)開始目標(biāo)就是長久的未來。分梯隊(duì)開發(fā)一期交付組件71個(gè)，涉及基礎(chǔ)布局、樣式、數(shù)據(jù)展示、表單類、彈窗等場景;Commit近2000次。代碼行數(shù)：142,488行;TypeScript占比大于90%；ArchSu^mitInfoQArchSu^mitInfoQ大綱-組件設(shè)計(jì)的視角與規(guī)范-企業(yè)級(jí)組件的設(shè)計(jì)與實(shí)現(xiàn)?CarsDesign組件庫周邊?—些PublicTopicArchSummitMb InfoCt^全球架構(gòu)師峰會(huì) —'InfoQInfoQInfoQInfoQArchSu^mit全球架構(gòu)師峰會(huì)/01'組件設(shè)計(jì)的視角與規(guī)范不同角色對(duì)組件的認(rèn)知、組件設(shè)計(jì)要遵循基本的設(shè)計(jì)規(guī)范不同角色對(duì)組件的認(rèn)知、組件設(shè)計(jì)要遵循基本的設(shè)計(jì)規(guī)范設(shè)計(jì)視角（品質(zhì)） 產(chǎn)品視角（溝通）■—套標(biāo)準(zhǔn)的組件庫可以對(duì)交付的品質(zhì)兜底，符合大眾預(yù)期的設(shè)計(jì)； ■通過了解組件相關(guān)能力可以更加專業(yè)的表達(dá)產(chǎn)品能力;■企業(yè)級(jí)產(chǎn)品迭代快速，種類繁多，組件庫可以減少用戶的理解成本；■減少溝通Gap；■組件庫可以傳遞設(shè)計(jì)價(jià)值觀；研發(fā)視角（認(rèn)知）■減少認(rèn)知能量消耗-研發(fā)使用組件的目的是可以快速完成業(yè)務(wù)的開發(fā)。搭建出符合大眾的基礎(chǔ)業(yè)務(wù)邏輯。-同時(shí)從研發(fā)的角度出發(fā)，對(duì)組件的要求又是苛刻的，需要豐富的功能，簡單易用同時(shí)又足夠靈活的API。ArchSu^mit全球架構(gòu)師峰會(huì)組件的設(shè)計(jì)是一個(gè)精細(xì)活柵格系統(tǒng)建立布局標(biāo)準(zhǔn)組件標(biāo)準(zhǔn)（設(shè)計(jì)視角）：柵格，間距，布局基數(shù)，行高,字體。豐富API（研發(fā)視角）：GutterInline功能擴(kuò)展（產(chǎn)品視角）：同行等高布局。ArchSu^mit全球架構(gòu)師峰會(huì)成熟的組件都經(jīng)歷設(shè)計(jì)、迭代、場景適配等多個(gè)產(chǎn)品周期■Step1.理解：將B端業(yè)務(wù)場景抽象成基礎(chǔ)組件;■Step2.豐富：考慮到組件的通用性，大量增加組件的API，以服務(wù)業(yè)務(wù);■Step3.抽象：抽象設(shè)計(jì)理念，形成設(shè)計(jì)價(jià)值觀。平行擴(kuò)展更多的組件;Step4.業(yè)務(wù)設(shè)計(jì)模式的抽象，將部分能力通過配套的周邊服務(wù)推廣給更多的開發(fā)者；Step5.提效的下一步：標(biāo)準(zhǔn)的SASS服務(wù)，LowCode,ProCode,D2C等等場景，形成完整的產(chǎn)品信任感;ArchSu^mit全球架構(gòu)師峰會(huì)未來的組件庫設(shè)計(jì)-專注打造產(chǎn)品信任感組件庫和業(yè)務(wù)系統(tǒng)對(duì)標(biāo)準(zhǔn)化的設(shè)計(jì)和每一個(gè)細(xì)節(jié)的實(shí)現(xiàn)可以有效將信任感和專業(yè)性傳達(dá)給用戶ArchSu^mit全球架構(gòu)師峰會(huì)InfoQ/02企業(yè)級(jí)組件的設(shè)計(jì)與實(shí)現(xiàn)梯隊(duì)建設(shè)、組件多種實(shí)現(xiàn)、實(shí)現(xiàn)方案的取舍與糾結(jié)ArchSu^mit全球架構(gòu)師峰會(huì)InfoQ組件庫梯隊(duì)建設(shè)一先想好再出發(fā)組件庫梯隊(duì)建設(shè)一先想好再出發(fā)組件庫梯隊(duì)建設(shè)一先想好再出發(fā)組件庫梯隊(duì)建設(shè)一先想好再出發(fā)我的任務(wù)G2021年Q2■今天父目標(biāo)【示例】打贏公司營收攻堅(jiān)戰(zhàn)整理紀(jì)要子目標(biāo)0未開始【示例】持續(xù)提升續(xù)約能力0未開始【示例】咨詢業(yè)務(wù)成為新的營收增長點(diǎn)■明天狀態(tài)關(guān)鍵結(jié)果進(jìn)度權(quán)重【示例】保質(zhì)保量兌現(xiàn)銷售預(yù)期業(yè)績O未開始季度營業(yè)收入突破1000萬元69%50%關(guān)聯(lián)項(xiàng)目■本月當(dāng)前進(jìn)度690起始。萬元目標(biāo)1000萬元未開始+新玉相關(guān)任務(wù)本月收入超過上月收入0%20%+新建目標(biāo) 查看全部0已完成相關(guān)附件lJj上傳當(dāng)前進(jìn)度完成未完成O進(jìn)行中輸出5個(gè)新的營收增長方案40%30%0未開始當(dāng)前進(jìn)度2起始■已延期O進(jìn)行中O未開始O進(jìn)行中■其他工作臺(tái)項(xiàng)目消息o*?劉88截止時(shí)間：7月1日（O団。個(gè)目標(biāo)5個(gè)更新時(shí)間：4月18日呼論內(nèi)容，文字上限2000（Ctrl+Enter發(fā)送）46.50%(?我的工作臺(tái)+新建Q搜索ArchSu^mit全球架構(gòu)師峰會(huì)?劉WF負(fù)責(zé)人+新建日程查看全部Progress 眾也?！鮱ttonGroupInputNurnberInputFormCarsDesiqnDatePickerSelectTreeLoadingTagPopoverColorPickerCheckboxTaqSelectArchSu^mit全球架構(gòu)師峰會(huì)InfoQ組件庫梯隊(duì)建設(shè)是快速迭代的基礎(chǔ)組件庫梯隊(duì)建設(shè)是快速迭代的基礎(chǔ)組件庫梯隊(duì)建設(shè)是快速迭代的基礎(chǔ)組件庫梯隊(duì)建設(shè)是快速迭代的基礎(chǔ)布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令A(yù)rchSu^mit全球架構(gòu)師峰會(huì)按實(shí)現(xiàn)分類1.0組件名稱建站工具分級(jí)幵發(fā)優(yōu)先級(jí)布局樣式系列Layout布局LayoutP1Container布局容器Icon圖標(biāo)Button按鈕ButtonCard卡片PanelP1-ATimeline時(shí)間軸低優(yōu)先級(jí)Collapse折疊面板P1-BCarousel走馬燈carouselP1-ASteps步驟條P1-BBreadcrumb面包屑P1-BTabs標(biāo)簽頁TabsP1-AAlert警告AlertP1-ABadge標(biāo)記P1-BimageP1-AProcess逬度條P1-ALoadingBar加載逬度條Indicator加載進(jìn)度條P1-BTag標(biāo)簽P1-ATag標(biāo)簽P1-AQueto引用/備注P1-BDiliver分割線P1-B布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令A(yù)rchSu^mit全球架構(gòu)師峰會(huì)thPopover彈出框系列Popover彈窗框P2P2-BasePoptip文字提示PopConfirm確認(rèn)框Modal(Dialog)對(duì)話框ModalP2-AtoetipP2-Aiooiiip行遊不Dropdown下拉菜單P2-BNavMenu導(dǎo)航菜單P2-BDrawer抽屜drawerP2-ANotification通知P2-BMessageBox彈窗messageP2-AMessage消息提示P2-BLoading加載LoadingP2-AForm表單一Select選擇器P3Select系列Cascader級(jí)聯(lián)選擇TimePicker時(shí)間選擇器DatePicker日期選擇器DateTimePicker日期時(shí)間選擇器ColorPicker顏色選擇器Rate評(píng)分布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令A(yù)rchSu^mit全球架構(gòu)師峰會(huì)Form表單--Select系列Select選擇器P3Cascader級(jí)聯(lián)選擇TimePicker時(shí)間選擇器DatePicker日期選擇器DateTimePicker日期時(shí)間選擇器ColorPicker顏色選擇器Rate評(píng)分Form表單-其他Radio單選框P3-BCheckbox多選框Input輸入框inputInputNumber計(jì)數(shù)器inputP1-ATextArea文本域inputP1-ASwitch開關(guān)switchSlider滑塊Upload上傳uploadTransfer穿梭框Form表單FormTable數(shù)據(jù)表格TableP1BaseTable*?_布局樣式類組件浮層彈窗類組件表單交互類組件數(shù)據(jù)展示類組件組件庫便捷指令Radio單選框Checkbox多選框Input輸入框inputInputNumber計(jì)數(shù)器inputTextArea文本域inputSwitch開關(guān)switchSlider滑塊Upload上傳uploadTransfer穿梭框Form表單FormP3-BForm表單-其他P1-AP1-ATable數(shù)據(jù)表格TableP1BaseTablelistIframeresult指令組件v-loadingv-click-outsideArchSummit全球架構(gòu)師峰會(huì)InfoInfo組件庫梯隊(duì)確立之后需要更易于擴(kuò)展的架構(gòu)、層次設(shè)計(jì)cars-design.bundle.jscars-design.css代碼層工具層語言層ArchSummit全球架構(gòu)師峰會(huì)Info(cars-design.bundle.jscars-design.css代碼層工具層語言層ArchSummit全球架構(gòu)師峰會(huì)Info(Option srcOption srcmain.ts exampleREADME.ndNotification srcmain.ts exampleREADME.ndMessage srcmain.ts exampleREADME.ndLoadingBar srcmain.ts exampleREADME.ndInputTextarea srcmain.ts exampleREADME.nd組件庫是一個(gè)多人協(xié)同的技術(shù)項(xiàng)目，需要建設(shè)一些規(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全球架構(gòu)師峰會(huì)組件庫開發(fā)逐步進(jìn)入核心區(qū)，需要執(zhí)行開發(fā)流程保開發(fā)者信息交換來源：組件庫組件開發(fā)流程示意圖ArchSu^nit全球架構(gòu)師峰會(huì)InfoGInfoQInfoQInfoQInfoQ信息交換與討論的過程讓我們的組件庫收獲頗豐我們統(tǒng)統(tǒng)支持并成功落地；讓我們難以取舍，多次爭吵;讓我們興奮了很長一段時(shí)間;■討論中Rate投票組件，有3種非常優(yōu)秀的實(shí)現(xiàn)方案。我們統(tǒng)統(tǒng)支持并成功落地；讓我們難以取舍，多次爭吵;讓我們興奮了很長一段時(shí)間;■討論中Panel布局組件在API設(shè)計(jì)上存在兩種不同的聲音?！鲇懻撝蠺able組件的實(shí)現(xiàn)意外獲得了靈感。甚至每一個(gè)組件都會(huì)因?yàn)锳PI的設(shè)計(jì)而出現(xiàn)分歧始終堅(jiān)信CarsDesign從實(shí)現(xiàn)、設(shè)計(jì)、方案上都是勇于嘗試，面向未來開發(fā)者使用更爽快而設(shè)計(jì)的ArchSu^mit全球架構(gòu)師峰會(huì)CarsDesignCarsDesign鼓勵(lì)一個(gè)組件的不同實(shí)現(xiàn)方式CarsDesignCarsDesign鼓勵(lì)一個(gè)組件的不同實(shí)現(xiàn)方式很少在各類的組件庫中看到同樣的功能組件會(huì)有不同的實(shí)現(xiàn)方案，甚至各大組件庫中的組件實(shí)現(xiàn)和設(shè)計(jì)都千篇一律。我們鼓勵(lì)嘗試更多思路為更多的場景而設(shè)計(jì);ArchSu^mit全球架構(gòu)師峰會(huì)InfoQDOM事件+數(shù)據(jù)驅(qū)動(dòng)完全通過改變偏移數(shù)據(jù)，控制樣式展示HoverClick觸發(fā)事件―計(jì)算偏移—改變數(shù)據(jù)驅(qū)動(dòng)更新Mousein雙層DOM結(jié)構(gòu)覆蓋配合鼠標(biāo)劃入，移動(dòng)，離開等事件，控制滑塊尺寸或位置Inputtype=rangeInputtype=range通過修改Input的偽類選擇器實(shí)現(xiàn)覆蓋DOM結(jié)構(gòu)inputtype=range來實(shí)現(xiàn)，template沒有其他代碼很簡潔通過偽元素：:-webkit-slider-runnable-track滑塊可滑動(dòng)區(qū)域樣式通過偽元素：:-webkit-slider-thumb滑塊的樣式■通過mask遮罩將圖案遮罩在背景之上，設(shè)置圖案為星星或者字符ArchSu^mit全球架構(gòu)師峰會(huì)InfoQ對(duì)比維度核心思路代碼量兼容性功能豐富度CarsDesign適合場景事件+數(shù)據(jù)驅(qū)動(dòng)雙層DOM結(jié)構(gòu)+樣式邏輯Inputtype=range正常很多弱（需要適配）好好均可實(shí)現(xiàn)均可實(shí)現(xiàn)沒有hover狀態(tài)方案―方案二方案三移動(dòng)端touch拖拽很少Template及其簡潔PC覆蓋率為有限枚舉PC覆蓋率任意（百分比場景）ArchSummit全球架構(gòu)師峰會(huì)InfoQCarsDesign的取舍與糾結(jié)一如何讓開發(fā)者更爽的使用想要實(shí)現(xiàn)一個(gè)panel布局組件，業(yè)務(wù)方有很強(qiáng)的需求；panel尺寸上可以修改，支持無限層級(jí)的嵌套；糾結(jié)于提供怎么樣的數(shù)據(jù)結(jié)構(gòu)可以讓開發(fā)者使用的更自然;TopPaneRightPaneTopPaneBottomPaneArchSu^mit全球架構(gòu)師峰會(huì)InfoQ扁平化的數(shù)據(jù)結(jié)構(gòu)A<divA扁平化的數(shù)據(jù)結(jié)構(gòu)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>使用平鋪的結(jié)構(gòu)，可以讓開發(fā)者清楚的自己的絕對(duì)位置，便于下一步操作▼<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全球架構(gòu)師峰會(huì)InfoG使用平鋪的結(jié)構(gòu)，可以讓開發(fā)者清楚自己的絕對(duì)位置，便于下一步操作"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■結(jié)論：讓開發(fā)者通過位置描述邊界比較難；■結(jié)論：描述邊界線resize時(shí)候的影響范圍也比較難;pos}]IIIIIIII■ArchSummit全球架構(gòu)師峰會(huì)InfoQ使用嵌套的數(shù)據(jù)結(jié)構(gòu)，可以讓開發(fā)者清楚的知道每一個(gè)panel的邊界嵌套遞歸的數(shù)據(jù)結(jié)構(gòu)<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全球架構(gòu)師峰會(huì)InfoQ使用嵌套的數(shù)據(jù)結(jié)構(gòu)，可以讓開發(fā)者清楚的知道每一個(gè)panel的邊界[{"id":"I",IIIIIIII[i,i],"w""h"poschildren:[{"d“：2,"direction":"column","w""h"pos},{"idIIIIIIII[IIIIIIIIJIlDIID，"direction":"column","w""h"IIIIIIIIpos:["",""]}]}]■結(jié)論：開發(fā)者配置起來很爽快，清晰的知道paneI的邊界和邊界影響范圍;■結(jié)論：后向擴(kuò)展的時(shí)候比較麻煩，整體DOM結(jié)構(gòu)比較復(fù)雜；實(shí)現(xiàn)拖拽功能很難;ArchSummit全球架構(gòu)師峰會(huì)InfoQ糾結(jié)組件要如何取舍整合才能幫助開發(fā)者在各個(gè)方向的體驗(yàn)拉滿開發(fā)者組件API入?yún)⑻幚頂?shù)據(jù)拍平用于Panel渲染平鋪數(shù)據(jù)用于邊界渲染vDOM其他用途panelw計(jì)算panelh計(jì)算panelpos用于伸縮動(dòng)作vDOMArchSu^mit全球架構(gòu)師峰會(huì)InfoQCarsDesign從組件設(shè)計(jì)上從來不局限于現(xiàn)有的設(shè)計(jì)。會(huì)使用很多先進(jìn)的特性與屬性并把方案整合成產(chǎn)品信息交換的過程中，我們討論出一個(gè)超棒的技術(shù)實(shí)現(xiàn)方案ArchSu^mit全球架構(gòu)師峰會(huì)ArchSu^mit全球架構(gòu)師峰會(huì)InfoQInfoQInfoQInfoQInfoQ與ElementPlusTable組件對(duì)比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全球架構(gòu)師峰會(huì)Lronsoienews[vite]connecrina與ElementPlusTable組件對(duì)比FPT效果■實(shí)驗(yàn)條件：7列*576行數(shù)據(jù)+固定高度300px+固定寬度900px+FixeCo①localhost:3333ViteApp開始IVite官方中文文檔組件IElement應(yīng)用￡百度一下，你就知道GoogleQ百度翻譯-200種語...CGitHubSeaTable巳工具集巳文檔巳書釜欄Q愛范兒?讓未來觸…［JDailyCollection內(nèi)容介紹（幵始組...flomoQvue3.0Q財(cái)富自由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全球架構(gòu)師峰會(huì)200333200333200333200333200333vite]conDOMREADY：[vite]connecting...[vite]connected.FPT:241.652099609375msDOMREADY：3092.02880859375ConsoleNetworkrequestblocking使用平鋪的結(jié)構(gòu)，可以讓開發(fā)者清楚的自己的絕對(duì)位置，便于下一步操作實(shí)驗(yàn)條件：7列火576行數(shù)據(jù)+固定高度300px+固定寬度900px+Fixed列（開啟左右滑動(dòng)）CarsDesign對(duì)比Element-PlusTable組件FPT時(shí)間對(duì)比OZC400300200100037.331.937.714.732.813.9OZC400300200100037.331.937.714.732.813.98 9 10來源：組件庫BaseTable組件對(duì)比Element-Plus1.0.2.beta.45(2021.05.28)當(dāng)當(dāng)■Qfomt會(huì)架r球全TOPIC：可以通過實(shí)驗(yàn)分析一下影響FPT的渲染有哪些因素ArchSu^mit全球架構(gòu)師峰會(huì)InfoQ對(duì)比兩個(gè)組件的DOMReady時(shí)間實(shí)驗(yàn)條件：7列*576行數(shù)據(jù)+固定咼度300px+固定寬度900px+Fixed列（開啟左右滑動(dòng)）CarsDesign對(duì)比Element-PlusTable組件DomReady時(shí)間對(duì)比?CarsDesign?Element-Plus40003000E回切□ZL2000100003562300235903287 32062963261504 1522 1458 1440 1464 1420 148來源：組件庫BaseTable組件對(duì)比Element-Plus1.0.2.beta.45(2021.05.28)架r球全t會(huì)2986 30631716 156310當(dāng)當(dāng)■Qfom揭開CarsDesignTable的神秘實(shí)現(xiàn)方式揭開CarsDesignTableDOMReady和FPT都遙遙領(lǐng)先的神秘實(shí)現(xiàn)方式ArchSu^mit全球架構(gòu)師峰會(huì)InfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQTable組件的起源CarsDesign中BaseTable組件的實(shí)現(xiàn)及設(shè)計(jì)靈感起源于我們組內(nèi)的一次組件API討論討論Layout布局組件的過程中，有一種布局方是使用Grid布局發(fā)現(xiàn)Grid布局可以快速的使用fr和grid-大的屬性配置行和列，就很像是個(gè)TableCellCellCellCellCellCellCellCellCellCellCellCellCellCellCell大他們每一行的行高都是自動(dòng)撐開的，每一列的列寬都是可以自適應(yīng)和設(shè)置固定寬度的ArchSummit全球架構(gòu)師峰會(huì)InfoQInfoQInfoQInfoQCarsDesign的BaseTable組件實(shí)現(xiàn)過程1fr1fr40px40pxCellCellCellCell40pxCellCellCellGrid-area-*結(jié)論：回歸CSS,因?yàn)镃SSOM在瀏覽器里有單獨(dú)的線程去計(jì)算，且瀏覽器針對(duì)性的優(yōu)化有很多可以控制CSS實(shí)現(xiàn)，自適應(yīng)寬度，固定寬度，高度寬度分別設(shè)置，區(qū)域合并等minmax(1fr,100px)—Cell—Cell—Cell—Cell—1frArchSu^mit全球架構(gòu)師峰會(huì)桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQElement使用一個(gè)新的Table通過絕對(duì)定位，蓋住原來的TableCellArchSu^mit全球架構(gòu)師峰會(huì)BaseTable對(duì)Fixed的處理也有黑科技~ArchSu^mit全球架構(gòu)師峰會(huì)桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQ桌面端組件的天花板一桌面端組件的天花板一Table組件InfoQInfoQTOPIC：CarsDesign對(duì)比Element原理上的優(yōu)勢■Element將Fixed的列計(jì)算出新的Table并覆蓋。導(dǎo)致DOM節(jié)點(diǎn)的增多，行數(shù)越多，DOM節(jié)點(diǎn)越多BElement要大量的JS運(yùn)算來處理這個(gè)新的Table帶來的問題，比如滾動(dòng)跟隨。行數(shù)越多幀數(shù)越低?！鯡lement的新Table導(dǎo)致原有的DOM是割裂的，行高和列寬都需要JS運(yùn)算得出。'CarsDesign中表格都是Grid對(duì)齊的整體塊，行高和列寬都是被CSSGrid所控制的?！鯢ixed的計(jì)算使用STICKY粘性布局，把一切的渲染都交給CSS。行數(shù)越多性能越強(qiáng)。ArchSu^mit全球架構(gòu)師峰會(huì)TOPIC：CarsDesign&&Element大數(shù)據(jù)量渲染動(dòng)態(tài)渲染數(shù)據(jù)量500行DEMOSHOWMERESULTElement-Plus數(shù)據(jù)渲染結(jié)果1 一+X☆G3*?無痕模式。localhost:3333加百度—下’你就知道GGoogle百度翻譯-200種語…。GitHub>SeaTable已工具集已文檔田書簽欄。愛范兒?讓未來觸… BDailyCollection$內(nèi)容介紹（開始組…flomo?醫(yī)］閱讀清單■滾動(dòng)幀數(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ù)■滾動(dòng)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ù)渲染滾動(dòng)示例DOMREADY:2163.39794921875msindex.vue:60ConsoleRenderingSensorsPerformancemonitorxCPUusageJSheapsize0.1%45.8MBDocumentsJSheapsize1noMRDocumentFramescn0MRLayouts/sec0Stylerecalcs/sec0DOMNodes19,97250%JSeventlistenersDOMNodes60,00030,000CPUusage100%Layouts/sec■滾動(dòng)幀數(shù)：12-16■滾動(dòng)CPU:<70%JSHeap:45MBDOMNodes：19,792TOPIC：CarsDesign&&Element大數(shù)據(jù)量渲染 動(dòng)態(tài)渲染數(shù)據(jù)量2000行Element會(huì)由于跟隨計(jì)算過慢，導(dǎo)致進(jìn)程阻塞，出現(xiàn)滾動(dòng)嚴(yán)重卡頓的情況，無法交互CarsDesign會(huì)由于CSSLayout重絵時(shí)間長，出現(xiàn)短暫白屏現(xiàn)象，白屏后可交互/03CarsDesign組件庫周邊ArchSu^mit全球架構(gòu)師峰會(huì)InfoQInfoQInfoQInfoQInfoQ我們一心想讓組件庫研發(fā)服務(wù)化和產(chǎn)品化■使用產(chǎn)品的配置服務(wù)，將研發(fā)對(duì)樣式分層的理解產(chǎn)品化;■逐步公布迭代計(jì)劃，讓我們的用戶有更多的信息很信心;■提供便捷的CLI和項(xiàng)目模板，助力從0到1的工程化創(chuàng)建;ArchSu^mit全球架構(gòu)師峰會(huì)我們一心想讓組件庫研發(fā)服務(wù)化和產(chǎn)品化主題色編輯器普通按鈕Alert警告主題色消息提示的文案主題色錯(cuò)誤提示的文案radio單選框功能色O備選項(xiàng)備選項(xiàng)成功色Progress逬度條警告色Checkbox多選框危險(xiǎn)色E復(fù)選框A復(fù)選框B復(fù)選框C信息色Switch開關(guān)文字色Steps步驟條主要文字色#495056100%常規(guī)文字色#757A7E100%Input輸入框占位文字色#C0C3C5100%DatePicker日期選擇器邊框色邊框基礎(chǔ)色#DEE2E4100%NavMenu導(dǎo)航菜單/導(dǎo)航導(dǎo)航導(dǎo)航Badge標(biāo)記100%危險(xiǎn)按鈕主要按鈕進(jìn)行中■#0776fe98%0-已完成ArchSummit全球架構(gòu)師峰會(huì)0%70%80%O評(píng)論■■■■背景基礎(chǔ)色二I#F7F9FA背景色樣式抽離與可視化配置InfoG通過不斷的公布迭代計(jì)劃使組件庫更加容易被信任組件迭代需求池由鄭傲-前端研發(fā)部-基礎(chǔ)平臺(tái)創(chuàng)it,最終由白靜-前端研發(fā)部-基礎(chǔ)平臺(tái)修改于八月20,2021組件優(yōu)先級(jí)定義:P0-立刻排查修復(fù)P1-可單獨(dú)發(fā)版修復(fù)P2-跟隨小版本修復(fù)P3-跟隨大版本修復(fù)#ID類型

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

引入二測1011BugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFix組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測組件按需

引入二測需求組件問題描述及初步定位需求日期優(yōu)先級(jí)狀態(tài)5迭代版本FIXOwner處理結(jié)論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字體的引入導(dǎo)致cars-icons引入失效ca-checkboxautofocus失敗2021.06.24㈣P2規(guī)劃解決ca-collapse