readme

README.md

@@ -1,4 +1,28 @@
 # antd-admin
 开发脚手架 https://github.com/dvajs/dva
-项目基于 https://github.com/jiangxy/react-antd-admin
+
 演示地址 http://zuiidea.github.io/antd-admin/
+
+## 参考
+
+https://github.com/jiangxy/react-antd-admin
+
+https://github.com/dvajs/dva/tree/master/examples/user-dashboard
+
+## 项目结构
+
+```bash
+├── /mock/           # 数据mock的接口文件
+├── /src/            # 项目源码目录
+│ ├── /components/   # 项目组件
+│ ├── /routes/       # 路由组件
+│ ├── /models/       # 数据模型
+│ ├── /services/     # 数据接口
+│ ├── /utils/        # 工具函数
+│ ├── route.js       # 路由配置
+│ ├── index.js       # 入口文件
+│ ├── index.less     
+│ └── index.html     
+├── package.json     # 项目信息
+└── proxy.config.js  # 数据mock配置
+```

package.json

@@ -5,6 +5,7 @@
   },
   "dependencies": {
     "dva": "^1.0.0",
+    "keymaster": "^1.6.2",
     "react": "^15.1.0",
     "react-dom": "^15.1.0"
   },
@@ -27,4 +28,4 @@
     "build": "atool-build",
     "test": "atool-test-mocha ./src/**/*-test.js"
   }
-}
+}

src/index.js

@@ -1,18 +1,69 @@
-import './index.html';
-// import './index.less';
-import dva from 'dva';
+import dva, { connect } from 'dva';
+import { Router, Route } from 'dva/router';
+import React from 'react';
+import styles from './index.less';
+import key from 'keymaster';
 
-// 1. Initialize
 const app = dva();
 
-// 2. Plugins
-//app.use({});
+app.model({
+  namespace: 'count',
+  state: {
+    record: 0,
+    current: 0,
+  },
+  reducers: {
+    add(state) {
+      const newCurrent = state.current + 1;
+      return { ...state,
+        record: newCurrent > state.record ? newCurrent : state.record,
+        current: newCurrent,
+      };
+    },
+    minus(state) {
+      return { ...state, current: state.current - 1};
+    },
+  },
+  effects: {
+    *add(action, { call, put }) {
+      yield call(delay, 1000);
+      yield put({ type: 'count/minus' });
+    },
+  },
+  subscriptions: {
+    keyboardWatcher(dispatch) {
+      key('⌘+up, ctrl+up', () => { dispatch({type:'count/add'}) });
+    },
+  },
+});
 
-// 3. Model
-//app.model(require('./models/example'));
+const CountApp = ({count, dispatch}) => {
+  return (
+    <div className={styles.normal}>
+      <div className={styles.record}>Highest Record: {count.record}</div>
+      <div className={styles.current}>{count.current}</div>
+      <div className={styles.button}>
+        <button onClick={() => { dispatch({type: 'count/add'}); }}>+</button>
+      </div>
+    </div>
+  );
+};
 
-// 4. Router
-app.router(require('./router'));
+function mapStateToProps(state) {
+  return { count: state.count };
+}
+const HomePage = connect(mapStateToProps)(CountApp);
+
+app.router(({history}) =>
+  <Router history={history}>
+    <Route path="/" component={HomePage} />
+  </Router>
+);
 
-// 5. Start
 app.start('#root');
+
+function delay(timeout){
+  return new Promise(resolve => {
+    setTimeout(resolve, timeout);
+  });
+}

src/index.less

@@ -0,0 +1,29 @@
+.normal {
+  width: 200px;
+  margin: 100px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 20px #ccc;
+}
+
+.record {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 8px;
+  color: #ccc;
+}
+
+.current {
+  text-align: center;
+  font-size: 40px;
+  padding: 40px 0;
+}
+
+.button {
+  text-align: center;
+  button {
+    width: 100px;
+    height: 40px;
+    background: #aaa;
+    color: #fff;
+  }
+}