diff --git a/src/design/color.less b/src/design/color.less index 44f644de..8c023b2c 100644 --- a/src/design/color.less +++ b/src/design/color.less @@ -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; diff --git a/src/design/index.less b/src/design/index.less index 166a5e50..91c39ac4 100644 --- a/src/design/index.less +++ b/src/design/index.less @@ -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%; diff --git a/src/design/public.less b/src/design/public.less index 15e575f8..4b34d5f0 100644 --- a/src/design/public.less +++ b/src/design/public.less @@ -1,15 +1,12 @@ -/* 滚动槽 */ ::-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; diff --git a/src/design/reset.less b/src/design/reset.less index 9f54f200..70b121a3 100644 --- a/src/design/reset.less +++ b/src/design/reset.less @@ -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, diff --git a/src/hooks/event/useBreakpoint.ts b/src/hooks/event/useBreakpoint.ts index 7fcb67a1..e82ed3af 100644 --- a/src/hooks/event/useBreakpoint.ts +++ b/src/hooks/event/useBreakpoint.ts @@ -15,7 +15,7 @@ export function useBreakpoint() { }; } -// 只要调用一次即可 +// Just call it once export function createBreakpointListen(fn?: Fn) { const screenRef = ref(sizeEnum.XL); const realWidthRef = ref(window.innerWidth); diff --git a/src/hooks/web/useApexCharts.ts b/src/hooks/web/useApexCharts.ts index 511b5f72..36e74a9b 100644 --- a/src/hooks/web/useApexCharts.ts +++ b/src/hooks/web/useApexCharts.ts @@ -25,12 +25,14 @@ export function useApexCharts(elRef: Ref) { } tryOnUnmounted(() => { - const chartInstance = unref(chartInstanceRef); + let chartInstance = unref(chartInstanceRef); if (!chartInstance) { return; } - chartInstanceRef.value = null; + chartInstance.destroy(); + chartInstanceRef.value = null; + chartInstance = null; }); return { setOptions, diff --git a/src/hooks/web/useFullScreen.ts b/src/hooks/web/useFullScreen.ts index 378410bf..191edcaf 100644 --- a/src/hooks/web/useFullScreen.ts +++ b/src/hooks/web/useFullScreen.ts @@ -15,35 +15,30 @@ type FSEPropName = | 'msFullscreenElement' | 'mozFullScreenElement' | 'fullscreenElement'; -type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange'; export function useFullscreen( target: Ref> = 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 { @@ -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, diff --git a/src/utils/helper/persistent.ts b/src/utils/helper/persistent.ts index 89bb5e8f..acad6f3f 100644 --- a/src/utils/helper/persistent.ts +++ b/src/utils/helper/persistent.ts @@ -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); } }