优化组件，减小打包后的大小

src/App.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
-import { message } from 'antd';
+//import { message } from 'antd';
 import { observer } from 'mobx-react';
+import { DataStore } from './DataStore';
 import CoverLyrics from './components/CoverLyrics';
 import SongList from './components/SongList';
 import ControlBar from './components/ControlBar';
 import SearchBar from './components/SearchBar';
-import './App.css';
-
-import { DataStore } from './DataStore';
 import PlayList from './components/PlayList';
+import Alert from './components/Alert';
+
+import './App.css';
 
 @observer
 class App extends Component {
@@ -20,19 +21,32 @@ class App extends Component {
   componentDidMount() {
     window.addEventListener('resize', this.onWindowResize);
     this.onWindowResize();
+    //DataStore.errMassge = '测试报错！';
+    //console.log(DataStore.errMassge)
   }
 
   componentDidUpdate() {
-    if(DataStore.errMassge) {
+    //if(DataStore.errMassge) {
-      message.warning(DataStore.errMassge);
+      //message.warning(DataStore.errMassge);
-      DataStore.errMassge = '';
+      //DataStore.errMassge = '';
-    }
+    //}
+    //DataStore.errMassge = '测试报错！';
+    // setInterval(() => {
+    //   DataStore.errMassge = '测试报错！';
+    //   console.log(DataStore.errMassge)
+    // },2000);
   }
 
   componentWillUnmount() {
       window.removeEventListener('resize', this.onWindowResize)
   }
 
+  alertClose = (errMassge) => {
+    if(errMassge) {
+      errMassge = '';
+    }
+  }
+
   render() {
     return (
       <div className="App">
@@ -50,6 +64,9 @@ class App extends Component {
           </div>
           <ControlBar />
         </div>
+        <Alert 
+        text={DataStore.errMassge}
+        closeCallBack={this.alertClose(DataStore.errMassge)}/>
       </div>
     );
   }

src/DataStore.js

@@ -232,7 +232,12 @@ class DataPageStore {
   }
 
   set errMassge(value) {
-    this._errMassge = value;
+    if(typeof(value) === 'string') {
+      this._errMassge = value;
+    }
+    if(typeof(value) === 'object') {
+      this._errMassge = value.message;
+    }
   }
 
   get keyword() {

src/components/Alert.css

@@ -0,0 +1,28 @@
+.alert-panel {
+    background-color: rgba(0,0,0,.3);
+    border-radius: 6px;
+    padding: 10px 15px;
+    color: #fff;
+    font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 14px;
+    position: fixed;
+    z-index: 1000;
+    top: 50%;
+    left: 50%;
+}
+
+.alert-panel > div {
+    float: left;
+}
+
+.alert-panel > .alert-icon-box,.alert-panel > .alert-icon-close {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.alert-panel > .alert-massge {
+    line-height: 30px;
+    padding: 0 15px; 
+    margin-right: 5px;
+}

src/components/Alert.js

@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+
+import './Alert.css';
+
+class Alert extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            text: this.props.text || '',
+            keep: this.props.keep || false,
+            timeOut: this.props.timeOut || 3000,
+            icon: this.props.icon || 'info',
+            panelWidth: 0,
+            panelHeight: 0,
+            closeCallBack: this.props.closeCallBack || null
+        };
+    }
+
+    setTimeId = 0;
+
+    componentDidMount() {
+        this.setAlertSize();
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.text) {
+            this.setState({
+                text: nextProps.text,
+                keep: nextProps.keep || false,
+                timeOut: nextProps.timeOut || 3000,
+                icon: nextProps.icon || 'info',
+                closeCallBack: nextProps.closeCallBack || null
+            });
+
+            if(!nextProps.keep) {
+                this.setTimeId = setTimeout(()=>{
+                    this.hide();
+                },this.state.timeOut);
+            }
+        }
+    }
+
+    componentWillUpdate() {
+
+    }
+
+    componentDidUpdate() {
+        this.setAlertSize();
+    }
+
+    setAlertSize = () => {
+        if(this.refs.panel) {
+            if(this.state.panelWidth !== this.refs.panel.offsetWidth || this.state.panelHeight !== this.refs.panel.offsetHeight) {
+                this.setState({
+                    panelWidth: this.refs.panel.offsetWidth,
+                    panelHeight: this.refs.panel.offsetHeight
+                });
+            }
+        }
+    }
+
+    closeMassge = (event) => {
+        clearTimeout(this.setTimeId);
+        this.hide();
+    }
+
+    hide = () => {
+        this.setState({text:''});
+        if(this.state.closeCallBack) this.state.closeCallBack();
+    }
+
+    iconType = (type) => {
+        if(type === 'info') {
+            return (
+                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3939" xlinkHref="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="3940" fill="#ffffff"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="3941" fill="#ffffff"></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="3942" fill="#ffffff"></path></svg>
+            );
+        }
+        if(type === 'err') {
+            return (
+                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3761" xlinkHref="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="3762" fill="#ffffff"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="3763" fill="#ffffff"></path></svg>
+            );
+        }
+
+        if(type === 'success') {
+            return (
+                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3583" xlinkHref="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="3584" fill="#ffffff"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="3585" fill="#ffffff"></path></svg>
+            );
+        }
+    }
+
+    render() {
+        if(this.state.text) {
+            return (
+                <div className="alert-panel" 
+                    ref="panel" 
+                    style={{
+                        marginLeft:-this.state.panelWidth/2,
+                        marginTop:-this.state.panelHeight/2}}>
+                    <div className="alert-icon-box">
+                        {this.iconType(this.state.icon)}
+                    </div>
+                    <div className="alert-massge">{this.state.text}</div>
+                    <div className="alert-icon-close" onClick={this.closeMassge}>
+                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4118" xlinkHref="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" p-id="4119" fill="#ffffff"></path></svg>
+                    </div>
+                </div>
+            );
+        }else{
+            return '';
+        }
+        
+    }
+}
+
+export default Alert;

src/components/Progress.css

@@ -28,4 +28,9 @@
 
 .progress-box>.rc-slider {
     margin-top: 13px;
+}
+
+
+.progress-box .rc-slider-handle {
+    cursor: pointer;
 }

src/components/Volume.css

@@ -30,4 +30,8 @@
 
 .volume-slider>.rc-slider {
     margin-top: 13px;
+}
+
+.volume-slider .rc-slider-handle {
+    cursor: pointer;
 }