0.5.2-blue • Published 2 years ago
bonree-design-antd v0.5.2-blue
博睿组件
与 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 环境报错
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: #007cf8; // 页面、按钮文字颜色 @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
常见问题
form 表单校验错误提示没有实时同步国际化?
form 表单错误提示的中英文切换需要在项目代码中额外添加
useEff(() => {
FormInstance.validateFields;
}, [i18n.local]);