大屏模板

概要

本示例为结合@td-design/charts组件库的图表模板，包括 32:9 和 16:9 版本。

用 babel-plugin-import 引入@td-design/charts 组件样式

需要在项目根目录下babel.config.js文件中加入以下配置：

plugins: [
    [
      'import',
      {
        libraryName: '@td-design/charts',
        customName: (name) => {
          if (name.indexOf('create') > -1) {
            return `@td-design/charts/es/utils/${name}`;
          }
          return `@td-design/charts/es/components/${name}`;
        },
        style: true,
      },
    ],
  ],

使用主题配置功能

步骤一：安装环境

安装最新版 umi-plugin-antd-theme，

步骤二：基础配置

在项目 config 文件夹下新建 theme.config.json 文件，然后加入以下配置：

{
  "theme": [
    {
      "theme": "dark",
      "fileName": "dark.css",
      "modifyVars": {
        "@blue-screen-bg": "#090b2c"
      }
    },
    {
      "theme": "light",
      "fileName": "light.css",
      "modifyVars": {
        "@blue-screen-bg": "#fff"
      }
    }
  ],
  // 是否压缩css
  "min": true,
  // css module
  "isModule": true,
  // 忽略 antd 的依赖
  "ignoreAntd": false,
  // 忽略 pro-layout
  "ignoreProLayout": false,
  // 使用缓存
  "cache": true,
  // 引入外库less文件
  "extraLibraries": ["@td-design/charts"]
}

theme 下的 modifyVars 下默认可配置 antd 的自带样式变量如：@primary-color 等。

其中 extraLibraries 项目加入组件库名称后可以引入其他库的样式，并且添加组件库中定义的 less 变量到 modifyVars 下，可实现对该变量的主题色自定义配置，就可以实现组件库主题样式的统一配置。

步骤三：项目中使用经过主题色配置的变量

在 src/styles 文件夹下 default.less 下添加该变量的默认配置。如：

@blue-screen-bg: #fff;

在项目的样式文件xxx.module.less中使用该颜色变量，并从 default.less 文件中引入。antd-pro-merge-less会自动将该组件库中处理过的样式整合入/theme/xxx.css下，缓存在 node_modules/.plugin-theme 下就可以实现自定义主题色配置了。

响应式实践标准

思路是通过antd的RowCol组件在不同breakPoint下的span，来调整它在当前Row中的布局。下面实践出了一套标准，可以参考模板代码和下面的标准加深理解。

	32-9	16-9	目地
xl(>1200)	ScreenLeft/Center/Right：8/8/8	ScreenLeft/Center/Right:7/10/7	大屏状态
md(>=768)	ScreenLeft/Center/Right：24/24/24 内部RowCol按原有布局：如第一行两列,Row1Col1/Row1Col2:12/12	ScreenLeft/Center/Right：24/24/24 内部RowCol按原有布局,如左	pad左中右叠成一列，各自内部原有布局
xs(<576)	ScreenLeft/Center/Right：24/24/24 内部RowCol全部叠成一列：如第一行两列,Row1Col1/Row1Col2:24/24	ScreenLeft/Center/Right：24/24/24 内部RowCol全部叠成一列,如左	手机左中右叠成一列，各自内部也叠成一列

PS：
1、 空间优化：两个没有x坐标轴的图表（如单例环形图（createDonutPlot）和玫瑰图（createStackRosePlot））。当在同一行时，避免空间浪费，可以在>sm(576)时保持原有布局(取代>md(768))。例如这两个图在同一行各占一半时，则设置xs={24} sm={12} 。