diff --git a/README.md b/README.md
index ff50e46..794955d 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Antd Admin
 
 [![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)
-[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.0-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
+[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
 [![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)
 
 [![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin)
@@ -30,10 +30,11 @@
     -   [x] 增删改查
     -   [x] 交互动效
 -   [x] 扩展UI组件
--   [x] Ico
--   [x] Search
--   [x] dropOption
--   [x] 基于Modal封装的layer
+    -   [x] IconFont
+    -   [x] DataTable
+    -   [x] Search
+    -   [x] DropOption
+    -   [x] 基于Modal封装的layer方法
 -   [x] 加入dva-loading
 -   [x] 规范代码: EsLint; 自用[开发配置](assets/standard.md)
 -   [ ] 数据可视化页面
@@ -48,11 +49,20 @@
 ├── /mock/           # 数据mock的接口文件
 ├── /dist/           # 项目输出目录
 ├── /src/            # 项目源码目录
-│ ├── /components/   # 项目组件
+│ ├── /components/   # UI组件及UI相关方法
+│ │ ├── skin.less    # 全局样式
+│ │ └── vars.less    # 全局样式变量
 │ ├── /routes/       # 路由组件
+│ │ └── app.js       # 路由入口
 │ ├── /models/       # 数据模型
 │ ├── /services/     # 数据接口
 │ ├── /utils/        # 工具函数
+│ │ ├── config.js    # 项目常规配置
+│ │ ├── menu.js      # 侧边菜单配置
+│ │ ├── mock.js      # 数据拦截配置
+│ │ ├── config.js    # 项目常规配置
+│ │ ├── request.js   # 异步请求函数
+│ │ └── theme.js     # 项目需要在js中使用到样式变量
 │ ├── route.js       # 路由配置
 │ ├── index.js       # 入口文件
 │ └── index.html     
@@ -60,14 +70,16 @@
 └── proxy.config.js  # 数据mock配置
 ```
 
+文件夹命名说明:
+
+-   components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）
+-   routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）
+
 ### 快速开始
 
 克隆项目文件:
 
-
-```
-git clone https://github.com/zuiidea/antd-admin.git
-```
+    git clone https://github.com/zuiidea/antd-admin.git
 
 进入目录安装依赖:
 
diff --git a/src/components/common/TableBodyWrapper.js b/src/components/DataTable/AnimTableBody.js
similarity index 86%
rename from src/components/common/TableBodyWrapper.js
rename to src/components/DataTable/AnimTableBody.js
index c59d319..4160e42 100644
--- a/src/components/common/TableBodyWrapper.js
+++ b/src/components/DataTable/AnimTableBody.js
@@ -39,8 +39,7 @@ const leaveAnim = [
   },
 ]
 
-const TableBodyWrapper = ({ body, page = 1, current }) => {
-  // 切换分页去除动画;
+const AnimTableBody = ({ body, page = 1, current }) => {
   if (current !== +page) {
     return body
   }
@@ -58,10 +57,10 @@ const TableBodyWrapper = ({ body, page = 1, current }) => {
   )
 }
 
-TableBodyWrapper.propTypes = {
+AnimTableBody.propTypes = {
   body: PropTypes.element,
   page: PropTypes.any,
   current: PropTypes.number.isRequired,
 }
 
-export default TableBodyWrapper
+export default AnimTableBody
diff --git a/src/components/DataTable/package.json b/src/components/DataTable/package.json
index 480ec5a..9272c27 100644
--- a/src/components/DataTable/package.json
+++ b/src/components/DataTable/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "table",
+  "name": "DataTable",
   "version": "0.0.0",
   "private": true,
   "main": "./DataTable.js"
diff --git a/src/components/ui/dropOption.js b/src/components/DropOption/DropOption.js
similarity index 89%
rename from src/components/ui/dropOption.js
rename to src/components/DropOption/DropOption.js
index a1d0eac..995c26b 100644
--- a/src/components/ui/dropOption.js
+++ b/src/components/DropOption/DropOption.js
@@ -4,7 +4,8 @@ import { Dropdown, Button, Icon, Menu } from 'antd'
 const DropOption = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => {
   const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)
   return (<Dropdown
-    overlay={<Menu onClick={onMenuClick} {...dropdownProps}>{menu}</Menu>}
+    overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
+    {...dropdownProps}
   >
     <Button style={{ border: 'none', ...buttonStyle }}>
       <Icon style={{ marginRight: 2 }} type="bars" />
diff --git a/src/components/DropOption/package.json b/src/components/DropOption/package.json
new file mode 100644
index 0000000..0a1dc40
--- /dev/null
+++ b/src/components/DropOption/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "DropOption",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DropOption.js"
+}
diff --git a/src/components/Iconfont/Iconfont.js b/src/components/Iconfont/Iconfont.js
new file mode 100644
index 0000000..66a159b
--- /dev/null
+++ b/src/components/Iconfont/Iconfont.js
@@ -0,0 +1,14 @@
+import React, { PropTypes } from 'react'
+import './iconfont.less'
+
+const Iconfont = ({ type }) => <span
+  dangerouslySetInnerHTML={{
+    __html: `<svg class="iconfont" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`,
+  }}
+/>
+
+Iconfont.propTypes = {
+  type: PropTypes.string,
+}
+
+export default Iconfont
diff --git a/src/components/ui/ico.less b/src/components/Iconfont/iconfont.less
similarity index 85%
rename from src/components/ui/ico.less
rename to src/components/Iconfont/iconfont.less
index 9cebc1e..bc21981 100644
--- a/src/components/ui/ico.less
+++ b/src/components/Iconfont/iconfont.less
@@ -1,4 +1,4 @@
-:global .ico {
+:global .iconfont {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
diff --git a/src/components/Iconfont/package.json b/src/components/Iconfont/package.json
new file mode 100644
index 0000000..0527f86
--- /dev/null
+++ b/src/components/Iconfont/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Iconfont",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Iconfont.js"
+}
diff --git a/src/components/layout/main.less b/src/components/Layout/Layout.less
similarity index 100%
rename from src/components/layout/main.less
rename to src/components/Layout/Layout.less
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
new file mode 100644
index 0000000..e927075
--- /dev/null
+++ b/src/components/Layout/index.js
@@ -0,0 +1,8 @@
+import Header from './Header'
+import Menu from './Menu'
+import Bread from './Bread'
+import Sider from './Sider'
+import Footer from './Footer'
+import styles from './Layout.less'
+
+export { Header, Menu, Bread, Sider, Footer, styles }
diff --git a/src/components/ui/search.js b/src/components/Search/Search.js
similarity index 98%
rename from src/components/ui/search.js
rename to src/components/Search/Search.js
index 6953d3b..3d239fe 100644
--- a/src/components/ui/search.js
+++ b/src/components/Search/Search.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
-import styles from './search.less'
+import styles from './Search.less'
 import { Input, Select, Button, Icon } from 'antd'
 
 class Search extends React.Component {
diff --git a/src/components/ui/search.less b/src/components/Search/Search.less
similarity index 100%
rename from src/components/ui/search.less
rename to src/components/Search/Search.less
diff --git a/src/components/Search/package.json b/src/components/Search/package.json
new file mode 100644
index 0000000..d5a3a52
--- /dev/null
+++ b/src/components/Search/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Search",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Search.js"
+}
diff --git a/src/components/index.js b/src/components/index.js
index 08a94ec..e385d29 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,9 @@
 import DataTable from './DataTable'
+import DropOption from './DropOption'
+import Iconfont from './Iconfont'
+import Search from './Search'
+import * as Layout from './Layout/index.js'
 
-export { DataTable }
+import layer from './layer'
+
+export { Layout, DataTable, DropOption, Iconfont, Search, layer }
diff --git a/src/components/ui/layer.js b/src/components/layer/layer.js
similarity index 100%
rename from src/components/ui/layer.js
rename to src/components/layer/layer.js
diff --git a/src/components/ui/layer.less b/src/components/layer/layer.less
similarity index 100%
rename from src/components/ui/layer.less
rename to src/components/layer/layer.less
diff --git a/src/components/layer/package.json b/src/components/layer/package.json
new file mode 100644
index 0000000..729ee31
--- /dev/null
+++ b/src/components/layer/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "layer",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./layer.js"
+}
diff --git a/src/components/layout/bread.js b/src/components/layout/bread.js
index 57ff4e4..39a4b0f 100644
--- a/src/components/layout/bread.js
+++ b/src/components/layout/bread.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { Breadcrumb, Icon } from 'antd'
-import styles from './main.less'
+import styles from './Layout.less'
 import { menu } from '../../utils'
 
 let pathSet = []
diff --git a/src/components/layout/common.less b/src/components/layout/common.less
deleted file mode 100644
index 347ca21..0000000
--- a/src/components/layout/common.less
+++ /dev/null
@@ -1,67 +0,0 @@
-body {
-  height: 100%;
-  overflow-y: hidden;
-  background-color: #f8f8f8;
-}
-// scrollbar
-
-::-webkit-scrollbar-thumb {
-  background-color: #e6e6e6;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-:global .ant-breadcrumb {
-  & > span {
-    &:last-child {
-      color: #999;
-      font-weight: normal;
-    }
-  }
-}
-
-:global .ant-breadcrumb-link {
-  .anticon + span {
-    margin-left: 4px;
-  }
-}
-
-:global .ant-table {
-  .ant-table-thead > tr > th {
-    text-align: center;
-  }
-
-  .ant-table-tbody > tr > td {
-    text-align: center;
-  }
-
-  &.ant-table-small {
-    .ant-table-thead > tr > th {
-      background: #f7f7f7;
-    }
-
-    .ant-table-body > table {
-      padding: 0;
-    }
-  }
-}
-
-:global .ant-table-pagination {
-  float: none!important;
-  display: table;
-  margin: 16px auto !important;
-}
-
-:global .ant-popover-inner {
-  border: none;
-  border-radius: 0;
-  box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
-}
-
-:global .ant-form-item-control {
-  vertical-align: middle;
-}
-@import "../skin.less";
diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index 5b7332e..6dcc09f 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './main.less'
+import styles from './Layout.less'
 import { config } from '../../utils'
 
 const Footer = () => <div className={styles.footer}>
diff --git a/src/components/layout/header.js b/src/components/layout/header.js
index 1d6e56e..14e430d 100644
--- a/src/components/layout/header.js
+++ b/src/components/layout/header.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Menu, Icon, Popover } from 'antd'
-import styles from './main.less'
-import Menus from './menu'
+import styles from './Layout.less'
+import Menus from './Menu'
 
 const SubMenu = Menu.SubMenu
 
diff --git a/src/components/layout/sider.js b/src/components/layout/sider.js
index afe0f9b..a143ef5 100644
--- a/src/components/layout/sider.js
+++ b/src/components/layout/sider.js
@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react'
 import { Icon, Switch } from 'antd'
-import styles from './main.less'
+import styles from './Layout.less'
 import { config } from '../../utils'
-import Menus from './menu'
+import Menus from './Menu'
 
 function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) {
   const menusProps = {
diff --git a/src/components/skin.less b/src/components/skin.less
index d6db52e..f772655 100644
--- a/src/components/skin.less
+++ b/src/components/skin.less
@@ -1,6 +1,72 @@
 @import "./vars.less";
 
+body {
+  height: 100%;
+  overflow-y: hidden;
+  background-color: #f8f8f8;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #e6e6e6;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
 :global {
+  .ant-breadcrumb {
+    & > span {
+      &:last-child {
+        color: #999;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .ant-breadcrumb-link {
+    .anticon + span {
+      margin-left: 4px;
+    }
+  }
+
+  .ant-table {
+    .ant-table-thead > tr > th {
+      text-align: center;
+    }
+
+    .ant-table-tbody > tr > td {
+      text-align: center;
+    }
+
+    &.ant-table-small {
+      .ant-table-thead > tr > th {
+        background: #f7f7f7;
+      }
+
+      .ant-table-body > table {
+        padding: 0;
+      }
+    }
+  }
+
+  .ant-table-pagination {
+    float: none!important;
+    display: table;
+    margin: 16px auto !important;
+  }
+
+  .ant-popover-inner {
+    border: none;
+    border-radius: 0;
+    box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
+  }
+
+  .ant-form-item-control {
+    vertical-align: middle;
+  }
+
   .ant-modal-mask {
     background-color: rgba(55, 55, 55, 0.2);
   }
diff --git a/src/components/ui/ico.js b/src/components/ui/ico.js
deleted file mode 100644
index f846855..0000000
--- a/src/components/ui/ico.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { PropTypes } from 'react'
-import './ico.less'
-
-const Ico = ({ type }) => <span
-  dangerouslySetInnerHTML={{
-    __html: `<svg class="ico" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`,
-  }}
-/>
-
-Ico.propTypes = {
-  type: PropTypes.string,
-}
-
-export default Ico
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
deleted file mode 100644
index 642012f..0000000
--- a/src/components/ui/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Ico from './ico.js'
-import Search from './search.js'
-import DropOption from './dropOption.js'
-
-import layer from './layer.js'
-
-export { Ico, Search, DropOption, layer }
diff --git a/src/components/users/search.less b/src/components/users/search.less
deleted file mode 100644
index 3c0f934..0000000
--- a/src/components/users/search.less
+++ /dev/null
@@ -1 +0,0 @@
-Error: Source sample is missing.
diff --git a/src/router.js b/src/router.js
index 276b836..f29e00d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,7 +18,7 @@ const Routers = function ({ history, app }) {
       getIndexRoute (nextState, cb) {
         require.ensure([], require => {
           registerModel(app, require('./models/dashboard'))
-          cb(null, { component: require('./routes/dashboard') })
+          cb(null, { component: require('./routes/dashboard/') })
         }, 'dashboard')
       },
       childRoutes: [
@@ -28,7 +28,7 @@ const Routers = function ({ history, app }) {
           getComponent (nextState, cb) {
             require.ensure([], require => {
               registerModel(app, require('./models/dashboard'))
-              cb(null, require('./routes/dashboard'))
+              cb(null, require('./routes/dashboard/'))
             }, 'dashboard')
           },
         }, {
@@ -37,55 +37,55 @@ const Routers = function ({ history, app }) {
           getComponent (nextState, cb) {
             require.ensure([], require => {
               registerModel(app, require('./models/users'))
-              cb(null, require('./routes/users'))
+              cb(null, require('./routes/users/'))
             }, 'users')
           },
         }, {
-          path: 'ui/ico',
-          name: 'ui/ico',
+          path: 'UIElement/iconfont',
+          name: 'UIElement/iconfont',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/ui/ico'))
-            }, 'ui-ico')
+              cb(null, require('./routes/UIElement/iconfont/'))
+            }, 'UIElement-iconfont')
           },
         }, {
-          path: 'ui/search',
-          name: 'ui/search',
+          path: 'UIElement/search',
+          name: 'UIElement/search',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/ui/search'))
-            }, 'ui-search')
+              cb(null, require('./routes/UIElement/search/'))
+            }, 'UIElement-search')
           },
         }, {
-          path: 'ui/dropOption',
-          name: 'ui/dropOption',
+          path: 'UIElement/dropOption',
+          name: 'UIElement/dropOption',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/ui/dropOption'))
-            }, 'ui-dropOption')
+              cb(null, require('./routes/UIElement/dropOption/'))
+            }, 'UIElement-dropOption')
           },
         }, {
-          path: 'ui/layer',
-          name: 'ui/layer',
+          path: 'UIElement/layer',
+          name: 'UIElement/layer',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/ui/layer'))
-            }, 'ui-layer')
+              cb(null, require('./routes/UIElement/layer/'))
+            }, 'UIElement-layer')
           },
         }, {
-          path: 'ui/dataTable',
-          name: 'ui/dataTable',
+          path: 'UIElement/dataTable',
+          name: 'UIElement/dataTable',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/ui/dataTable'))
-            }, 'ui-dataTable')
+              cb(null, require('./routes/UIElement/dataTable/'))
+            }, 'UIElement-dataTable')
           },
         }, {
           path: '*',
           name: 'error',
           getComponent (nextState, cb) {
             require.ensure([], require => {
-              cb(null, require('./routes/error'))
+              cb(null, require('./routes/error/'))
             }, 'error')
           },
         },
diff --git a/src/routes/ui/dataTable.js b/src/routes/UIElement/dataTable/index.js
similarity index 98%
rename from src/routes/ui/dataTable.js
rename to src/routes/UIElement/dataTable/index.js
index 226e619..ae80837 100644
--- a/src/routes/ui/dataTable.js
+++ b/src/routes/UIElement/dataTable/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DataTable } from '../../components'
+import { DataTable } from '../../../components'
 import { Table, Row, Col, Card, Select } from 'antd'
 
 class DataTablePage extends React.Component {
diff --git a/src/routes/ui/dropOption.js b/src/routes/UIElement/dropOption/index.js
similarity index 98%
rename from src/routes/ui/dropOption.js
rename to src/routes/UIElement/dropOption/index.js
index eede8bc..f4bb50a 100644
--- a/src/routes/ui/dropOption.js
+++ b/src/routes/UIElement/dropOption/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DropOption } from '../../components/ui'
+import { DropOption } from '../../../components'
 import { Table, Row, Col, Card, message } from 'antd'
 
 const DropOptionPage = () => <div className="content-inner">
diff --git a/src/routes/ui/ico.js b/src/routes/UIElement/iconfont/index.js
similarity index 83%
rename from src/routes/ui/ico.js
rename to src/routes/UIElement/iconfont/index.js
index 1aee521..ab36bcf 100644
--- a/src/routes/ui/ico.js
+++ b/src/routes/UIElement/iconfont/index.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Ico } from '../../components/ui'
+import { Iconfont } from '../../../components'
 import { Table, Row, Col } from 'antd'
-import styles from './ico.less'
+import styles from './index.less'
 
 const iconlist = ['Cherry', 'Cheese', 'Bread', 'Beer', 'Beet', 'Bacon', 'Banana', 'Asparagus', 'Apple']
 
 const IcoPage = () => <div className="content-inner">
   <ul className={styles.list}>
-    {iconlist.map(item => <li key={item}><Ico className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
+    {iconlist.map(item => <li key={item}><Iconfont className={styles.icon} type={item} /><span className={styles.name}>{item}</span></li>)}
   </ul>
   <h2 style={{ margin: '16px 0' }}>Props</h2>
   <Row>
diff --git a/src/routes/ui/ico.less b/src/routes/UIElement/iconfont/index.less
similarity index 93%
rename from src/routes/ui/ico.less
rename to src/routes/UIElement/iconfont/index.less
index e0401ff..02d9381 100644
--- a/src/routes/ui/ico.less
+++ b/src/routes/UIElement/iconfont/index.less
@@ -18,7 +18,7 @@
     box-sizing: border-box;
     border: solid 1px transparent;
 
-    &:hover{
+    &:hover {
       border: solid 1px #f5f5f5;
     }
   }
@@ -27,7 +27,7 @@
     margin-top: 16px;
   }
 
-  :global .ico {
+  :global .iconfont {
     font-size: 48px;
   }
 }
diff --git a/src/routes/ui/layer.js b/src/routes/UIElement/layer/index.js
similarity index 98%
rename from src/routes/ui/layer.js
rename to src/routes/UIElement/layer/index.js
index 13cd9e8..24357fb 100644
--- a/src/routes/ui/layer.js
+++ b/src/routes/UIElement/layer/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import { layer } from '../../components/ui'
+import { layer } from '../../../components'
 import { Table, Row, Col, Button, Card } from 'antd'
-import './ico.less'
 
 let Enum = {
   default: 1,
diff --git a/src/routes/ui/search.js b/src/routes/UIElement/search/index.js
similarity index 98%
rename from src/routes/ui/search.js
rename to src/routes/UIElement/search/index.js
index 0b68cc5..bce70b9 100644
--- a/src/routes/ui/search.js
+++ b/src/routes/UIElement/search/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Search } from '../../components/ui'
+import { Search } from '../../../components'
 import { Table, Row, Col, Card } from 'antd'
 
 const SearchPage = () => <div className="content-inner">
diff --git a/src/routes/app.js b/src/routes/app.js
index f37b075..6103abc 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -1,14 +1,12 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'dva'
 import Login from './login'
-import Header from '../components/layout/header'
-import Bread from '../components/layout/bread'
-import Footer from '../components/layout/footer'
-import Sider from '../components/layout/sider'
-import styles from '../components/layout/main.less'
+import { Layout } from '../components'
 import { Spin } from 'antd'
 import { classnames } from '../utils'
-import '../components/layout/common.less'
+import '../components/skin.less'
+
+const { Header, Bread, Footer, Sider, styles } = Layout
 
 function App ({ children, location, dispatch, app, loading }) {
   const { login, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app
diff --git a/src/components/dashboard/browser.js b/src/routes/dashboard/components/browser.js
similarity index 95%
rename from src/components/dashboard/browser.js
rename to src/routes/dashboard/components/browser.js
index 1e81858..fa5b794 100644
--- a/src/components/dashboard/browser.js
+++ b/src/routes/dashboard/components/browser.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Table, Tag } from 'antd'
 import styles from './browser.less'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 
 const status = {
   1: {
diff --git a/src/components/dashboard/browser.less b/src/routes/dashboard/components/browser.less
similarity index 100%
rename from src/components/dashboard/browser.less
rename to src/routes/dashboard/components/browser.less
diff --git a/src/components/dashboard/comments.js b/src/routes/dashboard/components/comments.js
similarity index 97%
rename from src/components/dashboard/comments.js
rename to src/routes/dashboard/components/comments.js
index 55f3721..b8c71f8 100644
--- a/src/components/dashboard/comments.js
+++ b/src/routes/dashboard/components/comments.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Table, Tag } from 'antd'
 import styles from './comments.less'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 
 const status = {
   1: {
diff --git a/src/components/dashboard/comments.less b/src/routes/dashboard/components/comments.less
similarity index 93%
rename from src/components/dashboard/comments.less
rename to src/routes/dashboard/components/comments.less
index 0d29e1f..d204f1f 100644
--- a/src/components/dashboard/comments.less
+++ b/src/routes/dashboard/components/comments.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .comments {
   :global .ant-table-thead > tr > th {
diff --git a/src/components/dashboard/completed.js b/src/routes/dashboard/components/completed.js
similarity index 98%
rename from src/components/dashboard/completed.js
rename to src/routes/dashboard/components/completed.js
index 2477d8a..b2ac636 100644
--- a/src/components/dashboard/completed.js
+++ b/src/routes/dashboard/components/completed.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import styles from './completed.less'
 import classnames from 'classnames'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
 
 function Completed ({ data }) {
diff --git a/src/components/dashboard/completed.less b/src/routes/dashboard/components/completed.less
similarity index 93%
rename from src/components/dashboard/completed.less
rename to src/routes/dashboard/components/completed.less
index 468713b..d04f80f 100644
--- a/src/components/dashboard/completed.less
+++ b/src/routes/dashboard/components/completed.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .sales {
   .title {
diff --git a/src/components/dashboard/cpu.js b/src/routes/dashboard/components/cpu.js
similarity index 97%
rename from src/components/dashboard/cpu.js
rename to src/routes/dashboard/components/cpu.js
index c51f0f9..860d79c 100644
--- a/src/components/dashboard/cpu.js
+++ b/src/routes/dashboard/components/cpu.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import styles from './cpu.less'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 import CountUp from 'react-countup'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts'
 
diff --git a/src/components/dashboard/cpu.less b/src/routes/dashboard/components/cpu.less
similarity index 100%
rename from src/components/dashboard/cpu.less
rename to src/routes/dashboard/components/cpu.less
diff --git a/src/routes/dashboard/components/index.js b/src/routes/dashboard/components/index.js
new file mode 100644
index 0000000..8d5b7c8
--- /dev/null
+++ b/src/routes/dashboard/components/index.js
@@ -0,0 +1,12 @@
+import NumberCard from './numberCard'
+import Quote from './quote'
+import Sales from './sales'
+import Weather from './weather'
+import RecentSales from './recentSales'
+import Comments from './comments'
+import Completed from './completed'
+import Browser from './browser'
+import Cpu from './cpu'
+import User from './user'
+
+export { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User }
diff --git a/src/components/dashboard/numberCard.js b/src/routes/dashboard/components/numberCard.js
similarity index 100%
rename from src/components/dashboard/numberCard.js
rename to src/routes/dashboard/components/numberCard.js
diff --git a/src/components/dashboard/numberCard.less b/src/routes/dashboard/components/numberCard.less
similarity index 91%
rename from src/components/dashboard/numberCard.less
rename to src/routes/dashboard/components/numberCard.less
index ada66a2..eaae27c 100644
--- a/src/components/dashboard/numberCard.less
+++ b/src/routes/dashboard/components/numberCard.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .numberCard {
   padding: 32px;
diff --git a/src/components/dashboard/quote.js b/src/routes/dashboard/components/quote.js
similarity index 100%
rename from src/components/dashboard/quote.js
rename to src/routes/dashboard/components/quote.js
diff --git a/src/components/dashboard/quote.less b/src/routes/dashboard/components/quote.less
similarity index 95%
rename from src/components/dashboard/quote.less
rename to src/routes/dashboard/components/quote.less
index 9c3c952..36de0af 100644
--- a/src/components/dashboard/quote.less
+++ b/src/routes/dashboard/components/quote.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .quote {
   color: #fff;
diff --git a/src/components/dashboard/recentSales.js b/src/routes/dashboard/components/recentSales.js
similarity index 96%
rename from src/components/dashboard/recentSales.js
rename to src/routes/dashboard/components/recentSales.js
index 6315f81..af1e9c3 100644
--- a/src/components/dashboard/recentSales.js
+++ b/src/routes/dashboard/components/recentSales.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Table, Tag } from 'antd'
 import styles from './recentSales.less'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 
 const status = {
   1: {
diff --git a/src/components/dashboard/recentSales.less b/src/routes/dashboard/components/recentSales.less
similarity index 76%
rename from src/components/dashboard/recentSales.less
rename to src/routes/dashboard/components/recentSales.less
index 65e4572..987226c 100644
--- a/src/components/dashboard/recentSales.less
+++ b/src/routes/dashboard/components/recentSales.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .recentsales {
   :global .ant-table-thead > tr > th {
diff --git a/src/components/dashboard/sales.js b/src/routes/dashboard/components/sales.js
similarity index 98%
rename from src/components/dashboard/sales.js
rename to src/routes/dashboard/components/sales.js
index a9d48b2..1c73623 100644
--- a/src/components/dashboard/sales.js
+++ b/src/routes/dashboard/components/sales.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import styles from './sales.less'
 import classnames from 'classnames'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
 
 function Sales ({ data }) {
diff --git a/src/components/dashboard/sales.less b/src/routes/dashboard/components/sales.less
similarity index 93%
rename from src/components/dashboard/sales.less
rename to src/routes/dashboard/components/sales.less
index 468713b..d04f80f 100644
--- a/src/components/dashboard/sales.less
+++ b/src/routes/dashboard/components/sales.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .sales {
   .title {
diff --git a/src/components/dashboard/user-background.png b/src/routes/dashboard/components/user-background.png
similarity index 100%
rename from src/components/dashboard/user-background.png
rename to src/routes/dashboard/components/user-background.png
diff --git a/src/components/dashboard/user.js b/src/routes/dashboard/components/user.js
similarity index 97%
rename from src/components/dashboard/user.js
rename to src/routes/dashboard/components/user.js
index faf8918..68cc411 100644
--- a/src/components/dashboard/user.js
+++ b/src/routes/dashboard/components/user.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import { Button } from 'antd'
 import styles from './user.less'
 import CountUp from 'react-countup'
-import { color } from '../../utils'
+import { color } from '../../../utils'
 const countUpProps = {
   start: 0,
   duration: 2.75,
diff --git a/src/components/dashboard/user.less b/src/routes/dashboard/components/user.less
similarity index 97%
rename from src/components/dashboard/user.less
rename to src/routes/dashboard/components/user.less
index bb21205..39220b0 100644
--- a/src/components/dashboard/user.less
+++ b/src/routes/dashboard/components/user.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .user {
   .header {
diff --git a/src/components/dashboard/weather.js b/src/routes/dashboard/components/weather.js
similarity index 100%
rename from src/components/dashboard/weather.js
rename to src/routes/dashboard/components/weather.js
diff --git a/src/components/dashboard/weather.less b/src/routes/dashboard/components/weather.less
similarity index 94%
rename from src/components/dashboard/weather.less
rename to src/routes/dashboard/components/weather.less
index 3710354..938e0df 100644
--- a/src/components/dashboard/weather.less
+++ b/src/routes/dashboard/components/weather.less
@@ -1,4 +1,4 @@
-@import "../vars.less";
+@import "../../../components/vars.less";
 
 .weather {
   color: #fff;
diff --git a/src/routes/dashboard.js b/src/routes/dashboard/index.js
similarity index 79%
rename from src/routes/dashboard.js
rename to src/routes/dashboard/index.js
index fb104f4..e71958b 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard/index.js
@@ -1,18 +1,9 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
-import NumberCard from '../components/dashboard/numberCard'
-import Quote from '../components/dashboard/quote'
-import Sales from '../components/dashboard/sales'
-import Weather from '../components/dashboard/weather'
-import RecentSales from '../components/dashboard/recentSales'
-import Comments from '../components/dashboard/comments'
-import Completed from '../components/dashboard/completed'
-import Browser from '../components/dashboard/browser'
-import Cpu from '../components/dashboard/cpu'
-import User from '../components/dashboard/user'
-import styles from './dashboard.less'
-import { color } from '../utils'
+import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
+import styles from './index.less'
+import { color } from '../../utils'
 
 const bodyStyle = {
   bodyStyle: {
diff --git a/src/routes/dashboard.less b/src/routes/dashboard/index.less
similarity index 100%
rename from src/routes/dashboard.less
rename to src/routes/dashboard/index.less
diff --git a/src/routes/error.js b/src/routes/error/index.js
similarity index 87%
rename from src/routes/error.js
rename to src/routes/error/index.js
index 7c4b8cb..70f341a 100644
--- a/src/routes/error.js
+++ b/src/routes/error/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Icon } from 'antd'
-import styles from './error.less'
+import styles from './index.less'
 
 const Error = () => <div className="content-inner">
   <div className={styles.error}>
diff --git a/src/routes/error.less b/src/routes/error/index.less
similarity index 100%
rename from src/routes/error.less
rename to src/routes/error/index.less
diff --git a/src/routes/login.js b/src/routes/login/index.js
similarity index 95%
rename from src/routes/login.js
rename to src/routes/login/index.js
index cf5d2b6..4875ebc 100644
--- a/src/routes/login.js
+++ b/src/routes/login/index.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { Button, Row, Form, Input } from 'antd'
-import { config } from '../utils'
-import styles from './login.less'
+import { config } from '../../utils'
+import styles from './index.less'
 
 const FormItem = Form.Item
 
diff --git a/src/routes/login.less b/src/routes/login/index.less
similarity index 100%
rename from src/routes/login.less
rename to src/routes/login/index.less
diff --git a/src/components/users/search.js b/src/routes/users/UserFilter.js
similarity index 87%
rename from src/components/users/search.js
rename to src/routes/users/UserFilter.js
index 96c49d0..5ab4f6b 100644
--- a/src/components/users/search.js
+++ b/src/routes/users/UserFilter.js
@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react'
 import { Form, Button, Row, Col, Switch } from 'antd'
-import SearchGroup from '../ui/search'
+import { Search } from '../../components'
 
-const search = ({
+const UserFilter = ({
   field,
   keyword,
   onSearch,
@@ -23,11 +23,10 @@ const search = ({
       onSearch(value)
     },
   }
-
   return (
     <Row gutter={24}>
       <Col lg={8} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
-        <SearchGroup {...searchGroupProps} />
+        <Search {...searchGroupProps} />
       </Col>
       <Col lg={{ offset: 8, span: 8 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
         <Switch style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'动画开'} unCheckedChildren={'动画关'} />
@@ -37,7 +36,7 @@ const search = ({
   )
 }
 
-search.propTypes = {
+UserFilter.propTypes = {
   form: PropTypes.object.isRequired,
   onSearch: PropTypes.func,
   onAdd: PropTypes.func,
@@ -47,4 +46,4 @@ search.propTypes = {
   switchIsMotion: PropTypes.func,
 }
 
-export default Form.create()(search)
+export default Form.create()(UserFilter)
diff --git a/src/components/users/list.js b/src/routes/users/UserList.js
similarity index 90%
rename from src/components/users/list.js
rename to src/routes/users/UserList.js
index e39332c..2817109 100644
--- a/src/components/users/list.js
+++ b/src/routes/users/UserList.js
@@ -1,9 +1,10 @@
 import React, { PropTypes } from 'react'
 import { Table, Modal } from 'antd'
-import styles from './list.less'
+import styles from './UserList.less'
 import classnames from 'classnames'
-import TableBodyWrapper from '../common/TableBodyWrapper'
-import { DropOption } from '../ui/index'
+import AnimTableBody from '../../components/DataTable/AnimTableBody'
+import { DropOption } from '../../components'
+
 
 const confirm = Modal.confirm
 
@@ -80,7 +81,7 @@ function list ({ loading, dataSource, pagination, onPageChange, onDeleteItem, on
     current: pagination.current,
   }
 
-  const getBodyWrapper = body => { return isMotion ? <TableBodyWrapper {...getBodyWrapperProps} body={body} /> : body }
+  const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }
 
   return (
     <div>
diff --git a/src/components/users/list.less b/src/routes/users/UserList.less
similarity index 100%
rename from src/components/users/list.less
rename to src/routes/users/UserList.less
diff --git a/src/components/users/modal.js b/src/routes/users/UserModal.js
similarity index 100%
rename from src/components/users/modal.js
rename to src/routes/users/UserModal.js
diff --git a/src/routes/users.js b/src/routes/users/index.js
similarity index 89%
rename from src/routes/users.js
rename to src/routes/users/index.js
index bd1ad14..494f47d 100644
--- a/src/routes/users.js
+++ b/src/routes/users/index.js
@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
 import { routerRedux } from 'dva/router'
 import { connect } from 'dva'
-import UserList from '../components/users/list'
-import UserSearch from '../components/users/search'
-import UserModal from '../components/users/modal'
+import UserList from './UserList'
+import UserFilter from './UserFilter'
+import UserModal from './UserModal'
 
 function Users ({ location, dispatch, users, loading }) {
   const { list, pagination, currentItem, modalVisible, modalType, isMotion } = users
@@ -60,7 +60,7 @@ function Users ({ location, dispatch, users, loading }) {
     },
   }
 
-  const userSearchProps = {
+  const userFilterProps = {
     field,
     keyword,
     isMotion,
@@ -93,7 +93,7 @@ function Users ({ location, dispatch, users, loading }) {
 
   return (
     <div className="content-inner">
-      <UserSearch {...userSearchProps} />
+      <UserFilter {...userFilterProps} />
       <UserList {...userListProps} />
       <UserModalGen />
     </div>
@@ -107,4 +107,4 @@ Users.propTypes = {
   loading: PropTypes.bool,
 }
 
-export default connect(({ users, loading }) => ({ users, loading: loading.models.user }))(Users)
+export default connect(({ users, loading }) => ({ users, loading: loading.models.users }))(Users)
diff --git a/src/utils/menu.js b/src/utils/menu.js
index 6d12eaf..f4325d1 100644
--- a/src/utils/menu.js
+++ b/src/utils/menu.js
@@ -10,30 +10,30 @@ module.exports = [
     icon: 'user',
   },
   {
-    key: 'ui',
+    key: 'UIElement',
     name: 'UI组件',
     icon: 'camera-o',
     clickable: false,
     child: [
       {
-        key: 'ico',
-        name: 'Ico 图标',
+        key: 'iconfont',
+        name: 'IconFont 字体图标',
       },
       {
-        key: 'search',
-        name: 'Search 搜索',
+        key: 'dataTable',
+        name: 'DataTable 数据表格',
       },
       {
         key: 'dropOption',
         name: 'DropOption 下拉操作',
       },
       {
-        key: 'layer',
-        name: 'Layer 弹层',
+        key: 'search',
+        name: 'Search 搜索',
       },
       {
-        key: 'DataTable',
-        name: 'DataTable 数据表格',
+        key: 'layer',
+        name: 'layer 弹层【方法】',
       },
     ],
   },