diff --git a/server/resource/autocode_template/server/api.go.tpl b/server/resource/autocode_template/server/api.go.tpl
index 61cd2fa0d..dd41bf577 100644
--- a/server/resource/autocode_template/server/api.go.tpl
+++ b/server/resource/autocode_template/server/api.go.tpl
@@ -13,8 +13,7 @@ import (
     {{- end }}
 )
 
-type {{.StructName}}Api struct {
-}
+type {{.StructName}}Api struct {}
 
 var {{.Abbreviation}}Service = service.ServiceGroupApp.{{.PackageT}}ServiceGroup.{{.StructName}}Service
 
diff --git a/server/resource/autocode_template/server/model.go.tpl b/server/resource/autocode_template/server/model.go.tpl
index 06e46d95b..07ca69725 100644
--- a/server/resource/autocode_template/server/model.go.tpl
+++ b/server/resource/autocode_template/server/model.go.tpl
@@ -2,46 +2,55 @@
 package {{.Package}}
 
 import (
-	{{ if .GvaModel }}"github.com/flipped-aurora/gin-vue-admin/server/global"{{ end }}
-	{{ if or .HasTimer }}"time"{{ end }}
-	{{ if .NeedJSON }}"gorm.io/datatypes"{{ end }}
+	{{- if .GvaModel }}
+	"github.com/flipped-aurora/gin-vue-admin/server/global"
+	{{- end }}
+	{{- if or .HasTimer }}
+	"time"
+	{{- end }}
+	{{- if .NeedJSON }}
+	"gorm.io/datatypes"
+	{{- end }}
 )
 
 // {{.Description}} 结构体  {{.StructName}}
 type {{.StructName}} struct {
-{{ if .GvaModel }} global.GVA_MODEL {{ end }}
-      {{- range .Fields}}
-            {{- if eq .FieldType "enum" }}
-      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};type:enum({{.DataTypeLong}});comment:{{.Comment}};" {{- if .Require }} binding:"required"{{- end -}}`
-            {{- else if eq .FieldType "picture" }}
-      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
-            {{- else if eq .FieldType "video" }}
-      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
-             {{- else if eq .FieldType "file" }}
-      {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
-            {{- else if eq .FieldType "pictures" }}
-      {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
-            {{- else if eq .FieldType "richtext" }}
-      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}}`
-            {{- else if eq .FieldType "json" }}
-      {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"object"`
-            {{- else if eq .FieldType "array" }}
-      {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
-            {{- else if ne .FieldType "string" }}
-      {{.FieldName}}  *{{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
-            {{- else }}
-      {{.FieldName}}  {{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
-            {{- end }}  {{ if .FieldDesc }}//{{.FieldDesc}} {{ end }} {{- end }}
-      {{- if .AutoCreateResource }}
-      CreatedBy  uint   `gorm:"column:created_by;comment:创建者"`
-      UpdatedBy  uint   `gorm:"column:updated_by;comment:更新者"`
-      DeletedBy  uint   `gorm:"column:deleted_by;comment:删除者"`
-      {{- end}}
+{{- if .GvaModel }}
+    global.GVA_MODEL
+{{- end }}
+{{- range .Fields}}
+    {{- if eq .FieldType "enum" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};type:enum({{.DataTypeLong}});comment:{{.Comment}};" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- else if eq .FieldType "picture" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- else if eq .FieldType "video" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- else if eq .FieldType "file" }}
+    {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
+    {{- else if eq .FieldType "pictures" }}
+    {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
+    {{- else if eq .FieldType "richtext" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- else if eq .FieldType "json" }}
+    {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"object"`
+    {{- else if eq .FieldType "array" }}
+    {{.FieldName}}  datatypes.JSON `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}type:text;" {{- if .Require }} binding:"required"{{- end -}} swaggertype:"array,object"`
+    {{- else if ne .FieldType "string" }}
+    {{.FieldName}}  *{{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- else }}
+    {{.FieldName}}  {{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" gorm:"{{- if ne .FieldIndexType "" -}}{{ .FieldIndexType }};{{- end -}}{{- if .PrimaryKey -}}primarykey;{{- end -}}{{- if .DefaultValue -}}default:{{ .DefaultValue }};{{- end -}}column:{{.ColumnName}};comment:{{.Comment}};{{- if .DataTypeLong -}}size:{{.DataTypeLong}};{{- end -}}" {{- if .Require }} binding:"required"{{- end -}}`
+    {{- end }}  {{ if .FieldDesc }}//{{.FieldDesc}} {{ end }}
+{{- end }}
+    {{- if .AutoCreateResource }}
+    CreatedBy  uint   `gorm:"column:created_by;comment:创建者"`
+    UpdatedBy  uint   `gorm:"column:updated_by;comment:更新者"`
+    DeletedBy  uint   `gorm:"column:deleted_by;comment:删除者"`
+    {{- end }}
 }
 
 {{ if .TableName }}
 // TableName {{.Description}} {{.StructName}}自定义表名 {{.TableName}}
 func ({{.StructName}}) TableName() string {
-  return "{{.TableName}}"
+    return "{{.TableName}}"
 }
 {{ end }}
diff --git a/server/resource/autocode_template/server/request.go.tpl b/server/resource/autocode_template/server/request.go.tpl
index 461832bea..db43825ee 100644
--- a/server/resource/autocode_template/server/request.go.tpl
+++ b/server/resource/autocode_template/server/request.go.tpl
@@ -6,32 +6,32 @@ import (
 )
 
 type {{.StructName}}Search struct{
-    {{ if .GvaModel }}
-        StartCreatedAt *time.Time `json:"startCreatedAt" form:"startCreatedAt"`
-        EndCreatedAt   *time.Time `json:"endCreatedAt" form:"endCreatedAt"`
-    {{ end }}
-    {{- range .Fields}}
-        {{- if ne .FieldSearchType ""}}
-            {{- if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
-                Start{{.FieldName}}  *{{.FieldType}}  `json:"start{{.FieldName}}" form:"start{{.FieldName}}"`
-                End{{.FieldName}}  *{{.FieldType}}  `json:"end{{.FieldName}}" form:"end{{.FieldName}}"`
-             {{- else }}
-                {{- if eq .FieldType "enum" }}
-                      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}"`
-                            {{- else if eq .FieldType "picture" }}
-                      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
-                            {{- else if eq .FieldType "video" }}
-                      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
-                            {{- else if eq .FieldType "richtext" }}
-                      {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
-                            {{- else if ne .FieldType "string" }}
-                      {{.FieldName}}  *{{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
-                            {{- else }}
-                      {{.FieldName}}  {{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
-                            {{- end }}
+{{- if .GvaModel }}
+    StartCreatedAt *time.Time `json:"startCreatedAt" form:"startCreatedAt"`
+    EndCreatedAt   *time.Time `json:"endCreatedAt" form:"endCreatedAt"`
+{{- end }}
+{{- range .Fields}}
+    {{- if ne .FieldSearchType ""}}
+        {{- if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
+    Start{{.FieldName}}  *{{.FieldType}}  `json:"start{{.FieldName}}" form:"start{{.FieldName}}"`
+    End{{.FieldName}}  *{{.FieldType}}  `json:"end{{.FieldName}}" form:"end{{.FieldName}}"`
+        {{- else }}
+            {{- if eq .FieldType "enum" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}"`
+            {{- else if eq .FieldType "picture" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
+            {{- else if eq .FieldType "video" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
+            {{- else if eq .FieldType "richtext" }}
+    {{.FieldName}}  string `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
+            {{- else if ne .FieldType "string" }}
+    {{.FieldName}}  *{{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
+            {{- else }}
+    {{.FieldName}}  {{.FieldType}} `json:"{{.FieldJson}}" form:"{{.FieldJson}}" `
             {{- end }}
-        {{- end}}
-       {{- end }}
+        {{- end }}
+    {{- end}}
+{{- end }}
     request.PageInfo
     {{- if .NeedSort}}
     Sort  string `json:"sort" form:"sort"`
diff --git a/server/resource/autocode_template/server/router.go.tpl b/server/resource/autocode_template/server/router.go.tpl
index b2b7325a3..18b03f391 100644
--- a/server/resource/autocode_template/server/router.go.tpl
+++ b/server/resource/autocode_template/server/router.go.tpl
@@ -6,8 +6,7 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-type {{.StructName}}Router struct {
-}
+type {{.StructName}}Router struct {}
 
 // Init{{.StructName}}Router 初始化 {{.Description}} 路由信息
 func (s *{{.StructName}}Router) Init{{.StructName}}Router(Router *gin.RouterGroup,PublicRouter *gin.RouterGroup) {
diff --git a/server/resource/autocode_template/server/service.go.tpl b/server/resource/autocode_template/server/service.go.tpl
index 634af7ed2..625f9756e 100644
--- a/server/resource/autocode_template/server/service.go.tpl
+++ b/server/resource/autocode_template/server/service.go.tpl
@@ -9,8 +9,7 @@ import (
     {{- end}}
 )
 
-type {{.StructName}}Service struct {
-}
+type {{.StructName}}Service struct {}
 
 {{- $db := "" }}
 {{- if eq .BusinessDB "" }}
diff --git a/web/src/config.json b/web/src/config.json
index 08d2aebee..a7ce25820 100644
--- a/web/src/config.json
+++ b/web/src/config.json
@@ -2,7 +2,7 @@
   "grey":false,
   "primaryColor":"#3b82f6",
   "showTabs":true,
-  "darkMode":"auto",
+  "darkMode":"dark",
   "layout_side_width":200,
   "layout_side_collapsed_width":60,
   "layout_side_item_height":44,
diff --git a/web/src/pinia/modules/router.js b/web/src/pinia/modules/router.js
index 36b9ec009..f7cd40024 100644
--- a/web/src/pinia/modules/router.js
+++ b/web/src/pinia/modules/router.js
@@ -2,7 +2,7 @@ import { asyncRouterHandle } from '@/utils/asyncRouter'
 import { emitter } from '@/utils/bus.js'
 import { asyncMenu } from '@/api/menu'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref,watchEffect,onMounted } from 'vue'
 
 const notLayoutRouterArr = []
 const keepAliveRoutersArr = []
@@ -56,6 +56,46 @@ export const useRouterStore = defineStore('router', () => {
   emitter.on('setKeepAlive', setKeepAliveRouters)
 
   const asyncRouters = ref([])
+
+  const topMenu = ref([])
+
+  const leftMenu = ref([])
+
+  const menuMap = {}
+
+  const topActive = ref("")
+
+
+
+
+
+  const setLeftMenu = (name) => {
+    sessionStorage.setItem('topActive', name)
+    topActive.value = name
+    if(menuMap[name]?.children){
+      leftMenu.value = menuMap[name].children
+    }
+    return menuMap[name]?.children
+  }
+
+  watchEffect(()=>{
+    let topActive = sessionStorage.getItem("topActive")
+    let firstHasChildren = ''
+    asyncRouters.value[0]?.children.forEach((item) => {
+      if (item.hidden) return;
+      menuMap[item.name] = item;
+      if (!firstHasChildren && item.children && item.children.length > 0) {
+        firstHasChildren = item.name
+      }
+      topMenu.value.push({...item, children: []})
+    });
+
+    if(!menuMap[topActive]?.children && firstHasChildren){
+        topActive = firstHasChildren
+    }
+    setLeftMenu(topActive)
+  })
+
   const routeMap = ({})
   // 从后台获取动态路由
   const SetAsyncRouter = async() => {
@@ -93,6 +133,10 @@ export const useRouterStore = defineStore('router', () => {
   }
 
   return {
+    topActive,
+    setLeftMenu,
+    topMenu,
+    leftMenu,
     asyncRouters,
     keepAliveRouters,
     asyncRouterFlag,
diff --git a/web/src/style/element_visiable.scss b/web/src/style/element_visiable.scss
index fb7b25d75..8e7bd37a4 100644
--- a/web/src/style/element_visiable.scss
+++ b/web/src/style/element_visiable.scss
@@ -93,14 +93,22 @@
         @apply my-1;
     }
 }
-.el-menu-item{
-    border-radius: 2px;
-    &.is-active{
-        background-color: var(--el-color-primary) !important;
-        color: #fff !important;
+.el-menu--vertical{
+    .el-menu-item{
+        border-radius: 2px;
+        &.is-active{
+            background-color: var(--el-color-primary) !important;
+            color: #fff !important;
+        }
     }
 }
 
+
+.el-sub-menu.el-sub-menu__hide-arrow{
+    height: 44px;
+}
+
+
 .el-tabs__header{
     margin: 0 0 1px !important;
 }
diff --git a/web/src/view/layout/aside/combinationMode.vue b/web/src/view/layout/aside/combinationMode.vue
new file mode 100644
index 000000000..2f46d4ba2
--- /dev/null
+++ b/web/src/view/layout/aside/combinationMode.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="h-full">
+    <div v-if="mode==='head'" class="bg-white text-slate-700 dark:text-slate-300 mx-2 dark:bg-slate-900 flex items-center w-full overflow-auto">
+      <el-menu
+        :default-active="routerStore.topActive"
+        mode="horizontal"
+        class="border-r-0 border-b-0 w-[calc(100%-100px)] flex gap-1 items-center box-border h-[calc(100%-1px)]"
+        unique-opened
+        @select="(index, _, ele)=>selectMenuItem(index, _, ele,true)"
+      >
+        <template v-for="item in routerStore.topMenu">
+          <aside-component
+            v-if="!item.hidden"
+            :key="item.name"
+            :router-info="item"
+            mode="horizontal"
+          />
+        </template>
+      </el-menu>
+    </div>
+    <div
+      v-if="mode==='normal'"
+      class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
+      :class="isCollapse ? '' : '  px-2'"
+      :style="{
+        width: layoutSideWidth + 'px',
+      }"
+    >
+      <el-menu
+        :collapse="isCollapse"
+        :collapse-transition="false"
+        :default-active="active"
+        class="border-r-0 w-full"
+        unique-opened
+        @select="(index, _, ele)=>selectMenuItem(index, _, ele,false)"
+      >
+        <template v-for="item in routerStore.leftMenu">
+          <aside-component
+            v-if="!item.hidden"
+            :key="item.name"
+            :router-info="item"
+          />
+        </template>
+      </el-menu>
+      <div
+        class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
+        :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
+        @click="toggleCollapse"
+      >
+        <el-icon v-if="!isCollapse">
+          <DArrowLeft />
+        </el-icon>
+        <el-icon v-else>
+          <DArrowRight />
+        </el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import AsideComponent from "@/view/layout/aside/asideComponent/index.vue";
+import { ref, provide, watchEffect, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useRouterStore } from "@/pinia/modules/router";
+import { useAppStore } from "@/pinia";
+import { storeToRefs } from "pinia";
+const appStore = useAppStore();
+const { device, config } = storeToRefs(appStore);
+
+defineOptions({
+  name: "GvaAside",
+});
+
+defineProps({
+  mode:{
+    type: String,
+    default: "normal",
+  },
+})
+
+const route = useRoute();
+const router = useRouter();
+const routerStore = useRouterStore();
+const isCollapse = ref(false);
+const active = ref("");
+const topActive = ref("");
+const layoutSideWidth = computed(() => {
+  if (!isCollapse.value) {
+    return config.value.layout_side_width;
+  } else {
+    return config.value.layout_side_collapsed_width;
+  }
+});
+
+watchEffect(() => {
+  active.value = route.meta.activeName || route.name;
+});
+
+watchEffect(() => {
+  if (device.value === "mobile") {
+    isCollapse.value = true;
+  } else {
+    isCollapse.value = false;
+  }
+});
+
+provide("isCollapse", isCollapse);
+
+const selectMenuItem = (index, _, ele,top) => {
+  const query = {};
+  const params = {};
+  routerStore.routeMap[index]?.parameters &&
+  routerStore.routeMap[index]?.parameters.forEach((item) => {
+    if (item.type === "query") {
+      query[item.key] = item.value;
+    } else {
+      params[item.key] = item.value;
+    }
+  });
+  if (index === route.name) return;
+  if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
+    window.open(index);
+  } else {
+    if(!top){
+      router.push({ name: index, query, params });
+      return
+    }
+    if (!routerStore.setLeftMenu(index)){
+      router.push({ name: index, query, params });
+    }
+  }
+};
+
+const toggleCollapse = () => {
+  isCollapse.value = !isCollapse.value;
+};
+</script>
diff --git a/web/src/view/layout/aside/index.vue b/web/src/view/layout/aside/index.vue
index 79666ff18..637208a41 100644
--- a/web/src/view/layout/aside/index.vue
+++ b/web/src/view/layout/aside/index.vue
@@ -1,13 +1,23 @@
 <template>
   <div>
-    <normal-mode v-if="config.side_mode != 'head' || (device === 'mobile'&& config.side_mode == 'head' )" />
-    <head-mode v-if="config.side_mode === 'head' && device !== 'mobile'" />
+    <normal-mode v-if="config.side_mode === 'normal' || (device === 'mobile' && config.side_mode == 'head' ) || (device === 'mobile' && config.side_mode == 'combination' )" />
+    <head-mode v-if="config.side_mode === 'head' && device !== 'mobile'"/>
+    <combination-mode v-if="config.side_mode === 'combination' && device !== 'mobile'" :mode="mode"/>
   </div>
 </template>
 
 <script setup>
 import NormalMode from "./normalMode.vue"
 import HeadMode from "./headMode.vue"
+import CombinationMode from "./combinationMode.vue"
+
+defineProps({
+  mode:{
+    type: String,
+    default: 'normal'
+  }
+})
+
 import { storeToRefs } from "pinia";
 import { useAppStore } from "@/pinia";
 const appStore = useAppStore();
diff --git a/web/src/view/layout/header/index.vue b/web/src/view/layout/header/index.vue
index fc796141b..c76509f9f 100644
--- a/web/src/view/layout/header/index.vue
+++ b/web/src/view/layout/header/index.vue
@@ -7,24 +7,23 @@
   <div class="flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300  dark:bg-slate-900 shadow dark:shadow-gray-700 flex items-center px-2">
     <div
       class="flex items-center cursor-pointer flex-1"
-      @click="router.push({ path: '/' })"
     >
-      <img
-        alt
-        class="h-12 bg-white rounded-full"
-        :src="$GIN_VUE_ADMIN.appLogo"
-      >
-      <div
-        v-if="!isMobile"
-        class="inline-flex font-bold text-2xl ml-2"
-        :class="config.side_mode === 'head'&&'min-w-fit'"
-      >
-        {{ $GIN_VUE_ADMIN.appName }}
+      <div class="flex items-center cursor-pointer" @click="router.push({ path: '/' })">
+        <img
+          alt
+          class="h-12 bg-white rounded-full"
+          :src="$GIN_VUE_ADMIN.appLogo"
+        >
+        <div
+          v-if="!isMobile"
+          class="inline-flex font-bold text-2xl ml-2"
+          :class="(config.side_mode === 'head' || config.side_mode === 'combination') &&'min-w-fit'"
+        >
+          {{ $GIN_VUE_ADMIN.appName }}
+        </div>
       </div>
 
-      <gva-aside v-if="config.side_mode === 'head' && !isMobile" class="flex-1"/>
-
-      <el-breadcrumb v-show="!isMobile" v-else class="ml-4">
+      <el-breadcrumb v-show="!isMobile" v-if="config.side_mode !== 'head'&& config.side_mode !== 'combination'" class="ml-4">
         <el-breadcrumb-item
           v-for="item in matched.slice(1, matched.length)"
           :key="item.path"
@@ -34,6 +33,8 @@
           }}
         </el-breadcrumb-item>
       </el-breadcrumb>
+      <gva-aside v-if="config.side_mode === 'head' && !isMobile" class="flex-1" />
+      <gva-aside v-if="config.side_mode === 'combination' && !isMobile" mode="head" class="flex-1" />
     </div>
 
     <div class="ml-2 flex items-center">
@@ -102,7 +103,7 @@ import { useUserStore } from "@/pinia/modules/user";
 import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from "@/pinia"
 import { storeToRefs } from "pinia"
-import { computed, ref } from 'vue'
+import { computed, } from 'vue'
 import { setUserAuthority } from '@/api/user'
 import { fmtTitle } from "@/utils/fmtRouterTitle";
 import gvaAside from "@/view/layout/aside/index.vue"
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index 4d3dd4cec..c1758bcda 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -12,7 +12,8 @@
     />
     <gva-header />
     <div class="flex flex-row w-full gva-container pt-16">
-      <gva-aside v-if="config.side_mode != 'head' || (device === 'mobile'&& config.side_mode == 'head' )" />
+      <gva-aside v-if="config.side_mode === 'normal' || (device === 'mobile' && config.side_mode == 'head' ) || (device === 'mobile' && config.side_mode == 'combination' )" />
+      <gva-aside v-if="config.side_mode === 'combination' && device !== 'mobile'" mode="normal"/>
       <div class="flex-1 p-2 w-0 h-full">
         <gva-tabs v-if="config.showTabs" />
         <div
diff --git a/web/src/view/layout/setting/index.vue b/web/src/view/layout/setting/index.vue
index dbc0d08e6..8ab84c116 100644
--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
@@ -162,6 +162,10 @@ const sideModes = [
   {
     label : "顶部菜单栏模式",
     value: "head"
+  },
+  {
+    label : "组合模式",
+    value: "combination"
   }
 ];