# Nano Design

## 设计模式
NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用，应用于各产品中从而产出了一套设计及前端规范。

## 简介

Nano Design 是 NANO 设计风格 的 React 实现，用于开发和服务企业级后台产品。
Nano Design 基于 antd 组件库，是 antd 组件的**超集**。包含了 antd 提供的基础组件，以及符合业务的业务性组件。

## 特性
完美继承 antd 的换肤方案和按需加载

## 目录结构
```
- components/
  - **/                           <-- 存放自开发组件
  - nanoReset.less                 <-- Nano 样式提取样式变量
- dist/
  - nanod.xxx/                     <-- 全量包
- demo/                         <-- 测试 Demo 页面
- lib/                             <-- 所有组件平铺目录（构建自动生成）用于按需加载
- tools/                           <-- gulp 脚本，构建命令
- vendor/                          <-- 第三方包目录 
```

## 构建命令
- npm run clean  清理构建目录，./lib ./dist
- npm run init-antd  初始化所有 antd 组件，并构建至 ./lib 目录中
- npm run compile  编译自有组件，并构建至 ./lib 目录中
- npm run build 构建自开发组件和antd组件，并打包 至 dist

## 发布
修改 package.json
> "version": "0.0.12",
执行 `npm publish`

## API
### NanoLayout
Nano 风格的 Layout 组件，继承于 Layout，具体文档请参照 [Layout](https://ant.design/components/layout-cn/#header)，

相较于 Layout,封装了自己的 Logo 组件，

| 参数      |     说明 |   类型   |   默认值   |
| :-------- | :--------| :------ | :------: |
| logo    |   产品 logo 的 url |  string  | ''  |
| title    |  产品文字  |  string \| ReactNode \| () => ReactNode  | ''  |

> <Logo logo="//gw.alicdn.com/mt/TB1J7tGdXOWBuNjy0FiXXXFxVXa-72-72.png" title="智能风控" />