diff --git a/web-react/src/assets/style/lib/table.less b/web-react/src/assets/style/lib/table.less
index 0e748c7..2e3d24e 100644
--- a/web-react/src/assets/style/lib/table.less
+++ b/web-react/src/assets/style/lib/table.less
@@ -1,5 +1,4 @@
 @import (reference) '../extend.less';
-
 .yo-query-bar {
   margin-bottom: @padding-xs;
   .ant-form-inline {
@@ -8,220 +7,224 @@
     }
   }
 }
-
 .yo-action-bar {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 
-    margin-bottom: @padding-md;
-
-    &--actions {
-        > .ant-btn,
-        > .ant-btn-group {
-            + .ant-btn,
-            + .ant-btn-group {
-                margin-left: @padding-xs;
-            }
-        }
+  margin-bottom: @padding-md;
+  &--actions {
+    >.ant-btn,
+    >.ant-btn-group {
+      +.ant-btn,
+      +.ant-btn-group {
+        margin-left: @padding-xs;
+      }
     }
+  }
 }
-
 .ant-table-thead {
-    th.ant-table-column-has-sorters {
-        &:hover {
-            background-color: darken(@background-color-base, 5%);
-        }
+  th.ant-table-column-has-sorters {
+    &:hover {
+      background-color: darken(@background-color-base, 5%);
     }
+  }
 }
-
 .ant-table-tbody {
-    > tr {
-        > td {
-            transition-property: background, border-bottom-color;
-        }
+  >tr {
+    >td {
+      transition-property: background, border-bottom-color;
     }
-
-    > tr.ant-table-row:hover {
-        > td {
-            border-bottom-color: lighten(@primary-color, 30%);
-        }
+  }
+  >tr.ant-table-row:hover {
+    >td {
+      border-bottom-color: lighten(@primary-color, 30%);
     }
+  }
 }
-
 .ant-table-small {
-    > .ant-table-content {
-        > .ant-table-body {
-            margin: 0;
-
-            > table {
-                > .ant-table-thead {
-                    > tr {
-                        > th {
-                            background-color: @table-selected-row-bg;
-                        }
-                    }
-                }
+  >.ant-table-content {
+    >.ant-table-body {
+      margin: 0;
+      >table {
+        >.ant-table-thead {
+          >tr {
+            >th {
+              background-color: @table-selected-row-bg;
             }
+          }
         }
+      }
     }
+  }
 }
-
 .ant-table-thead {
-    > tr {
-        > th {
-            font-weight: bold;
-        }
+  >tr {
+    >th {
+      font-weight: bold;
     }
+  }
 }
-
 .ant-table-sticky-scroll {
   display: none;
 }
-
 .yo-table {
-    .ant-table {
-        margin: 0 !important;
+  .ant-table {
+    margin: 0 !important;
+  }
+  .border-right-none {
+    border-right-width: 0 !important;
+    &:last-child {
+      border-right-width: 1px !important;
     }
-
-    .border-right-none() {
-        border-right-width: 0 !important;
-
-        &:last-child {
-            border-right-width: 1px !important;
+  }
+  .ant-table-content {
+    .ant-table-body {
+      overflow-x: auto !important;
+      >table {
+        >.ant-table-thead {
+          >tr {
+            >th {
+              .border-right-none();
+            }
+          }
         }
+        >.ant-table-tbody {
+          >tr {
+            >td {
+              .border-right-none();
+            }
+          }
+        }
+      }
     }
-
-    .ant-table-content {
-        .ant-table-body {
-            overflow-x: auto !important;
-
-            > table {
-                > .ant-table-thead {
-                    > tr {
-                        > th {
-                            .border-right-none();
-                        }
-                    }
-                }
-
-                > .ant-table-tbody {
-                    > tr {
-                        > td {
-                            .border-right-none();
-                        }
-                    }
-                }
-            }
+    .ant-table-fixed-left {
+      .ant-table-thead {
+        >tr {
+          >th {
+            border-right-width: 0 !important;
+          }
         }
-
-        .ant-table-fixed-left {
-            .ant-table-thead {
-                > tr {
-                    > th {
-                        border-right-width: 0 !important;
-                    }
-                }
-            }
-
-            .ant-table-tbody {
-                > tr {
-                    > td {
-                        border-right-width: 0 !important;
-                    }
-                }
-            }
-        }
-
-        .ant-table-fixed-right {
-            .ant-table-fixed {
-                border-left-width: 0 !important;
-            }
-
-            .ant-table-thead {
-                > tr {
-                    > th {
-                        .border-right-none();
-                    }
-                }
-            }
-
-            .ant-table-tbody {
-                > tr {
-                    > td {
-                        .border-right-none();
-                    }
-                }
-            }
+      }
+      .ant-table-tbody {
+        >tr {
+          >td {
+            border-right-width: 0 !important;
+          }
         }
+      }
     }
-
+    .ant-table-fixed-right {
+      .ant-table-fixed {
+        border-left-width: 0 !important;
+      }
+      .ant-table-thead {
+        >tr {
+          >th {
+            .border-right-none();
+          }
+        }
+      }
+      .ant-table-tbody {
+        >tr {
+          >td {
+            .border-right-none();
+          }
+        }
+      }
+    }
+  }
   .ant-table-bordered {
     >.ant-table-container {
       border-top: @border-width-base @border-style-base @table-border-color;
     }
   }
-
   &--row-no {
     background-color: @table-header-bg;
   }
 }
-
 .yo-table-actions {
-    display: inline-block;
+  display: inline-block;
 
-    vertical-align: middle;
+  vertical-align: middle;
+  &--inner {
+    display: flex;
+    align-items: center;
 
-    &--inner {
-        display: flex;
-        align-items: center;
-
-        height: 18px;
-    }
+    height: 18px;
+  }
 }
-
 .yo-table--column-setting {
-    width: 240px;
+  width: 240px;
+  .ant-dropdown-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .anticon-pushpin {
+    transition: @animation-duration-slow;
+    transform: rotate(45deg);
 
-    .ant-dropdown-menu-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .anticon-pushpin {
-        color: darken(@white, 40%);
-        transition: @animation-duration-slow;
-        transform: rotate(45deg);
-    }
-
-    .yo-table--fixed {
-        transform: rotate(-45deg);
-    }
+    color: darken(@white, 40%);
+  }
+  .yo-table--fixed {
+    transform: rotate(-45deg);
+  }
 }
+.yo-menu-table {
+  .ant-table {
+    .ant-table-expand-icon-col {
+      width: 28px;
+    }
+    .ant-table-row-expand-icon-cell {
+      z-index: 1;
 
-.yo-inner-table {
-    .ant-table {
-        .ant-table-tbody {
-            > .ant-table-expanded-row-level-1 > td {
-                padding: 0;
-                border-right: none !important;
-                .ant-table-wrapper {
-                    border: none;
-                    .ant-table {
-                        margin: 0 !important;
-                    }
-                    .ant-table-container {
-                        border: none;
-                        .ant-table-cell:first-child {
-                            padding-left: 25px;
-                        }
-                        .ant-table-expanded-row-level-1 > td {
-                            border-right: @border-width-base @border-style-base @table-border-color !important;
-                            padding: @padding-sm @padding-xs @padding-sm @padding-xl;
-                        }
-                    }
-                }
+      padding-right: 0 !important;
+
+      border-right: none !important;
+      +.ant-table-cell {
+        padding-left: 0;
+      }
+    }
+    .ant-table-tbody {
+      >.ant-table-expanded-row-level-1>td {
+        padding: 0;
+
+        border-right: none !important;
+        .ant-table-wrapper {
+          border: none;
+          .ant-table {
+            margin: 0 !important;
+          }
+          .ant-table-container {
+            border: none;
+            .ant-table-row-expand-icon-cell {
+              .ant-table-row-expand-icon {
+                left: @padding-md;
+              }
+              +.ant-table-cell {
+                padding-left: @padding-md;
+              }
             }
+            .ant-table-expanded-row-level-1>td {
+              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+
+              border-right: @border-width-base @border-style-base @table-border-color !important;
+              .ant-card {
+                max-width: fit-content;
+                margin-bottom: 0;
+
+                background: none;
+                .ant-card-grid {
+                  width: 300px;
+                  padding: @padding-xs @padding-sm;
+
+                  background-color: @white;
+                }
+              }
+            }
+          }
         }
+      }
     }
+  }
 }
diff --git a/web-react/src/assets/style/lib/visibility.less b/web-react/src/assets/style/lib/visibility.less
index 85c9124..a782155 100644
--- a/web-react/src/assets/style/lib/visibility.less
+++ b/web-react/src/assets/style/lib/visibility.less
@@ -20,3 +20,9 @@
 .flex {
   display: flex;
 }
+.ellipsis {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/web-react/src/assets/style/public.less b/web-react/src/assets/style/public.less
index d935b12..7714511 100644
--- a/web-react/src/assets/style/public.less
+++ b/web-react/src/assets/style/public.less
@@ -33,3 +33,12 @@
     background: url('~assets/image/adorn/house-top-01.png') no-repeat bottom right;
   }
 }
+a.link-gray {
+  color: fade(@black, 50%);
+  &:hover {
+    color: @link-hover-color;
+  }
+  &:active {
+    color: @link-active-color;
+  }
+}
diff --git a/web-react/src/components/query-table/index.jsx b/web-react/src/components/query-table/index.jsx
index d0028bf..62dc0bd 100644
--- a/web-react/src/components/query-table/index.jsx
+++ b/web-react/src/components/query-table/index.jsx
@@ -277,7 +277,7 @@ export default class QueryTable extends Component {
 
         const { loading, dataSource, type } = this.state
 
-        const { query, operator, columns } = this.props
+        const { query, operator, columns, expandable, expandedRowRender } = this.props
 
         const attrs = {}
         Object.keys(this.props).forEach(key => {
@@ -292,7 +292,7 @@ export default class QueryTable extends Component {
             dataSource,
             columns: (() => {
                 const c = []
-                if (type !== 'tree' && rowNumber) {
+                if (type !== 'tree' && rowNumber & !expandable & !expandedRowRender) {
                     c.push(rowNoColumn)
                 }
                 c.push(...(columns || []))
diff --git a/web-react/src/pages/system/menu/index.jsx b/web-react/src/pages/system/menu/index.jsx
index c4f44d8..27eaaf9 100644
--- a/web-react/src/pages/system/menu/index.jsx
+++ b/web-react/src/pages/system/menu/index.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Table, Card, Form, Input, Popconfirm, message as Message, Tag } from 'antd'
+import { Button, Table, Card, Popconfirm, message as Message, Row, Col, Tooltip } from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
@@ -58,13 +58,6 @@ export default class index extends Component {
             title: '前端组件',
             width: 220,
             dataIndex: 'component',
-            ellipsis: true,
-        },
-        {
-            title: '权限标识',
-            width: 220,
-            dataIndex: 'permission',
-            ellipsis: true,
         },
         {
             title: '排序',
@@ -85,17 +78,10 @@ export default class index extends Component {
         if (flag) {
             this.columns.push({
                 title: '操作',
-                width: 150,
+                width: 220,
                 dataIndex: 'actions',
                 render: (text, record) => (
                     <QueryTableActions>
-                        {record.type < 2 && (
-                            <Auth auth="sysMenu:add">
-                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
-                                    新增子菜单
-                                </a>
-                            </Auth>
-                        )}
                         <Auth auth="sysMenu:edit">
                             <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
                         </Auth>
@@ -108,6 +94,13 @@ export default class index extends Component {
                                 <a>删除</a>
                             </Popconfirm>
                         </Auth>
+                        {record.type < 2 && (
+                            <Auth auth="sysMenu:add">
+                                <a onClick={() => this.onOpen(this.addForm, record, true)}>
+                                    {record.type == 0 ? '新增子菜单' : '新增功能'}
+                                </a>
+                            </Auth>
+                        )}
                     </QueryTableActions>
                 ),
             })
@@ -156,27 +149,8 @@ export default class index extends Component {
             ...params,
             ...query,
         })
-        return this.onfilterdata(data)
-        //return data
-    }
-
-    onfilterdata(data) {
-        this.findlastChildren(data)
         return data
     }
-    findlastChildren(data) {
-        data.forEach(s => {
-            if (s.children && s.children.length > 0) {
-                s.rowExpandable = true
-                s.children.forEach(p => {
-                    if (p.children && p.children.length === 0) {
-                        p.rowExpandable = false
-                    }
-                })
-                this.findlastChildren(s.children)
-            }
-        })
-    }
 
     /**
      * 绑定字典数据
@@ -240,64 +214,101 @@ export default class index extends Component {
         this.onAction(apiAction.delete(record), '删除成功')
     }
 
+    //#region 自定义方法
     /**
      * 绘制新的扩展行
      * @param {*} record
      */
     onRowRender(record) {
-        var arr = []
-        var istag = false
-        record.children.map(s => {
-            if (!s.rowExpandable && s.type == 2) {
-                istag = true
-                var temp = (
-                    <Tag color="#87d068" key={s.id}>
-                        {s.name} |{' '}
-                        <Auth auth="sysMenu:edit">
-                            <a onClick={() => this.onOpen(this.editForm, s)}>编辑</a>
-                        </Auth>{' '}
-                        |{' '}
-                        <Auth auth="sysMenu:delete">
-                            <Popconfirm
-                                placement="topRight"
-                                title="是否确认删除"
-                                onConfirm={() => this.onDelete(s)}
-                            >
-                                <a>删除</a>
-                            </Popconfirm>
-                        </Auth>
-                    </Tag>
+        const grids = []
+        let isFunction = false
+        record.children.map(item => {
+            if (!(item.children && item.children.length) && item.type == 2) {
+                isFunction = true
+                const grid = (
+                    <Card.Grid key={item.id}>
+                        <p>
+                            {item.visibleParent && (
+                                <Tooltip placement="top" title="选中此项才会显示菜单">
+                                    <AntIcon
+                                        type="eye"
+                                        style={{ color: '#1890ff' }}
+                                        className="mr-xxs"
+                                    />
+                                </Tooltip>
+                            )}
+                            <b>{item.name}</b>
+                        </p>
+                        <span className="block ellipsis text-gray">{item.permission}</span>
+                        <div className="text-right">
+                            <QueryTableActions>
+                                <Auth auth="sysMenu:edit">
+                                    <Tooltip title="编辑">
+                                        <a
+                                            className="link-gray"
+                                            onClick={() => this.onOpen(this.editForm, item)}
+                                        >
+                                            <AntIcon type="edit" />
+                                        </a>
+                                    </Tooltip>
+                                </Auth>
+                                <Auth auth="sysMenu:delete">
+                                    <Popconfirm
+                                        placement="topRight"
+                                        title="是否确认删除"
+                                        onConfirm={() => this.onDelete(item)}
+                                    >
+                                        <Tooltip title="删除">
+                                            <a className="link-gray">
+                                                <AntIcon type="delete" />
+                                            </a>
+                                        </Tooltip>
+                                    </Popconfirm>
+                                </Auth>
+                            </QueryTableActions>
+                        </div>
+                    </Card.Grid>
                 )
-                arr.push(temp)
-            } else if (s.rowExpandable || (!s.rowExpandable && s.type == 1)) {
-                arr.push(s)
+                grids.push(grid)
+            } else if (
+                (item.children && item.children.length) ||
+                (!(item.children && item.children.length) && item.type == 1)
+            ) {
+                grids.push(item)
             }
         })
-        if (istag) {
-            return arr
+        if (isFunction) {
+            grids.push(
+                <Card.Grid
+                    style={{ padding: '18px 12px', cursor: 'pointer' }}
+                    className="text-center"
+                    onClick={() => this.onOpen(this.addForm, record, true)}
+                >
+                    <div>
+                        <AntIcon type="plus" className="text-normal h2" />
+                    </div>
+                    <span className="text-gray">新增功能</span>
+                </Card.Grid>
+            )
+            return <Card bordered={false}>{grids}</Card>
         } else {
             return (
                 <Table
                     columns={this.columns}
                     showHeader={false}
-                    dataSource={arr}
+                    dataSource={grids}
                     rowKey={record => record.id}
                     expandable={{
                         expandedRowRender: record => this.onRowRender(record),
-                        rowExpandable: record => record.rowExpandable === true,
+                        rowExpandable: record => record.children && record.children.length,
                     }}
-                    childrenColumnName="11"
+                    childrenColumnName="none"
                     bordered={true}
                     pagination={false}
                 />
             )
         }
     }
-
-    //#region 自定义方法
-    async onSetDefault(record) {
-        this.onAction(apiAction.setDefault(record), '设置成功')
-    }
     //#endregion
 
     render() {
@@ -306,15 +317,15 @@ export default class index extends Component {
                 <br />
                 <Card bordered={false}>
                     <QueryTable
-                        className="yo-inner-table"
-                        childrenColumnName="111"
+                        className="yo-menu-table"
+                        childrenColumnName="none"
                         ref={this.table}
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
                         expandable={{
                             expandedRowRender: record => this.onRowRender(record),
-                            rowExpandable: record => record.rowExpandable === true,
+                            rowExpandable: record => record.children && record.children.length,
                         }}
                         operator={
                             <Auth auth="sysMenu:add">