Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-29 04:14:12 +00:00
Code Issues Releases Wiki Activity

sider menu

Browse Source
This commit is contained in:
zuiidea
2016-10-14 21:21:24 +08:00
parent 1a3ea0f244
commit 2a750ea65b
19 changed files with 92 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Footer/index.js
-17
View File
@@ -1,17 +0,0 @@
import React from 'react';
import {BackTop} from 'antd';
import {config} from '../../utils/lib.js'
const Footer = React.createClass({
render() {
return (
<div>
<div className="ant-layout-footer">
{config.footer}
</div>
</div>
)
}
})
export default Footer;
src/components/Layout/Header/index.js
-29
View File
@@ -1,29 +0,0 @@
import React from 'react';
import { Icon, Menu, Dropdown } from 'antd';
import { config, ajax, signOut } from '../../utils/lib.js'
import './index.less';
const SubMenu = Menu.SubMenu;
const Header = React.createClass({
signOut(){
ajax({
url:config.user.signOut
})
},
render() {
return (
<div className='ant-layout-header'>
<Menu className="header-menu" mode="horizontal">
<SubMenu title={<span><Icon type="user" />{this.props.userName}</span>}>
<Menu.Item key="signOut">
<a onClick={this.signOut}>注销</a>
</Menu.Item>
</SubMenu>
</Menu>
</div>
);
}
})
module.exports = Header
src/components/Layout/Header/index.less
-8
View File
@@ -1,8 +0,0 @@
.ant-layout-header {
background: #fff;
.header-menu {
> li {
float: right;
}
}
}
src/components/layout/footer.jsx
+2 -1
View File
@@ -1,10 +1,11 @@
import React, {PropTypes} from 'react'
import styles from './main.less'
import {config} from '../../utils'
function Footer({location}) {
return (
<div className={styles.footer}>
底部
{config.footerText}
</div>
)
}
src/components/layout/main.less
+1 -1
View File
@@ -16,7 +16,7 @@
height: 40px;
line-height: 40px;
cursor: pointer;
margin: 16px 0;
margin: 28px 0;
img {
width: 40px;
src/components/layout/sider.jsx
+33 -35
View File
@@ -1,49 +1,47 @@
import React, { PropTypes } from 'react'
import { Menu, Icon } from 'antd'
import React, {PropTypes} from 'react'
import {Menu, Icon} from 'antd'
import { Link } from 'dva/router'
import styles from './main.less'
import {config, menu} from '../../utils'
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const getMenus = function (menuArray,parentPath){
parentPath = parentPath || '/'
return menuArray.map(item =>{
if(!!item.child){
return (
<Menu.SubMenu key={item.key} title={<span>{item.icon ? <Icon type={item.icon}/>: ''} {item.name}</span>}>
{getMenus(item.child,parentPath + item.key + '/')}
</Menu.SubMenu>
)
}else {
return (
<Menu.Item key={item.key}>
<Link to={parentPath + item.key}>
{item.icon ? <Icon type={item.icon}/>: ''}
{item.name}
</Link>
</Menu.Item>
)
}
})
}
function Sider({ location }) {
function Sider({location}) {
return (
<div>
<div className={styles.logo}>
<img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>Ant Design</span>
</div>
<Menu mode="inline" theme="dark" defaultSelectedKeys={['dashboard']}>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
<img src={config.logoSrc}/>
<span>{config.logoText}</span>
</div>
<Menu mode="inline" theme="dark" defaultSelectedKeys={['dashboard']}>
{getMenus(menu)}
</Menu>
</div>
)
}
Sider.propTypes = {
location: PropTypes.object,
location: PropTypes.object
}
export default Sider
src/config.js
-21
View File
@@ -1,21 +0,0 @@
module.exports = {
name: 'Ant Design 管理后台',
footer: 'Ant Design Admin 版权所有 © 2016 由 zuiidea 支持',
logoImg:'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
logoText:'Ant Design',
debug: true,
logLevel: 'debug',
needLogin:true,
api: {
host: 'http://localhost:8080',
path: '/api',
timeout: 15000,
},
user: {
info: '/getInfo',
signIn: '/signIn',
signOut:'/signOut',
},
};
src/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<title>Ant Design Admin</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
src/index.js
-1
View File
@@ -1,5 +1,4 @@
import './index.html'
import './index.less'
import dva from 'dva'
// 1. Initialize
src/index.less
-29
View File
@@ -1,29 +0,0 @@
.normal {
width: 200px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 20px #ccc;
}
.record {
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
color: #ccc;
}
.current {
text-align: center;
font-size: 40px;
padding: 40px 0;
}
.button {
text-align: center;
button {
width: 100px;
height: 40px;
background: #aaa;
color: #fff;
}
}
src/menu.js
-118
View File
@@ -1,118 +0,0 @@
module.exports = [
{
key: 'dashboard',
name: '仪表盘',
icon: 'laptop'
},
{
key: 'index',
name: '数据相关',
icon: 'file-text',
child: [
{
key: 'list',
name: '数据列表',
},
],
},
{
key: 'navigation',
name: '测试导航',
icon: 'setting',
child: [
{
key: 'navigation1',
name: '二级导航1',
},
{
key: 'navigation2',
name: '二级导航2',
child: [
{
key: 'navigation21',
name: '三级导航1',
},
{
key: 'navigation22',
name: '三级导航2',
},
],
},
],
},
// {
// key: 'test',
// name: '菜单三',
// icon: 'laptop',
// child: [
// {
// key: 'aaa',
// name: '选项a',
// },
// {
// key: 'bbb',
// name: '选项b',
// },
// {
// key: 'ccc',
// name: '选项c',
// },
// {
// key: 'sanjiaaa', // 最多只能到三级导航
// name: '三级导航aaa',
// child: [
// {
// key: '666aa',
// name: '选项6',
// },
// ],
// },
// {
// key: 'sanjibbb', // 最多只能到三级导航
// name: '三级导航bbb',
// child: [
// {
// key: '666bb',
// name: '选项6',
// },
// ],
// },
// ],
// },
// {
// key: 'menu4',
// name: '菜单四',
// icon: 'notification',
// child: [
// {
// key: 'menu4',
// name: '菜单四一',
// },
// ],
// },
// {
// key: 'menu5',
// name: '菜单五',
// icon: 'folder',
// child: [
// {
// key: 'menu51',
// name: '菜单五一',
// },
// {
// key: 'menu52',
// name: '菜单五二',
// },
// {
// key: 'menu53',
// name: '菜单五三',
// child: [
// {
// key: 'menu531',
// name: '菜单五三一',
// },
// ],
// },
// ],
// },
];
src/routes/dashboard.jsx
+2 -3
View File
@@ -1,14 +1,13 @@
import React, { PropTypes } from 'react'
import { Link } from 'dva/router'
import Main from '../components/layout/main'
import styles from './app.less'
function Dashboard() {
return (
<div className={styles.normal}>
<div>
<h1>Hello Antd.</h1>
<hr />
<ul className={styles.list}>
<ul>
<li>You can go to <Link to="/users">/users</Link></li>
</ul>
</div>
src/services/users.js
+1 -1
View File
@@ -1,4 +1,4 @@
import request from '../utils/request'
import { request } from '../utils'
import qs from 'qs'
export async function query(params) {
src/utils/Logger.js
-107
View File
@@ -1,107 +0,0 @@
import config from '../config'
class Logger {
static LOG_LEVEL_DEBUG = 1
static LOG_LEVEL_INFO = 2
static LOG_LEVEL_WARN = 3
static LOG_LEVEL_ERROR = 4
static loggerMap = new Map()
static defaultLogger = new Logger()
static getLogger(name) {
if (name && name !== '') {
if (Logger.loggerMap.has(name)) {
return Logger.loggerMap.get(name)
}
const logger = new Logger(name)
Logger.loggerMap.set(name, logger)
return logger
} else {
return Logger.defaultLogger
}
}
constructor(name) {
this.name = name
const configLogLevel = config.logLevel
if (configLogLevel === 'debug') {
this.logLevel = Logger.LOG_LEVEL_DEBUG
} else if (configLogLevel === 'info') {
this.logLevel = Logger.LOG_LEVEL_INFO
} else if (configLogLevel === 'warn') {
this.logLevel = Logger.LOG_LEVEL_WARN
} else if (configLogLevel === 'error') {
this.logLevel = Logger.LOG_LEVEL_ERROR
} else {
this.error('unsupported logLevel: %s, use INFO instead', configLogLevel)
this.logLevel = Logger.LOG_LEVEL_INFO
}
}
setLogLevel(newLogLevel) {
if (isNaN(newLogLevel)) {
this.error('setLogLevel error, not a number: %s', newLogLevel)
}
if (newLogLevel < 1 || newLogLevel > 4) {
this.error('setLogLevel error, input = %s, must between 1 and 4', newLogLevel)
}
this.logLevel = newLogLevel
}
info(pattern, ...args) {
if (this.logLevel > Logger.LOG_LEVEL_INFO) {
return
}
if (this.name) {
args.unshift(`${this.name}: ${pattern}`)
} else {
args.unshift(pattern)
console.log.apply(console, args)
}
}
error(pattern, ...args) {
if (this.logLevel > Logger.LOG_LEVEL_ERROR) {
return
}
args.unshift('background: red color: #bada55')
if (this.name) {
args.unshift(`%c${this.name}: ${pattern}`)
} else {
args.unshift(`%c${pattern}`)
console.error.apply(console, args)
}
}
debug(pattern, ...args) {
if (this.logLevel > Logger.LOG_LEVEL_DEBUG) {
return
}
args.unshift('background: black color: #bada55')
if (this.name) {
args.unshift(`%c${this.name}: ${pattern}`)
} else {
args.unshift(`%c${pattern}`)
console.debug.apply(console, args)
}
}
warn(pattern, ...args) {
if (this.logLevel > Logger.LOG_LEVEL_WARN) {
return
}
args.unshift('background: yellow color: black')
if (this.name) {
args.unshift(`%c${this.name}: ${pattern}`)
} else {
args.unshift(`%c${pattern}`)
console.warn.apply(console, args)
}
}
}
export default Logger
src/utils/config.js
+7
View File
@@ -0,0 +1,7 @@
module.exports = {
name: 'Ant Design Admin',
footerText: 'Ant Design Admin 版权所有 © 2016 由 zuiidea 支持',
logoSrc:'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
logoText:'Antd Admin',
needLogin:true,
};
src/utils/index.js
+8 -52
View File
@@ -1,53 +1,9 @@
/** 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
* 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* eg:
* (new Date()).format("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
* (new Date()).format("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).format("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).format("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,
"H+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
var week = {
"0": "/u65e5",
"1": "/u4e00",
"2": "/u4e8c",
"3": "/u4e09",
"4": "/u56db",
"5": "/u4e94",
"6": "/u516d"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
};
import config from './config'
import menu from './menu'
import request from './request'
/**
* 在当前日期的基础上再增加几天
*
* @param num 要增加的天数
*/
Date.prototype.plusDays = function (num) {
var tmp = new Date();
tmp.setDate(this.getDate() + num);
return tmp;
};
module.exports = {
config,
menu,
request,
}
src/utils/lib.js
-58
View File
@@ -1,58 +0,0 @@
import config from 'config'
import Logger from './logger'
import reqwest from 'reqwest'
function ajax(data){
if(config.debug && data.url.indexOf('http')<0){
setTimeout(function(){
if(data.url==config.user.info){
if(localStorage.getItem("username")&&localStorage.getItem("username")=="guest"&&
localStorage.getItem("password")&&localStorage.getItem("password")=='guest'){
data.success({
message:'登录成功',
isSuccess:true,
userName:"guest"
})
}else {
data.success({
message:'获取信息成功',
isSuccess:false,
userName:"guest"
})
}
}else if (data.url==config.user.signIn) {
if(data.complete){
data.complete()
}
if(data.data.username=='guest'&&data.data.password=='guest'){
localStorage.setItem("username","guest")
localStorage.setItem("password","guest")
data.success({
message:'登录成功',
isSuccess:true,
userName:"guest"
})
}else {
data.success({
message:'密码错误',
isSuccess:false
})
}
}else if (data.url==config.user.signOut) {
localStorage.removeItem("username")
localStorage.removeItem("password")
location.reload()
}
},500)
}else {
reqwest(data)
}
}
module.exports = {
config,
ajax,
Logger
}
src/utils/lib.less
-52
View File
@@ -1,52 +0,0 @@
@import "./utility.less";
// table
.ant-table {
.ant-table-thead > tr > th {
text-align: center;
}
td {
text-align: center;
}
}
.ant-table-small .ant-table-body > table{
padding: 0;
}
.ant-table-pagination {
float: none;
display: table;
margin: 16px auto;
}
// scrollbar
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-thumb {
width: 7px;
background-color: #b4babf;
border-radius: 7px;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
width: 15px;
}
::-webkit-scrollbar:hover {
background-color: transparent;
}
src/utils/menu.js
+37
View File
@@ -0,0 +1,37 @@
module.exports = [
{
key: 'dashboard',
name: '仪表盘',
icon: 'laptop'
},
{
key: 'users',
name: '用户管理',
icon: 'user',
},
{
key: 'navigation',
name: '测试导航',
icon: 'setting',
child: [
{
key: 'navigation1',
name: '二级导航1',
},
{
key: 'navigation2',
name: '二级导航2',
child: [
{
key: 'navigation21',
name: '三级导航1',
},
{
key: 'navigation22',
name: '三级导航2',
},
],
},
],
},
];