ehome-visual-standard

左邻视觉规范

1. 安装

npm install ehome-visual-standard --save-dev

2. 文字样式

文字样式通过类名 class 的形式调用，类名以 eh- 开头。

const text = <p className="eh-t1">Hello, Sinker</p>

3. 色库取值

对于 UI 设计稿中给出的色号（例 C001），通过项目的相对路径引用该项目下的 less 文件，获取到色值变量的引用。

@import '~ehome-visual-standard/styles/eh-normalize-HD.less';
 
.c001 {
  color: @c016;
  background-color: @c001;
}

4. 项目色

4-1. 在项目入口的调用

在左邻运营后台，可以在模块【域空间配置】中设置每一个域空间的主题色，通过后台提供的接口，我们可以在项目中获取项目的主题色。

参考杰哥的 主题配色 中提供的解决方案，封装了 init.js 方法用于设置主题色。

init.js 中通过异步请求获取主题色并利用 css-vars-ponyfill 设置主题色，对接时直接在项目的样式表使用即可。

调用方法只需要在项目中 public/index.html 中引入第一个 script 标签前引入 init.js 及其依赖脚本文件。

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@1"></script>
<script src="./init.js"></script>

4-2. 在 .less 中的调用

在 .less 文件中声明变量或者直接使用 var(--theme) 均可以。

.eh-btn {
  // some styles... 
  background-color: @eh-theme;
  color: #fff;
  &:active, &:hover {
    background-color: @eh-pressed;
  }
  &[disabled] {
    background-color: @eh-bg_invalid;
  }
}
.eh-text {
  // some styles... 
  color: @eh-text_invalid;
}
.eh-div {
  // some styles... 
  background-color: @eh-bg_opacity;
}

如果项目中不需要引入视觉规范包的 .less 文件，则需要在项目自身顶部的 less 文件中声明相关的项目色变量。

@eh-theme: var(--theme);
@eh-pressed: var(--pressed);
@eh-bg_invalid: var(--bg_invalid);
@eh-text_invalid: var(--text_invalid);
@eh-bg_opacity: var(--bg_opacity);

注意：项目中的项目色变量声明字段名不能修改。

项目色的获取是异步的，要考虑到异步调用结束前的页面状态，应避免主题色设置后的页面抖动。

4-3. 对 antd-mobile 主题色的修改

在规范包中 styles 目录下的样式文件（eh-normalize-HD.less 和 eh-normalize.less）已经对相关的主题色变量进行覆盖

对于 antd 组件的样式修改，需要业务开发单独在模块中设置样式去覆盖，即根据模块使用到的组件，给组件的样式进行定制覆盖。

@class-prefix: eh-home;
.@{class-prefix} {
  .am-button {
    background-color: @eh-theme;
    border-color: @eh-theme;
  }
  .am-button-active {
    background-color: @eh-pressed;
    border-color: @eh-pressed;
  }
  .am-button-disabled {
    background-color: @eh-bg_invalid;
    color: #fff;
  }
}