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 };
|