@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/form/stories.tsx

@@ -1,448 +1,448 @@
-import React, { useRef } from 'react'
-import {
-  Form,
-  FormItem,
-  FormButton,
-  FormBlock,
-  FormGroup,
-  FormPanel,
-  FormPanelMore,
-} from './index'
-import {
-  Select,
-  Switch,
-  Validator,
-  RadioGroup,
-  Radio,
-  CheckboxGroup,
-  Checkbox,
-  Input,
-  InputNumber,
-  Flex,
-  Button,
-} from '../../index'
-import { observable } from 'mobx'
-import { observer } from 'mobx-react'
-
-const area = [
-  {
-    value: 0,
-    text: '南山',
-  },
-  {
-    value: 1,
-    text: '福田',
-  },
-]
-
-const store = observable({
-  name: '',
-  desc: '',
-  area: null,
-  sex: 0,
-  taste: [],
-  isWork: false,
-  height: null,
-  setData(key: string, value: any) {
-    // @ts-ignore
-    this[key] = value
-  },
-})
-
-const Tets = observer(() => {
-  return (
-    <FormBlock col={2}>
-      <FormItem label='邀请码' required>
-        <input
-          type='text'
-          value={store.name}
-          onChange={(e) => store.setData('name', e.target.value)}
-        />
-        <div className='gm-text-desc gm-margin-top-5'>
-          可以允许商户在规定时间内自主修改已提交订单内容
-        </div>
-      </FormItem>
-      <FormItem label='名字' required>
-        <input
-          type='text'
-          value={store.name}
-          onChange={(e) => store.setData('name', e.target.value)}
-        />
-      </FormItem>
-      <FormItem label='地区地区地区'>
-        <Select
-          data={area}
-          value={store.area}
-          onChange={(value) => store.setData('area', value)}
-        />
-      </FormItem>
-      <FormItem label='是否工作' required>
-        <Switch
-          checked={store.isWork}
-          onChange={(checked) => store.setData('isWork', checked)}
-        />
-      </FormItem>
-      <FormItem label='描述' required validate={Validator.create([], store.desc)}>
-        <textarea
-          value={store.desc}
-          onChange={(e) => store.setData('desc', e.target.value)}
-        />
-      </FormItem>
-    </FormBlock>
-  )
-})
-
-export const ComReadme = () => (
-  <div>
-    <pre>
-      ` 新UI表单约束较多 - 栏数。有 1栏(默认) 2栏 3栏。其中搜索区域 3栏，常规表单区域 1栏
-      和 2栏 - 栏宽。一个表单内是固定的，宽度默认 320， FormPanel特殊一栏默认是
-      400，具体情况可自定义 - Item 内自然撑开 -
-      Item宽度。一般占一栏，可能占两栏，可能占三栏 -
-      Item高度。一般占一行，其他看具体情况自然往下撑开 `
-    </pre>
-  </div>
-)
-
-export const ComFormWithDisabledCol = () => (
-  <div>
-    <pre>
-      ` Form 包住。一栏用法需要提供 disableCol。 FormItem 包住表单元素 - 可以简单包住
-      input 即可，FormItem 会自动去识别常用的表单元素，并添加 gm-form-control
-      类名，以便撑开 - children 可以是数组，FormItem 读到第一个表单元素，做上面的操作 `
-    </pre>
-    <Form disabledCol labelWidth='100px' onSubmit={() => console.log('onSubmit')}>
-      <FormItem label='名字' required>
-        <Input
-          type='text'
-          value={store.name}
-          onChange={(e) => store.setData('name', e.target.value)}
-        />
-      </FormItem>
-      <FormItem label='描述' required validate={Validator.create([], store.desc)}>
-        <textarea
-          value={store.desc}
-          onChange={(e) => store.setData('desc', e.target.value)}
-        />
-      </FormItem>
-      <FormItem label='地区'>
-        <Select
-          data={area}
-          value={store.area}
-          onChange={(value) => store.setData('area', value)}
-        />
-      </FormItem>
-      <FormItem label='是否工作'>
-        <Switch
-          checked={store.isWork}
-          onChange={(checked) => store.setData('isWork', checked)}
-        />
-      </FormItem>
-      <FormItem label='性别'>
-        <RadioGroup
-          name='sex'
-          value={store.sex}
-          onChange={(value) => store.setData('sex', value)}
-        >
-          <Radio value={0}>男</Radio>
-          <Radio value={1}>女</Radio>
-        </RadioGroup>
-      </FormItem>
-      <FormItem label='兴趣'>
-        <CheckboxGroup
-          name='taste'
-          value={store.taste}
-          onChange={(value) => store.setData('taste', value)}
-        >
-          <Checkbox value={0}>阅读</Checkbox>
-          <Checkbox value={1}>打篮球</Checkbox>
-          <Checkbox value={2}>美食</Checkbox>
-          <Checkbox value={3}>旅游</Checkbox>
-        </CheckboxGroup>
-      </FormItem>
-      <FormItem label='自定义' unLabelTop>
-        <div>
-          这里是自定义。没有上边距的情况下，label 要对齐，则提供 unLabelTop 去掉 label
-          的上边距
-        </div>
-      </FormItem>
-      <FormItem label='身高'>
-        <InputNumber
-          value={store.height}
-          onChange={(value) => store.setData('height', value)}
-        />
-        <div className='gm-text-desc gm-margin-top-5'>要填写升高，升高</div>
-        <div>（这里演示多个 children 的情况）</div>
-      </FormItem>
-      <FormButton>
-        <Button type='primary' htmlType='submit'>
-          提交
-        </Button>
-      </FormButton>
-    </Form>
-  </div>
-)
-
-export const ComFormBlock = () => (
-  <Form labelWidth='100px' onSubmit={() => console.log('onSubmit')}>
-    <FormBlock col={2}>
-      <FormItem label='名字' required>
-        <input
-          type='text'
-          value={store.name}
-          onChange={(e) => store.setData('name', e.target.value)}
-        />
-      </FormItem>
-      <FormItem label='地区'>
-        <Select
-          data={area}
-          value={store.area}
-          onChange={(value) => store.setData('area', value)}
-        />
-      </FormItem>
-      <FormItem label='是否工作'>
-        <Switch
-          checked={store.isWork}
-          onChange={(checked) => store.setData('isWork', checked)}
-        />
-      </FormItem>
-      <FormItem label='身高'>
-        <InputNumber
-          value={store.height}
-          onChange={(value) => store.setData('height', value)}
-        />
-        <div className='gm-text-desc gm-margin-top-5'>要填写升高，升高</div>
-        <div>（这里演示多个 children 的情况）</div>
-      </FormItem>
-      <FormItem label='性别'>
-        <RadioGroup
-          name='sex'
-          value={store.sex}
-          onChange={(value) => store.setData('sex', value)}
-        >
-          <Radio value={0}>男</Radio>
-          <Radio value={1}>女</Radio>
-        </RadioGroup>
-      </FormItem>
-      <FormItem label='兴趣'>
-        <CheckboxGroup
-          name='taste'
-          value={store.taste}
-          onChange={(value) => store.setData('taste', value)}
-        >
-          <Checkbox value={0}>阅读</Checkbox>
-          <Checkbox value={1}>打篮球</Checkbox>
-          <Checkbox value={2}>美食</Checkbox>
-          <Checkbox value={3}>旅游</Checkbox>
-        </CheckboxGroup>
-      </FormItem>
-    </FormBlock>
-    <FormItem col={2} label='描述' required validate={Validator.create([], store.desc)}>
-      <textarea
-        value={store.desc}
-        onChange={(e) => store.setData('desc', e.target.value)}
-      />
-    </FormItem>
-    <FormItem col={2} label='自定义' unLabelTop>
-      <div>
-        这里是自定义。没有上边距的情况下，label 要对齐，则提供 unLabelTop 去掉 label
-        的上边距
-      </div>
-    </FormItem>
-
-    <FormButton>
-      <Button type='primary' htmlType='submit'>
-        提交
-      </Button>
-    </FormButton>
-  </Form>
-)
-
-export const ComFormGroup = () => {
-  const form1 = useRef(null)
-  const form2 = useRef(null)
-  return (
-    <FormGroup
-      formRefs={[form1, form2]}
-      onCancel={() => console.log('Cancel')}
-      onSubmit={() => {
-        console.log('onSubmit')
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            resolve()
-          }, 3000)
-        })
-      }}
-    >
-      <div>第一个表单</div>
-      <Form ref={form1} labelWidth='100px' hasButtonInGroup>
-        <FormItem label='名字' required>
-          <input
-            type='text'
-            value={store.name}
-            onChange={(e) => store.setData('name', e.target.value)}
-          />
-        </FormItem>
-      </Form>
-      <div>第二个表单</div>
-      <Form ref={form2} labelWidth='100px' hasButtonInGroup>
-        <FormItem label='描述' required validate={Validator.create([], store.desc)}>
-          <textarea
-            value={store.desc}
-            onChange={(e) => store.setData('desc', e.target.value)}
-          />
-        </FormItem>
-        <FormItem label='名字' required>
-          <input
-            type='text'
-            value={store.name}
-            onChange={(e) => store.setData('name', e.target.value)}
-          />
-        </FormItem>
-      </Form>
-    </FormGroup>
-  )
-}
-export const ComFormPanel = () => {
-  const form3 = useRef(null)
-  const form4 = useRef(null)
-  return (
-    <FormGroup
-      formRefs={[form3, form4]}
-      onCancel={() => console.log('Cancel')}
-      // onSubmit={() => console.log('onSubmit')}
-      onSubmitValidated={() => console.log('onSubmitValidated')}
-    >
-      <FormPanel
-        title='店铺设置'
-        left={<Button type='primary'>搜索</Button>}
-        right={<Button onClick={() => console.log('删除')}>删除</Button>}
-      >
-        <Form colWidth='400px' ref={form3} labelWidth='160px' hasButtonInGroup>
-          <FormItem label='名字' colWidth='700px' required>
-            <input
-              type='text'
-              className='gm-form-control'
-              value={store.name}
-              onChange={(e) => store.setData('name', e.target.value)}
-            />
-          </FormItem>
-          <FormItem label='邀请码' required>
-            <input
-              type='text'
-              value={store.name}
-              onChange={(e) => store.setData('name', e.target.value)}
-            />
-            <div className='gm-text-desc gm-margin-top-5'>
-              可以允许商户在规定时间内自主修改已提交订单内容
-            </div>
-          </FormItem>
-
-          <FormBlock col={2}>
-            <FormItem
-              label='名字'
-              required
-              tooltip={
-                <div className='gm-padding-10 gm-bg' style={{ width: '455px' }}>
-                  <p style={{ marginBottom: '4px', fontSize: '12px' }}>
-                    23333333333333333
-                  </p>
-                  <p style={{ marginBottom: 0, fontSize: '12px' }}>4555555555555555</p>
-                </div>
-              }
-            >
-              <Flex alignCenter>
-                <input
-                  type='text'
-                  className='gm-form-control'
-                  value={store.name}
-                  onChange={(e) => store.setData('name', e.target.value)}
-                />
-              </Flex>
-            </FormItem>
-            <FormItem label='地区'>
-              <Select
-                data={area}
-                value={store.area}
-                onChange={(value) => store.setData('area', value)}
-              />
-            </FormItem>
-            <FormItem label='描述' required validate={Validator.create([], store.desc)}>
-              <textarea
-                value={store.desc}
-                onChange={(e) => store.setData('desc', e.target.value)}
-              />
-            </FormItem>
-            <FormItem label='兴趣'>
-              <CheckboxGroup
-                style={{ width: '400px' }}
-                name='taste'
-                value={store.taste}
-                onChange={(value) => store.setData('taste', value)}
-              >
-                <Checkbox value={0}>阅读</Checkbox>
-                <Checkbox value={1}>打篮球</Checkbox>
-                <Checkbox value={2}>美食</Checkbox>
-                <Checkbox value={0}>阅读</Checkbox>
-                <Checkbox value={1}>打篮球</Checkbox>
-                <Checkbox value={2}>美食</Checkbox>
-              </CheckboxGroup>
-            </FormItem>
-          </FormBlock>
-          <FormPanelMore>
-            <FormBlock col={2}>
-              <FormItem label='邀请码' required>
-                <input
-                  type='text'
-                  value={store.name}
-                  onChange={(e) => store.setData('name', e.target.value)}
-                />
-                <div className='gm-text-desc gm-margin-top-5'>
-                  可以允许商户在规定时间内自主修改已提交订单内容
-                </div>
-              </FormItem>
-              <FormItem label='名字' required>
-                <input
-                  type='text'
-                  value={store.name}
-                  onChange={(e) => store.setData('name', e.target.value)}
-                />
-              </FormItem>
-              <FormItem label={<span>地区地区地区</span>}>
-                <Select
-                  data={area}
-                  value={store.area}
-                  onChange={(value) => store.setData('area', value)}
-                />
-              </FormItem>
-              <FormItem label='是否工作' required>
-                <Switch
-                  checked={store.isWork}
-                  onChange={(checked) => store.setData('isWork', checked)}
-                />
-              </FormItem>
-            </FormBlock>
-          </FormPanelMore>
-        </Form>
-      </FormPanel>
-
-      <FormPanel
-        title='店铺设置'
-        left={
-          <span className='gm-margin-left-10' onClick={() => console.log('搜索')}>
-            搜索
-          </span>
-        }
-        right={<span onClick={() => console.log('删除')}>删除</span>}
-      >
-        <Form colWidth='400px' ref={form4} labelWidth='160px' hasButtonInGroup>
-          <Tets />
-        </Form>
-      </FormPanel>
-    </FormGroup>
-  )
-}
-
-export default {
-  title: '表单/Form',
-}
+import React, { useRef } from 'react'
+import {
+  Form,
+  FormItem,
+  FormButton,
+  FormBlock,
+  FormGroup,
+  FormPanel,
+  FormPanelMore,
+} from './index'
+import {
+  Select,
+  Switch,
+  Validator,
+  RadioGroup,
+  Radio,
+  CheckboxGroup,
+  Checkbox,
+  Input,
+  InputNumber,
+  Flex,
+  Button,
+} from '../../index'
+import { observable } from 'mobx'
+import { observer } from 'mobx-react'
+
+const area = [
+  {
+    value: 0,
+    text: '南山',
+  },
+  {
+    value: 1,
+    text: '福田',
+  },
+]
+
+const store = observable({
+  name: '',
+  desc: '',
+  area: null,
+  sex: 0,
+  taste: [],
+  isWork: false,
+  height: null,
+  setData(key: string, value: any) {
+    // @ts-ignore
+    this[key] = value
+  },
+})
+
+const Tets = observer(() => {
+  return (
+    <FormBlock col={2}>
+      <FormItem label='邀请码' required>
+        <input
+          type='text'
+          value={store.name}
+          onChange={(e) => store.setData('name', e.target.value)}
+        />
+        <div className='gm-text-desc gm-margin-top-5'>
+          可以允许商户在规定时间内自主修改已提交订单内容
+        </div>
+      </FormItem>
+      <FormItem label='名字' required>
+        <input
+          type='text'
+          value={store.name}
+          onChange={(e) => store.setData('name', e.target.value)}
+        />
+      </FormItem>
+      <FormItem label='地区地区地区'>
+        <Select
+          data={area}
+          value={store.area}
+          onChange={(value) => store.setData('area', value)}
+        />
+      </FormItem>
+      <FormItem label='是否工作' required>
+        <Switch
+          checked={store.isWork}
+          onChange={(checked) => store.setData('isWork', checked)}
+        />
+      </FormItem>
+      <FormItem label='描述' required validate={Validator.create([], store.desc)}>
+        <textarea
+          value={store.desc}
+          onChange={(e) => store.setData('desc', e.target.value)}
+        />
+      </FormItem>
+    </FormBlock>
+  )
+})
+
+export const ComReadme = () => (
+  <div>
+    <pre>
+      ` 新UI表单约束较多 - 栏数。有 1栏(默认) 2栏 3栏。其中搜索区域 3栏，常规表单区域 1栏
+      和 2栏 - 栏宽。一个表单内是固定的，宽度默认 320， FormPanel特殊一栏默认是
+      400，具体情况可自定义 - Item 内自然撑开 -
+      Item宽度。一般占一栏，可能占两栏，可能占三栏 -
+      Item高度。一般占一行，其他看具体情况自然往下撑开 `
+    </pre>
+  </div>
+)
+
+export const ComFormWithDisabledCol = () => (
+  <div>
+    <pre>
+      ` Form 包住。一栏用法需要提供 disableCol。 FormItem 包住表单元素 - 可以简单包住
+      input 即可，FormItem 会自动去识别常用的表单元素，并添加 gm-form-control
+      类名，以便撑开 - children 可以是数组，FormItem 读到第一个表单元素，做上面的操作 `
+    </pre>
+    <Form disabledCol labelWidth='100px' onSubmit={() => console.log('onSubmit')}>
+      <FormItem label='名字' required>
+        <Input
+          type='text'
+          value={store.name}
+          onChange={(e) => store.setData('name', e.target.value)}
+        />
+      </FormItem>
+      <FormItem label='描述' required validate={Validator.create([], store.desc)}>
+        <textarea
+          value={store.desc}
+          onChange={(e) => store.setData('desc', e.target.value)}
+        />
+      </FormItem>
+      <FormItem label='地区'>
+        <Select
+          data={area}
+          value={store.area}
+          onChange={(value) => store.setData('area', value)}
+        />
+      </FormItem>
+      <FormItem label='是否工作'>
+        <Switch
+          checked={store.isWork}
+          onChange={(checked) => store.setData('isWork', checked)}
+        />
+      </FormItem>
+      <FormItem label='性别'>
+        <RadioGroup
+          name='sex'
+          value={store.sex}
+          onChange={(value) => store.setData('sex', value)}
+        >
+          <Radio value={0}>男</Radio>
+          <Radio value={1}>女</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label='兴趣'>
+        <CheckboxGroup
+          name='taste'
+          value={store.taste}
+          onChange={(value) => store.setData('taste', value)}
+        >
+          <Checkbox value={0}>阅读</Checkbox>
+          <Checkbox value={1}>打篮球</Checkbox>
+          <Checkbox value={2}>美食</Checkbox>
+          <Checkbox value={3}>旅游</Checkbox>
+        </CheckboxGroup>
+      </FormItem>
+      <FormItem label='自定义' unLabelTop>
+        <div>
+          这里是自定义。没有上边距的情况下，label 要对齐，则提供 unLabelTop 去掉 label
+          的上边距
+        </div>
+      </FormItem>
+      <FormItem label='身高'>
+        <InputNumber
+          value={store.height}
+          onChange={(value) => store.setData('height', value)}
+        />
+        <div className='gm-text-desc gm-margin-top-5'>要填写升高，升高</div>
+        <div>（这里演示多个 children 的情况）</div>
+      </FormItem>
+      <FormButton>
+        <Button type='primary' htmlType='submit'>
+          提交
+        </Button>
+      </FormButton>
+    </Form>
+  </div>
+)
+
+export const ComFormBlock = () => (
+  <Form labelWidth='100px' onSubmit={() => console.log('onSubmit')}>
+    <FormBlock col={2}>
+      <FormItem label='名字' required>
+        <input
+          type='text'
+          value={store.name}
+          onChange={(e) => store.setData('name', e.target.value)}
+        />
+      </FormItem>
+      <FormItem label='地区'>
+        <Select
+          data={area}
+          value={store.area}
+          onChange={(value) => store.setData('area', value)}
+        />
+      </FormItem>
+      <FormItem label='是否工作'>
+        <Switch
+          checked={store.isWork}
+          onChange={(checked) => store.setData('isWork', checked)}
+        />
+      </FormItem>
+      <FormItem label='身高'>
+        <InputNumber
+          value={store.height}
+          onChange={(value) => store.setData('height', value)}
+        />
+        <div className='gm-text-desc gm-margin-top-5'>要填写升高，升高</div>
+        <div>（这里演示多个 children 的情况）</div>
+      </FormItem>
+      <FormItem label='性别'>
+        <RadioGroup
+          name='sex'
+          value={store.sex}
+          onChange={(value) => store.setData('sex', value)}
+        >
+          <Radio value={0}>男</Radio>
+          <Radio value={1}>女</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label='兴趣'>
+        <CheckboxGroup
+          name='taste'
+          value={store.taste}
+          onChange={(value) => store.setData('taste', value)}
+        >
+          <Checkbox value={0}>阅读</Checkbox>
+          <Checkbox value={1}>打篮球</Checkbox>
+          <Checkbox value={2}>美食</Checkbox>
+          <Checkbox value={3}>旅游</Checkbox>
+        </CheckboxGroup>
+      </FormItem>
+    </FormBlock>
+    <FormItem col={2} label='描述' required validate={Validator.create([], store.desc)}>
+      <textarea
+        value={store.desc}
+        onChange={(e) => store.setData('desc', e.target.value)}
+      />
+    </FormItem>
+    <FormItem col={2} label='自定义' unLabelTop>
+      <div>
+        这里是自定义。没有上边距的情况下，label 要对齐，则提供 unLabelTop 去掉 label
+        的上边距
+      </div>
+    </FormItem>
+
+    <FormButton>
+      <Button type='primary' htmlType='submit'>
+        提交
+      </Button>
+    </FormButton>
+  </Form>
+)
+
+export const ComFormGroup = () => {
+  const form1 = useRef(null)
+  const form2 = useRef(null)
+  return (
+    <FormGroup
+      formRefs={[form1, form2]}
+      onCancel={() => console.log('Cancel')}
+      onSubmit={() => {
+        console.log('onSubmit')
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve()
+          }, 3000)
+        })
+      }}
+    >
+      <div>第一个表单</div>
+      <Form ref={form1} labelWidth='100px' hasButtonInGroup>
+        <FormItem label='名字' required>
+          <input
+            type='text'
+            value={store.name}
+            onChange={(e) => store.setData('name', e.target.value)}
+          />
+        </FormItem>
+      </Form>
+      <div>第二个表单</div>
+      <Form ref={form2} labelWidth='100px' hasButtonInGroup>
+        <FormItem label='描述' required validate={Validator.create([], store.desc)}>
+          <textarea
+            value={store.desc}
+            onChange={(e) => store.setData('desc', e.target.value)}
+          />
+        </FormItem>
+        <FormItem label='名字' required>
+          <input
+            type='text'
+            value={store.name}
+            onChange={(e) => store.setData('name', e.target.value)}
+          />
+        </FormItem>
+      </Form>
+    </FormGroup>
+  )
+}
+export const ComFormPanel = () => {
+  const form3 = useRef(null)
+  const form4 = useRef(null)
+  return (
+    <FormGroup
+      formRefs={[form3, form4]}
+      onCancel={() => console.log('Cancel')}
+      // onSubmit={() => console.log('onSubmit')}
+      onSubmitValidated={() => console.log('onSubmitValidated')}
+    >
+      <FormPanel
+        title='店铺设置'
+        left={<Button type='primary'>搜索</Button>}
+        right={<Button onClick={() => console.log('删除')}>删除</Button>}
+      >
+        <Form colWidth='400px' ref={form3} labelWidth='160px' hasButtonInGroup>
+          <FormItem label='名字' colWidth='700px' required>
+            <input
+              type='text'
+              className='gm-form-control'
+              value={store.name}
+              onChange={(e) => store.setData('name', e.target.value)}
+            />
+          </FormItem>
+          <FormItem label='邀请码' required>
+            <input
+              type='text'
+              value={store.name}
+              onChange={(e) => store.setData('name', e.target.value)}
+            />
+            <div className='gm-text-desc gm-margin-top-5'>
+              可以允许商户在规定时间内自主修改已提交订单内容
+            </div>
+          </FormItem>
+
+          <FormBlock col={2}>
+            <FormItem
+              label='名字'
+              required
+              tooltip={
+                <div className='gm-padding-10 gm-bg' style={{ width: '455px' }}>
+                  <p style={{ marginBottom: '4px', fontSize: '12px' }}>
+                    23333333333333333
+                  </p>
+                  <p style={{ marginBottom: 0, fontSize: '12px' }}>4555555555555555</p>
+                </div>
+              }
+            >
+              <Flex alignCenter>
+                <input
+                  type='text'
+                  className='gm-form-control'
+                  value={store.name}
+                  onChange={(e) => store.setData('name', e.target.value)}
+                />
+              </Flex>
+            </FormItem>
+            <FormItem label='地区'>
+              <Select
+                data={area}
+                value={store.area}
+                onChange={(value) => store.setData('area', value)}
+              />
+            </FormItem>
+            <FormItem label='描述' required validate={Validator.create([], store.desc)}>
+              <textarea
+                value={store.desc}
+                onChange={(e) => store.setData('desc', e.target.value)}
+              />
+            </FormItem>
+            <FormItem label='兴趣'>
+              <CheckboxGroup
+                style={{ width: '400px' }}
+                name='taste'
+                value={store.taste}
+                onChange={(value) => store.setData('taste', value)}
+              >
+                <Checkbox value={0}>阅读</Checkbox>
+                <Checkbox value={1}>打篮球</Checkbox>
+                <Checkbox value={2}>美食</Checkbox>
+                <Checkbox value={0}>阅读</Checkbox>
+                <Checkbox value={1}>打篮球</Checkbox>
+                <Checkbox value={2}>美食</Checkbox>
+              </CheckboxGroup>
+            </FormItem>
+          </FormBlock>
+          <FormPanelMore>
+            <FormBlock col={2}>
+              <FormItem label='邀请码' required>
+                <input
+                  type='text'
+                  value={store.name}
+                  onChange={(e) => store.setData('name', e.target.value)}
+                />
+                <div className='gm-text-desc gm-margin-top-5'>
+                  可以允许商户在规定时间内自主修改已提交订单内容
+                </div>
+              </FormItem>
+              <FormItem label='名字' required>
+                <input
+                  type='text'
+                  value={store.name}
+                  onChange={(e) => store.setData('name', e.target.value)}
+                />
+              </FormItem>
+              <FormItem label={<span>地区地区地区</span>}>
+                <Select
+                  data={area}
+                  value={store.area}
+                  onChange={(value) => store.setData('area', value)}
+                />
+              </FormItem>
+              <FormItem label='是否工作' required>
+                <Switch
+                  checked={store.isWork}
+                  onChange={(checked) => store.setData('isWork', checked)}
+                />
+              </FormItem>
+            </FormBlock>
+          </FormPanelMore>
+        </Form>
+      </FormPanel>
+
+      <FormPanel
+        title='店铺设置'
+        left={
+          <span className='gm-margin-left-10' onClick={() => console.log('搜索')}>
+            搜索
+          </span>
+        }
+        right={<span onClick={() => console.log('删除')}>删除</span>}
+      >
+        <Form colWidth='400px' ref={form4} labelWidth='160px' hasButtonInGroup>
+          <Tets />
+        </Form>
+      </FormPanel>
+    </FormGroup>
+  )
+}
+
+export default {
+  title: '表单/Form',
+}