design review (#22)

mock/api.js

@@ -18,10 +18,10 @@ export function fakeList(count) {
     'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab
   ];
   const covers = [
-    'https://gw.alipayobjects.com/zos/rmsportal/nQIAJyTLNeVJfUpTskWk.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/pnhtvpOTzypPvmHVrfKN.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/SVrKVZEFDnhDTNpkplZj.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/bUIOUkPTHgfGdDhgsAgE.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/HrxcVbrKnCJOZvtzSqjN.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/alaPpKWajEbIYEUvvVNf.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/RLwlKSYGSXGHuWSojyvp.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
   ];
 
   const list = [];
@@ -31,7 +31,7 @@ export function fakeList(count) {
       owner: '曲丽丽',
       title: titles[i % 8],
       avatar: avatars[i % 4],
-      cover: covers[i % 4],
+      cover: Math.floor(i / 4) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3],
       percent: Math.ceil(Math.random() * 50) + 50,
       logo: ['https://gw.alipayobjects.com/zos/rmsportal/KoJjkdbuTFxzJmmjuDVR.png', 'https://gw.alipayobjects.com/zos/rmsportal/UxGORCvEXJEsxOfEKZiA.png'][i % 2],

src/components/AvatarList/index.js

@@ -22,6 +22,7 @@ const Item = ({ src, size, tips, onClick = (() => {}) }) => {
   const cls = classNames(styles.avatarItem, {
     [styles.avatarItemLarge]: size === 'large',
     [styles.avatarItemSmall]: size === 'small',
+    [styles.avatarItemMini]: size === 'mini',
   });
 
   return (

src/components/AvatarList/index.less

@@ -27,3 +27,15 @@
   width: @avatar-size-sm;
   height: @avatar-size-sm;
 }
+
+.avatarItemMini {
+  width: 20px;
+  height: 20px;
+  :global {
+    .ant-avatar {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}

src/components/Charts/Bar/index.js

@@ -72,7 +72,9 @@ class Bar extends PureComponent {
         name: 'x',
       },
     });
-    chart.interval().position('x*y').color(color);
+    chart.interval().position('x*y').color(color).style({
+      fillOpacity: 1,
+    });
     chart.render();
 
     this.chart = chart;

src/components/Charts/ChartCard/index.less

@@ -19,7 +19,7 @@
   .total {
     .textOverflow();
     color: @heading-color;
-    margin-top: 8px;
+    margin-top: 4px;
     font-size: 30px;
     line-height: 38px;
     height: 38px;
@@ -37,7 +37,8 @@
   .footer {
     border-top: 1px solid @border-color-split;
     padding-top: 8px;
-    margin-top: 11px;
+    margin-top: 20px;
+    margin-bottom: 10px;
     & > * {
       position: relative;
     }

src/components/Charts/Gauge/index.js

@@ -121,7 +121,7 @@ class Gauge extends PureComponent {
       height,
       animate: false,
       plotCfg: {
-        margin: [10, 0, 30, 0],
+        margin: [10, 10, 30, 10],
       },
     });
 

src/components/Charts/MiniArea/index.js

@@ -85,7 +85,8 @@ class MiniArea extends PureComponent {
 
     view.source(data, dataConfig);
 
-    view.area().position('x*y').color(color).shape('smooth');
+    view.area().position('x*y').color(color).shape('smooth')
+      .style({ fillOpacity: 1 });
 
     chart.on('tooltipchange', (ev) => {
       const item = ev.items[0];

src/components/Charts/MiniBar/index.js

@@ -25,7 +25,7 @@ class MiniBar extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33ABFB' } = this.props;
+    const { height = 0, fit = true, color = '#1890FF' } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;

src/components/Charts/Pie/index.js

@@ -59,8 +59,11 @@ class Pie extends Component {
       margin, percent, color,
       inner = 0.75,
       animate = true,
+      colors,
     } = this.props;
 
+    const defaultColors = colors || ['#8543E0', '#F04864', '#FACC14', '#1890FF', '#13C2C2', '#2FC25B'];
+
     let selected = this.props.selected || true;
     let tooltip = this.props.tooltips || true;
 
@@ -146,7 +149,11 @@ class Pie extends Component {
       inner,
     });
 
-    chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected);
+    if (percent) {
+      chart.intervalStack().position(Stat.summary.percent('y')).color('x', formatColor).selected(selected);
+    } else {
+      chart.intervalStack().position(Stat.summary.percent('y')).color('x', defaultColors).selected(selected);
+    }
     chart.render();
 
     this.chart = chart;

src/components/Charts/Pie/index.less

@@ -62,7 +62,7 @@
     & > p {
       color: @heading-color;
       display: block;
-      font-size: 24px;
+      font-size: 30px;
       height: 32px;
       line-height: 32px;
     }

src/components/Charts/Radar/index.less

@@ -12,6 +12,7 @@
       }
       h6 {
         color: @heading-color;
+        padding-left: 16px;
         font-size: 24px;
         line-height: 32px;
         margin-top: 2px;

src/components/Charts/TimelineChart/index.js

@@ -30,7 +30,7 @@ class TimelineChart extends Component {
   }
 
   renderChart(data) {
-    const { height = 400, margin = [60, 40, 40, 40], titleMap } = this.props;
+    const { height = 400, margin = [60, 20, 40, 40], titleMap } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -81,8 +81,8 @@ class TimelineChart extends Component {
       },
     });
 
-    chart.line().position('x*y1').color('#4FAAEB');
-    chart.line().position('x*y2').color('#9AD681');
+    chart.line().position('x*y1').color('#1890FF');
+    chart.line().position('x*y2').color('#2FC25B');
 
     this.chart = chart;
 

src/components/Charts/Trend/index.less

@@ -23,7 +23,7 @@
     display: none;
   }
   .title {
-    margin-right: 4px;
+    margin-right: 8px;
   }
   .value {
     color: @text-color;

src/components/EditableLinkGroup/index.js

@@ -30,7 +30,7 @@ class EditableLinkGroup extends PureComponent {
         }
         {
           <Button size="small" onClick={() => this.handleOnClick()}>
-            <Icon type="plus" /> 添加
+            <Icon type="plus" />添加
           </Button>
         }
       </div>

src/components/EditableLinkGroup/index.less

@@ -16,12 +16,13 @@
   & > button {
     border-color: @primary-color;
     color: @primary-color;
+    padding-left: 12px;
+    padding-right: 12px;
     i {
       position: relative;
       top: -1px;
     }
     span {
-      margin-left: 0 !important;
       position: relative;
       top: -1px;
     }

src/components/StandardTable/index.js

@@ -130,7 +130,7 @@ class StandardTable extends PureComponent {
               <p>
                 已选择 <a>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                 服务调用总计 <span style={{ fontWeight: 600 }}>{totalCallNo}</span> 万
-                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 8 }}>清空</a>
+                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
               </p>
             )}
             type="info"

src/routes/Dashboard/Analysis.js

@@ -148,7 +148,7 @@ export default class Analysis extends Component {
     const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
 
     const CustomTab = ({ data, currentTabKey: currentKey }) => (
-      <Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
+      <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
         <Col span={12}>
           <NumberInfo
             title={data.name}
@@ -186,7 +186,7 @@ export default class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
-              title="销售额"
+              title="总销售额"
               action={<Tooltip title="我是一段说明"><Icon type="exclamation-circle-o" /></Tooltip>}
               total={yuan(126560)}
               footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
@@ -208,7 +208,7 @@ export default class Analysis extends Component {
               contentHeight={46}
             >
               <MiniArea
-                color="#9f5ae0"
+                color="#975FE4"
                 height={46}
                 data={visitData}
               />
@@ -243,7 +243,7 @@ export default class Analysis extends Component {
               }
               contentHeight={46}
             >
-              <MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
+              <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
             </ChartCard>
           </Col>
         </Row>
@@ -255,11 +255,11 @@ export default class Analysis extends Component {
           <div className={styles.salesCard}>
             <Tabs tabBarExtraContent={salesExtra}>
               <TabPane tab="销售额" key="sales">
-                <Row gutter={72}>
+                <Row>
                   <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                     <div className={styles.salesBar}>
                       <Bar
-                        height={292}
+                        height={295}
                         title="销售额趋势"
                         data={salesData}
                       />
@@ -327,7 +327,7 @@ export default class Analysis extends Component {
               <Row gutter={68}>
                 <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
                   <NumberInfo
-                    subTitle={<span>搜索用户数量 <Icon style={{ marginLeft: 8 }} type="info-circle-o" /></span>}
+                    subTitle={<span>搜索用户数 <Icon style={{ marginLeft: 8 }} type="info-circle-o" /></span>}
                     total={numeral(12321).format('0,0')}
                     status="up"
                     subTotal={17.1}
@@ -397,7 +397,7 @@ export default class Analysis extends Component {
                   total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
                   data={salesPieData}
                   valueFormat={val => yuan(val)}
-                  height={294}
+                  height={314}
                 />
               </div>
             </Card>
@@ -407,8 +407,8 @@ export default class Analysis extends Component {
         <Card
           className={styles.offlineCard}
           bordered={false}
-          bodyStyle={{ padding: '0 0 24px 0' }}
-          style={{ marginTop: 24 }}
+          bodyStyle={{ padding: '0 0 32px 0' }}
+          style={{ marginTop: 32 }}
         >
           <Tabs
             activeKey={activeKey}

src/routes/Dashboard/Analysis.less

@@ -12,6 +12,7 @@
     }
   }
 }
+
 .rankingList {
   margin-top: 25px;
   li {
@@ -59,14 +60,14 @@
 
 .salesCard {
   .salesBar {
-    padding: 0 0 24px 24px;
+    padding: 0 0 32px 32px;
   }
   .salesRank {
-    padding: 0 24px 24px 0;
+    padding: 0 32px 32px 72px;
   }
   :global {
     .ant-tabs-bar {
-      padding-left: 24px;
+      padding-left: 16px;
       .ant-tabs-nav .ant-tabs-tab {
         padding-top: 16px;
         padding-bottom: 14px;
@@ -87,9 +88,11 @@
     }
   }
 }
+
 .salesCardExtra {
-  height: 88px;
+  height: 68px;
 }
+
 .salesTypeRadio {
   position: absolute;
   left: 24px;
@@ -104,6 +107,18 @@
     .ant-tabs-ink-bar {
       top: 1px;
     }
+    .ant-tabs-nav-container-scrolling {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .ant-tabs-tab-prev-icon:before {
+      position: relative;
+      left: 6px;
+    }
+    .ant-tabs-tab-next-icon:before {
+      position: relative;
+      right: 6px;
+    }
   }
 }
 
@@ -111,6 +126,7 @@
   .salesExtra {
     display: none;
   }
+
   .rankingList {
     li {
       span:first-child {
@@ -124,12 +140,19 @@
   .rankingTitle {
     margin-top: 16px;
   }
+
+  .salesCard {
+    .salesBar {
+      padding: 16px;
+    }
+  }
 }
 
 @media screen and (max-width: @screen-sm) {
   .salesExtraWrap {
     display: none;
   }
+
   .salesCard {
     :global {
       .ant-tabs-content {

src/routes/Dashboard/Monitor.js

@@ -39,26 +39,26 @@ export default class Monitor extends PureComponent {
           <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card title="活动实时交易情况" bordered={false}>
               <Row>
-                <Col sm={6} xs={12}>
+                <Col md={6} sm={12} xs={24}>
                   <NumberInfo
                     subTitle="今日交易总额"
                     suffix="元"
                     total={numeral(124543233).format('0,0')}
                   />
                 </Col>
-                <Col sm={6} xs={12}>
+                <Col md={6} sm={12} xs={24}>
                   <NumberInfo
                     subTitle="销售目标完成率"
                     total="92%"
                   />
                 </Col>
-                <Col sm={6} xs={12}>
+                <Col md={6} sm={12} xs={24}>
                   <NumberInfo
                     subTitle="活动剩余时间"
                     total={<CountDown target={targetTime} />}
                   />
                 </Col>
-                <Col sm={6} xs={12}>
+                <Col md={6} sm={12} xs={24}>
                   <NumberInfo
                     subTitle="每秒交易总额"
                     suffix="元"
@@ -96,7 +96,7 @@ export default class Monitor extends PureComponent {
                       return '';
                   }
                 }}
-                title="核销率"
+                title="跳出率"
                 height={180}
                 percent={87}
               />

src/routes/Dashboard/Monitor.less

@@ -3,7 +3,7 @@
 
 .mapChart {
   padding-top: 24px;
-  height: 450px;
+  height: 457px;
   img {
     width: 100%;
   }

src/routes/Dashboard/Workplace.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
-import { Row, Col, Card, List, Avatar, Icon } from 'antd';
+import { Row, Col, Card, List, Avatar } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import EditableLinkGroup from '../../components/EditableLinkGroup';
@@ -109,7 +109,7 @@ export default class Workplace extends PureComponent {
           <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
         </div>
         <div className={styles.content}>
-          <p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天</p>
+          <p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</p>
           <p>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
         </div>
       </div>
@@ -118,17 +118,17 @@ export default class Workplace extends PureComponent {
     const pageHeaderExtra = (
       <div className={styles.pageHeaderExtra}>
         <div>
-          <p><Icon type="appstore-o" /> 项目数</p>
+          <p>项目数</p>
           <p>56</p>
           <em />
         </div>
         <div>
-          <p><Icon type="trophy" /> 团队内排名</p>
+          <p>团队内排名</p>
           <p>8<span> / 24</span></p>
           <em />
         </div>
         <div>
-          <p><Icon type="eye-o" /> 项目访问</p>
+          <p>项目访问</p>
           <p>2,223</p>
         </div>
       </div>
@@ -181,7 +181,7 @@ export default class Workplace extends PureComponent {
               title="动态"
               loading={activitiesLoading}
             >
-              <List loading={activitiesLoading}>
+              <List loading={activitiesLoading} size="large">
                 <div className={styles.activitiesList}>
                   {
                     activitiesList.map(item => (
@@ -190,7 +190,7 @@ export default class Workplace extends PureComponent {
                           avatar={<Avatar src={item.user.avatar} />}
                           title={
                             <p>
-                              <a>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
+                              <a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
                             </p>
                           }
                           description={moment(item.updatedAt).fromNow()}

src/routes/Dashboard/Workplace.less

@@ -13,18 +13,19 @@
 .pageHeaderContent {
   display: flex;
   .avatar {
-    flex: 0 1 80px;
+    flex: 0 1 72px;
+    margin-bottom: 12px;
     & > span {
-      border-radius: 80px;
+      border-radius: 72px;
       display: block;
-      width: 80px;
-      height: 80px;
+      width: 72px;
+      height: 72px;
     }
   }
   .content {
     position: relative;
     top: 8px;
-    margin-left: 32px;
+    margin-left: 24px;
     flex: 1 1 auto;
     color: @text-color-secondary;
     .contentTitle {
@@ -38,18 +39,20 @@
 
 .pageHeaderExtra {
   .clearfix();
+  float: right;
+  margin-right: 8px;
   & > div {
-    padding: 0 24px;
+    padding: 0 32px;
     position: relative;
     float: left;
     & > p:first-child {
       color: @text-color-secondary;
       font-size: @font-size-base;
       line-height: 22px;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
     }
     & > p {
-      color: @text-color;
+      color: @heading-color;
       font-size: 30px;
       line-height: 38px;
       & > span {
@@ -108,11 +111,11 @@
   :global {
     .ant-card-meta-description {
       color: @text-color-secondary;
-      font-size: 12px;
-      min-height: 36px;
+      min-height: 42px;
     }
   }
   .cardTitle {
+    font-size: 14px;
     :global {
       .ant-avatar {
         position: relative;
@@ -178,6 +181,8 @@
     margin-bottom: 0;
   }
   .pageHeaderExtra {
+    float: none;
+    margin-right: 0;
     & > div {
       padding: 0 16px;
       text-align: left;

src/routes/List/BasicList.js

@@ -110,16 +110,18 @@ export default class BasicList extends PureComponent {
           </Card>
 
           <Card
+            className={styles.listCard}
             bordered={false}
             title="基础列表"
             style={{ marginTop: 24 }}
-            bodyStyle={{ padding: '16px 32px 40px 32px' }}
+            bodyStyle={{ padding: '0 32px 40px 32px' }}
             extra={extraContent}
           >
             <Button type="dashed" style={{ width: '100%', marginBottom: 12 }}>
               <Icon type="plus" /> 添加
             </Button>
             <List
+              size="large"
               rowKey="id"
               loading={loading}
               pagination={paginationProps}

src/routes/List/BasicList.less

@@ -8,10 +8,22 @@
     }
     .ant-card-head-title {
       line-height: 32px;
+      padding: 24px 0;
+    }
+    .ant-card-extra {
+      padding: 24px 0;
     }
     .ant-list-pagination {
       text-align: right;
     }
+    .ant-avatar-lg {
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+    }
+    .ant-list-pagination {
+      margin-top: 16px;
+    }
   }
   .headerInfo {
     position: relative;
@@ -44,7 +56,7 @@
       color: @text-color-secondary;
       display: inline-block;
       font-size: @font-size-base;
-      margin-left: 32px;
+      margin-left: 40px;
       & > span {
         line-height: 20px;
       }
@@ -83,6 +95,13 @@
         margin-left: 0;
       }
     }
+    .listCard {
+      :global {
+        .ant-card-head-title {
+          overflow: visible;
+        }
+      }
+    }
   }
 }
 
@@ -113,6 +132,14 @@
       }
     }
   }
+  .listCard {
+    :global {
+      .ant-radio-group {
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
@@ -128,3 +155,13 @@
     }
   }
 }
+
+@media screen and (max-width: @screen-xl) {
+  .standardList {
+    .listContent {
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}

src/routes/List/CardList.less

@@ -40,6 +40,9 @@
   margin-top: 16px;
   a {
     margin-right: 32px;
+    img {
+      width: 24px;
+    }
   }
   img {
     vertical-align: middle;
@@ -54,6 +57,11 @@
     }
   }
 }
+@media screen and (max-width: @screen-md) {
+  .extraImg {
+    display: none;
+  }
+}
 
 @media screen and (max-width: @screen-sm) {
   .pageHeaderContent {

src/routes/List/CoverCardList.js

@@ -90,7 +90,7 @@ export default class CoverCardList extends PureComponent {
                 <div className={styles.cardItemContent}>
                   <span>{moment(item.updatedAt).fromNow()}</span>
                   <div className={styles.avatarList}>
-                    <AvatarList size="small">
+                    <AvatarList size="mini">
                       {
                         item.members.map((member, i) => (
                           <AvatarList.Item
@@ -153,7 +153,7 @@ export default class CoverCardList extends PureComponent {
         onTabChange={this.handleTabChange}
       >
         <div className={styles.coverCardList}>
-          <Card bordered={false} bodyStyle={{ padding: 24 }}>
+          <Card bordered={false}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>

src/routes/List/CoverCardList.less

@@ -5,7 +5,7 @@
   margin-bottom: -24px;
   :global {
     .ant-card-meta-description {
-      font-size: 12px;
+      color: @text-color;
     }
   }
   .cardItemContent {
@@ -14,7 +14,7 @@
     line-height: 20px;
     height: 20px;
     & > span {
-      color: @disabled-color;
+      color: @text-color-secondary;
       flex: 1;
       font-size: 12px;
     }

src/routes/List/FilterCardList.js

@@ -151,7 +151,7 @@ export default class FilterCardList extends PureComponent {
         onTabChange={this.handleTabChange}
       >
         <div className={styles.filterCardList}>
-          <Card bordered={false} bodyStyle={{ padding: 24 }}>
+          <Card bordered={false}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>

src/routes/List/SearchList.js

@@ -141,7 +141,7 @@ export default class SearchList extends Component {
       <div className={styles.listContent}>
         <p>{content}</p>
         <div>
-          <Avatar src={avatar} size="small" />{owner} 发布在 <a href={href}>{href}</a>
+          <Avatar src={avatar} size="small" /><a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
           <em>{moment(updatedAt).format('YYYY-MM-DD hh:mm')}</em>
         </div>
       </div>
@@ -162,13 +162,14 @@ export default class SearchList extends Component {
     const formItemLayout = {
       wrapperCol: {
         xs: { span: 24 },
-        sm: { span: 16 },
+        sm: { span: 24 },
+        md: { span: 12 },
       },
     };
 
     const loadMore = showLoadMore ? (
       <div style={{ textAlign: 'center', marginTop: 16 }}>
-        <Button onClick={this.handleLoadMore}>
+        <Button onClick={this.handleLoadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
           {loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
           {!loadingMore && (<span>加载更多</span>)}
         </Button>
@@ -183,7 +184,7 @@ export default class SearchList extends Component {
         onTabChange={this.handleTabChange}
       >
         <div>
-          <Card bordered={false} bodyStyle={{ padding: 24 }}>
+          <Card bordered={false}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>
@@ -206,7 +207,7 @@ export default class SearchList extends Component {
                 grid
               >
                 <Row>
-                  <Col lg={16} md={16} sm={20} xs={20}>
+                  <Col lg={16} md={24} sm={24} xs={24}>
                     <FormItem>
                       {getFieldDecorator('owner', {
                         initialValue: ['wjh', 'zxx'],
@@ -223,7 +224,7 @@ export default class SearchList extends Component {
                           }
                         </Select>
                       )}
-                      <a onClick={this.setOwner} style={{ marginLeft: 8 }}>只看自己的</a>
+                      <a className={styles.selfTrigger} onClick={this.setOwner}>只看自己的</a>
                     </FormItem>
                   </Col>
                 </Row>
@@ -234,7 +235,7 @@ export default class SearchList extends Component {
                 last
               >
                 <Row gutter={16}>
-                  <Col lg={8} md={10} sm={10} xs={24}>
+                  <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                     <FormItem
                       {...formItemLayout}
                       label="活跃用户"
@@ -250,7 +251,7 @@ export default class SearchList extends Component {
                       )}
                     </FormItem>
                   </Col>
-                  <Col lg={8} md={10} sm={10} xs={24}>
+                  <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                     <FormItem
                       {...formItemLayout}
                       label="好评度"
@@ -282,6 +283,7 @@ export default class SearchList extends Component {
             bodyStyle={{ padding: '12px 24px 32px 24px' }}
           >
             <List
+              size="large"
               loading={!loadingMore && loading}
               rowKey="id"
               itemLayout="vertical"
@@ -290,11 +292,17 @@ export default class SearchList extends Component {
               renderItem={item => (
                 <List.Item
                   key={item.id}
-                  actions={[<IconText type="star-o" text={item.star} />, <IconText type="like-o" text={item.like} />, <IconText type="message" text={item.message} />]}
+                  actions={[
+                    <IconText type="star-o" text={item.star} />,
+                    <IconText type="like-o" text={item.like} />,
+                    <IconText type="message" text={item.message} />,
+                  ]}
                   extra={<div className={styles.listItemExtra} />}
                 >
                   <List.Item.Meta
-                    title={<a href={item.href}>{item.title}</a>}
+                    title={(
+                      <a className={styles.listItemMetaTitle} href={item.href}>{item.title}</a>
+                    )}
                     description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
                   />
                   <ListContent data={item} />

src/routes/List/SearchList.less

@@ -4,6 +4,7 @@
 .listContent {
   p {
     line-height: 24px;
+    max-width: 720px;
   }
   & > div {
     color: @text-color-secondary;
@@ -15,7 +16,7 @@
     }
     & > span {
       vertical-align: top;
-      margin-right: 16px;
+      margin-right: 8px;
       width: 20px;
       height: 20px;
       & > img {
@@ -25,7 +26,7 @@
     & > em {
       color: @disabled-color;
       font-style: normal;
-      margin-left: 24px;
+      margin-left: 16px;
     }
     a {
       color: @text-color-secondary;
@@ -35,10 +36,16 @@
     }
   }
 }
+.listItemMetaTitle {
+  color: @heading-color;
+}
 .listItemExtra {
   width: 272px;
   height: 1px;
 }
+.selfTrigger {
+  margin-left: 24px;
+}
 
 @media screen and (max-width: @screen-xs) {
   .listContent {
@@ -46,6 +53,16 @@
       height: auto;
     }
   }
+  .selfTrigger {
+    display: block;
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: @screen-md) {
+  .selfTrigger {
+    display: block;
+    margin-left: 0;
+  }
 }
 @media screen and (max-width: @screen-lg) {
   .listItemExtra {

src/routes/List/TableList.js

@@ -157,8 +157,8 @@ export default class TableList extends PureComponent {
     const { selectedRows, modalVisible, addInputValue } = this.state;
 
     const formItemLayout = {
-      labelCol: { span: 5 },
-      wrapperCol: { span: 19 },
+      labelCol: { xs: 5, sm: 8, lg: 6, xl: 6 },
+      wrapperCol: { xs: 18, sm: 16, lg: 17, xl: 17 },
     };
 
     const menu = (

src/routes/List/TableList.less

@@ -2,6 +2,12 @@
 @import "../../utils/utils.less";
 
 .tableList {
+  padding-bottom: 8px;
+  :global {
+    .ant-form-item {
+      margin-bottom: 24px;
+    }
+  }
   .tableListOperator {
     margin-bottom: 16px;
     button {
@@ -16,6 +22,12 @@
   top: 2px;
 }
 
+@media screen and (max-width: @screen-lg) {
+  .formButton {
+    margin-left: 20px;
+  }
+}
+
 @media screen and (max-width: @screen-md) {
   .formButton {
     margin-left: 0;

src/theme.js

 // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 module.exports = {
   // 'primary-color': '#10e99b',
-  'card-actions-background': '#f7f9fa',
+  'card-actions-background': '#f5f8fa',
 };

src/utils/utils.less

@@ -5,7 +5,7 @@
   white-space: nowrap;
 }
 
-.textOverflowMulti(@line: 3) {
+.textOverflowMulti(@line: 3, @bg: #fff) {
   overflow: hidden;
   position: relative;
   line-height: 1.5em;
@@ -14,9 +14,11 @@
   margin-right: -1em;
   padding-right: 1em;
   &:before {
+    background: @bg;
     content: '...';
+    padding: 0 1px;
     position: absolute;
-    right: 0;
+    right: 14px;
     bottom: 0;
   }
   &:after {