1

src/components/AMap/AMapSearch.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Map, Marker } from 'react-amap'
+import debounce from 'lodash.debounce'
+import styles from './style.less'
+
+const getPosFromProps = props => {
+  if (props.value) {
+    const temp = props.value.split(',')
+    return { longitude: temp[0], latitude: temp[1] }
+  } else {
+    return null
+  }
+}
+
+class AMapSearch extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      markerPosition: getPosFromProps(props),
+    }
+
+    // 高德地图 Marker 实例
+    this.markerInstance = undefined
+    // 高德地图 Map 实例
+    this.mapInstance = undefined
+
+    this.amapEvents = {
+      created: mapInstance => {
+        this.mapInstance = mapInstance
+        
+        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
+          // 实例化Autocomplete
+          const autoOptions = { input: 'amapInput' }
+          const autoComplete = new AMap.Autocomplete(autoOptions)
+          const placeSearch = new AMap.PlaceSearch({ map: mapInstance })
+
+          // 监听下拉框选中事件
+          AMap.event.addListener(autoComplete, 'select', e => {
+            // TODO 针对选中的poi实现自己的功能
+            placeSearch.setCity(e.poi.adcode)
+            placeSearch.search(e.poi.name)
+          })
+
+          const citySearch = new AMap.CitySearch()
+          citySearch.getLocalCity((status, result) => {
+            if (status === 'complete' && result.info === 'OK') {
+              // 查询成功，result即为当前所在城市信息
+              console.log('当前所在城市：', result)
+              if (result && result.city && result.bounds) {
+                // 当前城市位置信息
+                const citybounds = result.bounds;
+                // 地图显示当前城市
+                mapInstance.setBounds(citybounds);
+                // 需要在设置坐标成功后，重新设置 缩放级别
+                // mapInstance.setZoom(15)
+              }
+            }
+          })
+
+          // 搜索结果点击
+          placeSearch.on('markerClick', debounce(e => {
+            const { location: loc } = e.data
+            const lngLat = `${loc.lng},${loc.lat}`
+            this.props.onChange(lngLat, e)
+          }, 300, { leading: true }))
+        })
+
+        // 实例点击事件
+        mapInstance.on('click', debounce(e => {
+          const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
+          this.props.onChange(lngLat, e)
+        }, 300, { leading: true }));
+      },
+    };
+    
+    this.markerEvents = {
+      created: markerInstance => {
+        this.markerInstance = markerInstance
+        console.log('--->',markerInstance)
+      }
+    }
+    // this.markerPosition = { longitude: 120, latitude: 30 };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.value && !state.markerPosition) {
+      return { markerPosition: getPosFromProps(props) }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      if (this.props.value) {
+        this.setState({ markerPosition: getPosFromProps(this.props) }, () => {
+          if (this.mapInstance) {
+            // 需要在设置坐标成功后，重新设置 缩放级别
+            // this.mapInstance.setZoom(15)
+          }
+        })
+      }
+    }
+  }
+
+  render() {
+    return (
+      <>
+        <div style={{ width: '100%', height: '100%', minHeight: '400px', position: 'relative' }}>
+          {/* zoom={15} 设置后，无效，不知道什么原因，必须手动设置 */}
+          <Map plugins={['ToolBar']} events={this.amapEvents} amapkey={this.props.amapkey} center={this.state.markerPosition}>
+            <Marker position={this.state.markerPosition} events={this.markerEvents} clickable />
+          </Map>
+          {
+          <div className={styles.infoBox}>
+            <span className={styles.inputText}>请输入关键字</span>
+            <input id="amapInput" className={styles.input} type="text" />
+          </div>
+          }
+        </div>
+      </>
+    )
+  }
+}
+
+export default AMapSearch

src/components/AMap/index.js

@@ -0,0 +1,7 @@
+import AMapSearch from './AMapSearch'
+import { regeo as getRegeo } from './utils'
+
+export {
+  AMapSearch,
+  getRegeo
+}

src/components/AMap/style.less

@@ -0,0 +1,53 @@
+
+.infoBox {
+  padding: 10px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-color: white;
+  width: 290px;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  z-index: 100;
+  .inputText{
+    margin-right: 10px;
+  }
+  .input{
+    width: 150px;
+    height: 32px;
+    font-size: 16px;
+  }
+ 
+}
+
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}

src/components/AMap/utils.js

@@ -0,0 +1,26 @@
+import { fetch, apis } from '@/utils/request'
+
+export function regeo(key, params) {
+  return new Promise((resolve, reject) => {
+    fetch(apis.amap.regeo)({
+      params: {
+        key,
+        output: 'json',
+        extensions: 'base',
+        batch: 'false',
+        roadlevel: 0,
+        ...params,
+      }
+    }).then(res => {
+      if (res.status === '1' && res.infocode === '10000') {
+        resolve(res.regeocode)
+      } else {
+        console.error(res)
+        resolve(res.info)
+      }
+    }).catch(err => {
+      console.error(err)
+      resolve(err.message)
+    })
+  })
+}

src/components/ActionList/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu, Dropdown, Icon } from 'antd';
+
+import './style.less';
+
+export default function withActions(actionsRender) {
+  return function ActionList(text, record) {
+    const actions = actionsRender(text, record);
+    const [Act1, Act2, ...leftActs] = (actions || []).filter(Boolean);
+    const showMore = leftActs && leftActs.length > 0;
+
+    const menus = (
+      <Menu className="actlist-menu">
+        {[Act2].concat(leftActs).filter(Boolean).map((Act, index) => (<Menu.Item key={`dm-${index}`}>{Act}</Menu.Item>))}
+      </Menu>
+    );
+    console.log('---------->', record, menus)
+
+    return (
+      <div className="action-list">
+        {
+          Act1 && <span>{Act1}</span>
+        }
+        {
+          !showMore && Act2 && <span>{Act2}</span>
+        }
+        {
+          showMore ?
+          (
+            <span>
+              <Dropdown overlay={menus} trigger={['click']}>
+                <a onClick={e => e.preventDefault()}>
+                  <span>更多</span> <Icon type="down" />
+                </a>
+              </Dropdown>
+            </span>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

src/components/ActionList/style.less

@@ -0,0 +1,29 @@
+
+:global{
+  .action-list {  
+    span {
+      display: inline-block;
+      & + span {
+        margin-left: 16px;
+      }
+  
+      a {
+        color: #666;
+  
+        span {
+          color: #FF4A4A;
+        }
+      }
+    }
+  }
+  
+  .actlist-menu {
+    .ant-dropdown-menu-item {
+      color: #666 !important;
+
+      &:hover {
+        background-color: rgba(0,0,0, .1);
+      }
+    }
+  }
+}

src/components/AuthButton/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+let allBtns = [];
+let current = [];
+
+const AuthButton = ({ children, name, noRight }) => {
+  const btn = allBtns.filter(x => x.code === name)[0]
+
+  // 没维护的按钮, 或者不需要权限的按钮直接通过
+  // if (!btn || !btn.roles || !btn.roles.length) {
+  //   return <>{children}</>
+  // }
+
+  // const hasRight = btn.roles.some(x => current.some(y => x === y))
+
+  if (!btn) {
+    return <>{children}</>
+  }
+
+  const hasRight = current.filter(x => x.code === name)[0]
+  
+  return hasRight ? <>{children}</> : <>{noRight}</>
+}
+
+const setAllBtnAuth = x => allBtns = x;
+const setUserBtnAuth = x => current = x;
+
+export default AuthButton;
+export {
+  setAllBtnAuth,
+  setUserBtnAuth,
+};

src/components/Authorized/Authorized.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import check from './CheckPermissions';
+
+const Authorized = ({ children, authority, noMatch = null }) => {
+  const childrenRender = typeof children === 'undefined' ? null : children;
+  const dom = check(authority, childrenRender, noMatch);
+  return <>{dom}</>;
+};
+
+export default Authorized;

src/components/Authorized/AuthorizedRoute.jsx

@@ -0,0 +1,25 @@
+import { Redirect, Route } from 'umi';
+import React from 'react';
+import Authorized from './Authorized';
+
+const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => (
+  <Authorized
+    authority={authority}
+    noMatch={
+      <Route
+        {...rest}
+        render={() => (
+          <Redirect
+            to={{
+              pathname: redirectPath,
+            }}
+          />
+        )}
+      />
+    }
+  >
+    <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
+  </Authorized>
+);
+
+export default AuthorizedRoute;

src/components/Authorized/CheckPermissions.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { CURRENT } from './renderAuthorize'; // eslint-disable-next-line import/no-cycle
+
+import PromiseRender from './PromiseRender';
+
+/**
+ * 通用权限检查方法
+ * Common check permissions method
+ * @param { 权限判定 | Permission judgment } authority
+ * @param { 你的权限 | Your permission description } currentAuthority
+ * @param { 通过的组件 | Passing components } target
+ * @param { 未通过的组件 | no pass components } Exception
+ */
+const checkPermissions = (authority, currentAuthority, target, Exception) => {
+  // 没有判定权限.默认查看所有
+  // Retirement authority, return target;
+  if (!authority) {
+    return target;
+  } // 数组处理
+
+  if (Array.isArray(authority)) {
+    if (Array.isArray(currentAuthority)) {
+      if (currentAuthority.some(item => authority.includes(item))) {
+        return target;
+      }
+    } else if (authority.includes(currentAuthority)) {
+      return target;
+    }
+
+    return Exception;
+  } // string 处理
+
+  if (typeof authority === 'string') {
+    if (Array.isArray(currentAuthority)) {
+      if (currentAuthority.some(item => authority === item)) {
+        return target;
+      }
+    } else if (authority === currentAuthority) {
+      return target;
+    }
+
+    return Exception;
+  } // Promise 处理
+
+  if (authority instanceof Promise) {
+    return <PromiseRender ok={target} error={Exception} promise={authority} />;
+  } // Function 处理
+
+  if (typeof authority === 'function') {
+    try {
+      const bool = authority(currentAuthority); // 函数执行后返回值是 Promise
+
+      if (bool instanceof Promise) {
+        return <PromiseRender ok={target} error={Exception} promise={bool} />;
+      }
+
+      if (bool) {
+        return target;
+      }
+
+      return Exception;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  throw new Error('unsupported parameters');
+};
+
+export { checkPermissions };
+
+function check(authority, target, Exception) {
+  return checkPermissions(authority, CURRENT, target, Exception);
+}
+
+export default check;

src/components/Authorized/PromiseRender.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Spin } from 'antd';
+import isEqual from 'lodash/isEqual';
+import { isComponentClass } from './Secured'; // eslint-disable-next-line import/no-cycle
+
+export default class PromiseRender extends React.Component {
+  state = {
+    component: () => null,
+  };
+
+  componentDidMount() {
+    this.setRenderComponent(this.props);
+  }
+
+  shouldComponentUpdate = (nextProps, nextState) => {
+    const { component } = this.state;
+
+    if (!isEqual(nextProps, this.props)) {
+      this.setRenderComponent(nextProps);
+    }
+
+    if (nextState.component !== component) return true;
+    return false;
+  }; // set render Component : ok or error
+
+  setRenderComponent(props) {
+    const ok = this.checkIsInstantiation(props.ok);
+    const error = this.checkIsInstantiation(props.error);
+    props.promise
+      .then(() => {
+        this.setState({
+          component: ok,
+        });
+        return true;
+      })
+      .catch(() => {
+        this.setState({
+          component: error,
+        });
+      });
+  } // Determine whether the incoming component has been instantiated
+  // AuthorizedRoute is already instantiated
+  // Authorized  render is already instantiated, children is no instantiated
+  // Secured is not instantiated
+
+  checkIsInstantiation = target => {
+    if (isComponentClass(target)) {
+      const Target = target;
+      return props => <Target {...props} />;
+    }
+
+    if (React.isValidElement(target)) {
+      return props => React.cloneElement(target, props);
+    }
+
+    return () => target;
+  };
+
+  render() {
+    const { component: Component } = this.state;
+    const { ok, error, promise, ...rest } = this.props;
+    return Component ? (
+      <Component {...rest} />
+    ) : (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          margin: 'auto',
+          paddingTop: 50,
+          textAlign: 'center',
+        }}
+      >
+        <Spin size="large" />
+      </div>
+    );
+  }
+}

src/components/Authorized/Secured.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import CheckPermissions from './CheckPermissions';
+/**
+ * 默认不能访问任何页面
+ * default is "NULL"
+ */
+
+const Exception403 = () => 403;
+
+export const isComponentClass = component => {
+  if (!component) return false;
+  const proto = Object.getPrototypeOf(component);
+  if (proto === React.Component || proto === Function.prototype) return true;
+  return isComponentClass(proto);
+}; // Determine whether the incoming component has been instantiated
+// AuthorizedRoute is already instantiated
+// Authorized  render is already instantiated, children is no instantiated
+// Secured is not instantiated
+
+const checkIsInstantiation = target => {
+  if (isComponentClass(target)) {
+    const Target = target;
+    return props => <Target {...props} />;
+  }
+
+  if (React.isValidElement(target)) {
+    return props => React.cloneElement(target, props);
+  }
+
+  return () => target;
+};
+/**
+ * 用于判断是否拥有权限访问此 view 权限
+ * authority 支持传入 string, () => boolean | Promise
+ * e.g. 'user' 只有 user 用户能访问
+ * e.g. 'user,admin' user 和 admin 都能访问
+ * e.g. ()=>boolean 返回true能访问,返回false不能访问
+ * e.g. Promise  then 能访问   catch不能访问
+ * e.g. authority support incoming string, () => boolean | Promise
+ * e.g. 'user' only user user can access
+ * e.g. 'user, admin' user and admin can access
+ * e.g. () => boolean true to be able to visit, return false can not be accessed
+ * e.g. Promise then can not access the visit to catch
+ * @param {string | function | Promise} authority
+ * @param {ReactNode} error 非必需参数
+ */
+
+const authorize = (authority, error) => {
+  /**
+   * conversion into a class
+   * 防止传入字符串时找不到staticContext造成报错
+   * String parameters can cause staticContext not found error
+   */
+  let classError = false;
+
+  if (error) {
+    classError = () => error;
+  }
+
+  if (!authority) {
+    throw new Error('authority is required');
+  }
+
+  return function decideAuthority(target) {
+    const component = CheckPermissions(authority, target, classError || Exception403);
+    return checkIsInstantiation(component);
+  };
+};
+
+export default authorize;

src/components/Authorized/index.jsx

@@ -0,0 +1,10 @@
+import Authorized from './Authorized';
+import AuthorizedRoute from './AuthorizedRoute';
+import Secured from './Secured';
+import check from './CheckPermissions';
+import renderAuthorize from './renderAuthorize';
+Authorized.Secured = Secured;
+Authorized.AuthorizedRoute = AuthorizedRoute;
+Authorized.check = check;
+const RenderAuthorize = renderAuthorize(Authorized);
+export default RenderAuthorize;

src/components/Authorized/renderAuthorize.js

@@ -0,0 +1,30 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+
+/* eslint-disable import/no-mutable-exports */
+let CURRENT = 'NULL';
+
+/**
+ * use  authority or getAuthority
+ * @param {string|()=>String} currentAuthority
+ */
+const renderAuthorize = Authorized => currentAuthority => {
+  if (currentAuthority) {
+    if (typeof currentAuthority === 'function') {
+      CURRENT = currentAuthority();
+    }
+
+    if (
+      Object.prototype.toString.call(currentAuthority) === '[object String]' ||
+      Array.isArray(currentAuthority)
+    ) {
+      CURRENT = currentAuthority;
+    }
+  } else {
+    CURRENT = 'NULL';
+  }
+
+  return Authorized;
+};
+
+export { CURRENT };
+export default Authorized => renderAuthorize(Authorized);

src/components/Cards/PosterCard.jsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Checkbox, Button, Upload } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+import { uploaderProps } from '../../utils/upload';
+import head1 from '../../assets/head1.png';
+import head2 from '../../assets/head2.png';
+import head3 from '../../assets/head3.png';
+import link from '../../assets/link.png';
+
+const { Meta } = Card;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const PosterCard = (props) => {
+  const [data, setData] = useState([])
+  const [indexOneUrl, setIndexOneUrl] = useState('')
+  const [indexTwoUrl, setIndexTwoUrl] = useState('')
+  const [indexThreeUrl, setIndexThreeUrl] = useState('')
+  let resultData = []
+
+  useEffect(() => {
+  }, [])
+
+  const handleUploadIndexOneSucess = url => {
+    console.log(url, "第一张图上传回调");
+    setIndexOneUrl(url)
+    resultData[0] = url
+    resultData[1] = indexTwoUrl
+    resultData[2] = indexThreeUrl
+    props.onChange(resultData)
+  }
+
+  const handleUploadIndexTwoSucess = url => {
+    console.log(url, "第二张图上传回调");
+    setIndexTwoUrl(url)
+    resultData[0] = indexOneUrl
+    resultData[1] = url
+    resultData[2] = indexThreeUrl
+    props.onChange(resultData)
+  }
+
+  const handleUploadIndexThreeSucess = url => {
+    console.log(url, "第三张图上传回调");
+    setIndexThreeUrl(url)
+    resultData[0] = indexOneUrl
+    resultData[1] = indexTwoUrl
+    resultData[2] = url
+    props.onChange(resultData)
+  }
+
+  return (
+
+    <div style={{ display: 'flex' }}>
+
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexOneUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '38px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '79px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '58px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '39px', color: '#666' }}>邀请您参与活动</p>
+          <img src={link} style={{ margin: '0', width: '80px', height: '80px', backgroundColor: '#fff', padding: '4px', borderRadius: '6px', position: 'absolute', right: '30px', bottom: '45px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '13px', position: 'absolute', right: '30px', bottom: '20px', color: '#666' }}>长按识别更多</p>
+
+        </div>
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexOneSucess}>
+            <Button>
+              上传图片
+          </Button>
+          </Upload>
+        </p>
+      </div>
+
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexTwoUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '122px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '163px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '142px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '121px', color: '#666' }}>邀请您参与活动</p>
+          <div style={{ margin: '0', width: '100%', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '0px', bottom: '0.5px', }}>
+            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '58px', color: '#666' }}>长按识别小程序码</p>
+            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '31px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>致云</span>查看详情</p>
+            <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '20px', bottom: '6px' }} alt="" />
+          </div>
+        </div>
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexTwoSucess}>
+            <Button>
+              上传图片
+          </Button>
+          </Upload></p>
+      </div>
+
+      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '100%' }} src={indexThreeUrl} alt="" />
+          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '142px' }} alt="" />
+          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '183px', color: '#333' }}>小五子</p>
+          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '162px', color: '#333' }}>175 1256 0225</p>
+          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '141px', color: '#666' }}>邀请您参与活动</p>
+          <div style={{ margin: '0', width: '335px', borderRadius: '6px', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '20px', bottom: '20px', }}></div>
+          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '78px', color: '#666' }}>长按识别小程序码</p>
+          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '51px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>致云</span>查看详情</p>
+          <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '50px', bottom: '26px' }} alt="" />
+        </div>
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
+        <p style={{ textAlign: 'center' }}>
+          <Upload showUploadList={false}
+            {...uploaderProps}
+            onSuccess={handleUploadIndexThreeSucess}>
+            <Button>
+              上传图片
+          </Button>
+          </Upload>
+        </p>
+      </div>
+    </div>
+  )
+}
+export default PosterCard
+

src/components/CommEditor/index.jsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react'
+import { PageHeader, Form, Button, Spin, Modal, notification } from 'antd'
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 4 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+  },
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 6,
+    },
+  },
+}
+
+export default Form.create({})(props => {
+  const [title, updateTitle] = useState('详情' || props.title)
+  const [loading, updateLoading] = useState(false)
+  const [pageData, updatePageData] = useState(null)
+
+  const id = props.dataId
+  const { getFieldDecorator, setFieldsValue, validateFields, resetFields } = props.form
+
+  const handleCancel = () => {
+    if (props.onCancel) {
+      props.onCancel()
+    }
+  }
+
+  const { fetchAPI, saveAPI, updateAPI } = props
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (!err) {
+        updateLoading(true)
+        if (!id && !props.record) {
+          saveAPI({data: values}).then(res => {
+            updateLoading(false)
+            // 保存成功之后直接跳转到详情
+            Modal.success({
+              content: '保存信息成功',
+              onOk: () => {
+                if (props.onSuccess) {
+                  props.onSuccess(res)
+                }
+              }
+            })
+          }).catch(err => {
+            updateLoading(false)
+            if (props.onError) {
+              props.onError(err)
+            }
+          })
+        } else {
+          const pKey = id || props.dateKey(props.record)
+
+          const data = props.record ? { ...props.record, ...values } : values
+          updateAPI({ data, urlData: { id: pKey } }).then(res => {
+            updateLoading(false)
+            updatePageData(res)
+            notification.success({ message: '更新信息成功' })
+            if (props.onSuccess) {
+              props.onSuccess(res)
+            }
+          }).catch(err => {
+            updateLoading(false)
+            if (props.onError) {
+              props.onError(err)
+            }
+          })
+        }
+      }
+    });
+  }
+
+  useEffect(() => {
+    if (props.mode !== 'inner') {
+      if (!pageData) {
+        resetFields()
+      } else {
+        setFieldsValue(pageData)
+      }
+    }
+  }, [props.mode, pageData])
+
+  useEffect(() => {
+    if (props.mode === 'inner') {
+      if (!props.record) {
+        resetFields()
+      } else {
+        setFieldsValue(props.record)
+      }
+      updatePageData(props.record)
+    }
+  }, [props.mode, props.record])
+
+  useEffect(() => {
+    if (props.mode !== 'inner' && id) {
+      updateLoading(true)
+      fetchAPI({ urlData: {id} }).then((res) => {
+        updatePageData(res)
+        updateLoading(false)
+        if (!res) {
+          notification.info({ message: '没有查询到数据' })
+        } else {
+          if (props.getPageTitle) {
+            updateTitle(props.getPageTitle(res.typeName))
+          }
+        }
+      }).catch(err => {
+        updateLoading(false)
+      })
+    }
+  }, [])
+
+  const childProps = {
+    form: props.form,
+    dataSource: pageData
+  }
+
+  const showHeader = props.showHeader !== false
+
+  return (
+    <div>
+      {
+        showHeader && (
+          <PageHeader
+            ghost={false}
+            backIcon={false}
+            title={title}
+          ></PageHeader>
+        )
+      }
+      <div style={{marginTop: '16px'}}>
+        <Spin spinning={loading} tip="请稍候...">
+          <Form {...formItemLayout} onSubmit={handleSubmit} >
+            {
+              props.render(childProps)
+            }
+            <Form.Item {...tailFormItemLayout}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button onClick={handleCancel} style={{ marginLeft: '100px' }}>
+                取消
+              </Button>
+            </Form.Item>
+          </Form>
+        </Spin>
+      </div>
+    </div>
+  )
+})

src/components/CommList/DataTable.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { Spin, Table } from 'antd'
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+
+  const pagination = {
+    ...props.pagination,
+    onChange: (page, pageSize) => {
+      setLoading(true)
+      props.onPageChange(page, pageSize).then(() => setLoading(false)).catch(() => setLoading(false))
+    }
+  }
+
+  const { onPageChange, ...tableProps } = props
+
+  return (
+    <Spin spinning={loading} delay={300} tip="请稍候...">
+      <Table pagination={pagination} {...tableProps} />
+    </Spin>
+  )
+}

src/components/CommList/FilterForm.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Form } from 'antd'
+
+export default Form.create({})((props) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        props.onSearch(values)
+      }
+    });
+  }
+
+  const handleReset = () => {
+    props.form.resetFields();
+    props.onSearch(undefined)
+  }
+
+  const { getFieldDecorator } = props.form
+
+  const childProps = {
+    form: props.form
+  }
+
+  return (
+    <Form layout="inline" onSubmit={e => handleSubmit(e)}>
+      {
+        props.render(childProps)
+      }
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          搜索
+        </Button>
+        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+          重置
+          </Button>
+      </Form.Item>
+    </Form>
+  )
+})

src/components/CommList/index.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react'
+import { PageHeader, Form, Input, Button, Icon, Table, Rate, Tag, Spin, notification, Tooltip } from 'antd'
+
+export default (props) => {
+  const defaultPageInfo = { pageNum: 1, pageSize: 10 }
+  const [loading, updateLoading] = useState(false)
+  const [filterParams, updateFilterParams] = useState({})
+  const [pageData, updatePageData] = useState([])
+  const [pageNavData, updatePageNavData] = useState({})
+
+  const getList = (params) => {
+    updateLoading(true)
+    props.fetchList(params).then(res => {
+      updateLoading(false)
+      updatePageData(res[0])
+      updatePageNavData(res[1])
+
+      if (!res[1].total) {
+        notification.info({ message: '没有查询到数据' })
+      }
+    }).catch(err => {
+      updateLoading(false)
+      // do nothing
+    })
+  }
+
+  const handleSearch = (params) => {
+    updateFilterParams(params || {})
+    
+    getList({
+      ...defaultPageInfo,
+      ...(params || {})
+    })
+  }
+
+  const handlePageChange = (pageNum, pageSize) => {
+    getList({
+      pageNum,
+      pageSize,
+      ...filterParams
+    })
+  }
+
+  const dataRef = useRef()
+  dataRef.current = pageData
+
+  useEffect(() => {
+    getList(defaultPageInfo)
+
+    if (props.refreshData) {
+      props.refreshData((callback) => {
+        const newList = callback(dataRef.current)
+        updatePageData(newList)
+      })
+    }
+  }, [])
+
+  const pagination = {
+    ...pageNavData,
+    onChange: handlePageChange
+  }
+
+  const showFilterForm = props.showFilterForm !== false
+  const tableProp = {
+    ...(props.table || {}),
+    dataSource: pageData
+  }
+
+  return (
+    <div>
+      <PageHeader
+        ghost={false}
+        backIcon={false}
+        title={props.title || "列表"}
+        extra={[<Button key={1} type="primary" onClick={props.onAdd}>新增</Button>]}
+      ></PageHeader>
+
+      {
+        showFilterForm && (
+          <FilterForm onSearch={handleSearch} render={props.renderFilter} />
+        )
+      }
+      
+      <div style={{marginTop: '16px'}}>
+        <Spin spinning={loading} delay={300} tip="请稍候...">
+          <Table
+            {...tableProp}
+            pagination={pagination} />
+        </Spin>
+      </div>
+    </div>
+  )
+}

src/components/CopyBlock/index.jsx

@@ -0,0 +1,71 @@
+import { Icon, Popover, Typography } from 'antd';
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import { connect } from 'dva';
+import { isAntDesignPro } from '@/utils/utils';
+import styles from './index.less';
+
+const firstUpperCase = pathString =>
+  pathString
+    .replace('.', '')
+    .split(/\/|-/)
+    .map(s => s.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase()))
+    .filter(s => !!s)
+    .join(''); // when  click block copy, send block url to  ga
+
+const onBlockCopy = label => {
+  if (!isAntDesignPro()) {
+    return;
+  }
+
+  const ga = window && window.ga;
+
+  if (ga) {
+    ga('send', 'event', {
+      eventCategory: 'block',
+      eventAction: 'copy',
+      eventLabel: label,
+    });
+  }
+};
+
+const BlockCodeView = ({ url }) => {
+  const blockUrl = `npx umi block add ${firstUpperCase(url)} --path=${url}`;
+  return (
+    <div className={styles['copy-block-view']}>
+      <Typography.Paragraph
+        copyable={{
+          text: blockUrl,
+          onCopy: () => onBlockCopy(url),
+        }}
+        style={{
+          display: 'flex',
+        }}
+      >
+        <pre>
+          <code className={styles['copy-block-code']}>{blockUrl}</code>
+        </pre>
+      </Typography.Paragraph>
+    </div>
+  );
+};
+
+export default connect(({ routing }) => ({
+  location: routing.location,
+}))(({ location }) => {
+  const url = location.pathname;
+  const divDom = useRef(null);
+  return (
+    <Popover
+      title={<FormattedMessage id="app.preview.down.block" defaultMessage="下载此页面到本地项目" />}
+      placement="topLeft"
+      content={<BlockCodeView url={url} />}
+      trigger="click"
+      getPopupContainer={dom => (divDom.current ? divDom.current : dom)}
+    >
+      <div className={styles['copy-block']} ref={divDom}>
+        <Icon type="download" />
+      </div>
+    </Popover>
+  );
+});

src/components/CopyBlock/index.less

@@ -0,0 +1,29 @@
+.copy-block {
+  position: fixed;
+  right: 80px;
+  bottom: 40px;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  background: #fff;
+  border-radius: 40px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+}
+
+.copy-block-view {
+  position: relative;
+  .copy-block-code {
+    display: inline-block;
+    margin: 0 0.2em;
+    padding: 0.2em 0.4em 0.1em;
+    font-size: 85%;
+    border-radius: 3px;
+  }
+}

src/components/CustomUpload/index.jsx

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react'
+import { Upload, Spin } from 'antd';
+import { uploaderProps } from '@/utils/upload'
+
+export default class extends PureComponent {
+  state = {
+    loading: false,
+  }
+  
+  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);
+    }
+  };
+
+  render() {
+    return (
+      <Upload
+        {...uploaderProps}
+        onChange={this.handleChange}
+      >
+        <Spin spinning={this.state.loading}>
+          {this.props.children}
+        </Spin>
+      </Upload>
+    )
+  }
+}