# bees-web-ui

> 小蜜蜂Web-UI套件-目前为小蜜蜂产品服务使用

Latest version **0.0.25** (published 2020-08-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install bees-web-ui
pnpm add bees-web-ui
yarn add bees-web-ui
bun add bees-web-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.25 |
| Published | 2020-08-10 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 白告 |
| Maintainers | maohaoyun |
| Keywords | ui |

## Links

- npm: https://www.npmjs.com/package/bees-web-ui
- Repository: git@gitee.com:beesui/BeesUI
- npm.io page: https://npm.io/package/bees-web-ui

## Dependencies (11)

- [antd](https://npm.io/package/antd.md) ^3.26.18
- [react](https://npm.io/package/react.md) ^16.13.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [css-loader](https://npm.io/package/css-loader.md) ^3.5.3
- [typescript](https://npm.io/package/typescript.md) ^3.9.3
- [react-color](https://npm.io/package/react-color.md) ^2.18.1
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.35
- [style-loader](https://npm.io/package/style-loader.md) ^1.2.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.25 (latest) — 2020-08-10
- 0.0.24 — 2020-08-10
- 0.0.23 — 2020-07-25
- 0.0.22 — 2020-07-25
- 0.0.21 — 2020-07-15
- 0.0.20 — 2020-07-15
- 0.0.19 — 2020-07-15
- 0.0.18 — 2020-07-14
- 0.0.17 — 2020-07-08
- 0.0.16 — 2020-07-06
- 0.0.15 — 2020-06-08
- 0.0.14 — 2020-06-04
- 0.0.13 — 2020-06-03
- 0.0.12 — 2020-06-02
- 0.0.11 — 2020-05-29
- … 10 more at https://npm.io/package/bees-web-ui/versions

## README

# 小蜜蜂Web-UI套件

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

#### 1. Model 数据模型 | beta 0.1
**用法：**
``` javascript
// 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,
    })
  }
}
```

``` javascript
// 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 图标
**用法：**
``` javascript
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 区域块
**用法：**
``` javascript
import { Block } from './bees-web-ui'

export default () => (
  <Block
    loading
    className="myBlock"
    style={{}}
    onClick={() => {}}
  >
    内容加载中...
  </Block>
)
```
**API：**
| 字段 | 说明         | 类型 | 默认值 |
| ---- | ------------ | ---- | ----   |
| loading | 是否为加载中状态 | boolean | false |

#### 4. Align 布局
**用法：**
``` javascript
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 选色器
**用法：**
``` javascript
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 产品卡片
**用法：**
``` javascript
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日

---
_Source: https://npm.io/package/bees-web-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._