Skip to content

L
LoginSystem
Commit 91de2397 by wangshufen
Options

feature:修改登录页UI

parent 13542d34
Showing with 295 additions and 242 deletions
jsconfig.json
......@@ -5,6 +5,6 @@
"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", {})
.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)
localStorage.removeItem('token');
this.props.appStore.toggleLogin(false);
this.props.history.push(this.props.location.pathname);
message.success('退出成功');
} else {
message.error(res.data.message);
......@@ -52,45 +55,51 @@ class HeaderBar extends React.Component {
.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{
.Docking-div {
/* display: flex; */
padding-top: 100px;
background-color: #fff;
......@@ -6,177 +6,167 @@
/* height: 100vh; */
display: flex;
justify-content: center;
}
.Docking-div .home-center{
.Docking-div .home-center {
display: flex;
}
.Docking-div .home-center .left-div{
width: 20%;
.Docking-div .home-center .center-div {
width: 50%;
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;
padding: 0 80px;
}
.Docking-div .left-div Button{
.Docking-div .center-div button {
margin-bottom: 10px;
height: 50px;
border: 0px;
border: 1px solid #f0f0f0;
border: 1px solid #000;
/* border-radius:0px; */
width: 100%;
width: 60%;
/* font-family: "Comic Sans MS" */
}
.Docking-div .right-div{
/* .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{
} */
.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{
.Docking-div .right-div .right-div-one .title-div {
width: 20%;
}
.sequencesearch-div .top-div {
margin-bottom: 100px;
}
.sequencesearch-div .sequence-center{
.sequencesearch-div .sequence-center {
display: flex;
align-items: center;
}
.sequencesearch-div .TextArea-div{
.sequencesearch-div .TextArea-div {
width: 50%;
}
.bottom-butn button{
.bottom-butn button {
height: 50px;
width: 200px;
}
.bottom-butn{
.bottom-butn {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.Jsme-div{
.Jsme-div {
display: flex;
align-items: center;
justify-content: center
justify-content: center;
}
.Docking-div .top-div{
.Docking-div .top-div {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
}
.Docking-div .Docking-center{
width: 1000px;
background-color: #f0f0f0;
.Docking-div .Docking-center {
width: 90%;
/* background-color: #f0f0f0; */
padding-bottom: 100px;
}
.Docking-div .title-text{
.Docking-div .title-text {
font-size: 28px;
font-weight: 600;
}
.Docking-div .pharmacophore-div{
.Docking-div .pharmacophore-div {
align-items: center;
justify-content: center;
}
.Docking-div .pharmacophore-div .pharmacophore-top{
.Docking-div .pharmacophore-div .pharmacophore-top {
display: flex;
align-items: center;
padding: 5px;
}
.Docking-div .displaydiv{
.Docking-div .displaydiv {
display: none;
}
.Docking-div .taskmanager-div{
.Docking-div .taskmanager-div {
width: 100%;
background-color: #fff;
padding: 10px;
}
.generalsearch-div{
.generalsearch-div {
}
.ant-advanced-search-form {
}
.ant-advanced-search-form {
}
.ant-advanced-search-form .ant-form-item {
.ant-advanced-search-form .ant-form-item {
display: flex;
}
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.Docking-center .logo-topdiv{
}
.Docking-center .logo-topdiv {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background-color: #fff;
}
.Docking-center .logo-topdiv img{
}
.Docking-center .logo-topdiv img {
height: 150px;
}
.Docking-center .pharmacophore-title{
}
.Docking-center .pharmacophore-title {
width: 50%;
}
.Docking-center .pharmacophore-title2{
}
.Docking-center .pharmacophore-title2 {
width: 25%;
}
.Computational-div{
.Computational-div {
display: flex;
align-items: center;
justify-content: center;
}
.Computational-div div{
}
.Computational-div div {
width: 587px;
padding-left: 100px;
font-family: "Comic Sans MS"
}
.DockingCenter{
font-family: 'Comic Sans MS';
}
.DockingCenter {
height: 30px;
}
.Speed-div{
}
.Speed-div {
height: 30px;
}
.Docking-center .home-center{
}
.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;
}
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,31 +247,43 @@ 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}
<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 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>
);
})}
</div>
<div className='right-div'>
<div className='gene-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/gene.png')} />
</div>
</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/index.js
import React from 'react'
import BGParticle from '../../utils/BGParticle'
import { notification } from 'antd'
import './style.css'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import Loading2 from '../../components/Loading2'
import {preloadingImages} from '../../utils/utils'
import LogoTitlte from '../../components/LogoTitlte/index'
import 'animate.css'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'
import Registered from './Registered'
import React from 'react';
import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd';
import './style.css';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2';
import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
import Registered from './Registered';
const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg'
const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg';
const imgs = [
'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
'http://47.99.130.140/imgs/photo.jpg',
]
];
@withRouter @inject('appStore') @observer
@withRouter
@inject('appStore')
@observer
class Login extends React.Component {
state = {
showBox: 'login', //展示当前表单
url: '', //背景图片
loading:false,
loading2:false,
}
loading: false,
loading2: false,
};
componentDidMount () {
const isLogin = this.props.appStore
if(isLogin){
this.props.history.go(1) //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
componentDidMount() {
const isLogin = this.props.appStore;
if (isLogin) {
this.props.history.go(1); //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
// this.props.appStore.toggleLogin(false) //也可以设置退出登录
}
// this.initPage()
// preloadingImages(imgs) //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
}
componentWillUnmount () {
this.particle && this.particle.destory()
notification.destroy()
componentWillUnmount() {
this.particle && this.particle.destory();
notification.destroy();
}
//载入页面时的一些处理
initPage = () => {
this.setState({
loading:true
})
this.props.appStore.initUsers()
this.loadImageAsync(url).then(url=>{
loading: true,
});
this.props.appStore.initUsers();
this.loadImageAsync(url)
.then((url) => {
this.setState({
loading:false,
url
loading: false,
url,
});
})
}).then(()=>{
.then(() => {
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox')
this.particle.init()
this.particle = new BGParticle('backgroundBox');
this.particle.init();
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
})
}
});
};
//切换showbox
switchShowBox = (box) => {
this.setState({
showBox: box
})
}
showBox: box,
});
};
//登录的背景图太大，等载入完后再显示，实际上是图片预加载，
loadImageAsync (url) {
loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(url);
};
image.onerror = function() {
console.log('图片载入错误')
console.log('图片载入错误');
};
image.src = url;
});
}
render () {
const {showBox,loading} = this.state
render() {
const { showBox, loading } = this.state;
return (
<div className='index-div'>
<LogoTitlte></LogoTitlte>
<LogoTitlte />
<div id='login-page'>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、Kinase 数据，并整合了蛋白结构-配体作用数据，以及开发知识图谱和计算工具来加速药物发现。</div>
<div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</div>
<div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligence drug discovery decisions. </div>
<div>Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various computational tools to discover high quality antibody drugs.</div>
<div>
{' '}
Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
chemists to make intelligence drug discovery decisions.{' '}
</div>
<div>
Our platform focuses on mining available GPCR knowledge and Kinase knowledge including corresponding drugs and ligands structure, protein structures and mutation data, involving
protein-ligand interaction data, creating knowledge graph and developing computational tools to accelerate drug discovery.
</div>
{
loading ?
<div>
<h3 style={styles.loadingTitle} className='animated bounceInLeft'>载入中...</h3>
<Loading2/>
</div>:
Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various
computational tools to discover high quality antibody drugs.
</div>
</div>
{loading ? (
<div>
<div id='backgroundBox' style={styles.backgroundBox}/>
<h3 style={styles.loadingTitle} className='animated bounceInLeft'>
载入中...
</h3>
<Loading2 />
</div>
) : (
<div>
<div id='backgroundBox' style={styles.backgroundBox} />
<div className='container'>
<LoginForm
className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<RegisterForm
activeKey={'3'}
className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<Registered
className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<RegisterForm activeKey={'3'} className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<Registered className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
</div>
</div>
}
)}
</div>
</div>
)
);
}
}
......@@ -140,30 +147,30 @@ const styles = {
height: '100vh',
// backgroundImage: `url(${url})`,
backgroundSize: 'cover',
transition:'all .5s',
transition: 'all .5s',
// backgroundColor: '#4FA1D9'
},
focus: {
// transform: 'scale(0.7)',
width: '20px',
opacity: 1
opacity: 1,
},
loadingBox:{
position:'fixed',
top:'50%',
left:'50%',
transform:'translate(-50%,-50%)'
loadingBox: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
},
loadingTitle:{
position:'fixed',
top:'50%',
left:'50%',
loadingTitle: {
position: 'fixed',
top: '50%',
left: '50%',
marginLeft: -45,
marginTop: -18,
color:'#000',
fontWeight:500,
fontSize:24
color: '#000',
fontWeight: 500,
fontSize: 24,
},
}
};
export default Login
export default Login;
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