fix: fix fullscreen bg color not work (#75)

vben
1 parent bcab4b77
Showing 8 changed files with 44 additions and 68 deletions
src/design/color.less
src/design/index.less
src/design/public.less
src/design/reset.less
src/hooks/event/useBreakpoint.ts
src/hooks/web/useApexCharts.ts
src/hooks/web/useFullScreen.ts
src/utils/helper/persistent.ts
@@ -10,34 +10,33 @@
 @iconify-bg-color: #5551;
  
 // =================================
-// ==============边框颜色============
+// ==============border-color============
 // =================================
  
-// 暗色-深
+// Dark-dark
 @border-color-dark: #b6b7b9;
  
-// 暗色-浅
+// Dark-light
 @border-color-shallow-dark: #cececd;
  
-// 亮色-深
+// Light-dark
 @border-color-light: #ebeef5;
  
-// 亮色-浅
+// Light-light
 @border-color-shallow-light: #f2f6fc;
  
 // =================================
 // ==============message==============
 // =================================
-// 成功背景颜色
+
+// success-bg-color
 @success-background-color: #f1f9ec;
-// 一般背景颜色
+// info-bg-color
 @info-background-color: #e8eff8;
-// 警告背景颜色
+// warn-bg-color
 @warning-background-color: #fdf6ed;
-// 危险背景颜色
+// danger-bg-color
 @danger-background-color: #fef0f0;
-// tag标签：失效
-@invalid-color: #909399;
  
 // =================================
 // ==============bg color============
@@ -59,6 +58,7 @@
 @header-light-bg-hover-color: #f6f6f6;
 @header-light-desc-color: #7c8087;
 @header-light-bottom-border-color: #eee;
+
 // =================================
 // ==============Menu============
 // =================================
@@ -66,9 +66,9 @@
 // let -menu
 @first-menu-item-dark-bg-color: #273352;
  
-// 2级菜单黑暗背景色
+// Level 2 menu dark background color
 @sub-menu-item-dark-bg-color: #314268;
-// 3级菜单黑暗背景色
+// Level 3 menu dark background color
 @children-menu-item-dark-bg-color: #4f6088;
  
 // top-menu
@@ -87,6 +87,7 @@
 @tree-hover-background-color: #f5f7fa;
 // tree item hover font color
 @tree-hover-font-color: #f5f7fa;
+
 // =================================
 // ==============link============
 // =================================
@@ -94,18 +95,19 @@
 @link-active-color: darken(@primary-color, 10%);
  
 // =================================
-// ==============文本色-=============
+// ==============Text color-=============
 // =================================
  
-// 主文本色
+// Main text color
 @text-color-base: #2c3a61;
-// 标注色
+
+// Label color
 @text-color-call-out: #606266;
  
-// 辅助说明信息色-深色
+// Auxiliary information color-dark
 @text-color-help-dark: #909399;
  
-// 辅助说明信息色-浅色
+// Auxiliary information color-light color
 @text-color-help-light: #c0c4cc;
  
 // =================================
@@ -135,7 +137,8 @@
 @button-cancel-color: @text-color-call-out;
 @button-cancel-bg-color: @white;
 @button-cancel-border-color: @border-color-shallow-dark;
-// 鼠标悬停
+
+// Mouse over
 @button-cancel-hover-color: @primary-color;
 @button-cancel-hover-bg-color: @white;
 @button-cancel-hover-border-color: @primary-color;
@@ -13,6 +13,16 @@
   box-sizing: border-box;
 }
  
+// Background color setting in full screen state in each browser
+::backdrop,
+html,
+*:fullscreen,
+*:-webkit-full-screen,
+*:-moz-full-screen {
+  z-index: 1;
+  background-color: #fff !important;
+}
+
 html,
 body {
   width: 100%;
-/* 滚动槽 */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
  
-// TODO 滚动条样式-待修改
 ::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
 }
  
-/* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
@@ -6,7 +6,6 @@
   body {
     width: 100%;
     height: 100%;
-    // overflow: hidden;
  
     &.color-weak {
       filter: invert(80%);
@@ -18,19 +17,13 @@
     }
   }
  
-  // remove the clear button of a text input control in IE10+
   input::-ms-clear,
   input::-ms-reveal {
     display: none;
   }
  
   body {
-    // 重置文本样式
     .reset-text();
-
-    // font-size: @--base-font-size;
-    // color: @--norm-text-color;
-    // background-color: @--norm-background-dark-color !important;
   }
  
   h1,
@@ -15,7 +15,7 @@ export function useBreakpoint() {
   };
 }
  
-// 只要调用一次即可
+// Just call it once
 export function createBreakpointListen(fn?: Fn) {
   const screenRef = ref<sizeEnum>(sizeEnum.XL);
   const realWidthRef = ref(window.innerWidth);
@@ -25,12 +25,14 @@ export function useApexCharts(elRef: Ref&lt;HTMLDivElement&gt;) {
   }
  
   tryOnUnmounted(() => {
-    const chartInstance = unref(chartInstanceRef);
+    let chartInstance = unref(chartInstanceRef);
     if (!chartInstance) {
       return;
     }
-    chartInstanceRef.value = null;
+
     chartInstance.destroy();
+    chartInstanceRef.value = null;
+    chartInstance = null;
   });
   return {
     setOptions,
@@ -15,35 +15,30 @@ type FSEPropName =
   | 'msFullscreenElement'
   | 'mozFullScreenElement'
   | 'fullscreenElement';
-type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange';
  
 export function useFullscreen(
   target: Ref<Nullable<HTMLElement>> = ref(document.documentElement),
   options?: FullscreenOptions
 ) {
   const isFullscreenRef = ref(false);
-  const DOC_EL = document.documentElement;
+  const el = document.documentElement;
   let RFC_METHOD_NAME: RFSMethodName = 'requestFullscreen';
   let EFS_METHOD_NAME: EFSMethodName = 'exitFullscreen';
   let FSE_PROP_NAME: FSEPropName = 'fullscreenElement';
-  let ON_FSC_PROP_NAME: ONFSCPropName = 'onfullscreenchange';
  
-  if ('webkitRequestFullScreen' in DOC_EL) {
+  if ('webkitRequestFullScreen' in el) {
     RFC_METHOD_NAME = 'webkitRequestFullScreen';
     EFS_METHOD_NAME = 'webkitExitFullscreen';
     FSE_PROP_NAME = 'webkitFullscreenElement';
-    ON_FSC_PROP_NAME = 'onwebkitfullscreenchange';
-  } else if ('msRequestFullscreen' in DOC_EL) {
+  } else if ('msRequestFullscreen' in el) {
     RFC_METHOD_NAME = 'msRequestFullscreen';
     EFS_METHOD_NAME = 'msExitFullscreen';
     FSE_PROP_NAME = 'msFullscreenElement';
-    ON_FSC_PROP_NAME = 'MSFullscreenChange';
-  } else if ('mozRequestFullScreen' in DOC_EL) {
+  } else if ('mozRequestFullScreen' in el) {
     RFC_METHOD_NAME = 'mozRequestFullScreen';
     EFS_METHOD_NAME = 'mozCancelFullScreen';
     FSE_PROP_NAME = 'mozFullScreenElement';
-    // ON_FSC_PROP_NAME = 'onmozfullscreenchange';
-  } else if (!('requestFullscreen' in DOC_EL)) {
+  } else if (!('requestFullscreen' in el)) {
     throw new Error('当前浏览器不支持Fullscreen API !');
   }
   function enterFullscreen(): Promise<void> {
@@ -68,32 +63,8 @@ export function useFullscreen(
     }
   }
  
-  /**
-   * 当全屏/退出时触发
-   */
-  function watchFullscreen(callback: (isFull: boolean) => void) {
-    const cancel = () => {
-      const t = unref(target);
-      t && (t.onfullscreenchange = null);
-    };
-
-    const handler = () => {
-      callback(isFullscreen());
-    };
-    if (target.value) {
-      (target.value as any)[ON_FSC_PROP_NAME] = handler;
-    }
-
-    return {
-      cancel,
-    };
-  }
-  watchFullscreen((isFull: boolean) => {
-    isFullscreenRef.value = isFull;
-  });
-
   return {
-    watchFullscreen,
+    // watchFullscreen,
     toggleFullscreen,
     exitFullscreen,
     isFullscreen,
@@ -58,7 +58,7 @@ export function setSession(key: string, value: any, immediate = false) {
   cacheStore.session[BASE_SESSION_CACHE_KEY][key] = value;
   if (immediate) {
     const cache = cacheStore.session;
-    ls.set(BASE_SESSION_CACHE_KEY, cache);
+    ss.set(BASE_SESSION_CACHE_KEY, cache);
   }
 }