新增schema组件

src/components/NiceForm/components/CardCheckBox.tsx

+import React from 'react'
+import { Row, Col } from 'antd';
+import styled from 'styled-components'
+import { findItemAndDelete } from '@/utils'
+import cx from 'classnames'
+
+const RowStyleLayout = styled(props => <div {...props} />)`
+  .card-checkbox {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .card-checkbox-item {
+    width: 320px;
+    height: 48px;
+    margin-right: 32px;
+    margin-bottom: 16px;
+    border:1px solid rgba(235,236,240,1);
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .card-checkbox-item.active {
+    border-color: #00B382;
+    position: relative;
+  }
+  .card-checkbox-item.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right: 6px solid #00B382;
+    border-bottom: 6px solid #00B382;
+  }
+  .card-logo {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .card-logo.default {
+    background: #669EDE;
+    text-align: center;
+    line-height: 32px;
+    color: #fff;
+    font-size: 12px;
+  }
+  .card-checkbox-title {
+    font-size: 14px;
+    color: #42526E;
+  }
+`
+
+const CardCheckBox = (props) => {
+  const { dataSource = [] } = props.props['x-component-props']
+  const value: number[] = props.value || []
+
+  const handleChange = (id) => {
+    if (value.includes(id)) {
+      const newValue = findItemAndDelete(value, id)
+      props.mutators.change(newValue)
+    } else {
+      props.mutators.change([...value, id])
+    }
+  }
+
+  const isChecked = (id) => {
+    return value.includes(id)
+  }
+  return (
+    <RowStyleLayout>
+      <Row className='card-checkbox'>
+        {
+          dataSource.map((v, i) => {
+            return (
+              <Col key={v.id} className={cx('card-checkbox-item', isChecked(v.id) ? 'active' : '')} onClick={() => handleChange(v.id)}>
+                { v.logo ? <img className='card-logo' src={v.logo}/> : <div className='card-logo default'>logo</div> }
+                <span className='card-checkbox-title'>{v.title}</span>
+              </Col>
+            )
+          })
+        }
+      </Row>
+    </RowStyleLayout>
+  )
+}
+
+CardCheckBox.defaultProps = {}
+
+CardCheckBox.isFieldComponent = true;
+
+export default CardCheckBox
\ No newline at end of file

src/components/NiceForm/components/CustomSlider.tsx

+import React from 'react'
+import { Slider, Input, Space } from 'antd'
+
+const CustomSlider = (props) => {
+  const value = props.value || 0
+  const max = props.props['x-component-props']?.max || 0
+  return (
+    <div style={{width: '100%'}}>
+      <Slider
+        value={value}
+        onChange={e => props.mutators.change(e)}
+        {...props.props['x-component-props']}></Slider>
+      <Space>
+        <Input type='number' disabled max={max} value={props.value} onChange={e => props.mutators.change(e.target.value)} addonAfter='尺'/>
+        { max && <span>还剩：{max - value}尺</span> }
+      </Space>
+    </div>
+  )
+}
+
+CustomSlider.defaultProps = {}
+
+CustomSlider.isFieldComponent = true;
+
+export default CustomSlider
\ No newline at end of file

src/components/NiceForm/components/Text.tsx

+import React from 'react'
+
+const Text = (props) => {
+  return (
+    <span {...props.props['x-component-props']}>{props.value}</span>
+  )
+}
+
+Text.defaultProps = {}
+
+Text.isFieldComponent = true;
+
+export default Text
\ No newline at end of file

src/components/NiceForm/index.tsx

@@ -4,8 +4,11 @@ import { Button, Space } from 'antd';
 import CustomUpload from './components/CustomUpload';
 import CustomStatus from './components/CustomStatus';
 import CustomAddArray from './components/CustomAddArray';
+import CustomSlider from './components/CustomSlider';
 import Search from './components/Search';
 import Submit from './components/Submit';
+import Text from './components/Text';
+import CardCheckBox from './components/CardCheckBox';
 
 export interface NiceFormProps extends IAntdSchemaFormProps {
 }
@@ -16,14 +19,18 @@ const NiceForm:React.FC<NiceFormProps> = (props) => {
     CustomUpload,
     CustomStatus,
     CustomAddArray,
+    CustomSlider,
     Search,
-    Submit
+    Submit,
+    Text,
+    CardCheckBox
   }
 
   const defineComponents = Object.assign(customComponents, components)
 
   return (
     <SchemaForm
+      colon={false}
       components={defineComponents}
       {...reset}
     >