diff --git a/www/src/App.vue b/www/src/App.vue
index 95c7c28..d27dead 100644
--- a/www/src/App.vue
+++ b/www/src/App.vue
@@ -19,25 +19,4 @@ html, body {
   height: 100%
 }
 
-.el-header, .el-footer {
-  background-color: #B3C0D1;
-  color: #333;
-  text-align: center;
-  line-height: 60px;
-}
-
-.el-aside {
-  background-color: #073d7a;
-  color: rgb(250, 245, 245);
-  /* padding-left:10px; */
-  /* text-align: center;
-  line-height: 200px; */
-}
-
-.el-main {
-  color: #333;
-  text-align: center;
-  /* line-height: 160px; */
-  padding: 0;
-}
 </style>
diff --git a/www/src/components/HeaderContent.vue b/www/src/components/HeaderContent.vue
index be2ebd9..0cf2ebf 100644
--- a/www/src/components/HeaderContent.vue
+++ b/www/src/components/HeaderContent.vue
@@ -1,17 +1,26 @@
 <template>
-  <el-row justify="end">
-    <el-col :span="4">
-      <div style="padding-top: 10px;">
-        <el-dropdown trigger="click" @command="handleCommand">
-          <el-avatar shape="circle" :size="50">{{ userName }}</el-avatar>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item>个人中心</el-dropdown-item>
-              <el-dropdown-item command="logout">退出</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
+  <el-row justify="space-between" align="middle">
+    <el-col :span="1">
+      <el-button text style="padding: 0" @click="handleCollapse">
+        <el-icon v-if="collapseStore.collapse" :size="30">
+          <Expand/>
+        </el-icon>
+        <el-icon v-else :size="30">
+          <Fold/>
+        </el-icon>
+      </el-button>
+
+    </el-col>
+    <el-col :span="2" style="text-align: right">
+      <el-dropdown @command="handleCommand">
+        <el-avatar shape="square" :size="50">{{ userName }}</el-avatar>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>个人中心</el-dropdown-item>
+            <el-dropdown-item command="logout">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </el-col>
   </el-row>
 </template>
@@ -21,11 +30,19 @@
   import {useRouter} from 'vue-router'
   import {useStore} from '@/stores'
   import {computed} from 'vue'
+  import {Expand, Fold} from '@element-plus/icons-vue'
+  import {useCollapseStore} from '@/stores/collapse.js'
 
+  const collapseStore = useCollapseStore()
   const store = useStore()
   const userName = computed(() => store.name)
   const router = useRouter()
 
+  function handleCollapse() {
+    console.log(collapseStore.collapse)
+    collapseStore.collapse = !collapseStore.collapse
+  }
+
   function handleCommand(command) {
     if (command === 'logout') {
       logOut()
diff --git a/www/src/components/MenuList.vue b/www/src/components/MenuList.vue
index 1da1221..c0353e9 100644
--- a/www/src/components/MenuList.vue
+++ b/www/src/components/MenuList.vue
@@ -1,10 +1,16 @@
 <template>
   <el-menu
       class="el-menu-vertical-demo"
+      style="--el-menu-bg-color: #1c1919;--el-menu-text-color: #ffffff;--el-menu-active-color: #3885d4;--el-menu-hover-bg-color:#3885d4 "
       router
+      :collapse="collapseStore.collapse"
       unique-opened
       @open="handleOpen"
       @close="handleClose">
+    <div style="height: 50px;background-color: #1c1919;">
+      <!--      菜单折叠只显示图标-->
+      <div class="header-font" v-if="!collapseStore.collapse">FastAdmin管理平台</div>
+    </div>
     <el-menu-item index="/dashboard">首页</el-menu-item>
     <template v-for="item in menuList" :key="item.name">
       <!-- 有子菜单时处理逻辑 -->
@@ -38,8 +44,10 @@
 
 <script setup>
   import {useStore} from '@/stores'
-  import {computed} from 'vue'
+  import {computed, ref} from 'vue'
+  import {useCollapseStore} from '@/stores/collapse.js'
 
+  const collapseStore = useCollapseStore()
   const userStore = useStore()
 
   const menuList = computed(() => {
@@ -57,8 +65,22 @@
 </script>
 
 <style>
+.header-font {
+  font-size: large;
+  background-color: #1c1919;
+  color: #ffffff;
+  text-align: center;
+  padding: 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.el-menu-vertical-demo {
+  min-height: 100%;
+}
+
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  min-height: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/www/src/stores/collapse.js b/www/src/stores/collapse.js
new file mode 100644
index 0000000..ba61809
--- /dev/null
+++ b/www/src/stores/collapse.js
@@ -0,0 +1,7 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+export const useCollapseStore = defineStore('collapse', () => {
+  const collapse = ref(false)
+  return {collapse}
+})
\ No newline at end of file
diff --git a/www/src/views/Layout.vue b/www/src/views/Layout.vue
index 51f8069..0e3250a 100644
--- a/www/src/views/Layout.vue
+++ b/www/src/views/Layout.vue
@@ -1,25 +1,26 @@
 <template>
   <div style="height: 100%">
     <el-container style="height: 100%">
-      <el-header>
-        <header-content></header-content>
-      </el-header>
+      <el-aside class="aside-menu" width="auto">
+        <menu-list></menu-list>
+      </el-aside>
       <el-container style="height: 100%">
-        <el-aside width="200px">
-          <menu-list></menu-list>
-        </el-aside>
-        <el-main style="padding: 0px">
-          <el-tabs style="border-bottom: 0" v-model="currentTab" type="border-card" closable @tab-click="tabClick" @tab-remove="tabRemove">
+        <el-header style="--el-header-padding: 0 10px" height="50px">
+          <header-content></header-content>
+        </el-header>
+        <el-main style="padding: 0">
+          <el-tabs style="border-bottom: 0" v-model="currentTab" type="border-card" closable @tab-click="tabClick"
+                   @tab-remove="tabRemove">
             <el-tab-pane v-for="tab in allTabs" :key="tab.name" :label="tab.name" :name="tab.name">
             </el-tab-pane>
           </el-tabs>
 
-          <div class="main_style">
-             <router-view v-slot="{Component}">
-            <keep-alive :include="cacheTabs">
-              <component :is="Component"/>
-            </keep-alive>
-          </router-view>
+          <div style="padding: 10px 20px">
+            <router-view v-slot="{Component}">
+              <keep-alive :include="cacheTabs">
+                <component :is="Component"/>
+              </keep-alive>
+            </router-view>
           </div>
           <!--详见：https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition-->
 
@@ -46,11 +47,8 @@
 </script>
 
 <style>
-.main_style {
-  margin-top: 10px;
-  margin-left: 5px;
-}
-.el-tabs--border-card>.el-tabs__content {
+
+.el-tabs--border-card > .el-tabs__content {
   padding: 0;
 }
 </style>
diff --git a/www/src/views/system/menus/MenuForm.vue b/www/src/views/system/menus/MenuForm.vue
index c92ba4b..7d087c2 100644
--- a/www/src/views/system/menus/MenuForm.vue
+++ b/www/src/views/system/menus/MenuForm.vue
@@ -31,6 +31,7 @@
         </el-button>
       </template>
     </el-input>
+    <el-alert v-if="selectData.type ==='page'" title="为了防止侧边栏折叠显示效果，一级菜单需要添加图标！" type="warning"/>
   </el-form-item>
   <el-form-item label="排序" prop="sort">
     <el-input-number v-model="selectData.sort" :step="0.1"/>
@@ -67,7 +68,7 @@
   import useMenu from '@/composables/useMenu'
   import AutoDict from '@/components/AutoDict'
 
-  const props = defineProps(['form', ])
+  const props = defineProps(['form',])
   const emit = defineEmits(['update:form'])
   const {form} = toRefs(props)
   const dialogVisible = ref(false)
@@ -107,7 +108,7 @@
     Traffic: ['Location', 'LocationInformation', 'DeleteLocation', 'Coordinate', 'Bicycle', 'OfficeBuilding', 'School',
       'Guide', 'AddLocation', 'MapLocation', 'Place', 'LocationFilled', 'Van']
   }
-  
+
 
 </script>