@microduino/micdesign

microduino component design for react

Stats

StarsIssuesVersionUpdatedCreatedSize
@microduino/micdesign
1.15.52 years ago4 years agoMinified + gzip package size for @microduino/micdesign in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.