前言

为提升研发效率，减少重复开发投入，中原银行研发了一套通用可扩展的管理端模板工程，让业务方可以只关注于业务开发，为业务赋能提效。这套管理端模板工程，具备开箱即用、规范统一、对接丰富、配套齐全等特点，已支撑行内几十套业务系统的研发建设（详情可查看统一开发平台通用管理端工程）。

管理端工程定位服务于后台管理类系统，前期只提供了一种布局和主题样式。但是随着业务的发展，业务场景越来越丰富，固定的布局和主题已经难以满足个性化需求，统一的界面风格也略显单调。在项目研发过程中，项目组经常需要根据产品需求、使用场景等，对项目的布局风格、主题样式做出调整。比如 API 治理平台、诊断分析平台、原效、新原心桌面端等，都重新设计了更具特色的界面风格。

基于以上痛点，秉承为业务赋能提效的理念，中原银行前端研发团队在管理端工程上新增了一套控制布局风格和主题样式的配置体系，为个性化的界面风格和主题样式提供一站式解决方案，避免业务重复造轮子，提高业务系统研发效能。

管理端工程的主题

主题包括布局和样式两部分。如果把前端项目开发比作搭积木，那么布局就是积木的排列方式，而样式就是积木的颜色。

1.布局

布局包括侧栏、顶栏、主内容区及它们内部的子视图如菜单、LOGO、页签等界面元素的位置和大小。

管理端工程内置了四种布局：

2.样式

样式主要是指页面的色彩元素，如主题色、字体颜色、背景色等。管理端工程的样式包括自定义样式与组件库样式。

管理端工程除了原本的一套主题样式，另外内置了四种主题样式供开发者选择：

使用主题

为了便于使用主题，让开发人员快速上手，我们在设计之初就赋予了主题功能两大特性：

·主题功能统一配置，无需修改多个文件；

·所见即所得的在线预览，并支持主题一键导出和快速导入。

1.统一配置

为了实现简单配置快速使用的目的，系统把主题的属性统一到一个配置文件里，并且每一个属性都提供了详细的注释，开发者按照注释描述更改对应的属性值即可实现主题样式的快速切换。

2.在线预览与一键导入导出

为了便于开发者查看不同配置效果并快速应用，我们提供了在线配置并实时预览的功能，为开发者提供所见即所得的使用体验，当开发者在完成在线配置时，可一键导出配置文件，快速应用。

导出的配置文件内容基于所见即所得原则，完全符合界面显示效果，只需按照导出说明，把配置文件拷贝到项目里，主题即可生效。

自定义主题

如果内置主题不满足需求，管理端工程还支持自定义主题功能。可以通过新增布局和新增主题样式来完成主题自定义。

1.新增布局

新增布局，只需通过以下两步完成：

·拷贝现有布局。拷贝现有的任意一个布局文件放在布局文件目录下。

·修改文件名。修改拷贝的布局文件名。

至此，一份新的布局就完成了。但这只是新增了一个符合规范的基础布局结构，开发者需要在此结构基础上按照自己的需求调整布局内容。

2.新增主题样式

新增主题样式的流程和在线导出配置文件相似，三步即可完成：

·在线编辑配置。打开主题色调试开关，调试主题色。

·开启样式导出。在弹出的窗口选择开启样式导出，并填写主题样式名称。

·复制资源。按照导出说明把导出的配置文件和样式资源复制到项目里。无需做其他更改，就能应用新的主题样式。

管理端工程对主题样式内容采用开放机制，除了文件中明确注释的几个关键参数，开发者可以自由修改其他任何内容，给予项目组最大的自由度和可定制性。

实现原理

管理端工程的主题功能通过简单、快捷的配置，可见即所得的实现，为研发者带来可定制化的风格样式，为用户提供丰富多彩视觉感受。这种灵活强大的主题功能，依赖工程底层科学巧妙的设计，本模块就从 4 个维度来揭秘主题功能的实现原理。

·目录结构设计

在目录结构方面，采用布局和样式都以文件夹作为最小单元的方式，并且约定布局名或主题样式名作为文件夹名称，基于这个约定则可以：

（1）通过 webpack 的 require.context()方法获取布局和样式的基本信息，并处理为可选项供开发者选择。

（2）通过 import()方法动态加载组件库样式资源。

·样式隔离设计

在样式隔离方面，无论布局还是主题样式，都使用一个顶级类名作区分。

·配置导出设计

在导出方面，通过内置的几个模板文件，结合在线配置的参数，组合成导出的资源文件。

·色彩控制设计

在主题色配置方面，依赖 element-ui 组件库本身的特征，即 element-ui2.0 版本之后所有的样式都是基于 SCSS（CSS 预处理器）编写，所有颜色都是基于几个基础颜色变量来设置，如：

基于此设计，只要新建 style 标签，复制一份原样式表内容，修改和主题色相关的颜色值，设置到 style 的 innerText 属性，再把 style 标签添加到 head 中，就可以实现主题色的更改。

总结

通用管理端工程目前已支持新一代信贷系统、DevOps 平台、交易银行平台等四十多套业务系统的开发，此次推出的主题功能，可为业务系统提供更加丰富多彩的管理端。

但这就是最终实现吗？当然不是。当前导出的主题样式只是更改了主题色，布局风格还不够丰富。未来，中原银行前端研发团队，将实现能够导出包含更多色彩设置的主题样式，扩展更多的布局风格，以提供更加多彩缤纷的用户界面，支撑越来越丰富的业务需求！

另外，当主题功能遇到 Vue3 和 Element Plus 会怎么样？基于现代浏览器强大的新特性，似乎一切都充满了可能，中原银行前端研发团队将积极跟进业界先进技术发展与应用实践，不断推出更多降本增效的功能和产品，请拭目以待！

本文转载自原银科技微信公众号

原文链接：丰富多彩的管理端—主题功能介绍