wip(Layout): Layout developing

src/components/Menu/src/Menu.vue

@@ -22,8 +22,8 @@ export default defineComponent({
 
     const preFixCls = getPrefixCls('menu')
 
-    const menuMode = computed(() => {
-      // 水平模式
+    const menuMode = computed((): 'vertical' | 'horizontal' => {
+      // 竖
       const vertical: LayoutType[] = ['classic']
 
       if (vertical.includes(appStore.getLayout)) {
@@ -77,7 +77,7 @@ export default defineComponent({
           >
             {{
               default: () => {
-                const { renderMenuItem } = useRenderMenuItem(routers.value)
+                const { renderMenuItem } = useRenderMenuItem(routers.value, menuMode.value)
                 return renderMenuItem()
               }
             }}
@@ -93,7 +93,10 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-menu';
 
 .@{prefix-cls} {
+  transition: width var(--transition-time-02);
+
   :deep(.el-menu) {
+    width: 100% !important;
     border-right: none;
 
     // 设置选中时子标题的颜色
@@ -132,8 +135,55 @@ export default defineComponent({
     }
   }
 
+  // 折叠时的最小宽度
   :deep(.el-menu--collapse) {
     width: var(--left-menu-min-width);
+
+    & > .is-active,
+    & > .is-active > .el-sub-menu__title {
+      background-color: var(--left-menu-collapse-bg-active-color) !important;
+    }
+  }
+
+  // 折叠动画的时候，就需要把文字给隐藏掉
+  :deep(.horizontal-collapse-transition) {
+    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
+    .@{prefix-cls}__title {
+      display: none;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-menu-popper';
+
+.@{prefix-cls} {
+  &--vertical {
+    // 设置选中时子标题的颜色
+    .is-active {
+      & > .el-sub-menu__title {
+        color: var(--left-menu-text-active-color) !important;
+      }
+    }
+
+    // 设置子菜单悬停的高亮和背景色
+    .el-sub-menu__title,
+    .el-menu-item {
+      &:hover {
+        color: var(--left-menu-text-active-color) !important;
+        background-color: var(--left-menu-bg-color) !important;
+      }
+    }
+
+    // 设置选中时的高亮背景
+    .el-menu-item.is-active {
+      background-color: var(--left-menu-bg-active-color) !important;
+
+      &:hover {
+        background-color: var(--left-menu-bg-active-color) !important;
+      }
+    }
   }
 }
 </style>

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -3,8 +3,13 @@ import type { RouteMeta } from 'vue-router'
 import { getAllParentPath, hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
+import { useDesign } from '@/hooks/web/useDesign'
+import { pathResolve } from '@/utils/routerHelper'
 
-export function useRenderMenuItem(allRouters: AppRouteRecordRaw[] = []) {
+export function useRenderMenuItem(
+  allRouters: AppRouteRecordRaw[] = [],
+  menuMode: 'vertical' | 'horizontal'
+) {
   function renderMenuItem(routers?: AppRouteRecordRaw[]) {
     return (routers || allRouters).map((v) => {
       const meta = (v.meta ?? {}) as RouteMeta
@@ -23,15 +28,23 @@ export function useRenderMenuItem(allRouters: AppRouteRecordRaw[] = []) {
           !meta?.alwaysShow
         ) {
           return (
-            <ElMenuItem index={fullPath}>
+            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
               {{
-                default: () => renderMenuTitle(meta)
+                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
               }}
             </ElMenuItem>
           )
         } else {
+          const { getPrefixCls } = useDesign()
+
+          const preFixCls = getPrefixCls('menu-popper')
           return (
-            <ElSubMenu index={fullPath}>
+            <ElSubMenu
+              index={fullPath}
+              popperClass={
+                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
+              }
+            >
               {{
                 title: () => renderMenuTitle(meta),
                 default: () => renderMenuItem(v.children)

src/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -10,10 +10,10 @@ export function useRenderMenuTitle() {
     return icon ? (
       <>
         <Icon icon={meta.icon}></Icon>
-        {t(title as string)}
+        <span>{t(title as string)}</span>
       </>
     ) : (
-      t(title as string)
+      <span>{t(title as string)}</span>
     )
   }