0.1.7 • Published 3 years ago

antd-bonree-test v0.1.7

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

博睿组件

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 失败,可以尝试安装 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 态才显示

常见问题

antd FAQ

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

官方 issue

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

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