iuap-design / bee.tinper.org

bee components Official Website - bee组件库文档官网

bee.tinper.org

基础组件官网

更新组件步骤

1、在 app/utils/getRelease.js 配置 github token和user

2、执行 npm run writeNew 更新组件相关文件

3、在 bee.tinper.org/app/utils 下新建 ossConfig.json 文件，填写 oss 配置信息，格式如下

```
{
    "accessKeyId": "xxxxxxx",
    "accessKeySecret": "xxxxx",
    "bucket": "xxxxx",
    "region": "xxxxx"
}
```

5、执行 npm run putCDN 将各版本文件上传到cdn上

6、执行 npm start 本地运行

注意：

• 步骤 2 需要 本机 github网络较好，读取需要更新的组件下载并覆盖本地文件
• 如有新增组件，可以使用 npm run writeFile2命令，增量下载组件
• npm run writeFile命令，移除所有已下载的tinper-bee组件，重新下载，由于网络原因不建议使用此命令

新增组件步骤

1、在 sidebar.json 文件中新增组件菜单

2、在 componentsSource.json 文件中新增组件

新增文档，修改文档步骤

1、 在 sidebar.json 文件中新增或者修改 文档 菜单名称、menus

• 注：menus为文档内所有二级标题

设置有组件有更新红点的办法

• 默认在创建 demo.js时候，会将组件写入 new.json 文件中，在new.json文件中存在的组件会有红点

• 如需要手动增加 组件，修改 new.json 文件即可，注意要在 npm run getTag 之后修改

bee.tinper.org's Issues

08.29 上线内容

#	组件名称	已完成功能描述	进度	负责人	版本	备注
1	bee-transfer 穿梭框	实现左右框item穿梭，items的全选部分选，示例情况完成，文档完成	100%	ahua52	0.0.3	补充测试用例和完善拖拽功能
2	bee-timeline 时间轴	实现 系列的信息按时间排序的时候或者做个可视化的连接,记录进程，示例情况完成，文档完成	100%	ahua52	0.0.4	补充测试用例
3	bee-step 步骤条	实现复杂任务分步骤展示,记录进程，示例情况完成，文档完成	100%	ahua52	0.0.4	补充测试用例
4	bee-city-select 城市地区选择	实现**地区的选择，示例情况完成，文档完成	100%	ahua52	0.0.3	补充测试用例

10.18 上线内容

#	组件名称	已完成功能描述	进度	负责人	版本	备注
1	bee-layout 布局	升级prop-type与react	100%	ahua52	1.0.0	-
2	bee-button 按钮	升级prop-type与react	100%	ahua52	1.0.0	-
3	bee-panel 面板	升级prop-type与react	100%	ahua52	1.0.0	-
4	bee-transition	升级prop-type与react	100%	ahua52	1.0.0	-
5	bee-animate	升级prop-type与react	100%	ahua52	1.0.0	-
6	tinper-bee-core	升级prop-type与react	100%	ahua52	1.0.0	-
7	bee-badge 徽章	升级prop-type与react	100%	ahua52	1.0.0	-
8	bee-navbar 导航	升级prop-type与react	100%	ahua52	1.0.0	-
9	bee-form-control 输入框	升级prop-type与react	100%	ahua52	1.0.0	-
10	bee-input-group 输入框组	升级prop-type与react	100%	ahua52	1.0.0	-
11	bee-form-group 表单组	升级prop-type与react	100%	ahua52	1.0.0	-
12	bee-radio-group 单选框	升级prop-type与react	100%	ahua52	1.0.0	-
13	bee-overlay	升级prop-type与react	100%	ahua52	1.0.0	-

table组件页面的图标字体走偏

table组件页面的图标字体走偏，因为md.css的box-sizing样式干扰

统一把文档标题改成h2

统一把文档标题改成h2

对于这次出差使用文档的一些建议反馈

按照我们目前的官网示例系统来看，还不是很好，主要是方便性，比如说，我在使用的过程中，打开http://bee.tinper.org/bee-table/ 表格组件文档，网速慢的话，会发现demo没有加载，这个我是能理解的，等一下就可以一个个蹦出来。但是我想看下实现的表格里面都有哪些示例.

1. 比如像antd那样的副标题，给我一些传送门的体验那样比较好，对于项目上的前端有的水平忽高忽低，他们必须有这种的方便的体验，要不然看都不愿意看，就会直接去群里去说这个组件没有吧啦吧啦的。

2. 再就是我们的代码复制系统，严重缺失体验，复制的不属于代码的一些空格，错位，在VSCODE里都无法格式化的那种，这点参考antd的代码系统。还有相应的锚点链接。我想一键复制代码都不能.

3. 要增加codepen 这类的代码真实示例系统，一个链接过去，用户自己看一下具体怎么实现的，可以在线去修改去运行，这样动手的能力也有了。

4. 优化我们的代码，我们作为大前端为别人提供代码的时候，一定要讲究代码风格，对于分公司这类的前端都不是专业的前端，复制的代码会一直那样去复制去做，不会讲究代码风格，可能一个无状态组件会一直那么用。

5. 文档API有个别的错误，比如table的api，里面有的markdown都写错了，需要自查，不然太让人笑话了。

6. 文档的样式是否找专业的UI UE去重新设计，目前的太丑了，在外面听到过这样的评价。

7. 我们目前的demo实现的一些功能代码，有点反人类，就拿table来说，我要实现表格checkbox选中这样的功能，我发现我要自己去实现很多代码，一顿复制粘贴，把太多的状态暴露在外面了，这样对于小白来说简直是灾难，我之前组件用的少，直到今天，我发现我竟然不会用，但是我看antd的那种实现，就很简单，举个例子：

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

ReactDOM.render(
  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
, mountNode);

https://ant.design/components/table-cn/#components-table-demo-row-selection-and-operation

上面是antd实现的选中，非常容易我就实现了

再看一下我们的:
https://github.com/tinper-bee/bee-table/blob/master/demo/demolist/Demo12.js

简直是灾难！！！关键是，我点击了例子，发现console里并没有什么输出，我都不知道数据哪来？
来看我们看看antd的选择：

对于这边的用户来讲，用咱们的组件，就是图个快速开发，配合tinper-devtool工具去使用，但是最后被组件弄的精疲力尽，实际上这次出差不少问题是我们没有在网站说清楚，很多都是凭着经验去解决。

通过到开发现场去，才会知道开发的水平，不能按照我们的技术水平去要求他们，这是值得我们注意的，也就是说我们的东西越简单越能接地气，不然那么高深牛逼的东西，对于小白前端来说，不知所云啊~~~

几点建议，莫怪，为了我们好，良药苦口~😆