fix: fix some known problems

Author: anncwb

packages/@core/forward/preferences/src/preferences.ts

@@ -72,7 +72,6 @@ class PreferenceManager {
   private handleUpdates(updates: DeepPartial<Preferences>) {
     const themeUpdates = updates.theme || {};
     const appUpdates = updates.app || {};
-
     if (themeUpdates && Object.keys(themeUpdates).length > 0) {
       this.updateTheme(this.state);
     }
@@ -162,15 +161,14 @@ class PreferenceManager {
   private updateColorMode(preference: Preferences) {
     if (preference.app) {
       const { colorGrayMode, colorWeakMode } = preference.app;
-      const body = document.body;
       const COLOR_WEAK = 'invert-mode';
       const COLOR_GRAY = 'grayscale-mode';
       colorWeakMode
-        ? body.classList.add(COLOR_WEAK)
-        : body.classList.remove(COLOR_WEAK);
+        ? document.documentElement.classList.add(COLOR_WEAK)
+        : document.documentElement.classList.remove(COLOR_WEAK);
       colorGrayMode
-        ? body.classList.add(COLOR_GRAY)
-        : body.classList.remove(COLOR_GRAY);
+        ? document.documentElement.classList.add(COLOR_GRAY)
+        : document.documentElement.classList.remove(COLOR_GRAY);
     }
   }
 
@@ -341,13 +339,14 @@ class PreferenceManager {
     [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
       this.cache?.removeItem(key);
     });
+    this.updatePreferences(this.state);
   }
 
   /**
    * 更新偏好设置
    * @param updates - 要更新的偏好设置
    */
-  public updatePreferences(updates: DeepPartial<Preferences>) {
+  public async updatePreferences(updates: DeepPartial<Preferences>) {
     const mergedState = merge({}, updates, markRaw(this.state));
 
     Object.assign(this.state, mergedState);

packages/@core/shared/design/src/scss/common/base.scss

@@ -21,11 +21,11 @@ html {
   border-width: 0;
 }
 
-body.invert-mode {
+html.invert-mode {
   @apply invert;
 }
 
-body.grayscale-mode {
+html.grayscale-mode {
   @apply grayscale;
 }
 

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -92,7 +92,7 @@ const props = withDefaults(defineProps<Props>(), {
   domVisible: true,
   extraWidth: 180,
   fixedExtra: false,
-  isSideMixed: false,
+  isSidebarMixed: false,
   mixedWidth: 80,
   paddingTop: 60,
   show: true,
@@ -118,13 +118,13 @@ const hiddenSideStyle = computed((): CSSProperties => {
 });
 
 const style = computed((): CSSProperties => {
-  const { isSideMixed, paddingTop, zIndex } = props;
+  const { isSidebarMixed, paddingTop, zIndex } = props;
 
   return {
     ...calcMenuWidthStyle(false),
     paddingTop: `${paddingTop}px`,
     zIndex,
-    ...(isSideMixed && extraVisible.value ? { transition: 'none' } : {}),
+    ...(isSidebarMixed && extraVisible.value ? { transition: 'none' } : {}),
   };
 });
 
@@ -147,8 +147,8 @@ const extraTitleStyle = computed((): CSSProperties => {
 });
 
 const contentWidthStyle = computed((): CSSProperties => {
-  const { collapseWidth, fixedExtra, isSideMixed, mixedWidth } = props;
-  if (isSideMixed && fixedExtra) {
+  const { collapseWidth, fixedExtra, isSidebarMixed, mixedWidth } = props;
+  if (isSidebarMixed && fixedExtra) {
     return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
   }
   return {};
@@ -165,10 +165,10 @@ const contentStyle = computed((): CSSProperties => {
 });
 
 const headerStyle = computed((): CSSProperties => {
-  const { headerHeight, isSideMixed } = props;
+  const { headerHeight, isSidebarMixed } = props;
 
   return {
-    ...(isSideMixed ? { display: 'flex', justifyContent: 'center' } : {}),
+    ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
     height: `${headerHeight}px`,
     ...contentWidthStyle.value,
   };
@@ -195,10 +195,16 @@ watchEffect(() => {
 });
 
 function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
-  const { backgroundColor, extraWidth, fixedExtra, isSideMixed, show, width } =
-    props;
-
-  let widthValue = `${width + (isSideMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
+  const {
+    backgroundColor,
+    extraWidth,
+    fixedExtra,
+    isSidebarMixed,
+    show,
+    width,
+  } = props;
+
+  let widthValue = `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
 
   const { collapseWidth } = props;
 

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -27,10 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   contentPaddingRight: 0,
   contentPaddingTop: 0,
   footerEnable: false,
-  // footerBackgroundColor: '#fff',
   footerFixed: true,
   footerHeight: 32,
-  // headerBackgroundColor: 'hsl(var(--background))',
   headerHeight: 50,
   headerHeightOffset: 10,
   headerHidden: false,
@@ -39,7 +37,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerVisible: true,
   isMobile: false,
   layout: 'sidebar-nav',
-  // sideCollapse: false,
   sideCollapseWidth: 60,
   sidebarCollapseShowTitle: false,
   sidebarHidden: false,
@@ -48,7 +45,6 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarTheme: 'dark',
   sidebarWidth: 180,
   tabbarEnable: true,
-  // tabsBackgroundColor: 'hsl(var(--background))',
   tabsHeight: 36,
   zIndex: 200,
 });
@@ -134,6 +130,7 @@ const headerWrapperHeight = computed(() => {
 const getSideCollapseWidth = computed(() => {
   const { sideCollapseWidth, sidebarCollapseShowTitle, sidebarMixedWidth } =
     props;
+
   return sidebarCollapseShowTitle || isSidebarMixedNav.value
     ? sidebarMixedWidth
     : sideCollapseWidth;
@@ -187,6 +184,7 @@ const getSidebarWidth = computed(() => {
  */
 const getExtraWidth = computed(() => {
   const { sidebarWidth } = props;
+
   return sidebarExtraCollapse.value ? getSideCollapseWidth.value : sidebarWidth;
 });
 

packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue

@@ -52,7 +52,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
         @mouseenter="handleMouseenter(menu)"
       >
         <VbenIcon :class="e('icon')" :icon="menu.icon" fallback />
-        <span :class="e('name')"> {{ menu.name }}</span>
+        <span :class="e('name')" class="truncate"> {{ menu.name }}</span>
       </li>
     </template>
   </ul>

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

@@ -41,8 +41,15 @@ const theme = computed(() => {
 });
 
 const logoClass = computed(() => {
+  let cls = '';
   const { collapsed, collapsedShowTitle } = preferences.sidebar;
-  return collapsedShowTitle && collapsed && !isMixedNav.value ? 'mx-auto' : '';
+  if (collapsedShowTitle && collapsed && !isMixedNav.value) {
+    cls += ' mx-auto';
+  }
+  if (isSideMixedNav.value) {
+    cls += ' flex-center';
+  }
+  return cls;
 });
 
 const isMenuRounded = computed(() => {