From ff612c5c11c63835858785e65ea3aed3216d5280 Mon Sep 17 00:00:00 2001 From: niko <644506165@qq.com> Date: Fri, 20 Oct 2017 03:22:08 -0500 Subject: [PATCH] design review (#22) --- mock/api.js | 10 ++--- src/components/AvatarList/index.js | 1 + src/components/AvatarList/index.less | 12 ++++++ src/components/Charts/Bar/index.js | 4 +- src/components/Charts/ChartCard/index.less | 5 ++- src/components/Charts/Gauge/index.js | 2 +- src/components/Charts/MiniArea/index.js | 3 +- src/components/Charts/MiniBar/index.js | 2 +- src/components/Charts/Pie/index.js | 9 ++++- src/components/Charts/Pie/index.less | 2 +- src/components/Charts/Radar/index.less | 1 + src/components/Charts/TimelineChart/index.js | 6 +-- src/components/Charts/Trend/index.less | 2 +- src/components/EditableLinkGroup/index.js | 2 +- src/components/EditableLinkGroup/index.less | 3 +- src/components/StandardTable/index.js | 2 +- src/routes/Dashboard/Analysis.js | 20 +++++----- src/routes/Dashboard/Analysis.less | 31 ++++++++++++++-- src/routes/Dashboard/Monitor.js | 10 ++--- src/routes/Dashboard/Monitor.less | 2 +- src/routes/Dashboard/Workplace.js | 14 +++---- src/routes/Dashboard/Workplace.less | 25 ++++++++----- src/routes/List/BasicList.js | 4 +- src/routes/List/BasicList.less | 39 +++++++++++++++++++- src/routes/List/CardList.less | 8 ++++ src/routes/List/CoverCardList.js | 4 +- src/routes/List/CoverCardList.less | 4 +- src/routes/List/FilterCardList.js | 2 +- src/routes/List/SearchList.js | 28 +++++++++----- src/routes/List/SearchList.less | 21 ++++++++++- src/routes/List/TableList.js | 4 +- src/routes/List/TableList.less | 12 ++++++ src/theme.js | 2 +- src/utils/utils.less | 6 ++- 34 files changed, 221 insertions(+), 81 deletions(-) diff --git a/mock/api.js b/mock/api.js index e53d1824..654530bf 100644 --- a/mock/api.js +++ b/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], diff --git a/src/components/AvatarList/index.js b/src/components/AvatarList/index.js index 7ae18577..fcd0f020 100644 --- a/src/components/AvatarList/index.js +++ b/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 ( diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less index 531e673d..6330297e 100644 --- a/src/components/AvatarList/index.less +++ b/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; + } + } +} diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index eaa57739..d6cb8e07 100644 --- a/src/components/Charts/Bar/index.js +++ b/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; diff --git a/src/components/Charts/ChartCard/index.less b/src/components/Charts/ChartCard/index.less index d204e63a..59d4eb5b 100644 --- a/src/components/Charts/ChartCard/index.less +++ b/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; } diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js index c59cfee5..50de76e8 100644 --- a/src/components/Charts/Gauge/index.js +++ b/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], }, }); diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js index 7f67e1bf..bb8b5be0 100644 --- a/src/components/Charts/MiniArea/index.js +++ b/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]; diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js index 7153cf3c..023aff08 100644 --- a/src/components/Charts/MiniBar/index.js +++ b/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; diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 5d068caa..ad180265 100644 --- a/src/components/Charts/Pie/index.js +++ b/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; diff --git a/src/components/Charts/Pie/index.less b/src/components/Charts/Pie/index.less index 37392d19..bbfcc56d 100644 --- a/src/components/Charts/Pie/index.less +++ b/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; } diff --git a/src/components/Charts/Radar/index.less b/src/components/Charts/Radar/index.less index 5e334680..1978111f 100644 --- a/src/components/Charts/Radar/index.less +++ b/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; diff --git a/src/components/Charts/TimelineChart/index.js b/src/components/Charts/TimelineChart/index.js index 3e319aeb..39240123 100644 --- a/src/components/Charts/TimelineChart/index.js +++ b/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; diff --git a/src/components/Charts/Trend/index.less b/src/components/Charts/Trend/index.less index d383fa53..8f11e046 100644 --- a/src/components/Charts/Trend/index.less +++ b/src/components/Charts/Trend/index.less @@ -23,7 +23,7 @@ display: none; } .title { - margin-right: 4px; + margin-right: 8px; } .value { color: @text-color; diff --git a/src/components/EditableLinkGroup/index.js b/src/components/EditableLinkGroup/index.js index 68c0c42f..c1876ab5 100644 --- a/src/components/EditableLinkGroup/index.js +++ b/src/components/EditableLinkGroup/index.js @@ -30,7 +30,7 @@ class EditableLinkGroup extends PureComponent { } { } diff --git a/src/components/EditableLinkGroup/index.less b/src/components/EditableLinkGroup/index.less index 16a3e18a..0d86f264 100644 --- a/src/components/EditableLinkGroup/index.less +++ b/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; } diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js index 80979b75..f117da23 100644 --- a/src/components/StandardTable/index.js +++ b/src/components/StandardTable/index.js @@ -130,7 +130,7 @@ class StandardTable extends PureComponent {

已选择 {selectedRowKeys.length} 项   服务调用总计 {totalCallNo} 万 - 清空 + 清空

)} type="info" diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index 4a9dca74..553e1225 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/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 }) => ( - + } total={yuan(126560)} footer={} @@ -208,7 +208,7 @@ export default class Analysis extends Component { contentHeight={46} > @@ -243,7 +243,7 @@ export default class Analysis extends Component { } contentHeight={46} > - + @@ -255,11 +255,11 @@ export default class Analysis extends Component {
- +
@@ -327,7 +327,7 @@ export default class Analysis extends Component { 搜索用户数量 } + subTitle={搜索用户数 } 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} />
@@ -407,8 +407,8 @@ export default class Analysis extends Component { - + - + - + } /> - + diff --git a/src/routes/Dashboard/Monitor.less b/src/routes/Dashboard/Monitor.less index 686af529..2b3d886e 100644 --- a/src/routes/Dashboard/Monitor.less +++ b/src/routes/Dashboard/Monitor.less @@ -3,7 +3,7 @@ .mapChart { padding-top: 24px; - height: 450px; + height: 457px; img { width: 100%; } diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index 969f14ce..20f2a336 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/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 {
-

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

+

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

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

@@ -118,17 +118,17 @@ export default class Workplace extends PureComponent { const pageHeaderExtra = (
-

项目数

+

项目数

56

-

团队内排名

+

团队内排名

8 / 24

-

项目访问

+

项目访问

2,223

@@ -181,7 +181,7 @@ export default class Workplace extends PureComponent { title="动态" loading={activitiesLoading} > - +
{ activitiesList.map(item => ( @@ -190,7 +190,7 @@ export default class Workplace extends PureComponent { avatar={} title={

- {item.user.name} 在 xx 新建了项目 xxxx + {item.user.name} 在 xx 新建了项目 xxxx

} description={moment(item.updatedAt).fromNow()} diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less index 467242f4..b9101ede 100644 --- a/src/routes/Dashboard/Workplace.less +++ b/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; diff --git a/src/routes/List/BasicList.js b/src/routes/List/BasicList.js index 87c370c8..379b8269 100644 --- a/src/routes/List/BasicList.js +++ b/src/routes/List/BasicList.js @@ -110,16 +110,18 @@ export default class BasicList extends PureComponent { 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; + } + } + } +} diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less index d6c3cfd8..eede4e5f 100644 --- a/src/routes/List/CardList.less +++ b/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 { diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index 6d0aa290..715deb5e 100644 --- a/src/routes/List/CoverCardList.js +++ b/src/routes/List/CoverCardList.js @@ -90,7 +90,7 @@ export default class CoverCardList extends PureComponent {
{moment(item.updatedAt).fromNow()}
- + { item.members.map((member, i) => (
- +
diff --git a/src/routes/List/CoverCardList.less b/src/routes/List/CoverCardList.less index c2e8841a..d5575da1 100644 --- a/src/routes/List/CoverCardList.less +++ b/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; } diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index a42ebddd..b6a6b95d 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} >
- + diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index bcc02434..a37f21e8 100644 --- a/src/routes/List/SearchList.js +++ b/src/routes/List/SearchList.js @@ -141,7 +141,7 @@ export default class SearchList extends Component {

{content}

- {owner} 发布在 {href} + {owner} 发布在 {href} {moment(updatedAt).format('YYYY-MM-DD hh:mm')}
@@ -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 ? (
- @@ -183,7 +184,7 @@ export default class SearchList extends Component { onTabChange={this.handleTabChange} >
- + @@ -206,7 +207,7 @@ export default class SearchList extends Component { grid > - + {getFieldDecorator('owner', { initialValue: ['wjh', 'zxx'], @@ -223,7 +224,7 @@ export default class SearchList extends Component { } )} - 只看自己的 + 只看自己的 @@ -234,7 +235,7 @@ export default class SearchList extends Component { last > - + - + ( , , ]} + actions={[ + , + , + , + ]} extra={
} > {item.title}} + title={( + {item.title} + )} description={Ant Design设计语言蚂蚁金服} /> diff --git a/src/routes/List/SearchList.less b/src/routes/List/SearchList.less index 97dd8206..3cb0d281 100644 --- a/src/routes/List/SearchList.less +++ b/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 { diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js index 042e65b6..05a1cf18 100644 --- a/src/routes/List/TableList.js +++ b/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 = ( diff --git a/src/routes/List/TableList.less b/src/routes/List/TableList.less index 0af787a6..21e1d93c 100644 --- a/src/routes/List/TableList.less +++ b/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; diff --git a/src/theme.js b/src/theme.js index 08c3b20b..9e125114 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +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', + 'card-actions-background': '#f5f8fa', }; diff --git a/src/utils/utils.less b/src/utils/utils.less index b728d9ae..c26d298c 100644 --- a/src/utils/utils.less +++ b/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 { -- GitLab