diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index 18d8d75..732775f 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -104,7 +104,10 @@ const Sider = React.createClass({
const collapse = this.state.collapse
return (
-
+
+

+
Ant Design
+
diff --git a/src/config.js b/src/config.js
index 99a7dee..50d3db8 100644
--- a/src/config.js
+++ b/src/config.js
@@ -7,13 +7,14 @@
// 遵循统一的规范, 好维护, 交给其他人也比较简单
module.exports = {
- name: 'Ant Design管理后台', // 项目的名字
- footer: 'Ant Design版权所有 © 2016', // footer中显示的字
-
+ name: 'Ant Design 管理后台',
+ footer: 'Ant Design Admin 版权所有 © 2016 由zuiidea支持',
+ logoImg:'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
+ logoText:'Ant Design',
debug: true, // 是否开启debug模式, 不会请求后端接口, 使用mock的数据
logLevel: 'debug', // 日志级别, 目前支持debug/info/warn/error 4种级别
- api: { // 对后端请求的相关配置
+ api: {
host: 'http://localhost', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS
path: '/api', // ajax请求的路径
timeout: 15000, // 请求的超时时间, 单位毫秒
@@ -21,20 +22,11 @@ module.exports = {
login: { // 登录相关配置
getCurrentUser: '/getCurrentUser', // 后端必须要提供接口校验当前用户的身份, 如果拿不到用户信息, 才会尝试登录
-
- // 登录有两种情况:
-
- // 1. 使用sso登录, 直接跳转就可以了
sso: '', // 是否使用单点登录? 是的话我会把地址encode后加到后面, 然后跳转, 如果这个是空字符串, 说明不使用单点登录
- // 2. 不使用sso, 使用我提供的一个登录界面
validate: '/login', // 校验用户信息, 表单的submit地址. 如果登录成功, 必须返回用户名
-
logout: '/logout', // 退出的url, 用户点击退出时, 浏览器会直接跳转到这个链接
},
- // 以下一些辅助的函数, 不要修改
- // 不能使用箭头函数, 会导致this是undefined
-
/**
* 是否要跨域请求
*
diff --git a/src/view/index.less b/src/view/index.less
index 81ff18d..d93520e 100644
--- a/src/view/index.less
+++ b/src/view/index.less
@@ -1,223 +1,82 @@
body {
- background: #f0f0f0;
height: 100%;
overflow-y: hidden;
+ background-color: #f8f8f8;
}
-// .main-wrapper {
-// background: #fff;
-// width: 100%;
-// margin: 0 auto;
-// overflow: hidden;
-// position: relative;
-// // min-width: 1200px;
-// .aside {
-// float: left;
-// // height: e("calc(100vh - 48px)");
-// height: 100vh;
-// .ant-menu-item-selected {
-// background-color: #333;
-// }
-// .side-menus {
-// // height: e("calc(100vh - 48px)");
-// height: 100vh;
-// position: absolute;
-// width: 60px;
-// overflow: hidden;
-// transition: width 0.3s ease;
-// left: 0;
-// z-index: 9999;
-// background: #404040;
-// &:hover{
-// width: 200px;
-// }
-// &.fixed-sider{
-// width: 200px;
-// position: relative;
-// .ant-menu-item {
-// a {
-// .text {
-// opacity: 1;
-// }
-// }
-// }
-// }
-// .ant-menu-item {
-// height: 48px;
-// line-height: 48px;
-// text-align: center;
-// padding: 0;
-// transition: background-color 0.3s ease;
-// &:hover {
-// background-color: #474747;
-// }
-// a {
-// width: 100%;
-// text-align: center;
-// .text {
-// opacity: 0;
-// transition: opacity 0.3s ease;
-// width: 60px;
-// display: inline-block;
-// text-align: left;
-// }
-// .anticon {
-// width: 60px;
-// margin-right: 0;
-// font-size: 14px;
-// }
-// }
-// }
-// &:hover {
-// .ant-menu-item {
-// a {
-// .text {
-// opacity: 1;
-// }
-// }
-// }
-// }
-// }
-// }
-// .content {
-// padding: 24px;
-// height: e("calc(100vh - 48px)");
-// margin-left: 60px;
-// background: #fff;
-// overflow: auto;
-// .ant-table-small {
-// border: none;
-// }
-// }
-// &.no-aside {
-// .content {
-// margin-left: 0;
-// padding: 24px;
-// }
-// }
-// }
-// .fixed-btn {
-// position: absolute;
-// bottom: 0;
-// left: 0;
-// width: 200px;
-// color: #666;
-// height: 48px;
-// z-index: 9999;
-// line-height: 48px;
-// background: #474747;
-// transition: all .3s ease;
-// cursor: pointer;
-// .text {
-// width: 60px;
-// display: inline-block;
-// text-align: left;
-// float: left;
-// }
-// .anticon {
-// width: 60px;
-// margin-right: 0;
-// float: left;
-// line-height: 48px;
-// }
-// &:hover{
-// color: #2db7f5;
-// background-color: #333;
-// }
-// }
+
.ant-layout-aside {
position: relative;
min-height: 100%;
-}
-.ant-layout-aside .ant-layout-logo {
- width: 150px;
- height: 32px;
- background: #333;
- border-radius: 6px;
- margin: 16px 24px 16px 28px;
- transition: all 0.3s ease;
-}
+ .ant-layout-header {
+ .ant-menu {
+ line-height: 47px;
+ }
-.ant-layout-aside-collapse .ant-layout-logo {
- width: 32px;
- margin: 16px;
- transition: all 0.3s ease;
-}
-
-.ant-layout-aside .ant-layout-sider {
- width: 224px;
- background: #404040;
- position: absolute;
- overflow: visible;
- padding-bottom: 24px;
- height: 100%;
- transition: all 0.3s ease;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider {
- width: 64px;
- transition: all 0.3s ease;
-}
-
-.ant-layout-aside .ant-layout-sider > .ant-menu {
- margin-bottom: 20px;
-}
-
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
- margin: 16px 0;
-}
-
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
- vertical-align: baseline;
- display: inline-block;
-}
-
-.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
- transition: font-size .3s;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
- transition: all 0s ease;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
- font-size: 16px;
- display: inline-block;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
- display: none;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
- background: #2db7f5;
- color: #fff;
- transition: all 0s ease;
-}
-
-.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
- display: inline-block;
- vertical-align: top;
- background: #2db7f5;
- color: #fff;
- padding-right: 16px;
- border-radius: 0 5px 5px 0;
-}
-
-/* 实际使用中需要改成 position: fixed */
-.ant-layout-aside {
- .ant-layout-header{
- background: #fff;
- height: 64px;
- border-bottom: 1px solid #e9e9e9;
+ .ant-menu-horizontal {
+ border: none;
+ }
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
- .ant-layout-breadcrumb{
- margin: 7px 0 -17px 24px;
+
+ .ant-layout-sider {
+ width: 224px;
+ background: #404040;
+ position: absolute;
+ overflow: visible;
+ padding-bottom: 24px;
+ height: 100%;
+ transition: all 0.3s ease;
+
+ & > .ant-menu {
+ margin-bottom: 20px;
+
+ & > .anticon {
+ transition: font-size 0.3s;
+ }
+
+ & > .ant-menu-item {
+ margin: 16px 0;
+
+ &.nav-text {
+ vertical-align: baseline;
+ display: inline-block;
+ }
+ }
+ }
+
+ .ant-layout-logo {
+ text-align: center;
+ height: 40px;
+ line-height: 40px;
+ cursor: pointer;
+
+ img {
+ width: 40px;
+ margin-right: 8px;
+ }
+
+ span {
+ vertical-align: text-bottom;
+ font-size: 16px;
+ text-transform: uppercase;
+ display: inline-block;
+ }
+ }
}
- .ant-layout-main{
+
+ .ant-layout-breadcrumb {
+ height: 48px;
+ line-height: 48px;
+ padding: 0 16px;
+ margin-bottom: -24px;
+ }
+
+ .ant-layout-main {
margin-left: 224px;
transition: all 0.3s ease;
}
+
.ant-aside-action {
height: 42px;
width: 224px;
@@ -230,31 +89,72 @@ body {
cursor: pointer;
transition: all 0.3s ease;
}
- .ant-layout-container{
+
+ .ant-layout-container {
margin: 24px 16px;
- .ant-layout-content{
+
+ .ant-layout-content {
background: #fff;
padding: 24px;
+ height: e("calc(100vh - 168px)");
}
}
- .ant-layout-footer{
- height: 64px;
- line-height: 64px;
+
+ .ant-layout-footer {
+ height: 48px;
+ line-height: 48px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
- border-top: 1px solid #e9e9e9;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
width: 100%;
}
- &.ant-layout-aside-collapse{
- .ant-aside-action{
+
+ &.ant-layout-aside-collapse {
+ .ant-aside-action {
width: 64px;
transition: all 0.3s ease;
}
- .ant-layout-main{
- margin-left: 64px;
- transition: all 0.3s ease;
- }
+
+ .ant-layout-main {
+ margin-left: 64px;
+ transition: all 0.3s ease;
+ }
+
+ .ant-layout-sider {
+ width: 64px;
+ transition: all 0.3s ease;
+
+ & > .ant-menu {
+ & > .ant-menu-item {
+ transition: all 0s ease;
+
+ &:hover {
+ background: #2db7f5;
+ color: #fff;
+ transition: all 0s ease;
+
+ .nav-text {
+ display: inline-block;
+ vertical-align: top;
+ background: #2db7f5;
+ color: #fff;
+ padding-right: 16px;
+ border-radius: 0 5px 5px 0;
+ }
+ }
+
+ .nav-text {
+ display: none;
+ }
+
+ & > .anticon {
+ font-size: 16px;
+ display: inline-block;
+ }
+ }
+ }
+ }
}
}