first commiit

src/store/modules/app.ts

@@ -0,0 +1,107 @@
+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);
+}