# react components for web design

### 部分组件行为参考自ant Design,造自己的轮子，爱上编程，感谢开源社区。

# 使用前脑补关键字
### 程序逻辑：
程序逻辑是描述和论证程序行为的逻辑，又称霍尔逻辑。程序和逻辑有着本质的联系。如果把程序看成一个执行过程，程序逻辑的基本方法是先给出建立程序和逻辑间联系的形式化方法，然后建立程序逻辑系统，并在此系统中研究程序的各种性质。
### 业务逻辑
业务逻辑从名称上来看，首先是业务，这个业务一般是指软件要实现的功能，即客户的业务，要实现这些业务就有一个流程，流程是按某种关系形成的一个链，链之间的关系具有一定的逻辑性，综合起来就构成了业务逻辑。
### 抽象：
从具体事物抽出、概括出它们共同的方面、本质属性与关系等，而将个别的、非本质的方面、属性与关系舍弃，这种思维过程，称为抽象。

抽象是通过分析与综合的途径，运用概念在人脑中再现对象的质和本质的方法，分为质的抽象和本质的抽象。分析形成质的抽象，综合形成本质的抽象（也叫具体的抽象）。作为科学体系出发点和人对事物完整的认识，只能是本质的抽象（具体的抽象）。质的抽象只能是本质的抽象中的一个环节，不能作为完整的认识，更不能作为科学体系的出发点。
### 具象化
就是把抽象的东西 ，表现得很具体，简单地说 就是把看不见的、不容易理解的，变得看得见、容易理解。 

**所以，才有了==micdesign==~~**



example地址：[https://alexwang007.github.io/micDesignExample/](https://alexwang007.github.io/micDesignExample/)

```npm
npm i @microduino/micdesign --save-dev

```
## 使用babel-plugin-import实现按需加载

### 安装 babel-plugin-import 插件
```npm
npm i babel-plugin-import -D
```

```js
// 在 .babelrc 或 babel-loader 中添加插件配置
{
  "plugins": [
    ["import", {
      "libraryName": "@microduino/micdesign",
      "style": "css",
      "camel2DashComponentName": false
    }]
  ]
}
```

## 现有组件列表
```js
module.exports = {
    Form: require('./lib/Form').default,
    FormItem: require('./lib/FormItem').default,
    Input: require('./lib/Input').default,
    TextArea: require('./lib/TextArea').default,
    Button: require('./lib/Button').default,
    Image: require('./lib/Image').default,
    Radio: require('./lib/Radio').default,
    Checkbox: require('./lib/Checkbox').default,
    CheckboxGroup: require('./lib/CheckboxGroup').default,
    Select: require('./lib/Select').default,
    Search: require('./lib/Search').default,
    FileUpload: require('./lib/FileUpload').default,
    Tags: require('./lib/Tags').default,
    Tabs: require('./lib/Tabs').default,
    InputTags: require('./lib/InputTags').default,
    UserAvatar: require('./lib/UserAvatar').default,
    Modal: require('./lib/Modal').default,
    Rate: require('./lib/Rate').default,
    Loading: require('./lib/Loading').default,
    Banner: require('./lib/Banner').default,
    CodeEditor: require('./lib/CodeEditor').default,
    Editor: require('./lib/Editor').default,
    Confirm: require('./lib/Confirm').default,
    Share: require('./lib/Share').default,
    Pagination: require('./lib/Pagination').default,
    OrderBtn: require('./lib/OrderBtn').default,
    Process: require('./lib/Process').default,
    Message: require('./lib/Message').default,
    Recorder: require('./lib/Recorder').default,
    DynamicInput: require('./lib/DynamicInput').default,
    SectorProcess: require('./lib/SectorProcess').default,
    Nav: require('./lib/Nav').default
    Step: require('./lib/Step').default
}
```

# 未来相关计划

## 2018遗留问题
### micDesign 优化
* Button组件增加几种常用颜色模式，
* Button组件 loading状态重构，增加progress模式
* Button组件重构，不再使用label包装，移动端圆角样式问题优化~~
* Button组件增加color props，用于自定义颜色
* 单例Radio组件实现~~
* 单例Checkbox组件优化~~
* 以前的Radio变成RadioGroup组件实现~~
* 新增Table组件~~
* Image 组件 src={setOssImage(undefined, 185, 185)} 错误图不出来
* Input clear 没有触发onChange~~
* 表单项的每个组件都需要增加error的样式和disable的样式~~~
* 头像组件 禁言不能直接替换的问题（外部逻辑问题~~不一定处理）
* input增加type=date处理  日历，日期选择组件实现~~~
* ...的文字动画集成到micDesign里
* tag组件和tags组件整理融合~~~抽离
* tab优化，移动端项目com目录的Tab需要抽走，集成到micdesign里
* tag标签增加颜色配置 字，和背景色
* tag标签  反色模式~~~参考antd
* 增加icon图标配置标签 字体图标库（可能要做另一个包了）
* 拖拽排序功能封装~~~~~
* 需要抽离用于表单的tag和用于展示的tag
* textarea 的字数统计和input的字数统计，可以考虑合并这俩组件~~ 优先级不高~~
* onerror的处理 应该扔在最后，外部出错会阻塞包内流程
* 构建流程优化
* 配置全局css~~~~非import babel plugin 模式可用，非react项目使用~~~

## 2019计划（重新定义拆分）

包名 | 介绍
------- | -------
micdesign-pc | pc组件库
micdesign-mobile | mobile组件库
micdesign-iconFont | 字体库
micdesign-animition | 动画库
micdesign-layout | 布局库
micdesign-utils | 工具库
mic-accont-center | 账户中心GUI
mic-share-anywhere | 分享通用GUI

* ts重构或者增加flowtype
* unittest增强
* 跨平台相关，IDE插件集成
* SEO相关优化集成

--------------------------------------------------------------------------
## 其他整理（待定）
* canvas
* svg
* webGL
* ECharts
* AI
* 3D
* 游戏
* scratch
* anything...