From 1cc15fc76db390b94a6fce61845c5dde3549b43f Mon Sep 17 00:00:00 2001
From: liangdong <a1789719643@gmail.com>
Date: Tue, 30 Dec 2025 19:09:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BF=AE=E6=94=B9=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stageBreadcrumbs/index.vue |   3 +
 src/pages/Layout/index.vue                | 134 +++++++++++++---------
 2 files changed, 80 insertions(+), 57 deletions(-)

diff --git a/src/components/stageBreadcrumbs/index.vue b/src/components/stageBreadcrumbs/index.vue
index 5380644..d89d084 100644
--- a/src/components/stageBreadcrumbs/index.vue
+++ b/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;
         }
     }
diff --git a/src/pages/Layout/index.vue b/src/pages/Layout/index.vue
index 85e3c16..7441073 100644
--- a/src/pages/Layout/index.vue
+++ b/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>
-            <mjMenus class="mj-aside_menu" :isCollapse="isCollapse" :menuList="sideMenuList" :active-menu="selectedActiveMenu"
-              @menu-select="handleSideMenuSelect" />
+            <div class="mj-aside-title" v-show="!isCollapse">
+              {{ topTitle }}
+            </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"
-            @menu-select="handleTopMenuSelect" />
+          <mjMenus
+            :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 { useUserStore } from '@/store'
+import mjMenus from "@/components/standardMenu/index.vue";
+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 => {
-    const { children, ...rest } = item
-    return rest
-  })
-})
+  return menuList.value.map((item) => {
+    const { children, ...rest } = item;
+    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 selectedActiveMenu = ref<string>('');
+const selectedTopMenu = 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=>{
-        const fullPath = child.path.startsWith('/') 
-          ? child.path 
-          : `${firstMenuWithChildren.path}/${child.path}`
-
-          return {
-            ...child,
-            path: fullPath
-          }
-      })
-    }
-    return []
-  }
-
-  // 根据选中的顶部菜单路径，找到对应的菜单项
-  const selectedMenu = menuList.value.find(item => item.path === selectedTopMenu.value)
-  if (selectedMenu && selectedMenu.children) {
-    return selectedMenu.children.map(child=>{
-      const fullPath = child.path.startsWith('/') 
-        ? child.path 
-        : `${selectedMenu.path}/${child.path}`
+      return (firstMenuWithChildren.children || []).map((child) => {
+        const fullPath = child.path.startsWith("/")
+          ? child.path
+          : `${firstMenuWithChildren.path}/${child.path}`;
 
         return {
           ...child,
-          path: fullPath
-        }
-    })
+          path: fullPath,
+        };
+      });
+    }
+    return [];
   }
 
-  
+  // 根据选中的顶部菜单路径，找到对应的菜单项
+  const selectedMenu = menuList.value.find(
+    (item) => item.path === selectedTopMenu.value
+  );
+  if (selectedMenu && selectedMenu.children) {
+    return selectedMenu.children.map((child) => {
+      const fullPath = child.path.startsWith("/")
+        ? child.path
+        : `${selectedMenu.path}/${child.path}`;
 
-  return []
-})
+      return {
+        ...child,
+        path: fullPath,
+      };
+    });
+  }
+
+  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>
@@ -173,7 +191,7 @@ onUnmounted(() => {
   }
 
   :deep(.el-main) {
-    --el-main-padding:16px;
+    --el-main-padding: 16px;
     background-color: #f8fafc;
   }
 
@@ -204,10 +222,12 @@ onUnmounted(() => {
     .mj-collapse {
       width: 24px;
       height: 24px;
+      line-height: 24px;
+      text-align: center;
       border-radius: 50%;
       position: absolute;
       right: 0;
-      top: calc(var(--mj-menu-header-height)/2 - 10px);
+      top: calc(var(--mj-menu-header-height) / 2 - 10px);
       cursor: pointer;
       z-index: 10;
       box-sizing: border-box;