tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 优化布局组织结构和提升代码可读性

Browse Source
This commit is contained in:
Ray.Hao
2025-09-15 13:27:25 +08:00
parent 474c0e9c35
commit bf8e379616
11 changed files with 112 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/composables/index.ts
View File

@@ -4,4 +4,4 @@ export { useOnlineCount } from "./websocket/useOnlineCount";
export { useLayout } from "./layout/useLayout";
export { useLayoutMenu } from "./layout/useLayoutMenu";
export { useLayoutResponsive } from "./layout/useLayoutResponsive";
export { useDeviceDetection } from "./layout/useDeviceDetection";

4
src/composables/layout/useDeviceDetection.ts
View File

@@ -4,10 +4,10 @@ import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/settings/device.enum";
/**
* 响应式布局处理
* 设备检测和响应式处理
* 监听屏幕尺寸变化，自动调整设备类型和侧边栏状态
*/
export function useLayoutResponsive() {
export function useDeviceDetection() {
const appStore = useAppStore();
const { width } = useWindowSize();

53
src/layouts/index.vue
View File

@@ -1,36 +1,47 @@
<template>
<div class="layout" :class="layoutClass">
<!-- 移动端遮罩层 -->
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
<div class="layout-wrapper">
<component :is="currentLayoutComponent" />
<!-- 布局内容插槽 -->
<slot></slot>
<!-- 设置面板 - 独立于布局组件 -->
<Settings v-if="isShowSettings" />
</div>
</template>
<script setup lang="ts">
import { useLayout, useLayoutResponsive } from "@/composables";
import { useRoute } from "vue-router";
import { useLayout } from "@/composables/layout/useLayout";
import LeftLayout from "@/layouts/modes/left/index.vue";
import TopLayout from "@/layouts/modes/top/index.vue";
import MixLayout from "@/layouts/modes/mix/index.vue";
import Settings from "./components/Settings/index.vue";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { defaultSettings } from "@/settings";
// 布局相关
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
const { currentLayout } = useLayout();
const route = useRoute();
// 响应式布局
const { isMobile } = useLayoutResponsive();
/// Select the corresponding component based on the current layout mode
const currentLayoutComponent = computed(() => {
const override = route.meta?.layout as LayoutMode | undefined;
const layoutToUse = override ?? currentLayout.value;
switch (layoutToUse) {
case LayoutMode.TOP:
return TopLayout;
case LayoutMode.MIX:
return MixLayout;
case LayoutMode.LEFT:
default:
return LeftLayout;
}
});
/// Whether to show the settings panel
const isShowSettings = computed(() => defaultSettings.showSettings);
</script>
<style lang="scss" scoped>
.layout {
.layout-wrapper {
width: 100%;
height: 100%;
&__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
}
</style>

36
src/layouts/modes/BaseLayout.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="layout" :class="layoutClass">
<!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
<!-- 布局内容插槽 - 各种布局模式的具体内容 -->
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { useLayout, useLayoutResponsive } from "@/composables";
/// Layout-related functionality and state management
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
/// Responsive layout handling for mobile devices
const { isMobile } = useLayoutResponsive();
</script>
<style lang="scss" scoped>
.layout {
width: 100%;
height: 100%;
&__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
}
</style>

36
src/layouts/modes/base/index.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="layout" :class="layoutClass">
<!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
<div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
<!-- 布局内容插槽 - 各种布局模式的具体内容 -->
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { useLayout, useDeviceDetection } from "@/composables";
/// Layout-related functionality and state management
const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
/// Device detection for responsive layout
const { isMobile } = useDeviceDetection();
</script>
<style lang="scss" scoped>
.layout {
width: 100%;
height: 100%;
&__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
}
</style>

47
src/layouts/modes/index.vue
View File

@@ -1,47 +0,0 @@
<template>
<div class="layout-wrapper">
<component :is="currentLayoutComponent" />
<!-- 设置面板 - 独立于布局组件 -->
<Settings v-if="isShowSettings" />
</div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { useLayout } from "@/composables/layout/useLayout";
import LeftLayout from "@/layouts/modes/left/index.vue";
import TopLayout from "@/layouts/modes/top/index.vue";
import MixLayout from "@/layouts/modes/mix/index.vue";
import Settings from "../components/Settings/index.vue";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { defaultSettings } from "@/settings";
const { currentLayout } = useLayout();
const route = useRoute();
// 根据当前布局模式选择对应的组件
const currentLayoutComponent = computed(() => {
const override = route.meta?.layout as LayoutMode | undefined;
const layoutToUse = override ?? currentLayout.value;
switch (layoutToUse) {
case LayoutMode.TOP:
return TopLayout;
case LayoutMode.MIX:
return MixLayout;
case LayoutMode.LEFT:
default:
return LeftLayout;
}
});
// 是否显示设置面板
const isShowSettings = computed(() => defaultSettings.showSettings);
</script>
<style lang="scss" scoped>
.layout-wrapper {
width: 100%;
height: 100%;
}
</style>

2
src/layouts/modes/left/index.vue
View File

@@ -30,7 +30,7 @@
<script setup lang="ts">
import { useLayout } from "@/composables/layout/useLayout";
import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
import BaseLayout from "@/layouts/index.vue";
import BaseLayout from "../base/index.vue";
import AppLogo from "../../components/AppLogo/index.vue";
import NavBar from "../../components/NavBar/index.vue";
import TagsView from "../../components/TagsView/index.vue";

3
src/layouts/modes/mix/index.vue
View File

@@ -58,11 +58,10 @@
</template>
<script setup lang="ts">
import { computed, watch } from "vue";
import { useRoute } from "vue-router";
import { useWindowSize } from "@vueuse/core";
import { useLayout, useLayoutMenu } from "@/composables";
import BaseLayout from "@/layouts/index.vue";
import BaseLayout from "../base/index.vue";
import AppLogo from "../../components/AppLogo/index.vue";
import MixTopMenu from "../../components/Menu/MixTopMenu.vue";
import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";

2
src/layouts/modes/top/index.vue
View File

@@ -25,7 +25,7 @@
<script setup lang="ts">
import { useLayout } from "@/composables/layout/useLayout";
import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
import BaseLayout from "@/layouts/index.vue";
import BaseLayout from "../base/index.vue";
import AppLogo from "../../components/AppLogo/index.vue";
import BasicMenu from "../../components/Menu/BasicMenu.vue";
import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";

2
src/router/index.ts
View File

@@ -1,7 +1,7 @@
import type { App } from "vue";
import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
export const Layout = () => import("@/layouts/modes/index.vue");
export const Layout = () => import("@/layouts/index.vue");
// 静态路由
export const constantRoutes: RouteRecordRaw[] = [

2
src/store/modules/permission-store.ts
View File

@@ -5,7 +5,7 @@ import router from "@/router";
import MenuAPI, { type RouteVO } from "@/api/system/menu-api";
const modules = import.meta.glob("../../views/**/**.vue");
const Layout = () => import("@/layouts/modes/index.vue");
const Layout = () => import("@/layouts/index.vue");
export const usePermissionStore = defineStore("permission", () => {
// 所有路由（静态路由 + 动态路由）