跳到主要内容

Token 概述

业务背景​

1、物料平台要接入范式组件，并且通过 token 让不同的业务方可以自定义各自的样式（如字号字体颜色间距等等），形成不同的主题（即 token 的集合，由物料平台维护这些集合），最终达到一键换肤的效果。

2、由于物料平台上还有其他 UI 组件库，不同的组件库可能会有特有的 token，那么 standard-chart 特有的可称之为 chart tokens，大家公有的可称之为 common tokens。

4、物料平台的 token 库完成后，会针对新增物料，添加一些新的 token；组件配置面板目前的方案是新增一个物料就要新开发一个配置面板，配置面板的配置项代码不复用，但是可以嵌入 vue 页面，计划是业务方开发也参与到配置面板的开发中来。

名词解释​

  • token：由设计师命名，指代一些基础样式（如字号，字体，颜色，尺寸等）的字面量，如$font-size 就是字号，$color-warn 就是警告色，其值为字符串（暂定），物料平台的使用者可以在物料平台上对 token 所代表的值进行修改，对 token 进行组合，形成某一业务的主题（如手炒主题，海外主题），主题就是以 token 为键的键值对的集合，通过主题的切换，在物料平台配置组件时可以实现一键换肤的功能。

  • 主题：以 token 为键的键值对的集合（以下简称 token 的集合），是一个对象，如手炒主题、海外主题等。

  • token 库：主题（如手炒主题，海外主题）的集合，由物料平台维护，调用该库后可以通过主题名称查询主题信息 （token 的集合）。

  • token 解析函数：token 的集合的解析器，由可视化维护，入参为 token 的集合，出参为预设主题配置。

  • 预设主题：我们已经编写的预解析函数的集合，目前有 5 个（mobile-app-light、mobile-app-dark、pc-wencai-light、pc-app-light、pc-app-dark）。

  • 预解析函数：对 play 方法接收到的 option 进行处理的函数，可以理解成 pipeline。

  • 默认预设主题配置：预设主题所依赖的基本的样式属性，如字号、字体、颜色等等，是一个对象，其每一个属性的值都是范式给的

  • 预设主题配置：预设主题所依赖的基本的样式属性，如字号、字体、颜色等等，是由 token 解析函数接收 token 的集合后输出的对象，若未传入 token 的集合则输出默认预设主题配置。

Token 机制流程​

token

在范式组件图表中使用 token​

代码调用示例

import { registerTheme, init } from 'standard-chart';
import { setThemeConfigWithToken, themeA, themeB } from 'standard-chart/preset-theme-plugin';

// 初始化
init(dom0, themeA.name);
init(dom1, themeB.name);