跳到主要内容

主题自定义

前置条件​

开发者需要具备一定的前端开发能力，熟悉以下技术栈：

开发环境​

  • NodeJS 14+
  • yarn 1.22+

开发流程​

目前炎凰数据平台支持的客制化主要有以下方面：

  • 颜色的自定义
  • 图片等静态资源的自定义
  • 描述语句的自定义

样例项目结构​

参考: https://jihulab.com/yh/solutions/projects/yhp-isv-custom-package

样例目录的结构类似于如下结构：

.
├── README.md
├── assets
│   ├── i18n
│   └── images
├── package.json
├── theme_colors
│   └── enterprise.ts
├── tools
│   └──theme_generator.ts
├── tsconfig.json
└── yarn.lock

其中：

  • assets目录放置的是一些静态资源，例如：图片，国际化文件等。
  • theme_colors目录放置的是颜色定义文件。
  • tools目录放置的是一些工具文件，用于最后将自定义颜色文件翻译成YHP系统能够识别的主题文件，
  • tsconfig.json是typescript的配置文件。样例项目中使用了typescript来开发，但是用户也可以使用javascript来开发。

定制颜色​

炎凰数据平台的颜色定义采用了token定义的方式，因此可以通过修改token的方式来定制颜色。炎凰数据平台的tokne定义分为语义层（Semantic tokens）和组件层（Component tokens）。 语义层（Semantic tokens）制定了一系列具有潜在语义的颜色，例如：

  • 成功Success，
  • 失败/危险 Error/Danger，
  • 警告 Warning，
  • 信息 Info，
  • 商标Brand等。

这些颜色可以在组件层（Component tokens）中被引用，例如：按钮的背景色，边框色，文字颜色等。

定制静态资源​

在assets/images目录中，用户可以自定义图片资源，例如：logo，登录页面的背景图片等。

./assets/images
├── favicon.ico
├── login-page-bg.png
├── logo.svg
├── logo_with_text.svg
├── logo_with_text_white.svg
└── slogan.svg

由于我们在不同的地方使用了不同形式的logo，所以如果需要自定义系统中使用的Logo，用户需要准备以下三个文件：

  • logo.svg: 不带文字的logo，用于在左侧菜单收起时顶部显示 大小 28 x 45
  • logo_with_text.svg: 用于在浅色背景下显示带有文字的logo，大小：116 x 45, 登录页面使用
  • logo_with_text_white.svg: 用于在深色背景下显示带有文字的logo，大小：116 x 45

上述尺寸均为实际展示中的尺寸，如果用户使用的是一个svg，那么只要保证长宽比例和上述的比例一致，系统就会自动缩放以匹配原先大小

登陆界面图片​

如果用户需要定制登录页面的左侧背景图片，则需要修改：

  • login-page-bg.png: 登录页面左侧背景图片
  • slogan.svg: 大数至简的标语。

用户需要自定义以上两个文件

定制描述语句​

理论上系统中出现的各种描述性语句，包括且不限于对于系统的简介，商标的描述等字符串都可以完全自定义，用户可以自行在 assets/i18n中搜索并替换。

./assets/i18n
├── en-US
│   ├── charts.json
│   ├── common.json
│   └── modules.json
└── zh-CN
    ├── charts.json
    ├── common.json
    └── modules.json

部署​

当你编辑完成之后，可以通过以下命令来构建：

yarn build

该命令会生成一个build目录，用户需要将这些文件打包并解压到:

${ICEFJORD_PV_HOME}/${TENANT_ID}/global/theme/

并确保${ICEFJORD_PV_HOME}/${TENANT_ID}/global/theme/${THEME_NAME}/antd.light.js这个文件存在

在本例子中，我们是针对enterprise主题进行自定义，所以在build的结果中会有一个enterprise目录, 如果用户希望部署在鸿鹄的环境中，则需要将这个目录重命名为community