manage

estateagents-admin-manager/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;

estateagents-admin-manager/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;
+    }
+  }
+}

estateagents-admin-manager/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);
+  },
+};

estateagents-admin-manager/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
+

estateagents-admin-manager/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

estateagents-admin-manager/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;

estateagents-admin-manager/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;

estateagents-admin-manager/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      绑定的数据
+

estateagents-admin-manager/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;

estateagents-admin-manager/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 };

estateagents-admin-manager/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 };

estateagents-admin-manager/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;
+}

estateagents-admin-manager/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;
+}

estateagents-admin-manager/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;
+}

estateagents-admin-manager/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

estateagents-admin-manager/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;

estateagents-admin-manager/src/components/uploadImage/style.less

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

estateagents-admin-manager/src/e2e/__mocks__/antd-pro-merge-less.js

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

estateagents-admin-manager/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));
+  });
+});

estateagents-admin-manager/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();
+  });
+});

estateagents-admin-manager/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);

estateagents-admin-manager/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;

estateagents-admin-manager/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>
+    )
+  }
+}

estateagents-admin-manager/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);

estateagents-admin-manager/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);

estateagents-admin-manager/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;
+}