default主题样式调整

.webpackrc

@@ -7,5 +7,6 @@
     "html": {
         "favicon": "./static/images/favicon.png",
         "template": "./src/index.ejs"
-    }
+    },
+    "theme": "./src/theme.js"
 }

src/components/admin/admin.less

@@ -1,16 +1,41 @@
 .admin-tabs {
     height: 100%;
+    padding: 12px;
     display: flex;
     flex-direction: column;
     background: #fff;
-    padding: 12px;
-    .ant-tabs-bar {
-        margin: 0;
+    box-shadow: 0 0 10px 0 rgba(41,54,72,0.10);
+    &> .ant-tabs-bar {
+        border: none;
+        margin: 0 0 12px 0;
+        &> .ant-tabs-nav-container {
+            .ant-tabs-nav-wrap {
+                .ant-tabs-tab {
+                    color: @tab-background-active;
+                    background: @tab-background;
+                    border-color: @tab-background-active;
+                    border-radius: 0;
+                    border-right-width: 0;
+                    margin: 0;
+                    width: 100px;
+                    text-align: center;
+                    &.ant-tabs-tab-active {
+                        color: #fff;
+                        background: @tab-background-active;
+                    }
+                    &:last-child {
+                        border-right-width: 1px;
+                    }
+                }
+            }
+        }
     }
-    .ant-tabs-content {
+    &> .ant-tabs-content {
         flex: auto;
         overflow: hidden;
-        border: none !important;
+        background:  #FAFAFA;
+        padding: 12px;
+        border: 1px solid rgba(0,0,0,0.10);
         .ant-tabs-tabpane {
             height: 100%;
         }

src/components/admin/userGroupManagement.jsx

@@ -74,11 +74,28 @@ class UserGroupManagement extends React.Component {
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = (userGroup.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
+        let userFilterLabel = (userGroup.userFilterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
 
         const columns = [{
             title: '用户',
             dataIndex: 'name',
-            width: 200
+            width: 200,
+            render: text => {
+                return (
+                    <span>
+                        { userFilterLabel ?
+                            ((text || '').split(new RegExp(`(${userFilterLabel})`, 'i')).map((fragment, i) => {
+                                return (
+                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === userFilterLabel.toLowerCase() ?
+                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                    fragment
+                                )
+                            }
+                            )) : text
+                        }
+                    </span>
+                )
+            }
         }, {
             title: '操作',
             width: 50,
@@ -115,18 +132,28 @@ class UserGroupManagement extends React.Component {
                             <Menu.Item key={l.code+''} style={{ display: l.visible ? 'block' : 'none' }} onClick={() => {
                                 dispatch({ type: 'userGroup/changeSelectedGroup', group: l });
                             }} >
-                                <span>
-                                    { filterLabel ?
-                                        ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
+                                <div className='item-title'>
+                                    <span className='label' title={l.name}>
+                                        { filterLabel ?
+                                            ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                                return (
+                                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                                    fragment
+                                                )
+                                            }
+                                            )) : <span>{l.name}</span>
                                         }
-                                        )) : l.name
-                                    }
-                                </span>
+                                    </span>
+                                    <div className='tools'>
+                                        <Icon className='tool' title='编辑' type='edit' onClick={() => {this.showDetailBox('modify')}}/>
+                                        <Icon className='tool' title='删除' type='delete' onClick={() => {
+                                            this.setState({
+                                                visibleDeleteBox: true
+                                            })
+                                        }}/>
+                                    </div>
+                                </div>
                             </Menu.Item>
                         ))}
                     </Menu>
@@ -141,27 +168,34 @@ class UserGroupManagement extends React.Component {
                     <div className='groupname'>
                         <span>{selectedGroup ? selectedGroup.name : ''}</span>
                         <div className='buttons'>
-                            {selectedGroup && <Button className='button delete-button' onClick={() => {
+                            <Search
+                                value={userGroup.userFilterLabel}
+                                placeholder="请输入关键字"
+                                onChange={e => {
+                                    dispatch({ type: 'userGroup/setUserFilterLabel', label: e.target.value });
+                                }}
+                            />
+                            {selectedGroup && <Button className='add-btn' onClick={() => {
                                 this.setState({
-                                    visibleDeleteBox: true
-                                })
+                                    visibleAddMemberBox: true
+                                });
                             }}>
-                                <Icon type="delete" />删除用户组
+                                <Icon type="plus-circle-o" />添加用户
                             </Button>}
-                            {visibleDeleteBox && <DeleteBox
-                                visibleBox={visibleDeleteBox}
-                                text={`确定要删除用户组【${selectedGroup.name}】吗？`}
+                            {this.state.visibleAddMemberBox && <AddMemberBox
+                                visibleBox={this.state.visibleAddMemberBox}
+                                title='添加用户组成员'
                                 hideBox={() => {
                                     this.setState({
-                                        visibleDeleteBox: false
-                                    })
+                                        visibleAddMemberBox: false
+                                    });
                                 }}
-                                okHandler={() =>{
-                                    dispatch({ type: 'userGroup/remoteDelete', group: selectedGroup });
-                            }} />}
-                            {selectedGroup && <Button className='button edit-button' onClick={() => {this.showDetailBox('modify')}}>
-                                <Icon type="edit" />编辑用户组
-                            </Button>}
+                                multiple={true}
+                                okHandler={(selectedUser) => {
+                                    selectedUser.length > 0 && dispatch({ type: 'userGroup/remoteMemberAdd', userList: selectedUser, group: selectedGroup });
+                                }}
+                                selectedUsers={selectedGroup.member}
+                            />}
                         </div>
                     </div>
                     <Table
@@ -176,32 +210,20 @@ class UserGroupManagement extends React.Component {
                             hideOnSinglePage: true
                         }}
                         columns={columns}
-                        dataSource={selectedGroup ? (selectedGroup.member.map((d, i) => ({...d, key: i})) || []) : []}
+                        dataSource={selectedGroup ? (selectedGroup.member.filter(m => m.name.search(new RegExp('(' + userFilterLabel + '){1}', 'ig')) > -1).map((d, i) => ({...d, key: i})) || []) : []}
                     />
-                    <div className='addbtn-area'>
-                        {selectedGroup && <Button className='add-btn' onClick={() => {
-                            this.setState({
-                                visibleAddMemberBox: true
-                            });
-                        }}>
-                            <Icon type="plus-circle-o" />添加用户
-                        </Button>}
-                        {this.state.visibleAddMemberBox && <AddMemberBox
-                            visibleBox={this.state.visibleAddMemberBox}
-                            title='添加用户组成员'
-                            hideBox={() => {
-                                this.setState({
-                                    visibleAddMemberBox: false
-                                });
-                            }}
-                            multiple={true}
-                            okHandler={(selectedUser) => {
-                                selectedUser.length > 0 && dispatch({ type: 'userGroup/remoteMemberAdd', userList: selectedUser, group: selectedGroup });
-                            }}
-                            selectedUsers={selectedGroup.member}
-                        />}
-                    </div>
                 </Content>
+                {visibleDeleteBox && <DeleteBox
+                    visibleBox={visibleDeleteBox}
+                    text={`确定要删除用户组【${selectedGroup.name}】吗？`}
+                    hideBox={() => {
+                        this.setState({
+                            visibleDeleteBox: false
+                        })
+                    }}
+                    okHandler={() =>{
+                        dispatch({ type: 'userGroup/remoteDelete', group: selectedGroup });
+                }} />}
             </Layout>
         )
     }

src/components/admin/userGroupManagement.less

@@ -1,14 +1,14 @@
 .group-layout {
     height: 100%;
-    background: white;
-    border: 1px solid #ccc;
+    background: #FAFAFA;
+    border: none;
     flex-direction: row;
-    .ant-layout-sider {
+    &>.ant-layout-sider {
         height: 100%;
         background: white;
-        .ant-layout-sider-children {
+        &>.ant-layout-sider-children {
             height: 100%;
-            border-right: 1px solid #ccc;
+            border-right: 1px solid #ededed;
             padding: 37px 5px;
             .search-area {
                 margin-top: -32px;
@@ -18,21 +18,53 @@
                 overflow-y: auto;
                 height: 100%;
                 border-right: none;
+                .item-title {
+                    display: flex;
+                    .label {
+                        width: 110px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    .tools {
+                        display: none;
+                        .tool {
+                            margin: 0 0 0 8px;
+                            color: rgba(0, 0, 0, 0.65);
+                            &:hover {
+                                color: #1890ff;
+                            }
+                        }
+                    }
+                    &:hover {
+                        .tools {
+                            display: block;
+                        }
+                    }
+                }
+            }
+            .add-btn {
+                width: 100%;
             }
         }
     }
-    .ant-layout-content {
-        padding: 56px 5px 37px 5px;
+    &>.ant-layout-content {
+        padding: 46px 0 0 0;
+        margin-left: 12px;
         overflow: hidden;
         .groupname {
-            height: 56px;
+            height: 46px;
             display: flex;
             justify-content: space-between;
-            margin-top: -56px;
-            line-height: 40px;
-            padding: 8px 8px 8px 5px;
+            margin-top: -46px;
+            line-height: 30px;
+            padding: 8px 8px 8px 12px;
+            color: #2c82be;
+            font-size: 16px;
+            border-radius: 4px 4px 0 0;
+            background: #e6eefe;
             .buttons {
-                .button {
+                display: flex;
+                button {
                     margin-left: 8px;
                 }
             }
@@ -43,7 +75,6 @@
                 height: 100%;
                 .ant-spin-container {
                     height: 100%;
-                    padding-bottom: 6px;
                     .ant-table {
                         height: 100%;
                         .ant-table-content {
@@ -51,9 +82,11 @@
                             .ant-table-scroll {
                                 height: 100%;
                                 .ant-table-body {
-                                    height: 100%;
                                     overflow-x: hidden !important;
                                 }
+                                .ant-table-placeholder {
+                                    height: calc(~'100% - 38px');
+                                }
                             }
                         }
                     }

src/components/admin/userManagement.less

@@ -61,104 +61,4 @@
             }
         }
     }
-}
-.popover-group {
-    width: 300px;
-    .grouptree-title {
-        .create-group {
-            cursor: pointer;
-            color: #40a9ff;
-        }
-    }
-    .ant-popover-inner-content {
-        cursor: default;
-        max-height: 60vh;
-        overflow: auto;
-    }
-    .tree-group {
-        li.drag-over {
-            input {
-                background-color: #40a9ff;
-            }
-        }
-        li {
-            .ant-tree-node-content-wrapper {
-                width: 90%;
-                height: 28px;
-                margin: 0 !important;
-                padding: 0;
-                background-color: transparent;
-
-                :hover {
-                    background-color: transparent !important;
-                }
-                .ant-tree-node-selected {
-                    background-color: transparent !important;
-                }
-                input {
-                    max-width: 180px;
-                    border: none;
-                }
-                .anticon-plus-circle-o {
-                    margin-left: 5px;
-                }
-                .anticon-minus-circle {
-                    margin-left: 5px;
-                }
-            }
-            .drag-over {
-                span[draggable] {
-                    opacity: .7;
-                }
-            }
-        }
-    }
-}
-.tree-group li.drag-over > span[draggable] {
-    opacity: .5;
-}
-
-.operationmenu {
-    padding: 0;
-    width: 120px;
-    .ant-dropdown-menu-item {
-        .anticon {
-            margin-right: 6px;
-        }
-    }
-    .ant-dropdown-menu-item-divider {
-        margin: 0;
-    }
-    .setgroupmenu {
-        .ant-dropdown-menu-submenu-title {
-            display: flex;
-        }
-    }
-}
-
-// .ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
-//     width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-//     height: 4px;
-// }
-// .ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-//     border-radius: 5px;
-//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-//     background: rgba(0,0,0,0.2);
-// }
-// .ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
-//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-//     border-radius: 0;
-//     background: rgba(0,0,0,0.1);
-// }
-
-.custom-filter-dropdown {
-    padding: 8px;
-    border-radius: 6px;
-    background: #fff;
-    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
-  }
-  
-  .custom-filter-dropdown input {
-    width: 130px;
-    margin-right: 8px;
-  }
+}

src/components/chart/list.jsx

@@ -137,7 +137,7 @@ class ChartList extends React.Component {
                 <Menu.Item disabled>
                     <Icon type="link" />分享
                 </Menu.Item>
-                {selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={() => {
+                {/* {selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={() => {
                     const { selectedRecord } = this.state;
                     // const selectedChartDataSourceCode = selectedRecord ? selectedRecord.code : '';
                     const selectedChartCode = selectedRecord ? selectedRecord.code : '';
@@ -147,7 +147,7 @@ class ChartList extends React.Component {
                     this.setState({visibleDistributeBox: true})
                 }}> 
                     <Icon type='share-alt'/>分发
-                </Menu.Item>}
+                </Menu.Item>} */}
                 { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.SubMenu className='setgroupmenu' title={<div><Icon style={{ marginRight: '6px' }} type='profile' />移动到</div>}>
                     {[<Menu.Item key='-1' onClick={() => {
                         dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: { code: '-1'} });

src/components/common/emptyContent/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const Content = () => {
-    return (<div className="ant-empty ant-empty-normal"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description">暂无数据</p></div>) 
+    return (<div className="ant-empty ant-empty-normal"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description" style={{ color: '#A2ACBA' }}>暂无数据</p></div>) 
 }
 
 export default Content

src/components/common/listFilter/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { DatePicker, Input, Select } from 'antd'
 import moment from 'moment'
+import './index.less'
 const { Search } = Input
 const { Option } = Select
 const { RangePicker } = DatePicker

src/components/common/listFilter/index.less

@@ -0,0 +1,11 @@
+.list-filter {
+    .ant-select:first-child {
+        .ant-select-selection.ant-select-selection--single {
+            border-right: none;
+            border-radius: 4px 0 0 4px;
+        }
+    }
+    .ant-select:last-child .ant-select-selection.ant-select-selection--single, .ant-input-search.ant-input-affix-wrapper>input, .ant-calendar-picker-input.ant-input {
+        border-radius: 0 4px 4px 0;
+    }
+}

src/components/common/navigator.jsx

@@ -43,7 +43,7 @@ class Navigator extends React.Component {
 
         return <div className='navigator'>
             <div className='navigator-left'>
-                LOGO
+                <img src='../../../static/images/uas.png' alt='LOGO'/>
             </div>
             <div className='navigator-content'>
                 {currentUser.role === 'admin' && <Menu
@@ -52,13 +52,13 @@ class Navigator extends React.Component {
                     mode="horizontal"
                 >     
                     <Menu.Item className='nav-page' key="home">
-                        <Link to='/home'><Icon type="home" />首页</Link>
+                        <Link to='/home'>首页</Link>
                     </Menu.Item>
                     <Menu.Item className='nav-page' key="workshop">
-                        <Link to={lastWorkshopPage}><Icon type="fund" />报表制作</Link>
+                        <Link to={lastWorkshopPage}>报表制作</Link>
                     </Menu.Item>
                     <Menu.Item className='nav-page' key="setting">
-                        <Link to={lastSettingPage}><Icon type="setting" />系统管理</Link>
+                        <Link to={lastSettingPage}>系统管理</Link>
                     </Menu.Item>
                 </Menu>}
             </div>

src/components/common/navigator.less

@@ -1,7 +1,6 @@
 .navigator {
     display: flex;
     justify-content: space-between;
-    background: white;
     height: 100%;
     padding: 0 24px;
     .navigator-menu {
@@ -29,16 +28,16 @@
                 transition: width .25s cubic-bezier(0.31, 0.93, 1, 1);
             }
         }
-        .ant-menu-item-selected {
+        .nav-page.ant-menu-item-selected {
             ::after {
                 z-index: 1;
                 width: calc(~"100% - 8px");
                 box-shadow: inset 0 2px #1890ff;
             }
         }
-        .ant-menu-item-active {
+        .nav-page.ant-menu-item-active {
             ::after {
-                width: calc(100% - 8px);
+                width: calc(~"100% - 8px");
             }
         }
     }

src/components/dashboard/list.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Button, Icon, Table, Menu, Dropdown, Card, Col, Row, Select, DatePicker } from 'antd'
+import { Layout, Button, Icon, Table, Menu, Dropdown, Card, Col, Row, Select } from 'antd'
 import { connect } from 'dva'
 import TransferBox from '../common/selectUserBox/selectUserBox';
 import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
@@ -177,9 +177,9 @@ class DashboardList extends React.Component {
                     <Icon type='share-alt'/>分享
                 </Menu.Item>}
                 { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Divider />}
-                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={this.getShareList}> 
+                {/* { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={this.getShareList}> 
                     <Icon type='share-alt'/>分发
-                </Menu.Item>}
+                </Menu.Item>} */}
                 { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item
                     onClick={()=>{
                         let obj = {visibleTransferBox: true};

src/components/dashboard/menu.jsx

@@ -88,7 +88,7 @@ class DashboardMenu extends React.Component {
         let ftree = this.cloneTree(tree);
         ftree = this.reduceTree(ftree, regLabel)
         return ftree.filter(t => (onlyMenu ? t.type === 'menu' : true)).sort((a, b) => a.index - b.index).map(t => {
-            let title = <div className='node-title'>
+            let title = <div className={`node-title node-${t.type}`}>
                 <span>{ (t.code !== editingKey) ?
                    ( !!regLabel && (searchMenu || t.type === 'dashboard') ? (<div className='label'> <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
                         { t.type === 'dashboard' && <Icon style={{ marginRight: '8px' }} type="pushpin" /> }
@@ -99,7 +99,26 @@ class DashboardMenu extends React.Component {
                                 fragment
                             )
                         }) }                       
-                   </span> </div>  ) : <div className='label'>
+                   </span> </div>  ) : <div className='label' onDoubleClick={() => {
+                        const { dashboard, model, onExpand: propsOnExpand } = this.props;
+                        const { menuExpandedKeys } = model;
+                        const { menuList } = dashboard;
+                        let expandedMenus = [];
+                        let menu = [{ code: '-1', name: '报表目录' }].concat(menuList).find(l => l.code === t.code);
+                        let menus = this.getParens(menu);
+                        // 去掉非目录节点（只有第一个会出现非目录节点）
+                        if(menus[0].type !== 'menu') {
+                            menus.shift();
+                        }
+                        // 已展开时关闭该目录
+                        if(!!menuExpandedKeys.find(s => s === t.code)) {
+                            menus.shift();
+                        }
+                        expandedMenus = expandedMenus.concat(menus);
+                        if(typeof propsOnExpand === 'function') {
+                            propsOnExpand(expandedMenus);
+                        }
+                    }}>
                         <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
                             { t.type === 'dashboard' && <Icon style={{ marginRight: '8px' }} type="pushpin" /> }
                             { t.name }
@@ -146,7 +165,7 @@ class DashboardMenu extends React.Component {
                 </div>}
             </div>
 
-            return <TreeNode title={title} key={t.code}>
+            return <TreeNode title={title} key={t.code} >
                 { t.children && t.children.length > 0 && this.generateMenu(t.children, regLabel) }
             </TreeNode>
         });
@@ -157,7 +176,7 @@ class DashboardMenu extends React.Component {
         const { menuList } = dashboard;
         let expandedMenus = [];
         for(let i = 0; i < keys.length; i++) {
-            let menu = [{ code: '-1', name: '全部目录' }].concat(menuList).find(l => l.code === keys[i]);
+            let menu = [{ code: '-1', name: '报表目录' }].concat(menuList).find(l => l.code === keys[i]);
             expandedMenus.push(menu);
         }
         if(typeof propsOnExpand === 'function') {
@@ -168,7 +187,7 @@ class DashboardMenu extends React.Component {
     onSelect = (selectedKeys, info) => {
         const { dashboard, onSelect: propsOnSelect } = this.props;
         const { menuList } = dashboard;
-        let selectedMenu = [{ code: '-1', name: '全部目录' }].concat(menuList).find(l => l.code === selectedKeys[0]);
+        let selectedMenu = [{ code: '-1', name: '报表目录' }].concat(menuList).find(l => l.code === selectedKeys[0]);
 
         if(typeof propsOnSelect === 'function') {
             propsOnSelect(selectedMenu);
@@ -209,7 +228,7 @@ class DashboardMenu extends React.Component {
         dispatch({ type: 'dashboard/remoteAddMenu', menu }).then(res => {
             if(res && typeof onExpand === 'function') {
                 let expandedMenus = [];
-                [{ code: '-1', name: '全部目录' }].concat(menuList).forEach(m => {
+                [{ code: '-1', name: '报表目录' }].concat(menuList).forEach(m => {
                     if(menuExpandedKeys.indexOf(m.code) > -1) {
                         expandedMenus.push(m); 
                     }
@@ -223,32 +242,13 @@ class DashboardMenu extends React.Component {
     getParens = (menu) => {
         const { menuList } = this.props.dashboard;
         let pmenus = [menu];
-        let fmenu = menuList.find(l => l.code === menu.pcode);
+        let fmenu = [{ code: '-1', name: '报表目录' }].concat(menuList).find(l => l.code === menu.pcode);
         if(fmenu) {
             pmenus = pmenus.concat(this.getParens(fmenu));
         }
         return pmenus;
     }
 
-    onDragEnter = (info) => {
-        // console.log(info);
-        // expandedKeys 需要受控时设置
-        // this.setState({
-        //   expandedKeys: info.expandedKeys,
-        // });
-    }
-
-    onDrop = (info) => {
-        const { dispatch } = this.props;
-        const dropKey = info.node.props.eventKey;
-        const dragKey = info.dragNode.props.eventKey;
-        const dropPos = info.node.props.pos.split('-');
-        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
-    
-        console.log(dropKey, dragKey, dropPos, dropPosition, info);
-        dispatch({ type: 'dashboard/transferMenu', dropKey, dragKey });
-    }
-
     render() {
         const { dashboard, dispatch, hideHeader, editable, model } = this.props;
         const { visibleDeleteBox, selectedMenu } = this.state;
@@ -277,16 +277,26 @@ class DashboardMenu extends React.Component {
                     selectedKeys={menuSelectedKeys}
                     onSelect={this.onSelect}
                     autoExpandParent={menuAutoExpandParent}
-                    draggable
-                    onDragEnter={this.onDragEnter}
-                    onDrop={this.onDrop}
                 >
                     <TreeNode title={
-                        <div className='node-title'>
-                            <span><div className='label'><span>全部目录</span></div></span>
+                        <div className='node-title node-menu'>
+                            <span><div className='label' onDoubleClick={() => {
+                                const { model, onExpand: propsOnExpand } = this.props;
+                                const { menuExpandedKeys } = model;
+                                let expandedMenus = [];
+                                let menus = [{ code: '-1', name: '报表目录' }]
+                                // 已展开时关闭该目录
+                                if(!!menuExpandedKeys.find(s => s === '-1')) {
+                                    menus.shift();
+                                }
+                                expandedMenus = expandedMenus.concat(menus);
+                                if(typeof propsOnExpand === 'function') {
+                                    propsOnExpand(expandedMenus);
+                                }
+                            }}><span>报表目录</span></div></span>
                             {editable && <div className='tools'>
                                 <Icon type='plus' onClick={() => {
-                                    this.onAddClick({ code: '-1', name: '全部目录', pcode: '-1', childrenCount: menuTree.length })
+                                    this.onAddClick({ code: '-1', name: '报表目录', pcode: '-1', childrenCount: menuTree.length })
                                 }}/>
                             </div>}
                         </div>

src/components/dashboard/menu.less

@@ -38,6 +38,7 @@
                     .label {
                         overflow: hidden;
                         text-overflow: ellipsis;
+                        user-select:none;
                     }
                 }
                 .tools {

src/components/dashboardDesigner/layout.less

@@ -8,7 +8,7 @@
         line-height: 40px;
         border-width: 1px 0;
         border-style: solid;
-        border-color: #CCCCCC;
+        border-color: @border-color-base;
     }
     &>.ant-layout-content {
         flex: 1;
@@ -25,10 +25,11 @@
                     flex-direction: row;
                     overflow: hidden;
                     height: 100%;
+                    background: @content-background-color;
                     &>.viewlayout {
                         padding: 5px 5px 50px 5px;
                         overflow-x: hidden;
-                        border: 1px solid #CCCCCC;
+                        border: 1px solid @border-color-base;
                     }
                     .config-sider {
                         border: none;
@@ -36,7 +37,7 @@
                             margin: 0 10px 0 0;
                             padding: 5px;
                             overflow: auto;
-                            border: 1px solid #CCCCCC;
+                            border: 1px solid @border-color-base;
                         }
                         &-closed {
                             .ant-layout-sider-children {
@@ -57,7 +58,7 @@
                 line-height: 37px;
                 border-width: 1px 0;
                 border-style: solid;
-                border-color: #CCCCCC;
+                border-color: @border-color-base;
                 display: flex;
                 justify-content: space-between;
                 border: none;
@@ -65,8 +66,7 @@
                     display: flex;
                     width: 100%;
                     flex-wrap: wrap;
-                    border-top: 1px solid #ccc;
-                    border-bottom: 1px solid #ccc;
+                    border-top: 1px solid @border-color-base;
                     padding-left: 8px;
                     .filter-tag {
                         max-width: 200px;
@@ -94,7 +94,7 @@
         background: none;
         border-width: 0 1px 0 1px;
         border-style: solid;
-        border-color: #CCCCCC;
+        border-color: @border-color-base;
         .ant-form-item {
             margin-bottom: 0;
         }

src/components/homePage/collection.jsx

@@ -5,6 +5,13 @@ import EmptyContent from '../common/emptyContent/index'
 import './collection.less'
 
 class Collection extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            activeKey: ['1']
+        }
+    }
+
     openTab = (c) => {
         const { dispatch } = this.props;
         dispatch({ type: 'home/openTab', tab: {
@@ -49,13 +56,23 @@ class Collection extends React.Component {
     }
 
     render() {
+        const { activeKey } = this.state;
         return <Collapse
             className='collapse-collection'
             bordered={false}
             defaultActiveKey={['1']}
-            expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
+            activeKey={activeKey}
+            expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} onClick={() => {
+                this.setState({
+                    activeKey: activeKey.length > 0 ? [] : ['1']
+                });
+            }}/>}
         >
-            <Collapse.Panel header='我的收藏' key="1">
+            <Collapse.Panel header={<div onDoubleClick={() => {
+                this.setState({
+                    activeKey: activeKey.length > 0 ? [] : ['1']
+                });
+            }}>我的收藏</div>} key="1">
                 { this.generateCollectionMenus() }
             </Collapse.Panel>
         </Collapse>

src/components/homePage/collection.less

@@ -3,7 +3,7 @@
     &>.ant-collapse-item {
         border: none;
         &>.ant-collapse-header {
-            color: rgba(0, 0, 0, 0.65);
+            user-select:none;
             padding: 0 16px 0 30px;
             &>.ant-collapse-arrow {
                 left: 6px;
@@ -17,6 +17,7 @@
             &>.ant-collapse-content-box {
                 padding: 8px 16px;
                 &>.item {
+                    user-select:none;
                     padding: 6px 0 5px 0;
                 }
             }

src/components/homePage/index.less

@@ -1,19 +1,21 @@
 .layout-home {
     .sider-home {
         padding: 0;
-        border-right: 1px solid #ccc;
+        border-right: 1px solid @border-color-base;
         button {
             padding: 0 8px;
             margin: 0 0 12px 0;
         }
     }
     .content-home {
+        background: @content-background-color;
         &>.ant-tabs {
             height: 100%;
             padding-top: 56px;
             &>.ant-tabs-bar {
-                margin: -40px 16px 0;
                 height: 40px;
+                margin: -40px 16px 0;
+                border: none;
             }
             &>.ant-tabs-content {
                 height: 100%;

src/components/homePage/toolbar.less

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid @border-color-base;
     &>.toos {
         display: flex;
         margin-right: 16px;

src/components/setting/index.jsx

@@ -25,16 +25,16 @@ class Setting extends React.Component {
 
         return <Layout className='layout-setting'>
             <Sider
-                width={100}
+                width={160}
                 collapsible
                 collapsedWidth={0}
                 trigger={null}
                 theme='light'
                 className='sider-setting'
             >
-                <Link to='/setting/admin'><Button className='ant-btn-block' type={(paths[1] === 'admin' || !paths[1]) ? 'primary' : 'default'} >用户管理</Button></Link>
-                <Link to='/setting/authority'><Button disabled className='ant-btn-block' type={paths[1] === 'authority' ? 'primary' : 'default'} >权限管理</Button></Link>
-                <Link to='/setting/logs'><Button className='ant-btn-block' type={paths[1] === 'logs' ? 'primary' : 'default'} >操作日志</Button></Link>
+                <Link to='/setting/admin'><Button className={`ant-btn-block${(paths[1] === 'admin' || !paths[1]) ? ' selected' : ''}`} type={(paths[1] === 'admin' || !paths[1]) ? 'primary' : 'default'} >用户管理</Button></Link>
+                <Link to='/setting/authority'><Button disabled className={`ant-btn-block${(paths[1] === 'authority' || !paths[1]) ? ' selected' : ''}`} type={paths[1] === 'authority' ? 'primary' : 'default'} >权限管理</Button></Link>
+                <Link to='/setting/logs'><Button disabled className={`ant-btn-block${(paths[1] === 'logs' || !paths[1]) ? ' selected' : ''}`} type={paths[1] === 'logs' ? 'primary' : 'default'} >操作日志</Button></Link>
             </Sider>
             <Content className='content-setting'>
                 <Switch>

src/components/setting/index.less

@@ -1,13 +1,17 @@
 .layout-setting {
     .sider-setting {
         padding: 12px;
-        border: 1px solid #ccc;
+        border-right: 1px solid @border-color-base;
         button {
             padding: 0 8px;
             margin: 0 0 12px 0;
         }
     }
     .content-setting {
-        // padding: 12px;
+        // background: @content-background-color;
+        padding: 12px;
+        // &> .ant-tabs {
+        //     background: @content-background-color;
+        // }
     }
 }

src/components/user/layout.jsx

@@ -1,27 +0,0 @@
-/**
- * 用户信息管理
- */
-import { Tabs } from 'antd'
-import UserInfo from './userInfo'
-import Password from './password'
-import './layout.less'
-const { TabPane } = Tabs
-
-const Layout = () => {
-    return (
-        <Tabs
-            className='userinfo-tabs'
-            tabPosition='left'
-            defaultActiveKey='userinfo'
-        >
-            <TabPane tab='个人信息' key='userinfo'>
-                <UserInfo />
-            </TabPane>
-            <TabPane disabled tab='修改密码' key='modifypassword'>
-                <Password />
-            </TabPane>
-        </Tabs>
-    )
-}
-
-export default Layout;

src/components/user/layout.less

@@ -1,13 +0,0 @@
-.userinfo-tabs {
-    height: 100%;
-    .ant-tabs-bar {
-        margin: 0;
-    }
-    .ant-tabs-content {
-        height: 100%;
-        border: none !important;
-        .ant-tabs-tabpane {
-            height: 100%;
-        }
-    }
-}

src/components/user/userInfo.jsx

@@ -1,8 +1,10 @@
 /**
  * 用户信息管理
  */
-import { Form, Avatar, Input, Select } from 'antd'
+import { Layout, Form, Avatar, Input, Select } from 'antd'
 import { connect } from 'dva'
+import './userinfo.less'
+const { Content } = Layout
 const { Item: FormItem } = Form
 
 const UserInfo = ({ main }) => {
@@ -10,49 +12,53 @@ const UserInfo = ({ main }) => {
     const formItemLayout = {
         labelCol: {
             xs: { span: 24 },
-            sm: { span: 5 },
+            sm: { span: 2 },
         },
         wrapperCol: {
             xs: { span: 24 },
-            sm: { span: 12 },
+            sm: { span: 22 },
         },
     };
     return (
-        <Form>
-            <FormItem
-                {...formItemLayout}
-                label="头像"
-            >
-                <Avatar size={64} icon="user" />
-            </FormItem>
-            <FormItem
-                {...formItemLayout}
-                label="用户名"
-            >
-                <Input id="userName" disabled defaultValue={name} />
-            </FormItem>
-            <FormItem
-                {...formItemLayout}
-                label="部门"
-            >
-                <Input id="department" disabled defaultValue={department} />
-            </FormItem>
-            <FormItem
-                {...formItemLayout}
-                label="岗位"
-            >
-                <Input id="job" disabled defaultValue={job} />
-            </FormItem>
-            <FormItem
-                {...formItemLayout}
-                label="角色"
-            >
-                <Select disabled defaultValue={role}>
-                    <Select.Option value='admin'>管理员</Select.Option>
-                    <Select.Option value='default'>普通用户</Select.Option>
-                </Select>
-            </FormItem>
-        </Form>
+        <Layout className='layout-userinfo'>
+            <Content className='content-userinfo'>
+                <Form>
+                    <FormItem
+                        {...formItemLayout}
+                        label="头像"
+                    >
+                        <Avatar size={64} icon="user" />
+                    </FormItem>
+                    <FormItem
+                        {...formItemLayout}
+                        label="用户名"
+                    >
+                        <Input id="userName" disabled defaultValue={name} />
+                    </FormItem>
+                    <FormItem
+                        {...formItemLayout}
+                        label="部门"
+                    >
+                        <Input id="department" disabled defaultValue={department} />
+                    </FormItem>
+                    <FormItem
+                        {...formItemLayout}
+                        label="岗位"
+                    >
+                        <Input id="job" disabled defaultValue={job} />
+                    </FormItem>
+                    <FormItem
+                        {...formItemLayout}
+                        label="角色"
+                    >
+                        <Select disabled defaultValue={role}>
+                            <Select.Option value='admin'>管理员</Select.Option>
+                            <Select.Option value='normal'>普通用户</Select.Option>
+                        </Select>
+                    </FormItem>
+                </Form>
+            </Content>
+        </Layout>
     )
 }
 

src/components/user/userinfo.less

@@ -0,0 +1,15 @@
+.layout-userinfo {
+    background: @content-background-color;
+    .content-userinfo {
+        background: #fff;
+        box-shadow: 0 0 10px 0 rgba(41,54,72,0.10);
+        padding: 20px;
+        margin: 100px 20%;
+        .ant-form {
+            padding: 20px 80px;
+            height: 100%;
+            background: rgba(246,246,247,0.48);
+            border: 1px solid rgba(0,0,0,0.10);
+        }
+    }
+}

src/index.js

@@ -19,7 +19,7 @@ import authority from './models/authority'
 import logs from './models/logs'
 import recent from './models/recent'
 import './utils/baseUtils'
-import './index.less'
+import './themes/default/index.less'
 import createLoading from 'dva-loading';
 
 // 1. Initialize

src/index.less

@@ -1 +0,0 @@
-@import "./custom.less";

src/models/userGroup.js

@@ -9,6 +9,7 @@ export default {
             list: [],
             selectedGroup: null,
             filterLabel: '',
+            userFilterLabel: '',
             newOne: {}
         }
     },
@@ -61,6 +62,10 @@ export default {
             const { label } = action;
             return { ...state, filterLabel: label};
         },
+        setUserFilterLabel(state, action) {
+            const { label } = action;
+            return { ...state, userFilterLabel: label};
+        },
         setNewModelField(state, action) {
             const { name, value } = action;
             let newOne = state.newOne;
@@ -183,7 +188,9 @@ export default {
             try {
                 const res = yield call(service.fetch, {
                     url: URLS.USERGROUP_DELETE,
-                    body: group.code
+                    body: {
+                        id: group.code
+                    }
                 });
                 if(!res.err && res.data.code > 0) {
                     yield put({ type: 'delete', group });

src/routes/mainLayout.jsx

@@ -7,7 +7,7 @@ import HomePage from '../components/homePage/index'
 import Workshop from '../components/workshop/index'
 import Setting from '../components/setting/index'
 import './mainLayout.less'
-import UserInfo from '../components/user/layout'
+import UserInfo from '../components/user/userInfo'
 const { Header, Content } = Layout
 
 const MainLayout = () => {

src/routes/mainLayout.less

@@ -5,13 +5,9 @@ html,body,#root{
 .main-layout {
     height: 100%;
     .main-header {
-        background: none;
         padding: 0;
         height: 48px;
         line-height: 48px;
-        border-width: 1px 0;
-        border-style: solid;
-        border-color: #CCCCCC;
         .navigator-menu {
             height: 100%;
             display: flex;
@@ -20,7 +16,6 @@ html,body,#root{
     }
     .main-content {
         height: 100%;
-        background-color: white;
         overflow: hidden;
         section {
             height: 100%;

src/theme.js

@@ -0,0 +1,16 @@
+// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+module.exports = {
+    /** override */
+    // Layout
+    'layout-body-background': '#fff',
+    // Border
+    'border-color-base': '#ccc',
+
+    /** custom */
+    // Layout
+    'sider-background-color': '#485465',
+    'content-background-color': '#F6F6F7',
+    // Tabs
+    'tab-background': '#F5FBFE',
+    'tab-background-active': '#2C82BE',
+};

src/custom.less → src/themes/default/base.less

@@ -19,3 +19,25 @@
 .ant-input[disabled],.ant-select-disabled,.ant-input-number-disabled {
     color: rgba(0, 0, 0, 0.5);
 }
+
+
+// 滚动条
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #C2EAFC;
+    border-radius: 4px;
+  
+    &:hover {
+      background: #74c3e6;
+    }
+}
+
+*::-webkit-scrollbar-track {
+    background: #fff;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+}

src/themes/default/frame.less

@@ -0,0 +1,30 @@
+// frame-header
+.main-header {
+    border: none;
+    background: #2C82BE;
+    color: white;
+    .navigator {
+        .navigator-menu {
+            background: transparent;
+            .nav-page {
+                border-bottom: none !important;
+                top: 0;
+                &>a {
+                    color: white;
+                }
+                ::after {
+                    content: none;
+                }
+            }
+            .nav-page.ant-menu-item-selected {
+                background: #569BCB;
+            }
+        }
+    }
+}
+// frame-sider
+.main-content {
+    background: @content-background-color;
+    @import "./home.less";
+    @import "./setting.less";
+}

src/themes/default/home.less

@@ -0,0 +1,109 @@
+@menu-item-color: #A2ACBA;
+@menu-item-color-hover: #fff;
+@menu-item-color-selected: #fff;
+
+.layout-home {
+    .sider-home {
+        .home-menu {
+            background: @sider-background-color;
+            &>.ant-layout-header {
+                input {
+                    border: none;
+                }
+                button {
+                    font-size: 18px;
+                    color: @menu-item-color;
+                    background: transparent;
+                    border: none;
+                    top: 1px;
+                    &:after {
+                        content: none;
+                    }
+                    &:hover {
+                        color: @menu-item-color-hover;
+                    }
+                }
+            }
+            &> .ant-layout-content {
+                &> .collapse-collection {
+                    &> .ant-collapse-item {
+                        &> .ant-collapse-header {
+                            color: @menu-item-color;
+                            // &:hover {
+                            //     color: @menu-item-color-hover;
+                            // }
+                        }
+                        &> .ant-collapse-content {
+                            &> .ant-collapse-content-box {
+                                &> .item {
+                                    color: @menu-item-color-hover;
+                                    // &:hover {
+                                    //     color: @menu-item-color-hover;
+                                    // }
+                                }
+                            }
+                        }
+                    }
+                }
+                &> .menu-container {
+                    &> .menu-content {
+                        border: none;
+                        .ant-tree li {
+                            .node-title.node-dashboard {
+                                color: @menu-item-color-hover;
+                            }
+                            span.ant-tree-switcher {
+                                color: @menu-item-color;
+                                // &:hover {
+                                //     color: @menu-item-color-hover;
+                                // }
+                            }
+                            span.ant-tree-node-content-wrapper {
+                                color: @menu-item-color;
+                                &:hover {
+                                    // color: @menu-item-color-hover;
+                                    background: transparent;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .content-home {
+        &>.ant-tabs {
+            &>.ant-tabs-bar {
+                .ant-tabs-nav-wrap {
+                    .ant-tabs-tab {
+                        color: @tab-background-active;
+                        background: @tab-background;
+                        border-color: @tab-background-active;
+                        border-radius: 0;
+                        border-right-width: 0;
+                        margin: 0;
+                        &.ant-tabs-tab-active {
+                            color: #fff;
+                            background: @tab-background-active;
+                            .ant-tabs-close-x {
+                                color: #fff;
+                            }
+                        }
+                        .ant-tabs-close-x {
+                            color: @tab-background-active;
+                        }
+                        &:last-child {
+                            border-right-width: 1px;
+                        }
+                    }
+                }
+            }
+            &>.ant-tabs-content {
+                &>.ant-tabs-tabpane.ant-tabs-   -active {
+                    &>.dashboarddesigner-layout {
+                    }
+                }
+            }
+        }
+    }
+}

src/themes/default/index.less

@@ -0,0 +1,9 @@
+// Core variables
+@import "./variables.less";
+
+// Base CSS
+@import "./base.less";
+
+// Page Components
+@import "./frame.less";
+

src/themes/default/setting.less

@@ -0,0 +1,28 @@
+.layout-setting {
+    .sider-setting {
+        background: @sider-background-color;
+        border: none;
+        padding: 12px 0 0;
+        .ant-layout-sider-children {
+            a {
+                button {
+                    background: transparent;
+                    border: none;
+                    font-size: 16px;
+                    color: #A4AEBB;
+                    border-radius: 0;
+                    &[disabled] {
+                        opacity: 0.5;
+                    }
+                    &.selected {
+                        background: #727D99;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .content-setting {
+        background: @content-background-color;
+    }
+}

src/themes/default/variables.less

@@ -0,0 +1 @@
+@border-color: #ccc;