add: 项目页布局

client/containers/ProjectGroups/ProjectGroups.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react'
-import GroupList from '../../components/GroupList/GroupList.js'
+import React, { Component } from 'react';
+import GroupList from '../../components/GroupList/GroupList.js';
+import ProjectList from './ProjectList';
+import { Row, Col } from 'antd';
 
 import './ProjectGroups.scss'
 
@@ -10,10 +12,15 @@ export default class ProjectGroups extends Component {
 
   render () {
     return (
-      <div>
-        <div className="groups-left">
-          <GroupList></GroupList>
-        </div>
+      <div className="g-doc">
+        <Row gutter={16}>
+          <Col span={6}>
+            <GroupList></GroupList>
+          </Col>
+          <Col span={18}>
+            <ProjectList/>
+          </Col>
+        </Row>
       </div>
     )
   }

client/containers/ProjectGroups/ProjectGroups.scss

@@ -1,4 +1,4 @@
-.groups-left {
-  width: 250px;
-  margin: 20px;
+.g-doc {
+  max-width: 11rem;
+  margin: .24rem auto;
 }

client/containers/ProjectGroups/ProjectList/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+// import { connect } from 'react-redux'
+import { Table } from 'antd'
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  render: text => <a href="#">{text}</a>,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+}, {
+  title: 'Action',
+  key: 'action',
+  render: () => (
+    <span>
+      <a href="#">修改</a>
+      <span className="ant-divider" />
+      <a href="#">删除</a>
+    </span>
+  ),
+}];
+
+const data = [{
+  key: '1',
+  age: 32
+}, {
+  key: '2',
+  age: 42
+}, {
+  key: '3',
+  age: 32
+}];
+
+
+
+export default class GroupList extends Component {
+  render() {
+    return (
+      <Table columns={columns} dataSource={data} />
+    );
+  }
+}

client/styles/common.scss

@@ -38,4 +38,5 @@ em {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   height: 100%;
+  background-color: #ececec;
 }