From 44ae14e27b28c8d6e2af48654613a5d25777f3bf Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Thu, 28 Sep 2017 19:41:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=B0=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E6=8C=87=E5=BC=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/GuideBtns/GuideBtns.js | 48 +++++++++++++++++++ client/components/Header/Header.js | 42 ++++++++++++---- .../UsernameAutoComplete.js | 6 +-- .../containers/Group/GroupList/GroupList.js | 48 ++++++++++++++----- .../Group/ProjectList/ProjectList.js | 30 ++++++++++-- client/reducer/modules/user.js | 30 +++++++++++- client/styles/common.scss | 19 ++++++++ server/controllers/user.js | 5 +- 8 files changed, 194 insertions(+), 34 deletions(-) create mode 100644 client/components/GuideBtns/GuideBtns.js diff --git a/client/components/GuideBtns/GuideBtns.js b/client/components/GuideBtns/GuideBtns.js new file mode 100644 index 00000000..c31dc678 --- /dev/null +++ b/client/components/GuideBtns/GuideBtns.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types'; +import { Button } from 'antd'; +import { connect } from 'react-redux' +import { changeStudyTip, finishStudy } from '../../reducer/modules/user.js'; + +@connect( + null, + { + changeStudyTip, + finishStudy + } +) +class GuideBtns extends Component { + constructor(props) { + super(props) + } + + static propTypes = { + changeStudyTip: PropTypes.func, + finishStudy: PropTypes.func, + isLast: PropTypes.bool + } + + // 点击下一步 + nextStep = () => { + this.props.changeStudyTip(); + if (this.props.isLast) { + this.props.finishStudy(); + } + } + + // 点击退出指引 + exitGuide = () => { + this.props.finishStudy(); + } + + render () { + console.log(this.props); + return ( +
+ + +
+ ) + } +} +export default GuideBtns; diff --git a/client/components/Header/Header.js b/client/components/Header/Header.js index 34c05f6e..7bda30a6 100755 --- a/client/components/Header/Header.js +++ b/client/components/Header/Header.js @@ -3,7 +3,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { Link } from 'react-router-dom' -import { Icon, Layout, Menu, Dropdown, message, Tooltip, Avatar } from 'antd' +import { Icon, Layout, Menu, Dropdown, message, Tooltip, Avatar, Popover } from 'antd' import { checkLoginState, logoutActions, loginTypeAction} from '../../reducer/modules/user' import { changeMenuItem } from '../../reducer/modules/menu' import { withRouter } from 'react-router'; @@ -11,6 +11,7 @@ import Srch from './Search/Search' const { Header } = Layout; import { logoSVG } from '../../common.js'; import Breadcrumb from '../Breadcrumb/Breadcrumb.js' +import GuideBtns from '../GuideBtns/GuideBtns.js'; const MenuUser = (props) => ( @@ -23,6 +24,15 @@ const MenuUser = (props) => ( ); +const tip = (
+

工具栏

+

搜索功能: 搜索分组与项目;

+

关注功能: 属于自己的收藏夹;

+

新建项目: 在任何页面都可以快速新建项目;

+

使用文档: 遇到问题的时候随时可以查看文档;

+

你还可以更换头像，便于同事在 YApi 里找到你 ~

+
); + MenuUser.propTypes={ user: PropTypes.string, msg: PropTypes.string, @@ -96,7 +106,9 @@ ToolUser.propTypes={ user: state.user.userName, uid: state.user.uid, msg: null, - login:state.user.isLogin + login:state.user.isLogin, + studyTip: state.user.studyTip, + study: state.user.study } }, { @@ -123,7 +135,9 @@ export default class HeaderCom extends Component { loginTypeAction:PropTypes.func, changeMenuItem:PropTypes.func, history: PropTypes.object, - location: PropTypes.object + location: PropTypes.object, + study: PropTypes.bool, + studyTip: PropTypes.number } linkTo = (e) =>{ if(e.key != '/doc'){ @@ -184,13 +198,21 @@ export default class HeaderCom extends Component {
{login? - + } + title={tip} + placement="bottomRight" + visible={(this.props.studyTip === 1 && !this.props.study) ? true : false} + > + + :""}
diff --git a/client/components/UsernameAutoComplete/UsernameAutoComplete.js b/client/components/UsernameAutoComplete/UsernameAutoComplete.js index 19e83ac0..a37976bc 100755 --- a/client/components/UsernameAutoComplete/UsernameAutoComplete.js +++ b/client/components/UsernameAutoComplete/UsernameAutoComplete.js @@ -93,14 +93,14 @@ class UsernameAutoComplete extends Component { render () { - const { dataSource, fetching, value } = this.state; + const { dataSource, fetching } = this.state; const children = dataSource.map((item, index) => ( )) return ( ) } diff --git a/client/containers/Group/GroupList/GroupList.js b/client/containers/Group/GroupList/GroupList.js index cbf7194f..a4e9482c 100755 --- a/client/containers/Group/GroupList/GroupList.js +++ b/client/containers/Group/GroupList/GroupList.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { Icon, Modal, Alert, Input, message, Menu, Row, Col, Dropdown } from 'antd' +import { Icon, Modal, Alert, Input, message, Menu, Row, Col, Dropdown, Popover } from 'antd' import { autobind } from 'core-decorators'; import axios from 'axios'; import { withRouter } from 'react-router-dom'; @@ -10,6 +10,7 @@ const Search = Input.Search; const TYPE_EDIT = 'edit'; const confirm = Modal.confirm; import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js'; +import GuideBtns from '../../../components/GuideBtns/GuideBtns.js'; import { fetchNewsData } from '../../../reducer/modules/news.js'; import { fetchGroupList, @@ -17,13 +18,20 @@ import { setGroupList } from '../../../reducer/modules/group.js' -import './GroupList.scss' +import './GroupList.scss'; + +const tip = (
+

欢迎使用 YApi ~

+

这里的 “个人空间” 是你自己才能看到的分组，你拥有这个分组的全部权限，可以在这个分组里尝试 YApi 的功能。

+
); @connect( state => ({ groupList: state.group.groupList, currGroup: state.group.currGroup, - curUserRole: state.user.role + curUserRole: state.user.role, + studyTip: state.user.studyTip, + study: state.user.study }), { fetchGroupList, @@ -44,6 +52,8 @@ export default class GroupList extends Component { match: PropTypes.object, history: PropTypes.object, curUserRole: PropTypes.string, + studyTip: PropTypes.number, + study: PropTypes.bool, fetchNewsData: PropTypes.func } @@ -236,13 +246,14 @@ export default class GroupList extends Component { } render() { + console.log(this.props); const { currGroup } = this.props; const delmark = this.showModal(TYPE_EDIT)}>编辑分组 const editmark = { this.showConfirm() }}>删除分组 - + const addmark = 添加分组 @@ -291,16 +302,27 @@ export default class GroupList extends Component { onClick={this.selectGroup} selectedKeys={[`${currGroup._id}`]} > - { - this.state.groupList.map((group) => ( - - {group.type === 'private' ? - : - - }{group.group_name} + {this.state.groupList.map((group) => { + if(group.type === 'private') { + return + + } + title={tip} + placement="right" + visible={(this.props.studyTip === 0 && !this.props.study) ? true : false} + > + {group.group_name} + - )) - } + } else { + return + + {group.group_name} + + } + })} { diff --git a/client/containers/Group/ProjectList/ProjectList.js b/client/containers/Group/ProjectList/ProjectList.js index 24f77bd7..751bda39 100755 --- a/client/containers/Group/ProjectList/ProjectList.js +++ b/client/containers/Group/ProjectList/ProjectList.js @@ -1,15 +1,23 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { Row, Col, Button, Tooltip } from 'antd'; +import { Row, Col, Button, Tooltip, Popover } from 'antd'; import { Link } from 'react-router-dom'; import { addProject, fetchProjectList, delProject, changeUpdateModal } from '../../../reducer/modules/project'; import ProjectCard from '../../../components/ProjectCard/ProjectCard.js'; import ErrMsg from '../../../components/ErrMsg/ErrMsg.js'; import { autobind } from 'core-decorators'; import { setBreadcrumb } from '../../../reducer/modules/user'; +import GuideBtns from '../../../components/GuideBtns/GuideBtns.js'; -import './ProjectList.scss' +import './ProjectList.scss'; + +const tip = (
+

项目列表

+

这里列出了分组下的所有项目。

+

成为分组成员即可在该分组下添加项目。

+

赶快创建属于你的第一个项目把 ~

+
); @connect( state => { @@ -18,7 +26,9 @@ import './ProjectList.scss' userInfo: state.project.userInfo, tableLoading: state.project.tableLoading, currGroup: state.group.currGroup, - currPage: state.project.currPage + currPage: state.project.currPage, + studyTip: state.user.studyTip, + study: state.user.study } }, { @@ -49,7 +59,9 @@ class ProjectList extends Component { tableLoading: PropTypes.bool, currGroup: PropTypes.object, setBreadcrumb: PropTypes.func, - currPage: PropTypes.number + currPage: PropTypes.number, + studyTip: PropTypes.number, + study: PropTypes.bool } // 取消修改 @@ -113,7 +125,15 @@ class ProjectList extends Component { {/(admin)|(owner)|(dev)/.test(this.props.currGroup.role) ? - : + } + title={tip} + placement="right" + visible={(this.props.studyTip === 2 && !this.props.study) ? true : false} + > + + : } diff --git a/client/reducer/modules/user.js b/client/reducer/modules/user.js index 7dfb5c09..ed774fae 100755 --- a/client/reducer/modules/user.js +++ b/client/reducer/modules/user.js @@ -7,6 +7,8 @@ const LOGIN_TYPE = 'yapi/user/LOGIN_TYPE'; const GET_LOGIN_STATE = 'yapi/user/GET_LOGIN_STATE'; const REGISTER = 'yapi/user/REGISTER'; const SET_BREADCRUMB = 'yapi/user/SET_BREADCRUMB'; +const CHANGE_STUDY_TIP = 'yapi/user/CHANGE_STUDY_TIP'; +const FINISH_STUDY = 'yapi/user/FINISH_STUDY'; // Reducer const LOADING_STATUS = 0; @@ -28,7 +30,8 @@ const initialState = { // }, { // name: '当前页面' // }] - breadcrumb: [] + breadcrumb: [], + studyTip: 0 }; export default (state = initialState, action) => { @@ -94,6 +97,18 @@ export default (state = initialState, action) => { breadcrumb: action.data }; } + case CHANGE_STUDY_TIP: { + return { + ...state, + studyTip: state.studyTip + 1 + } + } + case FINISH_STUDY: { + return { + ...state, + study: true + }; + } default: return state; } @@ -151,3 +166,16 @@ export function setBreadcrumb(data) { data } } + +export function changeStudyTip() { + return { + type: CHANGE_STUDY_TIP + } +} + +export function finishStudy() { + return { + type: FINISH_STUDY, + payload: axios.get('/api/user/up_study') + } +} diff --git a/client/styles/common.scss b/client/styles/common.scss index b4bac7a7..f778c3a7 100755 --- a/client/styles/common.scss +++ b/client/styles/common.scss @@ -171,3 +171,22 @@ em { .has-affix-footer { padding-bottom: .92rem; } + +.popover-index { + max-width: 3.2rem; + .ant-popover-title { + height: auto; + } + .title-container { + padding: .16rem 0; + .title { + text-align: center; + } + } + .btn-container { + text-align: center; + .btn { + margin: 0 .04rem; + } + } +} diff --git a/server/controllers/user.js b/server/controllers/user.js index fd15e290..e4df8b5d 100755 --- a/server/controllers/user.js +++ b/server/controllers/user.js @@ -86,7 +86,7 @@ class userController extends baseController { * @category user * @foldnumber 10 * @returns {Object} - * @example + * @example */ async upStudy(ctx) { @@ -306,7 +306,8 @@ class userController extends baseController { role: 'member', add_time: yapi.commons.time(), up_time: yapi.commons.time(), - type: "site" + type: "site", + study: false }; if (!data.username) {