feat: 错误提示组件

client/components/ErrMsg/ErrMsg.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'antd';
+import './ErrMsg.scss';
+
+/**
+ * 错误信息提示
+ *
+ * @component ErrMsg
+ * @examplelanguage js
+ *
+ * * 错误信息提示组件
+ * * 错误信息提示组件
+ *
+ *
+ */
+
+ /**
+ * 标题
+ * 一般用于描述错误信息名称
+ * @property title
+ * @type string
+ * @description 一般用于描述错误信息名称
+ * @returns {object}
+ */
+class ErrMsg extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    type: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    desc: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    opration: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  }
+
+  render () {
+    let { type, title, desc, opration } = this.props;
+    switch (type) {
+      case 'noProject':
+        title = '该分组还没有项目呢';
+        desc = <span>请点击右上角 “<Icon type="plus-circle" />” 按钮新建项目</span>;
+        break;
+      case 'noData':
+        title = '暂无数据';
+        desc = '先去别处逛逛吧';
+        break;
+      default:
+        console.log('default');
+    }
+    return (
+      <div className="err-msg">
+        <Icon type="frown-o" className="icon" />
+        <p className="title">{title}</p>
+        <p className="desc">{desc}</p>
+        <p className="opration">{opration}</p>
+      </div>
+    )
+  }
+}
+
+export default ErrMsg;

client/components/ErrMsg/ErrMsg.scss

@@ -0,0 +1,19 @@
+.err-msg {
+  text-align: center;
+  font-size: .14rem;
+  color: #999;
+  line-height: 2;
+  .icon {
+    font-size: .6rem;
+    margin-bottom: .08rem;
+  }
+  .title {
+    font-size: .18rem;
+  }
+  .desc {
+
+  }
+  .opration {
+
+  }
+}

client/containers/Group/ProjectList/ProjectList.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Row, Col, Icon } from 'antd';
+import { Row, Col } from 'antd';
 import { addProject, fetchProjectList, delProject, changeUpdateModal } from  '../../../reducer/modules/project';
 import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
-// import variable from '../../../constants/variable';
+import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
 import { autobind } from 'core-decorators';
 
 import './ProjectList.scss'
@@ -110,10 +110,7 @@ class ProjectList extends Component {
               <Col span={8} key={index}>
                 <ProjectCard projectData={item} />
               </Col>);
-          }) : (<div className="empty-tip">
-            <p><Icon type="frown-o" /> 该分组还没有项目呢</p>
-            <p>请点击右上角 “<Icon type="plus-circle" />” 按钮新建项目</p>
-          </div>)}
+          }) : <ErrMsg type="noProject"/>}
         </Row>
       </div>
     );

client/containers/Group/ProjectList/ProjectList.scss

@@ -31,9 +31,3 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
-
-.empty-tip {
-  text-align: center;
-  font-size: .14rem;
-  color: #999;
-}