bonree-design

博睿组件

与 ant-design 仓库 master 分支保存同步

开发

主要文件目录

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

本地开发

windows 环境不要使用 power shell

$ npm install

$ npm run start

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

1. mac 环境报错

   点击查看解决方案

   如何查看 npm 全局安装路径

2. 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 变量，必须重新赋值
  • 如果需要新增 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 run pub

与 UI 规范的差别

select 组件

• 搜索按钮
  • 规范：可以点击
  • 实际：不能点击
• 清除按钮
  • 规范：一直显示
  • 实际：在输入框 hover 态才显示

transfer 组件

• 下拉框滚动条
  • 规范：滚动条不占位
  • 实际：滚动条使用-webkit-scrollbar 进行修改，滚动条会占位，滚动条样式会在 ie 和 firefox 中失效

timepicker 组件

• 下拉框滚动条
  • 规范：滚动条不占位
  • 实际：滚动条使用-webkit-scrollbar 进行修改，滚动条会占位，滚动条样式会在 ie 和 firefox 中失效

datepicker 组件

• Datepicker.RangePicker
  • 暂时不支持手动更改值
  • 暂时不支持picker=time和showTime属性

常见问题

antd FAQ

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

官方 issue

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

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