# Captain UI

## 版本区分

- master 分支基于 Vant 2 开发，版本号为 2.x
- 1.x    分支基于 Vant 1 开发，版本号为 1.x

## 安装

```shell
npm i -S captain-ui
```

## 使用

### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```js
// .babelrc or babel-loader option
{
 "plugins": [
   ["import", { "libraryName": "captain-ui", "style": true }]
 ]
}
```
接着你可以直接引入 captain-ui 组件，等价于下方的按需引入组件

```js
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
import { Pay } from 'captain-ui';
```

### 按需引入

#### js引入

每个组件都有自己对应的npm包，可以直接单独引入对应的包
```js
import { Pay } from 'captain-pay';
```
#### css引入
css 文件引入需要 [postcss-easy-import](https://github.com/TrySound/postcss-easy-import) 类似插件解析引入的css文件路径
```css
@import 'captain-pay';
// 没有插件的情况下，可以用以下方式直接引入
// @import 'captain-pay/lib/index.css';
```

## 运行示例demo

### 安装项目依赖

```shell
yarn install
ynpm install -g felint #代码校验
felint hooks #添加校验钩子
```

### 增加 localhost host解析
```
localhost 127.0.0.1
```

### 运行demo

```sehll
make dev
```
在浏览器中打开 [http://localhost:3003/](http://localhost:3003/) 即可

## 开发新组件
以创建组件 OrderPay 为例

### 增加文档导航配置
在 `docs/doc.config.js` 中增加对应的文档配置

### 文档编写
在 `docs/examples-docs` 目录下增加对应组件的文档，默认会直接引入 `index.md` 文档进行编译
与index.md同级目录下的 `config.js` 定义mock的请求数据，格式如下：

```javascript
module.exports = [{
  // 发起请求的链接
  url: '/v2/pay/UnifiedCashier/getQrcode.json',
  // 发起请求的请求方式
  method: 'POST',
  // 请求的返回数据内容
  response: {
   code: 0,
   msg: '处理成功',
   data: {
    content: 'aHR0cHM6Ly93d3cuaGFvMTIzLmNvbS8=',
    imageFormat: 'png',
    codeFormat: 'QR_CODE',
    encoding: 'BASE64',
    width: 300,
    height: 300
   }
  }
}, {
  url: '/v2/pay/UnifiedCashier/payStatus.json',
  method: 'POST',
  response: {
   code: 0,
   msg: '处理成功',
   data: {
    status: 'success'
   }
  }
}];
```

# 如何更新文档网站

1. 本地构建

```bash
npm run deploy
```

2. 登录 qa 机器更新代码
没有 qa 机器权限的话，可以在 ops 上申请，应用名为 fe-lab

```bash
i qabb-fe-doc0
cd /data/project/captain-ui/
sudo git pull
```