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-27 11:29:30 +08:00
parent 5e7cb0ad1c
commit 264961ce08
8 changed files with 64 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/layouts/components/AppLogo/index.vue
View File

@@ -40,56 +40,36 @@ defineProps({
</style>
<style lang="scss">
// 全局样式：针对顶部布局和混合布局的特殊处理
// 顶部布局和混合布局的特殊处理
.layout-top,
.layout-mix {
.logo {
// 在顶部和混合布局中，移除背景色，使其透明
background-color: transparent !important;
.title {
// 确保标题颜色适配当前主题
color: var(--menu-text);
}
}
}
// 顶部布局的响应式宽度控制
.layout-top {
.layout__header-left .logo {
flex-shrink: 0; // 防止Logo被压缩
width: $sidebar-width; // 默认宽度：显示logo+文字
margin-right: 20px;
// 中屏设备优化（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; // 减少右边距
}
// 宽屏时：openSidebar 状态下显示完整Logo+文字
.openSidebar {
&.layout-top .layout__header-left .logo,
&.layout-mix .layout__header-logo .logo {
width: $sidebar-width; // 210px，显示logo+文字
}
}
// 混合布局的响应式宽度控制
.layout-mix {
.layout__header-logo .logo {
flex-shrink: 0;
width: $sidebar-width; // 默认宽度：显示logo+文字
// 窄屏时：hideSidebar 状态下只显示Logo图标
.hideSidebar {
&.layout-top .layout__header-left .logo,
&.layout-mix .layout__header-logo .logo {
width: $sidebar-width-collapsed; // 54px，只显示logo
}
// 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
@media (min-width: 768px) and (max-width: 1100px) {
width: 180px; // 缩小到180px，为菜单腾出空间
}
// 小屏设备：只显示logo，使用收缩宽度
@media (max-width: 767px) {
width: $sidebar-width-collapsed; // 只显示logo：54px
}
// 隐藏文字，只显示图标
.logo .title {
display: none;
}
}
</style>

6
src/layouts/components/Menu/components/MenuItem.vue
View File

@@ -140,12 +140,6 @@ function resolvePath(routePath: string) {
.submenu-title-noDropdown {
position: relative;
.el-tooltip {
.sub-el-icon {
margin-left: 19px;
}
}
& > span {
display: inline-block;
visibility: hidden;

56
src/layouts/components/Menu/components/MenuItemTitle.vue
View File

@@ -1,16 +1,16 @@
<template>
<!-- 菜单图标 -->
<template v-if="icon">
<el-icon v-if="isElIcon" class="el-icon">
<el-icon v-if="isElIcon" class="menu-icon">
<component :is="iconComponent" />
</el-icon>
<div v-else :class="`i-svg:${icon}`" />
<div v-else :class="`i-svg:${icon}`" class="menu-icon" />
</template>
<template v-else>
<div class="i-svg:menu" />
<div class="i-svg:menu menu-icon" />
</template>
<!-- 菜单标题 -->
<span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
<span v-if="title" class="menu-title ml-1">{{ translateRouteTitle(title) }}</span>
</template>
<script setup lang="ts">
@@ -26,28 +26,60 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
</script>
<style lang="scss" scoped>
.menu-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 5px;
color: currentcolor;
}
.el-icon {
width: 14px !important;
margin-right: 0 !important;
width: 18px !important;
height: 18px !important;
color: currentcolor;
}
[class^="i-svg:"] {
width: 14px;
height: 14px;
width: 18px;
height: 18px;
color: currentcolor !important;
}
// 收缩状态下的样式优化
.hideSidebar {
.el-sub-menu,
.el-menu-item {
.el-icon {
// 确保菜单项内容居中
display: flex !important;
align-items: center !important;
justify-content: center !important;
.menu-icon {
width: 20px;
height: 20px;
margin: 0 auto;
}
}
[class^="i-svg:"] {
margin: 0 auto;
.el-icon {
width: 20px !important;
height: 20px !important;
margin: 0 auto;
}
[class^="i-svg:"] {
width: 20px;
height: 20px;
margin: 0 auto;
}
// 隐藏文字标题
.menu-title {
display: none;
}
}
}
</style>

3
src/layouts/components/Settings/index.vue
View File

@@ -146,7 +146,6 @@
<script setup lang="ts">
import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
import { markRaw } from "vue";
const { t } = useI18n();
import { LayoutMode } from "@/enums/settings/layout.enum";
@@ -154,7 +153,7 @@ import { ThemeMode } from "@/enums/settings/theme.enum";
import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
// 按钮图标 - 使用markRaw避免响应式警告
// 按钮图标
const copyIcon = markRaw(DocumentCopy);
const resetIcon = markRaw(RefreshLeft);

9
src/layouts/composables/useLayout.ts
View File

@@ -1,4 +1,3 @@
import { computed } from "vue";
import { useAppStore, useSettingsStore } from "@/store";
import defaultSettings from "@/settings";
@@ -49,14 +48,6 @@ export function useLayout() {
appStore.closeSideBar();
}
// 暂时注释掉这个逻辑，避免影响手动操作
// 监听路由变化，在移动端自动关闭侧边栏
// watchEffect(() => {
// if (appStore.device === "mobile" && appStore.sidebar.opened) {
// appStore.closeSideBar();
// }
// });
return {
currentLayout,
isSidebarOpen,

2
src/layouts/views/LeftLayout.vue
View File

@@ -102,7 +102,7 @@ console.log("🔍 LeftLayout - isMobile:", isMobile.value);
}
}
/* 移动端样式 - 注意这里需要正确应用到父元素 */
/* 移动端样式 */
.mobile {
.layout__sidebar {
width: $sidebar-width !important;

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

@@ -136,26 +136,7 @@ console.log("🎨 MixLayout rendered");
flex-shrink: 0;
align-items: center;
justify-content: center;
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%;
a {
height: 100%;
}
}
}
&-menu {
@@ -182,20 +163,6 @@ 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);
}
&.is-active {
background-color: rgba(255, 255, 255, 0.12);
border-bottom: 2px solid var(--el-color-primary);
@@ -210,14 +177,6 @@ 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;
}
}
}
@@ -255,6 +214,7 @@ console.log("🎨 MixLayout rendered");
width: 100%;
height: 50px;
line-height: 50px;
background-color: var(--menu-background);
box-shadow: 0 0 6px -2px var(--el-color-primary);
}
}

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

@@ -59,7 +59,6 @@ const isLogoCollapsed = computed(() => width.value < 768);
width: 100%;
height: $navbar-height;
background-color: $menu-background;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
&-left {
display: flex;
@@ -67,32 +66,11 @@ const isLogoCollapsed = computed(() => width.value < 768);
align-items: center;
min-width: 0; // 允许flex收缩
height: 100%;
overflow: hidden; // 防止溢出
// Logo 样式 - 使用SCSS变量管理宽度
// Logo样式由AppLogo组件的全局样式控制
:deep(.logo) {
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; // 减少右边距
}
a {
height: 100%;
}
}
}
@@ -104,7 +82,7 @@ const isLogoCollapsed = computed(() => width.value < 768);
padding-left: 12px;
}
// 限制菜单高度
// 菜单样式
:deep(.el-menu--horizontal) {
flex: 1;
min-width: 0; // 允许菜单收缩
@@ -117,33 +95,12 @@ const isLogoCollapsed = computed(() => width.value < 768);
.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;
}
}
}
@@ -166,22 +123,4 @@ const isLogoCollapsed = computed(() => width.value < 768);
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 {
padding: 0 4px;
}
}
}
</style>