基础element-plus模板项目

src/components/LeftMenu.vue

@@ -5,37 +5,49 @@
       :default-openeds="['1']"
     >
       <el-menu-item index="0">
-        SIMPLE Element Plus
+        <span>Simple Element Plus</span>
+        <div v-if="collapseLeft">
+          SEP
+        </div>
       </el-menu-item>
       <el-sub-menu index="1">
         <template #title>
-          <el-icon><setting /></el-icon>系统管理
+          <el-icon><setting /></el-icon>
+          <span>系统管理</span>
         </template>
         <el-menu-item index="1-1">
-          <el-icon><user /></el-icon>用户管理
+          <el-icon><user /></el-icon>
+          <span>用户管理</span>
         </el-menu-item>
         <el-menu-item index="1-2">
-          <el-icon><Menu /></el-icon>角色管理
+          <el-icon><Menu /></el-icon>
+          <span>角色管理</span>
         </el-menu-item>
         <el-menu-item index="1-3">
-          <el-icon><lock /></el-icon>权限管理
+          <el-icon><lock /></el-icon>
+          <span>权限管理</span>
         </el-menu-item>
         <el-menu-item index="1-4">
-          <el-icon><Menu /></el-icon>菜单管理
+          <el-icon><Menu /></el-icon>
+          <span>菜单管理</span>
         </el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="2">
         <template #title>
-          <el-icon><WarningFilled /></el-icon>错误页面
+          <el-icon><WarningFilled /></el-icon>
+          <span>错误页面</span>
         </template>
         <el-menu-item index="1-1">
-          <el-icon><Warning /></el-icon>客户端错误
+          <el-icon><Warning /></el-icon>
+          <span>客户端错误</span>
         </el-menu-item>
         <el-menu-item index="1-2">
-          <el-icon><Warning /></el-icon>没有权限页面
+          <el-icon><Warning /></el-icon>
+          <span>没有权限页面</span>
         </el-menu-item>
         <el-menu-item index="1-3">
-          <el-icon><Warning /></el-icon>服务器错误
+          <el-icon><Warning /></el-icon>
+          <span>服务器错误</span>
         </el-menu-item>
       </el-sub-menu>
     </el-menu>

src/components/TopNav.vue

@@ -4,17 +4,23 @@
     :ellipsis="false"
   >
     <el-menu-item @click="updateCollapseLeft">
-      <el-icon v-if="!isCollapseLeft">
+      <template #title>
-        <Fold />
+        <el-icon v-if="!isCollapseLeft">
-      </el-icon>
+          <Fold />
-      <el-icon v-if="isCollapseLeft">
+        </el-icon>
-        <Expand />
+        <el-icon v-if="isCollapseLeft">
-      </el-icon>
+          <Expand />
+        </el-icon>
+        <span>&nbsp;</span>
+      </template>
     </el-menu-item>
     <div class="flex-grow" />
     <el-sub-menu index="1">
       <template #title>
-        语言
+        <el-icon v-if="isCollapseLeft">
+          <Expand />
+        </el-icon>
+        <span>语言</span>
       </template>
       <el-menu-item index="2-1">
         中文

src/views/HomeView.vue

@@ -9,7 +9,7 @@ const collapseLeft = ref(false)
 
 <template>
   <el-container class="index-container">
-    <el-aside>
+    <el-aside width="auto">
       <left-menu v-model:collapse-left="collapseLeft" />
     </el-aside>
     <el-container>