方案调研

参考 vue-ele-upload-video 和 image-upload 实现。

属性

• 支持原 upload 属性；
• accept 文件类型，默认是支持所有 video 格式；
• maxSize 文件大小，单位 MB；
• formatter 响应结果格式化函数
• dataApi：获取上传所需参数
• width：显示宽度
• height: 显示高度
• isShowTip：是否显示提示

交互

交互与 vue-ele-upload-video 表现一致即可。

检查项

• 代码实现
• 文档
• 测试用例

提供阿里云或者其他云获取 node 端获取 sts 临时上传凭证的封装，或者给出示例。

需求描述

同一个 API 无限加载次级选项。

组件属性

interface Props extends OptionProps {
  /**
   * 值类型
   * @default 'string'
   */
  valueType?: "string" | "array";
}

参考：https://baidu.gitee.io/amis/zh-CN/components/form/chain-select

新增 itemLayout 属性，实现表单项分列功能

说明

itemLayout 类型为数字，当为 1 时代表一列只有一个表单项，当为 2 时代表一列有 2 个表单项，以此类推，数字必须为 24 能除尽的数（24 栅格布局）。

使用方式

import React from 'react'
import { SuperEmail, SuperForm, SuperInput, SuperNumber } from 'super-antd';

const App = () =>{ 
  return <SuperForm
         itemLayout={3}
      >
        <SuperInput name="name" label="姓名"></SuperInput>
        <SuperNumber name="age" label="年龄"></SuperNumber>
        <SuperInput name="love" label="爱好"></SuperInput>
        <SuperEmail name="email" label="邮箱"></SuperEmail>
        <SuperInput name="address" label="地址"></SuperInput>
      </SuperForm>
}

表单项也可以自定义占用的自身的 itemLayout，例如：

<SuperInput name="name" label="姓名" itemLayout={2}></SuperInput>

特别注意

• 当 form 设置了 itemLayout，则响应式失效；
• 当 form 设置了 itemLayout，则 align 属性失效。

验收

• 代码实现
• 文档书写
• 单元测试

增加上传图片组件

需求说明

新增一个专用于上传图片的组件

要求

• 能通过属性控制，上传单张或者多张图片；
• 图片能预览；
• 能自定义预览；
• 支持自定义提示；
• 支持自定义上传按钮方式；
• 支持拖拽上传；
• 支持类型、文件大小、尺寸校检；
• 支持裁剪；
• 支持压缩；
• 能比较简单的处理阿里云、腾讯云、七牛云等云上传（token 获取等）
• 上传有回调
• 删除有回调

方案调研

// todo

市面上其他组件库的功能

结果验收

• 代码实现
• 组件文档
• 单元测试

增加富文本组件

需求说明

针对已有的富文本编辑器进行 React 封装，或者直接找已经封装好的 React 富文本组件进行优化和封装。

要求

• 富文本编辑器的基本能力；
• 能上传图片，最好是复制粘贴就能上传图片；
• 进行表单项组件包裹。

方案调研

挑选富文本编辑器标准

• 长期维护的；
• 能上传本地图片的；
• 有现成集成 react 的方案；
• 文件包大小（真实构建结果为准）；
• 扩展能力；
• 简洁好看；
• 中文优化程度。

对比

UEditor

• 官方不再更新；
• 界面丑。

结论：❌

simditor

• 官方不再更新；
• 图片上传能力弱。

结论：❌

CKEditor

• 文件大小：213kb
• 中文友好度一般；
• 其他能力都满足。

结论：✅

tinymce

• 要申请一个 key；
• 文件大小：走的远程加载
• 中文友好度一般；

结论：❌ ，申请 key 的操作让人望而生畏。

quill

• 文件大小：60kb
• 中文友好度一般；
• 其他能力都满足。

结论：✅

wangEditor

• 文件大小：75kb
• 其他都满足

结论：✅

结论

综上，在满足条件的三款编辑器中，CKEditor 体积过大，被淘汰，wangEditor 比 quill 要大一些，但是其文档和开发人员都是国人，对国内开发十分友好，结论就是选择 wangEditor。

结果验收

• 代码实现
• 组件文档
• 单元测试

需求说明

提供**城市的省市区级联选择器。

功能要求

• 本身具有数据
• 默认是三级区域，可以选择隐藏或者显示市、区、街道四级
• 对于选择结果，仅保留最后一级别
• 对于选择结果，保存为对象
• 对于选择结果，保存为数组

调研结果

数据来源

https://github.com/modood/Administrative-divisions-of-China

选择原因

• 1、支持 json、SQL；
• 2、持续更新维护

功能参考

• iview：https://pro.iviewui.com/store/item/1247106998852521984
• amis：https://baidu.github.io/amis/zh-CN/components/form/input-city
• zoning：https://ss.netnr.com/zoning

属性展示

interface CitySelectorProps {
  /**
   * 是否显示城市
   * @default true
   */
  allowCity?: boolean;
  /**
   * 是否显示区域
   * @default true 
   */
  allowArea?: boolean;
  /**
   * 值类型，默认是对象类型
   * @default 'object'
   */
  valueType?: 'code' | 'code_array' | 'name' | 'name_array' | 'code_object' | 'name_code_object' | 'name_code_arrray';
  /**
   * 是否开启搜索 
   * @default true
   * /
  searchable?: boolean;
}

如果是 object 值类型，需要文档中指出如何打平对象。

从远端获取的数据可能不满足需求，我们需要进行格式化，一种方式对 response 直接进行处理，另一种方式提供基于 form-item 的配置方式，不过最终调用的都是 response 的格式化代码。

调研

notion

notion 的图库是在点击图片之后弹出来的，它包含 上传、网络链接、网络图库

google docs 表单

Google Docs 是通过右侧图标按钮点击后弹窗的，但是其可选的内容就比较多了，包括了 上传、相机、网址、照片（以前上传）、google 搜索

即速应用

易企秀

参考 https://www.yuque.com/chaojie-vjiel/vbwzgu/cqtrgb

如果仅是无只读模式则不需要有 pro 那一步的包装，如果组件模式是 onChange 和 value 属性，则不需要 antd 的那一层包装。

现在导出的东西太多了，不需要外部知道的方法和属性也统统导出了，应该改为组件导致组件本身和 Props 即可，方法导出方法本身和 params 即可

要求：

• 能比较清晰的描述一个表单组件的创建过程；
• 分为两类：一类是在已有的 React 组件上封装表单组件，另一类是从 0 实现一个表单组件。

增加默认值 HOC

需求说明

在我们日常开发中，有些组件的属性在整个项目中都是相同的，例如上传组件的上传地址。为了减少复制粘贴的次数，一般都会在原组件的基础上进行一层简单的封装，默认值 HOC 就是专门为了解决这个问题的通用型 HOC 组件包裹。

使用说明

// 我们以 Upload 和 Button 为例，实际可以使任意组件
import { Upload, Button } from 'antd'
import { withDefaultProps  }  from 'super-antd'

const MyUpload = withDefaultProps(Upload, { action: 'https://foo.com', method: 'PUT' }) // 拥有了 `action` 和 `method` 默认值
const MyButton = withDefaultProps(Button, { type: 'primary' }) // 拥有了  `type` 默认值

const App = () => {
  // 此时应该显示 primary 主题色
  return <MyButton>hello world</MyButton>
}

API

const ComponentWithDefaultProps = withDefaultProps<T extends object = any>(
  Component: React.ComponentType<T>,
  props: T
);

params

结果验收

• 代码实现
• 文档书写
• 单元测试

您的组件库到底有哪些组件以及怎么使用？能不能像 https://www.jeasyui.com/demo/main/index.php 那样为每个组件做一个demo?谢谢。

方案：

• https://www.npmjs.com/package/json-node-normalizer
• https://www.npmjs.com/package/g-custom-form
• https://www.npmjs.com/package/json-schemify