@microduino/micdesign

react components for web design

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

使用前脑补关键字

程序逻辑：

程序逻辑是描述和论证程序行为的逻辑，又称霍尔逻辑。程序和逻辑有着本质的联系。如果把程序看成一个执行过程，程序逻辑的基本方法是先给出建立程序和逻辑间联系的形式化方法，然后建立程序逻辑系统，并在此系统中研究程序的各种性质。

业务逻辑

业务逻辑从名称上来看，首先是业务，这个业务一般是指软件要实现的功能，即客户的业务，要实现这些业务就有一个流程，流程是按某种关系形成的一个链，链之间的关系具有一定的逻辑性，综合起来就构成了业务逻辑。

抽象：

从具体事物抽出、概括出它们共同的方面、本质属性与关系等，而将个别的、非本质的方面、属性与关系舍弃，这种思维过程，称为抽象。

抽象是通过分析与综合的途径，运用概念在人脑中再现对象的质和本质的方法，分为质的抽象和本质的抽象。分析形成质的抽象，综合形成本质的抽象（也叫具体的抽象）。作为科学体系出发点和人对事物完整的认识，只能是本质的抽象（具体的抽象）。质的抽象只能是本质的抽象中的一个环节，不能作为完整的认识，更不能作为科学体系的出发点。

具象化

就是把抽象的东西 ，表现得很具体，简单地说 就是把看不见的、不容易理解的，变得看得见、容易理解。 

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

example地址：https://alexwang007.github.io/micDesignExample/

npm i @microduino/micdesign --save-dev

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

安装 babel-plugin-import 插件

npm i babel-plugin-import -D

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

现有组件列表

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...