From 268a4ef324b5f9551b1737d19bb956dad172711e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 11:18:28 +0800 Subject: [PATCH 01/20] update head profile style --- src/layouts/BasicLayout.js | 20 +++++++++++--------- src/layouts/BasicLayout.less | 4 +--- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 45573676..9674e269 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Layout, Menu, Icon, Avatar, Dropdown, Tag, message } from 'antd'; +import { Layout, Menu, Icon, Avatar, Dropdown, Tag, message, Spin } from 'antd'; import DocumentTitle from 'react-document-title'; import { connect } from 'dva'; import { Link, routerRedux } from 'dva/router'; @@ -164,8 +164,8 @@ class BasicLayout extends React.PureComponent { const menu = ( - 个人中心 - 设置 + 个人中心 + 设置 退出登录 @@ -243,12 +243,14 @@ class BasicLayout extends React.PureComponent { - - - - {currentUser.name} - - + {currentUser.name ? ( + + + + {currentUser.name} + + + ) : } diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 538e7953..40d3b95d 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -89,9 +89,7 @@ margin-right: 8px; } :global(.ant-dropdown-menu-item) { - padding-left: 16px; - padding-right: 16px; - width: 190px; + width: 160px; } } From 664e928928fc31e31dc87caf4e4652ffc074b355 Mon Sep 17 00:00:00 2001 From: niko <644506165@qq.com> Date: Thu, 19 Oct 2017 03:55:15 -0500 Subject: [PATCH 02/20] update style (#21) --- src/components/Charts/MiniProgress/index.js | 6 +-- src/components/StandardFormRow/index.less | 2 +- src/components/TagSelect/index.js | 44 +++++++++++---------- src/components/TagSelect/index.less | 9 +++++ src/layouts/BasicLayout.js | 4 +- src/layouts/BasicLayout.less | 8 ++-- src/routes/List/CardList.js | 8 ++-- src/routes/List/CardList.less | 2 +- src/routes/List/CoverCardList.js | 2 +- src/routes/List/FilterCardList.js | 4 +- src/routes/List/FilterCardList.less | 8 +++- src/routes/List/SearchList.js | 2 +- src/theme.js | 1 + 13 files changed, 59 insertions(+), 41 deletions(-) diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js index 8d1d82a2..2f0fafcd 100644 --- a/src/components/Charts/MiniProgress/index.js +++ b/src/components/Charts/MiniProgress/index.js @@ -1,11 +1,11 @@ import React from 'react'; -import { Popover } from 'antd'; +import { Tooltip } from 'antd'; import styles from './index.less'; const MiniProgress = ({ target, color, strokeWidth, percent }) => (
- +
(
- +
- - 全部 - - { - children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, { - key: `tag-select-${child.props.value}`, - checked: checkedTags.indexOf(child.props.value) > -1, - onChange: this.handleTagChange, - })) - } - { - expandNode && ( - - { expand ? '收起' : '展开'} - - ) - } +
+ + 全部 + + { + children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, { + key: `tag-select-${child.props.value}`, + checked: checkedTags.indexOf(child.props.value) > -1, + onChange: this.handleTagChange, + })) + } + { + expandNode && ( + + { expand ? '收起' : '展开'} + + ) + } +
{ expandNode && (
diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less index c669684b..bc02cc89 100644 --- a/src/components/TagSelect/index.less +++ b/src/components/TagSelect/index.less @@ -5,6 +5,12 @@ user-select: none; margin-left: -8px; position: relative; + :global { + .ant-tag { + padding: 0 8px; + margin-right: 24px; + } + } .expand { transition: all 0.32s ease; overflow: hidden; @@ -18,6 +24,9 @@ position: absolute; top: 0; right: 0; + i { + font-size: 12px; + } } } .expandTag { diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 9674e269..f560947f 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -193,7 +193,7 @@ class BasicLayout extends React.PureComponent { >
- logo + logo

Ant Design Pro

@@ -204,7 +204,7 @@ class BasicLayout extends React.PureComponent { onOpenChange={this.handleOpenChange} selectedKeys={this.getCurrentMenuSelectedKeys()} style={{ margin: '24px 0', width: '100%' }} - inlineIndent={32} + inlineIndent={24} > {this.getNavMenuItems(this.menus)} diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 40d3b95d..0fabb0cc 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -1,7 +1,7 @@ @import "~antd/lib/style/themes/default.less"; .header { - padding: 0 16px 0 0; + padding: 0 12px 0 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, .12); position: relative; @@ -24,7 +24,7 @@ color: #fff; display: inline-block; vertical-align: middle; - font-size: 22px; + font-size: 18px; margin-left: 12px; font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; margin-top: -2px; @@ -43,7 +43,7 @@ line-height: 64px; cursor: pointer; transition: all .3s; - padding: 0 28px; + padding: 0 24px; &:hover { background: rgba(0, 0, 0, .04); } @@ -103,5 +103,5 @@ min-height: 100vh; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); position: relative; - z-index: 1; + z-index: 10; } diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js index 2866d1b5..0eb54085 100644 --- a/src/routes/List/CardList.js +++ b/src/routes/List/CardList.js @@ -62,8 +62,8 @@ export default class CardList extends PureComponent { dataSource={['', ...list]} renderItem={item => (item ? ( - - 操作一, 操作二]}> + 操作一, 操作二]}> + } title={item.title} @@ -73,8 +73,8 @@ export default class CardList extends PureComponent {

)} /> - - + + ) : ( diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less index 8a5c958c..d6c3cfd8 100644 --- a/src/routes/List/CardList.less +++ b/src/routes/List/CardList.less @@ -24,7 +24,7 @@ border-color: @border-color-base; color: @text-color-secondary; width: 100%; - height: 178px; + height: 185px; } .cardDescription { diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index 0ad34b5d..6d0aa290 100644 --- a/src/routes/List/CoverCardList.js +++ b/src/routes/List/CoverCardList.js @@ -153,7 +153,7 @@ export default class CoverCardList extends PureComponent { onTabChange={this.handleTabChange} >
- +
diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index 542ef5aa..a42ebddd 100644 --- a/src/routes/List/FilterCardList.js +++ b/src/routes/List/FilterCardList.js @@ -151,7 +151,7 @@ export default class FilterCardList extends PureComponent { onTabChange={this.handleTabChange} >
- + @@ -221,6 +221,8 @@ export default class FilterCardList extends PureComponent { renderItem={item => ( , , diff --git a/src/routes/List/FilterCardList.less b/src/routes/List/FilterCardList.less index d8cf0dc7..2be27dff 100644 --- a/src/routes/List/FilterCardList.less +++ b/src/routes/List/FilterCardList.less @@ -7,10 +7,14 @@ .ant-card-meta-content { margin-top: 0; } + // disabled white space + .ant-card-meta-avatar { + font-size: 0; + } } .cardInfo { .clearfix(); - margin-top: 12px; + margin-top: 16px; margin-left: 40px; & > div { position: relative; @@ -18,7 +22,7 @@ float: left; width: 50%; p { - color: @text-color; + color: @text-color-secondary; line-height: 32px; font-size: 24px; } diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index 2319fbeb..bcc02434 100644 --- a/src/routes/List/SearchList.js +++ b/src/routes/List/SearchList.js @@ -183,7 +183,7 @@ export default class SearchList extends Component { onTabChange={this.handleTabChange} >
- + diff --git a/src/theme.js b/src/theme.js index 20cf8a81..08c3b20b 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,4 +1,5 @@ // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less module.exports = { // 'primary-color': '#10e99b', + 'card-actions-background': '#f7f9fa', }; From 68013a5bb5398301386bc73aa3a0c0adc51d7e09 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 17:15:58 +0800 Subject: [PATCH 03/20] update logo background --- src/layouts/BasicLayout.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 0fabb0cc..6c19f16c 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -13,7 +13,7 @@ line-height: 64px; padding-left: 32px; transition: all .3s; - background: #00284d; + background: #002140; overflow: hidden; img { display: inline-block; @@ -64,7 +64,7 @@ } &:global(.ant-popover-open), &:hover { - background: rgba(0, 0, 0, .04); + background: @primary-1; } } .search { From 7f1d829603072f580c137642eeebeca4cbbda13a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 17:18:45 +0800 Subject: [PATCH 04/20] Fix avatar position --- src/routes/Dashboard/Workplace.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index 243662c7..c24fe06b 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/src/routes/Dashboard/Workplace.js @@ -187,7 +187,7 @@ export default class Workplace extends PureComponent { activitiesList.map(item => ( } + avatar={} title={

{item.user.name} 在 xx 新建了项目 xxxx From eb2a31e20c7de5e22d10a557b4159fd25c1634f4 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Thu, 19 Oct 2017 17:56:14 +0800 Subject: [PATCH 05/20] update component docs --- src/components/AvatarList/demo/simple.md | 18 +++++++++++++ src/components/AvatarList/index.md | 25 ++++++++++++++++++ src/components/Charts/demo/bar.md | 2 ++ src/components/Charts/demo/gauge.md | 2 ++ src/components/Charts/demo/mini-area.md | 1 + src/components/Charts/demo/mini-bar.md | 3 +++ src/components/Charts/demo/mini-pie.md | 2 ++ src/components/Charts/demo/mix.md | 8 +++--- src/components/Charts/demo/tag-cloud.md | 25 ++++++++++++++++++ src/components/Charts/demo/timeline-chart.md | 27 ++++++++++++++++++++ src/components/Charts/demo/waterwave.md | 2 ++ src/components/Charts/index.md | 22 +++++++++++++--- src/components/CountDown/demo/simple.md | 6 ++--- src/components/CountDown/index.js | 4 +-- 14 files changed, 134 insertions(+), 13 deletions(-) create mode 100644 src/components/AvatarList/demo/simple.md create mode 100644 src/components/AvatarList/index.md create mode 100644 src/components/Charts/demo/tag-cloud.md create mode 100644 src/components/Charts/demo/timeline-chart.md diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md new file mode 100644 index 00000000..ecc9c81c --- /dev/null +++ b/src/components/AvatarList/demo/simple.md @@ -0,0 +1,18 @@ +--- +order: 0 +title: 基础使用 +--- + +简单的用户头像列表。 + +````jsx +import AvatarList from 'ant-design-pro/lib/AvatarList'; + +ReactDOM.render( + + + + + +, mountNode); +```` diff --git a/src/components/AvatarList/index.md b/src/components/AvatarList/index.md new file mode 100644 index 00000000..f9149ad9 --- /dev/null +++ b/src/components/AvatarList/index.md @@ -0,0 +1,25 @@ +--- +category: Components +type: General +title: AvatarList +subtitle: 用户头像列表 +cols: 1 +--- + +倒计时组件。 + +## API + +### AvatarList + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| size | 头像大小 | `large`、`small` | - | + +### AvatarList.Item + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| tips | 头像展示文案 | ReactNode\/string | - | +| src | 头像图片连接 | string | - | + diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md index ea860076..955f44e0 100644 --- a/src/components/Charts/demo/bar.md +++ b/src/components/Charts/demo/bar.md @@ -3,6 +3,8 @@ order: 4 title: 柱状图 --- +通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 + ````jsx import { Bar } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md index 9b82298d..f53465d8 100644 --- a/src/components/Charts/demo/gauge.md +++ b/src/components/Charts/demo/gauge.md @@ -3,6 +3,8 @@ order: 7 title: 仪表盘 --- +仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。 + ````jsx import { Gauge } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md index d1de460b..2b9bfb47 100644 --- a/src/components/Charts/demo/mini-area.md +++ b/src/components/Charts/demo/mini-area.md @@ -1,5 +1,6 @@ --- order: 2 +col: 2 title: 迷你区域图 --- diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md index 9a384fc6..fef301bc 100644 --- a/src/components/Charts/demo/mini-bar.md +++ b/src/components/Charts/demo/mini-bar.md @@ -1,8 +1,11 @@ --- order: 2 +col: 2 title: 迷你柱状图 --- +迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。 + ````jsx import { MiniBar } from 'ant-design-pro/lib/Charts'; import moment from 'moment'; diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md index 0a76e3c4..40c63b0d 100644 --- a/src/components/Charts/demo/mini-pie.md +++ b/src/components/Charts/demo/mini-pie.md @@ -3,6 +3,8 @@ order: 6 title: 迷你饼状图 --- +通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。 + ````jsx import { Pie } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index 5ec7e9a2..7bb384fa 100644 --- a/src/components/Charts/demo/mix.md +++ b/src/components/Charts/demo/mix.md @@ -21,8 +21,8 @@ for (let i = 0; i < 20; i += 1) { } ReactDOM.render( - - + + - + } @@ -55,7 +55,7 @@ ReactDOM.render( /> - + } diff --git a/src/components/Charts/demo/tag-cloud.md b/src/components/Charts/demo/tag-cloud.md new file mode 100644 index 00000000..c86bdd84 --- /dev/null +++ b/src/components/Charts/demo/tag-cloud.md @@ -0,0 +1,25 @@ +--- +order: 9 +title: 标签云 +--- + +标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。 + +````jsx +import { TagCloud } from 'ant-design-pro/lib/Charts'; + +const tags = []; +for (let i = 0; i < 50; i += 1) { + tags.push({ + name: `test-${i}`, + value: Math.floor((Math.random() * 50)) + 20, + }); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/timeline-chart.md b/src/components/Charts/demo/timeline-chart.md new file mode 100644 index 00000000..d22c2fd9 --- /dev/null +++ b/src/components/Charts/demo/timeline-chart.md @@ -0,0 +1,27 @@ +--- +order: 9 +title: 带有时间轴的图表 +--- + +使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。 + +````jsx +import { TimelineChart } from 'ant-design-pro/lib/Charts'; + +const chartData = []; +for (let i = 0; i < 20; i += 1) { + chartData.push({ + x: (new Date().getTime()) + (1000 * 60 * 30 * i), + y1: Math.floor(Math.random() * 100) + 10, + y2: Math.floor(Math.random() * 100) + 10, + }); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md index 742a6c7d..8b00e5a7 100644 --- a/src/components/Charts/demo/waterwave.md +++ b/src/components/Charts/demo/waterwave.md @@ -3,6 +3,8 @@ order: 8 title: 水波图 --- +水波图是一种比例的展示方式，可以更直观的展示关键值的占比。 + ````jsx import { WaterWave } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index 47a13d5a..5beabe56 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -3,12 +3,12 @@ category: Components type: General title: Charts subtitle: 图表 -cols: 1 +cols: 2 --- Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。 -因为结合了 Ant Design 的标准设计，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 +因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 ## API @@ -35,6 +35,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | color | 图表颜色 | string | `#33abfb` | +| borderColor | 图表边颜色 | string | `#33abfb` | | height | 图表高度 | number | - | | line | 是否显示描边 | boolean | false | | animate | 是否显示动画 | boolean | true | @@ -104,6 +105,21 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https | color | 图表颜色 | string | `#19AFFA` | | percent | 进度比例 | number | - | +### TagCloud + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| tags | 标题 | Array | - | +| height | 高度值 | number | - | + +### TimelineChart + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| data | 标题 | Array | - | +| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | +| height | 高度值 | number | 400 | + ### Trend | 参数 | 说明 | 类型 | 默认值 | @@ -127,5 +143,3 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https |----------|------------------------------------------|-------------|-------| | label | 标题 | ReactNode\|string | - | | value | 值 | ReactNode\|string | - | - - diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md index 5a3d8d55..62e9c909 100644 --- a/src/components/CountDown/demo/simple.md +++ b/src/components/CountDown/demo/simple.md @@ -1,9 +1,9 @@ --- order: 0 -title: Simple +title: 基础样例 --- -简单的页头。 +简单的倒计时组件使用。 ````jsx import CountDown from 'ant-design-pro/lib/CountDown'; @@ -11,6 +11,6 @@ import CountDown from 'ant-design-pro/lib/CountDown'; const targetTime = new Date().getTime() + 3900000; ReactDOM.render( - + , mountNode); ```` diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js index 19c1cf48..f7caec22 100644 --- a/src/components/CountDown/index.js +++ b/src/components/CountDown/index.js @@ -93,12 +93,12 @@ class CountDown extends Component { } render() { - const { format = this.defaultFormat } = this.props; + const { format = this.defaultFormat, ...rest } = this.props; const { lastTime } = this.state; const result = format(lastTime); - return result; + return ({result}); } } From c0e2d671f96d6905f1881052ae2720b1b6ed2bec Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Thu, 19 Oct 2017 18:04:38 +0800 Subject: [PATCH 06/20] update doc --- src/components/AvatarList/demo/simple.md | 2 +- src/components/TagSelect/demo/simple.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md index ecc9c81c..a9341ff4 100644 --- a/src/components/AvatarList/demo/simple.md +++ b/src/components/AvatarList/demo/simple.md @@ -1,6 +1,6 @@ --- order: 0 -title: 基础使用 +title: 基础样例 --- 简单的用户头像列表。 diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md index c77d1de0..c081e794 100644 --- a/src/components/TagSelect/demo/simple.md +++ b/src/components/TagSelect/demo/simple.md @@ -1,9 +1,9 @@ --- order: 0 -title: Simple +title: 基础样例 --- -简单的页头。 +结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。 ````jsx import TagSelect from 'ant-design-pro/lib/TagSelect'; From 4f2f9e572cde6b9b3960a14893234568efac1c99 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 18:19:05 +0800 Subject: [PATCH 07/20] update notification --- src/components/NoticeIcon/NoticeList.js | 12 ++++++++---- src/components/NoticeIcon/NoticeList.less | 13 +++++-------- src/components/NoticeIcon/demo/popover.md | 21 ++++++++++++++++++--- src/components/NoticeIcon/index.js | 2 ++ src/layouts/BasicLayout.js | 21 ++++++++++++++++++--- src/layouts/BasicLayout.less | 2 +- 6 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js index a6a56354..ed6fa79d 100644 --- a/src/components/NoticeIcon/NoticeList.js +++ b/src/components/NoticeIcon/NoticeList.js @@ -1,14 +1,18 @@ import React from 'react'; -import { Avatar, Icon, List } from 'antd'; +import { Avatar, List } from 'antd'; import classNames from 'classnames'; import styles from './NoticeList.less'; -export default function NoticeList({ data = [], onClick, onClear, title, locale }) { +export default function NoticeList({ + data = [], onClick, onClear, title, locale, emptyText, emptyImage, +}) { if (data.length === 0) { return (

- - {locale.emptyText} + {emptyImage ? ( + not found + ) : null} +
{emptyText || locale.emptyText}
); } diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less index a6be1d67..1dcfad44 100644 --- a/src/components/NoticeIcon/NoticeList.less +++ b/src/components/NoticeIcon/NoticeList.less @@ -54,15 +54,12 @@ .notFound { text-align: center; - height: 120px; - line-height: 120px; - font-size: 14px; + padding: 73px 0 88px 0; color: @text-color-secondary; - > i { - font-size: 16px; - margin-right: 8px; - vertical-align: middle; - margin-top: -1px; + img { + display: inline-block; + margin-bottom: 16px; + height: 76px; } } diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index 379e59c7..eff2edbf 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -51,9 +51,24 @@ ReactDOM.render( }} > - - - + + +
, mountNode); diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js index ac7a51bd..80ac2c16 100644 --- a/src/components/NoticeIcon/index.js +++ b/src/components/NoticeIcon/index.js @@ -17,6 +17,7 @@ export default class NoticeIcon extends PureComponent { emptyText: '暂无数据', clear: '清空', }, + emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg', }; static Tab = TabPane; constructor(props) { @@ -45,6 +46,7 @@ export default class NoticeIcon extends PureComponent { return ( this.onItemClick(item, child.props)} onClear={() => this.props.onClear(child.props.title)} diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index f560947f..c8d9e79a 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -239,9 +239,24 @@ class BasicLayout extends React.PureComponent { loading={fetchingNotices} popupAlign={{ offset: [20, -16] }} > - - - + + + {currentUser.name ? ( diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 6c19f16c..1921e73b 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -45,7 +45,7 @@ transition: all .3s; padding: 0 24px; &:hover { - background: rgba(0, 0, 0, .04); + background: @primary-1; } } From cedd92c5a1c1702d8493ba32241a421ee43389e7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 19:38:36 +0800 Subject: [PATCH 08/20] update NoticeIcon api doc --- src/components/NoticeIcon/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/NoticeIcon/index.md b/src/components/NoticeIcon/index.md index ea540998..0f9ae70e 100644 --- a/src/components/NoticeIcon/index.md +++ b/src/components/NoticeIcon/index.md @@ -28,6 +28,8 @@ locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' } ----|------|-----|------ title | 消息分类的页签标题 | string | - data | 列表数据，格式参照下表 | Array | `[]` +emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | - +emptyImage | 针对每个 Tab 定制空数据图片 | string | - ### Tab data From ab20621586e3709b6b1086ead79cc2fd0dc0180e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 19:57:29 +0800 Subject: [PATCH 09/20] clear notices count --- src/models/global.js | 7 +++++++ src/models/user.js | 9 +++++++++ 2 files changed, 16 insertions(+) diff --git a/src/models/global.js b/src/models/global.js index 53dcca09..ad47737c 100644 --- a/src/models/global.js +++ b/src/models/global.js @@ -21,6 +21,13 @@ export default { payload: data, }); }, + *clearNotices(_, { put, select }) { + const count = yield select(state => state.global.notices.length); + yield put({ + type: 'user/changeNotifyCount', + payload: count, + }); + }, }, reducers: { diff --git a/src/models/user.js b/src/models/user.js index 4221ae4d..197e3626 100644 --- a/src/models/user.js +++ b/src/models/user.js @@ -53,5 +53,14 @@ export default { currentUser: action.payload, }; }, + changeNotifyCount(state, action) { + return { + ...state, + currentUser: { + ...state.currentUser, + notifyCount: action.payload, + }, + }; + }, }, }; From f45aeee0f891615721664fabfe4707399313d74d Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 20:02:35 +0800 Subject: [PATCH 10/20] update text --- src/routes/Dashboard/Workplace.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index c24fe06b..969f14ce 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/src/routes/Dashboard/Workplace.js @@ -109,7 +109,7 @@ export default class Workplace extends PureComponent {
-

早安, 曲丽丽, 祝你开心每一天

+

早安，曲丽丽，祝你开心每一天

交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED

From 5e27eba7c4a0e2d44791676ab9a4b651e3ac0bc3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 20:08:21 +0800 Subject: [PATCH 11/20] Fix margins --- src/components/PageHeader/index.less | 2 +- src/routes/Forms/BasicForm.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less index ce2329d1..c559441f 100644 --- a/src/components/PageHeader/index.less +++ b/src/components/PageHeader/index.less @@ -64,7 +64,7 @@ } .logo, .content, .extraContent { - margin-bottom: 12px; + margin-bottom: 16px; } .action, .extraContent { diff --git a/src/routes/Forms/BasicForm.js b/src/routes/Forms/BasicForm.js index baaf8cfc..da94f64b 100644 --- a/src/routes/Forms/BasicForm.js +++ b/src/routes/Forms/BasicForm.js @@ -162,7 +162,7 @@ export default class BasicForms extends PureComponent { mode="multiple" placeholder="公开给" style={{ - margin: '12px 0', + margin: '8px 0', display: getFieldValue('public') === '2' ? 'block' : 'none', }} > @@ -173,7 +173,7 @@ export default class BasicForms extends PureComponent { )}
- + From 2618a58250a9deae7ff72951d4fbdbfd32c96cc2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 20:32:31 +0800 Subject: [PATCH 12/20] update notice style --- mock/notices.js | 4 ++-- src/components/NoticeIcon/NoticeList.js | 2 +- src/components/NoticeIcon/NoticeList.less | 7 +++---- src/components/NoticeIcon/demo/popover.md | 4 ++-- src/components/NoticeIcon/index.less | 2 +- src/layouts/BasicLayout.js | 7 ++++--- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/mock/notices.js b/mock/notices.js index 782fac4f..3788ae53 100644 --- a/mock/notices.js +++ b/mock/notices.js @@ -56,8 +56,8 @@ export default { id: '000000009', title: '任务名称', description: '任务需要在 2017-01-12 20:00 前启动', - extra: '马上到期', - status: 'urgent', + extra: '未开始', + status: 'todo', type: '待办', }, { id: '000000010', diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js index ed6fa79d..2ffe72ad 100644 --- a/src/components/NoticeIcon/NoticeList.js +++ b/src/components/NoticeIcon/NoticeList.js @@ -29,7 +29,7 @@ export default function NoticeList({ className={styles.meta} avatar={item.avatar ? : null} title={ -
+
{item.title}
{item.extra}
diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less index 1dcfad44..db2bc6d1 100644 --- a/src/components/NoticeIcon/NoticeList.less +++ b/src/components/NoticeIcon/NoticeList.less @@ -16,6 +16,7 @@ .avatar { background: #fff; + margin-top: 4px; } &.read { @@ -29,10 +30,7 @@ } .title { font-weight: normal; - color: @text-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin-bottom: 8px; } .description { font-size: 12px; @@ -48,6 +46,7 @@ color: @text-color-secondary; font-weight: normal; margin-right: 0; + margin-top: -1.5px; } } } diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index eff2edbf..1e1443a4 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -55,13 +55,13 @@ ReactDOM.render( list={noticeData['通知']} title="通知" emptyText="你已查看所有通知" - emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" + emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" /> {newNotice.extra}; } @@ -243,13 +244,13 @@ class BasicLayout extends React.PureComponent { list={noticeData['通知']} title="通知" emptyText="你已查看所有通知" - emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" + emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" /> Date: Thu, 19 Oct 2017 20:35:36 +0800 Subject: [PATCH 13/20] bold tab --- src/components/NoticeIcon/index.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less index 9a93365f..f23a43f4 100644 --- a/src/components/NoticeIcon/index.less +++ b/src/components/NoticeIcon/index.less @@ -20,6 +20,9 @@ .tabs { :global { + .ant-tabs-tab-active { + font-weight: 500; + } .ant-tabs-nav-scroll { text-align: center; } From 5580703f9c411aec8b293fee5f6f87fad570b68c Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 20:47:27 +0800 Subject: [PATCH 14/20] fix editable table --- src/routes/Forms/style.less | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/routes/Forms/style.less b/src/routes/Forms/style.less index ca4b150a..eaa62f07 100644 --- a/src/routes/Forms/style.less +++ b/src/routes/Forms/style.less @@ -68,15 +68,11 @@ } } -// 避免表格编辑模式切换时抖动 -:global(.ant-table) td { - transition: none !important; -} - .editable { td { padding-top: 13px !important; padding-bottom: 12.5px !important; + transition: none !important; } } From a50a4faa1fa0fc6f14e6f338224b149a0733bdde Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 22:35:43 +0800 Subject: [PATCH 15/20] update form styles --- src/components/Result/index.less | 8 ++--- src/routes/Forms/AdvancedForm.js | 2 +- src/routes/Forms/StepForm/Step1.js | 2 +- src/routes/Forms/StepForm/style.less | 27 ++++++++++----- src/routes/Forms/TableForm.js | 49 +++++++++++++++++++++------- src/routes/Forms/style.less | 29 ++++++++-------- 6 files changed, 78 insertions(+), 39 deletions(-) diff --git a/src/components/Result/index.less b/src/components/Result/index.less index 661b4af1..a3904e89 100644 --- a/src/components/Result/index.less +++ b/src/components/Result/index.less @@ -24,19 +24,19 @@ color: @heading-color; font-weight: 500; line-height: 32px; - margin-bottom: 16px; + margin-bottom: 8px; } .description { font-size: 14px; color: @text-color-secondary; - margin-bottom: 24px; + margin-bottom: 16px; } .extra { background: #fafafa; - padding: 24px 40px; - margin-top: 24px; + padding: 16px 40px; + margin-top: 16px; border-radius: @border-radius-sm; text-align: left; } diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index eae686c0..e551e183 100644 --- a/src/routes/Forms/AdvancedForm.js +++ b/src/routes/Forms/AdvancedForm.js @@ -97,7 +97,7 @@ function AdvancedForm({ form, dispatch, submitting }) { diff --git a/src/routes/Forms/StepForm/Step1.js b/src/routes/Forms/StepForm/Step1.js index 5e800307..d5703341 100644 --- a/src/routes/Forms/StepForm/Step1.js +++ b/src/routes/Forms/StepForm/Step1.js @@ -91,7 +91,7 @@ export default ({ formItemLayout, form, dispatch }) => { - +

说明

转账到支付宝账户

diff --git a/src/routes/Forms/StepForm/style.less b/src/routes/Forms/StepForm/style.less index 36330941..9d98d456 100644 --- a/src/routes/Forms/StepForm/style.less +++ b/src/routes/Forms/StepForm/style.less @@ -6,6 +6,7 @@ } .stepFormText { + margin-bottom: 24px; :global { .ant-form-item-label, .ant-form-item-control { @@ -16,26 +17,36 @@ .result { margin: 0 auto; - max-width: 520px; - padding: 32px 0; + max-width: 560px; + padding: 24px 0; } .desc { h3 { - font-size: 14px; - margin: 8px 0; + font-size: 16px; + margin: 0 0 12px 0; color: @text-color-secondary; + line-height: 32px; } h4 { - margin: 2px 0; + margin: 0 0 4px 0; color: @text-color-secondary; + font-size: 14px; + line-height: 22px; } p { - margin-bottom: 16px; + margin-top: 0; + margin-bottom: 12px; + line-height: 22px; } - padding: 0 34px; + padding: 0 80px; color: @text-color-secondary; - font-size: 12px; +} + +@media screen and (max-width: @screen-md) { + .desc { + padding: 0; + } } .information { diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index 390bd9b0..93a535a5 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Table, Button, Input, message } from 'antd'; +import { Table, Button, Input, message, Popconfirm } from 'antd'; import styles from './style.less'; export default class TableForm extends PureComponent { @@ -45,8 +45,7 @@ export default class TableForm extends PureComponent { this.setState({ data: [...this.state.data] }); } } - remove(e, key) { - e.preventDefault(); + remove(key) { const newData = this.state.data.filter(item => item.key !== key); this.setState({ data: newData }); this.props.onChange(newData); @@ -64,6 +63,11 @@ export default class TableForm extends PureComponent { this.index += 1; this.setState({ data: newData }); } + handleKeyPress(e, key) { + if (e.key === 'Enter') { + this.saveRow(e, key); + } + } handleFieldChange(e, fieldName, key) { const newData = [...this.state.data]; const target = this.getRowByKey(key); @@ -73,16 +77,29 @@ export default class TableForm extends PureComponent { } } saveRow(e, key) { - const target = this.getRowByKey(key); - delete target.isNew; - if (!target.workId || !target.name || !target.department) { - message.error('请填写完整成员信息。'); - return; - } - this.toggleEditable(e, key); - this.props.onChange(this.state.data); + e.persist(); + // save field when blur input + setTimeout(() => { + if (document.activeElement.tagName === 'INPUT' && + document.activeElement !== e.target) { + return; + } + if (this.clickedCancel) { + this.clickedCancel = false; + return; + } + const target = this.getRowByKey(key); + delete target.isNew; + if (!target.workId || !target.name || !target.department) { + message.error('请填写完整成员信息。'); + return; + } + this.toggleEditable(e, key); + this.props.onChange(this.state.data); + }, 10); } cancel(e, key) { + this.clickedCancel = true; e.preventDefault(); const target = this.getRowByKey(key); if (this.cacheOriginData[key]) { @@ -105,6 +122,8 @@ export default class TableForm extends PureComponent { value={text} autoFocus onChange={e => this.handleFieldChange(e, 'name', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="成员姓名" /> ); @@ -122,6 +141,8 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'workId', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="工号" /> ); @@ -139,6 +160,8 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'department', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="所属部门" /> ); @@ -171,7 +194,9 @@ export default class TableForm extends PureComponent { this.toggleEditable(e, record.key)}>编辑 - this.remove(e, record.key)}>删除 + this.remove(record.key)}> + 删除 + ); }, diff --git a/src/routes/Forms/style.less b/src/routes/Forms/style.less index eaa62f07..722aca80 100644 --- a/src/routes/Forms/style.less +++ b/src/routes/Forms/style.less @@ -15,13 +15,6 @@ margin: 16px auto; } -.divider { - border: 0; - border-top: 1px solid @border-color-split; - height: 1px; - margin: 0 0 24px 0; -} - .errorIcon { cursor: pointer; color: @error-color; @@ -37,7 +30,7 @@ padding: 0; max-height: 290px; overflow: auto; - min-width: 240px; + min-width: 256px; } } } @@ -45,7 +38,7 @@ .errorListItem { list-style: none; border-bottom: 1px solid @border-color-split; - padding: 8px 24px; + padding: 8px 16px; cursor: pointer; transition: all .3s; &:hover { @@ -58,13 +51,13 @@ color: @error-color; float: left; margin-top: 4px; - margin-right: 8px; + margin-right: 12px; padding-bottom: 22px; } .errorField { font-size: 12px; color: @text-color-secondary; - margin-top: 4px; + margin-top: 2px; } } @@ -72,15 +65,25 @@ td { padding-top: 13px !important; padding-bottom: 12.5px !important; - transition: none !important; } } // custom footer for fixed footer toolbar -.withFooterToolbar + div { +.advancedForm + div { padding-bottom: 64px; } +.advancedForm { + :global { + .ant-form .ant-row:last-child .ant-form-item { + margin-bottom: 24px; + } + .ant-table td { + transition: none !important; + } + } +} + .optional { color: @text-color-secondary; font-style: normal; From e5dd0eccf84567323f30b6d1b884409d1b526f2c Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 22:43:48 +0800 Subject: [PATCH 16/20] Use Divider component --- src/routes/Dashboard.js | 6 +++--- src/routes/Forms/TableForm.js | 8 ++++---- src/routes/Profile/AdvancedProfile.js | 6 +++--- src/routes/Profile/AdvancedProfile.less | 7 ------- src/routes/Profile/BasicProfile.js | 6 +++--- src/routes/Profile/BasicProfile.less | 8 -------- 6 files changed, 13 insertions(+), 28 deletions(-) diff --git a/src/routes/Dashboard.js b/src/routes/Dashboard.js index 0bb12890..8c108bcb 100644 --- a/src/routes/Dashboard.js +++ b/src/routes/Dashboard.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; -import { Row, Col, Card, Table, Icon } from 'antd'; +import { Row, Col, Card, Table, Icon, Divider } from 'antd'; const columns = [{ title: 'Name', @@ -20,9 +20,9 @@ const columns = [{ render: (text, record) => ( Action 一 {record.name} - + Delete - + More actions diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index 93a535a5..b5b78dc9 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Table, Button, Input, message, Popconfirm } from 'antd'; +import { Table, Button, Input, message, Popconfirm, Divider } from 'antd'; import styles from './style.less'; export default class TableForm extends PureComponent { @@ -177,7 +177,7 @@ export default class TableForm extends PureComponent { return ( this.saveRow(e, record.key)}>保存 - + this.remove(e, record.key)}>删除 ); @@ -185,7 +185,7 @@ export default class TableForm extends PureComponent { return ( this.saveRow(e, record.key)}>保存 - + this.cancel(e, record.key)}>取消 ); @@ -193,7 +193,7 @@ export default class TableForm extends PureComponent { return ( this.toggleEditable(e, record.key)}>编辑 - + this.remove(record.key)}> 删除 diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js index 6a82ef0c..c55b6bfe 100644 --- a/src/routes/Profile/AdvancedProfile.js +++ b/src/routes/Profile/AdvancedProfile.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'dva'; -import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip } from 'antd'; +import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import DescriptionList from '../../components/DescriptionList'; import EditableItem from '../../components/EditableItem'; @@ -229,13 +229,13 @@ export default class AdvancedProfile extends Component { 2017-08-08 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... -
+ Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗.. -
+ 付小小 1234568 diff --git a/src/routes/Profile/AdvancedProfile.less b/src/routes/Profile/AdvancedProfile.less index 6c8a2ab5..72d681be 100644 --- a/src/routes/Profile/AdvancedProfile.less +++ b/src/routes/Profile/AdvancedProfile.less @@ -18,10 +18,3 @@ .textSecondary { color: @text-color-secondary; } - -.divider { - border: 0; - border-top: 1px solid @border-color-split; - height: 1px; - margin: 0 0 16px 0; -} diff --git a/src/routes/Profile/BasicProfile.js b/src/routes/Profile/BasicProfile.js index 1e76f9a7..9685ff57 100644 --- a/src/routes/Profile/BasicProfile.js +++ b/src/routes/Profile/BasicProfile.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'dva'; -import { Card, Badge, Table } from 'antd'; +import { Card, Badge, Table, Divider } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import DescriptionList from '../../components/DescriptionList'; import styles from './BasicProfile.less'; @@ -133,7 +133,7 @@ export default class BasicProfile extends Component { 1234123421 3214321432 -
+ 付小小 18100000000 @@ -141,7 +141,7 @@ export default class BasicProfile extends Component { 浙江省杭州市西湖区万塘路18号 无 -
+
退货商品
Date: Thu, 19 Oct 2017 22:44:32 +0800 Subject: [PATCH 17/20] Use @heading-color --- src/routes/Profile/BasicProfile.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Profile/BasicProfile.less b/src/routes/Profile/BasicProfile.less index b61a962a..3829cf69 100644 --- a/src/routes/Profile/BasicProfile.less +++ b/src/routes/Profile/BasicProfile.less @@ -1,7 +1,7 @@ @import "~antd/lib/style/themes/default.less"; .title { - color: rgba(0, 0, 0, 0.85); + color: @heading-color; font-weight: 500; margin-bottom: 16px; } From 854848872b4f74ba5530f460ab70b570ff2814cc Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 22:54:37 +0800 Subject: [PATCH 18/20] Improve header responsive --- src/layouts/BasicLayout.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 1921e73b..bdb7b480 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -49,6 +49,12 @@ } } +@media screen and (max-width: @screen-xs) { + .trigger { + display: none; + } +} + .right { float: right; height: 100%; From 9f5203afef89646964886c2d701ec6bffc287a02 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Oct 2017 10:48:34 +0800 Subject: [PATCH 19/20] update logo style --- src/layouts/BasicLayout.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index bdb7b480..5aa45bc3 100644 --- a/src/layouts/BasicLayout.less +++ b/src/layouts/BasicLayout.less @@ -27,7 +27,8 @@ font-size: 18px; margin-left: 12px; font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; - margin-top: -2px; + margin-top: -3px; + font-weight: bold; } } From 4ccb61a1d89aa23ed4af5671cdba2d843ae4e8e3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Oct 2017 13:49:54 +0800 Subject: [PATCH 20/20] update mock data --- mock/chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mock/chart.js b/mock/chart.js index 43eec3cf..286a0ba3 100644 --- a/mock/chart.js +++ b/mock/chart.js @@ -3,7 +3,7 @@ import moment from 'moment'; // mock data const visitData = []; const beginDay = new Date().getTime(); -for (let i = 0; i < 7; i += 1) { +for (let i = 0; i < 30; i += 1) { visitData.push({ x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), y: Math.floor(Math.random() * 100) + 10,