mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-17 03:32:27 +08:00
fix Bug Features CHANGELOG.ms
This commit is contained in:
Ah jung
@@ -3,45 +3,45 @@ import { tryOnUnmounted } from '@vueuse/core';
|
||||
import { isFunction } from '@/utils/is';
|
||||
|
||||
export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
|
||||
if (!isFunction(handle)) {
|
||||
throw new Error('handle is not Function!');
|
||||
}
|
||||
if (!isFunction(handle)) {
|
||||
throw new Error('handle is not Function!');
|
||||
}
|
||||
|
||||
const { readyRef, stop, start } = useTimeoutRef(wait);
|
||||
if (native) {
|
||||
handle();
|
||||
} else {
|
||||
watch(
|
||||
readyRef,
|
||||
(maturity) => {
|
||||
maturity && handle();
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
}
|
||||
return { readyRef, stop, start };
|
||||
const { readyRef, stop, start } = useTimeoutRef(wait);
|
||||
if (native) {
|
||||
handle();
|
||||
} else {
|
||||
watch(
|
||||
readyRef,
|
||||
(maturity) => {
|
||||
maturity && handle();
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
}
|
||||
return { readyRef, stop, start };
|
||||
}
|
||||
|
||||
export function useTimeoutRef(wait: number) {
|
||||
const readyRef = ref(false);
|
||||
const readyRef = ref(false);
|
||||
|
||||
let timer: TimeoutHandle;
|
||||
let timer: TimeoutHandle;
|
||||
|
||||
function stop(): void {
|
||||
readyRef.value = false;
|
||||
timer && window.clearTimeout(timer);
|
||||
}
|
||||
function stop(): void {
|
||||
readyRef.value = false;
|
||||
timer && window.clearTimeout(timer);
|
||||
}
|
||||
|
||||
function start(): void {
|
||||
stop();
|
||||
timer = setTimeout(() => {
|
||||
readyRef.value = true;
|
||||
}, wait);
|
||||
}
|
||||
function start(): void {
|
||||
stop();
|
||||
timer = setTimeout(() => {
|
||||
readyRef.value = true;
|
||||
}, wait);
|
||||
}
|
||||
|
||||
start();
|
||||
start();
|
||||
|
||||
tryOnUnmounted(stop);
|
||||
tryOnUnmounted(stop);
|
||||
|
||||
return { readyRef, stop, start };
|
||||
return { readyRef, stop, start };
|
||||
}
|
||||
|
||||
@@ -7,83 +7,83 @@ let globalWidthRef: ComputedRef<number>;
|
||||
let globalRealWidthRef: ComputedRef<number>;
|
||||
|
||||
export interface CreateCallbackParams {
|
||||
screen: ComputedRef<sizeEnum | undefined>;
|
||||
width: ComputedRef<number>;
|
||||
realWidth: ComputedRef<number>;
|
||||
screenEnum: typeof screenEnum;
|
||||
screenMap: Map<sizeEnum, number>;
|
||||
sizeEnum: typeof sizeEnum;
|
||||
screen: ComputedRef<sizeEnum | undefined>;
|
||||
width: ComputedRef<number>;
|
||||
realWidth: ComputedRef<number>;
|
||||
screenEnum: typeof screenEnum;
|
||||
screenMap: Map<sizeEnum, number>;
|
||||
sizeEnum: typeof sizeEnum;
|
||||
}
|
||||
|
||||
export function useBreakpoint() {
|
||||
return {
|
||||
screenRef: computed(() => unref(globalScreenRef)),
|
||||
widthRef: globalWidthRef,
|
||||
screenEnum,
|
||||
realWidthRef: globalRealWidthRef,
|
||||
};
|
||||
return {
|
||||
screenRef: computed(() => unref(globalScreenRef)),
|
||||
widthRef: globalWidthRef,
|
||||
screenEnum,
|
||||
realWidthRef: globalRealWidthRef,
|
||||
};
|
||||
}
|
||||
|
||||
// Just call it once
|
||||
export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
|
||||
const screenRef = ref<sizeEnum>(sizeEnum.XL);
|
||||
const realWidthRef = ref(window.innerWidth);
|
||||
const screenRef = ref<sizeEnum>(sizeEnum.XL);
|
||||
const realWidthRef = ref(window.innerWidth);
|
||||
|
||||
function getWindowWidth() {
|
||||
const width = document.body.clientWidth;
|
||||
const xs = screenMap.get(sizeEnum.XS)!;
|
||||
const sm = screenMap.get(sizeEnum.SM)!;
|
||||
const md = screenMap.get(sizeEnum.MD)!;
|
||||
const lg = screenMap.get(sizeEnum.LG)!;
|
||||
const xl = screenMap.get(sizeEnum.XL)!;
|
||||
if (width < xs) {
|
||||
screenRef.value = sizeEnum.XS;
|
||||
} else if (width < sm) {
|
||||
screenRef.value = sizeEnum.SM;
|
||||
} else if (width < md) {
|
||||
screenRef.value = sizeEnum.MD;
|
||||
} else if (width < lg) {
|
||||
screenRef.value = sizeEnum.LG;
|
||||
} else if (width < xl) {
|
||||
screenRef.value = sizeEnum.XL;
|
||||
} else {
|
||||
screenRef.value = sizeEnum.XXL;
|
||||
function getWindowWidth() {
|
||||
const width = document.body.clientWidth;
|
||||
const xs = screenMap.get(sizeEnum.XS)!;
|
||||
const sm = screenMap.get(sizeEnum.SM)!;
|
||||
const md = screenMap.get(sizeEnum.MD)!;
|
||||
const lg = screenMap.get(sizeEnum.LG)!;
|
||||
const xl = screenMap.get(sizeEnum.XL)!;
|
||||
if (width < xs) {
|
||||
screenRef.value = sizeEnum.XS;
|
||||
} else if (width < sm) {
|
||||
screenRef.value = sizeEnum.SM;
|
||||
} else if (width < md) {
|
||||
screenRef.value = sizeEnum.MD;
|
||||
} else if (width < lg) {
|
||||
screenRef.value = sizeEnum.LG;
|
||||
} else if (width < xl) {
|
||||
screenRef.value = sizeEnum.XL;
|
||||
} else {
|
||||
screenRef.value = sizeEnum.XXL;
|
||||
}
|
||||
realWidthRef.value = width;
|
||||
}
|
||||
realWidthRef.value = width;
|
||||
}
|
||||
|
||||
useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
|
||||
listener: () => {
|
||||
getWindowWidth();
|
||||
resizeFn();
|
||||
},
|
||||
// wait: 100,
|
||||
});
|
||||
|
||||
getWindowWidth();
|
||||
globalScreenRef = computed(() => unref(screenRef));
|
||||
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
|
||||
globalRealWidthRef = computed((): number => unref(realWidthRef));
|
||||
|
||||
function resizeFn() {
|
||||
fn?.({
|
||||
screen: globalScreenRef,
|
||||
width: globalWidthRef,
|
||||
realWidth: globalRealWidthRef,
|
||||
screenEnum,
|
||||
screenMap,
|
||||
sizeEnum,
|
||||
listener: () => {
|
||||
getWindowWidth();
|
||||
resizeFn();
|
||||
},
|
||||
// wait: 100,
|
||||
});
|
||||
}
|
||||
|
||||
resizeFn();
|
||||
return {
|
||||
screenRef: globalScreenRef,
|
||||
screenEnum,
|
||||
widthRef: globalWidthRef,
|
||||
realWidthRef: globalRealWidthRef,
|
||||
};
|
||||
getWindowWidth();
|
||||
globalScreenRef = computed(() => unref(screenRef));
|
||||
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
|
||||
globalRealWidthRef = computed((): number => unref(realWidthRef));
|
||||
|
||||
function resizeFn() {
|
||||
fn?.({
|
||||
screen: globalScreenRef,
|
||||
width: globalWidthRef,
|
||||
realWidth: globalRealWidthRef,
|
||||
screenEnum,
|
||||
screenMap,
|
||||
sizeEnum,
|
||||
});
|
||||
}
|
||||
|
||||
resizeFn();
|
||||
return {
|
||||
screenRef: globalScreenRef,
|
||||
screenEnum,
|
||||
widthRef: globalWidthRef,
|
||||
realWidthRef: globalRealWidthRef,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -6,57 +6,57 @@ import { useThrottleFn, useDebounceFn } from '@vueuse/core';
|
||||
export type RemoveEventFn = () => void;
|
||||
|
||||
export interface UseEventParams {
|
||||
el?: Element | Ref<Element | undefined> | Window | any;
|
||||
name: string;
|
||||
listener: EventListener;
|
||||
options?: boolean | AddEventListenerOptions;
|
||||
autoRemove?: boolean;
|
||||
isDebounce?: boolean;
|
||||
wait?: number;
|
||||
el?: Element | Ref<Element | undefined> | Window | any;
|
||||
name: string;
|
||||
listener: EventListener;
|
||||
options?: boolean | AddEventListenerOptions;
|
||||
autoRemove?: boolean;
|
||||
isDebounce?: boolean;
|
||||
wait?: number;
|
||||
}
|
||||
|
||||
export function useEventListener({
|
||||
el = window,
|
||||
name,
|
||||
listener,
|
||||
options,
|
||||
autoRemove = true,
|
||||
isDebounce = true,
|
||||
wait = 80,
|
||||
el = window,
|
||||
name,
|
||||
listener,
|
||||
options,
|
||||
autoRemove = true,
|
||||
isDebounce = true,
|
||||
wait = 80,
|
||||
}: UseEventParams): { removeEvent: RemoveEventFn } {
|
||||
/* eslint-disable-next-line */
|
||||
let remove: RemoveEventFn = () => {
|
||||
};
|
||||
const isAddRef = ref(false);
|
||||
|
||||
if (el) {
|
||||
const element: Ref<Element> = ref(el as Element);
|
||||
|
||||
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
|
||||
const realHandler = wait ? handler : listener;
|
||||
const removeEventListener = (e: Element) => {
|
||||
isAddRef.value = true;
|
||||
e.removeEventListener(name, realHandler, options);
|
||||
/* eslint-disable-next-line */
|
||||
let remove: RemoveEventFn = () => {
|
||||
};
|
||||
const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
|
||||
const isAddRef = ref(false);
|
||||
|
||||
const removeWatch = watch(
|
||||
element,
|
||||
(v, _ov, cleanUp) => {
|
||||
if (v) {
|
||||
!unref(isAddRef) && addEventListener(v);
|
||||
cleanUp(() => {
|
||||
autoRemove && removeEventListener(v);
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
if (el) {
|
||||
const element: Ref<Element> = ref(el as Element);
|
||||
|
||||
remove = () => {
|
||||
removeEventListener(element.value);
|
||||
removeWatch();
|
||||
};
|
||||
}
|
||||
return { removeEvent: remove };
|
||||
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
|
||||
const realHandler = wait ? handler : listener;
|
||||
const removeEventListener = (e: Element) => {
|
||||
isAddRef.value = true;
|
||||
e.removeEventListener(name, realHandler, options);
|
||||
};
|
||||
const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
|
||||
|
||||
const removeWatch = watch(
|
||||
element,
|
||||
(v, _ov, cleanUp) => {
|
||||
if (v) {
|
||||
!unref(isAddRef) && addEventListener(v);
|
||||
cleanUp(() => {
|
||||
autoRemove && removeEventListener(v);
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
remove = () => {
|
||||
removeEventListener(element.value);
|
||||
removeWatch();
|
||||
};
|
||||
}
|
||||
return { removeEvent: remove };
|
||||
}
|
||||
|
||||
@@ -4,31 +4,32 @@ import { warn } from '@/utils/log';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
|
||||
export const useGlobSetting = (): Readonly<GlobConfig> => {
|
||||
const {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_APP_SHORT_NAME,
|
||||
VITE_GLOB_API_URL_PREFIX,
|
||||
VITE_GLOB_UPLOAD_URL,
|
||||
VITE_GLOB_PERMISSION_MODE,
|
||||
VITE_GLOB_PROD_MOCK
|
||||
} = getAppEnvConfig();
|
||||
const {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_APP_SHORT_NAME,
|
||||
VITE_GLOB_API_URL_PREFIX,
|
||||
VITE_GLOB_UPLOAD_URL,
|
||||
VITE_GLOB_PROD_MOCK,
|
||||
VITE_GLOB_IMG_URL
|
||||
} = getAppEnvConfig();
|
||||
|
||||
if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
||||
warn(
|
||||
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
|
||||
);
|
||||
}
|
||||
if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
|
||||
warn(
|
||||
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
|
||||
);
|
||||
}
|
||||
|
||||
// Take global configuration
|
||||
const glob: Readonly<GlobConfig> = {
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
apiUrl: VITE_GLOB_API_URL,
|
||||
shortName: VITE_GLOB_APP_SHORT_NAME,
|
||||
urlPrefix: VITE_GLOB_API_URL_PREFIX,
|
||||
uploadUrl: VITE_GLOB_UPLOAD_URL,
|
||||
permissionMode: VITE_GLOB_PERMISSION_MODE,
|
||||
prodMock: VITE_GLOB_PROD_MOCK
|
||||
};
|
||||
return glob as Readonly<GlobConfig>;
|
||||
// Take global configuration
|
||||
const glob: Readonly<GlobConfig> = {
|
||||
title: VITE_GLOB_APP_TITLE,
|
||||
apiUrl: VITE_GLOB_API_URL,
|
||||
shortName: VITE_GLOB_APP_SHORT_NAME,
|
||||
urlPrefix: VITE_GLOB_API_URL_PREFIX,
|
||||
uploadUrl: VITE_GLOB_UPLOAD_URL,
|
||||
prodMock: VITE_GLOB_PROD_MOCK,
|
||||
imgUrl: VITE_GLOB_IMG_URL
|
||||
|
||||
};
|
||||
return glob as Readonly<GlobConfig>;
|
||||
};
|
||||
|
||||
@@ -2,18 +2,18 @@ import { computed } from 'vue';
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
|
||||
export function useDesignSetting() {
|
||||
const designStore = useDesignSettingStore();
|
||||
const designStore = useDesignSettingStore();
|
||||
|
||||
const getDarkTheme = computed(() => designStore.darkTheme);
|
||||
const getDarkTheme = computed(() => designStore.darkTheme);
|
||||
|
||||
const getAppTheme = computed(() => designStore.appTheme);
|
||||
const getAppTheme = computed(() => designStore.appTheme);
|
||||
|
||||
const getAppThemeList = computed(() => designStore.appThemeList);
|
||||
const getAppThemeList = computed(() => designStore.appThemeList);
|
||||
|
||||
return {
|
||||
getDarkTheme,
|
||||
getAppTheme,
|
||||
getAppThemeList
|
||||
}
|
||||
return {
|
||||
getDarkTheme,
|
||||
getAppTheme,
|
||||
getAppThemeList
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -3,32 +3,32 @@ import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
|
||||
export function useProjectSetting() {
|
||||
|
||||
const projectStore = useProjectSettingStore();
|
||||
const projectStore = useProjectSettingStore();
|
||||
|
||||
const getNavMode = computed(() => projectStore.navMode);
|
||||
const getNavMode = computed(() => projectStore.navMode);
|
||||
|
||||
const getNavTheme = computed(() => projectStore.navTheme);
|
||||
const getNavTheme = computed(() => projectStore.navTheme);
|
||||
|
||||
const getHeaderSetting = computed(() => projectStore.headerSetting);
|
||||
const getHeaderSetting = computed(() => projectStore.headerSetting);
|
||||
|
||||
const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
|
||||
const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
|
||||
|
||||
const getMenuSetting = computed(() => projectStore.menuSetting);
|
||||
const getMenuSetting = computed(() => projectStore.menuSetting);
|
||||
|
||||
const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
|
||||
const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
|
||||
|
||||
const getPermissionMode = computed(() => projectStore.permissionMode);
|
||||
const getPermissionMode = computed(() => projectStore.permissionMode);
|
||||
|
||||
const getShowFooter = computed(() => projectStore.showFooter);
|
||||
const getShowFooter = computed(() => projectStore.showFooter);
|
||||
|
||||
return {
|
||||
getNavMode,
|
||||
getNavTheme,
|
||||
getHeaderSetting,
|
||||
getMultiTabsSetting,
|
||||
getMenuSetting,
|
||||
getCrumbsSetting,
|
||||
getPermissionMode,
|
||||
getShowFooter
|
||||
}
|
||||
return {
|
||||
getNavMode,
|
||||
getNavTheme,
|
||||
getHeaderSetting,
|
||||
getMultiTabsSetting,
|
||||
getMenuSetting,
|
||||
getCrumbsSetting,
|
||||
getPermissionMode,
|
||||
getShowFooter
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Ref, isReactive, isRef } from 'vue'
|
||||
|
||||
function setLoading(loading, val) {
|
||||
if (loading != undefined && isRef(loading)) {
|
||||
loading.value = val
|
||||
} else if (loading != undefined && isReactive(loading)) {
|
||||
loading.loading = val
|
||||
}
|
||||
if (loading != undefined && isRef(loading)) {
|
||||
loading.value = val
|
||||
} else if (loading != undefined && isReactive(loading)) {
|
||||
loading.loading = val
|
||||
}
|
||||
}
|
||||
|
||||
export const useAsync = async (func: Promise<any>, loading: any): Promise<any> => {
|
||||
setLoading(loading, true)
|
||||
setLoading(loading, true)
|
||||
|
||||
return await func.finally(() => setLoading(loading, false))
|
||||
return await func.finally(() => setLoading(loading, false))
|
||||
}
|
||||
|
||||
@@ -1,84 +1,84 @@
|
||||
import { computed, onMounted, reactive, toRefs } from 'vue'
|
||||
|
||||
interface Battery {
|
||||
charging: boolean // 当前电池是否正在充电
|
||||
chargingTime: number // 距离充电完毕还需多少秒，如果为0则充电完毕
|
||||
dischargingTime: number // 代表距离电池耗电至空且挂起需要多少秒
|
||||
level: number // 代表电量的放大等级，这个值在 0.0 至 1.0 之间
|
||||
[key: string]: any
|
||||
charging: boolean // 当前电池是否正在充电
|
||||
chargingTime: number // 距离充电完毕还需多少秒，如果为0则充电完毕
|
||||
dischargingTime: number // 代表距离电池耗电至空且挂起需要多少秒
|
||||
level: number // 代表电量的放大等级，这个值在 0.0 至 1.0 之间
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export const useBattery = () => {
|
||||
const state = reactive({
|
||||
battery: {
|
||||
charging: false,
|
||||
chargingTime: 0,
|
||||
dischargingTime: 0,
|
||||
level: 100
|
||||
}
|
||||
})
|
||||
const state = reactive({
|
||||
battery: {
|
||||
charging: false,
|
||||
chargingTime: 0,
|
||||
dischargingTime: 0,
|
||||
level: 100
|
||||
}
|
||||
})
|
||||
|
||||
// 更新电池使用状态
|
||||
const updateBattery = (target) => {
|
||||
for (const key in state.battery) {
|
||||
state.battery[key] = target[key]
|
||||
}
|
||||
state.battery.level = state.battery.level * 100
|
||||
}
|
||||
|
||||
// 计算电池剩余可用时间
|
||||
const calcDischargingTime = computed(() => {
|
||||
const hour = state.battery.dischargingTime / 3600
|
||||
const minute = (state.battery.dischargingTime / 60) % 60
|
||||
return `${ ~~hour }小时${ ~~minute }分钟`
|
||||
})
|
||||
|
||||
// 电池状态
|
||||
const batteryStatus = computed(() => {
|
||||
if (state.battery.charging && state.battery.level >= 100) {
|
||||
return '已充满'
|
||||
} else if (state.battery.charging) {
|
||||
return '充电中'
|
||||
} else {
|
||||
return '已断开电源'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const BatteryManager: Battery = await (window.navigator as any).getBattery()
|
||||
updateBattery(BatteryManager)
|
||||
|
||||
// 电池充电状态更新时被调用
|
||||
BatteryManager.onchargingchange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池充电时间更新时被调用
|
||||
BatteryManager.onchargingtimechange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池断开充电时间更新时被调用
|
||||
BatteryManager.ondischargingtimechange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池电量更新时被调用
|
||||
BatteryManager.onlevelchange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
// 更新电池使用状态
|
||||
const updateBattery = (target) => {
|
||||
for (const key in state.battery) {
|
||||
state.battery[key] = target[key]
|
||||
}
|
||||
state.battery.level = state.battery.level * 100
|
||||
}
|
||||
|
||||
// new Intl.DateTimeFormat('zh', {
|
||||
// year: 'numeric',
|
||||
// month: '2-digit',
|
||||
// day: '2-digit',
|
||||
// hour: '2-digit',
|
||||
// minute: '2-digit',
|
||||
// second: '2-digit',
|
||||
// hour12: false
|
||||
// }).format(new Date())
|
||||
})
|
||||
// 计算电池剩余可用时间
|
||||
const calcDischargingTime = computed(() => {
|
||||
const hour = state.battery.dischargingTime / 3600
|
||||
const minute = (state.battery.dischargingTime / 60) % 60
|
||||
return `${ ~~hour }小时${ ~~minute }分钟`
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
batteryStatus,
|
||||
calcDischargingTime
|
||||
}
|
||||
// 电池状态
|
||||
const batteryStatus = computed(() => {
|
||||
if (state.battery.charging && state.battery.level >= 100) {
|
||||
return '已充满'
|
||||
} else if (state.battery.charging) {
|
||||
return '充电中'
|
||||
} else {
|
||||
return '已断开电源'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const BatteryManager: Battery = await (window.navigator as any).getBattery()
|
||||
updateBattery(BatteryManager)
|
||||
|
||||
// 电池充电状态更新时被调用
|
||||
BatteryManager.onchargingchange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池充电时间更新时被调用
|
||||
BatteryManager.onchargingtimechange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池断开充电时间更新时被调用
|
||||
BatteryManager.ondischargingtimechange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
// 电池电量更新时被调用
|
||||
BatteryManager.onlevelchange = ({ target }) => {
|
||||
updateBattery(target)
|
||||
}
|
||||
|
||||
// new Intl.DateTimeFormat('zh', {
|
||||
// year: 'numeric',
|
||||
// month: '2-digit',
|
||||
// day: '2-digit',
|
||||
// hour: '2-digit',
|
||||
// minute: '2-digit',
|
||||
// second: '2-digit',
|
||||
// hour12: false
|
||||
// }).format(new Date())
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
batteryStatus,
|
||||
calcDischargingTime
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,18 +6,18 @@ import { debounce } from 'lodash'
|
||||
*/
|
||||
|
||||
export function useDomWidth() {
|
||||
const domWidth = ref(window.innerWidth)
|
||||
const domWidth = ref(window.innerWidth)
|
||||
|
||||
function resize() {
|
||||
domWidth.value = document.body.clientWidth
|
||||
}
|
||||
function resize() {
|
||||
domWidth.value = document.body.clientWidth
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', debounce(resize, 80))
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resize)
|
||||
})
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', debounce(resize, 80))
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resize)
|
||||
})
|
||||
|
||||
return domWidth
|
||||
return domWidth
|
||||
}
|
||||
|
||||
@@ -4,27 +4,27 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
* @description 用户网络是否可用
|
||||
* */
|
||||
export function useOnline() {
|
||||
const online = ref(true)
|
||||
const online = ref(true)
|
||||
|
||||
const showStatus = (val) => {
|
||||
online.value = typeof val == 'boolean' ? val : val.target.online
|
||||
}
|
||||
const showStatus = (val) => {
|
||||
online.value = typeof val == 'boolean' ? val : val.target.online
|
||||
}
|
||||
|
||||
// 在页面加载后，设置正确的网络状态
|
||||
navigator.onLine ? showStatus(true) : showStatus(false)
|
||||
// 在页面加载后，设置正确的网络状态
|
||||
navigator.onLine ? showStatus(true) : showStatus(false)
|
||||
|
||||
onMounted(() => {
|
||||
// 开始监听网络状态的变化
|
||||
window.addEventListener('online', showStatus)
|
||||
onMounted(() => {
|
||||
// 开始监听网络状态的变化
|
||||
window.addEventListener('online', showStatus)
|
||||
|
||||
window.addEventListener('offline', showStatus)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
// 移除监听网络状态的变化
|
||||
window.removeEventListener('online', showStatus)
|
||||
window.addEventListener('offline', showStatus)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
// 移除监听网络状态的变化
|
||||
window.removeEventListener('online', showStatus)
|
||||
|
||||
window.removeEventListener('offline', showStatus)
|
||||
})
|
||||
window.removeEventListener('offline', showStatus)
|
||||
})
|
||||
|
||||
return { online }
|
||||
return { online }
|
||||
}
|
||||
|
||||
@@ -4,52 +4,52 @@ import { ref, onMounted, onUnmounted } from 'vue'
|
||||
* @description 获取本地时间
|
||||
*/
|
||||
export function useTime() {
|
||||
let timer // 定时器
|
||||
const year = ref(0) // 年份
|
||||
const month = ref(0) // 月份
|
||||
const week = ref('') // 星期几
|
||||
const day = ref(0) // 天数
|
||||
const hour = ref<number | string>(0) // 小时
|
||||
const minute = ref<number | string>(0) // 分钟
|
||||
const second = ref(0) // 秒
|
||||
let timer // 定时器
|
||||
const year = ref(0) // 年份
|
||||
const month = ref(0) // 月份
|
||||
const week = ref('') // 星期几
|
||||
const day = ref(0) // 天数
|
||||
const hour = ref<number | string>(0) // 小时
|
||||
const minute = ref<number | string>(0) // 分钟
|
||||
const second = ref(0) // 秒
|
||||
|
||||
// 更新时间
|
||||
const updateTime = () => {
|
||||
const date = new Date()
|
||||
year.value = date.getFullYear()
|
||||
month.value = date.getMonth() + 1
|
||||
week.value = '日一二三四五六'.charAt(date.getDay())
|
||||
day.value = date.getDate()
|
||||
hour.value =
|
||||
(date.getHours() + '')?.padStart(2, '0') ||
|
||||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
|
||||
minute.value =
|
||||
(date.getMinutes() + '')?.padStart(2, '0') ||
|
||||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
|
||||
second.value = date.getSeconds()
|
||||
}
|
||||
// 更新时间
|
||||
const updateTime = () => {
|
||||
const date = new Date()
|
||||
year.value = date.getFullYear()
|
||||
month.value = date.getMonth() + 1
|
||||
week.value = '日一二三四五六'.charAt(date.getDay())
|
||||
day.value = date.getDate()
|
||||
hour.value =
|
||||
(date.getHours() + '')?.padStart(2, '0') ||
|
||||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
|
||||
minute.value =
|
||||
(date.getMinutes() + '')?.padStart(2, '0') ||
|
||||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
|
||||
second.value = date.getSeconds()
|
||||
}
|
||||
|
||||
// 原生时间格式化
|
||||
// new Intl.DateTimeFormat('zh', {
|
||||
// year: 'numeric',
|
||||
// month: '2-digit',
|
||||
// day: '2-digit',
|
||||
// hour: '2-digit',
|
||||
// minute: '2-digit',
|
||||
// second: '2-digit',
|
||||
// hour12: false
|
||||
// }).format(new Date())
|
||||
// 原生时间格式化
|
||||
// new Intl.DateTimeFormat('zh', {
|
||||
// year: 'numeric',
|
||||
// month: '2-digit',
|
||||
// day: '2-digit',
|
||||
// hour: '2-digit',
|
||||
// minute: '2-digit',
|
||||
// second: '2-digit',
|
||||
// hour12: false
|
||||
// }).format(new Date())
|
||||
|
||||
updateTime()
|
||||
updateTime()
|
||||
|
||||
onMounted(() => {
|
||||
clearInterval(timer)
|
||||
timer = setInterval(() => updateTime(), 1000)
|
||||
})
|
||||
onMounted(() => {
|
||||
clearInterval(timer)
|
||||
timer = setInterval(() => updateTime(), 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
return { month, day, hour, minute, second, week }
|
||||
return { month, day, hour, minute, second, week }
|
||||
}
|
||||
|
||||
@@ -14,105 +14,105 @@ import echarts from '@/utils/lib/echarts';
|
||||
|
||||
|
||||
export function useECharts(
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: 'light' | 'dark' | 'default' = 'light'
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: 'light' | 'dark' | 'default' = 'light'
|
||||
) {
|
||||
// const { getDarkMode } = useRootSetting();
|
||||
const getDarkMode = 'light'
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeFn: Fn = resize;
|
||||
const cacheOptions = ref<EChartsOption>({});
|
||||
let removeResizeFn: Fn = () => {
|
||||
};
|
||||
|
||||
resizeFn = useDebounceFn(resize, 200);
|
||||
|
||||
const getOptions = computed((): EChartsOption => {
|
||||
if (getDarkMode !== 'dark') {
|
||||
return cacheOptions.value;
|
||||
}
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
...cacheOptions.value,
|
||||
// const { getDarkMode } = useRootSetting();
|
||||
const getDarkMode = 'light'
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeFn: Fn = resize;
|
||||
const cacheOptions = ref<EChartsOption>({});
|
||||
let removeResizeFn: Fn = () => {
|
||||
};
|
||||
});
|
||||
|
||||
function initCharts(t = theme) {
|
||||
const el = unref(elRef);
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
resizeFn = useDebounceFn(resize, 200);
|
||||
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
listener: resizeFn,
|
||||
});
|
||||
removeResizeFn = removeEvent;
|
||||
const { widthRef, screenEnum } = useBreakpoint();
|
||||
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
resizeFn();
|
||||
}, 30);
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions(options: EChartsOption, clear = true) {
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
setOptions(unref(getOptions));
|
||||
}, 30);
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
useTimeoutFn(() => {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
|
||||
if (!chartInstance) return;
|
||||
const getOptions = computed((): EChartsOption => {
|
||||
if (getDarkMode !== 'dark') {
|
||||
return cacheOptions.value;
|
||||
}
|
||||
clear && chartInstance?.clear();
|
||||
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
}, 30);
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
...cacheOptions.value,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function resize() {
|
||||
chartInstance?.resize();
|
||||
}
|
||||
function initCharts(t = theme) {
|
||||
const el = unref(elRef);
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
(theme) => {
|
||||
if (chartInstance) {
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
listener: resizeFn,
|
||||
});
|
||||
removeResizeFn = removeEvent;
|
||||
const { widthRef, screenEnum } = useBreakpoint();
|
||||
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
resizeFn();
|
||||
}, 30);
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions(options: EChartsOption, clear = true) {
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
setOptions(unref(getOptions));
|
||||
}, 30);
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
useTimeoutFn(() => {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
|
||||
if (!chartInstance) return;
|
||||
}
|
||||
clear && chartInstance?.clear();
|
||||
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
|
||||
function resize() {
|
||||
chartInstance?.resize();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
(theme) => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
initCharts(theme as 'default');
|
||||
setOptions(cacheOptions.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!chartInstance) return;
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
initCharts(theme as 'default');
|
||||
setOptions(cacheOptions.value);
|
||||
}
|
||||
chartInstance = null;
|
||||
});
|
||||
|
||||
function getInstance(): echarts.ECharts | null {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
}
|
||||
return chartInstance;
|
||||
}
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!chartInstance) return;
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
|
||||
function getInstance(): echarts.ECharts | null {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
}
|
||||
return chartInstance;
|
||||
}
|
||||
|
||||
return {
|
||||
setOptions,
|
||||
resize,
|
||||
echarts,
|
||||
getInstance,
|
||||
};
|
||||
return {
|
||||
setOptions,
|
||||
resize,
|
||||
echarts,
|
||||
getInstance,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
export function usePermission() {
|
||||
const userStore = useUserStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
/**
|
||||
* 检查权限
|
||||
* @param accesses
|
||||
*/
|
||||
function _someRoles(accesses: string[]) {
|
||||
return userStore.getRoles.some(item => {
|
||||
const { value }: any = item
|
||||
return accesses.includes(value)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否存在权限
|
||||
* 可用于 v-if 显示逻辑
|
||||
* */
|
||||
function hasPermission(accesses: string[]): boolean {
|
||||
if (!accesses.length) return true
|
||||
return _someRoles(accesses)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含指定的所有权限
|
||||
* @param accesses
|
||||
*/
|
||||
function hasEveryPermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.every((access) => !!rolesList[access])
|
||||
/**
|
||||
* 检查权限
|
||||
* @param accesses
|
||||
*/
|
||||
function _someRoles(accesses: string[]) {
|
||||
return userStore.getRoles.some(item => {
|
||||
const { value }: any = item
|
||||
return accesses.includes(value)
|
||||
})
|
||||
}
|
||||
throw new Error(`[hasEveryPermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含其中某个权限
|
||||
* @param accesses
|
||||
* @param accessMap
|
||||
*/
|
||||
function hasSomePermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.some((access) => !!rolesList[access])
|
||||
/**
|
||||
* 判断是否存在权限
|
||||
* 可用于 v-if 显示逻辑
|
||||
* */
|
||||
function hasPermission(accesses: string[]): boolean {
|
||||
if (!accesses.length) return true
|
||||
return _someRoles(accesses)
|
||||
}
|
||||
throw new Error(`[hasSomePermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
return { hasPermission, hasEveryPermission, hasSomePermission };
|
||||
/**
|
||||
* 是否包含指定的所有权限
|
||||
* @param accesses
|
||||
*/
|
||||
function hasEveryPermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.every((access) => !!rolesList[access])
|
||||
}
|
||||
throw new Error(`[hasEveryPermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含其中某个权限
|
||||
* @param accesses
|
||||
* @param accessMap
|
||||
*/
|
||||
function hasSomePermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.some((access) => !!rolesList[access])
|
||||
}
|
||||
throw new Error(`[hasSomePermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
return { hasPermission, hasEveryPermission, hasSomePermission };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user