opti: 整体布局优化

client/components/Header/Header.js

@@ -174,7 +174,7 @@ export default class HeaderCom extends Component {
     const { login, user, msg, uid } = this.props;
     return (
       <Header className="header-box m-header">
-        <div className="content">
+        <div className="content g-row">
           <div className="logo">
             <Link to="/group" onClick={this.relieveLink} className="href">
               <span className="img">{logoSVG('32px')}</span>

client/components/Header/Header.scss

@@ -16,8 +16,11 @@
     height: .56rem;
     width: 56px;
     border-right: 1px solid #55616d;
+    border-left: 1px solid #55616d;
+    background-color: inherit;
+    transition: all .2s;
     &:hover{
-      background-color: #38495a;
+      background-color: #2395f1;
     }
     .href {
       text-decoration: none;
@@ -45,11 +48,6 @@
       background-size: 236px 21px;
       background-repeat: no-repeat;
       background-image: none;
-      animation: flag .8s steps(8) infinite;
-    }
-    @keyframes flag {
-      from { background-position: 0px; }
-      to { background-position: -240px; }
     }
     // &:before, &:after {
     //   content: '';
@@ -84,7 +82,6 @@
     height: .54rem;
     display: flex;
     align-items: center;
-    padding-right: .16rem;
     .item-search {
       width: 2rem;
     }
@@ -94,10 +91,10 @@
       cursor: pointer;
       color: #ccc;
       margin-left: .16rem;
-      transition: color .4s;
+      transition: color .2s;
       .dropdown-link {
         color: #ccc;
-        transition: color .4s;
+        transition: color .2s;
         .ant-avatar-image{
           margin-bottom: -10px;
         }
@@ -107,7 +104,7 @@
       }
       &:hover{
         .dropdown-link {
-          color: #ccc;
+          color: #2395f1;
         }
       }
       .name {

client/components/ProjectCard/ProjectCard.scss

@@ -61,7 +61,7 @@
   transition: all .4s;
   position: relative;
   .ant-card-body {
-    background-color: #fff;
+    background-color: transparent;
     border-radius: 4px;
     padding-top: .24rem + .16rem + 1rem;
     box-shadow: 0 4px 6px rgba(255,255,255,.11), 0 1px 3px rgba(255,255,255,.08);

client/containers/AddProject/AddProject.js

@@ -106,102 +106,104 @@ class ProjectList extends Component {
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
-      <div className="g-row m-container">
-        <Form>
+      <div className="g-row">
+        <div className="g-row m-container">
+          <Form>
 
-          <FormItem
-            {...formItemLayout}
-            label="项目名称"
-          >
-            {getFieldDecorator('name', {
-              rules: nameLengthLimit('项目')
-            })(
-              <Input />
-            )}
-          </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="项目名称"
+            >
+              {getFieldDecorator('name', {
+                rules: nameLengthLimit('项目')
+              })(
+                <Input />
+              )}
+            </FormItem>
 
-          <FormItem
-            {...formItemLayout}
-            label="所属分组"
-          >
-            {getFieldDecorator('group', {
-              initialValue: this.state.currGroupId+'' ,
-              rules: [{
-                required: true, message: '请选择项目所属的分组!'
-              }]
-            })(
-              <Select>
-                {this.state.groupList.map((item, index) => (
-                  <Option disabled={!(item.role === 'dev' || item.role === 'owner')} value={item._id.toString()} key={index}>{item.group_name}</Option>
-                ))}
-              </Select>
-            )}
-          </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="所属分组"
+            >
+              {getFieldDecorator('group', {
+                initialValue: this.state.currGroupId+'' ,
+                rules: [{
+                  required: true, message: '请选择项目所属的分组!'
+                }]
+              })(
+                <Select>
+                  {this.state.groupList.map((item, index) => (
+                    <Option disabled={!(item.role === 'dev' || item.role === 'owner')} value={item._id.toString()} key={index}>{item.group_name}</Option>
+                  ))}
+                </Select>
+              )}
+            </FormItem>
 
-          <hr className="breakline" />
+            <hr className="breakline" />
 
-          <FormItem
-            {...formItemLayout}
-            label={(
-              <span>
-                基本路径&nbsp;
-                <Tooltip title="接口基本路径，为空是根路径">
-                  <Icon type="question-circle-o" />
-                </Tooltip>
-              </span>
-            )}
-          >
-            {getFieldDecorator('basepath', {
-              rules: [{
-                required: false, message: '请输入项目基本路径'
-              }]
-            })(
-              <Input onBlur={this.handlePath} />
-            )}
-          </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={(
+                <span>
+                  基本路径&nbsp;
+                  <Tooltip title="接口基本路径，为空是根路径">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              )}
+            >
+              {getFieldDecorator('basepath', {
+                rules: [{
+                  required: false, message: '请输入项目基本路径'
+                }]
+              })(
+                <Input onBlur={this.handlePath} />
+              )}
+            </FormItem>
 
-          <FormItem
-            {...formItemLayout}
-            label="描述"
-          >
-            {getFieldDecorator('desc', {
-              rules: [{
-                required: false, message: '描述不超过50字!', max: 50
-              }]
-            })(
-              <TextArea rows={4} />
-            )}
-          </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="描述"
+            >
+              {getFieldDecorator('desc', {
+                rules: [{
+                  required: false, message: '描述不超过50字!', max: 50
+                }]
+              })(
+                <TextArea rows={4} />
+              )}
+            </FormItem>
 
-          <FormItem
-            {...formItemLayout}
-            label="权限"
-          >
-            {getFieldDecorator('project_type', {
-              rules: [{
-                required: true
-              }],
-              initialValue: 'private'
-            })(
-              <RadioGroup>
-                <Radio value="private" className="radio">
-                  <Icon type="lock" />私有<br /><span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
-                </Radio>
-                <br />
-                <Radio value="public" className="radio">
-                  <Icon type="unlock" />公开<br /><span className="radio-desc">任何人都可以索引并查看项目信息</span>
-                </Radio>
-              </RadioGroup>
-            )}
-          </FormItem>
-        </Form>
-        <Row>
-          <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
-            <Button className="m-btn" icon="plus" type="primary"
-              onClick={this.handleOk}
-              >创建项目</Button>
-          </Col>
-        </Row>
+            <FormItem
+              {...formItemLayout}
+              label="权限"
+            >
+              {getFieldDecorator('project_type', {
+                rules: [{
+                  required: true
+                }],
+                initialValue: 'private'
+              })(
+                <RadioGroup>
+                  <Radio value="private" className="radio">
+                    <Icon type="lock" />私有<br /><span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
+                  </Radio>
+                  <br />
+                  <Radio value="public" className="radio">
+                    <Icon type="unlock" />公开<br /><span className="radio-desc">任何人都可以索引并查看项目信息</span>
+                  </Radio>
+                </RadioGroup>
+              )}
+            </FormItem>
+          </Form>
+          <Row>
+            <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
+              <Button className="m-btn" icon="plus" type="primary"
+                onClick={this.handleOk}
+                >创建项目</Button>
+            </Col>
+          </Row>
+        </div>
       </div>
     );
   }

client/containers/Follows/Follows.js

@@ -60,20 +60,11 @@ class Follows extends Component {
     const data = this.state.data;
     return (
       <div>
-        {/*<Subnav
-          default={'我的关注'}
-          data={[{
-            name: '项目广场',
-            path: '/group'
-          }, {
-            name: '我的关注',
-            path: '/follow'
-          }]}/>*/}
-        <div className="g-row">
-          <Row gutter={24} className="follow-box pannel-without-tab">
+        <div className="g-row" style={{paddingLeft: '32px', paddingRight: '32px'}}>
+          <Row gutter={16} className="follow-box pannel-without-tab">
             {data.length ? data.map((item, index) => {
               return (
-                <Col span={6} key={index}>
+                <Col xs={6} md={4} xl={3} key={index}>
                   <ProjectCard projectData={item} inFollowPage={true} callbackResult={this.receiveRes} />
                 </Col>);
             }): <ErrMsg type="noFollow"/>}

client/containers/Follows/Follows.scss

@@ -5,5 +5,5 @@
 .follow-box{
   padding: 24px;
   background-color: #fff;
-  margin-top: 32px;
+  margin-top: .24rem;
 }

client/containers/Group/Group.js

@@ -2,13 +2,12 @@ import React, { Component } from 'react';
 import GroupList from './GroupList/GroupList.js';
 import ProjectList from './ProjectList/ProjectList.js';
 import MemberList from './MemberList/MemberList.js';
-// import Subnav from '../../components/Subnav/Subnav.js';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { Tabs, Layout } from 'antd';
 const { Content, Footer, Sider } = Layout;
 const TabPane = Tabs.TabPane;
 
-import './Group.scss'
+import './Group.scss';
 
 export default class Group extends Component {
   constructor(props) {
@@ -19,12 +18,12 @@ export default class Group extends Component {
 
     const GroupContent = (
       <Layout>
-        <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '56px', marginLeft: '16px', marginTop: '24px' }} width={300}>
+        <Sider style={{ height: '100vh', marginLeft: '24px', marginTop: '24px' }} width={300}>
           <div className="logo" />
           <GroupList></GroupList>
         </Sider>
-        <Layout style={{ marginLeft: 316 }}>
-          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+        <Layout>
+          <Content style={{ margin: '24px 24px 0 16px', overflow: 'initial' }}>
             <Tabs type="card" className="m-tab">
               <TabPane tab="项目列表" key="1"><ProjectList/></TabPane>
               <TabPane tab="成员列表" key="2"><MemberList/></TabPane>

client/containers/Project/Interface/Interface.js

@@ -83,7 +83,7 @@ class Interface extends Component {
     // console.log(matchPath(this.props.location.pathname, contentRouter));
     return (
       <Layout style={{marginTop: '-24px'}}>
-        <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '113px', marginLeft: '16px', marginTop: '24px' }} width={300}>
+        <Sider style={{ marginLeft: '24px', marginTop: '24px' }} width={300}>
           <div className="left-menu">
             <Tabs type="card" activeKey={activeKey} onChange={this.onChange}>
               <Tabs.TabPane tab="接口列表" key="api">
@@ -95,8 +95,8 @@ class Interface extends Component {
             </Tabs>
           </div>
         </Sider>
-        <Layout style={{ marginLeft: 316 }}>
-          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+        <Layout>
+          <Content style={{ margin: '24px 24px 0 16px', overflow: 'initial' }}>
             <div className="right-content">
               <Switch>
                 <Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />

client/styles/common.scss

@@ -32,11 +32,11 @@ html {
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.2);
   -webkit-box-shadow: inset006pxrgba(0,0,0,0.5);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.2);
 }
 
 div, article, p, table, tr, td, th, ul, ol, li, h1, h2, h3, form, dl, dt, dd {