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

wip: 临时提交

Browse Source
This commit is contained in:
Ray.Hao
2025-05-26 08:22:34 +08:00
parent a3e4d6b852
commit 0d899feeaf
2 changed files with 119 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/layouts/views/MixLayout.vue
View File

@@ -5,7 +5,7 @@
<div class="layout__header-content">
<!-- Logo区域 -->
<div v-if="isShowLogo" class="layout__header-logo">
<AppLogo :collapse="false" />
<AppLogo :collapse="isLogoCollapsed" />
</div>
<!-- 顶部菜单区域 -->
@@ -60,6 +60,7 @@
<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useWindowSize } from "@vueuse/core";
import { useLayout } from "../composables/useLayout";
import { useLayoutMenu } from "../composables/useLayoutMenu";
import BaseLayout from "./BaseLayout.vue";
@@ -80,6 +81,12 @@ const { isShowTagsView, isShowLogo, isSidebarOpen, toggleSidebar } = useLayout()
// 菜单相关
const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
// 响应式窗口尺寸
const { width } = useWindowSize();
// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
const isLogoCollapsed = computed(() => width.value < 768);
// 当前激活的菜单
const activeMenu = computed(() => {
const { meta, path } = route;
@@ -120,6 +127,7 @@ console.log("🎨 MixLayout rendered");
&-content {
display: flex;
align-items: center;
min-width: 768px;
height: 100%;
padding: 0;
}
@@ -129,9 +137,19 @@ console.log("🎨 MixLayout rendered");
flex-shrink: 0;
align-items: center;
justify-content: center;
width: $sidebar-width;
width: $sidebar-width; // 默认宽度：显示logo+文字
height: 100%;
// 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
@media (min-width: 768px) and (max-width: 1100px) {
width: 180px; // 缩小到180px，为菜单腾出空间
}
// 小屏设备：只显示logo，使用收缩宽度
@media (max-width: 767px) {
width: $sidebar-width-collapsed; // 只显示logo：54px
}
:deep(.logo) {
height: 100%;
@@ -145,10 +163,19 @@ console.log("🎨 MixLayout rendered");
display: flex;
flex: 1;
align-items: center;
min-width: 0;
height: 100%;
margin: 0 16px;
overflow: hidden;
@media (min-width: 768px) and (max-width: 1200px) {
margin: 0 12px;
}
@media (max-width: 767px) {
margin: 0 8px;
}
:deep(.el-menu) {
height: 100%;
background-color: transparent;
@@ -165,6 +192,16 @@ console.log("🎨 MixLayout rendered");
line-height: $navbar-height;
border-bottom: none;
@media (min-width: 768px) and (max-width: 1200px) {
padding: 0 12px;
font-size: 14px;
}
@media (max-width: 767px) {
padding: 0 8px;
font-size: 13px;
}
&:hover {
background-color: rgba(255, 255, 255, 0.08);
}
@@ -183,6 +220,14 @@ console.log("🎨 MixLayout rendered");
align-items: center;
height: 100%;
padding: 0 16px;
@media (min-width: 768px) and (max-width: 1200px) {
padding: 0 12px;
}
@media (max-width: 767px) {
padding: 0 8px;
}
}
}

75
src/layouts/views/TopLayout.vue
View File

@@ -4,7 +4,7 @@
<div class="layout__header">
<div class="layout__header-left">
<!-- Logo -->
<AppLogo v-if="isShowLogo" :collapse="false" />
<AppLogo v-if="isShowLogo" :collapse="isLogoCollapsed" />
<!-- 菜单 -->
<BasicMenu :data="routes" menu-mode="horizontal" base-path="" />
</div>
@@ -23,6 +23,8 @@
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";
import { useLayout } from "../composables/useLayout";
import { useLayoutMenu } from "../composables/useLayoutMenu";
import BaseLayout from "./BaseLayout.vue";
@@ -37,6 +39,12 @@ const { isShowTagsView, isShowLogo } = useLayout();
// 菜单相关
const { routes } = useLayoutMenu();
// 响应式窗口尺寸
const { width } = useWindowSize();
// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
const isLogoCollapsed = computed(() => width.value < 768);
</script>
<style lang="scss" scoped>
@@ -49,6 +57,7 @@ const { routes } = useLayoutMenu();
align-items: center;
justify-content: space-between;
width: 100%;
min-width: 768px; // 设置最小宽度，防止过度压缩
height: $navbar-height;
background-color: $menu-background;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -57,16 +66,31 @@ const { routes } = useLayoutMenu();
display: flex;
flex: 1;
align-items: center;
min-width: 0; // 允许flex收缩
height: 100%;
overflow: hidden; // 防止溢出
// Logo 样式
// Logo 样式 - 使用SCSS变量管理宽度
:deep(.sidebar-logo) {
width: $sidebar-width;
flex-shrink: 0; // 防止Logo被压缩
width: $sidebar-width; // 默认宽度：显示logo+文字
height: $navbar-height;
padding: 0;
margin-right: 20px;
background: transparent;
// 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
@media (min-width: 768px) and (max-width: 1100px) {
width: 180px; // 缩小到180px，为菜单腾出空间
margin-right: 16px; // 减少右边距
}
// 小屏设备：只显示logo，使用收缩宽度
@media (max-width: 767px) {
width: $sidebar-width-collapsed; // 只显示logo：54px
margin-right: 12px; // 减少右边距
}
.sidebar-logo__link {
height: 100%;
}
@@ -80,14 +104,18 @@ const { routes } = useLayoutMenu();
&-right {
display: flex;
flex-shrink: 0; // 防止操作按钮被压缩
align-items: center;
height: 100%;
padding-left: 12px;
}
// 限制菜单高度
:deep(.el-menu--horizontal) {
flex: 1;
min-width: 0; // 允许菜单收缩
height: $navbar-height;
overflow: hidden; // 防止菜单溢出
line-height: $navbar-height;
background-color: transparent;
border: none;
@@ -95,12 +123,33 @@ const { routes } = useLayoutMenu();
.el-menu-item {
height: $navbar-height;
line-height: $navbar-height;
// 响应式菜单项
@media (min-width: 768px) and (max-width: 1200px) {
padding: 0 12px; // 中屏设备减少内边距
font-size: 14px; // 稍微缩小字体
}
@media (max-width: 767px) {
padding: 0 8px; // 小屏设备进一步减少内边距
font-size: 13px;
}
}
.el-sub-menu {
.el-sub-menu__title {
height: $navbar-height;
line-height: $navbar-height;
@media (min-width: 768px) and (max-width: 1200px) {
padding: 0 12px;
font-size: 14px;
}
@media (max-width: 767px) {
padding: 0 8px;
font-size: 13px;
}
}
}
@@ -117,9 +166,29 @@ const { routes } = useLayoutMenu();
}
}
// 当存在TagsView时的样式调整
.hasTagsView {
:deep(.app-main) {
height: calc(100vh - $navbar-height - $tags-view-height) !important;
}
}
// 中屏设备的特殊优化
@media (min-width: 768px) and (max-width: 1200px) {
.layout {
&__header {
padding: 0 8px; // 添加少量内边距
}
}
}
// 小屏设备的特殊优化
@media (max-width: 767px) {
.layout {
&__header {
min-width: 600px; // 小屏设备的最小宽度
padding: 0 4px;
}
}
}
</style>