Skip to content

Commit bf8e379

Browse files
haoxianruihaoxianrui
committed
refactor: ♻️ 优化布局组织结构和提升代码可读性
1 parent 474c0e9 commit bf8e379

File tree

11 files changed

+112
-77
lines changed

11 files changed

+112
-77
lines changed

‎src/composables/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ export { useOnlineCount } from "./websocket/useOnlineCount";
44

55
export { useLayout } from "./layout/useLayout";
66
export { useLayoutMenu } from "./layout/useLayoutMenu";
7-
export { useLayoutResponsive } from "./layout/useLayoutResponsive";
7+
export { useDeviceDetection } from "./layout/useDeviceDetection";

‎src/composables/layout/useDeviceDetection.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { useAppStore } from "@/store";
44
import { DeviceEnum } from "@/enums/settings/device.enum";
55

66
/**
7-
* 响应式布局处理
7+
* 设备检测和响应式处理
88
* 监听屏幕尺寸变化，自动调整设备类型和侧边栏状态
99
*/
10-
export function useLayoutResponsive() {
10+
export function useDeviceDetection() {
1111
const appStore = useAppStore();
1212
const { width } = useWindowSize();
1313

‎src/layouts/index.vue‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
11
<template>
2-
<div class="layout" :class="layoutClass">
3-
<!-- 移动端遮罩层 -->
4-
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
2+
<div class="layout-wrapper">
3+
<component :is="currentLayoutComponent" />
54

6-
<!-- 布局内容插槽 -->
7-
<slot></slot>
5+
<!-- 设置面板 - 独立于布局组件 -->
6+
<Settings v-if="isShowSettings" />
87
</div>
98
</template>
109

1110
<script setup lang="ts">
12-
import { useLayout, useLayoutResponsive } from "@/composables";
11+
import { useRoute } from "vue-router";
12+
import { useLayout } from "@/composables/layout/useLayout";
13+
import LeftLayout from "@/layouts/modes/left/index.vue";
14+
import TopLayout from "@/layouts/modes/top/index.vue";
15+
import MixLayout from "@/layouts/modes/mix/index.vue";
16+
import Settings from "./components/Settings/index.vue";
17+
import { LayoutMode } from "@/enums/settings/layout.enum";
18+
import { defaultSettings } from "@/settings";
1319
14-
// 布局相关
15-
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
20+
const { currentLayout } = useLayout();
21+
const route = useRoute();
1622
17-
// 响应式布局
18-
const { isMobile } = useLayoutResponsive();
23+
/// Select the corresponding component based on the current layout mode
24+
const currentLayoutComponent = computed(() => {
25+
const override = route.meta?.layout as LayoutMode | undefined;
26+
const layoutToUse = override ?? currentLayout.value;
27+
switch (layoutToUse) {
28+
case LayoutMode.TOP:
29+
return TopLayout;
30+
case LayoutMode.MIX:
31+
return MixLayout;
32+
case LayoutMode.LEFT:
33+
default:
34+
return LeftLayout;
35+
}
36+
});
37+
38+
/// Whether to show the settings panel
39+
const isShowSettings = computed(() => defaultSettings.showSettings);
1940
</script>
2041

2142
<style lang="scss" scoped>
22-
.layout {
43+
.layout-wrapper {
2344
width: 100%;
2445
height: 100%;
25-
26-
&__overlay {
27-
position: fixed;
28-
top: 0;
29-
left: 0;
30-
z-index: 999;
31-
width: 100%;
32-
height: 100%;
33-
background-color: rgba(0, 0, 0, 0.3);
34-
}
3546
}
3647
</style>

‎src/layouts/modes/BaseLayout.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="layout" :class="layoutClass">
3+
<!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
4+
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
5+
6+
<!-- 布局内容插槽 - 各种布局模式的具体内容 -->
7+
<slot></slot>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import { useLayout, useLayoutResponsive } from "@/composables";
13+
14+
/// Layout-related functionality and state management
15+
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
16+
17+
/// Responsive layout handling for mobile devices
18+
const { isMobile } = useLayoutResponsive();
19+
</script>
20+
21+
<style lang="scss" scoped>
22+
.layout {
23+
width: 100%;
24+
height: 100%;
25+
26+
&__overlay {
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
z-index: 999;
31+
width: 100%;
32+
height: 100%;
33+
background-color: rgba(0, 0, 0, 0.3);
34+
}
35+
}
36+
</style>

‎src/layouts/modes/base/index.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="layout" :class="layoutClass">
3+
<!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
4+
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
5+
6+
<!-- 布局内容插槽 - 各种布局模式的具体内容 -->
7+
<slot></slot>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import { useLayout, useDeviceDetection } from "@/composables";
13+
14+
/// Layout-related functionality and state management
15+
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
16+
17+
/// Device detection for responsive layout
18+
const { isMobile } = useDeviceDetection();
19+
</script>
20+
21+
<style lang="scss" scoped>
22+
.layout {
23+
width: 100%;
24+
height: 100%;
25+
26+
&__overlay {
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
z-index: 999;
31+
width: 100%;
32+
height: 100%;
33+
background-color: rgba(0, 0, 0, 0.3);
34+
}
35+
}
36+
</style>

‎src/layouts/modes/index.vue‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎src/layouts/modes/left/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<script setup lang="ts">
3131
import { useLayout } from "@/composables/layout/useLayout";
3232
import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
33-
import BaseLayout from "@/layouts/index.vue";
33+
import BaseLayout from "../base/index.vue";
3434
import AppLogo from "../../components/AppLogo/index.vue";
3535
import NavBar from "../../components/NavBar/index.vue";
3636
import TagsView from "../../components/TagsView/index.vue";

‎src/layouts/modes/mix/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,10 @@
5858
</template>
5959

6060
<script setup lang="ts">
61-
import { computed, watch } from "vue";
6261
import { useRoute } from "vue-router";
6362
import { useWindowSize } from "@vueuse/core";
6463
import { useLayout, useLayoutMenu } from "@/composables";
65-
import BaseLayout from "@/layouts/index.vue";
64+
import BaseLayout from "../base/index.vue";
6665
import AppLogo from "../../components/AppLogo/index.vue";
6766
import MixTopMenu from "../../components/Menu/MixTopMenu.vue";
6867
import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";

‎src/layouts/modes/top/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script setup lang="ts">
2626
import { useLayout } from "@/composables/layout/useLayout";
2727
import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
28-
import BaseLayout from "@/layouts/index.vue";
28+
import BaseLayout from "../base/index.vue";
2929
import AppLogo from "../../components/AppLogo/index.vue";
3030
import BasicMenu from "../../components/Menu/BasicMenu.vue";
3131
import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";

‎src/router/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { App } from "vue";
22
import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
33

4-
export const Layout = () => import("@/layouts/modes/index.vue");
4+
export const Layout = () => import("@/layouts/index.vue");
55

66
// 静态路由
77
export const constantRoutes: RouteRecordRaw[] = [

0 commit comments

Comments
 (0)