@adomtheme/dict-tel

简介

本工程覆盖 antd3/4 组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。

• modalWidth.js // 导出的弹窗或抽屉宽度变量，方便统一控制页面弹窗及抽屉宽度
• theme.js // 用于导入到 webpack 配置文件的 lessOptions-->modifyVars 实现组件换肤
• theme.less // 针对于使用 less 的工程项目提供的 less 变量，在工程内全局引入，并在编写样式时使用其内部变量
• theme.scss // 针对于使用 scss 的工程项目提供的 scss 变量，在工程内全局引入，并在编写样式时使用其内部变量

安装配置

先安装本工程包，对应项目的中找到 webpack.config.js 文件，给 antd 组件库引入包里的的 theme.js,实现组件换肤。这是你应该就能正常使用里面的变量了。

+ import theme from '@adomtheme/dict-tel';

module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+         modifyVars: theme,
+         javascriptEnabled: true,
+       },
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

umi3/4 工程则直接替换配置的 theme 即可

+ import theme from '@adomtheme/dict-tel';

// .umirc.js 或 config/config.js
export default {
  theme,
}

如果项目使用的是 scss 编写样式，则需要全局导入 scss/less 变量 先安装 sass-resources-loader

+ import themeScss from '@adomtheme/dict-tel/scss/theme.scss';

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [themeScss]
          },
        },
      ],
    },
  ],
},

变量使用规则

变量内提供色板，文字大小，移入等效果变量值，需要按规则使用

• 文字/图标颜色

'heading-color': 标题,
'text-color': 正文,
'text-color-paragraph': 段落,
'text-color-secondary': 说明,
'disabled-color': 禁用文字,

// 反色文字，深色背景中使用
'text-color-inverse': 标题,
'text-color-dark': 正文,
'text-color-paragraph-dark': 段落,
'text-color-secondary-dark': 说明,
'disabled-color-dark': 禁用文字,

• 行移入或活动颜色

'item-hover-bg': 移入行,
'item-active-bg': 活动/选中行,

• 背景填充

'color-fill-1': 白色填充
'color-fill-2': 亮灰色填充
'color-fill-3': 灰色填充或禁用背景
'color-fill-4': 暗灰色填充或标签背景
'color-fill-5': 图标或反色标签背景
'modal-mask-bg': 遮罩背景

• 边线

'color-line-1': 较浅的轮廓线(页面卡片)
'color-line-2': 分割线,较重的轮廓线
'color-line-3': 按钮,表单空间边框,分割器
'color-line-4': 加重的线条,线条悬浮

• 间距

// 区块内元素间距使用以下变量：
space-xxs: 2px;
space-xs: 4px;
space-sm: 8px;
space-md: 12px;
space-lg: 16px;
space-xl: 20px;
space-xxl: 24px;

// 页面一级区块(容器)的内容间距
'box-padding-base': 容器默认内间距,
'box-padding-sm': 容器小号内间距,

• 页面间距,页面最外层的 wraper 间距

'page-space': '0 40px 16px 40px',

• 文字大小

'font-size-sm': 小号文字
'font-size-md': 中号文字
'font-size-base': 默认文字(比中号大或相等)
'font-size-lg': 大号文字
'font-weight': 字重(一般是500)
'heading-1-size': 对应H1标签
'heading-2-size': 对应H2标签
'heading-3-size': 对应H3标签
'heading-4-size': 对应H4标签
'heading-5-size': 对应H5标签
'heading-6-size': 对应H6标签

• 尺寸,多用于高度设置，如果宽高一致可以宽高同时使用

'size-xs'
'size-sm'
'size-md'
'size-base'
'size-lg'
'size-xl'

• 圆角

border-radius-base
border-radius-lg
border-radius-md
border-radius-sm
border-radius-round(50%)
box-border-radius: 页面所有区块的圆角

• 阴影投影

box-shadow-1: 轻微变化、抬起
box-shadow-2: 抓起、拖拽的物体
box-shadow-3: 鼠标移入后抬起的物体
box-shadow-4: 弹出的物体、包括抽屉、弹窗、浮层

• 组件高度(按钮,文本框等高度) 需要自己实现组件时使用

height-base
height-lg
height-sm

• 色板使用 提供了色板使用，每个色值分 1-10 级，可根据需要自行组合使用。需要实现情景内容交互效果，大原则如下： 颜色色板：red，volcano，orange，gold，yellow，lime，green，cyan，blue，geekblue，purple，magenta，pink 情景色板：primary(主色)，info，success，warning，error，highlight

使用场景： 背景色：xxx-1 移入文字颜色: xxx-5 默认文字颜色: xxx-6 点击文字颜色: xxx-7 如：

.box {
  color: @blue-6;
  background-color: @blue-1;
  &:hover {
    color: @blue-5;
  }
  &:active {
    color: @blue-7;
  }
}

这里只做示例参考，具体选值由 UI 确定

• 弹窗宽度 为了方便统一弹窗及抽屉的宽度控制，统一由包引入宽度,如下面使用 /bin/default/modalWidth 文件内容

const modalWidths = {
  xs: '256px',
  sm: '500px',
  md: '768px',
  lg: '1000px',
  xl: '80%',
};

使用方法

import React from 'react';
import { Modal } from 'antd';
+ import modalWidth from '@adomtheme/dict-tel/js/modalWidth';

const Demo = () => {
  return (
    <Modal title="测试弹窗" width={modalWidth?.md}>111</Modal>
  )
}

15. 公共组件样式


fishx 和 umi项目可以在global.less 加入

@import '~@adomtheme/dict/index.less';

cra项目可以在app.js中 

import '~@adomtheme/dict/index.less';