Skip to content

Commit 53bbdae

Browse files
weizhanzhanweizhanzhan
committed
优化主页
1 parent 79058a4 commit 53bbdae

File tree

12 files changed

+78
-69
lines changed

12 files changed

+78
-69
lines changed

Diff for: ‎src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function App() {
99
<Router>
1010
<Switch>
1111
<Route path='/' exact render={()=> (
12-
<Redirect to="/blog/list"/>
12+
<Redirect to="/dashboard/analysis"/>
1313
)}/>
1414
<Route path="/login" component={Login} />
1515
<Route component={Layout}/>

Diff for: ‎src/router/index.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11

22
const router = [
33
{
4-
path:'/blog',title:'Blog',name:'blog',
4+
path:'/dashboard',title:'Dashboard',name:'Dashboard', meta:{ icon : 'dashboard' },
55
children:[
6-
{ path:'/blog/list',title:"List",name:'list' ,component:()=>import('../views/Blog/List')},
7-
{ path:'/blog/create',title:"Create",name:'create' ,component:()=>import('../views/Blog/Create')}
6+
{ path:'/dashboard/analysis',title:"Analysis",name:'Analysis' ,component:()=>import('../views/Dashboard/Analysis')},
7+
{ path:'/dashboard/workplace',title:"Workplace",name:'dashboard' ,component:()=>import('../views/Dashboard/Workplace')}
88
]
99
},
1010
{
11-
path:'/account',title:'Account',name:'account',
11+
path:'/account',title:'Account',name:'account', meta:{ icon : 'user' },
1212
children:[
13-
{ path:'/account/index',title:"Index",name:'index' ,component:()=>import('../views/Account/index')},
14-
{ path:'/account/setting',title:"Setting",name:'setting' ,component:()=>import('../views/Account/Setting')},
13+
{ path:'/account/center',title:"Account Center",name:'index' ,component:()=>import('../views/Account/index')},
14+
{ path:'/account/setting',title:"Account Setting",name:'setting' ,component:()=>import('../views/Account/Setting')},
1515
{ path:'/account/more',title:"More" ,name:'more',component:()=>import('../views/Account/More'),
16-
children:[
17-
{ path:'/account/more/role',name:'role' ,title:'Role' ,component:()=>import('../views/Account/Role')}
16+
meta:{ icon : 'user-add' },
17+
children:[
18+
{ path:'/account/more/role',name:'role' ,title:'Account Role' ,component:()=>import('../views/Account/Role')}
1819
]
1920
}
2021
]

Diff for: ‎src/views/Account/More.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class AccountMore extends Component{
66
return(
77
<div>
88
<h1>个人主页More</h1>
9-
<Link to='/blog/list'>list</Link>
9+
<Link to='/dashboard/analysis'>list</Link>
1010
</div>
1111
)
1212
}

Diff for: ‎src/views/Account/Role.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class AccountRole extends Component{
66
return(
77
<div>
88
<h1>AccountRole</h1>
9-
<Link to='/blog/list'>list</Link>
9+
<Link to='/dashboard/analysis'>list</Link>
1010
</div>
1111
)
1212
}

Diff for: ‎src/views/Account/Setting.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class AccountSetting extends Component{
66
return(
77
<div>
88
<h1>个人设置</h1>
9-
<Link to='/blog/list'>list</Link>
9+
<Link to='/dashboard/analysis'>list</Link>
1010
</div>
1111
)
1212
}

Diff for: ‎src/views/Account/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class AccountIndex extends Component{
66
return(
77
<div>
88
<h1>个人主页</h1>
9-
<Link to='/blog/list'>list</Link>
9+
<Link to='/dashboard/analysis'>list</Link>
1010
</div>
1111
)
1212
}

Diff for: ‎src/views/Blog/Create/index.js renamed to ‎src/views/Dashboard/Analysis/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React,{Component} from 'react';
22
import { withRouter } from 'react-router';
33
import { Link } from 'react-router-dom'
4-
class CreateBlog extends Component{
4+
class Analysis extends Component{
55
render(){
66
return(
77
<div>
8-
<h1>Create</h1>
9-
<Link to='/blog/list'>list</Link>
8+
<h1>Analysis</h1>
9+
<Link to='/dashboard/analysis'>Analysis</Link>
1010
</div>
1111
)
1212
}
1313
}
14-
export default withRouter(CreateBlog)
14+
export default withRouter(Analysis)

Diff for: ‎src/views/Blog/List/index.js renamed to ‎src/views/Dashboard/Workplace/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React,{Component} from 'react';
22
import { withRouter } from 'react-router';
33
import { Link } from 'react-router-dom'
4-
class BlogList extends Component{
4+
class Workplace extends Component{
55
render(){
66
return(
77
<div>
8-
<h1>个人主页More</h1>
8+
<h1>Workplace</h1>
99
<Link to='/account/more/role'>role</Link>
1010
</div>
1111
)
1212
}
1313
}
14-
export default withRouter(BlogList)
14+
export default withRouter(Workplace)

Diff for: ‎src/views/Layout/components/Header.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77

88
}
99
.w_icon{
10-
font-size: 18px;
11-
color: #08c
10+
font-size: 20px;
11+
1212
}
1313
.w_icon.theme{
1414
color: var(--PC)
1515
}
1616
.w_theme_select{
1717
width: 130px;
18-
height: 100px;
18+
height: 150px;
1919
padding: 8px 0 8px 12px;
2020
background-color: #fff;
2121
background-clip: padding-box;

Diff for: ‎src/views/Layout/components/Hearder.js

+43-35
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React,{ Component } from 'react';
2-
import { Row, Col, Menu, Dropdown, Icon } from 'antd';
3-
import { Layout } from 'antd';
4-
import { message} from 'antd';
2+
import { Row, Col, Menu, Dropdown, Icon, Avatar } from 'antd';
3+
import { Layout, message } from 'antd';
4+
import { Link } from 'react-router-dom'
55
import './Header.less'
66
const { Header } = Layout;
77
class WHeader extends Component {
@@ -19,22 +19,27 @@ class WHeader extends Component {
1919
]
2020
}
2121
render(){
22-
const menu = (
22+
const Account = (
2323
<Menu>
24-
<Menu.Item>
25-
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
26-
1st menu item
27-
</a>
24+
<Menu.Item key="0">
25+
<Link to="/account/center"><Icon type="user" /> 个人中心</Link>
26+
</Menu.Item>
27+
<Menu.Item key="1">
28+
<Link to="/account/setting"><Icon type="setting" /><span> 个人设置</span></Link>
2829
</Menu.Item>
30+
<Menu.Divider />
31+
<Menu.Item key="3" >
32+
<Icon type="logout" /><span>退出</span>
33+
</Menu.Item>
34+
</Menu>
35+
);
36+
const Lang = (
37+
<Menu>
2938
<Menu.Item>
30-
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
31-
2nd menu item
32-
</a>
39+
<span> CN 简体中文 </span>
3340
</Menu.Item>
3441
<Menu.Item>
35-
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
36-
3rd menu item
37-
</a>
42+
<span> GB English </span>
3843
</Menu.Item>
3944
</Menu>
4045
);
@@ -55,29 +60,34 @@ class WHeader extends Component {
5560
})
5661
}
5762
</div>
63+
{/* <Divider /> */}
64+
{/* <h3 className="w_theme_select_title">Menu Color</h3>
65+
<div className="w_theme_content">
66+
67+
</div> */}
5868
</div>
5969
)
6070
return(
6171
<Header style={{ background: '#fff', padding: 0 }} >
62-
<Row>
63-
<Col span={8}>col-8</Col>
64-
<Col span={8} offset={8}>
65-
<Row>
66-
<Col className="w_col" span={8}>col-8</Col>
67-
<Dropdown overlay={Theme}>
68-
<Col className="w_col" span={4}>
69-
<Icon type="bg-colors" className="w_icon theme" />
70-
</Col>
71-
</Dropdown>
72-
<Dropdown overlay={menu}>
73-
<Col className="w_col" span={8}>
74-
<span>
75-
Hover me <Icon type="down" />
76-
</span>
77-
</Col>
78-
</Dropdown>
79-
</Row>
80-
</Col>
72+
<Row type="flex" justify="end">
73+
<Dropdown overlay={Account}>
74+
<Col className="w_col" xs={10} sm={10} md={8} lg={6} xl={3}>
75+
<div style={{lineHeight:4}}>
76+
<Avatar size="small" src="http://blog.zhanwei.xyz/ico.png" />
77+
<span> zhanzhan.wei</span>
78+
</div>
79+
</Col>
80+
</Dropdown>
81+
<Dropdown overlay={Lang}>
82+
<Col className="w_col" xs={5} sm={4} md={3} lg={2} xl={1}>
83+
<Icon type="global" className="w_icon" />
84+
</Col>
85+
</Dropdown>
86+
<Dropdown overlay={Theme}>
87+
<Col className="w_col" xs={5} sm={4} md={3} lg={2} xl={1}>
88+
<Icon type="bg-colors" className="w_icon theme" />
89+
</Col>
90+
</Dropdown>
8191
</Row>
8292
</Header>
8393
)
@@ -86,8 +96,6 @@ class WHeader extends Component {
8696
console.log(this.color,window.less)
8797
}
8898
changeColor(color){
89-
90-
// message.info('正在切换主题');
9199
window.less
92100
.modifyVars(
93101
{

Diff for: ‎src/views/Layout/components/Sider.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ class WSider extends Component{
2323
* 该生命周期函数内 改变state属性 不会导致无限循环
2424
* 在这里根据路由地址（this.props.history.location.pathname ！！！注意是props.history 不是 props.location ,后者是开始跳转的地址，前者才是跳转后的地址）
2525
* 根据地址解析openKeys（展开的subMenu）
26-
* 自己定义的路由表是有规则的，比方说 /blog/list, 那么我的以及路由就定义为/blog,二级路由为 /blog/list,
27-
* 那么我解析默认展开的subMenu的原理就是 通过二级地址/blog/list 去解析得到一级路由 /blog(三级路由以及多级路由以此类推)
26+
* 自己定义的路由表是有规则的，比方说 /dashboard/analysis, 那么我的以及路由就定义为/dashboard,二级路由为 /dashboard/analysis,
27+
* 那么我解析默认展开的subMenu的原理就是 通过二级地址/dashboard/analysis 去解析得到一级路由 /dashboard(三级路由以及多级路由以此类推)
2828
* 和这个生命周期函数能实现一样操作的方法，见我componentDidMount的方法 history.listen 一样可以监听到路由的变化
2929
*/
3030
this.setRouteChangeMenuState()
@@ -39,10 +39,10 @@ class WSider extends Component{
3939

4040
const { location:{ pathname } ,collapsed ,onCollapse} = this.props
4141
return(
42-
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
43-
<div className="logo" />
42+
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} theme="dark" >
43+
<div className="logo" ></div>
4444
<Menu
45-
theme="dark"
45+
theme="dark"
4646
selectedKeys={[pathname]}
4747
mode="inline"
4848
onOpenChange={this.onOpenChange}
@@ -89,8 +89,8 @@ class WSider extends Component{
8989
key={router.path}
9090
title={
9191
<span>
92-
<Icon type="user" />
93-
<span>{router.title}</span>
92+
<Icon type={router.meta.icon} />
93+
<span>{router.title}</span>
9494
</span>
9595
}
9696
>

Diff for: ‎src/views/Layout/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { Route, Switch } from 'react-router-dom'
44
import WSider from './components/Sider'
55
import WHeader from './components/Hearder'
66
import WBreadcrumb from './components/Breadcrumb'
7-
import BlogList from '../Blog/List'
8-
import BlogCreate from '../Blog/Create'
7+
import Analysis from '../Dashboard/Analysis'
8+
import Workplace from '../Dashboard/Workplace'
99
import AccountIndex from '../Account/index'
1010
import AccountSetting from '../Account/Setting'
1111
import AccountMore from '../Account/More'
@@ -30,8 +30,8 @@ class Layouts extends Component{
3030
<WBreadcrumb/>
3131
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
3232
<Switch>
33-
<Route path="/blog/list" component={BlogList} />
34-
<Route path="/blog/create" component={BlogCreate} />
33+
<Route path="/dashboard/analysis" component={Analysis} />
34+
<Route path="/dashboard/workplace" component={Workplace} />
3535
<Route path="/account/index" component={AccountIndex} />
3636
<Route path="/account/setting" component={AccountSetting} />
3737
<Route path="/account/more/role" component={ AccountRole }/>

0 commit comments

Comments
 (0)