feat: 增加消息页面

client/actions/news.js

@@ -0,0 +1,66 @@
+import {
+  FETCH_NEWS_DATA
+} from '../constants/action-types.js';
+
+export function fetchNewsData () {
+  const data = [{
+    name: 'John Brown',
+    date: '2015-11-11 13:00:15',
+    desc: '创建服务现场'
+  }, {
+    name: 'John Brown1',
+    date: '2015-11-11 13:00:15',
+    desc: '技术测试异常'
+  }, {
+    name: 'John Brown2',
+    date: '2015-11-11 13:00:15',
+    desc: '网络异常正在修复'
+  }]
+
+  return {
+    type: FETCH_NEWS_DATA,
+    payload: data
+  };
+}
+
+export function fetchViewedNews () {
+  const data = [{
+    name: 'John Brown21',
+    date: '2015-11-11 13:00:15',
+    desc: '创建服务现场'
+  }, {
+    name: 'John Brown12',
+    date: '2015-11-11 13:00:15',
+    desc: '技术测试异常'
+  }, {
+    name: 'John Brown22',
+    date: '2015-11-11 13:00:15',
+    desc: '网络异常正在修复'
+  }]
+
+  return {
+    type: FETCH_NEWS_DATA,
+    payload: data
+  }
+}
+
+export function fetchNotVieweNews () {
+  const data = [{
+    name: 'John Brown22',
+    date: '2015-11-11 13:00:15',
+    desc: '创建服务现场'
+  }, {
+    name: 'John Brown12',
+    date: '2015-11-11 13:00:15',
+    desc: '技术测试异常'
+  }, {
+    name: 'John Brown22',
+    date: '2015-11-11 13:00:15',
+    desc: '网络异常正在修复'
+  }]
+
+  return {
+    type: FETCH_NEWS_DATA,
+    payload: data
+  }
+}

client/containers/News/News.js

@@ -0,0 +1,43 @@
+import './News.scss'
+import React, { Component } from 'react'
+import NewsTimeline from './NewsTimeline/NewsTimeline'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import NewsList from './NewsList/NewsList.js'
+import { fetchNewsData } from '../../actions/news.js'
+
+
+@connect(
+  state => {
+    return {
+      newsData: state.news.newsData?state.news.newsData:[]
+    }
+  },
+  {
+    fetchNewsData: fetchNewsData
+  }
+)
+
+class News extends Component {
+  constructor(props) {
+    super(props)
+  }
+  static propTypes = {
+    newsData: PropTypes.array,
+    fetchNewsData: PropTypes.func
+  }
+  componentWillMount(){
+    this.props.fetchNewsData()
+  }
+  render () {
+    const data = this.props.newsData;
+    return (
+      <section className="news-box">
+        <NewsList />
+        <NewsTimeline data = {data} />
+      </section>
+    )
+  }
+}
+
+export default News

client/containers/News/News.scss

@@ -0,0 +1,31 @@
+/* .interface-box.css */
+.news-box {
+  max-width: 11rem;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 15px auto 0 auto;
+  font-size: 0.14rem;
+  background: #FFF;
+
+  .news-list {
+    width: 216px;
+    line-height: 45px;
+    background: #f9fafe;
+    
+    li {
+      padding: 0 0 0 30px;
+      color: #344562;
+      cursor: pointer;
+      
+      &:hover, &.active {
+        background: #657289;
+        color: #FFF;
+      }
+    }
+  }
+
+}
+.news-timeline{
+  margin-left: 30px;
+  margin-top: 30px;
+}

client/containers/News/NewsList/NewsList.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { 
+  fetchNewsData, 
+  fetchViewedNews, 
+  fetchNotVieweNews } from '../../../actions/news.js'
+
+
+@connect(
+  state => {
+    return {
+      newsData: state.news.newsData
+    }
+  },
+  {
+    fetchNewsData,
+    fetchViewedNews,
+    fetchNotVieweNews
+  }
+)
+
+class NewsList extends Component {
+
+  static propTypes = {
+    fetchNewsData: PropTypes.func,
+    fetchViewedNews: PropTypes.func,
+    fetchNotVieweNews: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  
+
+  fetchData(e){
+    const mark = e.target.className;
+    if(mark.indexOf('allnews')>-1){
+      this.props.fetchNewsData()
+      this.switchColor(mark.indexOf('allnews'),e.target)
+    }else if(mark.indexOf('viewednews')>-1){
+      this.props.fetchViewedNews();
+      this.switchColor(mark.indexOf('viewednews'),e.target)
+    }else if(mark.indexOf('notview')>-1){
+      this.props.fetchNotVieweNews();
+      this.switchColor(mark.indexOf('notview'),e.target)
+    }
+
+  }
+  switchColor(index,e){
+    let childNodes = e.parentNode.childNodes;
+    if(e.className.indexOf('active')> -1) return;
+    for(let j = 0;j<childNodes.length;j++){
+      const i = childNodes[j].className.indexOf('active');
+      if(i> -1){
+        // console.log( childNodes[i].className.splice);
+        let className = childNodes[j].className;
+        className = className.split('');
+        className.splice(i,6);
+        childNodes[j].className = className.join('');
+      }
+    }
+    e.className = e.className + ' active';
+  }
+  render () {
+    return (
+      <ul onClick = {this.fetchData.bind(this)} className="news-list">
+        <li className="active allnews">全部消息</li>
+        <li className='viewednews'>已读消息</li>
+        <li className='notview'>未读消息</li>
+      </ul>
+    )
+  }
+}
+
+export default NewsList

client/containers/News/NewsTimeline/NewsTimeline.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { Timeline } from 'antd'
+import PropTypes from 'prop-types'
+
+class NewsTimeline extends Component {
+  static propTypes = {
+    data: PropTypes.array
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    const data = this.props.data;
+    return (
+      <section className="news-timeline">
+        <Timeline pending={<a href="#">See more</a>}>
+          { 
+            data.map(function(item,i){
+              return (
+                <Timeline.Item color = 'green' key = {i} >{ item.date + item.desc + item.name }</Timeline.Item>
+              )
+            })
+           }
+        </Timeline>
+      </section>
+    )
+  }
+}
+
+export default NewsTimeline

client/reducer/news/news.js

@@ -0,0 +1,20 @@
+import {
+  FETCH_NEWS_DATA
+} from '../../constants/action-types.js'
+
+const initialState = {
+  newsData: []
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_NEWS_DATA: {
+      return {
+        ...state,
+        newsData: action.payload
+      };
+    }
+    default:
+      return state;
+  }
+}