@cloudbase/weda-ui 0.2.9 → 0.2.13

package/src/web/wedatheme/src/routes/wedatheme-index/WedathemeIndex.jsx

@@ -0,0 +1,1276 @@
+import React, { useState } from 'react';
+import {
+  Card,
+  Form,
+  Layout,
+  Bubble,
+  Button,
+  RegionSelect,
+  RegionPanel,
+  RegionOption,
+  Cascader,
+  DatePicker,
+  List,
+  Input,
+  Dropdown,
+  SelectMultiple,
+  Segment,
+  Tooltip,
+  Tag,
+  Modal,
+  Tabs,
+  TabPanel,
+  Text,
+  Upload,
+  Icon,
+  Justify,
+  Alert,
+  SearchBox,
+  StatusTip,
+  notification,
+  useConfig,
+  Collapse,
+  Drawer,
+  ImagePreview,
+  TextArea,
+} from '@tencent/tea-component';
+import FormItem from './FormItem';
+import StepForm from './Form';
+import {
+  WedaInput,
+  WedaRadio,
+  WedaCheckbox,
+  WedaSelect,
+  WedaSwitch,
+  WedaTextArea,
+  WedaRegionSelect,
+} from './Component';
+
+const { Content } = Layout;
+const { RangePicker } = DatePicker;
+
+const options = [
+  { text: '今天', value: '1' },
+  { text: '昨天', value: '2' },
+  { text: '近7天', value: '3' },
+  { text: '近30天', value: '4' },
+];
+
+const iconList = [
+  'daily',
+  'shopcart',
+  'more',
+  'folderclose',
+  'folderopen',
+  'notice',
+  // 'notice-blue',
+  'guide',
+  'consult',
+  'realname',
+  'realnamev',
+  'show',
+  'hide',
+  // 'records',
+  // 'error',
+  // 'error size-l',
+  // 'sales',
+  'success',
+  'success size-l',
+  'warning',
+  'warning size-l',
+  // 'shutdown',
+  // 'running',
+  'error',
+  'error size-l',
+  'error--ring',
+  'loading',
+  // 'deploy',
+  'sort',
+  'sortup',
+  'sortdown',
+  // 'links',
+  'btnback',
+  // 'client',
+  'plus',
+  'minus',
+  'setting',
+  'pencil',
+  'copy',
+  'remind',
+  'dismiss',
+  'dismiss size-s',
+  'phone',
+  'phonev',
+  'phone-error',
+  'phone-warning',
+  'wechat',
+  'wechatv',
+  'wechat-error',
+  'wechat-warning',
+  'email',
+  'emailv',
+  'email-error',
+  'email-warning',
+  'qq',
+  // 'favorable',
+  'viewgrid',
+  'viewlist',
+  // 'alarm',
+  // 'monitor',
+  'download',
+  'filter',
+  // 'try',
+  'convertip--blue',
+  'convertip',
+  // 'new',
+  'info',
+  'tag',
+  'close',
+  'close size-s',
+  'arrowup',
+  'folderopen',
+  'arrowup--line',
+  'arrowdown',
+  'arrowdown--line',
+  'arrowleft',
+  'arrowleft--line',
+  'arrowright',
+  'arrowright--line',
+  'externallink',
+  'refresh',
+  'refresh-blue',
+  'fullscreen',
+  'fullscreenquit',
+  'delete',
+  'trenddown',
+  'trendup',
+  'drop',
+  'news',
+  'help',
+  'pending',
+  'pending size-l',
+  'pending-gray',
+  'infoblue',
+  'infoblue size-l',
+  'lastpage',
+  'firstpage',
+  'search',
+  'transfer',
+  'cur',
+  'cur-active',
+  'fold',
+  'fold-white',
+  'check',
+  'check size-s',
+  'not',
+  'and',
+  'zoomout',
+  'zoomout--white',
+  'zoomin',
+  'zoomin--white',
+  // 'spin--white',
+  'detail',
+  // 'qrcode',
+  // 'qrcode-blue',
+  'database',
+  'datasheet',
+  'table',
+  'table-hover',
+  'relationship',
+  'relationship-hover',
+  'multi-line',
+  'bell-warning',
+  'chart-pie',
+  'chart-pie-hover',
+  'chart-line',
+  'chart-line-hover',
+  'chart-column',
+  'chart-column-hover',
+  'percent',
+  'percent-blue',
+  // 'flag',
+  // 'flag-Globe',
+  // 'flag-Globe--gray',
+];
+
+const rangeMap = {
+  1: [moment(), moment()],
+  2: [moment().subtract(1, 'd'), moment().subtract(1, 'd')],
+  3: [moment().subtract(6, 'd'), moment()],
+  4: [moment().subtract(29, 'd'), moment()],
+};
+
+export function WedathemeIndex() {
+  const { classPrefix } = useConfig();
+  const [region, setRegion] = useState('gz');
+  const [SelectAp, setSelectAp] = useState('default');
+  const [segmentValue1, setSegmentValue1] = useState(null);
+  const [segmentValue2, setSegmentValue2] = useState(null);
+
+  const [value1, setValue1] = useState(null);
+  const [value2, setValue2] = useState(null);
+  const [visible, setVisible] = useState(false);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+
+  function setRangeValue(value, setter) {
+    const range = rangeMap[value];
+    setter(range);
+    return range;
+  }
+
+  function getSegmentValue(dates) {
+    const [start, end] = dates;
+    return Object.entries(rangeMap).reduce((prev, cur) => {
+      const [key, range] = cur;
+      if (start.isSame(range[0], 'day') && end.isSame(range[1], 'day')) {
+        return key;
+      }
+      return prev;
+    }, null);
+  }
+  const data = [
+    {
+      label: '北京市',
+      value: 'bj',
+      children: [
+        { label: '朝阳区', value: 'cy' },
+        { label: '海淀区', value: 'hd' },
+      ],
+    },
+    {
+      label: '上海市',
+      value: 'sh',
+      children: [
+        { label: '徐汇区', value: 'xh' },
+        { label: '黄埔区', value: 'hp' },
+      ],
+    },
+    {
+      label: '广东省',
+      value: 'gd',
+      children: [
+        {
+          label: '深圳市',
+          value: 'sz',
+          children: [
+            { label: '南山区', value: 'ns' },
+            { label: '宝安区', value: 'ba' },
+            { label: '福田区', value: 'ft', disabled: true },
+          ],
+        },
+      ],
+    },
+  ];
+  const menu = close => (
+    <List type="option">
+      <List.Item onClick={() => setSelectAp('default')}>默认</List.Item>
+      <List.Item onClick={() => setSelectAp('button')}>按钮</List.Item>
+      <List.Item onClick={() => setSelectAp('link')}>链接</List.Item>
+      <List.Item onClick={() => setSelectAp('filter')}>筛选</List.Item>
+      <List.Item onClick={() => setSelectAp('pre')}>无</List.Item>
+      <List.SubMenu label="更多">
+        <List type="option">
+          <List.Item disabled>订阅</List.Item>
+          <List.Item onClick={close}>朋友代付</List.Item>
+        </List>
+      </List.SubMenu>
+    </List>
+  );
+  const tabs = [
+    { id: 'basic', label: '基本信息' },
+    { id: 'network', label: '弹性网卡' },
+    { id: 'monitor', label: '监控信息' },
+    { id: 'sg', label: '安全组', disabled: true },
+    { id: 'oplog', label: '操作日志' },
+  ];
+  const [fileList, setFileList] = useState([]);
+  const [uploading, setUploading] = useState(null);
+  const [image, setImage] = useState(null);
+
+  function handleStart(file) {
+    getBase64(file);
+
+    setUploading(true);
+  }
+  const fnGetUrl = (file) => {
+    const reader = new FileReader();
+    let a;
+    reader.onloadend = () => {
+      console.log('reader.result;', reader.result);
+      a = reader.result;
+    };
+    console.log('aaaa', a);
+    reader.readAsDataURL(file);
+    return a;
+  };
+
+  function handleSuccess(result, { file }) {
+    setFileList(fileList => [
+      ...fileList,
+      {
+        name: file.name,
+        status: 'success',
+        url: 'https://via.placeholder.com/120',
+      },
+    ]);
+    setUploading(false);
+    console.log('result', result);
+    console.log('FileList', FileList);
+  }
+
+  function handleError(error, { file }) {
+    setFileList(fileList => [
+      ...fileList,
+      {
+        name: file.name,
+        status: 'danger',
+        url: 'https://via.placeholder.com/50',
+      },
+    ]);
+    setUploading(false);
+    console.error('error', error);
+  }
+  function getBase64(file) {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setImage(reader.result);
+    };
+    reader.readAsDataURL(file);
+  }
+  const alertSuccess = () => Modal.success({
+    message: '路由表更新成功！',
+    description: '配置将在 1-3 分钟内同步到集群中的路由节点',
+  });
+
+  const { Head, Column, Group } = RegionPanel;
+  return (
+    <Content>
+      <Content.Header showBackButton  title="Weda皮肤测试"></Content.Header>
+      <Content.Body>
+        <div className={`${classPrefix}-mb-3n`} >
+        <SearchBox />
+        </div>
+        <Card style={{ backgroundColor: '#eee' }}>
+          <Card.Body>
+          {iconList.map((item, key) => (
+          <Bubble key={key}  content="">
+            <i style={{  margin: '4px' }}  className={`${classPrefix}-icon ${classPrefix}-icon-${item}`}></i>
+            </Bubble>))}
+
+          </Card.Body>
+        </Card>
+        <Card className={`${classPrefix}-mb-5n`}>
+          <Card.Body>
+            <Tabs tabs={tabs}>
+              <TabPanel id="basic">基本信息</TabPanel>
+              <TabPanel id="network">性网卡</TabPanel>
+              <TabPanel id="monitor">基本信息</TabPanel>
+              <TabPanel id="sg">安全组</TabPanel>
+              <TabPanel id="oplog">操作日志</TabPanel>
+            </Tabs>
+          </Card.Body>
+        </Card>
+
+        <Alert defaultVisible>基本信息</Alert>
+        <Alert defaultVisible type="error">基本信息</Alert>
+        <Alert type="warning">
+        <h4 style={{ marginBottom: 8 }}>重要声明</h4>
+        <p>本功能将在 2019 年 2 月 29 日下线，请注意做好下列迁移工作：</p>
+        <List type="bullet">
+          <List.Item>小程序云服务器有奖内测中，即刻成为产品体验官</List.Item>
+          <List.Item>
+            云服务器限时秒杀，首购1C1G仅需99元/年，还有多款配置供您选择
+          </List.Item>
+          <List.Item>
+            让企业普惠上云，云服务器最低至2.5折，还有更多产品更低折扣满足您的需求
+          </List.Item>
+        </List>
+        <Collapse iconPosition="right" style={{ marginTop: 8 }}>
+          <Collapse.Panel
+            id="1"
+            title={active => (active ? '收起' : '展开')}
+            position="top"
+          >
+            <List type="bullet" style={{ marginTop: 8 }}>
+              <List.Item>更多提示语</List.Item>
+              <List.Item>More</List.Item>
+            </List>
+          </Collapse.Panel>
+        </Collapse>
+      </Alert>
+        <Card>
+          <Card.Body>
+            <Form>
+            {/* <FormItem>
+                    <WedaCheckbox />
+                  </FormItem> */}
+              <Form.Item status="success" label="地域">
+                <RegionSelect
+                  className="fn-weda-region"
+                  value={region}
+                  onChange={value => setRegion(value)}
+                  moreInfo="其它地域 20"
+                  shortcut={{
+                    title: '最近访问',
+                    options: ['gz', 'sh', 'bj'],
+                  }}
+                >
+                  <RegionPanel>
+                    <Head>全部地域</Head>
+                    <Column>
+                      <Group name="中国">
+                        <RegionOption value="gz" num={20}>
+                          广州
+                        </RegionOption>
+                        <RegionOption value="sh" num={20} dot>
+                          上海
+                        </RegionOption>
+                        <RegionOption value="hk">香港</RegionOption>
+                      </Group>
+                      <Group name="游戏专区">
+                        <RegionOption value="bj">北京</RegionOption>
+                      </Group>
+                    </Column>
+                    <Column>
+                      <Group name="亚洲">
+                        <RegionOption value="ia" num={20}>
+                          印度
+                        </RegionOption>
+                        <RegionOption value="ko">韩国</RegionOption>
+                        <RegionOption value="ta">泰国</RegionOption>
+                        <RegionOption value="sg">新加坡</RegionOption>
+                        <RegionOption value="jp">日本</RegionOption>
+                      </Group>
+                    </Column>
+                    <Column>
+                      <Group name="北美洲">
+                        <RegionOption value="gg">硅谷</RegionOption>
+                        <RegionOption value="dld">多伦多</RegionOption>
+                      </Group>
+                    </Column>
+                    <Column>
+                      <Group name="欧洲">
+                        <RegionOption value="fl">法兰克福</RegionOption>
+                        <RegionOption value="mo">莫斯科</RegionOption>
+                      </Group>
+                    </Column>
+                  </RegionPanel>
+                </RegionSelect>
+              </Form.Item>
+              <Form.Item status="error" label="输入">
+                <Input size='l' placeholder="请输入"/>
+              </Form.Item>
+              <Form.Item  label="输入">
+                <TextArea
+                  showCount
+                  size='l'
+                  placeholder="输入文本内容"
+                />
+              </Form.Item>
+
+              <Form.Item label="输入">
+                <Segment
+                  // rimless
+                  value={segmentValue2}
+                  options={options}
+                  onChange={(value) => {
+                    setSegmentValue2(value);
+                    const range = setRangeValue(value, setValue2);
+                    console.log(
+                      range[0].format('YYYY/MM/DD'),
+                      range[1].format('YYYY/MM/DD')
+                    );
+                  }}
+                />
+              </Form.Item>
+              <Form.Item label="日期选择器">
+                <RangePicker
+                clearable
+                  // showTime={{ minuteStep: 5, secondStep: 30 }}
+                  // header={
+                  //   <Segment
+                  //     rimless
+                  //     value={segmentValue2}
+                  //     options={options}
+                  //     onChange={(value) => {
+                  //       setSegmentValue2(value);
+                  //       const range = setRangeValue(value, setValue2);
+                  //       console.log(
+                  //         range[0].format('YYYY/MM/DD'),
+                  //         range[1].format('YYYY/MM/DD')
+                  //       );
+                  //     }}
+                  //   />
+                  // }
+                  value={value2}
+                  onChange={(value) => {
+                    setValue2(value);
+                    setSegmentValue2(getSegmentValue(value));
+                    console.log(
+                      value[0].format('YYYY/MM/DD'),
+                      value[1].format('YYYY/MM/DD')
+                    );
+                  }}
+                />
+              </Form.Item>
+              <Form.Item label="按钮" align='middle'>
+                <Button type="link"  className={`${classPrefix}-mr-2n`}>按钮</Button>
+                <Button type="text"  className={`${classPrefix}-mr-2n`}>按钮</Button>
+                <Button type="primary" loading disabled className={`${classPrefix}-mr-2n`}>按钮</Button>
+                <Button type="primary" onClick={alertSuccess} className={`${classPrefix}-mr-2n`}>提示成功</Button>
+                <Button type="weak" className={`${classPrefix}-mr-2n`}>按钮</Button>
+                <Button type="weak" loading className={`${classPrefix}-mr-2n`}>按钮</Button>
+                <Button type="weak" className={`${classPrefix}-mr-2n`} onClick={() => setVisible(true)}>弹窗按钮</Button>
+                <Button type="icon" icon="close" className={`${classPrefix}-mr-2n`}></Button>
+                <Modal visible={visible} caption="对话框标题" onClose={() => setVisible(false)}>
+                  <Modal.Body>我是对话框内容</Modal.Body>
+                  <Modal.Footer>
+                    <Button type="primary" onClick={() => setVisible(false)}>
+                      确定
+                    </Button>
+                    <Button type="weak" onClick={() => setVisible(false)}>
+                      取消
+                    </Button>
+                  </Modal.Footer>
+                </Modal>
+                <Button
+                  type="pay"
+                  className={`${classPrefix}-mr-2n`}
+                  onClick={() => notification.error({
+                    title: '标题',
+                    description:
+                        '文案不限长度，但是展示最大哦显示两行折行的末尾处显示折行的末尾处显示折行的末尾处显示折折行的末尾处显示折折行的末尾处',
+                    footer: '查看详情',
+                    onFooterClick: console.log,
+                  })
+                  }
+                >
+                  打开错误提示Notification
+                </Button>
+                <Button type="primary" onClick={() => setDrawerVisible(true)} className={`${classPrefix}-mr-2n`}>打开抽屉</Button>
+                <Drawer
+                  visible={drawerVisible}
+                  title="标题"
+                  subtitle="说明文字"
+                  footer={<Button type="primary">操作按钮</Button>}
+                  onClose={() => setDrawerVisible(false)}
+                >
+                  <p style={{ padding: '20px 0' }}>
+                    可以根据实际需求，选则是否需要头尾结构
+                  </p>
+                  <img
+                    src="http://ue.qzone.qq.com/200x400"
+                    style={{ width: '100%', verticalAlign: 'top' }}
+                    alt=""
+                  />
+                </Drawer>
+              </Form.Item>
+              <Form.Item label="级联选择器">
+                <Cascader
+                  clearable
+                  searchable
+                  type="menu"
+                  data={data}
+                  multiple={false}
+                  onChange={(value, { options }) => console.log(value, options)}
+                />
+              </Form.Item>
+              <Form.Item label="下拉选择" align="middle">
+                <Dropdown
+                  trigger="hover"
+                  clickClose={false}
+                  style={{ marginRight: 10 }}
+                  button="Hover me"
+                  onOpen={() => console.log('open')}
+                  onClose={() => console.log('close')}
+                >
+                  {menu}
+                </Dropdown>
+                <Dropdown
+                  clickClose={false}
+                  style={{ marginRight: 10 }}
+                  button="按钮样式"
+                  appearance="button"
+                  onOpen={() => console.log('open')}
+                  onClose={() => console.log('close')}
+                  boxSizeSync
+                >
+                  {menu}
+                </Dropdown>
+                <Dropdown
+                  clickClose={false}
+                  style={{ marginRight: 10 }}
+                  button="链接样式"
+                  appearance="link"
+                  placement="top"
+                >
+                  {menu}
+                </Dropdown>
+                <Dropdown
+                  clickClose={false}
+                  style={{ marginRight: 10 }}
+                  button="筛选"
+                  appearance="filter"
+                >
+                  {menu}
+                </Dropdown>
+                <Dropdown
+                  clickClose={false}
+                  style={{ marginRight: 10 }}
+                  button={<Button type="icon" icon="more" />}
+                  appearance="pure"
+                >
+                  {menu}
+                </Dropdown>
+              </Form.Item>
+              <Form.Item label="图片预览">
+                <ImagePreview
+                  src="http://ue.qzone.qq.com/100"
+                  previewSrc="http://ue.qzone.qq.com/3000"
+                  previewTitle="这是一张示例图片"
+                />
+              </Form.Item>
+              <Form.Item label="上传图片" align="middle" >
+                  <Upload
+                      style={{ display: 'inline-block' }}
+                      multiple
+                      action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
+                      onStart={handleStart}
+                      onSuccess={handleSuccess}
+                      onError={handleError}
+                    >
+                      <Button loading={uploading}>点击上传</Button>
+                    </Upload>
+                    <p className={`${classPrefix}-mt-2n`}>
+                      <Text theme="weak" reset>
+                        支持批量上传，上传格式为 png 文件
+                      </Text>
+                    </p>
+              </Form.Item>
+              <Form.Item label="上传图片"  align="middle">
+                  {/* <Upload
+                      multiple
+                      action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
+                      onStart={handleStart}
+                      onSuccess={handleSuccess}
+                      onError={handleError}
+                    >
+                      <Button loading={uploading}>点击上传</Button>
+                    </Upload> */}
+
+                    {/* {!!fileList.length && <hr />} */}
+                    <ul className="_weda-fn-upload-result">
+                      {fileList.map((file, index) => {
+                        // <p key={index}>
+                        //   <Text theme={file.status}>{file.name}</Text>
+                        // </p>
+                        console.log('file', file);
+                        return (
+                          <li
+                            key={index}
+                            className="_weda-fn-upload-result__item"
+                          >
+                            <img src={file.url} alt="" />
+                            <div className="_weda-fn-upload-result__op">
+                              <button className={`${classPrefix}-btn _weda-fn-btn--goast`}>
+                                <Icon type="delete"></Icon>删除
+                              </button>
+                            </div>
+                          </li>
+                        );
+                      })}
+                      <li className="_weda-fn-upload-result__item ">
+                        {/* <img src="https://via.placeholder.com/120" alt="" /> */}
+                        <div className="_weda-fn-upload-result__status">
+                          <Icon type="loading"></Icon>
+                          <Text theme="label" reset className={`${classPrefix}-mt-1n`}>
+                            上传40%...
+                          </Text>
+                        </div>
+                      </li>
+                      <li className="_weda-fn-upload-result__item">
+                        {/* <img src="https://via.placeholder.com/120" alt="" /> */}
+                        <div className="_weda-fn-upload-result__status">
+                          <Icon type="error"></Icon>
+                          <Text theme="danger" reset className={`${classPrefix}-mt-1n`}>
+                            文件格式有误
+                          </Text>
+                        </div>
+                      </li>
+                      <li className="_weda-fn-upload-result__item">
+                        <img src="https://via.placeholder.com/120" alt="" />
+                        <div className="_weda-fn-upload-result__op">
+                          <button className={`${classPrefix}-btn _weda-fn-btn--goast`}>
+                            <Icon type="delete"></Icon>删除
+                          </button>
+                        </div>
+                      </li>
+                      <li className="_weda-fn-upload-result__item _weda-fn-upload-result__item--upload">
+                        {/* <img src="https://via.placeholder.com/120" alt="" /> */}
+                        <div className="_weda-fn-upload-result__status">
+                          <Icon type="plus"></Icon>
+                          <Text theme="label" reset className={`${classPrefix}-mt-1n`}>
+                            点击上传图片
+                          </Text>
+                        </div>
+                      </li>
+                    </ul>
+                    <p className={`${classPrefix}-mt-2n`}>
+                      <Text theme="weak" reset>
+                        支持批量上传，上传格式为 png 文件
+                      </Text>
+                    </p>
+              </Form.Item>
+              <Form.Item label="地图定位"  align="middle">
+                <div className="_weda-fn-map">
+                  <Justify
+                  className="_weda-fn-map__local"
+                  left={
+                    <Button type="primary">选择地理位置</Button>
+                  }
+                  />
+                </div>
+              </Form.Item>
+              <Form.Item label="地图定位" align="middle">
+                <div className="_weda-fn-map">
+                  <Justify
+                  className="_weda-fn-map__local"
+                  left={
+                    <><i className={`${classPrefix}-icon _weda-fn-icon-local`}></i><Text reset>深南大道10000号腾讯大厦</Text></>
+                  }
+                  right={<Button >重新定位</Button>}
+                  />
+                  <div className="_weda-fn-map__map">
+                    <img style={{ maxWidth: '100%' }} src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/011cb9fd-34a4-426f-9519-bdf75676d80c.png" alt="实际地图" />
+                  </div>
+                </div>
+              </Form.Item>
+            </Form>
+          </Card.Body>
+        </Card>
+
+        <StepForm />
+        <Card style={{ display: 'none' }}>
+          <Card.Body>
+            <div
+              className="weui-form wa-comp-CLOUDBASE_STANDARD-Form "
+              id="id8"
+            >
+              <div className="weui-cells__group weui-cells__group_form">
+                <div
+                  id="id9"
+                  className="wa-comp-CLOUDBASE_STANDARD-FormItem  gsd-h5-react-formitem"
+                  title=""
+                >
+                  {/* 输入框 */}
+                  <FormItem>
+                    <WedaInput />
+                  </FormItem>
+
+                  {/* 邮箱 */}
+                  <FormItem>
+                    <WedaInput label="邮箱" />
+                  </FormItem>
+
+                  {/* 时间选择 */}
+                  <FormItem>
+                    <WedaSelect label="时间" />
+                  </FormItem>
+
+                  {/* 默认选择 */}
+                  <FormItem>
+                    <WedaSelect />
+                  </FormItem>
+
+                  {/* 单选 */}
+                  <FormItem>
+                    <WedaRadio />
+                  </FormItem>
+
+                  {/* 复选 */}
+                  <FormItem>
+                    <WedaCheckbox />
+                  </FormItem>
+
+                  {/* 开关 */}
+                  <FormItem>
+                    <WedaSwitch />
+                  </FormItem>
+
+                  {/* 地域选择器 */}
+                  <FormItem>
+                    <WedaSwitch />
+                  </FormItem>
+
+                  {/* 多行输入 */}
+                  <FormItem>
+                    <WedaTextArea />
+                  </FormItem>
+
+                  {/* 地域选择 */}
+                  <FormItem>
+                    <WedaRegionSelect />
+                  </FormItem>
+
+                  <div title="" style={{ display: 'none' }}>
+                    <div
+                      className="lcap-modal container wa-comp-CLOUDBASE_STANDARD-Modal lcap-modal container wa-comp-CLOUDBASE_STANDARD-Modal"
+                      title=""
+                    >
+                      <div
+                        className="lcap-modal__mask lcap-modal__mask"
+                        title=""
+                      ></div>
+                      <div className="lcap-modal__dialog enter" title="">
+                        <div
+                          className="lcap-modal__close_btn lcap-modal__close_btn"
+                          title=""
+                        >
+                          <div
+                            className="wa-comp-CLOUDBASE_STANDARD-Icon"
+                            title=""
+                            style={{
+                              display: 'inline-block',
+                              flexFlow: 'row nowrap',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}
+                          >
+                            <div
+                              className="lcap-icon lcap-icon-close"
+                              title=""
+                              // style="font-size: 1.7143rem; color: rgb(136, 136, 136);"
+                            ></div>
+                          </div>
+                        </div>
+                        <div title="modal-header"></div>
+                        <div
+                          title=""
+                          // style="padding-bottom: 3.5714rem;"
+                        >
+                          <button
+                            className="weda-button weui-btn weui-btn_default"
+                            type="button"
+                            style={{
+                              color: 'rgb(255, 255, 255)',
+                              borderWidth: ' 0px',
+                              borderRadius: '0px',
+                              background: 'rgb(50, 129, 248)',
+                              position: 'fixed',
+                              left: '50%',
+                              transform: 'translate3d(-50%,0,0)',
+                              bottom: '0px',
+                            }}
+                          >
+                            <p
+                              className="weda-text"
+                              style={{
+                                zIndex: '30',
+                                position: 'static',
+                                bottom: '0px',
+                              }}
+                            >
+                              确定
+                            </p>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {/*  */}
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="weda-select weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">地区多选</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <Cascader
+                          multiple
+                          className="fn-weda-cascader"
+                          overlayclassName="fn-weda-cascader-box"
+                          clearable
+                          type="menu"
+                          data={data}
+                          onChange={(value, { options }) => console.log(value, options)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="weda-select weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">地区单选</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <Cascader
+                          className="fn-weda-cascader"
+                          overlayclassName="fn-weda-cascader-box"
+                          clearable
+                          type="menu"
+                          data={data}
+                          onChange={(value, { options }) => console.log(value, options)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="weda-select weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">日期</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <RangePicker
+                          overlayClassName="fn-weda-calendar"
+                          className="fn-weda-datetimepicker"
+                          defaultValue={[
+                            moment('2020-10-01'),
+                            moment('2020-11-11'),
+                          ]}
+                          showTime
+                          onChange={value => console.log(value[0].format(), value[1].format())
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="weda-select weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">选择器</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <Dropdown
+                          className="fn-weda-dropdown"
+                          trigger="click"
+                          clickClose={false}
+                          appearance={SelectAp}
+                          button="Hover me"
+                          onOpen={() => console.log('open')}
+                          onClose={() => console.log('close')}
+                        >
+                          {menu}
+                        </Dropdown>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className=" weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">地图</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <Button type="primary">选择地理位置</Button>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className=" weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">地图</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <Button type="weak">重新定位</Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="  weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">上传图片</div>
+                      <div
+                        className="weui-cell weui-cell_active weui-cell_form weui-flex__item"
+                        style={{ display: 'block' }}
+                      >
+                        <Upload
+                          multiple
+                          action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
+                          onStart={handleStart}
+                          onSuccess={handleSuccess}
+                          onError={handleError}
+                        >
+                          <Button loading={uploading}>点击上传</Button>
+                        </Upload>
+
+                        {/* {!!fileList.length && <hr />} */}
+                        <ul className="_weda-fn-upload-result">
+                          {fileList.map((file, index) => {
+                            // <p key={index}>
+                            //   <Text theme={file.status}>{file.name}</Text>
+                            // </p>
+                            console.log('file', file);
+                            return (
+                              <li
+                                key={index}
+                                className="_weda-fn-upload-result__item"
+                              >
+                                <img src={file.url} alt="" />
+                                <div className="_weda-fn-upload-result__op">
+                                  <button className={`${classPrefix}-btn _weda-fn-btn--goast`}>
+                                    <Icon type="delete"></Icon>删除
+                                  </button>
+                                </div>
+                              </li>
+                            );
+                          })}
+                          <li className="_weda-fn-upload-result__item">
+                            {/* <img src="https://via.placeholder.com/120" alt="" /> */}
+                            <div className="_weda-fn-upload-result__status">
+                              <Icon type="loading"></Icon>
+                              <Text theme="label" reset className={`${classPrefix}-mt-1n`}>
+                                上传40%...
+                              </Text>
+                            </div>
+                          </li>
+                          <li className="_weda-fn-upload-result__item">
+                            {/* <img src="https://via.placeholder.com/120" alt="" /> */}
+                            <div className="_weda-fn-upload-result__status">
+                              <Icon type="error"></Icon>
+                              <Text theme="danger" reset className={`${classPrefix}-mt-1n`}>
+                                文件格式有误
+                              </Text>
+                            </div>
+                          </li>
+                          <li className="_weda-fn-upload-result__item">
+                            <img src="https://via.placeholder.com/120" alt="" />
+                            <div className="_weda-fn-upload-result__op">
+                              <button className={`${classPrefix}-btn _weda-fn-btn--goast`}>
+                                <Icon type="delete"></Icon>删除
+                              </button>
+                            </div>
+                          </li>
+                        </ul>
+                        <p className={`${classPrefix}-mt-2n`}>
+                          <Text theme="weak">
+                            支持批量上传，上传格式为 png 文件
+                          </Text>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    id="id9"
+                    className="wa-comp-CLOUDBASE_STANDARD-FormItem wa-comp-CLOUDBASE_STANDARD-FormRegion  gsd-h5-react-formitem"
+                    title=""
+                  >
+                    <div className="weda-select weui-cells weui-cells_form weui-flex">
+                      <div className="weui-cell">下拉多选</div>
+                      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+                        <SelectMultiple
+                          className="fn-weda-dropdown"
+                          staging={false}
+                          appearance="default"
+                          defaultValue={['gz']}
+                          options={[
+                            {
+                              value: 'gz',
+                              text: '瓜子',
+                              tooltip: '百煮入味香',
+                            },
+                            {
+                              value: 'hs',
+                              text: '花生',
+                              disabled: true,
+                              tooltip: '花生已售罄',
+                            },
+                            { value: 'bmf', text: '爆米花', tooltip: '焦糖味' },
+                            {
+                              value: 'kl',
+                              text: '可乐',
+                              tooltip: '肥宅快乐水',
+                            },
+                            { value: 'pj', text: '啤酒' },
+                            { value: 'kqs', text: '矿泉水' },
+                            { value: 'bbz', text: '八宝粥' },
+                          ]}
+                          button={options => (options.length ? (
+                              <Tooltip
+                                title={options.map(o => o.text).join(', ')}
+                              >
+                                <div>
+                                  <Tag.Group>
+                                    {options.map(o => (
+                                      <Tag
+                                        key={o.value}
+                                        onClose={() => console.log('2')}
+                                      >
+                                        {o.text}
+                                      </Tag>
+                                    ))}
+                                  </Tag.Group>
+                                </div>
+                              </Tooltip>
+                          ) : (
+                            '请选择'
+                          ))
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Form.Action>
+              <button
+                className="weda-ui fn-weda-btn weui-btn weui-btn_primary wa-comp-CLOUDBASE_STANDARD-Button"
+                type="button"
+                widgettype="gsd-h5-react:Button"
+                id="id2"
+                _listeners="[object Object]"
+                opentype=""
+                ownerwidget="[object Object]"
+                compositeparent="[object Object]"
+                domref="[object Object]"
+              >
+                按钮
+              </button>
+            </Form.Action>
+          </Card.Body>
+          <Card.Footer></Card.Footer>
+        </Card>
+        <div
+          className="lcap-card wa-comp-CLOUDBASE_STANDARD-Card lcap-card wa-comp-CLOUDBASE_STANDARD-Card"
+          title=""
+          style={{ marginTop: '20px', display: 'none' }}
+        >
+          <div className="lcap-card__header lcap-card__header" title="">
+            <p
+              className="weda-text"
+              // style="-webkit-line-clamp: 2; white-space: pre-line; display: block;"
+            >
+              标题内容
+            </p>
+            <div
+              className="lcap-media wa-comp-CLOUDBASE_STANDARD-Media"
+              title=""
+            >
+              <div className="lcap-media__left lcap-media__left" title="">
+                <img
+                  className="weda-image lcap-media__left_image lcap-media__left_image"
+                  alt="[图片]"
+                  src="https://main.qcloudimg.com/raw/d9fe2045658211eeb3ad60edca3102a8.png"
+                  // style="object-fit: fill; width: 3.5714rem; height: 3.5714rem;"
+                />
+              </div>
+              <div className="lcap-media__right " title="">
+                <div
+                  className="lcap-media__title_container lcap-media__title_container"
+                  title=""
+                >
+                  <p
+                    className="weda-text lcap-media__title lcap-media__title"
+                    // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                  >
+                    标题
+                  </p>
+                  <p
+                    className="weda-text lcap-media__subtitle raw"
+                    // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                  >
+                    子标题
+                  </p>
+                </div>
+                <div title="">
+                  <p
+                    className="weda-text"
+                    // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                  >
+                    消息内容
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="lcap-card__body lcap-card__body" title="">
+            <div className="lcap-list wa-comp-CLOUDBASE_STANDARD-List lcap-list wa-comp-CLOUDBASE_STANDARD-List">
+              <div className="lcap-list__title lcap-list__title" title="">
+                <p
+                  className="weda-text"
+                  // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                >
+                  分组标题
+                </p>
+              </div>
+              <div className="lcap-list__wrap" title="">
+                <div
+                  className="lcap-item wa-comp-CLOUDBASE_STANDARD-Item size-lg lcap-hairline--bottom"
+                  title=""
+                >
+                  <div
+                    className="lcap-item__body lcap-item__body"
+                    title=""
+                    // style="min-width: auto;"
+                  >
+                    <div className="lcap-item__title lcap-item__title" title="">
+                      <p
+                        className="weda-text"
+                        // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                      >
+                        标题
+                      </p>
+                    </div>
+                    <div
+                      className="lcap-item__description lcap-item__description"
+                      title=""
+                    >
+                      <p
+                        className="weda-text"
+                        // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                      >
+                        标题下描述
+                      </p>
+                    </div>
+                  </div>
+                  <div className="lcap-item__value lcap-item__value" title="">
+                    <div
+                      className="lcap-item__value-text lcap-item__value-text"
+                      title=""
+                    >
+                      <p
+                        className="weda-text"
+                        // style="-webkit-line-clamp: 2; white-space: pre-line;"
+                      >
+                        右侧内容
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    className="lcap-item__detail-icon--vertical lcap-item__right-icon lcap-item__detail-icon--vertical lcap-item__right-icon lcap-item__detail-icon--vertical lcap-item__right-icon lcap-item__detail-icon--vertical lcap-item__right-icon wa-comp-CLOUDBASE_STANDARD-Icon"
+                    title=""
+                    // style="display: inline-block; flex-flow: row nowrap; align-items: center; justify-content: center;"
+                  >
+                    <div
+                      className="lcap-icon lcap-icon-chevronright"
+                      title=""
+                      // style="font-size: 1.7143rem; color: rgb(136, 136, 136);"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="lcap-card__footer lcap-card__footer" title=""></div>
+        </div>
+      </Content.Body>
+    </Content>
+  );
+}