diff --git a/mock/chart.js b/mock/chart.js index 43eec3cf815811d02ed717f480c87fcdd35f5503..286a0ba393efdbd67ea0461a17b409b659be6985 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, diff --git a/mock/notices.js b/mock/notices.js index 782fac4fd2313603e7c7013bc1ba5ed90c20f352..3788ae5344e178f5b11d36f1bd809e8aaa7ebf72 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/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md new file mode 100644 index 0000000000000000000000000000000000000000..a9341ff415f1f336b0e34e5ecfa7bd4977273ec0 --- /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 0000000000000000000000000000000000000000..f9149ad98871584f2b4af8315902d064564de055 --- /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/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js index 8d1d82a26791e61f5a5c3df41ffe3556bfca654c..2f0fafcdabd1ebc99ba50353c891581ab2a3524b 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 }) => (
- +
(
- +
- + + - + } @@ -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 0000000000000000000000000000000000000000..c86bdd84d9dc3ae0fdbf02db36daaa42f7d0c926 --- /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 0000000000000000000000000000000000000000..d22c2fd96eb3253cce26194090137e5576f0a1bf --- /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 742a6c7d267f316bae368ce1b6537f5d189d4a0d..8b00e5a71c7cfaeb7252c797b103d28f9f66ac73 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 a418d9c18a1b01b495d27f160842906b3893cc43..30130b07149692bf7093b945f6d7c849d4077ebb 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -2,12 +2,12 @@ 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 @@ -34,6 +34,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | color | 图表颜色 | string | `#33abfb` | +| borderColor | 图表边颜色 | string | `#33abfb` | | height | 图表高度 | number | - | | line | 是否显示描边 | boolean | false | | animate | 是否显示动画 | boolean | true | @@ -103,6 +104,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 | 参数 | 说明 | 类型 | 默认值 | @@ -126,5 +142,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 5a3d8d55ba36b95202dc763bd6f9396c4c207f95..62e9c909c57abe0fd28db77ceba0ec419ff9de95 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 19c1cf48e371d432dedbde5098d4166e433c5083..f7caec22dc6d30a7d5372263d87bcbdf73f7ab77 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}); } } diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js index a6a56354a6b109d493d2e8127a53c585082bb997..2ffe72ad29a00b753c06e03f00b7700ff8d374b1 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}
); } @@ -25,7 +29,7 @@ export default function NoticeList({ data = [], onClick, onClear, title, locale 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 a6be1d67cb595904529a18a9d53cfc59cc60762b..db2bc6d10e90bb5753a5c3163b2f0fae4e4b8082 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,21 +46,19 @@ color: @text-color-secondary; font-weight: normal; margin-right: 0; + margin-top: -1.5px; } } } .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 379e59c7d790c1e229fba7744455710ff8bc07d8..1e1443a498a9e69de278ce636af883d0971019d2 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 ac7a51bd0faa9ac49b9f1b87ceb0794fec38d355..80ac2c16d873a34052e3bc2a45c94930d2e054f9 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/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less index 98e63d5718be24e3bb7cc066ebfdd7222a24da70..f23a43f47e0bcccf73b86a5fd86abcdd559b8997 100644 --- a/src/components/NoticeIcon/index.less +++ b/src/components/NoticeIcon/index.less @@ -20,11 +20,14 @@ .tabs { :global { + .ant-tabs-tab-active { + font-weight: 500; + } .ant-tabs-nav-scroll { text-align: center; } .ant-tabs-bar { - margin-bottom: 0; + margin-bottom: 4px; } } } diff --git a/src/components/NoticeIcon/index.md b/src/components/NoticeIcon/index.md index c86b151eadb1c555facd245d30c69a24043367b3..9109e2ff3e4237cce176927cf0b983057a147943 100644 --- a/src/components/NoticeIcon/index.md +++ b/src/components/NoticeIcon/index.md @@ -27,6 +27,8 @@ locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' } ----|------|-----|------ title | 消息分类的页签标题 | string | - data | 列表数据，格式参照下表 | Array | `[]` +emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | - +emptyImage | 针对每个 Tab 定制空数据图片 | string | - ### Tab data diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less index ce2329d149567b5d45e79b8826ad8695702e73bb..c559441f20ff815a6cc12e29904016f0ecb0b977 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/components/Result/index.less b/src/components/Result/index.less index 661b4af1b7862a8259c091e0163dfed81c249581..a3904e89a28c30d7be608c9b58abd9457ec99bf1 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/components/StandardFormRow/index.less b/src/components/StandardFormRow/index.less index 9f11453df429c502c923f23e0816ad70f075b6f5..f1fb2f31dcdca48e937f87f2ae5b13f98b0a096c 100644 --- a/src/components/StandardFormRow/index.less +++ b/src/components/StandardFormRow/index.less @@ -12,7 +12,7 @@ } .ant-form-item-label label { color: @text-color; - margin-right: 16px; + margin-right: 0; } } .label { diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md index c77d1de0868bbcbf8accd742bbec063b99019119..c081e7943dc79f63808d45eb66339a03fc182c59 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'; diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index a6065e1f99ab94d369153bab98cf42b9d317deee..7394152f93eb59cb9cdfbf4f78ef1483f06237ab 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -123,27 +123,29 @@ class TagSelect extends PureComponent { return (
- - 全部 - - { - 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 c669684ba0473ac905fb16f496cd850b58d65ec6..bc02cc89032c2d13c873ec6d23a81ae780cd0d63 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 4557367654c928a0992fae66ffedc94baf606206..d9ca083bd2814efa067db26bae437b7fb8e8268f 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'; @@ -122,9 +122,10 @@ class BasicLayout extends React.PureComponent { } if (newNotice.extra && newNotice.status) { const color = ({ + todo: '', processing: 'blue', urgent: 'red', - doing: 'yellow', + doing: 'gold', })[newNotice.status]; newNotice.extra = {newNotice.extra}; } @@ -164,8 +165,8 @@ class BasicLayout extends React.PureComponent { const menu = ( - 个人中心 - 设置 + 个人中心 + 设置 退出登录 @@ -193,7 +194,7 @@ class BasicLayout extends React.PureComponent { >
- logo + logo

Ant Design Pro

@@ -204,7 +205,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)} @@ -239,16 +240,33 @@ class BasicLayout extends React.PureComponent { loading={fetchingNotices} popupAlign={{ offset: [20, -16] }} > - - - + + + - - - - {currentUser.name} - - + {currentUser.name ? ( + + + + {currentUser.name} + + + ) : }
diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less index 538e795322156dba7093dcc7c2a83f8d8bc1c46f..5aa45bc302366326812bc22ba8702b3c45958e84 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; @@ -13,7 +13,7 @@ line-height: 64px; padding-left: 32px; transition: all .3s; - background: #00284d; + background: #002140; overflow: hidden; img { display: inline-block; @@ -24,10 +24,11 @@ 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; + margin-top: -3px; + font-weight: bold; } } @@ -43,9 +44,15 @@ line-height: 64px; cursor: pointer; transition: all .3s; - padding: 0 28px; + padding: 0 24px; &:hover { - background: rgba(0, 0, 0, .04); + background: @primary-1; + } +} + +@media screen and (max-width: @screen-xs) { + .trigger { + display: none; } } @@ -64,7 +71,7 @@ } &:global(.ant-popover-open), &:hover { - background: rgba(0, 0, 0, .04); + background: @primary-1; } } .search { @@ -89,9 +96,7 @@ margin-right: 8px; } :global(.ant-dropdown-menu-item) { - padding-left: 16px; - padding-right: 16px; - width: 190px; + width: 160px; } } @@ -105,5 +110,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/models/global.js b/src/models/global.js index 53dcca099d497da95eacdf579811ed6ca1d39e63..ad47737cf8d9f5f4790e854b65d37b1e1208fabb 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 4221ae4d58c4a613663ceb3a012061bae4d947bb..197e3626e45970a1a2796ca11fd91fc513bec01f 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, + }, + }; + }, }, }; diff --git a/src/routes/Dashboard.js b/src/routes/Dashboard.js index 0bb12890427135ac0fb5e8a10d3f99c6e7d758b3..8c108bcb86bbeb9af588c6fcf55deb6c3536ccc4 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/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index 243662c7807bfa2c54eb539e3b874d31ba9de3b1..969f14cebffb2ac0d29e0890cb2f0390eb0cd5c3 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/src/routes/Dashboard/Workplace.js @@ -109,7 +109,7 @@ export default class Workplace extends PureComponent {
-

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

+

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

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

@@ -187,7 +187,7 @@ export default class Workplace extends PureComponent { activitiesList.map(item => ( } + avatar={} title={

{item.user.name} 在 xx 新建了项目 xxxx diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index eae686c03d212b1d1507030fc229872b2e8a721d..e551e183c5c690f64805fa5eccd31eda55458596 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/BasicForm.js b/src/routes/Forms/BasicForm.js index baaf8cfc95e03d179f1d2b0abf9868054851736f..da94f64b09e44cbf5453318dc0ccd996898a3e42 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 { )}
- + diff --git a/src/routes/Forms/StepForm/Step1.js b/src/routes/Forms/StepForm/Step1.js index 5e80030757dc787a8291a01ef0b3815265d24ee4..d570334188997f2035472389f8597d81eddf9f6d 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 36330941c18b496dd55842f42be2fec2659d8a24..9d98d456c9252a3274a9bd9934e4d81bc4b4f3cc 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 390bd9b0509e5247378b52aa11b8ef10096c084a..b5b78dc97a1b1e56d909b3449b77481052b72dcd 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, Divider } 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="所属部门" /> ); @@ -154,7 +177,7 @@ export default class TableForm extends PureComponent { return ( this.saveRow(e, record.key)}>保存 - + this.remove(e, record.key)}>删除 ); @@ -162,7 +185,7 @@ export default class TableForm extends PureComponent { return ( this.saveRow(e, record.key)}>保存 - + this.cancel(e, record.key)}>取消 ); @@ -170,8 +193,10 @@ export default class TableForm extends PureComponent { return ( 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 ca4b150a27f763b43e07fbcbdf8732924cb0154a..722aca805fcddd009a3c66687106a31bc7227ba8 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,21 +51,16 @@ 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; } } -// 避免表格编辑模式切换时抖动 -:global(.ant-table) td { - transition: none !important; -} - .editable { td { padding-top: 13px !important; @@ -81,10 +69,21 @@ } // 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; diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js index 2866d1b5b09c1d800abca7fca55fd9d196cbbbf6..0eb540852116bf531254a6f6d72e2fffa7724d96 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 8a5c958c66aa19b9de99fdb3094b8fc5ce8ea958..d6c3cfd8810174c1e474768267b759c1630e4f22 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 0ad34b5db1d0944a819433a7305a77c876bfb781..6d0aa290a4c8d3fbf6c244ac5086ec0ab3fb3c55 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 542ef5aa4e6d5cc3885dcd9aa8e1c25f34ce2be2..a42ebdddf63c04322fd0050c24c37c9a1041efe8 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 d8cf0dc747898e0a3684ede42b1b5d4366974dd3..2be27dfffaa7a61c3d1f5563e48c610588bcd658 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 2319fbeb8ddef52c80d0a471e15a9a0a467424d5..bcc02434200a77e3365a992afcea95106326bced 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/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js index 6a82ef0c531f3a8a3aa1ce7415a539e8ec2c718b..c55b6bfe6631aec2a06686467aa81655756ba679 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 6c8a2ab56f7a88097742bc426bf9a4529327246b..72d681becbe0b8a631e8c86bff628d3376d0fdf1 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 1e76f9a723d827ad2f38b053485bfa0d68c282a0..9685ff57739e333e5d1c54f28a1c049c5b736eae 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号 无 -
+
退货商品