1

src/components/ModalButton/ModalButton.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal, Button, message } from 'antd';
+
+export default function ModalButton(props) {
+  const {
+    method = 'confirm',
+    title = '',
+    content = '',
+    modalConfigs = {},
+    onClick,
+    onCancel,
+    // 未选数据弹出提示
+    beforeCheck = '',
+    okText = '确认',
+    cancelText = '取消',
+    ...btnProps
+  } = props || {}
+
+  const handleClick = e => {
+    if (!!beforeCheck) { message.info(beforeCheck); return }
+    Modal[method]({
+      title,
+      content,
+      okText,
+      cancelText,
+      ...modalConfigs,
+      onOk() {
+        // eslint-disable-next-line no-unused-expressions
+        onClick && onClick(e);
+      },
+      onCancel() {
+        // eslint-disable-next-line no-unused-expressions
+        onCancel && onCancel();
+      },
+    })
+  }
+
+  return <Button {...btnProps} onClick={handleClick}>{props.children}</Button>
+}

src/components/ModalButton/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ModalButton from './ModalButton';
+
+const ConfirmButton = props => <ModalButton {...props} method="confirm" />
+
+export {
+  ModalButton,
+  ConfirmButton,
+}

src/components/Navigate/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Link from 'umi/link';
+
+import styles from './style.less';
+
+const Navigate = ({ children, to, onClick }) => {
+    // to 包含协议 用 a
+    const useA = (to || '').indexOf('://') > -1 ? 'a' : '';
+    // 否则用 Link
+    const useLink = to && to.indexOf('://') === -1 ? Link : '';
+    // 没有 to 则使用 span
+    const element = useA || useLink || 'span';
+
+    const events = onClick ? { onClick } : {};
+    const style = { color: '#1D74D9', cursor: 'pointer' };
+
+    let redirect = {};
+    if (useA) {
+        redirect = { href: to }
+    } else if (useLink) {
+        redirect = { to }
+    }
+
+    const props = {
+        className: 'cust-navi',
+        style,
+        ...redirect,
+        ...events,
+    }
+
+    return React.createElement(element, props, children);
+};
+
+export default Navigate;

src/components/Navigate/style.less

@@ -0,0 +1,11 @@
+
+:global {
+  .cust-navi {
+    color: #1D74D9;
+    cursor: pointer;
+  
+    * {
+      color: #1D74D9 !important;
+    }
+  }
+}

src/components/NoticeIcon/NoticeList.jsx

@@ -0,0 +1,95 @@
+import { Avatar, List } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './NoticeList.less';
+
+const NoticeList = ({
+  data = [],
+  onClick,
+  onClear,
+  title,
+  onViewMore,
+  emptyText,
+  showClear = true,
+  clearText,
+  viewMoreText,
+  showViewMore = false,
+}) => {
+  if (data.length === 0) {
+    return (
+      <div className={styles.notFound}>
+        <img
+          src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
+          alt="not found"
+        />
+        <div>{emptyText}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <List
+        className={styles.list}
+        dataSource={data}
+        renderItem={(item, i) => {
+          const itemCls = classNames(styles.item, {
+            [styles.read]: item.read,
+          }); // eslint-disable-next-line no-nested-ternary
+
+          const leftIcon = item.avatar ? (
+            typeof item.avatar === 'string' ? (
+              <Avatar className={styles.avatar} src={item.avatar} />
+            ) : (
+              <span className={styles.iconElement}>{item.avatar}</span>
+            )
+          ) : null;
+          return (
+            <List.Item
+              className={itemCls}
+              key={item.key || i}
+              onClick={() => onClick && onClick(item)}
+            >
+              <List.Item.Meta
+                className={styles.meta}
+                avatar={leftIcon}
+                title={
+                  <div className={styles.title}>
+                    {item.title}
+                    <div className={styles.extra}>{item.extra}</div>
+                  </div>
+                }
+                description={
+                  <div>
+                    <div className={styles.description}>{item.description}</div>
+                    <div className={styles.datetime}>{item.datetime}</div>
+                  </div>
+                }
+              />
+            </List.Item>
+          );
+        }}
+      />
+      <div className={styles.bottomBar}>
+        {showClear ? (
+          <div onClick={onClear}>
+            {clearText} {title}
+          </div>
+        ) : null}
+        {showViewMore ? (
+          <div
+            onClick={e => {
+              if (onViewMore) {
+                onViewMore(e);
+              }
+            }}
+          >
+            {viewMoreText}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default NoticeList;

src/components/NoticeIcon/NoticeList.less

@@ -0,0 +1,105 @@
+@import '~antd/es/style/themes/default.less';
+
+.list {
+  max-height: 400px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .item {
+    padding-right: 24px;
+    padding-left: 24px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .meta {
+      width: 100%;
+    }
+
+    .avatar {
+      margin-top: 4px;
+      background: #fff;
+    }
+    .iconElement {
+      font-size: 32px;
+    }
+
+    &.read {
+      opacity: 0.4;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+    &:hover {
+      background: @primary-1;
+    }
+    .title {
+      margin-bottom: 8px;
+      font-weight: normal;
+    }
+    .description {
+      font-size: 12px;
+      line-height: @line-height-base;
+    }
+    .datetime {
+      margin-top: 4px;
+      font-size: 12px;
+      line-height: @line-height-base;
+    }
+    .extra {
+      float: right;
+      margin-top: -1.5px;
+      margin-right: 0;
+      color: @text-color-secondary;
+      font-weight: normal;
+    }
+  }
+  .loadMore {
+    padding: 8px 0;
+    color: @primary-6;
+    text-align: center;
+    cursor: pointer;
+    &.loadedAll {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: unset;
+    }
+  }
+}
+
+.notFound {
+  padding: 73px 0 88px;
+  color: @text-color-secondary;
+  text-align: center;
+  img {
+    display: inline-block;
+    height: 76px;
+    margin-bottom: 16px;
+  }
+}
+
+.bottomBar {
+  height: 46px;
+  color: @text-color;
+  line-height: 46px;
+  text-align: center;
+  border-top: 1px solid @border-color-split;
+  border-radius: 0 0 @border-radius-base @border-radius-base;
+  transition: all 0.3s;
+  div {
+    display: inline-block;
+    width: 50%;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+    &:hover {
+      color: @heading-color;
+    }
+    &:only-child {
+      width: 100%;
+    }
+    &:not(:only-child):last-child {
+      border-left: 1px solid @border-color-split;
+    }
+  }
+}

src/components/NoticeIcon/index.jsx

@@ -0,0 +1,155 @@
+import { Badge, Icon, Spin, Tabs } from 'antd';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import NoticeList from './NoticeList';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+const { TabPane } = Tabs;
+export default class NoticeIcon extends Component {
+  static Tab = NoticeList;
+  static defaultProps = {
+    onItemClick: () => {},
+    onPopupVisibleChange: () => {},
+    onTabChange: () => {},
+    onClear: () => {},
+    onViewMore: () => {},
+    loading: false,
+    clearClose: false,
+    emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
+  };
+  state = {
+    visible: false,
+  };
+  onItemClick = (item, tabProps) => {
+    const { onItemClick } = this.props;
+
+    if (onItemClick) {
+      onItemClick(item, tabProps);
+    }
+  };
+  onClear = (name, key) => {
+    const { onClear } = this.props;
+
+    if (onClear) {
+      onClear(name, key);
+    }
+  };
+  onTabChange = tabType => {
+    const { onTabChange } = this.props;
+
+    if (onTabChange) {
+      onTabChange(tabType);
+    }
+  };
+  onViewMore = (tabProps, event) => {
+    const { onViewMore } = this.props;
+
+    if (onViewMore) {
+      onViewMore(tabProps, event);
+    }
+  };
+
+  getNotificationBox() {
+    const { children, loading, clearText, viewMoreText } = this.props;
+
+    if (!children) {
+      return null;
+    }
+
+    const panes = React.Children.map(children, child => {
+      if (!child) {
+        return null;
+      }
+
+      const { list, title, count, tabKey, showClear, showViewMore } = child.props;
+      const len = list && list.length ? list.length : 0;
+      const msgCount = count || count === 0 ? count : len;
+      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
+      return (
+        <TabPane tab={tabTitle} key={title}>
+          <NoticeList
+            clearText={clearText}
+            viewMoreText={viewMoreText}
+            data={list}
+            onClear={() => this.onClear(title, tabKey)}
+            onClick={item => this.onItemClick(item, child.props)}
+            onViewMore={event => this.onViewMore(child.props, event)}
+            showClear={showClear}
+            showViewMore={showViewMore}
+            title={title}
+            {...child.props}
+          />
+        </TabPane>
+      );
+    });
+    return (
+      <>
+        <Spin spinning={loading} delay={300}>
+          <Tabs className={styles.tabs} onChange={this.onTabChange}>
+            {panes}
+          </Tabs>
+        </Spin>
+      </>
+    );
+  }
+
+  handleVisibleChange = visible => {
+    const { onPopupVisibleChange } = this.props;
+    this.setState({
+      visible,
+    });
+
+    if (onPopupVisibleChange) {
+      onPopupVisibleChange(visible);
+    }
+  };
+
+  render() {
+    const { className, count, popupVisible, bell } = this.props;
+    const { visible } = this.state;
+    const noticeButtonClass = classNames(className, styles.noticeButton);
+    const notificationBox = this.getNotificationBox();
+    const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
+    const trigger = (
+      <span
+        className={classNames(noticeButtonClass, {
+          opened: visible,
+        })}
+      >
+        <Badge
+          count={count}
+          style={{
+            boxShadow: 'none',
+          }}
+          className={styles.badge}
+        >
+          {NoticeBellIcon}
+        </Badge>
+      </span>
+    );
+
+    if (!notificationBox) {
+      return trigger;
+    }
+
+    const popoverProps = {};
+
+    if ('popupVisible' in this.props) {
+      popoverProps.visible = popupVisible;
+    }
+
+    return (
+      <HeaderDropdown
+        placement="bottomRight"
+        overlay={notificationBox}
+        overlayClassName={styles.popover}
+        trigger={['click']}
+        visible={visible}
+        onVisibleChange={this.handleVisibleChange}
+        {...popoverProps}
+      >
+        {trigger}
+      </HeaderDropdown>
+    );
+  }
+}

src/components/NoticeIcon/index.less

@@ -0,0 +1,31 @@
+@import '~antd/es/style/themes/default.less';
+
+.popover {
+  position: relative;
+  width: 336px;
+}
+
+.noticeButton {
+  display: inline-block;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.icon {
+  padding: 4px;
+  vertical-align: middle;
+}
+
+.badge {
+  font-size: 16px;
+}
+
+.tabs {
+  :global {
+    .ant-tabs-nav-scroll {
+      text-align: center;
+    }
+    .ant-tabs-bar {
+      margin-bottom: 0;
+    }
+  }
+}

src/components/PageLoading/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Spin } from 'antd'; // loading components from code split
+// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
+
+const PageLoading = () => (
+  <div
+    style={{
+      paddingTop: 100,
+      textAlign: 'center',
+    }}
+  >
+    <Spin size="large" />
+  </div>
+);
+
+export default PageLoading;

src/components/PaginationWrapper/index.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Pagination } from 'antd';
+import classNames from 'classnames'
+import { useQuery } from '../../utils/hooks';
+import { ObjSpEqual } from '../../utils/utils'
+import Styles from './style.less'
+
+class PaginationWrapper extends React.PureComponent {
+
+  state = {
+    data: {
+      current: 1,
+      total: 0,
+      pages: 0,
+    },
+    loadding: false,
+  }
+
+  componentDidMount () {
+    this.fetchData(1)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!ObjSpEqual(prevProps.params, this.props.params)) {
+      this.fetchData(1)
+    }
+  } 
+
+  fetchData = (page) => {
+    this.setState({ loadding: true })
+    
+    const requestParams = this.props.params || {}
+    this.props.request({
+      ...requestParams,
+      params: {
+        pageNum: page,              // 有的接口是 pageNum
+        pageNumber: page,  // 有的接口是 pageNumber
+        ...(requestParams.params || {}),
+      }
+    }).then((res) => {
+      this.setState({ loadding: false, data: res })
+    })
+  }
+
+  handlePageChange = (page) => {
+    this.fetchData(page)
+  }
+
+  render() {
+    const { className, style, bodyClass, footerClass, render } = this.props
+    const { data } = this.state
+
+    return (
+      <div className={classNames(Styles['pg-wrapper'], className)} style={style}>
+        <div className={classNames(Styles.body, bodyClass)}>
+          {render(data)}
+        </div>
+        <div className={classNames(Styles.footer, footerClass)}>
+          <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={this.handlePageChange} current={data.current}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+PaginationWrapper.propTypes = {
+  request: PropTypes.func.isRequired,
+  render: PropTypes.func.isRequired,
+  params: PropTypes.object,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  bodyClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  footerClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  style: PropTypes.object,
+}
+
+// /**
+//  * 分页封装
+//  * @param {page, params, request, render, className, style, bodyClass, footerClass} props 
+//  */
+// function PaginationWrapper(props) {
+//   const defaultPage = props.page || 1
+//   const [pageNum, setPage] = useState(defaultPage)
+//   const requestParams = props.params || {}
+//   const [data = {}, loading, err] = useQuery({ ...requestParams, params: { ...(requestParams.params || {}), pageNum, pageNumber: pageNum }}, props.request)
+
+//   // if (typeof props.setData === 'function') {
+//   //   props.setData(data)
+//   // }
+
+//   console.log('------render PaginationWrapper-------', pageNum, data, loading)
+
+//   return (
+//     <div className={classNames(Styles['pg-wrapper'], props.className)} style={props.style}>
+//       <div className={classNames(Styles.body, props.bodyClass)}>
+//         {props.render(data)}
+//       </div>
+//       <div className={classNames(Styles.footer, props.footerClass)}>
+//         <Pagination showQuickJumper defaultCurrent={defaultPage} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
+//       </div>
+//     </div>
+//   )
+// }
+
+export default PaginationWrapper

src/components/PaginationWrapper/style.less

@@ -0,0 +1,10 @@
+.pg-wrapper {
+  .body {}
+
+  .footer {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+}

src/components/SearchForm/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTyps from 'prop-types';
+import { Form, Button } from 'antd';
+
+function isFunc(fn) { return typeof fn === 'function' };
+
+class SearchForm extends React.PureComponent {
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err && isFunc(this.props.onSearch)) {
+        this.props.onSearch(values)
+        return
+      }
+
+      if (err) {
+        console.error(err)
+        if (isFunc(this.props.onError)) {
+          this.props.onError(err)
+        }
+        return
+      }
+    });
+  };
+
+  handleReset = e => {
+    this.props.form.resetFields()
+    if (isFunc(this.props.onReset)) {
+      this.props.onReset()
+    }
+  }
+
+  render () {
+    const { form, hideResetBtn } = this.props;
+
+    return (
+      <Form layout="inline" onSubmit={this.handleSubmit} colon={false}>
+        {
+          (this.props.fields || []).map((field, index) => {
+            const { element, render, name, label, value } = field || {}
+
+            if (!element && !render) return null;
+
+            const conifg = value  ? { initialValue: value } : {}
+            const Item = isFunc(render) ? render(this.props) : element
+
+            return <Form.Item label={label} key={`fm-${index}`}>{form.getFieldDecorator(name, conifg)(Item)}</Form.Item>
+          })
+        }
+        <Form.Item>
+          <Button type="primary" htmlType="submit">搜索</Button>
+        </Form.Item>
+        { hideResetBtn && (
+          <Form.Item>
+            <Button type="default" onClick="handleReset">重置</Button>
+          </Form.Item>
+        )}
+      </Form>
+    );
+  }
+}
+
+// 提供给父组件 onChange 事件
+function onValuesChange(props, changedValues, allValues) {
+  if (isFunc(props.onChange)) {
+    props.onChange(changedValues, allValues)
+  }
+}
+
+const EnhanceForm = Form.create({ onValuesChange })(SearchForm)
+
+EnhanceForm.propTypes = {
+  onSearch: PropTyps.func.isRequired,
+  onReset: PropTyps.func,
+  onError: PropTyps.func,
+  onChange: PropTyps.func,
+  fields: PropTyps.arrayOf(PropTyps.object),
+  hideResetBtn: PropTyps.bool,
+}
+
+export default EnhanceForm;

src/components/SelectButton/AreaSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+import { APIBaseURL } from '../../utils/constant'
+
+const { Option } = Select;
+const prefix = APIBaseURL
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+  const cityId = typeof props.cityId === 'function' ? props.cityId() : props.cityId
+
+  useEffect(() => {
+    getCityAreaList();
+    getValue();
+  },[cityId])
+
+  const getCityAreaList = (e) => {
+    request({
+        url: prefix + 'api/admin/tdCityList/tdAreaCity',
+        method: 'GET',
+        params: {leveltype: 3, cityId},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择区域"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.name}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/BuildSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const BuildingSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getBuildList();
+  }, [props.value])
+
+
+  const getBuildList = e => {
+    request({ ...apis.building.buildingSelect, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择项目"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          <Option key="" value="">全部项目</Option>
+          {data.map(building => (
+            <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default BuildingSelect

src/components/SelectButton/BuildSelect2.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const BuildingSelect2 = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  console.log('props', props.cityId);
+  useEffect(() => {
+    getBuildList();
+  }, [props.cityId])
+
+
+  const getBuildList = e => {
+    request({ ...apis.building.buildingSelect, params: { cityId: props.cityId, pageNum: 1, pageSize: 999 } }).then(data => {
+      setData(data)
+      checkValue(data)
+      // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+      props.onChange(va)
+
+    }
+  }
+
+  const onChange = (buildingId) => {
+    const building = data.filter(x => buildingId === x.buildingId)[0]
+
+    props.onChange(buildingId, building)
+    // if (props.value) {
+    //   const tempData = data.filter(f => f.buildingId == props.value)
+    //   const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+    //   props.onChange(va)
+
+    // }={props.onChange}building.buildingId
+  }
+
+  return (
+    <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择项目"
+      onChange={ onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+      {data.map(building => (
+        <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
+      ))}
+    </Select>
+  )
+}
+export default BuildingSelect2

src/components/SelectButton/CitySelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+import { APIBaseURL } from '../../utils/constant'
+
+const { Option } = Select;
+const prefix = APIBaseURL
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+
+  useEffect(() => {
+    getCityList();
+    getValue();
+  },[props.value])
+
+  const getCityList = (e) => {
+    request({
+        url: prefix + 'api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/CitySelect2.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+import { APIBaseURL } from '../../utils/constant'
+
+const { Option } = Select;
+const prefix = APIBaseURL
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+
+  useEffect(() => {
+    getCityList();
+  },[props.value])
+
+  const getCityList = (e) => {
+    request({
+        url: prefix + 'api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+        getValue(data);
+        console.log('---123---')
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = (data) => {
+    console.log(props.value)
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '180px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/CitySelect3.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+import { APIBaseURL } from '../../utils/constant'
+
+const { Option } = Select;
+const prefix = APIBaseURL
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect3 = (props) => {
+  const [ data, setData ] = useState([])
+  console.log('props', props.buildingId)
+  useEffect(() => {
+    getCityList();
+    getValue();
+  },[props.buildingId])
+
+  const getCityList = (e) => {
+    request({
+        url: prefix + 'api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect3

src/components/SelectButton/LivePlatSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const LivePlatSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+
+  useEffect(() => {
+    getLivePlatList();
+  }, [props.value])
+
+
+  const getLivePlatList = e => {
+    request({ ...apis.taliveActivity.livePlatList, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : '平台已下线，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={`${props.value || ''}`}
+      style={{ width: '300px' }}
+      placeholder="请选择平台"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(live => (
+            <Option key={live.id} value={`${live.id}`}>{live.livePlatName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default LivePlatSelect

src/components/SelectButton/MiniappIconSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const MiniappIconSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getMiniappIconSelect();
+  }, [props.value])
+
+
+  const getMiniappIconSelect = e => {
+    request({ ...apis.icon.minippIconList, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.iconCode == props.value)
+      const va = (tempData.length > 0) ? props.value : ''
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择功能"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(icon => (
+            <Option key={icon.iconCode} value={icon.iconCode}>{icon.iconName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default MiniappIconSelect

src/components/SelectButton/NewTypeSelect.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+import { APIBaseURL } from '../../utils/constant'
+
+const prefix = `${APIBaseURL}api/admin`
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const NewsTypeSelect = (props) => {
+  const [ data, setData ] = useState([])
+  const [ value, setValue ] = useState('')
+  const preProps = usePrevious(props)
+  
+  if ((!preProps || !preProps.value) && props.value && !value) {
+    setValue(props.value)
+  }
+
+  useEffect(() => {
+    getNewsTypeList();
+  },[props.buildingId])
+
+  const getNewsTypeList = (e) => {
+    request({
+        url: `${prefix}/taNewsType`,
+        method: 'GET',
+        params: {pageNum: 1,pageSize: 999,buildingId: props.buildingId},
+        action: 'admin.taNewsType.get',
+    }).then((data) => {
+        setData(data.records)
+    })
+  }
+
+  const handleChange = (e) => {
+    setValue(e)
+    props.onChange(e)
+  }
+
+  return (
+      <Select value={props.value} style={{ width: '180px' }} placeholder="请选择资讯类型" onChange={handleChange}>
+          {data.map(type => (
+            <Option key={type.newsTypeId} value={type.newsTypeId}>{type.newsTypeName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default NewsTypeSelect
+

src/components/SelectButton/QrcodeType.jsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+
+const qrcodeType = props => {
+    //   const [data, setData] = useState([])
+    //   useEffect(() => {
+
+    //   }, [props.value])
+    // const visible2 = props.visible || true
+    const all = props.all || false
+
+    const visible = useMemo(() => (props.visible), [props.visible]);
+    
+    const data = [
+        {
+            name: '项目',
+            value: 'project',
+            visible,
+        },
+        {
+            name: '报名活动',
+            value: 'activity',
+            visible,
+        },
+        {
+            name: '助力活动',
+            value: 'help',
+            visible,
+        },
+        {
+            name: '拼团活动',
+            value: 'group',
+            visible,
+        },
+        {
+            name: 'H5活动',
+            value: 'h5',
+            visible: true,
+        },
+        {
+            name: '直播活动',
+            value: 'live',
+            visible: true,
+        },
+        {
+            name: '资讯',
+            value: 'news',
+            visible,
+        },
+        {
+            name: '在线选房',
+            value: 'salesBatch',
+            visible,
+        },
+    ]
+
+
+    return (
+        // <>234</>
+        <Select
+            showSearch
+            value={props.value}
+            style={{ width: '250px' }}
+            placeholder="请选择二维码内容类型"
+            onChange={props.onChange}
+            // filterOption={(input, option) =>
+            //     // eslint-disable-next-line max-len
+            //     option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            // }
+        >
+            {all && <Option key="" value="">全部类型</Option>}
+            {data.map(Item => (
+
+                Item.visible ? <Option key={Item.vlaue} value={Item.value}> {Item.name} </Option> : ''
+            ))}
+        </Select>
+    )
+}
+export default qrcodeType

src/components/SelectButton/QrcodeType1.jsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+
+const qrcodeType = props => {
+    //   const [data, setData] = useState([])
+    //   useEffect(() => {
+
+    //   }, [props.value])
+    // const visible2 = props.visible || true
+    const all = props.all || false
+
+    const visible = useMemo(() => (props.visible), [props.visible]);
+    
+    const data = [
+        {
+            name: '项目',
+            value: 'building',
+            visible,
+        },
+        {
+            name: '报名活动',
+            value: 'activity',
+            visible,
+        },
+        {
+            name: '助力活动',
+            value: 'help',
+            visible,
+        },
+        {
+            name: '拼团活动',
+            value: 'group',
+            visible,
+        },
+        {
+            name: 'H5活动',
+            value: 'h5',
+            visible: true,
+        },
+        {
+            name: '直播活动',
+            value: 'live',
+            visible: true,
+        },
+        {
+            name: '资讯',
+            value: 'news',
+            visible,
+        },
+        {
+            name: '在线选房',
+            value: 'house',
+            visible,
+        },
+    ]
+
+
+    return (
+        // <>234</>
+        <Select
+            showSearch
+            value={props.value}
+            style={{ width: '250px' }}
+            placeholder="请选择二维码内容类型"
+            onChange={props.onChange}
+            // filterOption={(input, option) =>
+            //     // eslint-disable-next-line max-len
+            //     option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            // }
+        >
+            {all && <Option key="" value="">全部类型</Option>}
+            {data.map(Item => (
+
+                Item.visible ? <Option key={Item.vlaue} value={Item.value}> {Item.name} </Option> : ''
+            ))}
+        </Select>
+    )
+}
+export default qrcodeType

src/components/SelectButton/WxDictSelect.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const WxDictSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getWxDictList();
+  }, [props.value])
+
+
+  const getWxDictList = e => {
+    request({ ...apis.wxDict.list, params: { pageNumber: 1, pageSize: 999 } }).then(data => {
+        setData(data.records)
+        // 默认选中第一个
+    })
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '250px' }}
+      placeholder="请选择用户来源"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(wxDict => (
+            <Option key={wxDict.sceneType} value={wxDict.sceneType}>{wxDict.sceneAlias}</Option>
+          ))}
+      </Select>
+  )
+}
+export default WxDictSelect

src/components/SelectButton/channelSelect.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const ChannelSelect = props => {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    getChannelSelect();
+  }, [props.value])
+
+  const all = props.all || false
+
+
+  const getChannelSelect = e => {
+    request({ ...apis.channelList.getList, params: { pageNumber: 1, pageSize: 999 } }).then(data => {
+      setData(data.channelNmae)
+      // 默认选中第一个
+    })
+  }
+
+  return (
+    <Select
+      showSearch
+      value={props.value}
+      style={{ width: '250px' }}
+      placeholder="请选择渠道"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+      {all && <Option key="" value="">全部渠道</Option>}
+      {data.map(Item => (
+        <Option key={Item.channelId} value={Item.channelId}> {Item.channelName} </Option>
+      ))}
+    </Select>
+  )
+}
+export default ChannelSelect

src/components/SelectLang/index.jsx

@@ -0,0 +1,53 @@
+import { Icon, Menu } from 'antd';
+import { formatMessage, getLocale, setLocale } from 'umi-plugin-react/locale';
+import React from 'react';
+import classNames from 'classnames';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+
+const SelectLang = props => {
+  const { className } = props;
+  const selectedLang = getLocale();
+
+  const changeLang = ({ key }) => setLocale(key, false);
+
+  const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
+  const languageLabels = {
+    'zh-CN': '简体中文',
+    'zh-TW': '繁体中文',
+    'en-US': 'English',
+    'pt-BR': 'Português',
+  };
+  const languageIcons = {
+    'zh-CN': '🇨🇳',
+    'zh-TW': '🇭🇰',
+    'en-US': '🇺🇸',
+    'pt-BR': '🇧🇷',
+  };
+  const langMenu = (
+    <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={changeLang}>
+      {locales.map(locale => (
+        <Menu.Item key={locale}>
+          <span role="img" aria-label={languageLabels[locale]}>
+            {languageIcons[locale]}
+          </span>{' '}
+          {languageLabels[locale]}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+  return (
+    <HeaderDropdown overlay={langMenu} placement="bottomRight">
+      <span className={classNames(styles.dropDown, className)}>
+        <Icon
+          type="global"
+          title={formatMessage({
+            id: 'navBar.lang',
+          })}
+        />
+      </span>
+    </HeaderDropdown>
+  );
+};
+
+export default SelectLang;

src/components/SelectLang/index.less

@@ -0,0 +1,24 @@
+@import '~antd/es/style/themes/default.less';
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  :global(.ant-dropdown-menu-item) {
+    min-width: 160px;
+  }
+}
+
+.dropDown {
+  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
+  > i {
+    font-size: 16px !important;
+    transform: none !important;
+    svg {
+      position: relative;
+      top: -1px;
+    }
+  }
+}

src/components/SettingDrawer/themeColorClient.js

@@ -0,0 +1,33 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+
+/* eslint-disable import/no-extraneous-dependencies */
+import client from 'webpack-theme-color-replacer/client';
+import generate from '@ant-design/colors/lib/generate';
+export default {
+  getAntdSerials(color) {
+    const lightCount = 9;
+    const divide = 10; // 淡化（即less的tint）
+
+    let lightens = new Array(lightCount).fill(0);
+    lightens = lightens.map((_, i) => client.varyColor.lighten(color, i / divide));
+    const colorPalettes = generate(color);
+    return lightens.concat(colorPalettes);
+  },
+
+  changeColor(color) {
+    if (!color) {
+      return Promise.resolve();
+    }
+
+    const options = {
+      // new colors array, one-to-one corresponde with `matchColors`
+      newColors: this.getAntdSerials(color),
+
+      changeUrl(cssUrl) {
+        // while router is not `hash` mode, it needs absolute path
+        return `/${cssUrl}`;
+      },
+    };
+    return client.changer.changeColor(options, Promise);
+  },
+};

src/components/Wangedit/Wangedit.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import E from 'wangeditor';
+import { fetch, apis } from '../../utils/request';
+
+/**
+ * @param {*} props
+ * @returns
+ */
+class Wangedit extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      html: undefined,
+      contenteditable: props.contenteditable == false ? false : true
+    }
+    this.editor = undefined;
+  }
+
+  render() {
+    return (
+      <div ref="editorElem" style={{ textAlign: 'left' }}>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    const elem = this.refs.editorElem
+    this.editor = new E(elem)
+    // 使用 onchange 函数监听内容的变化
+    this.editor.customConfig.onchange = html => {
+      this.setState({ html })
+
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(html)
+      }
+    }
+    this.editor.customConfig.zIndex = 100
+    this.editor.customConfig.uploadImgMaxLength = 1
+    this.editor.customConfig.customUploadImg = function (files, insert) {
+      if (!files.length) return
+      
+      const data = new FormData()
+      data.append('file', files[0])
+
+      fetch(apis.image.upload)({data}).then(insert)
+    }
+    this.editor.customConfig.menus = [
+      'head',  // 标题
+      'bold',  // 粗体
+      'fontSize',  // 字号
+      'fontName',  // 字体
+      'italic',  // 斜体
+      'underline',  // 下划线
+      'strikeThrough',  // 删除线
+      'foreColor',  // 文字颜色
+      'backColor',  // 背景颜色
+      'list',  // 列表
+      'justify',  // 对齐方式
+      'quote',  // 引用
+      'image',  // 插入图片
+      'undo',  // 撤销
+      'redo'  // 重复
+    ]
+    
+    // 过滤 word 字符
+    this.editor.customConfig.pasteFilterStyle = false
+    this.editor.customConfig.pasteTextHandle = function(content) {
+      const regs = [
+        /<!--\[if [\s\S]*?endif\]-->/ig,
+        /<[a-zA-Z0-9]+\:[^>]+>[^>]*<\/[a-zA-Z0-9]+\:[^>]+>/ig,
+        /<[a-zA-Z0-9]+\:[^>]+\/>/ig,
+        /<style>[\s\S]*?<\/style>/ig,
+        new RegExp('\u2029', 'ig'),     // 替换word分隔符 序号 8233
+      ]
+
+      return regs.reduce((acc, reg) => {
+        return acc.replace(reg, '')
+      }, content)
+    }
+
+    this.editor.create()
+    this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
+    this.editor.customConfig.uploadImgShowBase64 = true
+    this.editor.txt.html(this.props.value)
+  }
+
+  componentDidUpdate(props, state) {
+    if (this.props.value && !state.html) {
+      if (this.editor) {
+        this.editor.txt.html(this.props.value)
+      }
+    }
+  }
+
+  /**
+   *增加这个 shouldComponentUpdate 生命函数
+    处理自动聚焦到富文本上
+   *
+   * @param {*} nextProps
+   * @returns
+   * @memberof Wangedit
+   */
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.editor.txt.html()
+  }
+}
+
+export default Wangedit
+

src/components/XForm/FileUpload.jsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react'
+import { Upload, Button, Icon } from 'antd';
+import { uploaderProps } from '../../utils/upload';
+
+/**
+ * value 数据的接收格式 [{ url: xxxxx.mp4 }]
+ * size  参数限制可以上传多少个文件
+ * @param { value, size } props
+ */
+function fileUpload(props) {
+
+  const { value } = props
+  // console.log('fileUploadProps： ', props)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [defaultFileList, setDefaultFileList] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setDefaultValue()
+  }, [props.value]);
+
+
+  function getFileList() {
+    console.log('fileUpload: ', value)
+    // value 数据的接收格式 [{ url: xxxxx.mp4 }, { url: xxxxx.jpg }]
+    return (value || []).filter(f => f !== undefined).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
+  }
+
+  function setDefaultValue() {
+    if (!value) {
+      return;
+    }
+
+    setDefaultFileList(getFileList())
+  }
+
+  function onFileChange({ file, fileList }) {
+    console.log(file, fileList)
+    setDefaultFileList(fileList)
+    if (file.status === 'uploading') {
+      return
+    }
+
+    if (file.status === 'done' || file.status === 'removed') {
+
+      // 因为这个控件本身返回的数据格式 [{ ..., response: '服务器返回的数据' }]
+      // 但是 我这里自己用的时候 传入的数据是 [ 'xxxx.mp4', 'xxxx.jpg' ], 然后通过 getFileList() 转换成了 [{ url: 'xxx.mp4' }] 这样的格式
+
+      // 原因是因为 控件返回的数据 和 fileList 展示已经上传的数据 的格式字段不一样
+
+      const resFileList = fileList.filter(f => f.response !== undefined).map(i => i.response)
+      const tempFileList = fileList.filter(f => f.url !== undefined).map(i => i.url)
+      const resultList = tempFileList.concat(resFileList || [])
+      props.onChange(resultList)
+    }
+  }
+
+  return (
+    <>
+      <Upload
+        { ...uploaderProps }
+        {...props}
+        onChange={onFileChange}
+        fileList={defaultFileList}
+      >
+        {
+          props.size ?
+          (props.size > defaultFileList.length
+          && (
+            <Button>
+                <Icon type="upload" /> {props.label}
+              </Button>
+          )) : (
+            <Button>
+              <Icon type="upload" /> {props.label}
+            </Button>
+          )
+        }
+      </Upload>
+    </>
+  )
+}
+
+export default fileUpload

src/components/XForm/ImageListUpload.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    loadding: false,
+  };
+
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
+  }
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    this.setState({
+      previewImage: file.url ,
+      previewVisible: true,
+    });
+  };
+
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    this.props.onChange(fileList);
+
+    // console.log('删除图片触发了', e.file)
+    // if (e.file.state === 'removed') {
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    //   this.props.onChange(fileList);
+    // }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const fileList = this.getFileList();
+
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
+      </div>
+    );
+    return (
+      <div className="clearfix">
+        <Upload
+          listType="picture-card"
+          multiple={true}
+          fileList={fileList}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/XForm/ImageUpload.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Upload, Icon, message } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+
+
+class ImageUpload extends React.Component {
+  state = {
+    loading: false,
+    imageUrl: undefined,
+  };
+
+  handleChange = info => {
+    if (info.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+    
+    if (info.file.status === 'removed') {
+      this.props.onChange();
+    }
+
+    // if (info.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (info.file.response && info.file.response.url) {
+    //     this.setState({
+    //       imageUrl: info.file.response.thumbUrl,
+    //     });
+
+    //     if (typeof this.props.onChange === 'function') {
+    //       this.props.onChange(info.file.response.url);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(url);
+    }
+  }
+
+  render() {
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
+      </div>
+    );
+
+    const value = this.props.value;
+    return (
+      <Upload
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        beforeUpload={this.props.beforeUpload}
+        onChange={this.handleChange}
+        {...uploaderProps}
+        disabled={this.props.disabled}
+        onSuccess={this.handleUploadSucess}
+      >
+        {(this.state.imageUrl || value) ? (
+          <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
+        ) : (
+            uploadButton
+          )}
+      </Upload>
+    );
+  }
+}
+
+export default ImageUpload;

src/components/XForm/README.md

@@ -0,0 +1,31 @@
+# XForm
+Antd Form 扩展
+
+## 使用说明
+
+```jsx
+import XForm, { FieldTypes } from '/path/to/XForm';
+
+const tplJSON = [
+  {},
+  {}
+]
+
+```
+
+通过 `json` 对象来实现自动构造 form 表单
+
+计划支持的属性
+
+[] label      显示的文字
+
+[] name       form name, 用于表单提交
+
+[] type       组件类型, 参见 FieldTypes
+
+[] rules      校验规则
+
+[] element    函数, 用于生成组件. (props) => <></> . 其中 props 包含 ...
+
+[] value      绑定的数据
+

src/components/XForm/WrapperForm.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from 'antd';
+import WrapperItem from './WrapperItem';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+class WrapperForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {}
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        if (typeof this.props.onError === 'function') {
+          typeof this.props.onError(err)
+        } else {
+          window.console.error(err)
+        }
+      } else {
+        if (typeof this.props.onSubmit === 'function') {
+          typeof this.props.onSubmit(values)
+        }
+      }
+    });
+  }
+
+  handleCancel = e => {
+    e.preventDefault();
+
+    if (typeof this.props.onCancel === 'function') {
+      typeof this.props.onCancel()
+    }
+  }
+
+  renderDefaultAction = (submitBtn, cancelBtn) => {
+    let FieldSubmit = null
+    let FieldCancel = null
+    if (submitBtn !== false) {
+      FieldSubmit = <Button htmlType="submit" type="primary">提交</Button>
+    }
+    if (cancelBtn !== false) {
+      FieldCancel = <Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '48px' }}>取消</Button>
+    }
+
+    return FieldSubmit || FieldCancel ? <WrapperItem action render={<>{FieldSubmit}{FieldCancel}</>} /> : null
+  }
+
+  render () {
+    const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
+    console.log('fields:', fields)
+    const FeildItems = (fields || []).filter(x => x).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
+    
+    return (
+      <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
+        {FeildItems}
+        {this.renderDefaultAction(submitBtn, cancelBtn)}
+        {children}
+      </Form>
+    );
+  }
+}
+
+WrapperForm.propTypes = {
+  fields: PropTypes.array.isRequired
+}
+
+export default WrapperForm;

src/components/XForm/WrapperItem.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Form,
+  Input,
+  InputNumber,
+  Checkbox,
+  Radio,
+  DatePicker,
+  TimePicker,
+  Select,
+  Switch,
+} from 'antd';
+import ImageUploader from './ImageUpload';
+
+const {Item} = Form
+const { Option } = Select;
+const { MonthPicker, RangePicker } = DatePicker
+
+const FieldTypes = {
+  Text: 'Text',
+  Password: 'Password',
+  Number: 'Number',
+  Switch: 'Switch',
+  TimePicker: 'TimePicker',
+  DatePicker: 'DatePicker',
+  RangePicker: 'RangePicker',
+  MonthPicker: 'MonthPicker',
+  Select: 'Select',
+  ImageUploader: 'ImageUploader',
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+const WrapperItem = props => {
+  const {
+    form,
+    label,
+    name,
+    type,
+    placeholder,
+    render,
+    rules,
+    value,
+    dict,
+    action,
+    props: fieldProps,
+    hidden = false,
+    help,
+    ...restProps
+  } = props;
+
+  const { getFieldDecorator } = form || {};
+
+  let config = {
+    rules,
+    initialValue: value,
+  }
+
+  if (type === FieldTypes.Switch) {
+    config = {
+      ...config,
+      valuePropName: 'checked',
+    };
+  }
+
+  if (type === FieldTypes.ImageUploader) {
+    config = {
+      ...config,
+      getValueFromEvent: x => x,
+    };
+  }
+
+  // 没有类型与组件, 生成隐藏字段
+  if (!type && !render) {
+    getFieldDecorator(name, config);
+    return null;
+  }
+
+  const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
+
+  let Field = <></>;
+  if (render) {
+    Field = typeof render === 'function' ? render(props) : render
+  } else {
+    switch (type) {
+      case FieldTypes.Text:
+        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Password:
+        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Number:
+        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Switch:
+        Field = <Switch {...fieldProps} />;
+        break;
+      case FieldTypes.TimePicker:
+        Field = <TimePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.DatePicker:
+        Field = <DatePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.RangePicker:
+        Field = <RangePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.MonthPicker:
+        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.Select:
+        Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
+        break;
+      case FieldTypes.ImageUploader:
+        const beforeUpload = { beforeUpload: props.beforeUpload }
+        Field = <ImageUploader {...fieldProps} { ...beforeUpload}/>
+        break;
+      default:
+        throw new Error(`暂时不支持的组件类型: ${type}`)
+    }
+  }
+
+  const visible = typeof hidden === 'function' ? !hidden() : !hidden;
+
+  if (!label && !name && !action && !help) return visible ? Field : null;
+
+  const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
+  const labelNode = typeof label === 'function' ? label() : label;
+  const helpNode = typeof help === 'function' ? help() : help;
+
+  const newItemProps = { ...itemProps, help: helpNode }
+
+  return visible && (
+    <Item label={labelNode} { ...newItemProps }>
+      {action ? Field : getFieldDecorator(name, config)(Field)}
+    </Item>
+  )
+};
+
+export default WrapperItem;
+export { FieldTypes };

src/components/XForm/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Form } from 'antd';
+import WrapperForm from './WrapperForm';
+import { FieldTypes } from './WrapperItem';
+
+const createForm = option => Form.create(option)(WrapperForm);
+
+export default Form.create()(WrapperForm);
+export { FieldTypes, createForm };

src/components/XForm/style.css

@@ -0,0 +1,13 @@
+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.less

@@ -0,0 +1,20 @@
+:global {
+  .avatar-uploader {
+    & > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.wxss

@@ -0,0 +1,13 @@
+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/ZmageImg/ZmageImg.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Zmage from 'react-zmage'
+
+function body(props) {
+  return (
+    <>
+      <Zmage
+        style={props.style}
+        src={props.src}
+        // alt="0"
+        backdrop="linear-gradient(90deg, rgba(86,81,81,0.7) 0%, rgba(86,81,81, 0.7) 100%)"
+        radius={5}
+        edge={20}
+        animate={{
+          flip: 'fade',
+        }}
+        controller={{
+          // 关闭按钮
+          close: false,
+          // 缩放按钮
+          zoom: false,
+          // 下载按钮
+          download: false,
+          // 旋转按钮
+          rotate: false,
+          // 翻页按钮
+          flip: true,
+          // 多页指示
+          pagination: true,
+        }}
+      />
+    </>
+  )
+}
+
+export default body

src/components/uploadImage/ImageUpload.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Upload, Icon, message, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+
+
+class ImageUpload extends React.Component {
+
+  state = {
+    loading: false,
+    previewVisible: false,
+    previewImage: '',
+    fileList: this.getPropsFileList(),
+  };
+
+  componentDidUpdate(prevProps) {
+    // 直接 setState 会死循环
+    if (prevProps.value !== this.props.value) {
+      this.setState({ fileList: this.getPropsFileList() })
+    }
+  }
+
+  getPropsFileList() {
+    return !this.props.value ? [] : [{
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: this.props.value,
+    }]
+  }
+
+
+  handleChange = ({ file, fileList }) => {
+    const { status, response } = file
+    this.setState({ fileList, loading: status === "uploading" })
+
+    if (typeof this.props.onChange === 'function' && status != "uploading") {
+      const image = status === 'done' ? response : undefined
+      this.props.onChange(image);
+    }
+  };
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    console.log(file)
+    this.setState({
+      previewImage: file.url,
+      previewVisible: true,
+    });
+  };
+
+  render() {
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
+      </div>
+    );
+
+    return (
+      <>
+      <Upload
+        {...uploaderProps}
+        listType="picture-card"
+        className="avatar-uploader"
+        onChange={this.handleChange}
+        fileList={this.state.fileList}
+        onPreview={this.handlePreview}
+      >
+        {this.state.fileList.length >= 1 ? null : uploadButton}  
+      </Upload>
+      <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
+      <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
+      </Modal>
+      </>
+    );
+  }
+}
+
+export default ImageUpload;

src/components/uploadImage/style.less

@@ -0,0 +1,8 @@
+:global {
+  .avatar-uploader {
+    & > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}

src/e2e/__mocks__/antd-pro-merge-less.js

@@ -0,0 +1 @@
+export default undefined;

src/e2e/baseLayout.e2e.js

@@ -0,0 +1,39 @@
+const RouterConfig = require('../../config/config').default.routes;
+const { uniq } = require('lodash');
+
+const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
+
+function formatter(routes, parentPath = '') {
+  const fixedParentPath = parentPath.replace(/\/{1,}/g, '/');
+  let result = [];
+  routes.forEach(item => {
+    if (item.path) {
+      result.push(`${fixedParentPath}/${item.path}`.replace(/\/{1,}/g, '/'));
+    }
+    if (item.routes) {
+      result = result.concat(
+        formatter(item.routes, item.path ? `${fixedParentPath}/${item.path}` : parentPath),
+      );
+    }
+  });
+  return uniq(result.filter(item => !!item));
+}
+
+describe('Ant Design Pro E2E test', () => {
+  const testPage = path => async () => {
+    await page.goto(`${BASE_URL}${path}`);
+    await page.waitForSelector('footer', {
+      timeout: 2000,
+    });
+    const haveFooter = await page.evaluate(
+      () => document.getElementsByTagName('footer').length > 0,
+    );
+    expect(haveFooter).toBeTruthy();
+  };
+
+  const routers = formatter(RouterConfig);
+  console.log('routers', routers);
+  routers.forEach(route => {
+    it(`test pages ${route}`, testPage(route));
+  });
+});

src/e2e/topMenu.e2e.js

@@ -0,0 +1,15 @@
+const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
+
+describe('Homepage', () => {
+  it('topmenu should have footer', async () => {
+    const params = '/form/basic-form?navTheme=light&layout=topmenu';
+    await page.goto(`${BASE_URL}${params}`);
+    await page.waitForSelector('footer', {
+      timeout: 2000,
+    });
+    const haveFooter = await page.evaluate(
+      () => document.getElementsByTagName('footer').length > 0,
+    );
+    expect(haveFooter).toBeTruthy();
+  });
+});

src/layouts/BasicLayout.jsx

@@ -0,0 +1,155 @@
+/**
+ * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
+ * You can view component api by:
+ * https://github.com/ant-design/ant-design-pro-layout
+ */
+import ProLayout from '@ant-design/pro-layout';
+import React, { useEffect } from 'react';
+import Link from 'umi/link';
+import Redirect from 'umi/redirect';
+import { connect } from 'dva';
+import { formatMessage } from 'umi-plugin-react/locale';
+// import Authorized from '@/utils/Authorized';
+import RightContent from '@/components/GlobalHeader/RightContent';
+import RenderAuthorize from '@/components/Authorized';
+import { isAntDesignPro } from '@/utils/utils';
+import logo from '../assets/logo.png';
+
+const footerRender = () => {
+  return (<></>
+    // <div
+    //   style={{
+    //     padding: ' 44px 0',
+    //     textAlign: 'center',
+    //     fontSize: '30px',
+    //     fontFamily: 'monospace',
+    //     fontWeight: '200',
+    //     // height:'200px',
+    //     color: 'rgba(102, 102, 102, 1)',
+    //     // position: 'fixed',
+    //     // bottom: '0',
+    //     // right: '0',
+    //     // marginTop: '20px',
+    //     // width:'100%'
+    //   }}
+    // >
+    //   Copy Right @ 南京云致
+    // </div>
+  )
+}
+const menuHeaderRender = (user) => (logo, title) => {
+  if (user && user.orgId) {
+    return (
+      <Link to="/">
+        <img src={user.orgLogo} alt="logo"/>
+        <h1>{user.miniAppName}</h1>
+      </Link>
+    );
+  } else {
+    return (
+      <Link to="/">
+        {logo}
+        {title}
+      </Link>
+    );
+  }
+}
+
+const BasicLayout = props => {
+  const { dispatch, children, settings } = props;
+
+  useEffect(() => {
+    if (dispatch && !props.user.currentUser.userId) {
+      dispatch({
+        type: 'user/fetchCurrent',
+      });
+      dispatch({
+        type: 'settings/getSetting',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const link = document.querySelector("link[rel*='icon']")
+    if (link) {
+      link.setAttribute('rel', 'shortcut icon')
+      link.setAttribute('href', props.user.currentUser.orgLogo)
+    }
+  }, [])
+
+  const Authorized = RenderAuthorize(props.user.currentUser.roles)
+
+  const handleMenuCollapse = payload => {
+    if (dispatch) {
+      dispatch({
+        type: 'global/changeLayoutCollapsed',
+        payload,
+      });
+    }
+  };
+
+  const findAuthority = path => ((props.user.menuList || []).filter(x => x.code === path)[0] || {}).roles
+
+  /**
+   * use Authorized check all menu item
+   */
+  const menuDataRender = menuList =>
+    menuList.map(item => {
+      const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
+      const authority = findAuthority(item.path);
+      // return Authorized.check(item.authority, localItem, null);
+      return Authorized.check(authority, localItem, null);
+    });
+
+  const checkRights = children => {
+    const authority = findAuthority(props.location.pathname);
+    return Authorized.check(authority, children, <Redirect to="/403" />);
+  }
+
+  return (
+    <ProLayout
+      logo={logo}
+      onCollapse={handleMenuCollapse}
+      menuItemRender={(menuItemProps, defaultDom) => {
+        if (menuItemProps.isUrl) {
+          return defaultDom;
+        }
+        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+      }}
+      breadcrumbRender={(routers = []) => [
+        {
+          path: '/',
+          breadcrumbName: formatMessage({
+            id: 'menu.home',
+            defaultMessage: 'Home',
+          }),
+        },
+        ...routers,
+      ]}
+      itemRender={(route, params, routes, paths) => {
+        const first = routes.indexOf(route) === 0;
+        return first ? (
+          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
+        ) : (
+            <span>{route.breadcrumbName}</span>
+          );
+      }}
+      footerRender={footerRender}
+      menuDataRender={menuDataRender}
+      menuHeaderRender={menuHeaderRender(props.user.currentUser)}
+      // formatMessage={formatMessage}
+      rightContentRender={rightProps => <RightContent {...rightProps} />}
+      {...props}
+      {...settings}
+    // pageTitleRender={()=><></>}
+    >
+      {checkRights(children)}
+    </ProLayout>
+  );
+};
+
+export default connect(({ global, settings, user }) => ({
+  collapsed: global.collapsed,
+  settings,
+  user
+}))(BasicLayout);

src/layouts/BlankLayout.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+
+const Layout = ({ children }) => (
+  <PageHeaderWrapper style={{height:'auto',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
+    <div
+      style={{
+        backgroundColor: '#fff',
+        padding: '32PX 28px',
+        boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
+        borderRadius: '12px',
+        minHeight:'60vh'
+      }}
+    >
+      {children}
+    </div>
+  </PageHeaderWrapper>
+);
+
+export default Layout;

src/layouts/SearchList/BodyHeader.jsx

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react'
+import Style from './style.less';
+
+export default class BodyHeader extends PureComponent {
+  render() {
+    return (
+      <div className={Style['body-header']}>
+        <div className={Style['body-header-title']}>
+          {this.props.title}
+        </div>
+        <div className={Style['body-header-action']}>
+          {this.props.actions}
+        </div>
+      </div>
+    )
+  }
+}

src/layouts/SearchList/BodyPagination.jsx

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Pagination } from 'antd'
+
+import Style from './style.less'
+
+export default class BodyPagination extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.object,
+    onChange: PropTypes.func,
+    configs: PropTypes.object,
+  }
+
+  // storage = this.props.storage
+
+  handleChange = (page, pageSize) => {
+    if (this.props.onChange) {
+      this.props.onChange(page, pageSize)
+    }
+  }
+
+  render() {
+    return (
+      <div className={Style['body-paged']}>
+        <Pagination
+          showSizeChanger
+          onChange={this.handleChange}
+          onShowSizeChange={this.handleChange} 
+          {...(this.props.configs || {})}
+        />
+      </div>
+    )
+  }
+}

src/layouts/SearchList/SearchBody.jsx

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import { Table } from 'antd'
+import { isFunction } from './utils'
+
+export default class SearchBody extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.object,
+    dataSource: PropTypes.array,
+    configs: PropTypes.object,
+  }
+
+  // storage = this.props.storage
+
+  render() {
+    const { dataSource, configs } = this.props
+    const { render, ...leftProps } = configs || {}
+
+    if (isFunction(render)) {
+      return render(dataSource)
+    }
+
+    return (
+      <Table pagination={false} dataSource={dataSource} {...leftProps} />
+    )
+  }
+}

src/layouts/SearchList/SearchForm.jsx

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import createForm from '@zjxpcyc/xrc-form2'
+import { Button } from 'antd'
+
+const XForm = createForm()
+
+function clearProperties (o) {
+  return Object.keys(o).reduce((acc, k) => {
+    return {
+      ...acc,
+      [`${k}`]: undefined,
+    }
+  }, {})
+}
+
+export default class SearchForm extends PureComponent {
+  static propTypes = {
+    storage: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+    configs: PropTypes.object,
+  }
+
+  wrapperForm = null
+  storage = this.props.storage || {}
+
+  componentDidMount() {
+    const conditions = this.storage.get('conditions')
+
+    if (this.wrapperForm && conditions) {
+      this.wrapperForm.props.form.setFieldsValue(conditions)
+    }
+  }
+
+  handleCancel = () => {
+    const conditions = this.storage.get('conditions') || {}
+    this.storage.set('conditions', {})
+
+    if (this.wrapperForm) {
+      this.wrapperForm.props.form.setFieldsValue(clearProperties(conditions))
+    }
+
+    if (this.props.onCancel) {
+      this.props.onCancel()
+    }
+  }
+
+  wrapperFields = (fields) => {
+    return [
+      ...fields,
+      {
+        action: true,
+        render: (props) => (<Button htmlType="submit" type="primary">搜索</Button>)
+      },
+      {
+        action: true,
+        render: (props) => (<Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '16px' }}>重置</Button>)
+      },
+    ]
+  }
+
+  render() {
+    const { fields, ...leftProps } = this.props.configs || {}
+
+    return (
+      <XForm
+        submitBtn={false}
+        cancelBtn={false}
+        layout="inline"
+        fields={this.wrapperFields(fields)}
+        onSubmit={this.props.onSubmit}
+        wrappedComponentRef={f => this.wrapperForm = f}
+        {...leftProps}
+      />
+    )
+  }
+}
+

src/layouts/SearchList/index.jsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Spin, notification } from 'antd'
+
+import SearchForm from './SearchForm'
+import SearchBody from './SearchBody'
+import BodyHeader from './BodyHeader'
+import BodyPagination from './BodyPagination'
+import { getStorageBuilder } from './utils'
+import Style from './style.less'
+
+class SearchList extends React.PureComponent {
+  static propTypes = {
+    storage: PropTypes.object,
+    title: PropTypes.any,
+    actions: PropTypes.any,
+    search: PropTypes.object,
+    body: PropTypes.object,
+    pagination: PropTypes.object,
+    service: PropTypes.func,
+    ejectRetrieve: PropTypes.func,
+  }
+
+  state = {
+    defaultStorage: this.props.storage || getStorageBuilder('PAGE-SearchList'),
+    dataSource: [],
+    conditions: this.getStorage().get('conditions') || {},
+    loadding: false,
+    pageConfig: {
+      ...(this.getStorage().get('pagination') || { current: 1, pageSize: 10 }),
+      total: 0,
+    },
+  }
+
+  componentDidMount () {
+    if (this.props.ejectRetrieve) {
+      this.props.ejectRetrieve(this.queryData)
+    }
+  }
+  
+  getStorage() {
+    return this.props.storage || this.state.defaultStorage
+  }
+
+  handlePageChange = (current, pageSize) => {
+    this.getStorage().set('pagination', { current, pageSize: 10 })
+
+    this.setState(
+      (state) => ({
+        ...state,
+        pageConfig: {
+          ...state.pageConfig,
+          current,
+          pageSize,
+        }
+      }),
+      this.queryData,
+    )
+  }
+
+  repondToSearch = (conditions) => {
+    // 查询提交会重置页码
+    const { pageConfig } = this.state
+    const newPageConfig = { ...pageConfig, current: 1, total: 0 }
+
+    this.getStorage().set('conditions', conditions)
+    this.getStorage().set('pagination', newPageConfig)
+
+    this.setState(
+      (state) => ({
+        ...state,
+        conditions,
+        pageConfig: newPageConfig,
+      }),
+      this.queryData,
+    )
+  }
+
+  handleSearchSubmit = (conditions) => {
+    console.log('------conditions-------->?', conditions)
+    this.repondToSearch(conditions)
+  }
+
+  handleSearchCancel = () => {
+    this.repondToSearch({})
+  }
+
+  queryData = () => {
+    if (this.props.service) {
+      const pageConfigProps = this.props.pagination || {}
+      const keyOfPageNumber = pageConfigProps.keyOfPageNumber || 'pageNumber'
+      const keyOfPageSize= pageConfigProps.keyOfPageSize || 'pageSize'
+      const keyOfTotalSize= pageConfigProps.keyOfTotalSize || 'total'
+
+      const { conditions = {}, pageConfig } = this.state
+
+      this.setState({ loadding: true })
+
+      this.props.service({
+        ...conditions,
+        ...{
+          [`${keyOfPageNumber}`]: pageConfig.current,
+          [`${keyOfPageSize}`]: pageConfig.pageSize,
+        },
+      }).then((res) => {
+        const [dataSource, pageParams = {}] = res || []
+
+        this.setState((state) => ({
+          ...state,
+          loadding: false,
+          dataSource,
+          pageConfig: {
+            ...state.pageConfig,
+            total: pageParams[keyOfTotalSize],
+          },
+        }))
+      }).catch((e) => {
+        this.setState({ loadding: false })
+        console.error(e)
+      })
+    }
+  }
+
+  render() {
+    const {
+      keyOfPageNumber,
+      keyOfPageSize,
+      keyOfTotalSize,
+      ...leftPageParams
+    } = this.props.pagination || {}
+
+    const pageConfig = {
+      ...leftPageParams,
+      ...this.state.pageConfig,
+    }
+
+    const storage = this.getStorage()
+
+    return (
+      <div className={Style['search-list']}>
+        <div className={Style['head']}>
+          <SearchForm storage={storage} onSubmit={this.handleSearchSubmit} onCancel={this.handleSearchCancel} configs={this.props.search} />
+        </div>
+        <div className={Style['body']}>
+          <BodyHeader storage={storage} title={this.props.title} actions={this.props.actions} />
+          <Spin spinning={this.state.loadding}>
+            <SearchBody storage={storage} dataSource={this.state.dataSource} configs={this.props.body} />
+          </Spin>
+          <BodyPagination storage={storage} onChange={this.handlePageChange} configs={pageConfig} />
+        </div>
+      </div>
+    )
+  }
+}
+
+function withSearchList (configs = {}) {
+  const cacheKey = `PAGE-${configs.name || 'SearchList'}`
+  const storage = getStorageBuilder(cacheKey)
+
+  return React.forwardRef((props, ref) => {
+    return <SearchList storage={storage} {...props} ref={ref} />
+  })
+}
+
+export default SearchList;
+export { withSearchList }

src/layouts/SearchList/style.less

@@ -0,0 +1,46 @@
+
+.search-list {
+  .head {
+    margin-bottom: 24px;
+    padding: 16px;
+    overflow: hidden;
+    background: #fff;
+  }
+
+  .body {
+    &::after {
+      content: '';
+      clear: both;
+      display: block;
+    }
+
+    .body-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 64px;
+      padding: 0 24px;
+      line-height: 64px;
+
+      .body-header-title {
+        flex: 1 1;
+        color: #000;
+        font-size: 16px;
+        line-height: 24px;
+      }
+
+      .body-header-action {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+    }
+
+    .body-paged {
+      padding: 0 24px;
+      float: right;
+      margin: 16px 0;
+    }
+  }
+}

src/layouts/SearchList/utils.js

@@ -0,0 +1,36 @@
+
+export function isFunction(fn) {
+  return typeof fn === 'function'
+}
+
+export function setStorage(k, v) {
+  if (typeof v !== 'object') return
+
+  window.localStorage.setItem(k, window.JSON.stringify(v))
+}
+
+export function getStorage(k) {
+  const str = window.localStorage.getItem(k);
+  if (!str) return;
+
+  return window.JSON.parse(str);
+}
+
+export function getStorageBuilder(key, initData) {
+  if (initData) {
+    setStorage(key, initData)  
+  }
+
+  return {
+    set: (k, v) => {
+      const data = getStorage(key) || {}
+
+      setStorage(key, { ...data, [`${k}`]: v })
+    },
+
+    get: (k) => {
+      const data = getStorage(key) || {}
+      return data[k]
+    }
+  }
+}

src/layouts/SecurityLayout.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Redirect } from 'umi';
+import PageLoading from '@/components/PageLoading';
+import Swiper from '../pages/swiper/index';
+
+class SecurityLayout extends React.Component {
+  state = {
+    isReady: false,
+  };
+
+  componentDidMount() {
+    this.setState({
+      isReady: true,
+    });
+    const { dispatch } = this.props;
+
+    if (dispatch) {
+      dispatch({
+        type: 'user/fetchCurrent',
+      });
+    }
+  }
+
+  render() {
+    const { isReady } = this.state;
+    const { children, loading, currentUser } = this.props;
+
+    if ((!currentUser.userId && loading) || !isReady) {
+      return <PageLoading />;
+    }
+
+    if (!currentUser.userId) {
+      return <Redirect to="/user/login"></Redirect>;
+    }
+    console.log(window.location, "window.locationwindow.locationwindow.location")
+    return <>
+      {children}
+      {window.location.hash == "#/index" && <Swiper />}
+    </>;
+  }
+}
+
+export default connect(({ user, loading }) => ({
+  currentUser: user.currentUser,
+  loading: loading.models.user,
+}))(SecurityLayout);

src/layouts/UserLayout.jsx

@@ -0,0 +1,42 @@
+import { DefaultFooter, getMenuData, getPageTitle } from '@ant-design/pro-layout';
+import DocumentTitle from 'react-document-title';
+import Link from 'umi/link';
+import React from 'react';
+import { connect } from 'dva';
+import { formatMessage } from 'umi-plugin-react/locale';
+import logo from '../assets/logo.svg';
+import styles from './UserLayout.less';
+
+const UserLayout = props => {
+  const {
+    route = {
+      routes: [],
+    },
+  } = props;
+  const { routes = [] } = route;
+  const {
+    children,
+    location = {
+      pathname: '',
+    },
+  } = props;
+  const { breadcrumb } = getMenuData(routes);
+  return (
+    <DocumentTitle
+      title={getPageTitle({
+        pathname: location.pathname,
+        breadcrumb,
+        formatMessage,
+        ...props,
+      })}
+    >
+      <div className={styles.container}>
+        <div className={styles.content}>
+          {children}
+        </div>
+      </div>
+    </DocumentTitle>
+  );
+};
+
+export default connect(({ settings }) => ({ ...settings }))(UserLayout);

src/layouts/UserLayout.less

@@ -0,0 +1,64 @@
+@import '~antd/es/style/themes/default.less';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: @layout-body-background;
+}
+
+.lang {
+  width: 100%;
+  height: 40px;
+  line-height: 44px;
+  text-align: right;
+  :global(.ant-dropdown-trigger) {
+    margin-right: 24px;
+  }
+}
+
+.content {
+  flex: 1;
+}
+
+@media (min-width: @screen-md-min) {
+  .container {
+    background-color: #fff;
+  }
+
+}
+
+.top {
+  text-align: center;
+}
+
+.header {
+  height: 44px;
+  line-height: 44px;
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  height: 44px;
+  margin-right: 16px;
+  vertical-align: top;
+}
+
+.title {
+  position: relative;
+  top: 2px;
+  color: @heading-color;
+  font-weight: 600;
+  font-size: 33px;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.desc {
+  margin-top: 12px;
+  margin-bottom: 40px;
+  color: @text-color-secondary;
+  font-size: @font-size-base;
+}

src/locales/en-US.js

@@ -0,0 +1,21 @@
+import component from './en-US/component';
+import globalHeader from './en-US/globalHeader';
+import menu from './en-US/menu';
+import pwa from './en-US/pwa';
+import settingDrawer from './en-US/settingDrawer';
+import settings from './en-US/settings';
+export default {
+  'navBar.lang': 'Languages',
+  'layout.user.link.help': 'Help',
+  'layout.user.link.privacy': 'Privacy',
+  'layout.user.link.terms': 'Terms',
+  'app.preview.down.block': 'Download this page to your local project',
+  'app.welcome.link.fetch-blocks': 'Get all block',
+  'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development',
+  ...globalHeader,
+  ...menu,
+  ...settingDrawer,
+  ...settings,
+  ...pwa,
+  ...component,
+};

src/locales/pt-BR.js

@@ -0,0 +1,19 @@
+import component from './pt-BR/component';
+import globalHeader from './pt-BR/globalHeader';
+import menu from './pt-BR/menu';
+import pwa from './pt-BR/pwa';
+import settingDrawer from './pt-BR/settingDrawer';
+import settings from './pt-BR/settings';
+export default {
+  'navBar.lang': 'Idiomas',
+  'layout.user.link.help': 'ajuda',
+  'layout.user.link.privacy': 'política de privacidade',
+  'layout.user.link.terms': 'termos de serviços',
+  'app.preview.down.block': 'Download this page to your local project',
+  ...globalHeader,
+  ...menu,
+  ...settingDrawer,
+  ...settings,
+  ...pwa,
+  ...component,
+};

src/locales/zh-CN.js

@@ -0,0 +1,21 @@
+import component from './zh-CN/component';
+import globalHeader from './zh-CN/globalHeader';
+import menu from './zh-CN/menu';
+import pwa from './zh-CN/pwa';
+import settingDrawer from './zh-CN/settingDrawer';
+import settings from './zh-CN/settings';
+export default {
+  'navBar.lang': '语言',
+  'layout.user.link.help': '帮助',
+  'layout.user.link.privacy': '隐私',
+  'layout.user.link.terms': '条款',
+  'app.preview.down.block': '下载此页面到本地项目',
+  'app.welcome.link.fetch-blocks': '获取全部区块',
+  'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面',
+  ...globalHeader,
+  ...menu,
+  ...settingDrawer,
+  ...settings,
+  ...pwa,
+  ...component,
+};

src/locales/zh-TW.js

@@ -0,0 +1,19 @@
+import component from './zh-TW/component';
+import globalHeader from './zh-TW/globalHeader';
+import menu from './zh-TW/menu';
+import pwa from './zh-TW/pwa';
+import settingDrawer from './zh-TW/settingDrawer';
+import settings from './zh-TW/settings';
+export default {
+  'navBar.lang': '語言',
+  'layout.user.link.help': '幫助',
+  'layout.user.link.privacy': '隱私',
+  'layout.user.link.terms': '條款',
+  'app.preview.down.block': '下載此頁面到本地項目',
+  ...globalHeader,
+  ...menu,
+  ...settingDrawer,
+  ...settings,
+  ...pwa,
+  ...component,
+};