first commit

Author: geeknull

.babelrc

@@ -0,0 +1,16 @@
+{
+  "compact": false,
+  "presets": [
+    ["latest", { "modules": false }],
+    "babel-preset-stage-0",
+    "react"
+  ],
+  "plugins": ["babel-plugin-transform-decorators-legacy"],
+  "env": {
+    "development": {
+      "presets": [
+        "react-hmre"
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig is awesome:
+http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,jsx,scss}]
+indent_size = 2
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.DS_Store
+.idea
+.project

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npm.taobao.org/
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

.nvmrc

@@ -0,0 +1 @@
+7

app.js

@@ -0,0 +1,25 @@
+/**
+ * Created by Weil on 2017/5/10.
+ */
+const Koa = require('koa');
+const app = new Koa();
+const port = 8333;
+const path = require('path');
+const convert = require('koa-convert');
+
+const cors = require('koa-cors');
+const serve = require('koa-static-server');
+const bodyParser = require('koa-bodyparser');
+
+app.use(bodyParser());
+// app.use(async (ctx, next) => {
+//   console.log(ctx.request.body, ctx.path, 'ppp');
+//   await next();
+// });
+app.use(convert(cors()));
+const router = require('./router')(app);
+app.use(serve({rootDir: path.join(__dirname, './static'), rootPath: '/static'}));
+
+app.listen(port, () => {
+  console.log(`earlyjoy已经启动，监听${port}端口`);
+});

client/component/feedCard/feedCard.jsx

@@ -0,0 +1,39 @@
+import './feedCard.scss';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+export default class extends Component {
+  constructor () {
+    super();
+  }
+
+  static propTypes = {
+    item: PropTypes.object,
+    route: PropTypes.string
+  };
+
+  static defaultProps = {
+    item: {},
+    route: ''
+  };
+
+  render () {
+    let { img, text, time } = this.props.item;
+    let { route } = this.props;
+
+    return (
+      <Link to={route}>
+        <div className="weui-cells feed-card-item">
+          <div className="img-wrap">
+            <img src={img}/>
+          </div>
+          <div className="info">
+            <span className="text">{text}</span>
+            <span className="time">{time}</span>
+          </div>
+        </div>
+      </Link>
+    )
+  }
+}

client/component/feedCard/feedCard.scss

@@ -0,0 +1,28 @@
+.feed-card-item {
+  height: 70px;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  padding: 10px;
+  .img-wrap {
+    flex: none;
+    margin-right: 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    img {
+      height: 50px;
+    }
+  }
+  .info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .text {
+
+    }
+    .time {
+
+    }
+  }
+}

client/component/footer/index.jsx

@@ -0,0 +1,40 @@
+import './index.scss';
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+export default class extends Component {
+  constructor () {
+    super();
+  }
+
+  render () {
+    return (
+      <ul className="footer">
+        <li className="footer-item">
+          <Link to="/index">
+            <span className="iconfont icon-zhuye" title="主页"/>
+            <span className="footer-item-text">主页</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/today">
+            <span className="iconfont icon-liebiao" title="今日列表"/>
+            <span className="footer-item-text">今日列表</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/rank">
+            <span className="iconfont icon-paixingbang" title="排行榜"/>
+            <span className="footer-item-text">排行榜</span>
+          </Link>
+        </li>
+        <li className="footer-item">
+          <Link to="/mine">
+            <span className="iconfont icon-gerenzhongxin" title="个人中心"/>
+            <span className="footer-item-text">个人中心</span>
+          </Link>
+        </li>
+      </ul>
+    )
+  }
+}

client/component/footer/index.scss

@@ -0,0 +1,29 @@
+.footer {
+  display: flex;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+  z-index: 10;
+  .footer-item {
+    flex: 1;
+  }
+  .footer-item a {
+    flex: 1;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    .footer-item-text {
+      font-size: 12px;
+    }
+    .iconfont {
+
+    }
+  }
+}

client/component/header/index.jsx

@@ -0,0 +1,33 @@
+import './index.scss';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+@connect(state => ({
+  routing: state.routing
+}))
+export default class extends Component {
+  constructor () {
+    super();
+  }
+
+  getTitle () {
+    let { location: { pathname } } = this.props.routing;
+    switch (pathname) {
+      case '/index':
+        return '首页';
+        break;
+      default:
+        return '我是早鸟';
+    }
+  }
+
+  render () {
+    return (
+      <div className="header">
+        <div className="inner">
+          {this.getTitle()}
+        </div>
+      </div>
+    )
+  }
+}

client/component/header/index.scss

@@ -0,0 +1,17 @@
+.header {
+  display: flex;
+  height: 50px;
+  background-color: #fff;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #f0f0f0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  .inner {
+    color: #333;
+    font-size: 20px;
+  }
+}

client/component/scrollList/scrollList.jsx

@@ -0,0 +1,95 @@
+import './scrollList.scss';
+import React, { Component, Children } from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+
+export default class extends Component {
+  constructor () {
+    super();
+    this.state = {
+      isBindScrollEvent: false,
+      status: 'init' // init wait
+    };
+    this.elementScrollHandlerBind = this.elementScrollHandler.bind(this);
+  }
+
+  static propTypes = {
+    hasMore: PropTypes.bool, // 是否还有更多
+    loading: PropTypes.bool, // 是否能够加载，请求中的状态不允许加载
+    onLoad: PropTypes.func, // 加载的函数
+    element: PropTypes.object, // 监听的元素
+    extra: PropTypes.number, // 额外的底边距
+    isEmpty: PropTypes.bool // 是否为空
+  };
+
+  static defaultProps = {
+    hasMore: true,
+    loading: true,
+    onLoad: ()=>{},
+    element: null,
+    extra: 10
+  };
+
+  elementScrollHandler (e) {
+    let { scrollHeight, clientHeight, scrollTop } = e.target;
+    let { loading, onLoad, hasMore, extra } = this.props;
+
+    console.log('loading:', loading, 'hasMore', hasMore);
+    if ( clientHeight + scrollTop + extra >= scrollHeight && !loading && hasMore ) {
+      onLoad();
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.tryToBindScrollEvent(nextProps.element);
+  }
+
+  componentDidMount () {
+    this.tryToBindScrollEvent(this.props.element);
+  }
+
+  tryToBindScrollEvent (element) {
+    let { isBindScrollEvent } = this.state;
+
+    if ( element && isBindScrollEvent === false ) {
+      element.addEventListener('scroll', this.elementScrollHandlerBind, false);
+      this.setState({ isBindScrollEvent: true });
+    }
+  }
+
+  componentWillUnmount () {
+    let { element } = this.props;
+    if ( element ) {
+      element.removeEventListener('scroll', this.elementScrollHandlerBind, false);
+    }
+  }
+
+  render () {
+    let { loading, hasMore, isEmpty } = this.props;
+
+    return (
+      <div className="scroll-list">
+        {this.props.children}
+        {
+          loading &&
+            <div className="weui-loadmore">
+              <i className="weui-loading"/>
+              <span className="weui-loadmore__tips">正在加载</span>
+            </div>
+        }
+        {
+          !hasMore &&
+            <div className="weui-loadmore weui-loadmore_line weui-loadmore_dot">
+              <span className="weui-loadmore__tips"/>
+            </div>
+        }
+        {
+          isEmpty &&
+            <div className="weui-loadmore weui-loadmore_line">
+              <span className="weui-loadmore__tips">暂无数据</span>
+            </div>
+        }
+      </div>
+    );
+  }
+}

client/component/scrollList/scrollList.scss

@@ -0,0 +1,8 @@
+.scroll-list {
+  .weui-loadmore__tips {
+    background-color: transparent;
+  }
+  .weui-loadmore_line {
+    margin-top: 40px;
+  }
+}