ACS

src/components/layout/SidebarMenuItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-sub-menu v-if="hasChildren" :index="menu.path">
+    <template #title>
+      <el-icon v-if="menu.icon || menu.meta?.icon">
+        <component :is="menu.icon || menu.meta?.icon" />
+      </el-icon>
+      <span>{{ menu.title || menu.meta?.title }}</span>
+    </template>
+    <sidebar-menu-item 
+      v-for="child in menu.children" 
+      :key="child.path" 
+      :menu="child" 
+    />
+  </el-sub-menu>
+  <el-menu-item v-else :index="menu.path">
+    <el-icon v-if="menu.icon || menu.meta?.icon">
+      <component :is="menu.icon || menu.meta?.icon" />
+    </el-icon>
+    <template #title>{{ menu.title || menu.meta?.title }}</template>
+  </el-menu-item>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
+
+// 接收菜单项属性
+const props = defineProps({
+  menu: {
+    type: Object,
+    required: true
+  }
+})
+
+// 判断是否有子菜单
+const hasChildren = computed(() => {
+  return props.menu.children && props.menu.children.length > 0
+})
+</script>
+
+<style scoped>
+.el-menu-item, :deep(.el-sub-menu__title) {
+  height: 50px;
+  line-height: 50px;
+  color: #333333;
+}
+
+:deep(.el-sub-menu .el-menu-item) {
+  height: 50px;
+  line-height: 50px;
+  padding-left: 55px !important;
+  background-color: #fafafa;
+}
+
+.el-icon {
+  margin-right: 10px;
+  width: 24px;
+  text-align: center;
+  color: #666666;
+}
+
+/* 激活菜单项特效 */
+.el-menu-item.is-active {
+  position: relative;
+  background-color: #e6f7ff !important; 
+  color: #1890ff !important;
+  font-weight: 600;
+}
+
+.el-menu-item.is-active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background-color: #1890ff;
+}
+
+:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+  color: #1890ff !important;
+  font-weight: 600;
+}
+
+.el-menu-item:hover, :deep(.el-sub-menu__title:hover) {
+  background-color: #f5f7fa !important;
+}
+
+/* 修复图标颜色 */
+.el-menu-item.is-active .el-icon, :deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
+  color: #1890ff !important;
+}
+
+/* 修复箭头颜色 */
+:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-sub-menu__icon-arrow) {
+  color: #1890ff !important;
+}
+
+/* 子菜单样式 */
+:deep(.el-menu--inline) {
+  background-color: #fafafa;
+}
+</style>