From 74ee36fc8c6f74b7a0d7a11f1ebc3e311a443d9f Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 14:56:27 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=88=9B=E5=BB=BAMenu.vue=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E9=80=9A=E8=BF=87Element-plus=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E8=8F=9C=E5=8D=95=E6=A1=86=E6=9E=B6=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=88=A0=E5=B1=9E=E6=80=A7=20=E5=B1=80=E9=83=A8=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E8=8F=9C=E5=8D=95=E6=A0=8F=E4=B8=AD=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84=E5=9B=BE=E6=A0=87=20=E5=B0=86Menu.v?=
 =?UTF-8?q?ue=E5=BC=95=E5=85=A5=E5=88=B0Index.vue=E4=B8=AD=20=E6=94=BE?=
 =?UTF-8?q?=E5=9C=A8=E4=BE=A7=E8=BE=B9=E6=A0=8Faside=E4=B8=AD=20=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=E6=8E=89=E4=BE=A7=E8=BE=B9=E6=A0=8Faside=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E7=94=A8=E8=83=8C=E6=99=AF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 order-system/src/layout/Index.vue | 14 +++---
 order-system/src/layout/Menu.vue  | 73 +++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 order-system/src/layout/Menu.vue

diff --git a/order-system/src/layout/Index.vue b/order-system/src/layout/Index.vue
index d33eee5..72c6b15 100644
--- a/order-system/src/layout/Index.vue
+++ b/order-system/src/layout/Index.vue
@@ -1,7 +1,10 @@
 <!-- 在layout文件夹下导入首页框架 -->
 <template>
   <el-container class="layout">
-    <el-aside width="200px" class="aside">Aside</el-aside>
+    <!-- 在aside侧边栏中使用菜单 -->
+    <el-aside width="200px" class="aside">
+      <Menu></Menu>
+    </el-aside>
     <el-container>
       <el-header class="header">Header</el-header>
       <el-main class="main">Main</el-main>
@@ -10,7 +13,8 @@
 </template>
 
 <script setup lang="ts">
-
+  // 引入菜单
+  import Menu from './Menu.vue'
 </script>
 
 <style scoped lang="scss">
@@ -19,9 +23,9 @@
 
   }
 
-  .aside {
-    background-color: blueviolet;
-  }
+  // .aside {
+  //   background-color: blueviolet;
+  // }
 
   .header {
     background-color: chocolate;
diff --git a/order-system/src/layout/Menu.vue b/order-system/src/layout/Menu.vue
new file mode 100644
index 0000000..e3beaa3
--- /dev/null
+++ b/order-system/src/layout/Menu.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-menu
+    default-active="2"
+    class="el-menu-vertical-demo"
+
+  >
+  <!-- 注释掉暂时不需要的多余属性 -->
+    <!-- <el-sub-menu index="1">
+      <template #title>
+        <el-icon><location /></el-icon>
+        <span>Navigator One</span>
+      </template>
+      <el-menu-item-group>
+        <template #title><span>Group One</span></template>
+        <el-menu-item index="1-1">item one</el-menu-item>
+        <el-menu-item index="1-2">item two</el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="Group Two">
+        <el-menu-item index="1-3">item three</el-menu-item>
+      </el-menu-item-group>
+      <el-sub-menu index="1-4">
+        <template #title><span>item four</span></template>
+        <el-menu-item index="1-4-1">item one</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="2">
+      <el-icon><icon-menu /></el-icon>
+      <template #title>Navigator Two</template>
+    </el-menu-item>
+    <el-menu-item index="3" disabled>
+      <el-icon><document /></el-icon>
+      <template #title>Navigator Three</template>
+    </el-menu-item> -->
+
+    <!-- 添加菜单栏选项 -->
+    <el-menu-item index="1">
+      <el-icon><Menu /></el-icon>
+      <template #title>用户管理</template>
+    </el-menu-item>
+    <el-menu-item index="2">
+      <el-icon><Menu /></el-icon>
+      <template #title>菜品分类</template>
+    </el-menu-item>
+    <el-menu-item index="3">
+      <el-icon><Memo /></el-icon>
+      <template #title>菜品管理</template>
+    </el-menu-item>
+    <el-menu-item index="4">
+      <el-icon><Monitor /></el-icon>
+      <template #title>订单管理</template>
+    </el-menu-item>
+    <el-menu-item index="5">
+      <el-icon><Calendar /></el-icon>
+      <template #title>广告管理</template>
+    </el-menu-item>
+    <el-menu-item index="6">
+      <el-icon><Edit /></el-icon>
+      <template #title>评论管理</template>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+  // 引入菜单图标
+  // import { Menu } from '@element-plus/icons-vue' 
+
+  // 局部引入菜单栏中所有选项的图标
+  import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
-- 
2.34.1


From 07d3330a4f5397800f2d5d6098d390f3548dc47b Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 15:20:21 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=B8=BAMenu.vue=E4=B8=AD=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F=E9=80=89=E9=A1=B9=E6=B7=BB=E5=8A=A0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20=E5=A2=9E=E5=8A=A0=E9=80=89=E9=A1=B9=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=82=AC=E5=81=9C=E6=A0=B7=E5=BC=8F=E5=92=8C=E8=A2=AB?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在Index.vue中修改aside背景色和宽度
适应Menu菜单
---
 order-system/src/layout/Index.vue |  8 ++++----
 order-system/src/layout/Menu.vue  | 34 +++++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/order-system/src/layout/Index.vue b/order-system/src/layout/Index.vue
index 72c6b15..bbd3dd6 100644
--- a/order-system/src/layout/Index.vue
+++ b/order-system/src/layout/Index.vue
@@ -2,7 +2,7 @@
 <template>
   <el-container class="layout">
     <!-- 在aside侧边栏中使用菜单 -->
-    <el-aside width="200px" class="aside">
+    <el-aside width="auto" class="aside">
       <Menu></Menu>
     </el-aside>
     <el-container>
@@ -23,9 +23,9 @@
 
   }
 
-  // .aside {
-  //   background-color: blueviolet;
-  // }
+  .aside {
+    background-color: #00c6bf;
+  }
 
   .header {
     background-color: chocolate;
diff --git a/order-system/src/layout/Menu.vue b/order-system/src/layout/Menu.vue
index e3beaa3..5756a91 100644
--- a/order-system/src/layout/Menu.vue
+++ b/order-system/src/layout/Menu.vue
@@ -1,9 +1,5 @@
 <template>
-  <el-menu
-    default-active="2"
-    class="el-menu-vertical-demo"
-
-  >
+  <el-menu background-color="#00c6bf" default-active="1" class="el-menu-vertical-demo">
   <!-- 注释掉暂时不需要的多余属性 -->
     <!-- <el-sub-menu index="1">
       <template #title>
@@ -68,6 +64,32 @@
   import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 230px;
+    min-height: 400px;
+  }
+
+  .el-menu {
+    border-right: none;
+  }
+
+  .el-menu .el-menu-item {
+    color: #f0f0f0;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .el-menu-item.is-active {
+    color: #ffffff !important;
+    background-color: #009e99 !important; 
+    font-size: 17px !important;
+  }
 
+  // 鼠标移动时菜单颜色
+  :deep(.el-menu-item:hover) {
+    color: #fff;
+    background-color: #007874 !important;
+    font-size: 17px !important;
+  }
 </style>
\ No newline at end of file
-- 
2.34.1