fix: fix cssVar hmr error

vbenjs · Nov 11, 2020 · 2b95be8 · 2b95be8
1 parent 7692ffb
commit 2b95be8
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 216 deletions.
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
@@ -50,8 +50,11 @@
   }
 
   // collapsed show title end
+  .ant-menu-item,
   .ant-menu-submenu-title {
     > .basic-menu__name {
+      width: 100%;
+
       .basic-menu__tag {
         float: right;
         margin-top: @app-menu-item-height / 2;
@@ -62,14 +65,6 @@
 
   .ant-menu-item {
     transition: unset;
-
-    > .basic-menu__name {
-      .basic-menu__tag {
-        float: right;
-        margin-top: @app-menu-item-height / 2;
-        transform: translate(0%, -50%);
-      }
-    }
   }
 
   &__tag {

diff --git a/src/hooks/web/useCssVar.ts b/src/hooks/web/useCssVar.ts
@@ -1,34 +1,40 @@
-import { ref, Ref, isRef, watch } from '@vue/runtime-dom'
+// import { ref, Ref, isRef, watch } from '@vue/runtime-dom';
 
-export default function useCssVar(
-  prop: string,
-  refEl?: Ref<HTMLElement | null>
-) {
-  const refVar = ref('')
-  let el: HTMLElement = document.documentElement
+// TODO 打开注释会造成热更新失效,待排查
+// export default function useCssVar(prop: string, refEl?: Ref<HTMLElement | null>) {
+//   const refVar = ref('');
+//   let el: HTMLElement = document.documentElement;
 
-  if (isRef(refEl)) {
-    watch(
-      refEl,
-      () => {
-        if (refEl.value) {
-          el = refEl.value as HTMLElement
-          refVar.value = getComputedStyle(el).getPropertyValue(prop)
-        }
-      },
-      { immediate: true }
-    )
-  } else {
-    refVar.value = getComputedStyle(el).getPropertyValue(prop)
-  }
+//   if (isRef(refEl)) {
+//     watch(
+//       refEl,
+//       () => {
+//         if (refEl.value) {
+//           el = refEl.value as HTMLElement;
+//           refVar.value = getComputedStyle(el).getPropertyValue(prop);
+//         }
+//       },
+//       { immediate: true }
+//     );
+//   } else {
+//     refVar.value = getComputedStyle(el).getPropertyValue(prop);
+//   }
 
-  watch(
-    refVar,
-    val => {
-      el && el.style.setProperty(prop, val)
-    },
-    { immediate: true }
-  )
+//   watch(
+//     refVar,
+//     (val) => {
+//       el && el.style.setProperty(prop, val);
+//     },
+//     { immediate: true }
+//   );
 
-  return refVar
+//   return refVar;
+// }
+
+export function getCssVar(prop: string, dom = document.documentElement) {
+  return getComputedStyle(dom).getPropertyValue(prop);
+}
+
+export function setCssVar(prop: string, val: any, dom = document.documentElement) {
+  dom.style.setProperty(prop, val);
 }
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
@@ -68,7 +68,7 @@ const setting: ProjectConfig = {
     // 是否显示搜索框
     showSearch: true,
     // 菜单宽度
-    menuWidth: 200,
+    menuWidth: 210,
     // 菜单模式
     mode: MenuModeEnum.INLINE,
     // 菜单类型

diff --git a/src/setup/theme/index.ts b/src/setup/theme/index.ts
@@ -1,4 +1,4 @@
-import useCssVar from '/@/hooks/web/useCssVar';
+import { setCssVar } from '/@/hooks/web/useCssVar';
 import { isHexColor, colorIsDark, lighten, darken } from '/@/utils/color';
 import { appStore } from '/@/store/modules/app';
 import { MenuThemeEnum } from '/@/enums/menuEnum';
@@ -29,15 +29,13 @@ export const updateGrayMode = (gray: boolean) => {
 
 export function updateHeaderBgColor(color: string) {
   if (!isHexColor(color)) return;
-  const bgColorRef = useCssVar(HEADER_BG_COLOR_VAR);
-  const bgHoverColorRef = useCssVar(HEADER_BG_HOVER_COLOR_VAR);
-  const topMenuActiveBgColorRef = useCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR);
   // bg color
-  bgColorRef.value = color;
+  setCssVar(HEADER_BG_COLOR_VAR, color);
+
   // hover color
   const hoverColor = lighten(color, 6);
-  bgHoverColorRef.value = hoverColor;
-  topMenuActiveBgColorRef.value = hoverColor;
+  setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
+  setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
 
   const isDark = colorIsDark(color);
 
@@ -51,15 +49,11 @@ export function updateHeaderBgColor(color: string) {
 export function updateSidebarBgColor(color: string) {
   if (!isHexColor(color)) return;
 
-  const siderBgColor = useCssVar(SIDER_DARK_BG_COLOR);
-  const darkenBgColor = useCssVar(SIDER_DARK_DARKEN_BG_COLOR);
-  const lighten1Color = useCssVar(SIDER_LIGHTEN_1_BG_COLOR);
-  const lighten2Color = useCssVar(SIDER_LIGHTEN_2_BG_COLOR);
+  setCssVar(SIDER_DARK_BG_COLOR, color);
+  setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6));
+  setCssVar(SIDER_LIGHTEN_1_BG_COLOR, lighten(color, 4));
+  setCssVar(SIDER_LIGHTEN_2_BG_COLOR, lighten(color, 8));
 
-  siderBgColor.value = color;
-  darkenBgColor.value = darken(color, 6);
-  lighten1Color.value = lighten(color, 4);
-  lighten2Color.value = lighten(color, 8);
   // only #ffffff is light
   const isLight = ['#fff', '#ffffff'].includes(color.toLowerCase());