[0001] 本发明涉及UI设计开发技术领域；具体而言，涉及一种Sigma‑UI组件库的UI组件优化方法及系统。

[0002] 目前国内的前端项目开发中使用到的UI（用户界面User Interface）组件库很多，常用的UI组件库有Ant Design和Element UI等类型，前端页面的开发通常使用相应的UI组件库中的组件进行实现。

[0003] 目前，大部分企业直接使用上述UI组件库来进行项目的开发，少数企业会建立内部的UI设计规范，开发出新的UI组件库，在企业内部进行使用。

[0004] 然而，现有的UI设计开发技术存在以下缺点：1）支持定制化的功能相较弱，不同的项目使用同一个UI组件库，会出现重复造轮子的情况。

[0005] 2）组件维护成本高，每一次版本升级都需要去维护样式，修复由升级导致的样式错乱等问题。

[0006] 3）企业内部项目多，使用同一个UI组件库，对于不同项目中的风格有差异，同一个企业的多个产品的样式风格得不到统一。

[0007] 4）开源UI组件库与项目业务往往不一致，定制化内容需要在每一个项目都进行实现，也会出现重复造轮子的情况。

[0034] 这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和产品的例子。

[0035] 在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

[0036] 应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

[0037] 下面对本发明实施例作进一步详细说明。

[0038] 本发明实施例提供一种Sigma‑UI组件库的UI组件优化方法，参见图13所示，包括以下步骤：S1、在Sigma‑UI项目的组件库设计中引入Ant Design组件库的对应文件，对Ant Design组件库中的组件进行主题定制，使各类组件具有初始样式；
本实施例中包括引入Ant Design库的默认样式文件@import "antd/es/style/default.less";按钮组件的样式文件引入：@import  "antd/es/button/style/index.less";等。

[0039] S2、在组件样式初始化的基础上，基于Ant Design组件库定义的一系列全局/组件的样式变量，根据Sigma‑UI项目的组件库需求，调整各类组件的样式属性；调整各类组件的样式属性的方法包括：
设置按钮的默认背景色；具体地，用@btn‑default‑bg: #01afc9;来设置。

[0040] 设置按钮的默认字体颜色；具体地，用@btn‑default‑color: #fff;来设置。

[0041] 根据UI界面的实际显示情况，使用支持的颜色变量实现预期的效果。

[0042] S3、在Sigma‑UI组件库中修改Ant Design组件库中已有的组件，减少组件的配置参数，新增Ant Design组件库中没有的组件属性，新增Ant Design组件库中没有的组件。

[0043] Ant Design的组件库中可配置的参数比较多（如图1所示），可以自如地实现大多数场景。但是，考虑到使用环境中部分参数使用的场景并不多，如果将所有的参数都支持，会增加组件使用的学习成本，这些参数会让组件的使用情况变得复杂且后续也不好维护。期望的内部组件库Sigma UI是一个简单易上手的组件库，能用尽可能少的参数配置就能实现预期的效果。

[0044] 修改Ant Design组件库中已有的组件方法包括：配置Button按钮组件的属性参数，所述属性参数包括（如图2所示）：block、className、danger、disabled、htmlType、icon、primary、style、onClock。

[0045] 新增Ant Design组件库中没有的组件属性的方法包括：在Button组件中新增block属性参数，支持将按钮宽度调整为父宽度；新增参数block后，在Button组件中根据block参数值的有无，控制Button组件的样式，如有block参数，则设置按钮的样式为：宽度调整为其父组件的样式；如没有block参数，则显示默认情况的样式。

[0046] block参数就是Ant Design组件库中Button的参数并没有支持的，但是这种按钮出现的场景很多，例如通常的登录、注册、忘记密码页面的按钮，基本上都是这种样式，通过兼容业务情况新增属性，可以更方便地实现预期的效果（如图3所示）。

[0047] 新增Ant Design组件库中没有的组件属性的方法还包括：Popover组件新增showArrow属性参数，支持隐藏箭头。

[0048] Ant Design组件库支持的Popover的默认效果如图4所示。一些场景下，显示提示时希望页面足够简洁，不希望有箭头的显示，使用showArrow参数实现对应的配置，实现对应的页面效果（如图5、6所示）。不需要在每一个使用到该页面效果的项目中都对已有组件进行样式覆盖。

[0049] 新增showArrow参数后，在Popover组件中根据showArrow参数值的有无，控制Popover组件的箭头样式，如有showArrow参数，则正常显示Popover组件的箭头；如没有showArrow参数，则显示Popover组件没有箭头的样式。

[0050] 新增Ant Design组件库中没有的组件的方法包括：新增Copy复制组件、可选表格组件SelectableTable。

[0051] Copy复制组件为常用的复制，在页面显示为一股复制的图表，鼠标单击后，可获取配置的复制内容，用于复制ID等信息，在项目详情页中被使用，取得了良好的交互效果。

[0052] SelectableTable组件为可选表格组件。现有的Ant Design组件库只是支持单选和多选的表格行，只能在表格一行的一列中，加上单选按钮和多选框，如果想要选中这一行，只能通过选中单选框和多选框才能进行，这种交互就存在比较大的弊端，用户可选的范围非常小，交互体验不好。本发明Sigma UI中的SelectableTable组件就完美地解决了上述问题，只要用户点击表格的一行内的任意位置，都能选中表格的这一行，可选的位置增大，让用户体验感增强，使用也更便利。

[0053] SelectableTable组件常用于一些配置项的选择，无论一行内容的多少，显示简洁，交互良好。SelectableTable组件可在表格选中的场景下进行使用，且只需要在表格中每一行的任意位置单击选中即可选中该行，交互效果良好。使用SelectableTable组件的单选用法如图7所示，单选用法的代码演示如图8所示，多选用法如图9所示，多选用法的代码演示如图10所示。

[0054] 本实施例的Sigma‑UI组件库的组件文档如图11、12所示。

[0055] 本发明实施例还提供一种Sigma‑UI组件库的UI组件优化系统，执行如上述所述的Sigma‑UI组件库的UI组件优化方法，包括：组件样式初始化模块：用于在Sigma‑UI项目的组件库设计中引入Ant Design组件库的对应文件，对Ant Design组件库中的组件进行主题定制，使各类组件具有初始样式；
调整组件样式属性模块：用于在组件样式初始化的基础上，基于Ant Design组件库定义的一系列全局/组件的样式变量，根据Sigma‑UI项目的组件库需求，调整各类组件的样式属性；
修改Ant Design组件模块：用于在Sigma‑UI组件库中修改Ant Design组件库中已有的组件，减少组件的配置参数，新增Ant Design组件库中没有的组件属性，新增Ant Design组件库中没有的组件。

[0056] 本发明实施例还提供一种计算机设备，图14是本发明实施例提供的一种计算机设备的结构示意图；参见附图图14所示，该计算机设备包括：输入装置23、输出装置24、存储器22和处理器21；所述存储器22，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器21执行，使得所述一个或多个处理器21实现如上述实施例提供的Sigma‑UI组件库的UI组件优化方法；其中输入装置23、输出装置24、存储器22和处理器21可以通过总线或者其他方式连接，图14中以通过总线连接为例。

[0057] 存储器22作为一种计算设备可读写存储介质，可用于存储软件程序、计算机可执行程序，如本发明实施例所述的Sigma‑UI组件库的UI组件优化方法对应的程序指令；存储器22可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等；此外，存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件；在一些实例中，存储器22可进一步包括相对于处理器21远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

[0058] 输入装置23可用于接收输入的数字或字符信息，以及产生与设备的用户设置以及功能控制有关的键信号输入；输出装置24可包括显示屏等显示设备。

[0059] 处理器21通过运行存储在存储器22中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的Sigma‑UI组件库的UI组件优化方法。

[0060] 上述提供的计算机设备可用于执行上述实施例提供的Sigma‑UI组件库的UI组件优化方法，具备相应的功能和有益效果。

[0061] 本发明实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如上述实施例提供的Sigma‑UI组件库的UI组件优化方法，存储介质是任何的各种类型的存储器设备或存储设备，存储介质包括：安装介质，例如CD‑ROM、软盘或磁带装置；计算机系统存储器或随机存取存储器，诸如DRAM、DDR RAM、SRAM、EDO RAM，兰巴斯(Rambus)RAM等；非易失性存储器，诸如闪存、磁介质(例如硬盘或光存储)；寄存器或其它相似类型的存储器元件等；存储介质可以还包括其它类型的存储器或其组合；另外，存储介质可以位于程序在其中被执行的第一计算机系统中，或者可以位于不同的第二计算机系统中，第二计算机系统通过网络(诸如因特网)连接到第一计算机系统；第二计算机系统可以提供程序指令给第一计算机用于执行。存储介质包括可以驻留在不同位置中(例如在通过网络连接的不同计算机系统中)的两个或更多存储介质。存储介质可以存储可由一个或多个处理器执行的程序指令(例如具体实现为计算机程序)。

[0062] 当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上实施例所述的Sigma‑UI组件库的UI组件优化方法，还可以执行本发明任意实施例所提供的Sigma‑UI组件库的UI组件优化方法中的相关操作。至此，已经结合附图所示的优选实施方式描述了本发明的技术方案，但是，本领域技术人员容易理解的是，本发明的保护范围显然不局限于这些具体实施方式。在不偏离本发明的原理的前提下，本领域技术人员可以对相关技术特征做出等同的更改或替换，这些更改或替换之后的技术方案都将落入本发明的保护范围之内。

[0063] 以上所述仅为本发明的优选实施例，并不用于限制本发明；对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。