统一工作台在线主题配置

由于之前采用 scss 样式覆盖，导致链路较长使用体验不佳，我们在 2022 年 5 月 20 日在统一工作台中加入了动态调整主题的特性（一键换肤）。

用户可以在交付控制台（console）的配置中心里方便的配置整个统一工作台（workspace）的样式。

使用方式

选择颜色后点击「应用」，重新刷新统一工作台即可生效。

注意

workspace 与 console 需要配套升级（workspace 需要升级到 520 以后的版本，console >= 139）。

已有样式覆盖的工程

去除原有环境变量 INJECT_FOOTER，然后在对应交付控制台（console）中选取新的样式。

原有 OSS 中的样式文件在配置后可以删除。
没有覆盖样式的工程

直接在配置中心里面选取新的样式。

镜像

t-workspace：registry.erda.cloud/trantor/trantor-webnest:0.18.x.20220520173424

t-console: registry.cn-hangzhou.aliyuncs.com/terminus/trantor-console:1.18.0-support-console-18.139

由于 css-vars 为较新的特性，如若遇到组件样式问题可以直接联系 @许超进行修复。

统一工作台主题配置(旧)

目前我们可以通过少量的 sass 配置，生成覆盖全局的 css 文件，自定义 UI 样式，适应不同项目的需求

1. 基本原理

统一工作台基于 nusi 组件库进行开发，nusi 组件库采用 SCSS/SASS （向后兼容的CSS 扩展语言，以下我们统一约定为 SCSS）编写样式，而工作台的样式定义主要通过 scss-variables 来实现。

SCSS变量很简单：我们可以分配给以$开头的变量，然后您可以引用该名称而不是值本身，可以帮助减少重复定义，优化项目结构，做复杂运算等。.

在 018 版本，我们在工作台中引入了 Antd 组件库，部分 Antd 组件样式可能也需要覆盖，原理同上。

举个例子：

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

通过 scss-lodaer，以上 scss 文件会被转换为

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

统一工作台的主题配置正式通过更改覆盖 SCSS 变量的方式来实现

2. 配置流程

安装 nusi 主题生成器（ @terminus/nusi-theme-generator）

首先需要确保拥有npm @terminus 仓库的访问权限
Terminal window
```
# 全局安装，如果安装出错，建议降低 node 版本，不高于 14 再重试
npm i @terminus/nusi-theme-generator -g
```

初始化主题配置项目

# 初始化项目，此后会生成一个名为 webnest-theme 的文件夹
# - webnest-theme
# -  -  package.json
# -  -  theme_nusi.scss
# -  - theme_antd.less
nusi-theme-generator init

拉取原有样式文件

为保证样式文件与线上环境依赖中的样式文件的一致性，每次生成的时候需要手动的同步一下依赖，同步的文件主要有：webnest相关样式, nusi.scss。

以测试环境 https://trantor-gaia-workspace.app.terminus.io为例，根据实际线上环境进行对应更改
1. 修改 package.json 中 nusi 的版本，确保版本一致
  
  在浏览器中打开 https://trantor-gaia-workspace.app.terminus.io/trantor.boot.json, 在该 json 文件中找到 @terminus/nusi 与 @terminus/t-workspace ，将其版本同步到主题配置项目的 package.json 中
```
{
  "name": "@terminus/webnest-theme-templates",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    // 注意这里要与线上样式一致，否则样式可能会出 bug（注意修改版本）
    "@terminus/nusi": "3.10.125",
    "@terminus/t-workspace": "2.18.176"
  }
}
```
2. 完成以上两步后，我们在项目根目录安装依赖并同步对应样式文件。 yarn or npm install，安装对应依赖。

修改样式

修改工程初始化生成的 theme_nusi.scss 文件

scss 文件变量覆盖需要放在覆盖文件的上方！

// -------- 配置变量覆盖 --------
// --------- 在此修改任何你想要修改的样式 ----------------
$primary: #16a085;
$primary-hover: #0da44d;
$blue: #3498dc;
$green: #2ecc71;
$red: #f04844;
$yellow: #ffa847;

// -------- 注意先后顺序，scss 修改的样式变量一定要位于以下两个文件的上方，否则覆盖失效 --------------------

// 导入 nusi.scss
@import '~@terminus/nusi/dist/nusi.scss';
// 导入 webnest.scss
@import './webnest.scss';

修改工程初始化生成的 theme_antd.less 文件

less 文件变量覆盖需要放在覆盖文件的下方！

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';

// -------- 注意先后顺序，less 文件修改的样式变量一定要位于以下两个文件的下方，否则覆盖失效 ----------------

//@primary-color: #1890ff;
//@link-color: #1890ff;
//@success-color: #52c41a;
//@warning-color: #faad14;
//@error-color: #f5222d;
//@font-size-base: 14px;
//@heading-color: rgba(0, 0, 0, 0.85);
//@text-color: rgba(0, 0, 0, 0.65);
//@text-color-secondary: rgba(0, 0, 0, 0.45);
//@disabled-color: rgba(0, 0, 0, 0.25);
//@border-radius-base: 2px;
//@border-color-base: #d9d9d9;
//@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
//0 9px 28px 8px rgba(0, 0, 0, 0.05);

生成覆盖文件，上传至业务相关 OSS

执行 nusi-theme-generator transform 命令，生成 webnest.css 文件，该文件就是我们最终用于覆盖工作台样式的文件。

将该文件上传至 OSS。（参考如何上传文件到 OSS）。
在 Dice 环境遍历中配置 INJECT_FOOTER，重新运行流水线即可生效。

INJECT_FOOTER=<link href="https://dy-midend-prod.oss-cn-shanghai.aliyuncs.com/trantor/css/webnest.css" rel="stylesheet">

如有使用疑问，可在钉钉直接联系 trantor 技术支持