feat(projects): menu style adapter system

src/layouts/base-layout/index.vue

@@ -56,28 +56,28 @@ const siderWidth = computed(() => getSiderWidth());
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
 function getSiderWidth() {
-  const { width, mixedWidth, mixedChildMenuWidth } = themeStore.sider;
+  const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
   const isVerticalMix = themeStore.layout.mode === 'vertical-mix';
 
-  let w = isVerticalMix ? mixedWidth : width;
+  let w = isVerticalMix ? mixWidth : width;
 
   if (isVerticalMix && appStore.mixedSiderFixed) {
-    w += mixedChildMenuWidth;
+    w += mixChildMenuWidth;
   }
 
   return w;
 }
 
 function getSiderCollapsedWidth() {
-  const { collapsedWidth, mixedCollapsedWidth, mixedChildMenuWidth } = themeStore.sider;
+  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
 
   const isVerticalMix = themeStore.layout.mode === 'vertical-mix';
 
-  let w = isVerticalMix ? mixedCollapsedWidth : collapsedWidth;
+  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
 
   if (isVerticalMix && appStore.mixedSiderFixed) {
-    w += mixedChildMenuWidth;
+    w += mixChildMenuWidth;
   }
 
   return w;
@@ -100,7 +100,7 @@ function getSiderCollapsedWidth() {
     :sider-collapsed-width="siderCollapsedWidth"
     :footer-visible="themeStore.footer.visible"
     :fixed-footer="themeStore.footer.fixed"
-    :right-footer="themeStore.footer.floatRight"
+    :right-footer="themeStore.footer.right"
   >
     <template #header>
       <GlobalHeader v-bind="headerProps" />

src/layouts/modules/global-menu/base-menu.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuInfo, MenuMode } from 'ant-design-vue/es/menu/src/interface';
+import { transformColorWithOpacity } from '@sa/utils';
 import type { RouteKey } from '@elegant-router/types';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -31,6 +32,8 @@ const menuTheme = computed(() => (props.darkTheme ? 'dark' : 'light'));
 
 const isHorizontal = computed(() => props.mode === 'horizontal');
 
+const inlineCollapsed = computed(() => (props.mode === 'inline' ? appStore.siderCollapse : undefined));
+
 const selectedKeys = computed(() => {
   const { hideInMenu, activeMenu } = route.meta;
   const name = route.name as string;
@@ -52,6 +55,15 @@ const openKeys = computed(() => {
 
 const headerHeight = computed(() => `${themeStore.header.height}px`);
 
+const selectedBgColor = computed(() => {
+  const { darkMode, themeColor } = themeStore;
+
+  const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
+  const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
+
+  return darkMode ? dark : light;
+});
+
 function handleClickMenu(menuInfo: MenuInfo) {
   const routeKey = menuInfo.key as RouteKey;
 
@@ -60,28 +72,39 @@ function handleClickMenu(menuInfo: MenuInfo) {
 </script>
 
 <template>
-  <AMenu
-    :mode="mode"
-    :theme="menuTheme"
-    :items="routeStore.menus"
-    :selected-keys="selectedKeys"
-    :open-keys="openKeys"
-    :inline-collapsed="appStore.siderCollapse"
-    class="menu wh-full bg-container! border-0! transition-300"
-    :class="{ 'horizontal-menu': isHorizontal }"
-    @click="handleClickMenu"
-  />
+  <div class="menu-wrapper wh-full" :class="{ 'select-menu': !darkTheme }">
+    <AMenu
+      :mode="mode"
+      :theme="menuTheme"
+      :items="routeStore.menus"
+      :selected-keys="selectedKeys"
+      :open-keys="openKeys"
+      :inline-collapsed="inlineCollapsed"
+      class="wh-full border-0! transition-300"
+      :class="{ 'bg-container!': !darkTheme, 'horizontal-menu': isHorizontal }"
+      @click="handleClickMenu"
+    />
+  </div>
 </template>
 
 <style scoped>
-.menu :deep(.ant-menu-inline-collapsed > .ant-menu-item) {
+.menu-wrapper :deep(.ant-menu-inline .ant-menu-item) {
+  width: calc(100% - 16px);
+  margin-inline: 8px;
+}
+
+.menu-wrapper :deep(.ant-menu-inline-collapsed > .ant-menu-item) {
   padding-inline: calc(50% - 14px);
 }
 
-.menu :deep(.ant-menu-inline-collapsed .ant-menu-submenu-title) {
+.menu-wrapper :deep(.ant-menu-inline-collapsed .ant-menu-submenu-title) {
   padding-inline: calc(50% - 14px);
 }
 
+.select-menu :deep(.ant-menu-inline .ant-menu-item-selected) {
+  background-color: v-bind(selectedBgColor);
+}
+
 .horizontal-menu {
   line-height: v-bind(headerHeight);
 }

src/layouts/modules/global-menu/horizontal-mix-menu.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/layouts/modules/theme-drawer/components/setting-item.vue

@@ -15,7 +15,7 @@ defineProps<Props>();
 
 <template>
   <div class="flex-y-center justify-between w-full">
-    <span>{{ label }}</span>
+    <span class="text-base_text">{{ label }}</span>
     <slot></slot>
   </div>
 </template>

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -42,7 +42,7 @@ function handleSegmentChange(value: string | number) {
   <ADivider>{{ $t('theme.themeSchema.title') }}</ADivider>
   <div class="flex-vertical-stretch gap-16px">
     <div class="i-flex-center">
-      <ASegmented :value="themeStore.themeScheme" :options="options" @change="handleSegmentChange">
+      <ASegmented :value="themeStore.themeScheme" :options="options" class="bg-layout" @change="handleSegmentChange">
         <template #label="{ payload }">
           <ButtonIcon :icon="payload.icon" class="h-28px text-icon-small" />
         </template>

src/store/modules/theme/shared.ts

@@ -22,7 +22,7 @@ export function initThemeSettings(colors: App.Theme.ThemeTokenColor) {
       warning,
       error
     },
-    infoColorFollowPrimary: true,
+    isCustomizeInfoColor: false,
     layout: {
       mode: 'vertical',
       scrollMode: 'content'
@@ -47,9 +47,9 @@ export function initThemeSettings(colors: App.Theme.ThemeTokenColor) {
       inverted: false,
       width: 220,
       collapsedWidth: 64,
-      mixedWidth: 80,
-      mixedCollapsedWidth: 48,
-      mixedChildMenuWidth: 200
+      mixWidth: 80,
+      mixCollapsedWidth: 48,
+      mixChildMenuWidth: 200
     },
     menu: {
       horizontalPosition: 'flex-start'
@@ -58,7 +58,7 @@ export function initThemeSettings(colors: App.Theme.ThemeTokenColor) {
       visible: true,
       fixed: false,
       height: 48,
-      floatRight: true
+      right: true
     }
   };
 

src/typings/app.d.ts

@@ -37,9 +37,10 @@ declare namespace App {
        */
       otherColor: OtherColor;
       /**
-       * whether to follow the primary color
+       * is customize info color
+       * @description if not, the info color will transformed by the primary color
        */
-      infoColorFollowPrimary: boolean;
+      isCustomizeInfoColor: boolean;
       /**
        * layout
        */
@@ -122,17 +123,17 @@ declare namespace App {
          */
         collapsedWidth: number;
         /**
-         * sider width when the layout is mixed
+         * sider width when the layout is 'vertical-mix' or 'horizontal-mix'
          */
-        mixedWidth: number;
+        mixWidth: number;
         /**
-         * collapsed sider width when the layout is mixed
+         * collapsed sider width when the layout is 'vertical-mix' or 'horizontal-mix'
          */
-        mixedCollapsedWidth: number;
+        mixCollapsedWidth: number;
         /**
-         * child menu width when the layout is mixed
+         * child menu width when the layout is 'vertical-mix' or 'horizontal-mix'
          */
-        mixedChildMenuWidth: number;
+        mixChildMenuWidth: number;
       };
       /**
        * menu
@@ -162,7 +163,7 @@ declare namespace App {
         /**
          * whether float the footer to the right when the layout is 'horizontal-mix'
          */
-        floatRight: boolean;
+        right: boolean;
       };
     }