wip: 临时提交
This commit is contained in:
Ray.Hao
36
src/layouts/components/AppMain/index.vue
Normal file
36
src/layouts/components/AppMain/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="app-main" :style="{ height: appMainHeight }">
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
<transition enter-active-class="animate__animated animate__fadeIn" 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"]})`;
|
||||
} 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>
|
||||
@@ -19,7 +19,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useLayout } from "../composables/useLayout";
|
||||
import { useLayoutResponsive } from "../composables/useLayoutResponsive";
|
||||
import Settings from "@/layout/components/Settings/index.vue";
|
||||
import Settings from "@/layouts/components/Settings/index.vue";
|
||||
|
||||
// 布局相关
|
||||
const { layoutClass, isShowSettings, isSidebarOpen, closeSidebar } = useLayout();
|
||||
@@ -45,7 +45,7 @@ import type { RouteRecordRaw } from "vue-router";
|
||||
import { SidebarColor } from "@/enums/settings/theme.enum";
|
||||
import { useSettingsStore, useAppStore } from "@/store";
|
||||
import { isExternal } from "@/utils/index";
|
||||
import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
|
||||
import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
|
||||
import variables from "@/styles/variables.module.scss";
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<LayoutBase>
|
||||
<BaseLayout>
|
||||
<!-- 左侧菜单栏 -->
|
||||
<div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
|
||||
<LayoutSidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen">
|
||||
@@ -21,17 +21,17 @@
|
||||
<TagsView v-if="isShowTagsView" />
|
||||
<AppMain />
|
||||
</div>
|
||||
</LayoutBase>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLayout } from "../../composables/useLayout";
|
||||
import { useLayoutMenu } from "../../composables/useLayoutMenu";
|
||||
import LayoutBase from "../LayoutBase.vue";
|
||||
import BaseLayout from "../BaseLayout.vue";
|
||||
import LayoutSidebar from "../common/LayoutSidebar.vue";
|
||||
import NavBar from "@/layout/components/NavBar/index.vue";
|
||||
import TagsView from "@/layout/components/TagsView/index.vue";
|
||||
import AppMain from "@/layout/components/AppMain/index.vue";
|
||||
import NavBar from "@/layouts/components/NavBar/index.vue";
|
||||
import TagsView from "@/layouts/components/TagsView/index.vue";
|
||||
import AppMain from "@/layouts/components/AppMain/index.vue";
|
||||
import SidebarMenu from "../LayoutMenu.vue";
|
||||
|
||||
// 布局相关参数
|
||||
@@ -41,8 +41,8 @@ const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();
|
||||
const { routes } = useLayoutMenu();
|
||||
|
||||
// 添加调试日志
|
||||
console.log("🔍 LeftSideLayout - isSidebarOpen:", isSidebarOpen.value);
|
||||
console.log("🔍 LeftSideLayout - isMobile:", isMobile.value);
|
||||
console.log("🔍 LeftLayout - isSidebarOpen:", isSidebarOpen.value);
|
||||
console.log("🔍 LeftLayout - isMobile:", isMobile.value);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<LayoutBase>
|
||||
<BaseLayout>
|
||||
<!-- 顶部菜单栏 -->
|
||||
<div class="layout__header">
|
||||
<div class="layout__header-content">
|
||||
@@ -54,7 +54,7 @@
|
||||
<AppMain />
|
||||
</div>
|
||||
</div>
|
||||
</LayoutBase>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -62,13 +62,13 @@ import { computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useLayout } from "../../composables/useLayout";
|
||||
import { useLayoutMenu } from "../../composables/useLayoutMenu";
|
||||
import LayoutBase from "../LayoutBase.vue";
|
||||
import SidebarLogo from "@/layout/components/Sidebar/components/SidebarLogo.vue";
|
||||
import SidebarMixTopMenu from "@/layout/components/Sidebar/components/SidebarMixTopMenu.vue";
|
||||
import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
|
||||
import TagsView from "@/layout/components/TagsView/index.vue";
|
||||
import AppMain from "@/layout/components/AppMain/index.vue";
|
||||
import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
|
||||
import BaseLayout from "../BaseLayout.vue";
|
||||
import SidebarLogo from "@/layouts/components/Sidebar/components/SidebarLogo.vue";
|
||||
import SidebarMixTopMenu from "@/layouts/components/Sidebar/components/SidebarMixTopMenu.vue";
|
||||
import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
|
||||
import TagsView from "@/layouts/components/TagsView/index.vue";
|
||||
import AppMain from "@/layouts/components/AppMain/index.vue";
|
||||
import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
|
||||
import Hamburger from "@/components/Hamburger/index.vue";
|
||||
import variables from "@/styles/variables.module.scss";
|
||||
|
||||
@@ -103,7 +103,7 @@ function resolvePath(routePath: string) {
|
||||
return `${activeTopMenuPath.value}/${routePath}`;
|
||||
}
|
||||
|
||||
console.log("🎨 MixMenuLayout rendered");
|
||||
console.log("🎨 MixLayout rendered");
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
215
src/layouts/components/NavBar/components/NavbarActions.vue
Normal file
215
src/layouts/components/NavBar/components/NavbarActions.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div :class="['navbar-actions', navbarActionsClass]">
|
||||
<!-- 桌面端工具项 -->
|
||||
<template v-if="isDesktop">
|
||||
<!-- 搜索 -->
|
||||
<div class="navbar-actions__item">
|
||||
<MenuSearch />
|
||||
</div>
|
||||
|
||||
<!-- 全屏 -->
|
||||
<div class="navbar-actions__item">
|
||||
<Fullscreen />
|
||||
</div>
|
||||
|
||||
<!-- 布局大小 -->
|
||||
<div class="navbar-actions__item">
|
||||
<SizeSelect />
|
||||
</div>
|
||||
|
||||
<!-- 语言选择 -->
|
||||
<div class="navbar-actions__item">
|
||||
<LangSelect />
|
||||
</div>
|
||||
|
||||
<!-- 通知 -->
|
||||
<div class="navbar-actions__item">
|
||||
<Notification />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 用户菜单 -->
|
||||
<div class="navbar-actions__item">
|
||||
<el-dropdown trigger="click">
|
||||
<div class="user-profile">
|
||||
<img class="user-profile__avatar" :src="userStore.userInfo.avatar" />
|
||||
<span class="user-profile__name">{{ userStore.userInfo.username }}</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleProfileClick">
|
||||
{{ t("navbar.profile") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="logout">
|
||||
{{ t("navbar.logout") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 系统设置 -->
|
||||
<div
|
||||
v-if="defaultSettings.showSettings"
|
||||
class="navbar-actions__item"
|
||||
@click="settingStore.settingsVisible = true"
|
||||
>
|
||||
<div class="i-svg:setting" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import defaultSettings from "@/settings";
|
||||
import { DeviceEnum } from "@/enums/settings/device.enum";
|
||||
import { useAppStore, useSettingsStore, useUserStore } from "@/store";
|
||||
import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStore();
|
||||
const settingStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 是否为桌面设备
|
||||
const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
|
||||
|
||||
/**
|
||||
* 打开个人中心页面
|
||||
*/
|
||||
function handleProfileClick() {
|
||||
router.push({ name: "Profile" });
|
||||
}
|
||||
|
||||
// 根据主题和侧边栏配色方案选择样式类
|
||||
const navbarActionsClass = computed(() => {
|
||||
const { theme, sidebarColorScheme, layout } = settingStore;
|
||||
|
||||
// 暗黑主题下，所有布局都使用白色文字
|
||||
if (theme === ThemeMode.DARK) {
|
||||
return "navbar-actions--white-text";
|
||||
}
|
||||
|
||||
// 明亮主题下
|
||||
if (theme === ThemeMode.LIGHT) {
|
||||
// 顶部布局和混合布局的顶部区域使用深色背景，需要白色文字
|
||||
if (layout === "top" || layout === "mix") {
|
||||
return "navbar-actions--white-text";
|
||||
}
|
||||
|
||||
// 左侧布局下，如果侧边栏是经典蓝色，顶部导航栏仍使用默认颜色
|
||||
if (layout === "left" && sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
|
||||
return ""; // 使用默认的深色文字
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
});
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
function logout() {
|
||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
lockScroll: false,
|
||||
}).then(() => {
|
||||
userStore.logout().then(() => {
|
||||
router.push(`/login?redirect=${route.fullPath}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: $navbar-height;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
// 默认图标样式（明亮模式 + 左侧布局）
|
||||
:deep([class^="i-svg:"]) {
|
||||
font-size: 18px;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
:deep([class^="i-svg:"]) {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 13px;
|
||||
|
||||
&__avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-left: 10px;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局）
|
||||
.navbar-actions--white-text {
|
||||
.navbar-actions__item {
|
||||
:deep([class^="i-svg:"]) {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
:deep([class^="i-svg:"]) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile__name {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
// 确保下拉菜单中的图标不受影响
|
||||
:deep(.el-dropdown-menu) {
|
||||
[class^="i-svg:"] {
|
||||
color: var(--el-text-color-regular) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/layouts/components/NavBar/index.vue
Normal file
48
src/layouts/components/NavBar/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="flex-y-center">
|
||||
<!-- 菜单折叠按钮 -->
|
||||
<Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
|
||||
<!-- 面包屑导航 -->
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
<!-- 导航栏操作区域 -->
|
||||
<div class="navbar__actions">
|
||||
<NavbarActions />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from "@/store";
|
||||
import Hamburger from "@/components/Hamburger/index.vue";
|
||||
import Breadcrumb from "@/components/Breadcrumb/index.vue";
|
||||
import NavbarActions from "./components/NavbarActions.vue";
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
// 侧边栏展开状态
|
||||
const isSidebarOpened = computed(() => appStore.sidebar.opened);
|
||||
|
||||
// 切换侧边栏展开/折叠状态
|
||||
function toggleSideBar() {
|
||||
console.log("🔄 Hamburger clicked! Current state:", isSidebarOpened.value);
|
||||
console.log("🔄 Device type:", appStore.device);
|
||||
appStore.toggleSidebar();
|
||||
console.log("🔄 New state:", appStore.sidebar.opened);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $navbar-height;
|
||||
background: var(--el-bg-color);
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
src/layouts/components/Settings/components/LayoutSelect.vue
Normal file
140
src/layouts/components/Settings/components/LayoutSelect.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<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>
|
||||
193
src/layouts/components/Settings/index.vue
Normal file
193
src/layouts/components/Settings/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
size="300"
|
||||
:title="t('settings.project')"
|
||||
:before-close="handleCloseDrawer"
|
||||
>
|
||||
<section class="config-section">
|
||||
<el-divider>{{ t("settings.theme") }}</el-divider>
|
||||
|
||||
<div class="flex-center">
|
||||
<el-switch
|
||||
v-model="isDark"
|
||||
active-icon="Moon"
|
||||
inactive-icon="Sunny"
|
||||
@change="handleThemeChange"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 界面设置 -->
|
||||
<section class="config-section">
|
||||
<el-divider>{{ t("settings.interface") }}</el-divider>
|
||||
|
||||
<div class="config-item flex-x-between">
|
||||
<span class="text-xs">{{ t("settings.themeColor") }}</span>
|
||||
<el-color-picker
|
||||
v-model="selectedThemeColor"
|
||||
:predefine="colorPresets"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="config-item flex-x-between">
|
||||
<span class="text-xs">{{ t("settings.tagsView") }}</span>
|
||||
<el-switch v-model="settingsStore.tagsView" />
|
||||
</div>
|
||||
|
||||
<div class="config-item flex-x-between">
|
||||
<span class="text-xs">{{ t("settings.sidebarLogo") }}</span>
|
||||
<el-switch v-model="settingsStore.sidebarLogo" />
|
||||
</div>
|
||||
|
||||
<div class="config-item flex-x-between">
|
||||
<span class="text-xs">{{ t("settings.watermark") }}</span>
|
||||
<el-switch v-model="settingsStore.watermarkEnabled" />
|
||||
</div>
|
||||
<div v-if="!isDark" class="config-item flex-x-between">
|
||||
<span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
|
||||
<el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
|
||||
<el-radio :value="SidebarColor.CLASSIC_BLUE">
|
||||
{{ t("settings.classicBlue") }}
|
||||
</el-radio>
|
||||
<el-radio :value="SidebarColor.MINIMAL_WHITE">
|
||||
{{ t("settings.minimalWhite") }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 布局设置 -->
|
||||
<section class="config-section">
|
||||
<el-divider>{{ t("settings.navigation") }}</el-divider>
|
||||
<LayoutSelect v-model="settingsStore.layout" @update:model-value="handleLayoutChange" />
|
||||
</section>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
import { LayoutMode } from "@/enums/settings/layout.enum";
|
||||
import { ThemeMode } from "@/enums/settings/theme.enum";
|
||||
import { SidebarColor } from "@/enums/settings/theme.enum";
|
||||
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
|
||||
// 颜色预设
|
||||
const colorPresets = [
|
||||
"#4080FF",
|
||||
"#626AEF",
|
||||
"#ff4500",
|
||||
"#ff8c00",
|
||||
"#00ced1",
|
||||
"#1e90ff",
|
||||
"#c71585",
|
||||
"rgb(255, 120, 0)",
|
||||
"hsva(120, 40, 94)",
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
|
||||
const sidebarColor = ref(settingsStore.sidebarColorScheme);
|
||||
|
||||
const selectedThemeColor = computed({
|
||||
get: () => settingsStore.themeColor,
|
||||
set: (value) => settingsStore.changeThemeColor(value),
|
||||
});
|
||||
|
||||
const drawerVisible = computed({
|
||||
get: () => settingsStore.settingsVisible,
|
||||
set: (value) => (settingsStore.settingsVisible = value),
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理主题切换
|
||||
*
|
||||
* @param isDark 是否启用暗黑模式
|
||||
*/
|
||||
const handleThemeChange = (isDark: string | number | boolean) => {
|
||||
settingsStore.changeTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更改侧边栏颜色
|
||||
*
|
||||
* @param val 颜色方案名称
|
||||
*/
|
||||
const changeSidebarColor = (val: any) => {
|
||||
settingsStore.changeSidebarColor(val);
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换布局
|
||||
*
|
||||
* @param layout - 布局模式
|
||||
*/
|
||||
const handleLayoutChange = (layout: LayoutMode) => {
|
||||
settingsStore.changeLayout(layout);
|
||||
if (layout === LayoutMode.MIX && route.name) {
|
||||
const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
|
||||
if (appStore.activeTopMenuPath !== topLevelRoute.path) {
|
||||
appStore.activeTopMenu(topLevelRoute.path);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 查找路由的顶层父路由
|
||||
*
|
||||
* @param tree 树形数据
|
||||
* @param findName 查找的名称
|
||||
*/
|
||||
function findTopLevelRoute(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 handleCloseDrawer = () => {
|
||||
settingsStore.settingsVisible = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.config-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.config-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/layouts/components/Sidebar/components/SidebarLogo.vue
Normal file
53
src/layouts/components/Sidebar/components/SidebarLogo.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="logo">
|
||||
<transition enter-active-class="animate__animated animate__fadeInLeft">
|
||||
<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: $sidebar-logo-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-top,
|
||||
.layout-mix {
|
||||
.logo {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.logo {
|
||||
width: $sidebar-width-collapsed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
src/layouts/components/Sidebar/components/SidebarMenu.vue
Normal file
132
src/layouts/components/Sidebar/components/SidebarMenu.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<!-- 菜单组件 -->
|
||||
<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>
|
||||
201
src/layouts/components/Sidebar/components/SidebarMenuItem.vue
Normal file
201
src/layouts/components/Sidebar/components/SidebarMenuItem.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div v-if="!item.meta || !item.meta.hidden">
|
||||
<!--【叶子节点】显示叶子节点或唯一子节点且父节点未配置始终显示 -->
|
||||
<template
|
||||
v-if="
|
||||
// 未配置始终显示，使用唯一子节点替换父节点显示为叶子节点
|
||||
(hasOneShowingChild(item.children, item) &&
|
||||
!item.meta?.alwaysShow &&
|
||||
(!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;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: 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;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.el-menu-item:hover {
|
||||
background-color: $menu-hover;
|
||||
}
|
||||
}
|
||||
|
||||
html.sidebar-color-blue {
|
||||
.el-menu-item:hover {
|
||||
background-color: $menu-hover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<!-- 菜单图标 -->
|
||||
<template v-if="icon">
|
||||
<el-icon v-if="isElIcon" class="el-icon">
|
||||
<component :is="iconComponent" />
|
||||
</el-icon>
|
||||
<div v-else :class="`i-svg:${icon}`" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="i-svg:menu" />
|
||||
</template>
|
||||
<!-- 菜单标题 -->
|
||||
<span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { translateRouteTitle } from "@/utils/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
icon?: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const isElIcon = computed(() => props.icon?.startsWith("el-icon"));
|
||||
const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-icon {
|
||||
width: 14px !important;
|
||||
margin-right: 0 !important;
|
||||
color: currentcolor;
|
||||
}
|
||||
|
||||
[class^="i-svg:"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: currentcolor !important;
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.el-sub-menu,
|
||||
.el-menu-item {
|
||||
.el-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
[class^="i-svg:"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
Normal file
139
src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<!-- 混合布局顶部菜单 -->
|
||||
<template>
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:default-active="activePath"
|
||||
: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
|
||||
"
|
||||
@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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
|
||||
import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
|
||||
import { translateRouteTitle } from "@/utils/i18n";
|
||||
import variables from "@/styles/variables.module.scss";
|
||||
import { SidebarColor } from "@/enums/settings/theme.enum";
|
||||
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
// 当前激活的顶部菜单路径
|
||||
const activePath = computed(() => appStore.activeTopMenuPath);
|
||||
|
||||
// 获取主题
|
||||
const theme = computed(() => settingsStore.theme);
|
||||
|
||||
// 获取浅色主题下的侧边栏配色方案
|
||||
const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
|
||||
|
||||
// 顶部菜单列表
|
||||
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); // 设置激活的顶部菜单
|
||||
activateFirstLevelMenu(routePath); // 激活一级菜单并设置左侧二级菜单
|
||||
};
|
||||
|
||||
/**
|
||||
* 激活一级菜单并设置左侧二级菜单
|
||||
* @param routePath 点击的菜单路径
|
||||
*/
|
||||
function activateFirstLevelMenu(routePath: string) {
|
||||
permissionStore.updateSideMenu(routePath); // 更新左侧菜单
|
||||
navigateToFirstLeftMenu(permissionStore.sideMenuRoutes); // 跳转到左侧第一个菜单
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到左侧第一个可访问的菜单
|
||||
* @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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-menu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--horizontal {
|
||||
height: $navbar-height !important;
|
||||
|
||||
// 确保菜单项垂直居中
|
||||
:deep(.el-menu-item) {
|
||||
height: 100%;
|
||||
line-height: $navbar-height;
|
||||
}
|
||||
|
||||
// 移除默认的底部边框
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
540
src/layouts/components/TagsView/index.vue
Normal file
540
src/layouts/components/TagsView/index.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<div class="tags-container">
|
||||
<!-- 水平滚动容器 -->
|
||||
<el-scrollbar ref="scrollbarRef" class="scroll-container" @wheel="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)"
|
||||
>
|
||||
<!-- 标签文本 -->
|
||||
<span class="tag-text">{{ translateRouteTitle(tag.title) }}</span>
|
||||
<!-- 关闭按钮，固定标签不显示 -->
|
||||
<span
|
||||
v-if="!isAffix(tag)"
|
||||
class="tag-close-icon"
|
||||
@click.prevent.stop="closeSelectedTag(tag)"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
</router-link>
|
||||
</el-scrollbar>
|
||||
|
||||
<!-- 标签右键菜单 -->
|
||||
<ul
|
||||
v-show="contentMenuVisible"
|
||||
class="contextmenu"
|
||||
:style="{ left: left + 'px', top: top + 'px' }"
|
||||
>
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<div class="i-svg:refresh" />
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<div class="i-svg:close" />
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOtherTags">
|
||||
<div class="i-svg:close_other" />
|
||||
关闭其它
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
<div class="i-svg:close_left" />
|
||||
关闭左侧
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
<div class="i-svg:close_right" />
|
||||
关闭右侧
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<div class="i-svg: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 instance = getCurrentInstance();
|
||||
const proxy = instance?.proxy;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 过滤出需要固定的标签
|
||||
* @param routes 路由配置
|
||||
* @param basePath 基础路径
|
||||
* @returns 固定标签列表
|
||||
*/
|
||||
function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
|
||||
let tags: TagView[] = [];
|
||||
routes.forEach((route: RouteRecordRaw) => {
|
||||
const tagPath = resolve(basePath, route.path);
|
||||
// 当路由设置了meta.affix属性时，加入固定标签列表
|
||||
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) {
|
||||
// 必须有标签名称才添加
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* the purpose of this function is make sure to move the current active tag into the view
|
||||
*/
|
||||
function moveToCurrentTag() {
|
||||
// 使用 nextTick() 确保在更新 tagsView 组件之前滚动到正确位置
|
||||
nextTick(() => {
|
||||
for (const tag of visitedViews.value) {
|
||||
if (tag.path === route.path) {
|
||||
// 当查询参数不同时更新标签
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断标签是否为固定标签
|
||||
* @param tag 标签对象
|
||||
* @returns 是否为固定标签
|
||||
*/
|
||||
function isAffix(tag: TagView) {
|
||||
return tag?.affix;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断选中的标签是否为第一个可见标签
|
||||
* @returns 是否为第一个可见标签
|
||||
*/
|
||||
function isFirstView() {
|
||||
return (
|
||||
selectedTag.value.path === "/dashboard" ||
|
||||
selectedTag.value.fullPath === tagsViewStore.visitedViews[1]?.fullPath
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断选中的标签是否为最后一个可见标签
|
||||
* @returns 是否为最后一个可见标签
|
||||
*/
|
||||
function isLastView() {
|
||||
return (
|
||||
selectedTag.value.fullPath ===
|
||||
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1]?.fullPath
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新选中的标签页
|
||||
* @param view 标签对象
|
||||
*/
|
||||
function refreshSelectedTag(view: TagView) {
|
||||
tagsViewStore.delCachedView(view);
|
||||
const { fullPath } = view;
|
||||
nextTick(() => {
|
||||
router.replace("/redirect" + fullPath);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭选中的标签页
|
||||
* @param view 标签对象
|
||||
*/
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭所有标签
|
||||
* @param view 标签对象
|
||||
*/
|
||||
function closeAllTags(view: TagView) {
|
||||
tagsViewStore.delAllViews().then((res: any) => {
|
||||
tagsViewStore.toLastView(res.visitedViews, view);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开右键菜单
|
||||
* @param tag 标签对象
|
||||
* @param e 鼠标事件
|
||||
*/
|
||||
function openContentMenu(tag: TagView, e: MouseEvent) {
|
||||
const menuMinWidth = 105;
|
||||
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // 容器左边距
|
||||
const offsetWidth = proxy?.$el.offsetWidth; // 容器宽度
|
||||
const maxLeft = offsetWidth - menuMinWidth; // 左边界
|
||||
const leftPosition = e.clientX - offsetLeft + 15; // 15: 右边距
|
||||
|
||||
// 确保菜单不超出容器右边界
|
||||
if (leftPosition > maxLeft) {
|
||||
left.value = maxLeft;
|
||||
} else {
|
||||
left.value = leftPosition;
|
||||
}
|
||||
|
||||
// 混合模式下，需要减去顶部菜单(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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理鼠标滚轮事件，实现水平滚动
|
||||
*/
|
||||
const scrollbarRef = ref();
|
||||
function handleScroll(event: any) {
|
||||
closeContentMenu();
|
||||
// 检查是否有横向滚动条
|
||||
if (scrollbarRef.value.wrapRef.scrollWidth > scrollbarRef.value.wrapRef.clientWidth) {
|
||||
const wheelDelta = event.wheelDelta || 0; // 向上滚动时为120，向下滚动时为-120
|
||||
const scrollLeft = scrollbarRef.value.wrapRef.scrollLeft; // 当前滚动条到左边的距离
|
||||
// 设置滚动条到左边的距离
|
||||
scrollbarRef.value.setScrollLeft(scrollLeft - wheelDelta);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 寻找最外层父节点
|
||||
* @param tree 路由树
|
||||
* @param findName 要查找的节点名称
|
||||
* @returns 最外层父节点
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新激活顶部菜单
|
||||
* @param newVal 新的路由名
|
||||
*/
|
||||
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: $tags-view-height;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 1px 1px var(--el-box-shadow-light);
|
||||
|
||||
/* 滚动容器样式 */
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 标签项样式 */
|
||||
.tags-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
margin-top: 4px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color);
|
||||
|
||||
/* 第一个和最后一个标签的边距调整 */
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* 标签文本样式 */
|
||||
.tag-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 关闭按钮样式 */
|
||||
.tag-close-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-white);
|
||||
background-color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
/* 活动标签样式 */
|
||||
&.active {
|
||||
color: var(--el-color-white);
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
&::before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 2px;
|
||||
content: "";
|
||||
background: var(--el-color-white);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 活动标签关闭按钮样式 */
|
||||
.tag-close-icon {
|
||||
color: var(--el-color-white);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-white);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单样式 */
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
z-index: 3000;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--el-text-color-primary);
|
||||
list-style-type: none;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
/* 菜单项样式 */
|
||||
li {
|
||||
padding: 7px 16px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<LayoutBase>
|
||||
<BaseLayout>
|
||||
<!-- 顶部菜单栏 -->
|
||||
<div class="layout__header">
|
||||
<LayoutSidebar :show-logo="isShowLogo" :is-collapsed="false">
|
||||
<el-scrollbar>
|
||||
<SidebarMenu :data="routes" base-path="" menu-mode="horizontal" />
|
||||
</el-scrollbar>
|
||||
<LayoutMenu :data="routes" menu-mode="horizontal" base-path="" />
|
||||
<NavbarActions />
|
||||
</LayoutSidebar>
|
||||
</div>
|
||||
@@ -15,18 +13,18 @@
|
||||
<TagsView v-if="isShowTagsView" />
|
||||
<AppMain />
|
||||
</div>
|
||||
</LayoutBase>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useLayout } from "../../composables/useLayout";
|
||||
import { useLayoutMenu } from "../../composables/useLayoutMenu";
|
||||
import LayoutBase from "../LayoutBase.vue";
|
||||
import BaseLayout from "../BaseLayout.vue";
|
||||
import LayoutSidebar from "../common/LayoutSidebar.vue";
|
||||
import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
|
||||
import TagsView from "@/layout/components/TagsView/index.vue";
|
||||
import AppMain from "@/layout/components/AppMain/index.vue";
|
||||
import SidebarMenu from "../LayoutMenu.vue";
|
||||
import LayoutMenu from "../LayoutMenu.vue";
|
||||
import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
|
||||
import TagsView from "@/layouts/components/TagsView/index.vue";
|
||||
import AppMain from "@/layouts/components/AppMain/index.vue";
|
||||
|
||||
// 布局相关参数
|
||||
const { isShowTagsView, isShowLogo } = useLayout();
|
||||
@@ -49,37 +47,17 @@ const { routes } = useLayoutMenu();
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
height: $navbar-height;
|
||||
|
||||
.el-scrollbar {
|
||||
flex: 1;
|
||||
height: $navbar-height;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title,
|
||||
.el-menu--horizontal {
|
||||
height: $navbar-height;
|
||||
line-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
position: relative;
|
||||
height: calc(100vh - $navbar-height);
|
||||
margin-left: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.fixed-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.hasTagsView) {
|
||||
.app-main {
|
||||
.hasTagsView {
|
||||
:deep(.app-main) {
|
||||
height: calc(100vh - $navbar-height - $tags-view-height) !important;
|
||||
}
|
||||
}
|
||||
@@ -5,9 +5,9 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useLayout } from "./composables/useLayout";
|
||||
import LeftSideLayout from "./components/LeftSideLayout/index.vue";
|
||||
import TopMenuLayout from "./components/TopMenuLayout/index.vue";
|
||||
import MixMenuLayout from "./components/MixMenuLayout/index.vue";
|
||||
import LeftLayout from "./components/LeftLayout/index.vue";
|
||||
import TopLayout from "./components/TopLayout/index.vue";
|
||||
import MixLayout from "./components/MixLayout/index.vue";
|
||||
import { LayoutMode } from "@/enums/settings/layout.enum";
|
||||
|
||||
const { currentLayout } = useLayout();
|
||||
@@ -16,12 +16,12 @@ const { currentLayout } = useLayout();
|
||||
const currentLayoutComponent = computed(() => {
|
||||
switch (currentLayout.value) {
|
||||
case LayoutMode.TOP:
|
||||
return TopMenuLayout;
|
||||
return TopLayout;
|
||||
case LayoutMode.MIX:
|
||||
return MixMenuLayout;
|
||||
return MixLayout;
|
||||
case LayoutMode.LEFT:
|
||||
default:
|
||||
return LeftSideLayout;
|
||||
return LeftLayout;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user