Lots of improvement

package.json

@@ -91,7 +91,6 @@
   },
   "lint-staged": {
     "**/*.{js,jsx}": "lint-staged:js",
-    "**/*.less": "stylelint --syntax less",
-    "src/**/demo/*.md": "lint-staged:demo"
+    "**/*.less": "stylelint --syntax less"
   }
 }

src/components/Charts/Icon/index.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import { Icon } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
 
-const IconUp = ({ color }) => (
+const IconUp = ({ color, className, ...rest }) => (
   <Icon
-    style={{
-      color: (color === false) ? 'rgba(0,0,0,0.43)' : '#00a854',
-      fontSize: 12,
-      transform: 'scale(0.83)',
-    }}
+    {...rest}
+    className={classNames(styles.normal, className, {
+      [styles.up]: color !== false,
+    })}
     type="caret-up"
   />
 );
 
-const IconDown = ({ color }) => (
+const IconDown = ({ color, className, ...rest }) => (
   <Icon
-    style={{
-      color: (color === false) ? 'rgba(0,0,0,0.43)' : '#f04134',
-      fontSize: 12,
-      transform: 'scale(0.83)',
-    }}
+    {...rest}
+    className={classNames(styles.normal, className, {
+      [styles.down]: color !== false,
+    })}
     type="caret-down"
   />
 );

src/components/Charts/Icon/index.less

@@ -0,0 +1,15 @@
+@import "~antd/lib/style/themes/default.less";
+
+.normal {
+  color: @text-color-secondary;
+  font-size: 12px;
+  transform: scale(83%);
+}
+
+.up {
+  color: @green-6;
+}
+
+.down {
+  color: @red-6;
+}

src/components/Charts/NumberInfo/index.js

@@ -22,8 +22,8 @@ export default ({ theme, title, subTitle, total, subTotal, status, suffix, ...re
       {
         (status || subTotal) && (
           <span className={styles.subTotal}>
-            {status && <Icon type={`caret-${status}`} />}
             {subTotal}
+            {status && <Icon type={`caret-${status}`} />}
           </span>
         )
       }

src/components/Charts/NumberInfo/index.less

@@ -9,12 +9,15 @@
     margin-left: 4px;
   }
   h4 {
-    color: @heading-color;
+    color: @text-color;
+    font-size: @font-size-lg;
     margin-bottom: 16px;
+    transition: all .3s;
   }
   h6 {
     color: @text-color-secondary;
     font-size: @font-size-base;
+    font-weight: normal;
     height: 22px;
     line-height: 22px;
     .textOverflow();
@@ -33,12 +36,13 @@
     }
     .subTotal {
       color: @text-color-secondary;
-      font-size: @font-size-base;
+      font-size: @font-size-lg;
       vertical-align: top;
+      margin-right: 0;
       i {
         font-size: 12px;
         transform: scale(0.82);
-        margin-right: 4px;
+        margin-left: 4px;
       }
     }
   }

src/components/Charts/Pie/index.less

@@ -45,7 +45,7 @@
     right: 0;
   }
   .title {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
   .total {
     opacity: 0;

src/components/Charts/Trend/index.js

@@ -1,74 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Icon, Tooltip } from 'antd';
+import { Icon } from 'antd';
 
 import styles from './index.less';
 
-const Item = ({ title, flag, children, ...rest }, { mini }) => {
-  const map = {
-    xs: 0,
-    sm: 0,
-    md: 0,
-    lg: 0,
-    xlg: 0,
-    xl: 0,
-    xxl: 0,
-  };
-
-  if (mini && mini.forEach) {
-    mini.forEach((size) => {
-      map[size] = 1;
-    });
-  }
-
-  const clsObj = {};
-  Object.keys(map).forEach((k) => {
-    clsObj[styles[k]] = map[k];
-  });
-
-  const clsString = classNames(styles.trendItem, {
-    [styles.mini]: (typeof mini === 'boolean' && mini),
-    ...clsObj,
-  });
-
-  const miniContent = (
-    <Tooltip title={children}>
-      <span className={styles.title}>{title}</span>
-      { flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
-    </Tooltip>
-  );
-
+const Item = ({ title, flag, children, ...rest }) => {
   return (
-    <div {...rest} className={clsString}>
+    <div {...rest} className={styles.trendItem}>
       <div className={styles.content}>
         <span className={styles.title}>{title}</span>
         <span className={styles.value}>{children}</span>
         {flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
       </div>
-      <div className={styles.miniContent}>
-        {miniContent}
-      </div>
     </div>
   );
 };
 
-Item.contextTypes = {
-  mini: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.bool,
-  ]),
-};
-
 class Trend extends React.Component {
-  getChildContext() {
-    return {
-      mini: this.props.mini,
-    };
-  }
-
   render() {
-    const { colorType, children, mini, ...rest } = this.props;
+    const { colorType, children, ...rest } = this.props;
     return (
       <div
         className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend}
@@ -80,13 +29,6 @@ class Trend extends React.Component {
   }
 }
 
-Trend.childContextTypes = {
-  mini: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.bool,
-  ]),
-};
-
 Trend.Item = Item;
 
 export default Trend;

src/components/Charts/Trend/index.less

@@ -11,11 +11,13 @@
 
 .trendItem {
   display: inline-block;
-  margin-right: 24px;
   color: @text-color;
   font-size: @font-size-base;
   line-height: 22px;
   height: 22px;
+  & + & {
+    margin-left: 16px;
+  }
   .content {
     display: block;
   }
@@ -54,108 +56,3 @@
     color: @text-color;
   }
 }
-
-.mini {
-  .content {
-    display: none;
-  }
-  .miniContent {
-    display: block;
-  }
-}
-
-.reset() {
-  .trendItem {
-    .content {
-      display: block;
-    }
-    .miniContent {
-      display: none;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xxl) {
-  .reset();
-  .xxl {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .reset();
-  .xl {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .reset();
-  .lg {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-// xlg
-@media screen and (max-width: 1400px) {
-  .reset();
-  .xlg {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .reset();
-  .md {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .reset();
-  .sm {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .reset();
-  .xs {
-    .content {
-      display: none;
-    }
-    .miniContent {
-      display: block;
-    }
-  }
-}

src/components/Result/demo/error.md

@@ -15,11 +15,11 @@ const extra = (
       您提交的内容有如下错误：
     </div>
     <div style={{ marginBottom: 16 }}>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
       <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
     </div>
     <div>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
       <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
     </div>
   </div>

src/index.less

@@ -9,9 +9,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-:global {
-  .ant-tabs-tab-active {
-    font-weight: 500;
-  }
-}

src/routes/Dashboard/Analysis.js

@@ -153,6 +153,7 @@ export default class Analysis extends Component {
         dataIndex: 'count',
         key: 'count',
         sorter: (a, b) => a.count - b.count,
+        className: styles.alignRight,
       },
       {
         title: '周涨幅',
@@ -160,8 +161,16 @@ export default class Analysis extends Component {
         key: 'range',
         sorter: (a, b) => a.range - b.range,
         render: (text, record) => (
-          <span style={{ textAlign: 'right' }}>{text}% {record.status === 1 ? <IconDown /> : <IconUp />}</span>
+          <span>
+            {text}%
+            {
+              record.status === 1
+                ? <IconDown style={{ marginLeft: 8 }} />
+                : <IconUp style={{ marginLeft: 8 }} />
+            }
+          </span>
         ),
+        className: styles.alignRight,
       },
     ];
 
@@ -173,7 +182,7 @@ export default class Analysis extends Component {
           <NumberInfo
             title={data.name}
             subTitle="转化率"
-            total={`${data.cvr * 100}%`}
+            total={<span style={{ top: '-6px', position: 'relative' }}>{data.cvr * 100}%</span>}
             theme={(currentKey !== data.name) && 'light'}
           />
         </Col>
@@ -212,7 +221,7 @@ export default class Analysis extends Component {
               footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
-              <Trend colorType="gray" mini={['xlg', 'md']}>
+              <Trend colorType="gray">
                 <Trend.Item title="周同比" flag="up">12%</Trend.Item>
                 <Trend.Item title="日环比" flag="down">11%</Trend.Item>
               </Trend>
@@ -256,7 +265,7 @@ export default class Analysis extends Component {
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total="78%"
               footer={
-                <Trend mini={['xlg', 'md']}>
+                <Trend>
                   <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
                   <Trend.Item title="日环比" flag="down">11%</Trend.Item>
                 </Trend>
@@ -347,7 +356,14 @@ 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>
+                        搜索用户数
+                        <Tooltip title="指标文案">
+                          <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
+                        </Tooltip>
+                      </span>
+                    }
                     total={numeral(12321).format('0,0')}
                     status="up"
                     subTotal={17.1}
@@ -374,7 +390,7 @@ export default class Analysis extends Component {
               </Row>
               <Table
                 rowKey={record => record.index}
-                size="middle"
+                size="small"
                 columns={columns}
                 dataSource={searchData}
                 pagination={{
@@ -405,7 +421,7 @@ export default class Analysis extends Component {
               )}
               style={{ marginTop: 24 }}
             >
-              <div style={{ marginTop: 32, marginBottom: 100 }}>
+              <div style={{ marginTop: 8, marginBottom: 77 }}>
                 <Pie
                   hasLegend
                   title="销售额"

src/routes/Dashboard/Analysis.less

@@ -123,6 +123,15 @@
       right: 6px;
     }
   }
+
+  :global(.ant-tabs-tab-active) h4 {
+    color: @primary-color;
+  }
+}
+
+td.alignRight,
+th.alignRight {
+  text-align: right!important;
 }
 
 @media screen and (max-width: @screen-lg) {

src/routes/Dashboard/Monitor.js

@@ -144,7 +144,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false}>
+            <Card title="热门搜索" bordered={false} bodyStyle={{ overflow: 'hidden' }}>
               <TagCloud
                 data={tags}
                 height={161}

src/routes/Result/Error.js

@@ -9,11 +9,11 @@ const extra = (
       您提交的内容有如下错误：
     </div>
     <div style={{ marginBottom: 16 }}>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结
       <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
     </div>
     <div>
-      <Icon style={{ color: '#f04134', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
       <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
     </div>
   </div>