diff --git a/src/App.vue b/src/App.vue
index 39f3d0c6429fc1ef8198329626f67a9b28862614..2cce4275021ace44d70df566aaef1af6c2f575c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
   </a-config-provider>
 </template>
 <script>
+//test
 import {computed, defineComponent} from "vue";
 import {useStore} from "vuex";
 import {useI18n} from 'vue-i18n/index';
diff --git a/src/assets/css/layout.less b/src/assets/css/layout.less
index f3dcdf12c8a29fb0e2efe827e3edf3a55a78d969..8861738203f8c42dda615dd72a32850dd1b31f53 100644
--- a/src/assets/css/layout.less
+++ b/src/assets/css/layout.less
@@ -14,6 +14,7 @@ html {
     border-bottom: 1px solid whitesmoke;
     background: white;
   }
+
   #header {
     padding-left: 0px;
     padding-right: 15px;
@@ -23,21 +24,26 @@ html {
 #layout.layout-head.theme-dark {
   #logo {
     height: 60px;
+
     img {
       margin-top: -3.5px;
     }
+
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     .next-menu .menu-item:hover {
       background-color: black !important;
     }
+
     padding-left: 0px;
     padding-right: 15px;
     background-color: #191a23;
     color: white;
   }
+
   .ant-layout-header {
     background-color: #191a23;
   }
@@ -46,21 +52,26 @@ html {
 #layout.layout-head.theme-night {
   #logo {
     height: 60px;
+
     img {
       margin-top: -3.5px;
     }
+
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     .next-menu .menu-item:hover {
       background-color: black !important;
     }
+
     padding-left: 0px;
     padding-right: 15px;
     background-color: #191a23;
     color: white;
   }
+
   .ant-layout-header {
     background-color: #191a23;
   }
@@ -72,10 +83,12 @@ html {
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   > .ant-layout-sider {
     background: #191a23 !important;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
@@ -89,10 +102,12 @@ html {
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   > .ant-layout-sider {
     background: #191a23 !important;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
@@ -107,10 +122,12 @@ html {
     border-bottom: 1px solid whitesmoke;
     background: white;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   > .ant-layout-sider {
     box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05) !important;
     background-color: white !important;
@@ -124,16 +141,20 @@ html {
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .ant-layout-header {
     .comp-menu {
       display: inline-block;
       height: 60px;
       line-height: 60px;
       padding-left: 30px;
+      flex: 1;
+
       .menu-item {
         color: unset;
         height: 60px;
@@ -143,12 +164,15 @@ html {
         padding-right: 15px;
         font-size: 14.5px;
       }
+
       .is-active {
         background-color: whitesmoke;
       }
     }
+
     background-color: white !important;
   }
+
   > .ant-layout-sider {
     background: #191a23 !important;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
@@ -162,16 +186,19 @@ html {
     border-bottom: 1px solid #101117;
     background: #191a23;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .ant-layout-header {
     .comp-menu {
       display: inline-block;
       height: 60px;
       line-height: 60px;
       padding-left: 30px;
+
       .menu-item {
         color: unset;
         height: 60px;
@@ -181,12 +208,15 @@ html {
         padding-right: 15px;
         font-size: 14.5px;
       }
+
       .is-active {
         background-color: whitesmoke;
       }
     }
+
     background-color: white !important;
   }
+
   > .ant-layout-sider {
     background: #191a23 !important;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
@@ -200,30 +230,36 @@ html {
     border-bottom: 1px solid whitesmoke;
     background: white;
   }
+
   #header {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .ant-layout-header {
     .comp-menu {
       display: inline-block;
       height: 60px;
       line-height: 60px;
       padding-left: 30px;
+
       .menu-item {
-        height:60px;
+        height: 60px;
         line-height: 60px;
         display: inline-block;
         padding-left: 15px;
         padding-right: 15px;
         font-size: 14.5px;
       }
+
       .is-active {
         background-color: whitesmoke;
       }
     }
+
     background-color: white !important;
   }
+
   > .ant-layout-sider {
     box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05) !important;
     z-index: 999;
@@ -231,7 +267,7 @@ html {
   }
 }
 
-.ant-layout>.ant-layout-header {
+.ant-layout > .ant-layout-header {
   padding-left: 0px;
   padding-right: 0px;
   height: 60px;
@@ -245,6 +281,7 @@ html {
     height: 100vh;
     position: relative;
     overflow: hidden !important;
+
     & > .ant-layout-sider-children > div {
       position: absolute;
       left: 0;
@@ -259,10 +296,12 @@ html {
 #logo {
   text-align: center;
 }
+
 #logo .image {
   margin-top: 11px;
   height: 38px;
 }
+
 #logo .title {
   display: inline-block;
   color: @primary-color !important;
@@ -272,32 +311,38 @@ html {
   font-weight: 700;
   line-height: 53px;
 }
+
 #header {
+  display: flex;
   height: 60px;
   line-height: 60px;
   background-color: white;
 }
+
 #header .next-menu {
   float: right;
   height: 60px;
+  min-width: 250px;
 }
+
 #header .prev-menu {
-  display: inline-block;
   height: 60px;
 }
+
 #header .head-logo {
   width: 250px;
   height: 60px;
-  display: inline-block;
 }
+
 #header .head-menu {
-  position: absolute;
+  flex: 1;
+  overflow: hidden;
   .ant-menu {
     height: 60px;
     line-height: 60px;
   }
-  display: inline-block;
 }
+
 #header .prev-menu .menu-item,
 #header .next-menu .menu-item {
   font-size: 15.8px;
@@ -306,17 +351,21 @@ html {
   line-height: 60px;
   display: inline-block;
 }
+
 .avatar-dropdown {
   width: 160px !important;
 }
+
 .notice-dropdown {
   .ant-tabs {
     margin: 10px;
   }
+
   width: 368px !important;
   height: 300px;
   margin: 10px;
 }
+
 #header .prev-menu .locale-item,
 #header .next-menu .locale-item {
   font-size: 15.8px;
@@ -325,6 +374,7 @@ html {
   line-height: 60px;
   display: inline-block;
 }
+
 #header .prev-menu .avatar-item,
 #header .next-menu .avatar-item {
   margin-left: 13px;
@@ -336,10 +386,12 @@ html {
   padding-right: 5px;
   padding-left: 5px;
   display: inline-block;
+
   img {
     border-radius: 100px;
   }
 }
+
 #header .prev-menu .notice-item,
 #header .next-menu .notice-item {
   margin-left: 13px;
@@ -357,6 +409,7 @@ html {
 #header .next-menu .menu-item:hover {
   background-color: #f7f7f7;
 }
+
 /** 头部固定 */
 .fixedHeader {
   #content {
@@ -364,29 +417,36 @@ html {
     width: 100%;
   }
 }
+
 .fixedHeader.muiltTab {
   z-index: 600;
+
   #content {
     height: calc(~"(100% - 51px)");
     -ms-overflow-style: none;
     overflow: -moz-scrollbars-none;
   }
+
   #content::-webkit-scrollbar {
     width: 0 !important;
   }
 }
+
 /** 主题配置 */
 .pearone-color .color-title {
   padding: 15px 0 0px 20px;
   margin-bottom: 4px;
 }
+
 .pearone-color .color-content {
   padding: 15px 10px 0 20px;
 }
+
 .pearone-color .color-content ul {
   list-style: none;
   padding: 0px;
 }
+
 .pearone-color .color-content ul li {
   position: relative;
   display: inline-block;
@@ -401,6 +461,7 @@ html {
   color: #666;
   border-radius: 6px;
 }
+
 .pearone-color .color-content li.layui-this:after,
 .pearone-color .color-content li:hover:after {
   width: 81px;
@@ -411,6 +472,7 @@ html {
   opacity: 1;
   border-radius: 6px;
 }
+
 .pearone-color .color-content li:after {
   content: "";
   position: absolute;
@@ -424,17 +486,21 @@ html {
   -webkit-transition: all 0.3s;
   opacity: 0;
 }
+
 .select-color {
   margin-bottom: 30px;
 }
+
 .select-color .select-color-title {
   padding: 10px 0 0px 20px;
   margin-bottom: 4px;
 }
+
 .select-color .select-color-content {
   padding: 20px 0 0px 0px;
   margin-bottom: 4px;
 }
+
 .select-color .select-color-content .select-color-item {
   background-color: gray;
   width: 25px;
@@ -448,4 +514,4 @@ html {
   text-align: center;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
   line-height: 30px;
-}
\ No newline at end of file
+}
diff --git a/src/composable/useMenu.js b/src/composable/useMenu.js
index 684ebc6cfd2ec80efda44644647160a7ef83e993..d87b8f2ec4f85d8a63d85c794a71101902a330cd 100644
--- a/src/composable/useMenu.js
+++ b/src/composable/useMenu.js
@@ -32,13 +32,26 @@ export function useMenu() {
     }, { immediate: true})
 
     function openChange(keys) {
-        const lastPath = keys.find(key => lastOpenKeys.value.indexOf(key) === -1);
-        let result = findParentAll(menus.value, lastPath);
-        openKeys.value = result;
-        lastOpenKeys.value = result;
+      if (getters.layout == "layout-head" ){
+        return;
+      }
+      const lastPath = keys.find(key => lastOpenKeys.value.indexOf(key) === -1);
+      //let result = findParentAll(menus.value, lastPath);
+      let oneLevelMenu = [];
+      menus.value.filter(s => s.parent == 0).forEach(s => {
+        oneLevelMenu.push(s.path);
+      })
+      if (!oneLevelMenu.includes(lastPath)) {
+        openKeys.value = keys;
+        lastOpenKeys.value = keys;
+      } else {
+        let normalizePath = lastPath ? [lastPath] : [];
+        openKeys.value = normalizePath
+        lastOpenKeys.value = normalizePath
+      }
     }
 
     return {
         selectedKeys, openKeys, openChange, menus
     }
-}
\ No newline at end of file
+}
diff --git a/src/layout/module/header/index.vue b/src/layout/module/header/index.vue
index 74a4c2443444640c396377b2ce35e6af01742a5f..7dd69944b119e5c380fbe38e39e9d894a603b998 100644
--- a/src/layout/module/header/index.vue
+++ b/src/layout/module/header/index.vue
@@ -1,18 +1,18 @@
 <template>
-  <div id="header" :class="[isMobile && 'mobile_header']">
+  <div id="header">
     <template v-if="layout !== 'layout-head'">
       <!-- 左侧菜单 -->
-      <div class="prev-menu">
+      <div class="prev-menu" :style="styles">
         <!-- 左侧缩进功能键 -->
         <div class="menu-item" @click="trigger()">
-          <AlignLeftOutlined v-if="collapsed" />
+          <AlignLeftOutlined v-if="collapsed"/>
           <!-- 左侧缩进功能键盘 -->
-          <AlignRightOutlined v-else />
+          <AlignRightOutlined v-else/>
         </div>
         <div class="menu-item" @click="refresh">
           <!-- 刷新当前页面路由 -->
-          <ReloadOutlined v-if="routerActive" />
-          <LoadingOutlined v-else />
+          <ReloadOutlined v-if="routerActive"/>
+          <LoadingOutlined v-else/>
         </div>
       </div>
     </template>
@@ -28,51 +28,56 @@
 
     <!-- 综合菜单 -->
     <div v-if="layout == 'layout-comp'" class="comp-menu">
-      <template :key="index" v-for="(route, index) in routes">
-        <div
-          @click="changeMenu(route)"
-          class="menu-item"
-          :class="[active === route.path ? 'is-active' : '']"
-        >
-          <span>{{ route.meta.title }}</span>
-        </div>
-      </template>
+
+      <a-menu
+        v-model:selectedKeys="selectedKeys"
+        theme="light"
+        mode="horizontal"
+        style="display:block"
+      >
+        <a-menu-item :key="index" v-for="(route, index) in routes" :class="[active === route.path ? 'is-active' : '']"
+                     @click="changeMenu(route)">{{ route.meta.title }}
+        </a-menu-item>
+
+      </a-menu>
+
+
     </div>
     <!-- 右侧菜单 -->
     <div class="next-menu">
       <div class="menu-item" v-if="!isFull" @click="fullScreen(1)">
-        <ExpandOutlined />
+        <ExpandOutlined/>
       </div>
       <div class="menu-item" v-else @click="fullScreen(2)">
-        <CompressOutlined />
+        <CompressOutlined/>
       </div>
       <a-dropdown class="notice-item" placement="bottom">
-        <BellOutlined />
+        <BellOutlined/>
         <template #overlay>
           <a-menu class="notice-dropdown">
             <a-tabs centered="true">
               <a-tab-pane key="1" tab="通知">
-                <a-empty description="暂无通知" />
+                <a-empty description="暂无通知"/>
               </a-tab-pane>
               <a-tab-pane key="2" tab="公告">
-                <a-empty description="暂无公告" />
+                <a-empty description="暂无公告"/>
               </a-tab-pane>
               <a-tab-pane key="3" tab="私信">
-                <a-empty description="暂无私信" />
+                <a-empty description="暂无私信"/>
               </a-tab-pane>
               <a-tab-pane key="4" tab="任务">
-                <a-empty description="暂无任务" />
+                <a-empty description="暂无任务"/>
               </a-tab-pane>
             </a-tabs>
           </a-menu>
         </template>
       </a-dropdown>
       <a-dropdown class="locale-item" placement="bottomCenter">
-        <GlobalOutlined />
+        <GlobalOutlined/>
         <template #overlay>
           <a-menu @click="setLanguage" :selectedKeys="selectedKeys">
-            <a-menu-item key="zh-CN"> 简体中文 </a-menu-item>
-            <a-menu-item key="en-US"> English </a-menu-item>
+            <a-menu-item key="zh-CN"> 简体中文</a-menu-item>
+            <a-menu-item key="en-US"> English</a-menu-item>
           </a-menu>
         </template>
       </a-dropdown>
@@ -83,28 +88,28 @@
         <template #overlay>
           <a-menu class="avatar-dropdown">
             <a-menu-item key="0">
-              <a-menu-item @click="go"> 个人中心 </a-menu-item>
+              <a-menu-item @click="go"> 个人中心</a-menu-item>
             </a-menu-item>
-            <a-menu-divider />
+            <a-menu-divider/>
             <a-menu-item key="3">
-              <a-menu-item @click="logout"> 注销登录 </a-menu-item>
+              <a-menu-item @click="logout"> 注销登录</a-menu-item>
             </a-menu-item>
           </a-menu>
         </template>
       </a-dropdown>
-      <div v-if="!isMobile" class="menu-item" @click="setting()">
-        <MoreOutlined />
+      <div class="menu-item" @click="setting()">
+        <MoreOutlined/>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { computed, watch, ref, unref } from "vue";
-import { useStore } from "vuex";
+import {computed, watch, ref, unref, reactive} from "vue";
+import {useStore} from "vuex";
 import Menu from "../menu/index.vue";
 import Logo from "../logo/index.vue";
-import { useFullScreen } from "@/composable/useFullScreen";
-import { useRoute, useRouter } from "vue-router";
+import {useFullScreen} from "@/composable/useFullScreen";
+import {useRoute, useRouter} from "vue-router";
 import i18n from "@/locale/index.js";
 import {
   AlignLeftOutlined,
@@ -117,7 +122,8 @@ import {
   BellOutlined,
   LoadingOutlined,
 } from "@ant-design/icons-vue";
-import { loadLocaleMessages } from "@/locale/index.js";
+import {loadLocaleMessages} from "@/locale/index.js";
+
 export default {
   components: {
     AlignLeftOutlined,
@@ -133,18 +139,29 @@ export default {
     LoadingOutlined,
   },
   setup() {
-    const { getters, commit, dispatch } = useStore();
+    const {getters, commit, dispatch} = useStore();
     const layout = computed(() => getters.layout);
     const collapsed = computed(() => getters.collapsed);
     const menuModel = computed(() => getters.menuModel);
     const theme = computed(() => getters.theme);
     const $route = useRoute();
     const router = useRouter();
-    const { isFull, fullScreen } = useFullScreen();
+    const {isFull, fullScreen} = useFullScreen();
     const active = ref($route.matched[0].path);
-    const isMobile = computed(() => getters.isMobile);
+    // const isMobile = computed(() => getters.isMobile);
+    let styles = ref({});
+    if (getters.layout == "layout-side") {
+      styles.value = {
+        flex: 1
+      };
+    }
     const routerActive = computed(() => getters.routerActive);
-
+    //监听布局方式发生变化
+    watch(computed(() => getters.layout), (newVal, oldVal) => {
+      styles.value = newVal == "layout-side" ? {
+        flex: 1
+      } : {};
+    })
     watch(
       computed(() => $route.fullPath),
       () => {
@@ -162,7 +179,7 @@ export default {
     };
 
     const changeMenu = (targetRoute) => {
-      let { children, path } = targetRoute;
+      let {children, path} = targetRoute;
       while (children && children[0]) {
         path = children[0].path;
         children = children[0].children;
@@ -182,14 +199,14 @@ export default {
     const defaultLang = computed(() => store.state.app.language);
     const selectedKeys = ref([unref(defaultLang)]);
 
-    const setLanguage = async ({ key }) => {
+    const setLanguage = async ({key}) => {
       selectedKeys.value = [key];
       await loadLocaleMessages(i18n, key);
       await store.dispatch("app/setLanguage", key);
     };
 
     return {
-      isMobile,
+      styles,
       layout,
       collapsed,
       fullScreen,
@@ -215,4 +232,4 @@ export default {
 .mobile_header {
   padding-right: 0px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/module/menu/SubMenu.vue b/src/layout/module/menu/SubMenu.vue
index 1289d303e98fb52d4c4c0213f6347f1990df47b5..c07b30d152f502fa5e5065c2badda507a2373396 100644
--- a/src/layout/module/menu/SubMenu.vue
+++ b/src/layout/module/menu/SubMenu.vue
@@ -1,30 +1,32 @@
 <template>
-    <a-menu-item :key="item.path" v-if="!hasChildren(item)">
-      <template #icon>
-        <p-icon :type="item.meta.icon" />
-      </template>
+  <a-menu-item :key="item.path" v-if="!hasChildren(item)">
+    <template #icon>
+      <p-icon :type="item.meta.icon"/>
+    </template>
+    {{ t(item.meta.i18n) }}
+  </a-menu-item>
+  <a-menu-item :key="item.children[0].path"
+               v-else-if="item.children && item.children.length === 1 && item.parent === '0'">
+    <template #icon>
+      <p-icon :type="item.children[0].meta.icon"/>
+    </template>
+    {{ t(item.children[0].meta.i18n) }}
+  </a-menu-item>
+  <a-sub-menu :key="item.path" v-else>
+    <template #icon>
+      <p-icon :type="item.meta.icon"/>
+    </template>
+    <template #title>
       {{ t(item.meta.i18n) }}
-    </a-menu-item>
-    <a-menu-item :key="item.children[0].path" v-else-if="item.children && item.children.length === 1 && item.parent === '0'">
-      <template #icon>
-        <p-icon :type="item.children[0].meta.icon" />
-      </template>
-      {{ t(item.children[0].meta.i18n) }}
-    </a-menu-item>
-    <a-sub-menu :key="item.path" v-else>
-      <template #icon>
-        <p-icon :type="item.meta.icon" />
-      </template>
-      <template #title>
-        {{ t(item.meta.i18n) }}
-      </template>
-      <template v-for="child in item.children" :key="child.path">
-        <sub-menu v-if="!child.hidden" :item="child"> </sub-menu>
-      </template>
-    </a-sub-menu>
+    </template>
+    <template v-for="child in item.children" :key="child.path">
+      <sub-menu v-if="!child.hidden" :item="child"></sub-menu>
+    </template>
+  </a-sub-menu>
 </template>
 <script>
-import { useI18n  } from "vue-i18n";
+import {useI18n} from "vue-i18n";
+
 export default {
   name: "SubMenu",
   props: {
@@ -38,7 +40,7 @@ export default {
       return item.children != undefined;
     };
 
-    const { t } = useI18n();
+    const {t} = useI18n();
 
     return {
       t,
diff --git a/src/layout/module/menu/index.vue b/src/layout/module/menu/index.vue
index 9ec7b57eb763fb0bfb689466afa9e752e96efd60..54de90aa1d3fffacf5913cae8475e20b1b9151b3 100644
--- a/src/layout/module/menu/index.vue
+++ b/src/layout/module/menu/index.vue
@@ -48,7 +48,7 @@ export default {
             menus.value = getters.menu.find((r) => r.path === route.matched[0].path).children;
         }
     })
-    
+
     const { selectedKeys, openKeys, openChange, menus } = useMenu();
 
     return { onSelect, openChange, selectedKeys,  menuModel, menuTheme, openKeys, menus };
@@ -57,8 +57,8 @@ export default {
 </script>
 <style>
 #menu {
-  overflow: scroll;
-  height: calc(100% - 60px);
+  /*overflow: scroll;*/
+  /*height: calc(100% - 60px);*/
 }
 
 #menu::-webkit-scrollbar-track {
@@ -70,4 +70,4 @@ export default {
   width: 0px;
   height: 0px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/locale/lang/en-US/menu.js b/src/locale/lang/en-US/menu.js
index f6e61b6b1427a4d823dd8cdb8539cd919544845e..4b3bd771f035e6d70309c4be42374891ae940ed8 100644
--- a/src/locale/lang/en-US/menu.js
+++ b/src/locale/lang/en-US/menu.js
@@ -23,5 +23,7 @@ export default {
   "error-404": "404",
   "error-500": "500",
   "permission": "permission",
-  "permission-test": "permission"
+  "permission-test": "permission",
+  "system":"system manager",
+  "userInfo":"user manager"
 }
diff --git a/src/locale/lang/zh-CN/menu.js b/src/locale/lang/zh-CN/menu.js
index 957941c6a2662d97f8ff78a7f1555dbce56b1ebb..201407d7db18cea8b1d4f323af22c8becddc06d2 100644
--- a/src/locale/lang/zh-CN/menu.js
+++ b/src/locale/lang/zh-CN/menu.js
@@ -23,5 +23,7 @@ export default {
   "error-404": "404",
   "error-500": "500",
   "permission": "系统权限",
-  "permission-test": "权限测试"
+  "permission-test": "权限测试",
+  "system":"系统管理",
+  "userInfo":"用户管理"
 }
diff --git a/src/mock/service/menuList.json b/src/mock/service/menuList.json
index d4c605daa7b7794ced36a0a614f2ff9b1d4cf51e..9f8e819ec71ee861e09e1ed77faf667296d4dfb1 100644
--- a/src/mock/service/menuList.json
+++ b/src/mock/service/menuList.json
@@ -322,10 +322,10 @@
   },
   {
     "id": "25",
-    "parent": "0",
+    "parent": "27",
     "path": "/permission",
     "name": "permission",
-    "type": "menu",
+    "type": "dir",
     "icon": "DatabaseOutlined",
     "title": "系统权限",
     "sort": 6,
@@ -347,5 +347,33 @@
     "hidden": false,
     "status": true,
     "i18n": "permission-test"
+  },
+  {
+    "id": "27",
+    "parent": "0",
+    "path": "/system",
+    "name": "system",
+    "type": "dir",
+    "icon": "SettingOutlined",
+    "title": "系统管理",
+    "sort": 8,
+    "link": "",
+    "hidden": false,
+    "status": true,
+    "i18n": "system"
+  },
+  {
+    "id": "28",
+    "parent": "27",
+    "path": "/system/userInfo",
+    "name": "userInfo",
+    "type": "menu",
+    "icon": "DatabaseOutlined",
+    "title": "用户管理",
+    "sort": 0,
+    "link": "",
+    "hidden": false,
+    "status": true,
+    "i18n": "userInfo"
   }
 ]
diff --git a/src/route/module/main-routes.js b/src/route/module/main-routes.js
index fcca42abf8408e5b9d2344e574cbae9674151319..569a5dceb59d5272915b5c5bd858d8ea006fd40c 100644
--- a/src/route/module/main-routes.js
+++ b/src/route/module/main-routes.js
@@ -20,5 +20,6 @@ export default {
   'error-403': () => import('@/view/error/403.vue'),
   'error-404': () => import('@/view/error/404.vue'),
   'error-500': () => import('@/view/error/500.vue'),
-  'permission-test': () => import('@/view/permission/permission.vue')
+  'permission-test': () => import('@/view/permission/permission.vue'),
+  'userInfo': () => import('@/view/systemManager/userInfo.vue')
 }
diff --git a/src/view/systemManager/userInfo.vue b/src/view/systemManager/userInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07e516933f871ddd74122b552127f46da3d1c75e
--- /dev/null
+++ b/src/view/systemManager/userInfo.vue
@@ -0,0 +1,270 @@
+<template>
+  <div id="table-dome">
+    <page-layout>
+
+      <a-card>
+        <a-form
+          ref="formRef"
+          name="advanced_search"
+          class="ant-advanced-search-form"
+          :model="formState"
+          @finish="onFinish"
+        >
+          <a-row :gutter="24">
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col v-show="expand" :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col v-show="expand" :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col v-show="expand" :xs="24" :sm="12" :md="8" lg="6">
+              <a-form-item
+                :name="`field-1`"
+                :label="`field-1`"
+                :rules="[{ required: true, message: 'input something' }]"
+              >
+                <a-input v-model:value="formState[`field-1`]" placeholder="placeholder"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :sm="12" :md="8" lg="6">
+              <a-button type="primary" html-type="submit">
+                <template #icon>
+                  <SearchOutlined/>
+                </template>
+                查询
+              </a-button>
+              <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">
+                <template #icon>
+                  <ClearOutlined/>
+                </template>
+                清除
+              </a-button>
+              <a-button type="dashed" style="font-size: 12px" @click="expand = !expand">
+                <template v-if="expand">
+                  <UpOutlined/>
+                </template>
+                <template v-else>
+                  <DownOutlined/>
+                </template>
+                更多
+              </a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+        <p-table
+          :fetch="fetch"
+          :value="obj"
+          :columns="columns"
+          :toolbar="toolbar"
+          :operate="operate"
+          :pagination="pagination"
+          :bordered="true"
+        >
+          <!-- 继承至 a-table 的默认插槽 -->
+          <template #name="{ record }">
+            {{ record.name }}
+          </template>
+        </p-table>
+      </a-card>
+    </page-layout>
+    <page-footer></page-footer>
+  </div>
+</template>
+<script>
+import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
+import {reactive, ref, watch} from "vue";
+
+const dataItem = {
+  key: "1",
+  name: "Joe Black",
+  sex: "boy",
+  age: 32,
+  createTime: "2020-02-09 00:00:00",
+  address: "Sidney No. 1 Lake Park Sidney No. 1 ",
+  tags: ["cool", "teacher"],
+};
+
+export default {
+  setup() {
+    /// 数据来源 [模拟]
+    const fetch = async (param) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            total: 100,
+            data: new Array(param.pageSize).fill(dataItem),
+          });
+        }, 900);
+      });
+    };
+
+    /// 工具栏
+    const toolbar = [
+      {
+        label: "新增",
+        event: function (keys) {
+          alert("新增操作:" + JSON.stringify(keys));
+        },
+      },
+      {
+        label: "删除",
+        event: function (keys) {
+          alert("批量删除:" + JSON.stringify(keys));
+        },
+      },
+      {
+        label: "更多操作",
+        children: [
+          {
+            label: "批量导入",
+            event(keys) {
+              alert("批量导入");
+            },
+          },
+          {
+            label: "批量导出",
+            event(keys) {
+              alert("批量导出");
+            },
+          },
+        ],
+      },
+    ];
+
+    /// 字段
+    const columns = [
+      {
+        title: "姓名",
+        dataIndex: "name",
+        key: "name",
+        slots: {customRender: "name"},
+      },
+      {title: "性别", dataIndex: "sex", key: "sex"},
+      {title: "年龄", dataIndex: "age", key: "age"},
+      {title: "地址", dataIndex: "address", key: "address"},
+    ];
+
+    /// 行操作
+    const operate = [
+      {
+        label: "查看",
+        event: function (record) {
+          alert("查看详情:" + JSON.stringify(record));
+        },
+      },
+      {
+        label: "修改",
+        event: function (record) {
+          alert("修改事件:" + JSON.stringify(record));
+        },
+      },
+      {
+        label: "删除",
+        event: function (record) {
+          alert("删除事件:" + JSON.stringify(record));
+        },
+      },
+      {
+        label: "更多",
+        children: [
+          {
+            label: "导出",
+            event: function (record) {
+              alert("导出");
+            },
+          },
+          {
+            label: "下载",
+            event: function (record) {
+              alert("下载");
+            },
+          },
+        ],
+      },
+    ];
+
+    /// 表单
+    const expand = ref(false);
+    const formRef = ref();
+    const formState = reactive({});
+    const onFinish = values => {
+      console.log('Received values of form: ', values);
+      console.log('formState: ', formState);
+    };
+    /// 声明抛出
+    return {
+      pagination: {current: 1, pageSize: 10}, // 分页配置
+      fetch: fetch, // 数据回调
+      toolbar: toolbar, // 工具栏
+      columns: columns, // 列配置
+      operate: operate, // 行操作
+      //表单配置
+      formRef,
+      formState,
+      expand,
+      onFinish,
+    };
+  },
+  components: {
+    DownOutlined,
+    UpOutlined,
+  }
+};
+</script>