面向未来的+Vue3.0+桌面组件设计

面向未来的Vue3组件设计ArchSummit全球架构师峰会InfoQ写在前面的话■■关于我和CarsDesign郑傲小米汽车•自动驾驶资深前端研发工程师，曾就职于百度外卖、车好多集团。CarsDesign组件库是车好多对于Vue3.x桌面端实践的一种尝试。作为组件库核心开发者，负责企业内前端基础架构方向的研究与新技术的探索。先后负责企业级Vue2.0组件库，ReactMobile组件库，有丰富组件研发经验。在组件的设计和表达上有独到的见解。在车好多推动Vue3.0组件库研发和落地工作，从零到一设计了一套完整、易用、独立的组件库。InfoQArchSu^mitInfoQ全球架构师峰会

写在前面的话■■关于我和CarsDesignCarsDesign从设计开始目标就是长久的未来。分梯队开发一期交付组件71个，涉及基础布局、样式、数据展示、表单类、弹窗等场景;Commit近2000次。代码行数：142,488行;TypeScript占比大于90%；ArchSu^mitInfoQArchSu^mitInfoQ大纲-组件设计的视角与规范-企业级组件的设计与实现•CarsDesign组件库周边•—些PublicTopicArchSummitMb InfoCt^全球架构师峰会 —'InfoQInfoQInfoQInfoQArchSu^mit全球架构师峰会/01'组件设计的视角与规范不同角色对组件的认知、组件设计要遵循基本的设计规范不同角色对组件的认知、组件设计要遵循基本的设计规范设计视角（品质） 产品视角（沟通）■—套标准的组件库可以对交付的品质兜底，符合大众预期的设计； ■通过了解组件相关能力可以更加专业的表达产品能力;■企业级产品迭代快速，种类繁多，组件库可以减少用户的理解成本；■减少沟通Gap；■组件库可以传递设计价值观；研发视角（认知）■减少认知能量消耗-研发使用组件的目的是可以快速完成业务的开发。搭建出符合大众的基础业务逻辑。-同时从研发的角度出发，对组件的要求又是苛刻的，需要丰富的功能，简单易用同时又足够灵活的API。ArchSu^mit全球架构师峰会组件的设计是一个精细活栅格系统建立布局标准组件标准（设计视角）：栅格，间距，布局基数，行高,字体。丰富API（研发视角）：GutterInline功能扩展（产品视角）：同行等高布局。ArchSu^mit全球架构师峰会成熟的组件都经历设计、迭代、场景适配等多个产品周期■Step1.理解：将B端业务场景抽象成基础组件;■Step2.丰富：考虑到组件的通用性，大量增加组件的API，以服务业务;■Step3.抽象：抽象设计理念，形成设计价值观。平行扩展更多的组件;Step4.业务设计模式的抽象，将部分能力通过配套的周边服务推广给更多的开发者；Step5.提效的下一步：标准的SASS服务，LowCode,ProCode,D2C等等场景，形成完整的产品信任感;ArchSu^mit全球架构师峰会未来的组件库设计-专注打造产品信任感组件库和业务系统对标准化的设计和每一个细节的实现可以有效将信任感和专业性传达给用户ArchSu^mit全球架构师峰会InfoQ/02企业级组件的设计与实现梯队建设、组件多种实现、实现方案的取舍与纠结ArchSu^mit全球架构师峰会InfoQ组件库梯队建设一先想好再出发组件库梯队建设一先想好再出发组件库梯队建设一先想好再出发组件库梯队建设一先想好再出发我的任务G2021年Q2■今天父目标【示例】打赢公司营收攻坚战整理纪要子目标0未开始【示例】持续提升续约能力0未开始【示例】咨询业务成为新的营收增长点■明天状态关键结果进度权重【示例】保质保量兑现销售预期业绩O未开始季度营业收入突破1000万元69%50%关联项目■本月当前进度690起始。万元目标1000万元未开始+新玉相关任务本月收入超过上月收入0%20%+新建目标 查看全部0已完成相关附件lJj上传当前进度完成未完成O进行中输出5个新的营收增长方案40%30%0未开始当前进度2起始■已延期O进行中O未开始O进行中■其他工作台项目消息o*©刘88截止时间：7月1日（O団。个目标5个更新时间：4月18日呼论内容，文字上限2000（Ctrl+Enter发送）46.50%(?我的工作台+新建Q搜索ArchSu^mit全球架构师峰会❸刘WF负责人+新建日程查看全部Progress 眾也。□uttonGroupInputNurnberInputFormCarsDesiqnDatePickerSelectTreeLoadingTagPopoverColorPickerCheckboxTaqSelectArchSu^mit全球架构师峰会InfoQ组件库梯队建设是快速迭代的基础组件库梯队建设是快速迭代的基础组件库梯队建设是快速迭代的基础组件库梯队建设是快速迭代的基础布局样式类组件浮层弹窗类组件表单交互类组件数据展示类组件组件库便捷指令ArchSu^mit全球架构师峰会按实现分类1.0组件名称建站工具分级幵发优先级布局样式系列Layout布局LayoutP1Container布局容器Icon图标Button按钮ButtonCard卡片PanelP1-ATimeline时间轴低优先级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布局样式类组件浮层弹窗类组件表单交互类组件数据展示类组件组件库便捷指令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级联选择TimePicker时间选择器DatePicker日期选择器DateTimePicker日期时间选择器ColorPicker颜色选择器Rate评分布局样式类组件浮层弹窗类组件表单交互类组件数据展示类组件组件库便捷指令ArchSu^mit全球架构师峰会Form表单--Select系列Select选择器P3Cascader级联选择TimePicker时间选择器DatePicker日期选择器DateTimePicker日期时间选择器ColorPicker颜色选择器Rate评分Form表单-其他Radio单选框P3-BCheckbox多选框Input输入框inputInputNumber计数器inputP1-ATextArea文本域inputP1-ASwitch开关switchSlider滑块Upload上传uploadTransfer穿梭框Form表单FormTable数据表格TableP1BaseTable*•_布局样式类组件浮层弹窗类组件表单交互类组件数据展示类组件组件库便捷指令Radio单选框Checkbox多选框Input输入框inputInputNumber计数器inputTextArea文本域inputSwitch开关switchSlider滑块Upload上传uploadTransfer穿梭框Form表单FormP3-BForm表单-其他P1-AP1-ATable数据表格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组件库是一个多人协同的技术项目，需要建设一些规范|-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全球架构师峰会组件库开发逐步进入核心区，需要执行开发流程保开发者信息交换来源：组件库组件开发流程示意图ArchSu^nit全球架构师峰会InfoGInfoQInfoQInfoQInfoQ信息交换与讨论的过程让我们的组件库收获颇丰我们统统支持并成功落地；让我们难以取舍，多次争吵;让我们兴奋了很长一段时间;■讨论中Rate投票组件，有3种非常优秀的实现方案。我们统统支持并成功落地；让我们难以取舍，多次争吵;让我们兴奋了很长一段时间;■讨论中Panel布局组件在API设计上存在两种不同的声音。■讨论中Table组件的实现意外获得了灵感。甚至每一个组件都会因为API的设计而出现分歧始终坚信CarsDesign从实现、设计、方案上都是勇于尝试，面向未来开发者使用更爽快而设计的ArchSu^mit全球架构师峰会CarsDesignCarsDesign鼓励一个组件的不同实现方式CarsDesignCarsDesign鼓励一个组件的不同实现方式很少在各类的组件库中看到同样的功能组件会有不同的实现方案，甚至各大组件库中的组件实现和设计都千篇一律。我们鼓励尝试更多思路为更多的场景而设计;ArchSu^mit全球架构师峰会InfoQDOM事件+数据驱动完全通过改变偏移数据，控制样式展示HoverClick触发事件―计算偏移—改变数据驱动更新Mousein双层DOM结构覆盖配合鼠标划入，移动，离开等事件，控制滑块尺寸或位置Inputtype=rangeInputtype=range通过修改Input的伪类选择器实现覆盖DOM结构inputtype=range来实现，template没有其他代码很简洁通过伪元素：:-webkit-slider-runnable-track滑块可滑动区域样式通过伪元素：:-webkit-slider-thumb滑块的样式■通过mask遮罩将图案遮罩在背景之上，设置图案为星星或者字符ArchSu^mit全球架构师峰会InfoQ对比维度核心思路代码量兼容性功能丰富度CarsDesign适合场景事件+数据驱动双层DOM结构+样式逻辑Inputtype=range正常很多弱（需要适配）好好均可实现均可实现没有hover状态方案―方案二方案三移动端touch拖拽很少Template及其简洁PC覆盖率为有限枚举PC覆盖率任意（百分比场景）ArchSummit全球架构师峰会InfoQCarsDesign的取舍与纠结一如何让开发者更爽的使用想要实现一个panel布局组件，业务方有很强的需求；panel尺寸上可以修改，支持无限层级的嵌套；纠结于提供怎么样的数据结构可以让开发者使用的更自然;TopPaneRightPaneTopPaneBottomPaneArchSu^mit全球架构师峰会InfoQ扁平化的数据结构A<divA扁平化的数据结构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>使用平铺的结构，可以让开发者清楚的自己的绝对位置，便于下一步操作▼<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使用平铺的结构，可以让开发者清楚自己的绝对位置，便于下一步操作"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■结论：让开发者通过位置描述边界比较难；■结论：描述边界线resize时候的影响范围也比较难;pos}]IIIIIIII■ArchSummit全球架构师峰会InfoQ使用嵌套的数据结构，可以让开发者清楚的知道每一个panel的边界嵌套递归的数据结构<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使用嵌套的数据结构，可以让开发者清楚的知道每一个panel的边界[{"id":"I",IIIIIIII[i,i],"w""h"poschildren:[{"d“：2,"direction":"column","w""h"pos},{"idIIIIIIII[IIIIIIIIJIlDIID，"direction":"column","w""h"IIIIIIIIpos:["",""]}]}]■结论：开发者配置起来很爽快，清晰的知道paneI的边界和边界影响范围;■结论：后向扩展的时候比较麻烦，整体DOM结构比较复杂；实现拖拽功能很难;ArchSummit全球架构师峰会InfoQ纠结组件要如何取舍整合才能帮助开发者在各个方向的体验拉满开发者组件API入参处理数据拍平用于Panel渲染平铺数据用于边界渲染vDOM其他用途panelw计算panelh计算panelpos用于伸缩动作vDOMArchSu^mit全球架构师峰会InfoQCarsDesign从组件设计上从来不局限于现有的设计。会使用很多先进的特性与属性并把方案整合成产品信息交换的过程中，我们讨论出一个超棒的技术实现方案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行数据+固定高度300px+固定宽度900px+FixeCo①localhost:3333ViteApp开始IVite官方中文文档组件IElement应用£百度一下，你就知道GoogleQ百度翻译-200种语...CGitHubSeaTable巳工具集巳文档巳书釜栏Q愛范儿•让未来触…［JDailyCollection内容介绍（幵始组...flomoQvue3.0Q财富自由CxqJElementsConsole日期2016-05-022016-05-042016-05-012016-05-032016-05-02上海上海上海上海王小虎王小虎王小虎王小虎王小虎普陀区普陀区普陀区普陀区普陀区上海市普陀区金沙江路1518弄上海市普陀区金沙江路1517弄上海市普陀区金沙江路1519弄上海市普陀区金沙江路1516弄上海市普陀区金沙江路1518弄Element-Plus1.0.2.beta.45(2021.05.28)ArchSummit全球架构师峰会200333200333200333200333200333vite]conDOMREADY：[vite]connecting...[vite]connected.FPT:241.652099609375msDOMREADY：3092.02880859375ConsoleNetworkrequestblocking使用平铺的结构，可以让开发者清楚的自己的绝对位置，便于下一步操作实验条件：7列火576行数据+固定高度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行数据+固定咼度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的神秘实现方式揭开CarsDesignTableDOMReady和FPT都遥遥领先的神秘实现方式ArchSu^mit全球架构师峰会InfoQ桌面端组件的天花板一桌面端组件的天花板一Table组件InfoQInfoQ桌面端组件的天花板一桌面端组件的天花板一Table组件InfoQInfoQTable组件的起源CarsDesign中BaseTable组件的实现及设计灵感起源于我们组内的一次组件API讨论讨论Layout布局组件的过程中，有一种布局方是使用Grid布局发现Grid布局可以快速的使用fr和grid-大的属性配置行和列，就很像是个TableCellCellCellCellCellCellCellCellCellCellCellCellCellCellCell大他们每一行的行高都是自动撑开的，每一列的列宽都是可以自适应和设置固定宽度的ArchSummit全球架构师峰会InfoQInfoQInfoQInfoQCarsDesign的BaseTable组件实现过程1fr1fr40px40pxCellCellCellCell40pxCellCellCellGrid-area-*结论：回归CSS,因为CSSOM在浏览器里有单独的线程去计算，且浏览器针对性的优化有很多可以控制CSS实现，自适应宽度，固定宽度，高度宽度分别设置，区域合并等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原理上的优势■Element将Fixed的列计算出新的Table并覆盖。导致DOM节点的增多，行数越多，DOM节点越多BElement要大量的JS运算来处理这个新的Table带来的问题，比如滚动跟随。行数越多帧数越低。■Element的新Table导致原有的DOM是割裂的，行高和列宽都需要JS运算得出。'CarsDesign中表格都是Grid对齐的整体块，行高和列宽都是被CSSGrid所控制的。■Fixed的计算使用STICKY粘性布局，把一切的渲染都交给CSS。行数越多性能越强。ArchSu^mit全球架构师峰会TOPIC：CarsDesign&&Element大数据量渲染动态渲染数据量500行DEMOSHOWMERESULTElement-Plus数据渲染结果1 一+X☆G3*©无痕模式。localhost:3333加百度—下’你就知道GGoogle百度翻译-200种语…。GitHub>SeaTable已工具集已文档田书签栏。爱范儿•让未来触… BDailyCollection$内容介绍（开始组…flomo»医］阅读清单■滚动帧数：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省份姓名市区地址邮政编码上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎槽陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀200333上海王小虎普陀区上海市普陀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渲染数据■滚动CPU:<90%0 DOMNodes40,00020,000Layouts/secJSHeap:29.5MBDOMNodes：36,897CarsDesign的BaseTable数据渲染展示0v2_CarsDesign。localhost:3000/table-compare卷：百度一下，你就知道 3Google龍百度翻译-200种语…。GitHub<SeaTable日工具集巴文档田书签栏回爱范儿•让未来触…HDailyCollection''内容介绍（开始组...crflomo»回阅读清单FrameRateElementsConsoleSourcesNetworkPerformanceMemory»令16.8fpsFilterDefaultlevels▼目NoIssues省份姓名市区地址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上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海王小虎普陀区上海市普陀区金沙江路1517弄上海市普陀区金沙江路1519弄上海市普陀区金沙江路1516弄上海市普陀区金沙江路1518弄上海市普陀区金沙江路1517弄上海市普陀区金沙江路1519弄上海市普陀区金沙江路1516弄上海市普陀区金沙江路1518弄上海市普陀区金沙江路1517弄上海市普陀区金沙江路1519弄上海市普陀区金沙江路1516弄上海市普陀区金沙江路1518弄4 来源：CarsDesign数据渲染滚动示例DOMREADY:2163.39794921875msindex.vue:60ConsoleRenderingSensorsPerformancemonitorxCPUusageJSheapsize0.1%45.8MBDocumentsJSheapsize1noMRDocumentFramescn0MRLayouts/sec0Stylerecalcs/sec0DOMNodes19,97250%JSeventlistenersDOMNodes60,00030,000CPUusage100%Layouts/sec■滚动帧数：12-16■滚动CPU:<70%JSHeap:45MBDOMNodes：19,792TOPIC：CarsDesign&&Element大数据量渲染 动态渲染数据量2000行Element会由于跟随计算过慢，导致进程阻塞，出现滚动严重卡顿的情况，无法交互CarsDesign会由于CSSLayout重絵时间长，出现短暂白屏现象，白屏后可交互/03CarsDesign组件库周边ArchSu^mit全球架构师峰会InfoQInfoQInfoQInfoQInfoQ我们一心想让组件库研发服务化和产品化■使用产品的配置服务，将研发对样式分层的理解产品化;■逐步公布迭代计划，让我们的用户有更多的信息很信心;■提供便捷的CLI和项目模板，助力从0到1的工程化创建;ArchSu^mit全球架构师峰会我们一心想让组件库研发服务化和产品化主题色编辑器普通按钮Alert警告主题色消息提示的文案主题色错误提示的文案radio单选框功能色O备选项备选项成功色Progress逬度条警告色Checkbox多选框危险色E复选框A复选框B复选框C信息色Switch开关文字色Steps步骤条主要文字色#495056100%常规文字色#757A7E100%Input输入框占位文字色#C0C3C5100%DatePicker日期选择器边框色边框基础色#DEE2E4100%NavMenu导航菜单/导航导航导航Badge标记100%危险按钮主要按钮进行中■#0776fe98%0-已完成ArchSummit全球架构师峰会0%70%80%O评论■■■■背景基础色二I#F7F9FA背景色样式抽离与可视化配置InfoG通过不断的公布迭代计划使组件库更加容易被信任组件迭代需求池由郑傲-前端研发部-基础平台创it,最终由白静-前端研发部-基础平台修改于八月20,2021组件优先级定义:P0-立刻排查修复P1-可单独发版修复P2-跟随小版本修复P3-跟随大版本修复#ID类型

分类来源需求人BugFix组件按需

引入二测1011BugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFixBugFix组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测组件按需

引入二测需求组件问题描述及初步定位需求日期优先级状态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规划解决ca-collapse