+
diff --git a/src/config/index.ts b/src/config/index.ts
index ecd63a8..09c0567 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,2 +1,2 @@
// * 默认主题颜色
-export const PRIMARY_COLOR: string = "#409eff";
+export const PRIMARY_COLOR = '#409eff'
diff --git a/src/hooks/useFullscreen.ts b/src/hooks/useFullscreen.ts
index e20f5db..d6c3c70 100644
--- a/src/hooks/useFullscreen.ts
+++ b/src/hooks/useFullscreen.ts
@@ -4,120 +4,109 @@
* 它原理原理实现如下：
*/
-import { ElMessage } from "element-plus";
-import {onMounted} from "vue";
+import { ElMessage } from 'element-plus'
+import { onMounted } from 'vue'
export const useFullscreen = () => {
- /**
- * @description: 是否支持全屏+判断浏览器前缀
- */
- const isFullscreen = ()=> {
- let prefixName = ""; // 浏览器前缀
- let fullscreenEnabled = false;
- // 判断浏览器前缀
- if (document.fullscreenEnabled) {
- fullscreenEnabled = document.fullscreenEnabled;
- // webkit
- } else if (document.webkitFullscreenEnabled) {
- fullscreenEnabled = document.webkitFullscreenEnabled;
- prefixName = "webkit";
- // moz
- } else if (document.mozFullScreenEnabled) {
- fullscreenEnabled = document.mozFullScreenEnabled;
- prefixName = "moz";
- // ms
- } else if (document.msFullscreenEnabled) {
- fullscreenEnabled = document.msFullscreenEnabled;
- prefixName = "ms";
- }
- return {
- fullscreenEnabled,
- prefixName
- }
+ /**
+ * @description: 是否支持全屏+判断浏览器前缀
+ */
+ const isFullscreen = () => {
+ let prefixName = '' // 浏览器前缀
+ let fullscreenEnabled = false
+ // 判断浏览器前缀
+ if (document.fullscreenEnabled) {
+ fullscreenEnabled = document.fullscreenEnabled
+ // webkit
+ } else if (document.webkitFullscreenEnabled) {
+ fullscreenEnabled = document.webkitFullscreenEnabled
+ prefixName = 'webkit'
+ // moz
+ } else if (document.mozFullScreenEnabled) {
+ fullscreenEnabled = document.mozFullScreenEnabled
+ prefixName = 'moz'
+ // ms
+ } else if (document.msFullscreenEnabled) {
+ fullscreenEnabled = document.msFullscreenEnabled
+ prefixName = 'ms'
}
-
-
- /**
- * @description: 检测有没有元素处于全屏状态
- * @return 布尔值
- */
- const isElementFullScreen = ()=> {
- const fullscreenElement =
- document.fullscreenElement ||
- document.msFullscreenElement ||
- document.mozFullScreenElement ||
- document.webkitFullscreenElement;
- if (fullscreenElement === null) {
- return false; // 当前没有元素在全屏状态
- } else {
- return true; // 有元素在全屏状态
- }
+ return {
+ fullscreenEnabled,
+ prefixName,
}
+ }
- /**
- * @description: 将传进来的元素全屏
- * @param {String} domName 要全屏的dom名称
- */
- const Fullscreen = (target)=> {
- const targetRef = target || (document == null ? void 0 : document.querySelector("html"));
- const {prefixName} = isFullscreen()
- const methodName =
- prefixName === ""
- ? "requestFullscreen"
- : `${prefixName}RequestFullScreen`;
- targetRef[methodName]();
+ /**
+ * @description: 检测有没有元素处于全屏状态
+ * @return 布尔值
+ */
+ const isElementFullScreen = () => {
+ const fullscreenElement =
+ document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
+ if (fullscreenElement === null) {
+ return false // 当前没有元素在全屏状态
+ } else {
+ return true // 有元素在全屏状态
}
+ }
- // 退出全屏
- const exitFullscreen =()=> {
- const {prefixName} = isFullscreen()
- const methodName =
- prefixName === ""
- ? "exitFullscreen"
- : `${prefixName}ExitFullscreen`;
- document[methodName]();
+ /**
+ * @description: 将传进来的元素全屏
+ * @param {String} domName 要全屏的dom名称
+ */
+ const Fullscreen = (target) => {
+ const targetRef = target || (document == null ? void 0 : document.querySelector('html'))
+ const { prefixName } = isFullscreen()
+ const methodName = prefixName === '' ? 'requestFullscreen' : `${prefixName}RequestFullScreen`
+ targetRef[methodName]()
+ }
+
+ // 退出全屏
+ const exitFullscreen = () => {
+ const { prefixName } = isFullscreen()
+ const methodName = prefixName === '' ? 'exitFullscreen' : `${prefixName}ExitFullscreen`
+ document[methodName]()
+ }
+
+ /**
+ * @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
+ * @param {Function} enterErrorFn 回调
+ */
+ const screenError = () => {
+ const { prefixName } = isFullscreen()
+ const methodName = `on${prefixName}fullscreenerror`
+ document[methodName] = (e) => {
+ ElMessage.error('进入全屏失败')
}
+ }
- /**
- * @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
- * @param {Function} enterErrorFn 回调
- */
- const screenError = ()=> {
- const {prefixName} = isFullscreen()
- const methodName = `on${prefixName}fullscreenerror`;
- document[methodName] = e => {
- ElMessage.error('进入全屏失败')
- };
+ /**
+ * @description: 监听进入/离开全屏
+ * @param {Function} enter 进入全屏的回调
+ * @param {Function} quit 离开全屏的回调
+ */
+ const screenChange = (enter, quit) => {
+ const { fullscreenEnabled, prefixName } = isFullscreen()
+ if (!fullscreenEnabled) return
+ const methodName = `on${prefixName}fullscreenchange`
+ document[methodName] = (e) => {
+ if (isElementFullScreen()) {
+ enter && enter(e) // 进入全屏回调
+ } else {
+ quit && quit(e) // 离开全屏的回调
+ }
}
+ }
- /**
- * @description: 监听进入/离开全屏
- * @param {Function} enter 进入全屏的回调
- * @param {Function} quit 离开全屏的回调
- */
- const screenChange = (enter, quit)=> {
- const {fullscreenEnabled,prefixName} = isFullscreen()
- if (!fullscreenEnabled) return;
- const methodName = `on${prefixName}fullscreenchange`;
- document[methodName] = e => {
- if (isElementFullScreen()) {
- enter && enter(e); // 进入全屏回调
- } else {
- quit && quit(e); // 离开全屏的回调
- }
- };
- }
+ onMounted(() => {
+ screenError()
+ })
- onMounted(()=>{
- screenError()
- })
-
-
- return{
- isFullscreen,
- isElementFullScreen,
- Fullscreen,
- exitFullscreen,
- screenChange
- }
+ return {
+ isFullscreen,
+ isElementFullScreen,
+ Fullscreen,
+ exitFullscreen,
+ screenChange,
+ }
}
diff --git a/src/hooks/useResizeElement.ts b/src/hooks/useResizeElement.ts
index 78576e5..13c2367 100644
--- a/src/hooks/useResizeElement.ts
+++ b/src/hooks/useResizeElement.ts
@@ -1,39 +1,39 @@
-import ResizeObserver from "resize-observer-polyfill";
-import { onBeforeUnmount } from "vue";
-import requestAnimationFrameThrottle from "@/utils/requestAnimationFrameThrottle"
-export const useResizeElement = (chart, chartsRef)=>{
- let observer = null ;
- let widthW = 0;
- let heightW = 0;
- const handleResize = (entries )=>{
- const { contentRect } = entries[0];
- let {width,height} = contentRect
- width = Math.floor(width);
- height = Math.floor(height);
- if(widthW!==width|| heightW !== height){
+import ResizeObserver from 'resize-observer-polyfill'
+import { onBeforeUnmount } from 'vue'
+import requestAnimationFrameThrottle from '@/utils/requestAnimationFrameThrottle'
+export const useResizeElement = (chart, chartsRef) => {
+ let observer = null
+ let widthW = 0
+ let heightW = 0
+ const handleResize = (entries) => {
+ const { contentRect } = entries[0]
+ let { width, height } = contentRect
+ width = Math.floor(width)
+ height = Math.floor(height)
+ if (widthW !== width || heightW !== height) {
widthW = width
heightW = height
chart && chart.resize()
}
}
- const addObserver = ()=>{
+ const addObserver = () => {
observer = new ResizeObserver(requestAnimationFrameThrottle(handleResize))
observer.observe(chartsRef)
}
- const removeObserver = ()=>{
+ const removeObserver = () => {
if (observer) {
- observer.disconnect();
- observer = null;
+ observer.disconnect()
+ observer = null
}
- chart&&chart.dispose()
+ chart && chart.dispose()
}
- onBeforeUnmount(()=>{
+ onBeforeUnmount(() => {
removeObserver()
})
- return{
- addObserver
+ return {
+ addObserver,
}
}
diff --git a/src/hooks/useResizeHandler.ts b/src/hooks/useResizeHandler.ts
index 8eaa5c7..4c02fdb 100644
--- a/src/hooks/useResizeHandler.ts
+++ b/src/hooks/useResizeHandler.ts
@@ -1,70 +1,66 @@
-import {useSettingStore} from "@/store/modules/setting"
-import {computed, onMounted, onUnmounted, watch} from "vue";
-import {useRoute} from "vue-router";
+import { useSettingStore } from '@/store/modules/setting'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
const { body } = document
const WIDTH = 800 // refer to Bootstrap's responsive design
const MAX_WIDTH = 1200
-export const useResizeHandler = ()=>{
- const SettingStore = useSettingStore()
- const route = useRoute()
- const device = computed(()=>{
- return SettingStore.device
- })
- function $_isMobile(){
- const rect = body.getBoundingClientRect()
- return rect.width - 1 < WIDTH
+export const useResizeHandler = () => {
+ const SettingStore = useSettingStore()
+ const route = useRoute()
+ const device = computed(() => {
+ return SettingStore.device
+ })
+ function $_isMobile() {
+ const rect = body.getBoundingClientRect()
+ return rect.width - 1 < WIDTH
+ }
+
+ function collapse() {
+ const rect = body.getBoundingClientRect()
+ if (rect.width - 1 > MAX_WIDTH) {
+ return true
+ } else {
+ return false
}
+ }
- function collapse(){
- const rect = body.getBoundingClientRect()
- if(rect.width - 1 > MAX_WIDTH){
- return true
- }else {
- return false
- }
+ function $_resizeHandler() {
+ if (!document.hidden) {
+ // bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
+ const isMobile = $_isMobile()
+ const isCollapse = collapse()
+ SettingStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
+ if (isMobile) {
+ SettingStore.closeSideBar({ withoutAnimation: true })
+ }
+
+ if (!isMobile) {
+ SettingStore.setCollapse(isCollapse)
+ }
}
-
- function $_resizeHandler(){
- if (!document.hidden) { // bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
- const isMobile = $_isMobile()
- const isCollapse = collapse()
- SettingStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
-
-
- if (isMobile) {
- SettingStore.closeSideBar({ withoutAnimation: true })
- }
-
- if(!isMobile){
- SettingStore.setCollapse(isCollapse)
- }
-
-
- }
+ }
+ onMounted(() => {
+ const isMobile = $_isMobile()
+ if (isMobile) {
+ SettingStore.toggleDevice('mobile')
+ SettingStore.closeSideBar({ withoutAnimation: true })
}
- onMounted(()=>{
- const isMobile = $_isMobile()
- if (isMobile) {
- SettingStore.toggleDevice('mobile')
- SettingStore.closeSideBar({ withoutAnimation: true })
- }
- window.addEventListener('resize', $_resizeHandler)
+ window.addEventListener('resize', $_resizeHandler)
- watch(route,()=>{
- if (device.value === 'mobile' && SettingStore.isCollapse) {
- SettingStore.closeSideBar({ withoutAnimation: false })
- }
- })
+ watch(route, () => {
+ if (device.value === 'mobile' && SettingStore.isCollapse) {
+ SettingStore.closeSideBar({ withoutAnimation: false })
+ }
})
+ })
- onUnmounted(()=>{
- window.removeEventListener('resize', $_resizeHandler)
- })
+ onUnmounted(() => {
+ window.removeEventListener('resize', $_resizeHandler)
+ })
-
- return {device}
+ return { device }
}
diff --git a/src/hooks/useWrapComponents.ts b/src/hooks/useWrapComponents.ts
index c2dbdd7..8a990bc 100644
--- a/src/hooks/useWrapComponents.ts
+++ b/src/hooks/useWrapComponents.ts
@@ -1,23 +1,23 @@
// 自定义name的壳的集合
-import {h} from "vue";
+import { h } from 'vue'
const wrapperMap = new Map()
-export const useWrapComponents = (Component,route)=>{
- let wrapper
- if (Component) {
- const wrapperName = route.name
- if (wrapperMap.has(wrapperName)) {
- wrapper = wrapperMap.get(wrapperName)
- } else {
- wrapper = {
- name: wrapperName,
- render() {
- return h("div", {className: "app-main-inner"}, Component)
- },
- }
- wrapperMap.set(wrapperName, wrapper)
- }
- return h(wrapper)
+export const useWrapComponents = (Component, route) => {
+ let wrapper
+ if (Component) {
+ const wrapperName = route.name
+ if (wrapperMap.has(wrapperName)) {
+ wrapper = wrapperMap.get(wrapperName)
+ } else {
+ wrapper = {
+ name: wrapperName,
+ render() {
+ return h('div', { className: 'app-main-inner' }, Component)
+ },
+ }
+ wrapperMap.set(wrapperName, wrapper)
}
+ return h(wrapper)
+ }
}
diff --git a/src/icons/index.js b/src/icons/index.js
index 2188a3b..867b224 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,7 +1,6 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg component
-
// const req = require.context('./svg', false, /\.svg$/)
const req = import.meta.globEager('./svg/*.svg')
diff --git a/src/layout/LayoutColumns/index.vue b/src/layout/LayoutColumns/index.vue
index 4687814..6a386ec 100644
--- a/src/layout/LayoutColumns/index.vue
+++ b/src/layout/LayoutColumns/index.vue
@@ -7,12 +7,12 @@
+ 
@@ -35,9 +33,9 @@
- 
- 
- 
- 
+ 
+