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

wip: 布局重构

Browse Source
This commit is contained in:
Ray.Hao
2025-05-23 14:46:41 +08:00
parent 3008b68234
commit 51f9b298c6
16 changed files with 247 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/layouts/README.md
View File

@@ -1,34 +1,71 @@
# 布局系统 # 布局系统
本项目的布局系统采用模块化、可组合式API的架构，支持三种不同的布局模式:
1. **左侧菜单布局 (LeftSideLayout)**: 传统的管理系统布局，左侧为菜单栏，顶部为导航栏
2. **顶部菜单布局 (TopMenuLayout)**: 顶部为主菜单栏，适合菜单项较少的应用
3. **混合菜单布局 (MixMenuLayout)**: 顶部为一级菜单，左侧为对应的子菜单，适合菜单层级较多的复杂应用
## 目录结构 ## 目录结构
``` ```
layouts/ layouts/
├── README.md # 文档说明 ├── index.vue # 布局系统入口，根据设置动态加载布局
├── index.vue # 布局入口，根据设置选择对应的布局组件 ├── BaseLayout.vue # 基础布局容器，提供通用功能
├── composables/ # 可组合式API ├── LeftLayout.vue # 左侧菜单布局
│ ├── useLayout.ts # 布局通用逻辑 ├── TopLayout.vue # 顶部菜单布局
│ ├── useLayoutResponsive.ts # 响应式布局逻辑 ├── MixLayout.vue # 混合布局（顶部+左侧）
│ └── useLayoutMenu.ts # 菜单处理逻辑 ├── components/ # 布局相关组件
└── components/ # 布局组件 │ ├── AppMain.vue # 主内容区域
├── LayoutBase.vue # 基础布局组件 │ ├── NavBar.vue # 导航栏
├── SidebarMenu.vue # 菜单组件 │ ├── NavbarActions.vue # 导航栏右侧操作区
├── common/ # 公共组件 │ ├── TagsView.vue # 标签页视图
│ └── LayoutSidebar.vue # 侧边栏公共组件 │ ├── LayoutMenu.vue # 菜单组件
├── LeftSideLayout/ # 左侧菜单布局 │ ├── Sidebar/ # 侧边栏相关组件
│ └── index.vue │ │ ├── SidebarLogo.vue # Logo 组件
├── TopMenuLayout/ # 顶部菜单布局 │ │ ├── SidebarMenu.vue # 菜单主体（未使用）
│ └── index.vue │ │ ├── SidebarMenuItem.vue # 菜单项
└── MixMenuLayout/ # 混合菜单布局 │ │ ├── SidebarMenuItemTitle.vue # 菜单项标题
└── index.vue │ │ └── SidebarMixTopMenu.vue # 混合布局顶部菜单
│ ├── Settings/ # 设置面板
│ │ └── index.vue # 设置面板主组件（包含布局选择）
│ └── common/ # 通用组件
│ └── LayoutSidebar.vue # 侧边栏容器
└── composables/ # 组合式函数
├── useLayout.ts # 布局相关逻辑
├── useLayoutMenu.ts # 菜单相关逻辑
└── useLayoutResponsive.ts # 响应式处理
``` ```
## 布局说明
### 1. LeftLayout（左侧布局）
- 传统的左侧固定菜单布局
- 支持菜单折叠/展开
- 适合大多数管理系统
### 2. TopLayout（顶部布局）
- 菜单位于顶部横向排列
- 适合一级菜单较少的系统
- 节省横向空间
### 3. MixLayout（混合布局）
- 一级菜单在顶部，二级菜单在左侧
- 适合菜单层级较多的大型系统
- 提供更好的菜单组织方式
## 使用方式
布局系统会根据 `settings store` 中的 `layout` 配置自动切换：
```typescript
// 在设置面板中切换布局
// 或通过代码：
settingsStore.layout = LayoutMode.LEFT; // 'left' | 'top' | 'mix'
```
## 自定义布局
如需添加新布局：
1. 在 `layouts/` 目录下创建新的布局组件（如 `CustomLayout.vue`）
2. 在 `index.vue` 中导入并添加到切换逻辑
3. 在 `enums/settings/layout.enum.ts` 中添加新的布局类型
## 主要功能 ## 主要功能
1. **响应式适配**: 自动适配桌面端和移动端，移动端下自动收起侧边栏 1. **响应式适配**: 自动适配桌面端和移动端，移动端下自动收起侧边栏

0
src/layouts/components/AppMain/index.vue → src/layouts/components/AppMain.vue
View File

133
src/layouts/components/Settings/index.vue → src/layouts/components/Settings.vue
View File

@@ -61,7 +61,31 @@
<!-- 布局设置 --> <!-- 布局设置 -->
<section class="config-section"> <section class="config-section">
<el-divider>{{ t("settings.navigation") }}</el-divider> <el-divider>{{ t("settings.navigation") }}</el-divider>
<LayoutSelect v-model="settingsStore.layout" @update:model-value="handleLayoutChange" />
<!-- 整合的布局选择器 -->
<div class="layout-select">
<el-tooltip
v-for="item in layoutOptions"
:key="item.value"
:content="item.label"
placement="bottom"
>
<div
role="button"
tabindex="0"
:class="[
'layout-item',
item.className,
{ 'is-active': settingsStore.layout === item.value },
]"
@click="handleLayoutChange(item.value)"
@keydown.enter.space="handleLayoutChange(item.value)"
>
<div class="layout-item-part" />
<div class="layout-item-part" />
</div>
</el-tooltip>
</div>
</section> </section>
</el-drawer> </el-drawer>
</template> </template>
@@ -72,6 +96,20 @@ import { LayoutMode } from "@/enums/settings/layout.enum";
import { ThemeMode } from "@/enums/settings/theme.enum"; import { ThemeMode } from "@/enums/settings/theme.enum";
import { SidebarColor } from "@/enums/settings/theme.enum"; import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store"; import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
// 布局选项配置
interface LayoutOption {
value: LayoutMode;
label: string;
className: string;
}
const layoutOptions: LayoutOption[] = [
{ value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
{ value: LayoutMode.TOP, label: "顶部模式", className: "top" },
{ value: LayoutMode.MIX, label: "混合模式", className: "mix" },
];
// 颜色预设 // 颜色预设
const colorPresets = [ const colorPresets = [
"#4080FF", "#4080FF",
@@ -190,4 +228,97 @@ const handleCloseDrawer = () => {
} }
} }
} }
/* 布局选择器样式 */
.layout-select {
display: flex;
gap: 10px;
justify-content: space-evenly;
padding: 10px 0;
--layout-primary: #1b2a47;
--layout-background: #f0f2f5;
--layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
--layout-hover: #e3f1f9;
}
.layout-item {
position: relative;
width: 18%;
height: 50px;
cursor: pointer;
background: var(--layout-background);
border-radius: 8px;
box-shadow: var(--layout-shadow);
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
&:hover {
background-color: var(--layout-hover);
transform: scale(1.02);
}
&:focus-visible {
outline: 2px solid var(--el-color-primary);
}
&-part {
position: absolute;
background: var(--layout-primary);
border-radius: 4px;
box-shadow: var(--layout-shadow);
transition: all 0.3s ease;
}
&.left {
.layout-item-part {
&:first-child {
width: 30%;
height: 100%;
border-radius: 4px 0 0 4px;
}
&:last-child {
top: 0;
right: 0;
width: 70%;
height: 30%;
background: #fff;
border-radius: 0 4px 4px 0;
}
}
}
&.top {
.layout-item-part:first-child {
width: 100%;
height: 30%;
border-radius: 4px 4px 0 0;
}
}
&.mix {
.layout-item-part {
&:first-child {
width: 100%;
height: 30%;
border-radius: 4px 4px 0 0;
}
&:last-child {
bottom: 0;
left: 0;
width: 30%;
height: 70%;
border-radius: 0 0 4px 4px;
}
}
}
}
.is-active {
background-color: var(--layout-hover);
border: 2px solid var(--el-color-primary);
transform: scale(1.05);
}
</style> </style>

140
src/layouts/components/Settings/components/LayoutSelect.vue
View File

@@ -1,140 +0,0 @@
<template>
<div class="layout-select">
<el-tooltip
v-for="item in layoutOptions"
:key="item.value"
:content="item.label"
placement="bottom"
>
<div
role="button"
tabindex="0"
:class="['layout-item', item.className, { 'is-active': modelValue === item.value }]"
@click="handleLayoutChange(item.value)"
@keydown.enter.space="handleLayoutChange(item.value)"
>
<div class="layout-item-part" />
<div class="layout-item-part" />
</div>
</el-tooltip>
</div>
</template>
<script lang="ts" setup>
import { LayoutMode } from "@/enums/settings/layout.enum";
interface LayoutOption {
value: LayoutMode;
label: string;
className: string;
}
const layoutOptions: LayoutOption[] = [
{ value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
{ value: LayoutMode.TOP, label: "顶部模式", className: "top" },
{ value: LayoutMode.MIX, label: "混合模式", className: "mix" },
];
const modelValue = defineModel<LayoutMode>("modelValue", {
required: true,
default: () => LayoutMode.LEFT,
});
function handleLayoutChange(layout: LayoutMode) {
modelValue.value = layout;
}
</script>
<style scoped lang="scss">
.layout-select {
display: flex;
gap: 10px;
justify-content: space-evenly;
padding: 10px 0;
--layout-primary: #1b2a47;
--layout-background: #f0f2f5;
--layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
--layout-hover: #e3f1f9;
}
.layout-item {
position: relative;
width: 18%;
height: 50px;
cursor: pointer;
background: var(--layout-background);
border-radius: 8px;
box-shadow: var(--layout-shadow);
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
&:hover {
background-color: var(--layout-hover);
transform: scale(1.02); /* 稍微放大，避免过于夸张 */
}
&:focus-visible {
outline: 2px solid var(--el-color-primary);
}
&-part {
position: absolute;
background: var(--layout-primary);
border-radius: 4px; /* 保持和父容器一致的圆角 */
box-shadow: var(--layout-shadow);
transition: all 0.3s ease;
}
&.left {
.layout-item-part {
&:first-child {
width: 30%;
height: 100%;
border-radius: 4px 0 0 4px; /* 左边部分圆角 */
}
&:last-child {
top: 0;
right: 0;
width: 70%;
height: 30%;
background: #fff;
border-radius: 0 4px 4px 0; /* 右边部分圆角 */
}
}
}
&.top {
.layout-item-part:first-child {
width: 100%;
height: 30%;
border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
}
}
&.mix {
.layout-item-part {
&:first-child {
width: 100%;
height: 30%;
border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
}
&:last-child {
bottom: 0;
left: 0;
width: 30%;
height: 70%;
border-radius: 0 0 4px 4px; /* 底部部分圆角 */
}
}
}
}
.is-active {
background-color: var(--layout-hover);
border: 2px solid var(--el-color-primary);
transform: scale(1.05); /* 轻微放大 */
}
</style>

132
src/layouts/components/Sidebar/components/SidebarMenu.vue
View File

@@ -1,132 +0,0 @@
<!-- 菜单组件 -->
<template>
<el-menu
ref="menuRef"
:default-active="currentRoute.path"
:collapse="!appStore.sidebar.opened"
:background-color="
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-background']
: undefined
"
:text-color="
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-text']
: undefined
"
:active-text-color="
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-active-text']
: undefined
"
:popper-effect="theme"
:unique-opened="false"
:collapse-transition="false"
:mode="menuMode"
@open="onMenuOpen"
@close="onMenuClose"
>
<!-- 菜单项 -->
<SidebarMenuItem
v-for="route in data"
:key="route.path"
:item="route"
:base-path="resolveFullPath(route.path)"
/>
</el-menu>
</template>
<script lang="ts" setup>
import path from "path-browserify";
import type { MenuInstance } from "element-plus";
import type { RouteRecordRaw } from "vue-router";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, useAppStore } from "@/store";
import { isExternal } from "@/utils/index";
import variables from "@/styles/variables.module.scss";
const props = defineProps({
data: {
type: Array<RouteRecordRaw>,
default: () => [],
},
basePath: {
type: String,
required: true,
example: "/system",
},
});
const menuRef = ref<MenuInstance>();
const settingsStore = useSettingsStore();
const appStore = useAppStore();
const currentRoute = useRoute();
// 存储已展开的菜单项索引
const expandedMenuIndexes = ref<string[]>([]);
// 根据布局模式设置菜单的显示方式：顶部布局使用水平模式，其他使用垂直模式
const menuMode = computed(() => {
return settingsStore.layout === LayoutMode.TOP ? "horizontal" : "vertical";
});
// 获取主题
const theme = computed(() => settingsStore.theme);
// 获取浅色主题下的侧边栏配色方案
const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
/**
* 获取完整路径
*
* @param routePath 当前路由的相对路径 /user
* @returns 完整的绝对路径 D://vue3-element-admin/system/user
*/
function resolveFullPath(routePath: string) {
if (isExternal(routePath)) {
return routePath;
}
if (isExternal(props.basePath)) {
return props.basePath;
}
// 解析路径，生成完整的绝对路径
return path.resolve(props.basePath, routePath);
}
/**
* 打开菜单
*
* @param index 当前展开的菜单项索引
*/
const onMenuOpen = (index: string) => {
expandedMenuIndexes.value.push(index);
};
/**
* 关闭菜单
*
* @param index 当前收起的菜单项索引
*/
const onMenuClose = (index: string) => {
expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
};
/**
* 监听菜单模式变化：当菜单模式切换为水平模式时，关闭所有展开的菜单项，
* 避免在水平模式下菜单项显示错位。
*
* @see https://gitee.com/youlaiorg/vue3-element-admin/issues/IAJ1DR
*/
watch(
() => menuMode.value,
() => {
if (menuMode.value === "horizontal") {
expandedMenuIndexes.value.forEach((item) => menuRef.value!.close(item));
}
}
);
</script>

2
src/layouts/components/common/LayoutSidebar.vue → src/layouts/components/Sidebar/index.vue
View File

@@ -8,6 +8,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import SidebarLogo from "./components/SidebarLogo.vue";
defineProps({ defineProps({
/** /**
* 是否显示Logo * 是否显示Logo

0
src/layouts/components/TagsView/index.vue → src/layouts/components/TagsView.vue
View File

10
src/layouts/components/Sidebar/components/SidebarMenuItem.vue → src/layouts/components/menu/components/MenuItem.vue
View File

@@ -22,7 +22,7 @@
:index="resolvePath(onlyOneChild.path)" :index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }" :class="{ 'submenu-title-noDropdown': !isNest }"
> >
<SidebarMenuItemTitle <MenuItemTitle
:icon="onlyOneChild.meta.icon || item.meta?.icon" :icon="onlyOneChild.meta.icon || item.meta?.icon"
:title="onlyOneChild.meta.title" :title="onlyOneChild.meta.title"
/> />
@@ -33,10 +33,10 @@
<!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 --> <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
<el-sub-menu v-else :index="resolvePath(item.path)" teleported> <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
<template #title> <template #title>
<SidebarMenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" /> <MenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template> </template>
<SidebarMenuItem <MenuItem
v-for="child in item.children" v-for="child in item.children"
:key="child.path" :key="child.path"
:is-nest="true" :is-nest="true"
@@ -48,8 +48,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MenuItemTitle from "./MenuItemTitle.vue";
defineOptions({ defineOptions({
name: "SidebarMenuItem", name: "MenuItem",
inheritAttrs: false, inheritAttrs: false,
}); });

0
src/layouts/components/Sidebar/components/SidebarMenuItemTitle.vue → src/layouts/components/menu/components/MenuItemTitle.vue
View File

25
src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue → src/layouts/components/menu/components/MixTopMenu.vue
View File

@@ -2,7 +2,7 @@
<template> <template>
<el-menu <el-menu
mode="horizontal" mode="horizontal"
:default-active="activePath" :default-active="activeTopMenuPath"
:background-color=" :background-color="
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-background'] ? variables['menu-background']
@@ -21,26 +21,20 @@
@select="handleMenuSelect" @select="handleMenuSelect"
> >
<el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path"> <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
<template #title> <MenuItemTitle v-if="route.meta" :icon="route.meta.icon" :title="route.meta.title" />
<template v-if="route.meta && route.meta.icon">
<el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
<component :is="route.meta.icon.replace('el-icon-', '')" />
</el-icon>
<div v-else :class="`i-svg:${route.meta.icon}`" />
</template>
<span v-if="route.path === '/'">首页</span>
<span v-else-if="route.meta && route.meta.title" class="ml-1">
{{ translateRouteTitle(route.meta.title) }}
</span>
</template>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MenuItemTitle from "./MenuItemTitle.vue";
defineOptions({
name: "MixTopMenu",
});
import { LocationQueryRaw, RouteRecordRaw } from "vue-router"; import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
import { usePermissionStore, useAppStore, useSettingsStore } from "@/store"; import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
import { translateRouteTitle } from "@/utils/i18n";
import variables from "@/styles/variables.module.scss"; import variables from "@/styles/variables.module.scss";
import { SidebarColor } from "@/enums/settings/theme.enum"; import { SidebarColor } from "@/enums/settings/theme.enum";
@@ -49,9 +43,6 @@ const appStore = useAppStore();
const permissionStore = usePermissionStore(); const permissionStore = usePermissionStore();
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
// 当前激活的顶部菜单路径
const activePath = computed(() => appStore.activeTopMenuPath);
// 获取主题 // 获取主题
const theme = computed(() => settingsStore.theme); const theme = computed(() => settingsStore.theme);

4
src/layouts/components/LayoutMenu.vue → src/layouts/components/menu/index.vue
View File

@@ -27,7 +27,7 @@
@close="onMenuClose" @close="onMenuClose"
> >
<!-- 菜单项 --> <!-- 菜单项 -->
<SidebarMenuItem <MenuItem
v-for="route in data" v-for="route in data"
:key="route.path" :key="route.path"
:item="route" :item="route"
@@ -45,7 +45,7 @@ import type { RouteRecordRaw } from "vue-router";
import { SidebarColor } from "@/enums/settings/theme.enum"; import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, useAppStore } from "@/store"; import { useSettingsStore, useAppStore } from "@/store";
import { isExternal } from "@/utils/index"; import { isExternal } from "@/utils/index";
import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue"; import MenuItem from "./components/MenuItem.vue";
import variables from "@/styles/variables.module.scss"; import variables from "@/styles/variables.module.scss";
const props = defineProps({ const props = defineProps({

6
src/layouts/index.vue
View File

@@ -5,9 +5,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useLayout } from "./composables/useLayout"; import { useLayout } from "./composables/useLayout";
import LeftLayout from "./components/LeftLayout/index.vue"; import LeftLayout from "./views/LeftLayout.vue";
import TopLayout from "./components/TopLayout/index.vue"; import TopLayout from "./views/TopLayout.vue";
import MixLayout from "./components/MixLayout/index.vue"; import MixLayout from "./views/MixLayout.vue";
import { LayoutMode } from "@/enums/settings/layout.enum"; import { LayoutMode } from "@/enums/settings/layout.enum";
const { currentLayout } = useLayout(); const { currentLayout } = useLayout();

2
src/layouts/components/BaseLayout.vue → src/layouts/views/BaseLayout.vue
View File

@@ -19,7 +19,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useLayout } from "../composables/useLayout"; import { useLayout } from "../composables/useLayout";
import { useLayoutResponsive } from "../composables/useLayoutResponsive"; import { useLayoutResponsive } from "../composables/useLayoutResponsive";
import Settings from "@/layouts/components/Settings/index.vue"; import Settings from "../components/Settings.vue";
// 布局相关 // 布局相关
const { layoutClass, isShowSettings, isSidebarOpen, closeSidebar } = useLayout(); const { layoutClass, isShowSettings, isSidebarOpen, closeSidebar } = useLayout();

22
src/layouts/components/LeftLayout/index.vue → src/layouts/views/LeftLayout.vue
View File

@@ -2,11 +2,11 @@
<BaseLayout> <BaseLayout>
<!-- 左侧菜单栏 --> <!-- 左侧菜单栏 -->
<div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }"> <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
<LayoutSidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen"> <Sidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen">
<el-scrollbar> <el-scrollbar>
<SidebarMenu :data="routes" base-path="" /> <Menu :data="routes" base-path="" />
</el-scrollbar> </el-scrollbar>
</LayoutSidebar> </Sidebar>
</div> </div>
<!-- 主内容区 --> <!-- 主内容区 -->
@@ -25,14 +25,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useLayout } from "../../composables/useLayout"; import { useLayout } from "../composables/useLayout";
import { useLayoutMenu } from "../../composables/useLayoutMenu"; import { useLayoutMenu } from "../composables/useLayoutMenu";
import BaseLayout from "../BaseLayout.vue"; import BaseLayout from "./BaseLayout.vue";
import LayoutSidebar from "../common/LayoutSidebar.vue"; import Sidebar from "../components/Sidebar/index.vue";
import NavBar from "@/layouts/components/NavBar/index.vue"; import NavBar from "../components/navbar/index.vue";
import TagsView from "@/layouts/components/TagsView/index.vue"; import TagsView from "../components/TagsView.vue";
import AppMain from "@/layouts/components/AppMain/index.vue"; import AppMain from "../components/AppMain.vue";
import SidebarMenu from "../LayoutMenu.vue"; import Menu from "../components/menu/index.vue";
// 布局相关参数 // 布局相关参数
const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout(); const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();

22
src/layouts/components/MixLayout/index.vue → src/layouts/views/MixLayout.vue
View File

@@ -10,7 +10,7 @@
<!-- 顶部菜单区域 --> <!-- 顶部菜单区域 -->
<div class="layout__header-menu"> <div class="layout__header-menu">
<SidebarMixTopMenu /> <MixTopMenu />
</div> </div>
<!-- 右侧操作区域 --> <!-- 右侧操作区域 -->
@@ -34,7 +34,7 @@
:text-color="variables['menu-text']" :text-color="variables['menu-text']"
:active-text-color="variables['menu-active-text']" :active-text-color="variables['menu-active-text']"
> >
<SidebarMenuItem <MenuItem
v-for="route in sideMenuRoutes" v-for="route in sideMenuRoutes"
:key="route.path" :key="route.path"
:item="route" :item="route"
@@ -60,15 +60,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useLayout } from "../../composables/useLayout"; import { useLayout } from "../composables/useLayout";
import { useLayoutMenu } from "../../composables/useLayoutMenu"; import { useLayoutMenu } from "../composables/useLayoutMenu";
import BaseLayout from "../BaseLayout.vue"; import BaseLayout from "./BaseLayout.vue";
import SidebarLogo from "@/layouts/components/Sidebar/components/SidebarLogo.vue"; import SidebarLogo from "../components/Sidebar/components/SidebarLogo.vue";
import SidebarMixTopMenu from "@/layouts/components/Sidebar/components/SidebarMixTopMenu.vue"; import MixTopMenu from "../components/menu/components/MixTopMenu.vue";
import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue"; import NavbarActions from "../components/navbar/components/NavbarActions.vue";
import TagsView from "@/layouts/components/TagsView/index.vue"; import TagsView from "../components/TagsView.vue";
import AppMain from "@/layouts/components/AppMain/index.vue"; import AppMain from "../components/AppMain.vue";
import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue"; import MenuItem from "../components/menu/components/MenuItem.vue";
import Hamburger from "@/components/Hamburger/index.vue"; import Hamburger from "@/components/Hamburger/index.vue";
import variables from "@/styles/variables.module.scss"; import variables from "@/styles/variables.module.scss";

22
src/layouts/components/TopLayout/index.vue → src/layouts/views/TopLayout.vue
View File

@@ -2,10 +2,10 @@
<BaseLayout> <BaseLayout>
<!-- 顶部菜单栏 --> <!-- 顶部菜单栏 -->
<div class="layout__header"> <div class="layout__header">
<LayoutSidebar :show-logo="isShowLogo" :is-collapsed="false"> <Sidebar :show-logo="isShowLogo" :is-collapsed="false">
<LayoutMenu :data="routes" menu-mode="horizontal" base-path="" /> <Menu :data="routes" menu-mode="horizontal" base-path="" />
<NavbarActions /> <NavbarActions />
</LayoutSidebar> </Sidebar>
</div> </div>
<!-- 主内容区 --> <!-- 主内容区 -->
@@ -17,14 +17,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useLayout } from "../../composables/useLayout"; import { useLayout } from "../composables/useLayout";
import { useLayoutMenu } from "../../composables/useLayoutMenu"; import { useLayoutMenu } from "../composables/useLayoutMenu";
import BaseLayout from "../BaseLayout.vue"; import BaseLayout from "./BaseLayout.vue";
import LayoutSidebar from "../common/LayoutSidebar.vue"; import Sidebar from "../components/Sidebar/index.vue";
import LayoutMenu from "../LayoutMenu.vue"; import Menu from "../components/menu/index.vue";
import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue"; import NavbarActions from "../components/navbar/components/NavbarActions.vue";
import TagsView from "@/layouts/components/TagsView/index.vue"; import TagsView from "../components/TagsView.vue";
import AppMain from "@/layouts/components/AppMain/index.vue"; import AppMain from "../components/AppMain.vue";
// 布局相关参数 // 布局相关参数
const { isShowTagsView, isShowLogo } = useLayout(); const { isShowTagsView, isShowLogo } = useLayout();