108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import defaultSettings from "@/settings";
|
||
|
||
// 导入 Element Plus 中英文语言包
|
||
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||
import en from "element-plus/es/locale/lang/en";
|
||
import { store } from "@/store";
|
||
import { DeviceEnum } from "@/enums/DeviceEnum";
|
||
import { SidebarStatusEnum } from "@/enums/SidebarStatusEnum";
|
||
|
||
export const useAppStore = defineStore("app", () => {
|
||
// 设备类型
|
||
const device = useStorage("device", DeviceEnum.DESKTOP);
|
||
// 布局大小
|
||
const size = useStorage("size", defaultSettings.size);
|
||
// 语言
|
||
const language = useStorage("language", defaultSettings.language);
|
||
// 侧边栏状态
|
||
const sidebarStatus = useStorage("sidebarStatus", SidebarStatusEnum.CLOSED);
|
||
const sidebar = reactive({
|
||
opened: sidebarStatus.value === SidebarStatusEnum.OPENED,
|
||
withoutAnimation: false,
|
||
});
|
||
|
||
// 顶部菜单激活路径
|
||
const activeTopMenuPath = useStorage("activeTopMenuPath", "");
|
||
|
||
/**
|
||
* 根据语言标识读取对应的语言包
|
||
*/
|
||
const locale = computed(() => {
|
||
if (language?.value == "en") {
|
||
return en;
|
||
} else {
|
||
return zhCn;
|
||
}
|
||
});
|
||
|
||
// 切换侧边栏
|
||
function toggleSidebar() {
|
||
sidebar.opened = !sidebar.opened;
|
||
sidebarStatus.value = sidebar.opened ? SidebarStatusEnum.OPENED : SidebarStatusEnum.CLOSED;
|
||
}
|
||
|
||
// 关闭侧边栏
|
||
function closeSideBar() {
|
||
sidebar.opened = false;
|
||
sidebarStatus.value = SidebarStatusEnum.CLOSED;
|
||
}
|
||
|
||
// 打开侧边栏
|
||
function openSideBar() {
|
||
sidebar.opened = true;
|
||
sidebarStatus.value = SidebarStatusEnum.OPENED;
|
||
}
|
||
|
||
// 切换设备
|
||
function toggleDevice(val: string) {
|
||
device.value = val;
|
||
}
|
||
|
||
/**
|
||
* 改变布局大小
|
||
*
|
||
* @param val 布局大小 default | small | large
|
||
*/
|
||
function changeSize(val: string) {
|
||
size.value = val;
|
||
}
|
||
/**
|
||
* 切换语言
|
||
*
|
||
* @param val
|
||
*/
|
||
function changeLanguage(val: string) {
|
||
language.value = val;
|
||
}
|
||
/**
|
||
* 混合模式顶部切换
|
||
*/
|
||
function activeTopMenu(val: string) {
|
||
activeTopMenuPath.value = val;
|
||
}
|
||
return {
|
||
device,
|
||
sidebar,
|
||
language,
|
||
locale,
|
||
size,
|
||
activeTopMenu,
|
||
toggleDevice,
|
||
changeSize,
|
||
changeLanguage,
|
||
toggleSidebar,
|
||
closeSideBar,
|
||
openSideBar,
|
||
activeTopMenuPath,
|
||
};
|
||
});
|
||
|
||
/**
|
||
* 用于在组件外部（如在Pinia Store 中）使用 Pinia 提供的 store 实例。
|
||
* 官方文档解释了如何在组件外部使用 Pinia Store：
|
||
* https://pinia.vuejs.org/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
|
||
*/
|
||
export function useAppStoreHook() {
|
||
return useAppStore(store);
|
||
}
|