diff --git a/README.md b/README.md
index 59669ff..1ea7231 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ## 简介
 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，可免费商用，同时支持PC、平板、手机
-
+本项目也参考了很多开源的项目、
 ### 在线预览
 - gitee国内访问地址：https://yuanzbz.gitee.io/vue-admin-perfect/#/home
 - github site : https://zouzhibin.github.io/vue-admin-perfect/
diff --git a/src/components/Theme/index.vue b/src/components/Theme/index.vue
index 446d8e1..54cd9c8 100644
--- a/src/components/Theme/index.vue
+++ b/src/components/Theme/index.vue
@@ -24,6 +24,7 @@
         >
           <el-option label="纵向" value="vertical"></el-option>
           <el-option label="横向" value="horizontal"></el-option>
+          <el-option label="分栏" value="columns"></el-option>
         </el-select>
       </div>
       <div class="theme-item">
diff --git a/src/layout/LayoutColumns/index.vue b/src/layout/LayoutColumns/index.vue
index ff352ee..31c1580 100644
--- a/src/layout/LayoutColumns/index.vue
+++ b/src/layout/LayoutColumns/index.vue
@@ -1,12 +1,61 @@
 <template>
-  <div class="main-container">
-    <el-scrollbar>
-      <div class="menu-wrap">
-        <div class="item-menu-wrap">
-
-        </div>
+  <div class="main-columns">
+    <div class="layout-columns-aside">
+      <div class="logo flex-center">
+        <img src="@/assets/image/logo.png" alt="logo" />
       </div>
-    </el-scrollbar>
+      <el-scrollbar>
+        <div class="menu-wrap">
+          <div
+            class="item-menu-wrap"
+            :class="{
+              'active-menu':activeCurrentMenu===item.path
+            }"
+            v-for="item in menusRoutes"
+            :key="item.path"
+            @click="handleChangeMenu(item)"
+          >
+            <el-icon :size="20">
+              <component :is="item?.meta?.icon"></component>
+            </el-icon>
+            <span class="title">{{ item?.meta?.title }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <div class="layout-columns-sub" :style="{ width: isCollapse ? '60px' : '210px' }">
+      <div class="logo flex-center">
+        <span v-show="subMenus.length">{{ isCollapse ? "Vue" : "Vue Admin Perfect" }}</span>
+      </div>
+      <el-scrollbar >
+        <el-menu
+          :collapse="isCollapse"
+          :router="false"
+          :default-active="activeMenu"
+          :unique-opened="SettingStore.themeConfig.uniqueOpened"
+          :collapse-transition="false"
+          class="menu-columns"
+        >
+          <SubMenu
+            :basePath="basePath"
+            :menuList="subMenus"
+          />
+        </el-menu>
+      </el-scrollbar>
+    </div>
+
+    <div class="container">
+      <div class="layout-header">
+        <div class="header-tool">
+          <HeaderToolLeft/>
+          <HeaderToolRight/>
+        </div>
+        <TagsView v-if="themeConfig.showTag"/>
+      </div>
+      <Main/>
+      <Footer/>
+    </div>
   </div>
 </template>
 
@@ -14,25 +63,160 @@
 import { ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {usePermissionStore} from "@/store/modules/permission"
+import { useSettingStore } from "@/store/modules/setting";
+import SubItem from '../components/SubMenu/SubItem.vue'
+import Footer from '../components/Footer/index.vue'
+import SubMenu from '../components/SubMenu/SubMenu.vue'
+import TagsView from '../components/TagsView/index.vue'
 const PermissionStore = usePermissionStore()
-
+const SettingStore = useSettingStore()
 const route = useRoute()
-
+const router = useRouter();
+import HeaderToolRight from '../components/Header/ToolRight.vue'
+import HeaderToolLeft from '../components/Header/ToolLeft.vue'
+import Main from '../components/Main/index.vue'
 // 获取路由
 const permission_routes = computed(() => PermissionStore.permission_routes)
 
+// 获取路由
+const menusRoutes = computed(()=>{
+  return PermissionStore.permission_routes.filter(item=>!item.hidden)
+})
+
+const activeCurrentMenu = ref('')
+// 主题配置
+const themeConfig = computed(() =>SettingStore.themeConfig)
+const isCollapse = computed(() =>!SettingStore.isCollapse)
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+const basePath = ref<string>('/')
+const subMenus = ref([])
+
+watch(()=>[route],()=>{
+    if (!menusRoutes.value.length) return;
+    const [firstMenu] = route.matched
+    activeCurrentMenu.value = firstMenu.path;
+    let menuItem = menusRoutes.value.find(item=>firstMenu.path === item.path)
+    if(menuItem&&menuItem.children?.length) {
+      subMenus.value = menuItem.children
+    }else {
+      subMenus.value = []
+    }
+    basePath.value = firstMenu.path
+},{
+  deep: true,
+  immediate:true
+})
+
+const handleChangeMenu = (item)=>{
+  router.push(item.path);
+}
 </script>
 
 
 <style lang="scss" scoped>
-.menu-wrap{
-
-  width: 100%;
-  height: 50px;
-  text-align: center;
+.main-columns{
   display: flex;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
+  flex-direction: row!important;
+  height: 100%;
+  width: 100%;
+}
+.layout-columns-aside{
+  flex-shrink: 0;
+  width: 80px;
+  height: 100%;
+  background-color: #304156;
+  .el-scrollbar{
+    height: calc(100% - 55px);
+  }
+  .logo {
+    box-sizing: border-box;
+    height: 50px;
+    img {
+      width: 32px;
+      object-fit: contain;
+    }
+  }
+  .menu-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .item-menu-wrap{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 70px;
+      width: 70px;
+      cursor: pointer;
+      transition: all .3s ease;
+    }
+    .active-menu{
+      background: #1890ff;
+      border-radius: 5px;
+    }
+    .title{
+      color: #e5eaf3;
+    }
+    .el-icon{
+      color: #e5eaf3;
+    }
+  }
+}
+
+.layout-columns-sub{
+  flex-shrink: 0;
+  width:200px;
+  box-sizing: border-box;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: white;
+  border-right: 1px solid #eee;
+  .el-scrollbar{
+    height: calc(100vh - 50px);
+  }
+  .logo {
+    width: 100%;
+    box-sizing: border-box;
+    height: 50px;
+    border-bottom: 1px solid #eee;
+    span{
+      font-weight: bold;
+      white-space: nowrap;
+    }
+  }
+  ::v-deep(.menu-columns){
+    border-right: none;
+  }
+}
+.container{
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.layout-header{
+  background: white;
+  transition: width 0.28s;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  .header-tool{
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    padding: 0 10px 0 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
 }
 </style>
diff --git a/src/layout/components/Header/components/Hamburger.vue b/src/layout/components/Header/components/Hamburger.vue
index e209be8..46c0da7 100644
--- a/src/layout/components/Header/components/Hamburger.vue
+++ b/src/layout/components/Header/components/Hamburger.vue
@@ -1,6 +1,6 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb" mode="out-in">
+    <transition-group name="breadcrumb" >
       <el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
         <div class="breadcrumb-item">
           <span class="breadcrumb-title">首页</span>
diff --git a/src/layout/components/SubMenu/SubItem.vue b/src/layout/components/SubMenu/SubItem.vue
index 73d6938..2d58929 100644
--- a/src/layout/components/SubMenu/SubItem.vue
+++ b/src/layout/components/SubMenu/SubItem.vue
@@ -10,7 +10,7 @@
         </el-menu-item>
       </app-link>
     </template>
-    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
+    <el-sub-menu :index="resolvePath(item.path)" v-else >
       <template #title>
         <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
         <span>{{ item.meta && item.meta.title }}</span>
@@ -43,6 +43,7 @@ const props = defineProps({
 
 const onlyOneChild = ref(null)
 const hasOneShowingChild = (children = [], parent) => {
+
   const showingChildren = children.filter((item) => {
     // 过滤掉需要隐藏的菜单
     if (item.hidden) {
@@ -53,7 +54,6 @@ const hasOneShowingChild = (children = [], parent) => {
       return true
     }
   })
-
   // 当只有一个子路由器时，默认情况下会显示该子路由器
   if (showingChildren.length === 1) {
     return true
diff --git a/src/layout/components/SubMenu/SubMenu.vue b/src/layout/components/SubMenu/SubMenu.vue
new file mode 100644
index 0000000..2214d6b
--- /dev/null
+++ b/src/layout/components/SubMenu/SubMenu.vue
@@ -0,0 +1,44 @@
+<template>
+  <template v-for="subItem in menuList" :key="subItem.path">
+    <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
+      <template #title>
+        <el-icon>
+          <component :is="subItem.meta.icon"></component>
+        </el-icon>
+        <span>{{ subItem.meta.title }}</span>
+      </template>
+      <SubMenu :menuList="subItem.children" :basePath="`${basePath}/${subItem.path}`"/>
+    </el-sub-menu>
+    <el-menu-item v-else-if="!subItem.hidden" :index="subItem.path" @click="handleClickMenu(subItem)">
+      <el-icon>
+        <component :is="subItem.meta.icon"></component>
+      </el-icon>
+      <template #title>
+        <span>{{ subItem.meta.title }}</span>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { isExternal } from '@/utils/validate.js'
+let props = defineProps({
+  menuList:{
+    type:Array,
+    default:()=>[]
+  },
+  basePath: {
+    type: String,
+    default: '',
+  },
+})
+
+const router = useRouter();
+const handleClickMenu = (subItem) => {
+  console.log('isExternal(subItem.path)',subItem.path,isExternal(subItem.path))
+  if (isExternal(subItem.path)) return window.open(subItem.path, "_blank");
+  let path = props.basePath+'/'+subItem.path
+  router.push(path);
+};
+</script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0ce7ff0..c8bab8e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -15,12 +15,14 @@
   import { useResizeHandler } from './hooks/useResizeHandler'
   import LayoutVertical from './LayoutVertical/index.vue'
   import LayoutHorizontal from './LayoutHorizontal/index.vue'
+  import LayoutColumns from './LayoutColumns/index.vue'
 
   const SettingStore = useSettingStore()
   const themeConfig = computed(() => SettingStore.themeConfig)
   const LayoutComponents = {
     horizontal: LayoutHorizontal,
     vertical: LayoutVertical,
+    columns: LayoutColumns,
   };
 
   // 是否折叠
diff --git a/src/routers/index.ts b/src/routers/index.ts
index 0190f89..6827898 100644
--- a/src/routers/index.ts
+++ b/src/routers/index.ts
@@ -73,6 +73,7 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
     name: 'layout',
     component: Layout,
     redirect: '/home',
+    meta: { title: '首页', icon: 'House', },
     children: [
       {
         path: '/home',
diff --git a/src/routers/modules/chat.ts b/src/routers/modules/chat.ts
index 3ea3fe2..de179fa 100644
--- a/src/routers/modules/chat.ts
+++ b/src/routers/modules/chat.ts
@@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
 const chartsRouter = [{
     path: '/chat',
     component: Layout,
-    redirect: '/charts/index',
+    redirect: '/chat/index',
     name: 'chat',
     meta: {
         title: '聊天框',
diff --git a/src/routers/modules/externalLink.ts b/src/routers/modules/externalLink.ts
index d7e3030..7e421ce 100644
--- a/src/routers/modules/externalLink.ts
+++ b/src/routers/modules/externalLink.ts
@@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
 const externalLink = [{
     path: '/external-link',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/external-link/wechat',
     name: 'external-link',
     meta: {
         title: '外部链接',
diff --git a/src/routers/modules/nested.ts b/src/routers/modules/nested.ts
index d558da2..a455c1b 100644
--- a/src/routers/modules/nested.ts
+++ b/src/routers/modules/nested.ts
@@ -7,7 +7,7 @@ import Layout from "@/layout/index.vue";
 const nestedRouter = [{
     path: '/nested',
     component: Layout,
-    redirect: '/form/menu1',
+    redirect: '/nested/menu1',
     name: 'nested',
     meta: {
         title: '路由嵌套',
@@ -20,6 +20,7 @@ const nestedRouter = [{
         name: 'menu1',
         meta: { title: '菜单1', icon: 'MenuIcon' },
         alwaysShow:true,
+        redirect: '/nested/menu1/menu1-1',
         children: [
           {
             path: 'menu1-1',
diff --git a/src/routers/modules/system.ts b/src/routers/modules/system.ts
index 05c21e8..a632540 100644
--- a/src/routers/modules/system.ts
+++ b/src/routers/modules/system.ts
@@ -5,7 +5,7 @@ import Layout from '@/layout/index.vue'
 const systemRouter = [{
     path: '/system',
     component: Layout,
-    redirect: '/system/page',
+    redirect: '/system/user',
     name: 'system',
     meta: {
         title: '系统管理',
diff --git a/src/routers/modules/table.ts b/src/routers/modules/table.ts
index a69aef5..d37e445 100644
--- a/src/routers/modules/table.ts
+++ b/src/routers/modules/table.ts
@@ -20,15 +20,15 @@ const tableRouter = [{
             meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
         },
         {
-            path: 'inline-table',
+            path: 'inlineTable',
             component: () => import('@/views/table/InlineEditTable/index.vue'),
-            name: 'inline-table',
+            name: 'inlineTable',
             meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
         },
         {
             path: 'editableProTable',
             component: () => import('@/views/table/EditableProTable/index.vue'),
-            name: 'edit-table',
+            name: 'editableProTable',
             meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
         },
         // {
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 3e7b7db..2aad1be 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -18,7 +18,7 @@ export const useSettingStore = defineStore({
         themeConfig:{
             // 显示设置
             showSetting:false,
-            // 菜单展示模式 默认 vertical   horizontal / vertical
+            // 菜单展示模式 默认 vertical   horizontal / vertical /columns
             mode: 'vertical',
             // tagsView 是否展示 默认展示
             showTag:true,
diff --git a/src/views/errorPages/403.vue b/src/views/errorPages/403.vue
index 47f0683..1bd3044 100644
--- a/src/views/errorPages/403.vue
+++ b/src/views/errorPages/403.vue
@@ -43,9 +43,14 @@
 
 <style lang="scss" scoped>
 .wscn-http403-container {
-  transform: translate(-50%);
-  position: absolute;
-  left: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+a{
+  text-decoration: none;
 }
 .wscn-http403 {
   position: relative;
diff --git a/src/views/errorPages/404.vue b/src/views/errorPages/404.vue
index c4630bb..315e830 100644
--- a/src/views/errorPages/404.vue
+++ b/src/views/errorPages/404.vue
@@ -11,7 +11,7 @@
          </div>
          <div class="bullshit">
            <div class="bullshit__oops">页面不存在！</div>
-           <div class="bullshit__headline">{{ message }}</div>
+           <div class="bullshit__headline">您没有操作角色...</div>
            <div class="bullshit__info">请检查URL地址是否正确, 或点击回到首页。</div>
            <router-link to="/" class="bullshit__return-home">回到首页</router-link>
          </div>
@@ -25,9 +25,14 @@
 </script>
 <style lang="scss" scoped>
 .wscn-http404-container{
-  transform: translate(-50%);
-  position: absolute;
-  left: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+a{
+  text-decoration: none;
 }
 .wscn-http404 {
   position: relative;