main layout

2026-10-30 22:13:45 +00:00 · 2016-09-12 00:24:41 +08:00
parent 02babf74f7
commit 4ded5dbf91
3 changed files with 127 additions and 232 deletions
@@ -104,7 +104,10 @@ const Sider = React.createClass({
    const collapse = this.state.collapse
    return (
        <div>
-          <div className="ant-layout-logo"></div>
+          <div className="ant-layout-logo m-y">
+            <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
+            <span>Ant Design</span>
+         </div>
          <Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
            {this.menu}
          </Menu>
@@ -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
-
  /**
   * 是否要跨域请求
   *
@@ -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;
+          }
+        }
+      }
+    }
  }
 }