feat: 横向布局

.husky/_/commit-msg

@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/husky.sh"
+. "${0%/*}/h"
-
-npx --no-install commitlint --edit $1

.husky/_/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
+#!/usr/bin/env sh
-
+. "${0%/*}/h"
-. "$(dirname "$0")/husky.sh"
-
-npm run lint-staged

src/layout/components/Header/components/header-left/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import Breadcrumb from "@/layout/components/Header/components/breadcrumb/index.vue";
+import Breadcrumb from "@/layout/components/Header/components/Breadcrumb/index.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 const themeStore = useThemeConfig();

src/layout/components/Header/components/header-right/index.vue

@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import Notice from "@/layout/components/Header/components/notice/index.vue";
+import Notice from "@/layout/components/Header/components/Notice/index.vue";
 import SystemSettings from "@/layout/components/Header/components/system-settings/index.vue";
 import ThemeSettings from "@/layout/components/Header/components/theme-settings/index.vue";
 import myImage from "@/assets/img/my-image.jpg";

src/layout/components/Logo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="logo_head">
+  <div :class="layoutType == 'layoutDefaults' ? 'logo_head' : 'logo_head no-border'">
     <img :src="Logo" class="logo" />
     <span :class="isDark ? 'logo_title dark' : 'logo_title'" v-if="!collapsed">dc admin</span>
   </div>
@@ -43,4 +43,7 @@ const isDark = computed(() => {
     color: #fff;
   }
 }
+.no-border {
+  border: unset;
+}
 </style>

src/layout/layout-head/index.vue

@@ -1,83 +1,105 @@
 <template>
-  <a-layout class="layout">
+  <div class="layout-head">
-    <a-layout>
+    <div class="layout-head-top">
       <a-layout-header class="header">
-        <div class="header_left">
+        <Logo />
-          <div class="logo_head">
+        <a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem">
-            <img :src="Logo" class="logo" />
+          <template v-for="item in routeTree" :key="item.name">
-            <span class="logo_title">dc admin</span>
+            <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
-          </div>
+              <template #icon v-if="item.meta.svgIcon || item.meta.icon">
-          <HeadMenu />
+                <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
-        </div>
+              </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" />
-    </a-layout>
+    </div>
-  </a-layout>
+  </div>
 </template>
 
 <script setup lang="ts">
-import Logo from "@/assets/img/logo.jpg";
+import Logo from "@/layout/components/Logo/index.vue";
-import HeadMenu from "@/layout/components/head-menu/index.vue";
 import HeaderRight from "@/layout/components/Header/components/header-right/index.vue";
 import Main from "@/layout/components/Main/index.vue";
 import Footer from "@/layout/components/Footer/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 { storeToRefs } from "pinia";
+import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { useThemeConfig } from "@/store/modules/theme-config";
-const themeStore = useThemeConfig();
 defineOptions({ name: "LayoutHead" });
-let { isFooter } = storeToRefs(themeStore);
+const router = useRouter();
+const routerStore = useRoutesListStore();
+const themeStore = useThemeConfig();
+const { routeTree, currentRoute } = storeToRefs(routerStore);
+const { isFooter } = storeToRefs(themeStore);
+
+/**
+ * @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 {
+.layout-head {
-  height: 100vh;
+  height: 100%;
+  display: flex;
+  align-items: stretch; // 如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。
+  overflow: hidden;
+  &-top {
+    flex: 1; // 按比例分配大小
+    display: flex;
+    flex-direction: column; // flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
+    overflow: hidden;
   }
+}
+
 .header {
-  height: 60px;
   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;
-  .logo_head {
-    min-width: 150px;
-    height: 60px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    .logo {
-      width: 30px;
 }
-    .logo_title {
+
-      font-weight: bold;
+:deep(.arco-menu-pop) {
-      font-size: $font-size-title-2;
+  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; // 禁用换行，否则会导致菜单换行闪烁
     }
   }
-  .header_left {
-    box-sizing: border-box;
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-}
-// 去掉横向菜单的padding
-:deep(.arco-menu-horizontal .arco-menu-inner) {
-  padding: unset;
-}
-// 去掉单级横向菜单的line-height,解决icon和标题的横向对齐问题
-:deep(.arco-menu-horizontal .arco-menu-item) {
-  line-height: unset;
-}
-// 去掉多级横向菜单的line-height,解决icon和标题的横向对齐问题
-:deep(.arco-menu-horizontal .arco-menu-pop-header) {
-  line-height: unset;
-}
-:deep(.arco-menu-selected-label) {
-  bottom: -16px;
 }
 </style>

src/store/modules/theme-config.ts

@@ -63,7 +63,7 @@ export const useThemeConfig = defineStore("theme-config", {
       "#00B42A",
       "#14C9C9",
       "#3491FA",
-      "#165DFF",
+      "#c34d9c",
       "#722ED1",
       "#D91AD9",
       "#F5319D",