diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js index 20096fce3d70ffe15b72f8fd7a1270eb3e38d0d9..163727f80613031f1e5978ed1c572d37f54524b6 100644 --- a/.roadhogrc.mock.js +++ b/.roadhogrc.mock.js @@ -31,7 +31,7 @@ const proxy = { profile: '简单的介绍下自己', signature: '海纳百川,有容乃大', title: '交互专家', - group: '蚂蚁金服-平台数据技术事业群-基础平台部-用户体验技术部-UED', + group: '蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED', tags: [{ key: '0', label: '很有想法的', diff --git a/mock/api.js b/mock/api.js index e639bc6e4955ab3396d06eb8203b4964912642b5..a8b314f635f3d615cdae78bc1370f23be80b1bde 100644 --- a/mock/api.js +++ b/mock/api.js @@ -37,7 +37,7 @@ const avatars2 = [ const covers = [ 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', - 'https://gw.alipayobjects.com/zos/rmsportal/uVZonEtjWwmUZPBQfycs.png', + 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', ]; const desc = [ diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less index 732146a3c6356975a8eaf623d7eb4431a9997603..a8cea7c5e641fef456798b7a81d6fb64f3563f1b 100644 --- a/src/routes/Dashboard/Workplace.less +++ b/src/routes/Dashboard/Workplace.less @@ -87,20 +87,17 @@ display: block; margin: 12px 0; height: 24px; + color: @text-color; + transition: all .3s; .textOverflow(); .member { font-size: @font-size-base; - color: @text-color; line-height: 24px; vertical-align: top; margin-left: 12px; - transition: all .3s; - .textOverflow(); } &:hover { - span { - color: @primary-color; - } + color: @primary-color; } } } diff --git a/src/routes/List/Projects.js b/src/routes/List/Projects.js index 48e83c8f284da49e336f9e2de523cae28342e243..94d632824480604941554e771525e23e56870619 100644 --- a/src/routes/List/Projects.js +++ b/src/routes/List/Projects.js @@ -62,7 +62,7 @@ export default class CoverCardList extends PureComponent { } + cover={} > {item.title}} diff --git a/src/routes/UserCenter.js b/src/routes/UserCenter.js index c4f3ef8cf92b91fb42758c1261b09e8bce656574..c7d17c20ac36994b9b317afab592d8495d632711 100644 --- a/src/routes/UserCenter.js +++ b/src/routes/UserCenter.js @@ -1,9 +1,10 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; +import { Link } from 'dva/router'; import moment from 'moment'; import numeral from 'numeral'; import { List, Card, Row, Col, Icon, Dropdown, - Menu, Avatar, Tag, Divider, Tooltip, Spin } from 'antd'; + Menu, Avatar, Tag, Divider, Tooltip, Spin, Input } from 'antd'; import AvatarList from '../components/AvatarList'; import { formatWan } from '../utils/utils'; import styles from './UserCenter.less'; @@ -22,6 +23,9 @@ import stylesProjects from './List/Projects.less'; export default class UserCenter extends PureComponent { state = { key: 'article', + newTags: [], + inputVisible: false, + inputValue: '', } componentDidMount() { @@ -44,6 +48,32 @@ export default class UserCenter extends PureComponent { this.setState({ key }); } + showInput = () => { + this.setState({ inputVisible: true }, () => this.input.focus()); + } + + saveInputRef = (input) => { + this.input = input; + } + + handleInputChange = (e) => { + this.setState({ inputValue: e.target.value }); + } + + handleInputConfirm = () => { + const { state } = this; + const { inputValue } = state; + let { newTags } = state; + if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) { + newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }]; + } + this.setState({ + newTags, + inputVisible: false, + inputValue: '', + }); + } + renderArticles = (list, loading) => { const IconText = ({ type, text }) => ( @@ -171,7 +201,7 @@ export default class UserCenter extends PureComponent { } + cover={} > {item.title}} @@ -201,17 +231,18 @@ export default class UserCenter extends PureComponent { } render() { + const { key, newTags, inputVisible, inputValue } = this.state; const { list: { list }, listLoading, currentUser, currentUserLoading, project: { notice }, projectLoading } = this.props; const operationTabList = [{ key: 'article', - tab: '文章(8)', + tab: 文章 (8), }, { key: 'application', - tab: '应用(8)', + tab: 应用 (8), }, { key: 'project', - tab: '项目(8)', + tab: 项目 (8), }]; const contentMap = { article: this.renderArticles(list, listLoading), @@ -249,22 +280,42 @@ export default class UserCenter extends PureComponent { 标签 { - currentUser.tags.map(item => {item.label}) + currentUser.tags.concat(newTags).map(item => + {item.label}) } - - - + {inputVisible && ( + + )} + {!inputVisible && ( + + + + )} - + 团队 { notice.map(item => ( - - - {item.member} + + + + {item.member} + )) } @@ -283,7 +334,7 @@ export default class UserCenter extends PureComponent { tabList={operationTabList} onTabChange={this.onTabChange} > - {contentMap[this.state.key]} + {contentMap[key]} diff --git a/src/routes/UserCenter.less b/src/routes/UserCenter.less index 4fe92ba4fc5e8bda407802325a1fff944f82a314..b74e91b7b981ea09aa0cd1f476c9d4edbe1c9f4f 100644 --- a/src/routes/UserCenter.less +++ b/src/routes/UserCenter.less @@ -1,4 +1,5 @@ @import '~antd/lib/style/themes/default.less'; +@import "../utils/utils.less"; .avatarHolder { text-align: center; @@ -73,11 +74,16 @@ } } - .item { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + a { + display: block; margin-bottom: 24px; + color: @text-color; + transition: color .3s; + .textOverflow(); + + &:hover { + color: @primary-color; + } } } diff --git a/src/utils/utils.js b/src/utils/utils.js index bbdf52355094a426cf3ed4f233b742837619b6f5..0125082562581884f67a95f638ec522875749c79 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -169,7 +169,7 @@ export function formatWan(val) { result = ( {result} - 万 - + ); }