feat: 混合布局搭建

src/layout/components/Header/components/theme-settings/index.vue

@@ -222,7 +222,7 @@ const handleCancel = () => {
     top: 15px;
     width: 20px;
     height: calc(100% - 15px);
-    background: #fff;
+    background: #232324;
   }
 }
 

src/layout/layout-mixing/index.vue

@@ -1,30 +1,182 @@
 <template>
   <a-layout class="layout">
-    <Aside />
+    <div :class="asideDark ? 'aside dark' : 'aside'">
+      <Logo />
+      <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
+        <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"><Menu /></a-scrollbar>
+      </a-layout-sider>
+    </div>
     <a-layout>
-      <Header />
+      <div class="layout-head">
+        <div class="layout-head-top">
+          <a-layout-header class="header">
+            <div class="menu_fold">
+              <a-button size="mini" type="text" class="menu_fold_icon" @click="onCollapsed">
+                <template #icon>
+                  <icon-menu-fold :size="18" v-if="!collapsed" />
+                  <icon-menu-unfold :size="18" v-if="collapsed" />
+                </template>
+              </a-button>
+            </div>
+
+            <a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem">
+              <template v-for="item in routeTree" :key="item.name">
+                <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
+                  <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+                    <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+                  </template>
+                  <template #title>{{ $t(`language.${item.meta.title}`) }}</template>
+                  <MenuItem :route-tree="item.children" />
+                </a-sub-menu>
+                <a-menu-item v-else :key="item?.name">
+                  <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+                    <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+                  </template>
+                  <span>{{ $t(`language.${item.meta.title}`) }}</span>
+                </a-menu-item>
+              </template>
+            </a-menu>
+            <HeaderRight />
+          </a-layout-header>
           <Main />
           <Footer v-if="isFooter" />
+        </div>
+      </div>
     </a-layout>
   </a-layout>
 </template>
 
 <script setup lang="ts">
-import Aside from "@/layout/components/Aside/index.vue";
+import Logo from "@/layout/components/Logo/index.vue";
-import Header from "@/layout/components/Header/index.vue";
 import Main from "@/layout/components/Main/index.vue";
 import Footer from "@/layout/components/Footer/index.vue";
+import Menu from "@/layout/components/Menu/index.vue";
+import HeaderRight from "@/layout/components/Header/components/header-right/index.vue";
+import MenuItem from "@/layout/components/Menu/menu-item.vue";
+import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
+import { useRouter } from "vue-router";
+import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-
 defineOptions({ name: "LayoutMixing" });
 
 const themeStore = useThemeConfig();
-let { isFooter } = storeToRefs(themeStore);
+const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
+
+const router = useRouter();
+const routerStore = useRoutesListStore();
+const { routeTree, currentRoute } = storeToRefs(routerStore);
+
+// 折叠
+const onCollapsed = () => {
+  themeStore.setCollapsed(!collapsed.value);
+};
+/**
+ * @description 菜单点击事件
+ * @param {String} key
+ */
+const onMenuItem = (key: string) => {
+  const { findLinearArray } = useRoutingMethod();
+  const find = findLinearArray(key);
+  // 路由存在则存入并跳转，不存在则跳404
+  if (find) {
+    router.push(find.path);
+  } else {
+    router.push("/404");
+  }
+};
 </script>
 
 <style lang="scss" scoped>
 .layout {
   height: 100vh;
 }
+
+.dark {
+  background: #232324;
+}
+
+.layout_side {
+  height: calc(100% - 60px);
+  .scrollbar {
+    height: 100%;
+  }
+}
+// 修改左侧滚动条宽度
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
+}
+// 去掉右侧阴影并替换为边线
+:deep(.arco-layout-sider-light) {
+  box-shadow: unset;
+  border-right: $border-1 solid $color-border-2;
+}
+
+// 解决折叠菜单的icon不居中问题
+:deep(.arco-menu-vertical.arco-menu-collapsed) {
+  // 消除icon的自带padding值，并且让元素居中
+  .arco-menu-has-icon {
+    padding: 0;
+    justify-content: center;
+  }
+  // 消除icon的自带margin-right值，并且设置icon的padding值以保留icon空隙
+  .arco-menu-icon {
+    margin-right: 0;
+    padding: 10px 0;
+  }
+  // 消除title占位
+  .arco-menu-title {
+    display: none;
+  }
+}
+
+// 去掉sider背景
+.arco-layout-sider {
+  background: unset;
+}
+
+.layout-head {
+  height: 100%;
+  display: flex;
+  align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。
+  overflow: hidden;
+  border: 1px solid red;
+  .header-logo {
+    width: 150px;
+  }
+  &-top {
+    flex: 1; // 按比例分配大小
+    display: flex;
+    flex-direction: column; // flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
+    overflow: hidden;
+  }
+}
+
+.header {
+  padding: 0 $padding;
+  height: 60px;
+  box-sizing: border-box;
+  border-bottom: $border-1 solid $color-border-2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+}
+
+:deep(.arco-menu-pop) {
+  white-space: nowrap;
+}
+// 横向菜单样式修改
+:deep(.arco-menu-horizontal) {
+  flex: 1;
+  overflow: hidden;
+  .arco-menu-inner {
+    padding-left: 0; // 横向排列，禁用左padding
+    .arco-menu-overflow-wrap {
+      white-space: nowrap; // 禁用换行，否则会导致菜单换行闪烁
+    }
+  }
+}
 </style>