fix: fix a series of known problems,fixed #54

packages/effects/layouts/src/authentication/form.vue

@@ -11,7 +11,7 @@ defineOptions({
 
 <template>
   <div
-    class="flex-col-center bg-background-content relative px-6 py-10 lg:flex-initial lg:px-8"
+    class="flex-col-center bg-background-deep relative px-6 py-10 lg:flex-initial lg:px-8"
   >
     <!-- Toolbar Slot -->
     <slot name="toolbar">

packages/effects/layouts/src/basic/layout.vue

@@ -30,8 +30,15 @@ defineOptions({ name: 'BasicLayout' });
 
 const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
 
-const { isDark, isHeaderNav, isMixedNav, isMobile, isSideMixedNav, layout } =
-  usePreferences();
+const {
+  isDark,
+  isHeaderNav,
+  isMixedNav,
+  isMobile,
+  isSideMixedNav,
+  layout,
+  sidebarCollapsed,
+} = usePreferences();
 
 const headerMenuTheme = computed(() => {
   return isDark.value ? 'dark' : 'light';
@@ -43,38 +50,45 @@ const theme = computed(() => {
 });
 
 const logoClass = computed(() => {
-  let cls = '';
-  const { collapsed, collapsedShowTitle } = preferences.sidebar;
-  if (collapsedShowTitle && collapsed && !isMixedNav.value) {
-    cls += ' mx-auto';
+  const { collapsedShowTitle } = preferences.sidebar;
+  const classes: string[] = [];
+
+  if (collapsedShowTitle && sidebarCollapsed.value && !isMixedNav.value) {
+    classes.push('mx-auto');
   }
+
   if (isSideMixedNav.value) {
-    cls += ' flex-center';
+    classes.push('flex-center');
   }
-  return cls;
+
+  return classes.join(' ');
 });
 
 const isMenuRounded = computed(() => {
   return preferences.navigation.styleType === 'rounded';
 });
 
-const logoCollapse = computed(() => {
-  if (isHeaderNav.value || isMixedNav.value) {
+const logoCollapsed = computed(() => {
+  const shouldCollapse = isHeaderNav.value || isMixedNav.value;
+
+  if (shouldCollapse) {
     return false;
   }
 
-  const { collapsed } = preferences.sidebar;
+  const shouldExpandOnMobile = !sidebarCollapsed.value && isMobile.value;
 
-  if (!collapsed && isMobile) {
+  if (shouldExpandOnMobile) {
     return false;
   }
-  return collapsed || isSideMixedNav.value;
+
+  return sidebarCollapsed.value || isSideMixedNav.value;
 });
 
 const showHeaderNav = computed(() => {
   return isHeaderNav.value || isMixedNav.value;
 });
 
+// 侧边多列菜单
 const {
   extraActiveMenu,
   extraMenus,
@@ -89,9 +103,9 @@ const {
   handleMenuSelect,
   headerActive,
   headerMenus,
-  sideActive,
-  sideMenus,
-  sideVisible,
+  sidebarActive,
+  sidebarMenus,
+  sidebarVisible,
 } = useMixedMenu();
 
 function wrapperMenus(menus: MenuRecordRaw[]) {
@@ -127,7 +141,7 @@ function clearPreferencesAndLogout() {
     :layout="layout"
     :sidebar-collapse="preferences.sidebar.collapsed"
     :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
-    :sidebar-enable="sideVisible"
+    :sidebar-enable="sidebarVisible"
     :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
     :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
     :sidebar-hidden="preferences.sidebar.hidden"
@@ -168,9 +182,9 @@ function clearPreferencesAndLogout() {
     <!-- logo -->
     <template #logo>
       <VbenLogo
-        :alt="preferences.app.name"
+        v-if="preferences.logo.enable"
         :class="logoClass"
-        :collapse="logoCollapse"
+        :collapsed="logoCollapsed"
         :src="preferences.logo.source"
         :text="preferences.app.name"
         :theme="showHeaderNav ? headerMenuTheme : theme"
@@ -215,8 +229,8 @@ function clearPreferencesAndLogout() {
         :accordion="preferences.navigation.accordion"
         :collapse="preferences.sidebar.collapsed"
         :collapse-show-title="preferences.sidebar.collapsedShowTitle"
-        :default-active="sideActive"
-        :menus="wrapperMenus(sideMenus)"
+        :default-active="sidebarActive"
+        :menus="wrapperMenus(sidebarMenus)"
         :rounded="isMenuRounded"
         :theme="theme"
         mode="vertical"
@@ -224,9 +238,9 @@ function clearPreferencesAndLogout() {
       />
     </template>
     <template #mixed-menu>
+      <!-- :collapse="!preferences.sidebar.collapsedShowTitle" -->
       <LayoutMixedMenu
         :active-path="extraActiveMenu"
-        :collapse="!preferences.sidebar.collapsedShowTitle"
         :menus="wrapperMenus(headerMenus)"
         :rounded="isMenuRounded"
         :theme="theme"
@@ -248,7 +262,6 @@ function clearPreferencesAndLogout() {
     <template #side-extra-title>
       <VbenLogo
         v-if="preferences.logo.enable"
-        :alt="preferences.app.name"
         :text="preferences.app.name"
         :theme="theme"
       />
@@ -266,6 +279,7 @@ function clearPreferencesAndLogout() {
     <template #content>
       <LayoutContent />
     </template>
+
     <!-- 页脚 -->
     <template v-if="preferences.footer.enable" #footer>
       <LayoutFooter>

packages/effects/layouts/src/basic/menu/mixed-menu.vue

@@ -20,10 +20,6 @@ const emit = defineEmits<{
 
 const route = useRoute();
 
-function handleSelect(menu: MenuRecordRaw) {
-  emit('select', menu);
-}
-
 onBeforeMount(() => {
   const menu = findMenuByPath(props.menus || [], route.path);
   if (menu) {
@@ -43,6 +39,6 @@ onBeforeMount(() => {
     :rounded="rounded"
     :theme="theme"
     @enter="(menu) => emit('enter', menu)"
-    @select="handleSelect"
+    @select="(menu) => emit('select', menu)"
   />
 </template>

packages/effects/layouts/src/basic/menu/use-extra-menu.ts

@@ -1,6 +1,6 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from '@vben-core/helpers';
@@ -78,6 +78,18 @@ function useExtraMenu() {
     }
   };
 
+  watch(
+    () => route.path,
+    () => {
+      const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+        menus.value,
+        route.path,
+      );
+      extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+      extraMenus.value = rootMenu?.children ?? [];
+    },
+  );
+
   return {
     extraActiveMenu,
     extraMenus,

packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -1,6 +1,6 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from '@vben-core/helpers';
@@ -10,8 +10,8 @@ import { useCoreAccessStore } from '@vben-core/stores';
 import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
-  const accessStore = useCoreAccessStore();
   const { navigation } = useNavigation();
+  const accessStore = useCoreAccessStore();
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
@@ -22,7 +22,7 @@ function useMixedMenu() {
     () => preferences.navigation.split && isMixedNav.value,
   );
 
-  const sideVisible = computed(() => {
+  const sidebarVisible = computed(() => {
     const enableSidebar = preferences.sidebar.enable;
     if (needSplit.value) {
       return enableSidebar && splitSideMenus.value.length > 0;
@@ -49,14 +49,14 @@ function useMixedMenu() {
   /**
    * 侧边菜单
    */
-  const sideMenus = computed(() => {
+  const sidebarMenus = computed(() => {
     return needSplit.value ? splitSideMenus.value : menus.value;
   });
 
   /**
    * 侧边菜单激活路径
    */
-  const sideActive = computed(() => {
+  const sidebarActive = computed(() => {
     return route.path;
   });
 
@@ -102,6 +102,13 @@ function useMixedMenu() {
     splitSideMenus.value = rootMenu?.children ?? [];
   }
 
+  watch(
+    () => route.path,
+    (path: string) => {
+      calcSideMenus(path);
+    },
+  );
+
   // 初始化计算侧边菜单
   onBeforeMount(() => {
     calcSideMenus();
@@ -111,9 +118,9 @@ function useMixedMenu() {
     handleMenuSelect,
     headerActive,
     headerMenus,
-    sideActive,
-    sideMenus,
-    sideVisible,
+    sidebarActive,
+    sidebarMenus,
+    sidebarVisible,
   };
 }