wip: 临时提交

src/layouts/composables/useLayout.ts

@@ -0,0 +1,66 @@
+import { computed, watchEffect } from "vue";
+import { useAppStore, useSettingsStore } from "@/store";
+import defaultSettings from "@/settings";
+
+/**
+ * 布局相关的通用逻辑
+ */
+export function useLayout() {
+  const appStore = useAppStore();
+  const settingsStore = useSettingsStore();
+
+  // 计算当前布局模式
+  const currentLayout = computed(() => settingsStore.layout);
+
+  // 侧边栏展开状态
+  const isSidebarOpen = computed(() => appStore.sidebar.opened);
+
+  // 是否显示标签视图
+  const isShowTagsView = computed(() => settingsStore.tagsView);
+
+  // 是否显示设置面板
+  const isShowSettings = computed(() => defaultSettings.showSettings);
+
+  // 是否显示Logo
+  const isShowLogo = computed(() => settingsStore.sidebarLogo);
+
+  // 布局CSS类
+  const layoutClass = computed(() => ({
+    hideSidebar: !appStore.sidebar.opened,
+    openSidebar: appStore.sidebar.opened,
+    mobile: appStore.device === "mobile",
+    [`layout-${settingsStore.layout}`]: true,
+  }));
+
+  /**
+   * 处理切换侧边栏的展开/收起状态
+   */
+  function toggleSidebar() {
+    appStore.toggleSidebar();
+  }
+
+  /**
+   * 关闭侧边栏（移动端）
+   */
+  function closeSidebar() {
+    appStore.closeSideBar();
+  }
+
+  // 监听路由变化，在移动端自动关闭侧边栏
+  watchEffect(() => {
+    if (appStore.device === "mobile" && appStore.sidebar.opened) {
+      appStore.closeSideBar();
+    }
+  });
+
+  return {
+    currentLayout,
+    isSidebarOpen,
+    isShowTagsView,
+    isShowSettings,
+    isShowLogo,
+    layoutClass,
+    toggleSidebar,
+    closeSidebar,
+  };
+}