style:修改相关样式

src/components/stageBreadcrumbs/index.vue

@@ -35,6 +35,9 @@ const { title } = defineProps<{
             display: inline-block;
             width: 1px;
             height: 16px;
+            margin: 0 18px;
+            vertical-align: middle;
+            margin-bottom: 2px;
             background-color: #E2E8F0;
         }
     }

src/pages/Layout/index.vue

@@ -6,18 +6,31 @@
           <!-- 顶部company公司标记 -->
           <div class="mj-aside-company"></div>
           <div class="mj-aside-menu">
-            <div class="mj-aside-title" v-show="!isCollapse">{{ topTitle }}</div>
+            <div class="mj-aside-title" v-show="!isCollapse">
-            <mjMenus class="mj-aside_menu" :isCollapse="isCollapse" :menuList="sideMenuList" :active-menu="selectedActiveMenu"
+              {{ topTitle }}
-              @menu-select="handleSideMenuSelect" />
+            </div>
+            <mjMenus
+              class="mj-aside_menu"
+              :isCollapse="isCollapse"
+              :menuList="sideMenuList"
+              :active-menu="selectedActiveMenu"
+              @menu-select="handleSideMenuSelect"
+            />
           </div>
           <!-- 展开收缩左侧菜单按钮 -->
-          <div class="mj-collapse" @click="showCollapse"></div>
+          <div class="mj-collapse" @click="showCollapse">
+            <el-icon><component :is="isCollapse ? DArrowRight : DArrowLeft" /></el-icon>
+          </div>
         </div>
       </el-aside>
       <el-container>
         <el-header class="mj-header-content">
-          <mjMenus :menuList="topLevelMenuList" mode="horizontal" :active-menu="selectedTopMenu"
+          <mjMenus
-            @menu-select="handleTopMenuSelect" />
+            :menuList="topLevelMenuList"
+            mode="horizontal"
+            :active-menu="selectedTopMenu"
+            @menu-select="handleTopMenuSelect"
+          />
         </el-header>
         <el-main>
           <!-- <card-item :list="[1,2,3,4,5,6]"/> -->
@@ -28,13 +41,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import mjMenus from '@/components/standardMenu/index.vue';
+import mjMenus from "@/components/standardMenu/index.vue";
-import { useUserStore } from '@/store'
+import { useUserStore } from "@/store";
+import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
 defineOptions({
   name: "Layout",
 });
 
-const userStore = useUserStore()
+const userStore = useUserStore();
 
 // 响应式断点（小屏阈值，小于此值视为小屏）
 const BREAKPOINT = 1024;
@@ -66,89 +80,93 @@ const showCollapse = () => {
   }
 };
 
-
 // 返回菜单数据
 const menuList = computed(() => {
-  return userStore.routes || []
+  return userStore.routes || [];
 });
 
 // 获取一级菜单数据（不包含 children）
 const topLevelMenuList = computed(() => {
-  return menuList.value.map(item => {
+  return menuList.value.map((item) => {
-    const { children, ...rest } = item
+    const { children, ...rest } = item;
-    return rest
+    return rest;
-  })
+  });
-})
+});
 
 const topTitle = computed(() => {
-  return topLevelMenuList.value.find(path => path.path === selectedTopMenu.value)?.meta?.title || '-'
+  return (
-})
+    topLevelMenuList.value.find((path) => path.path === selectedTopMenu.value)
+      ?.meta?.title || "-"
+  );
+});
 
 // 当前选中的顶部菜单
-const selectedTopMenu = ref<string>('')
+const selectedTopMenu = ref<string>("");
-const selectedActiveMenu = ref<string>('');
+const selectedActiveMenu = ref<string>("");
 
 // 根据选中的顶部菜单，获取左侧菜单列表
 const sideMenuList = computed(() => {
   if (!selectedTopMenu.value) {
     // 默认选中第一个有 children 的菜单
-    const firstMenuWithChildren = menuList.value.find(item => item.children && item.children.length > 0)
+    const firstMenuWithChildren = menuList.value.find(
+      (item) => item.children && item.children.length > 0
+    );
     if (firstMenuWithChildren) {
-      return (firstMenuWithChildren.children || []).map(child=>{
+      return (firstMenuWithChildren.children || []).map((child) => {
-        const fullPath = child.path.startsWith('/') 
+        const fullPath = child.path.startsWith("/")
           ? child.path
-          : `${firstMenuWithChildren.path}/${child.path}`
+          : `${firstMenuWithChildren.path}/${child.path}`;
 
         return {
           ...child,
-            path: fullPath
+          path: fullPath,
+        };
+      });
     }
-      })
+    return [];
-    }
-    return []
   }
 
   // 根据选中的顶部菜单路径，找到对应的菜单项
-  const selectedMenu = menuList.value.find(item => item.path === selectedTopMenu.value)
+  const selectedMenu = menuList.value.find(
+    (item) => item.path === selectedTopMenu.value
+  );
   if (selectedMenu && selectedMenu.children) {
-    return selectedMenu.children.map(child=>{
+    return selectedMenu.children.map((child) => {
-      const fullPath = child.path.startsWith('/') 
+      const fullPath = child.path.startsWith("/")
         ? child.path
-        : `${selectedMenu.path}/${child.path}`
+        : `${selectedMenu.path}/${child.path}`;
 
       return {
         ...child,
-          path: fullPath
+        path: fullPath,
-        }
+      };
-    })
+    });
   }
 
-  
+  return [];
-
+});
-  return []
-})
 
 // 处理顶部菜单选中事件
 const handleTopMenuSelect = (menuPath: string) => {
-  selectedTopMenu.value = menuPath
+  selectedTopMenu.value = menuPath;
-}
+};
 
 // 左侧菜单选中事件
 const handleSideMenuSelect = (menuPath: string) => {
   selectedActiveMenu.value = menuPath;
-}
+};
 
 // 初始化：默认选中第一个菜单
 onMounted(() => {
   if (topLevelMenuList.value.length > 0) {
-    const firstMenu = topLevelMenuList.value[0]
+    const firstMenu = topLevelMenuList.value[0];
     if (firstMenu && firstMenu.path) {
-      selectedTopMenu.value = firstMenu.path
+      selectedTopMenu.value = firstMenu.path;
     }
   }
 
   // 监听窗口大小变化
-  window.addEventListener('resize', handleResize);
+  window.addEventListener("resize", handleResize);
 
   // 初始化时根据屏幕大小设置菜单状态
   handleResize();
@@ -156,7 +174,7 @@ onMounted(() => {
 
 // 组件卸载时移除监听
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
+  window.removeEventListener("resize", handleResize);
 });
 </script>
 <style lang="scss" scoped>
@@ -204,6 +222,8 @@ onUnmounted(() => {
     .mj-collapse {
       width: 24px;
       height: 24px;
+      line-height: 24px;
+      text-align: center;
       border-radius: 50%;
       position: absolute;
       right: 0;