120 lines
2.7 KiB
TypeScript
120 lines
2.7 KiB
TypeScript
import { diff } from '@vben-core/toolkit';
|
||
|
||
import { computed } from 'vue';
|
||
|
||
import {
|
||
initialPreference,
|
||
isDarkTheme,
|
||
currentPreference as preference,
|
||
} from './preference';
|
||
|
||
function usePreference() {
|
||
/**
|
||
* @zh_CN 计算偏好设置的变化
|
||
*/
|
||
const diffPreference = computed(() => {
|
||
return diff(initialPreference.value, preference);
|
||
});
|
||
|
||
/**
|
||
* @zh_CN 判断是否为暗黑模式
|
||
* @param preference - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
|
||
* @returns 如果主题为暗黑模式，返回 true，否则返回 false。
|
||
*/
|
||
const isDark = computed(() => {
|
||
const theme = preference.theme;
|
||
return isDarkTheme(theme);
|
||
});
|
||
|
||
const theme = computed(() => {
|
||
return isDark.value ? 'dark' : 'light';
|
||
});
|
||
|
||
/**
|
||
* @zh_CN 布局方式
|
||
*/
|
||
const layout = computed(() =>
|
||
preference.isMobile ? 'side-nav' : preference.layout,
|
||
);
|
||
|
||
/**
|
||
* @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
|
||
*/
|
||
const isFullContent = computed(() => preference.layout === 'full-content');
|
||
|
||
/**
|
||
* @zh_CN 是否侧边导航模式
|
||
*/
|
||
const isSideNav = computed(() => preference.layout === 'side-nav');
|
||
|
||
/**
|
||
* @zh_CN 是否侧边混合模式
|
||
*/
|
||
const isSideMixedNav = computed(() => preference.layout === 'side-mixed-nav');
|
||
|
||
/**
|
||
* @zh_CN 是否为头部导航模式
|
||
*/
|
||
const isHeaderNav = computed(() => preference.layout === 'header-nav');
|
||
|
||
/**
|
||
* @zh_CN 是否为混合导航模式
|
||
*/
|
||
const isMixedNav = computed(() => preference.layout === 'mixed-nav');
|
||
|
||
/**
|
||
* @zh_CN 是否包含侧边导航模式
|
||
*/
|
||
const isSideMode = computed(() => {
|
||
return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
|
||
});
|
||
|
||
/**
|
||
* @zh_CN 是否开启keep-alive
|
||
* 在tabs可见以及开启keep-alive的情况下才开启
|
||
*/
|
||
const keepAlive = computed(
|
||
() => preference.keepAlive && preference.tabsVisible,
|
||
);
|
||
|
||
/**
|
||
* @zh_CN 登录注册页面布局是否为左侧
|
||
*/
|
||
const authPanelLeft = computed(() => {
|
||
return preference.authPageLayout === 'panel-left';
|
||
});
|
||
|
||
/**
|
||
* @zh_CN 登录注册页面布局是否为左侧
|
||
*/
|
||
const authPanelRight = computed(() => {
|
||
return preference.authPageLayout === 'panel-right';
|
||
});
|
||
|
||
/**
|
||
* @zh_CN 登录注册页面布局是否为中间
|
||
*/
|
||
const authPanelCenter = computed(() => {
|
||
return preference.authPageLayout === 'panel-center';
|
||
});
|
||
|
||
return {
|
||
authPanelCenter,
|
||
authPanelLeft,
|
||
authPanelRight,
|
||
diffPreference,
|
||
isDark,
|
||
isFullContent,
|
||
isHeaderNav,
|
||
isMixedNav,
|
||
isSideMixedNav,
|
||
isSideMode,
|
||
isSideNav,
|
||
keepAlive,
|
||
layout,
|
||
theme,
|
||
};
|
||
}
|
||
|
||
export { usePreference };
|