Skip to content

L
LoginSystem
Commit 91de2397 by wangshufen
Options

feature:修改登录页UI

parent 13542d34
Showing with 306 additions and 260 deletions
jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
}
\ No newline at end of file
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/components/HeaderBar/index.js
import React from 'react'
import { Icon, Badge, Dropdown, Menu, Modal,message } from 'antd'
import screenfull from 'screenfull'
import { inject, observer } from 'mobx-react'
import { Link, withRouter } from 'react-router-dom'
import { isAuthenticated } from '../../utils/Session'
import request from "../../utils/request";
import React from 'react';
import { Icon, Badge, Dropdown, Menu, Modal, message } from 'antd';
import screenfull from 'screenfull';
import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom';
import { isAuthenticated } from '../../utils/Session';
import request from '../../utils/request';
//withRouter一定要写在前面，不然路由变化不会反映到props中去
@withRouter @inject('appStore') @observer
@withRouter
@inject('appStore')
@observer
class HeaderBar extends React.Component {
state = {
icon: 'arrows-alt',
count: 100,
visible: false,
avatar: require('./img/defaultUser.jpg')
}
avatar: require('./img/defaultUser.jpg'),
};
componentDidMount () {
componentDidMount() {
screenfull.onchange(() => {
this.setState({
icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
})
})
icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt',
});
});
}
componentWillUnmount () {
screenfull.off('change')
componentWillUnmount() {
screenfull.off('change');
}
toggle = () => {
this.props.onToggle()
}
this.props.onToggle();
};
screenfullToggle = () => {
if (screenfull.enabled) {
screenfull.toggle()
screenfull.toggle();
}
}
};
logout = () => {
request
.post("/yszh-login/pub/logout", {})
.then((res) => {
console.log(res);
if (res.data.code === 200) {
this.props.appStore.toggleLogin(false)
this.props.history.push(this.props.location.pathname)
message.success('退出成功');
} else {
message.error(res.data.message);
}
})
.catch((err) => {
console.error(err);
});
}
.post('/yszh-login/pub/logout')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
localStorage.removeItem('token');
this.props.appStore.toggleLogin(false);
this.props.history.push(this.props.location.pathname);
message.success('退出成功');
} else {
message.error(res.data.message);
}
})
.catch((err) => {
console.error(err);
});
};
render () {
const {icon, count, visible, avatar} = this.state
const {appStore, collapsed, location} = this.props
render() {
const { icon, count, visible, avatar } = this.state;
const { appStore, collapsed, location } = this.props;
const notLogin = (
<div>
<Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>&nbsp;
<img src={require('../../assets/img/defaultUser.jpg')} alt=""/>
<Link to={{ pathname: '/login', state: { from: location } }} style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
登录
</Link>
&nbsp;
<img src={require('../../assets/img/defaultUser.jpg')} alt='' />
</div>
)
);
const menu = (
<Menu className='menu'>
<Menu.ItemGroup title='用户中心' className='menu-group'>
{/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
<Menu.Item>个人信息</Menu.Item> */}
<Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
<Menu.Item>
<span onClick={this.logout}>退出登录</span>
</Menu.Item>
</Menu.ItemGroup>
{/* <Menu.ItemGroup title='设置中心' className='menu-group'>
<Menu.Item>个人设置</Menu.Item>
<Menu.Item>系统设置</Menu.Item>
</Menu.ItemGroup> */}
</Menu>
)
);
const login = (
<Dropdown overlay={menu}>
<img src={avatar} alt=""/>
<img src={avatar} alt='' />
</Dropdown>
)
);
return (
<div id='headerbar'>
{/* <Icon
type={collapsed ? 'menu-unfold' : 'menu-fold'}
className='trigger'
onClick={this.toggle}/> */}
<div style={{lineHeight: '64px', float: 'right'}}>
<div style={{ lineHeight: '64px', float: 'right' }}>
<ul className='header-ul'>
<li><span onClick={this.logout}>退出登录</span></li>
<li>
<span onClick={this.logout}>退出登录</span>
</li>
{/* <li><Icon type={icon} onClick={this.screenfullToggle}/></li> */}
{/* <li onClick={() => this.setState({count: 0})}>
<Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
......@@ -102,16 +111,12 @@ class HeaderBar extends React.Component {
</li> */}
</ul>
</div>
<Modal
footer={null} closable={false}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<img src={avatar} alt="" width='100%'/>
<Modal footer={null} closable={false} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
<img src={avatar} alt='' width='100%' />
</Modal>
</div>
)
);
}
}
export default HeaderBar
\ No newline at end of file
export default HeaderBar;
src/routes/Home/Docking/index.css
......@@ -85,7 +85,7 @@
}
.Docking-div .Docking-center{
width: 1000px;
background-color: #f0f0f0;
/* background-color: #f0f0f0; */
padding-bottom: 100px;
}
.Docking-div .title-text{
......
src/routes/Home/index.css
.Docking-div{
/* display: flex; */
padding-top: 100px;
background-color: #fff;
min-height: 100vh;
/* height: 100vh; */
display: flex;
justify-content: center;
}
.Docking-div .home-center{
display: flex;
.Docking-div {
/* display: flex; */
padding-top: 100px;
background-color: #fff;
min-height: 100vh;
/* height: 100vh; */
display: flex;
justify-content: center;
}
.Docking-div .home-center {
display: flex;
}
.Docking-div .home-center .left-div{
width: 20%;
display: flex;
/* align-items: center;
justify-content: center; */
flex-direction: column;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
.Docking-div .left-div Button{
.Docking-div .home-center .center-div {
width: 50%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 80px;
}
.Docking-div .center-div button {
margin-bottom: 10px;
height: 50px;
border: 0px;
border: 1px solid #f0f0f0;
/* border-radius:0px; */
width: 100%;
/* font-family: "Comic Sans MS" */
}
.Docking-div .right-div{
padding: 20px;
/* display: flex; */
align-items: center;
justify-content: center;
padding-left: 100px;
padding-right: 100px;
box-sizing: border-box;
width: 100%;
background-color: #fff;
}
.Docking-div .right-div .right-div-one{
display: flex;
align-items: center;
width: 100%;
/* justify-content: space-between; */
}
.Docking-div .right-div .right-div-one .title-div{
width: 20%;
height: 50px;
border: 0px;
border: 1px solid #000;
/* border-radius:0px; */
width: 60%;
/* font-family: "Comic Sans MS" */
}
/* .Docking-div .right-div {
padding: 20px;
padding-left: 100px;
padding-right: 100px;
box-sizing: border-box;
width: 100%;
background-color: #fff;
} */
.Docking-div .right-div .right-div-one {
display: flex;
align-items: center;
width: 100%;
/* justify-content: space-between; */
}
.Docking-div .right-div .right-div-one .title-div {
width: 20%;
}
.sequencesearch-div .top-div {
margin-bottom: 100px;
}
.sequencesearch-div .sequence-center{
display: flex;
align-items: center;
}
.sequencesearch-div .TextArea-div{
width: 50%;
}
.bottom-butn button{
height: 50px;
width: 200px;
}
.bottom-butn{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.Jsme-div{
display: flex;
align-items: center;
justify-content: center
}
.Docking-div .top-div{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
margin-bottom: 100px;
}
.sequencesearch-div .sequence-center {
display: flex;
align-items: center;
}
.sequencesearch-div .TextArea-div {
width: 50%;
}
.bottom-butn button {
height: 50px;
width: 200px;
}
.bottom-butn {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.Jsme-div {
display: flex;
align-items: center;
justify-content: center;
}
.Docking-div .top-div {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
}
.Docking-div .Docking-center {
width: 90%;
/* background-color: #f0f0f0; */
padding-bottom: 100px;
}
.Docking-div .title-text {
font-size: 28px;
font-weight: 600;
}
.Docking-div .pharmacophore-div {
align-items: center;
justify-content: center;
}
.Docking-div .pharmacophore-div .pharmacophore-top {
display: flex;
align-items: center;
padding: 5px;
}
.Docking-div .Docking-center{
width: 1000px;
background-color: #f0f0f0;
padding-bottom: 100px;
.Docking-div .displaydiv {
display: none;
}
.Docking-div .title-text{
font-size: 28px;
font-weight: 600;
.Docking-div .taskmanager-div {
width: 100%;
background-color: #fff;
padding: 10px;
}
.Docking-div .pharmacophore-div{
align-items: center;
justify-content: center;
.generalsearch-div {
}
.ant-advanced-search-form {
}
.Docking-div .pharmacophore-div .pharmacophore-top{
display: flex;
align-items: center;
padding: 5px;
.ant-advanced-search-form .ant-form-item {
display: flex;
}
.Docking-div .displaydiv{
display: none;
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.Docking-div .taskmanager-div{
width: 100%;
background-color: #fff;
padding: 10px;
.Docking-center .logo-topdiv {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background-color: #fff;
}
.Docking-center .logo-topdiv img {
height: 150px;
}
.Docking-center .pharmacophore-title {
width: 50%;
}
.Docking-center .pharmacophore-title2 {
width: 25%;
}
.Computational-div {
display: flex;
align-items: center;
justify-content: center;
}
.Computational-div div {
width: 587px;
padding-left: 100px;
font-family: 'Comic Sans MS';
}
.DockingCenter {
height: 30px;
}
.Speed-div {
height: 30px;
}
.Docking-center .home-center {
min-height: 500px;
background-color: #fff;
justify-content: center;
}
.home-center .item-type {
margin: 8px 0;
/* width: 40%; */
}
.home-center .type-name {
font-size: 18px;
font-weight: bold;
}
.home-center .link-btn {
text-align: right;
margin-top: 10px;
}
.ant-card-bordered {
border: none !important;
}
.ant-card-hoverable:hover {
box-shadow: none !important;
}
.generalsearch-div{
}
.ant-advanced-search-form {
}
.ant-advanced-search-form .ant-form-item {
display: flex;
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.Docking-center .logo-topdiv{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background-color: #fff;
}
.Docking-center .logo-topdiv img{
height: 150px;
}
.Docking-center .pharmacophore-title{
width: 50%;
}
.Docking-center .pharmacophore-title2{
width: 25%;
}
.Computational-div{
display: flex;
align-items: center;
justify-content: center;
}
.Computational-div div{
width: 587px;
padding-left: 100px;
font-family: "Comic Sans MS"
}
.DockingCenter{
height: 30px;
}
.Speed-div{
height: 30px;
}
.Docking-center .home-center{
min-height: 500px;
background-color: #fff;
}
src/routes/Home/index.js
......@@ -13,13 +13,54 @@ class Home extends React.Component {
state = {
// list: qs.parse(this.props.location.search.slice(1))
list: [],
permissionList: [],
};
componentDidMount() {
if (qs.parse(this.props.location.search.slice(1))) {
// debugger
let list = qs.parse(this.props.location.search.slice(1));
var arr = Array.from(Object.values(list), (x) => x);
// const perList=[
// {name:'小分子数据',
// sublist:[
// {}
// ]
// }
// ]
console.log('list', list);
let arr = Array.from(Object.values(list), (x) => x);
const newList = [
{
type: 1,
typeNameCn: '小分子数据',
typeName: 'Small Molecule Database',
sublist: [],
},
{
type: 2,
typeNameCn: '小分子计算',
typeName: 'Calculation Platform',
sublist: [],
},
{
type: 3,
typeNameCn: '大分子数据',
typeName: 'AntiBody Database',
sublist: [],
},
];
arr.forEach((item) => {
if (item.type == 1) {
newList[0].sublist.push(item);
} else if (item.type == 2) {
newList[1].sublist.push(item);
} else if (item.type == 3) {
newList[2].sublist.push(item);
}
});
console.log('newList', newList);
this.setState({
list: arr,
list: newList,
});
}
}
......@@ -168,7 +209,7 @@ class Home extends React.Component {
});
};
getOne = (e) => {
console.log('token=========',e + `?token=${localStorage.getItem('token')}`);
console.log('token=========', e + `?token=${localStorage.getItem('token')}`);
window.open(e + `?token=${localStorage.getItem('token')}`);
};
......@@ -190,16 +231,11 @@ class Home extends React.Component {
return (
<div className='Docking-div'>
<div className='Docking-center'>
{/* <div className="logo-topdiv">
<img
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/logo.png")}
/>
</div> */}
<div className='logo-topdiv'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/logo.png')} />
</div>
<div className='top-div'>
<Card
hoverable
style={{
width: '100%',
// backgroundColor: "#00FF00",
......@@ -211,30 +247,42 @@ class Home extends React.Component {
}}
>
<div className='Computational-div'>
<div>welcome to our platform</div>
<div>Welcome To Yashen Platform</div>
</div>
</Card>
</div>
<div className='home-center'>
<div className='left-div'>
<div className='mol-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/mol.png')} />
</div>
<div className='antibody-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/antibody.png')} />
</div>
</div>
<div className='center-div'>
{list.map((item, index) => {
return (
<Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}>
{item.name}
</Button>
<div className='item-type' onClick={() => this.getListOne(index, item.name)} key={index}>
<div className='type-name'>{item.typeName}</div>
<div className='link-btn'>
{item.sublist.map((ele, index) => {
return (
<Button size='large' onClick={() => this.getOne(ele.url)} key={index}>
{ele.name}
</Button>
);
})}
</div>
</div>
);
})}
</div>
<div className='right-div'>
{list.map((item, index) => {
return (
<a className={item.state ? '' : 'displaydiv'} size='large' onClick={() => this.getOne(item.url)} key={index}>
欢迎进入{item.name}平台
</a>
);
})}
<div className='gene-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/gene.png')} />
</div>
</div>
</div>
</div>
......
src/routes/Login/AccountLogin.js
......@@ -83,8 +83,12 @@ export default class ProteinView extends Component {
window.localStorage.setItem('token', res.data.result.token);
let indexVOList = res.data.result.indexVOList;
console.log('indexVOList', indexVOList);
// indexVOList.push({ name: 'Kinase', url: 'http://172.16.20.12:3001/#/Kinase', state: false });
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking', state: false });
// indexVOList.push({ name: 'Kinase', url: 'http://localhost:3002/#/Kinase'});
// indexVOList.push({ name: 'GPCR', url: 'http://localhost:3001/#/home' });
// indexVOList.push({ name: 'Antigen2', url: 'http://localhost:3002/#/home' });
// indexVOList.push({ name: 'PLDM', url: 'http://localhost:3003/#/login' });
// indexVOList.push({ name: 'KG', url: 'http://localhost:3004/#/login' });
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking'});
indexVOList[0].state = true;
console.log(indexVOList);
this.props.appStore.toggleLogin(true, { username: 'hahah' });
......
src/routes/Login/style.css
......@@ -160,7 +160,7 @@
padding: 50px;
box-sizing: border-box;
font-weight: 500;
font-size: 18px;
font-size: 15px;
/* background-color: pink!important; */
}
......
src/utils/request.js
......@@ -29,6 +29,7 @@ const request = axios.create({
headers: {
// 'Content-Type': 'application/json',
accessToken: token,
token,
},
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment