fix：完善相关页面

src/components/standardMenu/index.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="mj-standard-menu">
+        <el-menu 
+            :default-active="activeIndex" 
+            :active-text-color="mode === 'horizontal' ? '#409EFF' : undefined"
+            class="mj-menu" 
+            :mode="mode" 
+            :collapse="isCollapse"
+            @select="handleMenuSelect"
+            router
+        >
+            <template v-for="item in menuList" :key="item.path">
+                <el-sub-menu v-if="item.children && item.children.length > 0">
+                    <template #title>
+                        <el-icon>
+                            <location />
+                        </el-icon>
+                        <span>{{ item.meta.title }}</span>
+                    </template>
+                    <el-menu-item :index="`${item.path}/${row.path}`" v-for="(row,key) in item.children" :key="key">
+                        <el-icon>
+                            <location />
+                        </el-icon>
+                        <template #title>{{ row.meta.title }}</template>
+                    </el-menu-item>
+                </el-sub-menu>
+                <el-menu-item v-else :index="item.path">
+                    <el-icon>
+                        <location />
+                    </el-icon>
+                    <template #title>{{ item.meta.title }}</template>
+                </el-menu-item>
+            </template>
+        </el-menu>
+    </div>
+</template>
+<script setup lang="ts">
+import { Location } from '@element-plus/icons-vue'
+defineOptions({ name: "standardMenu" })
+
+const {mode="vertical",menuList,isCollapse,activeMenu} = defineProps<{
+    mode?: 'vertical' | 'horizontal'
+    menuList: any[]
+    isCollapse?:boolean
+    activeMenu?: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'menu-select', path: string): void
+}>()
+
+const activeIndex = computed(() => {
+    // 如果传入了 activeMenu，使用它；否则使用默认值
+    return activeMenu || '1-1'
+})
+
+// 处理菜单选中事件
+const handleMenuSelect = (index: string) => {
+    // 如果是水平模式（顶部菜单），触发选中事件
+    if (mode === 'horizontal') {
+        emit('menu-select', index)
+    }
+}
+</script>
+<style lang="scss" scoped>
+.mj-standard-menu {
+    height: 100%;
+    overflow: hidden;
+    
+    :deep(.el-menu) {
+        --el-menu-border-color: transparent;
+        border-right: none;
+        transition: width 0.3s;
+    }
+    
+    // 菜单项和子菜单标题的基础样式
+    :deep(.el-menu-item),
+    :deep(.el-sub-menu__title) {
+        transition: padding 0.3s;
+        overflow: hidden;
+        position: relative;
+        
+        // 文字容器样式 - 使用 flex 布局避免压缩
+        span {
+            display: inline-block;
+            white-space: nowrap;
+            width: auto;
+            max-width: 1000px; // 设置一个足够大的值
+            overflow: hidden;
+            transition: max-width 0.25s, opacity 0.25s, width 0.25s;
+            opacity: 1;
+            vertical-align: middle;
+        }
+    }
+    
+    // 收缩时隐藏文字 - 先隐藏文字，再改变宽度，避免压缩感
+    :deep(.el-menu--collapse) {
+        .el-menu-item span,
+        .el-sub-menu__title span {
+            max-width: 0;
+            width: 0;
+            opacity: 0;
+            transition: opacity 0.15s, max-width 0.2s 0.1s, width 0.2s 0.1s;
+            padding: 0;
+            margin: 0;
+        }
+    }
+    
+    // 展开时显示文字 - 先改变宽度，再显示文字，避免压缩感
+    :deep(.el-menu:not(.el-menu--collapse)) {
+        .el-menu-item span,
+        .el-sub-menu__title span {
+            max-width: 1000px;
+            width: auto;
+            opacity: 1;
+            transition: max-width 0.3s 0.15s, width 0.3s 0.15s, opacity 0.3s 0.2s;
+        }
+    }
+    
+    // 确保图标不受影响
+    :deep(.el-menu-item .el-icon),
+    :deep(.el-sub-menu__title .el-icon) {
+        flex-shrink: 0;
+        transition: none;
+    }
+}
+</style>