czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commiit

Browse Source
This commit is contained in:
YeMingfei666
2025-02-08 10:15:06 +08:00
parent 6815bd083b
commit 262bf41379
242 changed files with 19959 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/layout/components/AppMain/index.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<section class="app-main" :style="{ height: appMainHeight }">
<router-view>
<template #default="{ Component, route }">
<transition name="el-fade-in-linear" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</template>
</router-view>
</section>
</template>
<script setup lang="ts">
import { useSettingsStore, useTagsViewStore } from "@/store";
import variables from "@/styles/variables.module.scss";
// 缓存页面集合
const cachedViews = computed(() => useTagsViewStore().cachedViews);
const appMainHeight = computed(() => {
if (useSettingsStore().tagsView) {
return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]} - ${variables["window-top"]})`;
} else {
return `calc(100vh - ${variables["navbar-height"]})`;
}
});
</script>
<style lang="scss" scoped>
.app-main {
position: relative;
overflow-y: auto;
background-color: var(--el-bg-color-page);
}
</style>

34
src/layout/components/HeaderTop/index.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="app-top">
<div class="content">
<div class="logo">
<img class="img" src="@/assets/images/default_logo.png" />
</div>
<NavbarRight />
</div>
</div>
</template>
<style lang="scss" scoped>
.app-top {
height: 60px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-color: #f5f5f5;
.content {
width: 100%;
height: 50px;
background-color: #fff;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.logo {
display: flex;
}
}
}
</style>

78
src/layout/components/NavBar/components/NavbarRight.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div class="navbar__right">
<!-- 非手机设备（窄屏）才显示 -->
<template v-if="!isMobile">
<!-- 搜索 -->
<MenuSearch />
<!-- 全屏 -->
<Fullscreen />
<!-- 布局大小 -->
<!-- <SizeSelect /> -->
<!-- 语言选择 -->
<!-- <LangSelect /> -->
<!-- 消息通知 -->
<Notification />
</template>
<!-- 用户头像（个人中心、注销登录等） -->
<UserProfile />
<!-- 设置面板 -->
<!-- <div v-if="defaultSettings.showSettings" @click="settingStore.settingsVisible = true">
<SvgIcon icon-class="setting" />
</div> -->
</div>
</template>
<script setup lang="ts">
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { useAppStore, useSettingsStore } from "@/store";
import UserProfile from "./UserProfile.vue";
import Notification from "./Notification.vue";
const appStore = useAppStore();
const settingStore = useSettingsStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
</script>
<style lang="scss" scoped>
.navbar__right {
display: flex;
align-items: center;
justify-content: center;
& > * {
display: inline-block;
min-width: 40px;
height: $navbar-height;
line-height: $navbar-height;
color: var(--el-text-color);
text-align: center;
cursor: pointer;
&:hover {
background: rgb(0 0 0 / 10%);
}
}
}
:deep(.el-divider--horizontal) {
margin: 10px 0;
}
.dark .navbar__right > *:hover {
background: rgb(255 255 255 / 20%);
}
.layout-top .navbar__right > *,
.layout-mix .navbar__right > * {
color: #333;
}
</style>

237
src/layout/components/NavBar/components/Notification.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<div>
<el-dropdown class="wh-full">
<el-badge v-if="notices.length > 0" :offset="[-10, 15]" :value="notices.length" :max="99">
<el-icon>
<Bell />
</el-icon>
</el-badge>
<el-badge v-else>
<el-icon>
<Bell />
</el-icon>
</el-badge>
<template #dropdown>
<div class="p-2">
<el-tabs v-model="activeTab">
<el-tab-pane label="通知" name="notice">
<template v-if="notices.length > 0">
<div v-for="(item, index) in notices" :key="index" class="w500px py-3">
<div class="flex-y-center">
<DictLabel v-model="item.type" code="notice_type" size="small" />
<el-text
size="small"
class="w200px cursor-pointer !ml-2 !flex-1"
truncated
@click="handleReadNotice(item.id)"
>
{{ item.title }}
</el-text>
<div class="text-xs text-gray">
{{ item.publishTime }}
</div>
</div>
</div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无通知" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link type="primary" :underline="false" @click="handleViewMore">
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="notices.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div>
</el-tab-pane>
<el-tab-pane label="消息" name="message">
<template v-if="messages.length > 0">
<div
v-for="(item, index) in messages"
:key="index"
class="w400px flex-x-between p-1"
>
<div class="flex-y-center">
<DictLabel v-model="item.type" code="notice_type" size="small" />
<el-link
type="primary"
class="w200px cursor-pointer !ml-2 !flex-1"
@click="handleReadNotice(item.id)"
>
{{ item.title }}
</el-link>
<div class="text-xs text-gray-400">
{{ item.publishTime }}
</div>
</div>
</div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无消息" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link
v-if="tasks.length > 5"
type="primary"
:underline="false"
@click="handleViewMore"
>
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="messages.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div>
</el-tab-pane>
<el-tab-pane label="待办" name="task">
<template v-if="tasks.length > 0">
<div v-for="(item, index) in tasks" :key="index" class="w500px py-3">
<div class="flex-y-center">
<DictLabel v-model="item.type" code="notice_type" size="small" />
<el-link
type="primary"
class="w200px cursor-pointer !ml-2 !flex-1"
@click="handleReadNotice(item.id)"
>
{{ item.title }}
</el-link>
<div class="text-xs text-gray-400">
{{ item.publishTime }}
</div>
</div>
</div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无待办" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link
v-if="tasks.length > 5"
type="primary"
:underline="false"
@click="handleViewMore"
>
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="tasks.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
</el-dropdown>
<NoticeDetail ref="noticeDetailRef" />
</div>
</template>
<script setup lang="ts">
import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
import WebSocketManager from "@/utils/websocket";
import router from "@/router";
const activeTab = ref("notice");
const notices = ref<NoticePageVO[]>([]);
const messages = ref<any[]>([]);
const tasks = ref<any[]>([]);
const noticeDetailRef = ref();
// 获取未读消息列表并连接 WebSocket
onMounted(() => {
// NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then((data) => {
// notices.value = data.list;
// });
WebSocketManager.subscribeToTopic("/user/queue/message", (message) => {
console.log("收到消息：", message);
const data = JSON.parse(message);
const id = data.id;
if (!notices.value.some((notice) => notice.id == id)) {
notices.value.unshift({
id,
title: data.title,
type: data.type,
publishTime: data.publishTime,
});
ElNotification({
title: "您收到一条新的通知消息！",
message: data.title,
type: "success",
position: "bottom-right",
});
}
});
});
// 阅读通知公告
function handleReadNotice(id: string) {
noticeDetailRef.value.openNotice(id);
const index = notices.value.findIndex((notice) => notice.id === id);
if (index >= 0) {
notices.value.splice(index, 1); // 从消息列表中移除已读消息
}
}
// 查看更多
function handleViewMore() {
router.push({ path: "/myNotice" });
}
// 全部已读
function markAllAsRead() {
NoticeAPI.readAll().then(() => {
notices.value = [];
});
}
</script>
<style lang="scss" scoped>
:deep(.el-badge) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>

60
src/layout/components/NavBar/components/UserProfile.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<el-dropdown trigger="click">
<div class="flex-center h100% p13px">
<img :src="userStore.userInfo.avatar" class="rounded-full mr-10px w24px h24px" />
<span>{{ userStore.userInfo.username }}</span>
<el-icon><CaretBottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleOpenUserProfile">店铺配置</el-dropdown-item>
<el-dropdown-item divided>修改密码</el-dropdown-item>
<el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script setup lang="ts">
defineOptions({
name: "UserProfile",
});
import { useTagsViewStore, useUserStore } from "@/store";
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
/**
* 打开个人中心页面
*/
function handleOpenUserProfile() {
router.push({ name: "Profile" });
}
/**
* 注销登出
*/
function logout() {
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
lockScroll: false,
}).then(() => {
userStore
.logout()
.then(() => {
tagsViewStore.delAllViews();
})
.then(() => {
router.push(`/login?redirect=${route.fullPath}`);
});
});
}
</script>
<style lang="scss" scoped></style>

39
src/layout/components/NavBar/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="navbar">
<div class="navbar__left">
<!-- 展开/收缩菜单 -->
<Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
<!-- 面包屑 -->
<breadcrumb />
</div>
<!-- 导航栏右侧 -->
<!-- <NavbarRight /> -->
</div>
</template>
<script setup lang="ts">
import { useAppStore } from "@/store";
const appStore = useAppStore();
// 侧边栏是否打开
const isSidebarOpened = computed(() => appStore.sidebar.opened);
// 展开/收缩菜单
function toggleSideBar() {
appStore.toggleSidebar();
}
</script>
<style lang="scss" scoped>
.navbar {
display: flex;
justify-content: space-between;
height: $navbar-height;
background: var(--el-bg-color);
&__left {
display: flex;
align-items: center;
}
}
</style>

108
src/layout/components/Settings/components/LayoutSelect.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="flex flex-wrap justify-around w-full h-12">
<el-tooltip content="左侧模式" placement="bottom">
<div
class="layout-item left"
:class="{ 'is-active': modelValue === LayoutEnum.LEFT }"
@click="updateValue(LayoutEnum.LEFT)"
>
<div />
<div />
</div>
</el-tooltip>
<el-tooltip content="顶部模式" placement="bottom">
<div
class="layout-item top"
:class="{ 'is-active': modelValue === LayoutEnum.TOP }"
@click="updateValue(LayoutEnum.TOP)"
>
<div />
<div />
</div>
</el-tooltip>
<el-tooltip content="混合模式" placement="bottom">
<div
class="layout-item mix"
:class="{ 'is-active': modelValue === LayoutEnum.MIX }"
@click="updateValue(LayoutEnum.MIX)"
>
<div />
<div />
</div>
</el-tooltip>
</div>
</template>
<script lang="ts" setup>
import { LayoutEnum } from "@/enums/LayoutEnum";
const props = defineProps({
modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);
function updateValue(layout: string) {
emit("update:modelValue", layout);
}
</script>
<style scoped>
.layout-selector {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: 50px;
}
.layout-item {
position: relative;
width: 18%;
height: 45px;
overflow: hidden;
cursor: pointer;
background: #f0f2f5;
border-radius: 4px;
&.mix div:nth-child(1),
&.top div:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&.mix div:nth-child(2) {
position: absolute;
bottom: 0;
left: 0;
width: 30%;
height: 70%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&.left div:nth-child(1) {
width: 30%;
height: 100%;
background: #1b2a47;
}
&.left div:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 30%;
background: #fff;
box-shadow: 0 0 1px #888;
}
}
.layout-item.is-active {
border: 2px solid var(--el-color-primary);
}
</style>

41
src/layout/components/Settings/components/ThemeColorPicker.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<el-color-picker
v-model="currentColor"
:predefine="colorPresets"
popper-class="theme-picker-dropdown"
/>
</template>
<script lang="ts" setup>
const props = defineProps({
modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);
// 定义颜色预设
const colorPresets = [
"#4080FF",
"#ff4500",
"#ff8c00",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585",
"rgba(255, 69, 0, 0.68)",
"rgb(255, 120, 0)",
"hsva(120, 40, 94)",
];
const currentColor = ref(props.modelValue);
watch(currentColor, (newValue) => {
emit("update:modelValue", newValue);
});
</script>
<style scoped>
:deep(.theme-picker-dropdown) {
z-index: 99999 !important;
}
</style>

136
src/layout/components/Settings/index.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<el-drawer v-model="settingsVisible" size="300" :title="$t('settings.project')">
<el-divider>{{ $t("settings.theme") }}</el-divider>
<div class="flex-center">
<el-switch v-model="isDark" active-icon="Moon" inactive-icon="Sunny" @change="changeTheme" />
</div>
<el-divider>{{ $t("settings.interface") }}</el-divider>
<div class="py-1 flex-x-between">
<span class="text-xs">{{ $t("settings.themeColor") }}</span>
<ThemeColorPicker v-model="settingsStore.themeColor" @update:model-value="changeThemeColor" />
</div>
<div class="py-1 flex-x-between">
<span class="text-xs">{{ $t("settings.tagsView") }}</span>
<el-switch v-model="settingsStore.tagsView" />
</div>
<div class="py-1 flex-x-between">
<span class="text-xs">{{ $t("settings.sidebarLogo") }}</span>
<el-switch v-model="settingsStore.sidebarLogo" />
</div>
<div class="py-1 flex-x-between">
<span class="text-xs">{{ $t("settings.watermark") }}</span>
<el-switch v-model="settingsStore.watermarkEnabled" />
</div>
<el-divider>{{ $t("settings.navigation") }}</el-divider>
<LayoutSelect v-model="settingsStore.layout" @update:model-value="changeLayout" />
</el-drawer>
</template>
<script setup lang="ts">
import { LayoutEnum } from "@/enums/LayoutEnum";
import { ThemeEnum } from "@/enums/ThemeEnum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
const route = useRoute();
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
const settingsVisible = computed({
get() {
return settingsStore.settingsVisible;
},
set() {
settingsStore.settingsVisible = false;
},
});
/**
* 切换主题颜色
*
* @param color 颜色
*/
function changeThemeColor(color: string) {
settingsStore.changeThemeColor(color);
}
/**
* 切换主题
*
* @param val 是否为暗黑模式
*/
const changeTheme = (val: any) => {
isDark.value = val;
settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
};
/**
* 切换布局
*
* @param layout 布局 LayoutEnum
*/
function changeLayout(layout: string) {
settingsStore.changeLayout(layout);
if (layout === LayoutEnum.MIX) {
route.name && againActiveTop(route.name as string);
}
}
/**
* 重新激活顶部菜单
*
* @param routeName 路由名称
*/
function againActiveTop(routeName: string) {
const parent = findOutermostParent(permissionStore.routes, routeName);
if (appStore.activeTopMenuPath !== parent.path) {
appStore.activeTopMenu(parent.path);
}
}
/**
* 查找最外层父级
*
* @param tree 树形数据
* @param findName 查找的名称
*/
function findOutermostParent(tree: any[], findName: string) {
let parentMap: any = {};
function buildParentMap(node: any, parent: any) {
parentMap[node.name] = parent;
if (node.children) {
for (let i = 0; i < node.children.length; i++) {
buildParentMap(node.children[i], node);
}
}
}
for (let i = 0; i < tree.length; i++) {
buildParentMap(tree[i], null);
}
let currentNode = parentMap[findName];
while (currentNode) {
if (!parentMap[currentNode.name]) {
return currentNode;
}
currentNode = parentMap[currentNode.name];
}
return null;
}
</script>
<style lang="scss" scoped></style>

53
src/layout/components/Sidebar/components/SidebarLogo.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="logo">
<transition name="el-fade-in-linear" mode="out-in">
<router-link :key="+collapse" class="wh-full flex-center" to="/">
<img :src="logo" class="w20px h20px" />
<span v-if="!collapse" class="title">
{{ defaultSettings.title }}
</span>
</router-link>
</transition>
</div>
</template>
<script lang="ts" setup>
import defaultSettings from "@/settings";
import logo from "@/assets/logo.png";
defineProps({
collapse: {
type: Boolean,
required: true,
},
});
</script>
<style lang="scss" scoped>
.logo {
width: 100%;
height: $navbar-height;
background-color: $sidebar-logo-background;
.title {
flex-shrink: 0; /* 防止容器在空间不足时缩小 */
margin-left: 10px;
font-size: 14px;
font-weight: bold;
color: #333;
}
}
.layout-top,
.layout-mix {
.logo {
width: $sidebar-width;
}
&.hideSidebar {
.logo {
width: $sidebar-width-collapsed;
}
}
}
</style>

113
src/layout/components/Sidebar/components/SidebarMenu.vue Normal file
View File

@@ -0,0 +1,113 @@
<!-- 菜单组件 -->
<template>
<el-menu
ref="menuRef"
:default-active="currentRoute.path"
:collapse="!appStore.sidebar.opened"
:background-color="variables['menu-background']"
:text-color="variables['menu-text']"
:active-text-color="variables['menu-active-text']"
: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 { LayoutEnum } from "@/enums/LayoutEnum";
import { useSettingsStore, useAppStore } from "@/store";
import { isExternal } from "@/utils/index";
import variables from "@/styles/variables.module.scss";
const props = defineProps({
data: {
type: Array<RouteRecordRaw>,
required: true,
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 === LayoutEnum.TOP ? "horizontal" : "vertical";
});
/**
* 获取完整路径
*
* @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>

204
src/layout/components/Sidebar/components/SidebarMenuItem.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div v-if="!item.meta || !item.meta.hidden">
<!--【叶子节点】显示叶子节点或唯一子节点且父节点未配置始终显示 -->
<template
v-if="
// 未配置始终显示，使用唯一子节点替换父节点显示为叶子节点
(!item.meta?.alwaysShow &&
hasOneShowingChild(item.children, item) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren)) ||
// 即使配置了始终显示，但无子节点，也显示为叶子节点
(item.meta?.alwaysShow && !item.children)
"
>
<AppLink
v-if="onlyOneChild.meta"
:to="{
path: resolvePath(onlyOneChild.path),
query: onlyOneChild.meta.params,
}"
>
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
>
<SidebarMenuItemTitle
:icon="onlyOneChild.meta.icon || item.meta?.icon"
:title="onlyOneChild.meta.title"
/>
</el-menu-item>
</AppLink>
</template>
<!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
<el-sub-menu v-else :index="resolvePath(item.path)" teleported>
<template #title>
<SidebarMenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template>
<SidebarMenuItem
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
/>
</el-sub-menu>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "SidebarMenuItem",
inheritAttrs: false,
});
import path from "path-browserify";
import { RouteRecordRaw } from "vue-router";
import { isExternal } from "@/utils";
const props = defineProps({
/**
* 当前路由对象
*/
item: {
type: Object as PropType<RouteRecordRaw>,
required: true,
},
/**
* 父级完整路径
*/
basePath: {
type: String,
required: true,
},
/**
* 是否为嵌套路由
*/
isNest: {
type: Boolean,
default: false,
},
});
// 可见的唯一子节点
const onlyOneChild = ref();
/**
* 检查是否仅有一个可见子节点
*
* @param children 子路由数组
* @param parent 父级路由
* @returns 是否仅有一个可见子节点
*/
function hasOneShowingChild(children: RouteRecordRaw[] = [], parent: RouteRecordRaw) {
// 过滤出可见子节点
const showingChildren = children.filter((route: RouteRecordRaw) => {
if (!route.meta?.hidden) {
onlyOneChild.value = route;
return true;
}
return false;
});
// 仅有一个节点
if (showingChildren.length === 1) {
return true;
}
// 无子节点时
if (showingChildren.length === 0) {
// 父节点设置为唯一显示节点，并标记为无子节点
onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
return true;
}
return false;
}
/**
* 获取完整路径，适配外部链接
*
* @param routePath 路由路径
* @returns 绝对路径
*/
function resolvePath(routePath: string) {
if (isExternal(routePath)) return routePath;
if (isExternal(props.basePath)) return props.basePath;
// 拼接父路径和当前路径
return path.resolve(props.basePath, routePath);
}
</script>
<style lang="scss">
.hideSidebar {
.submenu-title-noDropdown {
position: relative;
padding: 0 !important;
.el-tooltip {
padding: 0 !important;
.sub-el-icon {
margin-left: 19px;
}
}
& > span {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
.el-sub-menu {
overflow: hidden;
& > .el-sub-menu__title {
padding: 0 !important;
.sub-el-icon {
margin-left: 19px;
}
.el-sub-menu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
width: $sidebar-width-collapsed;
.el-sub-menu {
& > .el-sub-menu__title > span {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
}
}
.el-sub-menu__title {
color: #555;
}
.el-menu-item:hover {
background-color: $menu-hover;
}
.el-sub-menu__title:hover {
background-color: rgba(121, 145, 188, 0.18) !important;
}
.el-menu-item:hover {
background-color: rgba(121, 145, 188, 0.18) !important;
}
.el-menu-item {
color: rgb(153, 153, 153);
}
</style>

44
src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<!-- 根据 icon 类型决定使用的不同类型的图标组件 -->
<el-icon v-if="icon && icon.startsWith('el-icon')" class="sub-el-icon">
<component :is="icon.replace('el-icon-', '')" />
</el-icon>
<svg-icon v-else-if="icon" :icon-class="icon" />
<!-- <svg-icon v-else icon-class="menu" /> -->
<!-- 菜单标题 -->
<span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
</template>
<script setup lang="ts">
import { translateRouteTitle } from "@/utils/i18n";
defineProps({
icon: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
});
</script>
<style lang="scss" scoped>
.sub-el-icon {
width: 14px !important;
margin-right: 0 !important;
color: currentcolor;
}
.hideSidebar {
.el-sub-menu,
.el-menu-item {
.svg-icon,
.sub-el-icon {
margin-left: 20px;
}
}
}
</style>

91
src/layout/components/Sidebar/components/SidebarMixTopMenu.vue Normal file
View File

@@ -0,0 +1,91 @@
<!-- 混合布局顶部菜单 -->
<template>
<el-scrollbar>
<el-menu
mode="horizontal"
:default-active="activePath"
:background-color="variables['menu-background']"
:text-color="variables['menu-text']"
:active-text-color="variables['menu-active-text']"
@select="handleMenuSelect"
>
<el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
<template #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>
<svg-icon v-else :icon-class="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>
</el-scrollbar>
</template>
<script lang="ts" setup>
import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
import { usePermissionStore, useAppStore } from "@/store";
import { translateRouteTitle } from "@/utils/i18n";
import variables from "@/styles/variables.module.scss";
const router = useRouter();
const appStore = useAppStore();
const permissionStore = usePermissionStore();
// 当前激活的顶部菜单路径
const activePath = computed(() => appStore.activeTopMenuPath);
// 顶部菜单列表
const topMenus = ref<RouteRecordRaw[]>([]);
// 获取当前路由路径的顶部菜单路径
const activeTopMenuPath =
useRoute().path.split("/").filter(Boolean).length > 1
? useRoute().path.match(/^\/[^/]+/)?.[0] || "/"
: "/";
// 设置当前激活的顶部菜单路径
appStore.activeTopMenu(activeTopMenuPath);
/**
* 处理菜单点击事件，切换顶部菜单并加载对应的左侧菜单
* @param routePath 点击的菜单路径
*/
const handleMenuSelect = (routePath: string) => {
appStore.activeTopMenu(routePath); // 设置激活的顶部菜单
permissionStore.setMixedLayoutLeftRoutes(routePath); // 更新左侧菜单
navigateToFirstLeftMenu(permissionStore.mixedLayoutLeftRoutes); // 跳转到左侧第一个菜单
};
/**
* 跳转到左侧第一个可访问的菜单
* @param menus 左侧菜单列表
*/
const navigateToFirstLeftMenu = (menus: RouteRecordRaw[]) => {
if (menus.length === 0) return;
const [firstMenu] = menus;
// 如果第一个菜单有子菜单，递归跳转到第一个子菜单
if (firstMenu.children && firstMenu.children.length > 0) {
navigateToFirstLeftMenu(firstMenu.children as RouteRecordRaw[]);
} else if (firstMenu.name) {
router.push({
name: firstMenu.name,
query:
typeof firstMenu.meta?.params === "object"
? (firstMenu.meta.params as LocationQueryRaw)
: undefined,
});
}
};
onMounted(() => {
topMenus.value = permissionStore.routes.filter((item) => !item.meta || !item.meta.hidden);
});
</script>

46
src/layout/components/Sidebar/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div :class="{ 'has-logo': sidebarLogo }">
<!-- 混合 -->
<div v-if="isMixLayout" class="flex w-full">
<SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
<SidebarMixTopMenu class="flex-1" />
<NavbarRight />
</div>
<!-- 顶部 || 左侧 -->
<template v-else>
<SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
<el-scrollbar>
<SidebarMenu :data="permissionStore.routes" base-path="" />
</el-scrollbar>
<!-- 顶部导航 -->
<NavbarRight v-if="isTopLayout" />
</template>
</div>
</template>
<script setup lang="ts">
import { LayoutEnum } from "@/enums/LayoutEnum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
import NavbarRight from "../NavBar/components/NavbarRight.vue";
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const sidebarLogo = computed(() => settingsStore.sidebarLogo);
const layout = computed(() => settingsStore.layout);
const isMixLayout = computed(() => layout.value === LayoutEnum.MIX);
const isTopLayout = computed(() => layout.value === LayoutEnum.TOP);
const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
</script>
<style lang="scss" scoped>
.has-logo {
.el-scrollbar {
height: calc(100vh - $navbar-height);
}
}
</style>

442
src/layout/components/TagsView/index.vue Normal file
View File

@@ -0,0 +1,442 @@
<template>
<div class="tags-container">
<el-scrollbar class="scroll-container" :vertical="false" @wheel.prevent="handleScroll">
<router-link
v-for="tag in visitedViews"
ref="tagRef"
:key="tag.fullPath"
:class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')"
:to="{ path: tag.path, query: tag.query }"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openContentMenu(tag, $event)"
>
{{ translateRouteTitle(tag.title) }}
<el-icon
v-if="!isAffix(tag)"
class="tag-close-icon"
@click.prevent.stop="closeSelectedTag(tag)"
>
<Close />
</el-icon>
</router-link>
</el-scrollbar>
<!-- tag标签操作菜单 -->
<ul
v-show="contentMenuVisible"
class="contextmenu"
:style="{ left: left + 'px', top: top + 'px' }"
>
<li @click="refreshSelectedTag(selectedTag)">
<svg-icon icon-class="refresh" />
刷新
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<svg-icon icon-class="close" />
关闭
</li>
<li @click="closeOtherTags">
<svg-icon icon-class="close_other" />
关闭其它
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<svg-icon icon-class="close_left" />
关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<svg-icon icon-class="close_right" />
关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
<svg-icon icon-class="close_all" />
关闭所有
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { useRoute, useRouter, RouteRecordRaw } from "vue-router";
import { resolve } from "path-browserify";
import { translateRouteTitle } from "@/utils/i18n";
import { usePermissionStore, useTagsViewStore, useSettingsStore, useAppStore } from "@/store";
const { proxy } = getCurrentInstance()!;
const router = useRouter();
const route = useRoute();
const permissionStore = usePermissionStore();
const tagsViewStore = useTagsViewStore();
const appStore = useAppStore();
const { visitedViews } = storeToRefs(tagsViewStore);
const settingsStore = useSettingsStore();
const layout = computed(() => settingsStore.layout);
const selectedTag = ref<TagView>({
path: "",
fullPath: "",
name: "",
title: "",
affix: false,
keepAlive: false,
});
const affixTags = ref<TagView[]>([]);
const left = ref(0);
const top = ref(0);
watch(
route,
() => {
addTags();
moveToCurrentTag();
},
{
immediate: true, //初始化立即执行
}
);
const contentMenuVisible = ref(false); // 右键菜单是否显示
watch(contentMenuVisible, (value) => {
if (value) {
document.body.addEventListener("click", closeContentMenu);
} else {
document.body.removeEventListener("click", closeContentMenu);
}
});
/**
* 过滤出需要固定的标签
*/
function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
let tags: TagView[] = [];
routes.forEach((route: RouteRecordRaw) => {
const tagPath = resolve(basePath, route.path);
if (route.meta?.affix) {
tags.push({
path: tagPath,
fullPath: tagPath,
name: String(route.name),
title: route.meta?.title || "no-name",
affix: route.meta?.affix,
keepAlive: route.meta?.keepAlive,
});
}
if (route.children) {
const tempTags = filterAffixTags(route.children, basePath + route.path);
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags];
}
}
});
return tags;
}
function initTags() {
const tags: TagView[] = filterAffixTags(permissionStore.routes);
affixTags.value = tags;
for (const tag of tags) {
// Must have tag name
if (tag.name) {
tagsViewStore.addVisitedView(tag);
}
}
}
function addTags() {
if (route.meta.title) {
tagsViewStore.addView({
name: route.name as string,
title: route.meta.title,
path: route.path,
fullPath: route.fullPath,
affix: route.meta?.affix,
keepAlive: route.meta?.keepAlive,
query: route.query,
});
}
}
function moveToCurrentTag() {
// 使用 nextTick() 的目的是确保在更新 tagsView 组件之前，scrollPaneRef 对象已经滚动到了正确的位置。
nextTick(() => {
for (const tag of visitedViews.value) {
if (tag.path === route.path) {
// when query is different then update
// route.query = { ...route.query, ...tag.query };
if (tag.fullPath !== route.fullPath) {
tagsViewStore.updateVisitedView({
name: route.name as string,
title: route.meta.title || "",
path: route.path,
fullPath: route.fullPath,
affix: route.meta?.affix,
keepAlive: route.meta?.keepAlive,
query: route.query,
});
}
}
}
});
}
function isAffix(tag: TagView) {
return tag?.affix;
}
function isFirstView() {
try {
return (
selectedTag.value.path === "/dashboard" ||
selectedTag.value.fullPath === tagsViewStore.visitedViews[1].fullPath
);
} catch (err) {
return false;
}
}
function isLastView() {
try {
return (
selectedTag.value.fullPath ===
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].fullPath
);
} catch (err) {
return false;
}
}
function refreshSelectedTag(view: TagView) {
tagsViewStore.delCachedView(view);
const { fullPath } = view;
nextTick(() => {
router.replace("/redirect" + fullPath);
});
}
function closeSelectedTag(view: TagView) {
tagsViewStore.delView(view).then((res: any) => {
if (tagsViewStore.isActive(view)) {
tagsViewStore.toLastView(res.visitedViews, view);
}
});
}
function closeLeftTags() {
tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
if (!res.visitedViews.find((item: any) => item.path === route.path)) {
tagsViewStore.toLastView(res.visitedViews);
}
});
}
function closeRightTags() {
tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
if (!res.visitedViews.find((item: any) => item.path === route.path)) {
tagsViewStore.toLastView(res.visitedViews);
}
});
}
function closeOtherTags() {
router.push(selectedTag.value);
tagsViewStore.delOtherViews(selectedTag.value).then(() => {
moveToCurrentTag();
});
}
function closeAllTags(view: TagView) {
tagsViewStore.delAllViews().then((res: any) => {
tagsViewStore.toLastView(res.visitedViews, view);
});
}
/**
* 打开右键菜单
*/
function openContentMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105;
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary
const l = e.clientX - offsetLeft + 15; // 15: margin right
if (l > maxLeft) {
left.value = maxLeft;
} else {
left.value = l;
}
// 混合模式下，需要减去顶部菜单(fixed)的高度
if (layout.value === "mix") {
top.value = e.clientY - 50;
} else {
top.value = e.clientY;
}
contentMenuVisible.value = true;
selectedTag.value = tag;
}
/**
* 关闭右键菜单
*/
function closeContentMenu() {
contentMenuVisible.value = false;
}
/**
* 滚动事件
*/
function handleScroll() {
closeContentMenu();
}
function findOutermostParent(tree: any[], findName: string) {
let parentMap: any = {};
function buildParentMap(node: any, parent: any) {
parentMap[node.name] = parent;
if (node.children) {
for (let i = 0; i < node.children.length; i++) {
buildParentMap(node.children[i], node);
}
}
}
for (let i = 0; i < tree.length; i++) {
buildParentMap(tree[i], null);
}
let currentNode = parentMap[findName];
while (currentNode) {
if (!parentMap[currentNode.name]) {
return currentNode;
}
currentNode = parentMap[currentNode.name];
}
return null;
}
const againActiveTop = (newVal: string) => {
if (layout.value !== "mix") return;
const parent = findOutermostParent(permissionStore.routes, newVal);
if (appStore.activeTopMenu !== parent.path) {
appStore.activeTopMenu(parent.path);
}
};
// 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
watch(
() => route.name,
(newVal) => {
if (newVal) {
againActiveTop(newVal as string);
}
},
{
deep: true,
}
);
onMounted(() => {
initTags();
});
</script>
<style lang="scss" scoped>
.tags-container {
width: 100%;
height: 34px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
box-shadow: 0 1px 1px var(--el-box-shadow-light);
.tags-item {
display: inline-block;
padding: 3px 8px;
margin: 4px 0 0 5px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--el-border-color-light);
&:hover {
color: var(--el-color-primary);
}
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
.tag-close-icon {
vertical-align: -0.15em;
cursor: pointer;
border-radius: 50%;
&:hover {
color: #fff;
background-color: var(--el-color-primary);
}
}
&.active {
color: #fff;
background-color: var(--el-color-primary);
&::before {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 5px;
content: "";
background: #fff;
border-radius: 50%;
}
.tag-close-icon:hover {
color: var(--el-color-primary);
background-color: var(--el-fill-color-light);
}
}
}
}
.contextmenu {
position: absolute;
z-index: 99;
font-size: 12px;
background: var(--el-bg-color-overlay);
border-radius: 4px;
box-shadow: var(--el-box-shadow-light);
li {
padding: 8px 16px;
cursor: pointer;
&:hover {
background: var(--el-fill-color-light);
}
}
}
.scroll-container {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
.el-scrollbar__bar {
bottom: 0;
}
.el-scrollbar__wrap {
height: 49px;
}
}
</style>

327
src/layout/index.vue Normal file
View File

@@ -0,0 +1,327 @@
<template>
<div class="wh-full" :class="classObj">
<!-- 遮罩层 -->
<div
v-if="isMobile && isOpenSidebar"
class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
@click="handleOutsideClick"
/>
<!-- 公用侧边栏 -->
<Sidebar class="sidebar-container" />
<HeaderTop></HeaderTop>
<!-- 混合布局 -->
<div v-if="layout === LayoutEnum.MIX" class="mix-container">
<div class="mix-container-sidebar">
<el-scrollbar>
<SidebarMenu :data="mixedLayoutLeftRoutes" :base-path="activeTopMenuPath" />
</el-scrollbar>
<div class="sidebar-toggle">
<hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSidebar" />
</div>
</div>
<div :class="{ hasTagsView: showTagsView }" class="main-container">
<TagsView v-if="showTagsView" />
<AppMain />
<Settings v-if="defaultSettings.showSettings" />
<!-- 返回顶部 -->
<el-backtop target=".app-main">
<svg-icon icon-class="backtop" size="24px" />
</el-backtop>
</div>
</div>
<!-- 左侧和顶部布局 -->
<div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
<div class="fixed-header">
<NavBar v-if="layout === LayoutEnum.LEFT" />
<TagsView v-if="showTagsView" />
</div>
<AppMain />
<Settings v-if="defaultSettings.showSettings" />
<!-- 返回顶部 -->
<el-backtop target=".app-main">
<svg-icon icon-class="backtop" size="24px" />
</el-backtop>
</div>
</div>
</template>
<script setup lang="ts">
import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { LayoutEnum } from "@/enums/LayoutEnum";
import NavBar from "./components/NavBar/index.vue";
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const width = useWindowSize().width;
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const isOpenSidebar = computed(() => appStore.sidebar.opened);
const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单
watch(
() => activeTopMenuPath.value,
(newVal: string) => {
permissionStore.setMixedLayoutLeftRoutes(newVal);
},
{
deep: true,
immediate: true,
}
);
const classObj = computed(() => ({
hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened,
mobile: appStore.device === DeviceEnum.MOBILE,
[`layout-${settingsStore.layout}`]: true,
}));
watchEffect(() => {
appStore.toggleDevice(width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP);
if (width.value >= WIDTH_DESKTOP) {
appStore.openSideBar();
} else {
appStore.closeSideBar();
}
});
function handleOutsideClick() {
appStore.closeSideBar();
}
function toggleSidebar() {
appStore.toggleSidebar();
}
const route = useRoute();
watch(route, () => {
if (isMobile.value && isOpenSidebar.value) {
appStore.closeSideBar();
}
});
</script>
<style lang="scss" scoped>
.sidebar-container {
position: fixed;
top: 60px;
bottom: 0;
left: 0;
z-index: 999;
width: $sidebar-width;
background-color: $menu-background;
transition: width 0.28s;
:deep(.el-menu) {
border: none;
}
}
.main-container {
position: relative;
height: 100%;
margin-left: $sidebar-width;
overflow-y: auto;
transition: margin-left 0.28s;
.fixed-header {
position: fixed;
top: 60px;
right: 0;
z-index: 9;
width: calc(100% - 205px);
transition: width 0.28s;
}
}
.hideSidebar {
.main-container {
.fixed-header {
width: calc(100% - 54px);
}
}
}
.mobile {
.main-container {
.fixed-header {
width: 100%;
}
}
}
.layout-top {
.sidebar-container {
position: sticky;
z-index: 999;
display: flex;
width: 100% !important;
height: $navbar-height;
:deep(.el-scrollbar) {
flex: 1;
height: $navbar-height;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--horizontal) {
height: $navbar-height;
line-height: $navbar-height;
}
:deep(.el-menu--collapse) {
width: 100%;
}
}
.main-container {
height: calc(100vh - $navbar-height);
margin-left: 0;
}
}
.layout-mix {
.sidebar-container {
width: 100% !important;
height: $navbar-height;
:deep(.el-scrollbar) {
flex: 1;
height: $navbar-height;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--horizontal) {
height: $navbar-height;
line-height: $navbar-height;
}
:deep(.el-menu--horizontal.el-menu) {
border: none;
}
}
.mix-container {
display: flex;
height: 100%;
padding-top: $navbar-height;
.mix-container-sidebar {
position: relative;
width: $sidebar-width;
height: 100%;
background-color: var(--menu-background);
:deep(.el-scrollbar) {
// 50px 是底部收缩按钮的高度
height: calc(100vh - $navbar-height - 50px);
}
:deep(.el-menu) {
height: 100%;
border: none;
}
.sidebar-toggle {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
line-height: 50px;
box-shadow: 0 0 6px -2px var(--el-color-primary);
div:hover {
background-color: var(--menu-background);
}
:deep(svg) {
color: var(--el-color-primary) !important;
}
}
}
.main-container {
flex: 1;
min-width: 0;
margin-left: 0;
}
}
}
.hideSidebar {
.main-container {
margin-left: $sidebar-width-collapsed;
}
&.layout-top {
.main-container {
margin-left: 0;
}
}
&.layout-mix {
.sidebar-container {
width: 100% !important;
}
.mix-container {
&-sidebar {
width: $sidebar-width-collapsed;
}
}
}
}
.layout-left.hideSidebar {
.sidebar-container {
width: $sidebar-width-collapsed !important;
}
.main-container {
margin-left: $sidebar-width-collapsed;
}
&.mobile {
.sidebar-container {
pointer-events: none;
transform: translate3d(-210px, 0, 0);
transition-duration: 0.3s;
}
.main-container {
margin-left: 0;
}
}
}
.mobile {
.main-container {
margin-left: 0;
}
&.layout-top {
// 顶部模式全局变量修改
--el-menu-item-height: $navbar-height;
}
}
.app-main {
margin-top: 140px;
box-sizing: border-box;
}
</style>