bonree-design

博睿组件

与 antd-4.17.4 保持一致并固定此版本

开发

主要文件目录

├── components    # 组件源码和demo
├── docs          # 文档markdown内容
├── site          # 文档网站布局和代码
└── package.json

git 分支

组件库分为绿色主题版、蓝色主题版，分别对应分支bonree-green、bonree-blue。

bonree-blue分支基于bonree-green分支并做了一些特殊处理，所以请注意：

• 必须先在bonree-green分支修改代码并提交
• 再切换到bonree-blue分支，合并bonree-green分支到bonree-blue分支

本地开发

windows 环境不要使用 power shell

$ npm install

$ npm run start

npm install 时 node-gyp 报错解决方案：

• mac 环境报错

  点击查看解决方案

  如何查看 npm 全局安装路径

• windows 环境下 node-gyp 提示要安装 Python

  Run CMD as Administrator:
  npm --add-python-to-path='true' install --global windows-build-tools
  

  安装 windows-build-tools 需要非常非常长的时间

  如果安装 windows-build-tools 失败，可以尝试手动安装 python

代码规范

基本原则： 多覆盖，少修改

样式改动

4.17.0 及以上版本代码中存在两套主题 less 文件，npm run build打包时使用components\style\themes\default.less，但npm run start则是使用components\style\themes\variable.less.

• 所有样式改动只能注释源代码再新增代码

  • css 或者 less 语言缺乏逻辑性，但是互相耦合性又极强，保留源代码可以方便以后进行 debug

• 在components\style\themes\index.less中配置主题

  • 不要对components\style\themes\default.less做任何改动
  • 不要对components\style\themes\variable.less做任何改动
  • 如果需要覆盖原有 less 变量，在components\style\themes\index.less重新赋值
  • 如果需要新增 less 变量，必须以br-开头命名变量
  • less 变量必须要有注释
  • 全局元素样式增加在文件底部

  //  全局主色
  @primary-color: #00ccd9;
  //  页面、按钮文字颜色
  @text-color: #4e4e4e;
  //  字体最大
  @br-font-size-largest: 16px;
  //  主要用于页面卡片
  @br-border-radius-lg: 5px;
  

• 组件样式改动

  • 不要修改源代码，不要改变代码结构
  • 不要修改源代码，不要改变代码结构
  • 不要修改源代码，不要改变代码结构
  • 必须使用注释源码，新增代码方式修改组件样式文件

组件逻辑改动

参照官方要求Code convention for antd

文档和 demo 改动

参照官方要求Configuration for Documentation and Demo

构建发布

// 打包编译

$ npm run build
// 发布npm包

$ npm run pub

！！非常重要！！：执行npm run build打包编译前，必须在 package.json 中 name 字段末尾加上'-antd'，要不然会编译失败。 执行npm run pub前，必须将 package.json 中 name 字段去掉'-antd'，要不然会发布到其他 npm 包中。

// 构建文档网站

$ npm run site

常见问题

antd FAQ

form 表单校验错误提示没有实时同步国际化？

官方 issue

form 表单错误提示的中英文切换需要在项目代码中额外添加

useEff(() => {
  FormInstance.validateFields;
}, [i18n.local]);