小蜜蜂Web-UI套件

运行环境

1. 支持 Hooks 请确保 React 版本 16.8.x 及以上
2. 未引入主题包 与 国际化，未来考虑引入
3. 需在全局引入样式文件 import 'bees-web-ui/dist/index.css'

1. Model 数据模型 | beta 0.1

用法：

// models.js
import { Model } from './bees-web-ui'

export default class Index extends Model {
  // 初始 State
  initialState = {
    count: 1,
    list: [],
  }

  // 接口请求 
  async get() {
    const res = await axios()
    this.dispath({
      list: res.data,
      count: res.count,
    })
  }
}

// view.js
import React, { useReducer, useEffect } from 'react'
import Models from './models'

const $models = new Models()

export default () => {
  const [state, dispatch] = useReducer($models.reducer, $models.initialState)
  $models.assign(dispatch)

  const { count, list } = state

  useEffect(() => { $models.get() }, [])

  return (
    <Table
      datasource={list}
      total={count}
    />
  )
}

2. Icon 图标

用法：

import { Icon } from './bees-web-ui'

export default () => (
  <Icon
    type="icon-browse"
    color="#1890ff"
    className="myIcon"
    style={{ fontSize: 30 }}
  />
)

API： | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | type | 类型 | string | icon-check | | color | 颜色 | string | #1890ff |

3. Block 区域块

用法：

import { Block } from './bees-web-ui'

export default () => (
  <Block
    loading
    className="myBlock"
    style={{}}
    onClick={() => {}}
  >
    内容加载中...
  </Block>
)

API： | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | loading | 是否为加载中状态 | boolean | false |

4. Align 布局

用法：

import { Align } from './bees-web-ui'

export default () => (
  <Align
    gutter={20}
    align="jm"
    flex={[1, 1, 1]}
    className="myAlign"
    style={{}}
    onClick={() => {}}
  >
    <p>水平方向：l(左)、c(中)、r(右)、s(均分)、j(两端)</p>
    <p>垂直方向：t(上)、m(中)、b(下)</p>
    <p>flex：[1, 1, 1]、['30%', '60%', '10%']、['300px', '600px']</p>
  </Align>
)

API： | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | gutter | 栅格间的间距 | number | 8 | | align | 排列方式="水平垂直" | lcrj + tmb | lm | | flex | 栅格占位 | array | [] |

5. ColorPicker 选色器

用法：

import { ColorPicker } from './bees-web-ui'

export default () => (
  <ColorPicker
    width={60}
    height={60}
    defaultColor="red"
    onChange={(color) => {
      console.log(color)
    }}
  />
)

API： | 字段 | 说明 | 类型 | 默认值 | | ---- | ------------ | ---- | ---- | | width | 宽度 | number、auto(自适应) | 32 | | height | 高度 | number | 32 | | defaultColor | (非受控)颜色 | string | rgb(24, 144, 255) | | color | (受控)颜色 | string | null | | onChange | 回调，返回色值 | function | (color = null) => {} | | style | 样式 | object | {} |

6. Product 产品卡片

用法：

import { Product } from './bees-web-ui'

const Designer = Product.Designer

export default () => (
  <Product
    loading={false} // 加载状态 => 默认 false ，为 true 时装载骨架屏
    edit={false} // 编辑模式 => 默认 false ，为 true 时 onCover 、onTitle 事件失效, extra 元素不渲染
    border // 边框 => 默认 false ，为 true 时显示边框
    id="产品ID" // ID => 必填，所有产品事件返回此项
    cover="https://img.zcool.cn/community/01761459c36700a8012053f8048bb7.png" // 缩略图 => 必填，只接收 url 连接，暂不支持元素
    coverHeight={180} // 缩略图高度 => 默认 168px
    // 卡片 hover 状态，展示元素 => 长度大于 2 自动合并为下拉模式，下拉模式下不支持 props 设置
    extra={[{
      label: '查看', // 文字
      onClick: id => console.log(id), // 事件 => 返回 id
      props: {}, // 元素 props => { className, style, disabled, size, type }
    }, {
      label: '收藏', // 文字
      onClick: id => console.log(id), // 事件 => 返回 id
      props: {}, // 元素 props => { className, style, disabled, size, type }
    }]}
    title="小蜜蜂自家用豆腐" // 标题 => 必填           （未来考虑适用性改造）
    extensionName="PSD" // 补充属性 => Tag 标        （未来考虑适用性改造）
    category="电商 - 海报" // 补充属性 => 文字内容     （未来考虑适用性改造）
    viewsNum={999} // 查看                          （未来考虑适用性改造）
    favoritesNum={999} // 收藏                      （未来考虑适用性改造）
    downloadsNum={999} // 下载                      （未来考虑适用性改造）
    onCover={id => console.log(id)} // 点击缩略图触发事件 => 返回 id
    onTitle={id => console.log(id)} // 点击标题触发事件 => 返回 id
    onEdit={id => console.log(id)} // 编辑模式 => 勾选事件，返回 id
  >
    {/* 不加载 Designer 组件，则不展示作者相关信息 */}
    <Designer
      loading={false} // 加载状态 => 默认 false ，为 true 时装载骨架屏
      id="设计师ID" // ID => 必填，所有设计师事件返回此项
      avatar="" // 头像 => 只接收 url 连接，暂不支持元素，为空时取昵称用做头像
      name="我是小蜜蜂呀" // 昵称
      onClick={id => console.log(id)} // 点击用户头像昵称触发事件 => 返回设计师 id
    />
  </Product>
)

API： ...

作者 [白告] 2020 年 07月 15日