liangdong/mversion-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:修改相关样式

Browse Source
This commit is contained in:
liangdong
2025-12-30 19:09:12 +08:00
parent bfb6a1e500
commit 1cc15fc76d
2 changed files with 80 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/stageBreadcrumbs/index.vue
View File

@@ -35,6 +35,9 @@ const { title } = defineProps<{
display: inline-block;
width: 1px;
height: 16px;
margin: 0 18px;
vertical-align: middle;
margin-bottom: 2px;
background-color: #E2E8F0;
}
}

112
src/pages/Layout/index.vue
View File

@@ -6,18 +6,31 @@
<!-- 顶部company公司标记 -->
<div class="mj-aside-company"></div>
<div class="mj-aside-menu">
<div class="mj-aside-title" v-show="!isCollapse">{{ topTitle }}</div>
<mjMenus class="mj-aside_menu" :isCollapse="isCollapse" :menuList="sideMenuList" :active-menu="selectedActiveMenu"
@menu-select="handleSideMenuSelect" />
<div class="mj-aside-title" v-show="!isCollapse">
{{ topTitle }}
</div>
<mjMenus
class="mj-aside_menu"
:isCollapse="isCollapse"
:menuList="sideMenuList"
:active-menu="selectedActiveMenu"
@menu-select="handleSideMenuSelect"
/>
</div>
<!-- 展开收缩左侧菜单按钮 -->
<div class="mj-collapse" @click="showCollapse"></div>
<div class="mj-collapse" @click="showCollapse">
<el-icon><component :is="isCollapse ? DArrowRight : DArrowLeft" /></el-icon>
</div>
</div>
</el-aside>
<el-container>
<el-header class="mj-header-content">
<mjMenus :menuList="topLevelMenuList" mode="horizontal" :active-menu="selectedTopMenu"
@menu-select="handleTopMenuSelect" />
<mjMenus
:menuList="topLevelMenuList"
mode="horizontal"
:active-menu="selectedTopMenu"
@menu-select="handleTopMenuSelect"
/>
</el-header>
<el-main>
<!-- <card-item :list="[1,2,3,4,5,6]"/> -->
@@ -28,13 +41,14 @@
</div>
</template>
<script setup lang="ts">
import mjMenus from '@/components/standardMenu/index.vue';
import { useUserStore } from '@/store'
import mjMenus from "@/components/standardMenu/index.vue";
import { useUserStore } from "@/store";
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
defineOptions({
name: "Layout",
});
const userStore = useUserStore()
const userStore = useUserStore();
// 响应式断点（小屏阈值，小于此值视为小屏）
const BREAKPOINT = 1024;
@@ -66,89 +80,93 @@ const showCollapse = () => {
}
};
// 返回菜单数据
const menuList = computed(() => {
return userStore.routes || []
return userStore.routes || [];
});
// 获取一级菜单数据（不包含 children）
const topLevelMenuList = computed(() => {
return menuList.value.map(item => {
const { children, ...rest } = item
return rest
})
})
return menuList.value.map((item) => {
const { children, ...rest } = item;
return rest;
});
});
const topTitle = computed(() => {
return topLevelMenuList.value.find(path => path.path === selectedTopMenu.value)?.meta?.title || '-'
})
return (
topLevelMenuList.value.find((path) => path.path === selectedTopMenu.value)
?.meta?.title || "-"
);
});
// 当前选中的顶部菜单
const selectedTopMenu = ref<string>('')
const selectedActiveMenu = ref<string>('');
const selectedTopMenu = ref<string>("");
const selectedActiveMenu = ref<string>("");
// 根据选中的顶部菜单，获取左侧菜单列表
const sideMenuList = computed(() => {
if (!selectedTopMenu.value) {
// 默认选中第一个有 children 的菜单
const firstMenuWithChildren = menuList.value.find(item => item.children && item.children.length > 0)
const firstMenuWithChildren = menuList.value.find(
(item) => item.children && item.children.length > 0
);
if (firstMenuWithChildren) {
return (firstMenuWithChildren.children || []).map(child=>{
const fullPath = child.path.startsWith('/')
return (firstMenuWithChildren.children || []).map((child) => {
const fullPath = child.path.startsWith("/")
? child.path
: `${firstMenuWithChildren.path}/${child.path}`
: `${firstMenuWithChildren.path}/${child.path}`;
return {
...child,
path: fullPath
path: fullPath,
};
});
}
})
}
return []
return [];
}
// 根据选中的顶部菜单路径，找到对应的菜单项
const selectedMenu = menuList.value.find(item => item.path === selectedTopMenu.value)
const selectedMenu = menuList.value.find(
(item) => item.path === selectedTopMenu.value
);
if (selectedMenu && selectedMenu.children) {
return selectedMenu.children.map(child=>{
const fullPath = child.path.startsWith('/')
return selectedMenu.children.map((child) => {
const fullPath = child.path.startsWith("/")
? child.path
: `${selectedMenu.path}/${child.path}`
: `${selectedMenu.path}/${child.path}`;
return {
...child,
path: fullPath
}
})
path: fullPath,
};
});
}
return []
})
return [];
});
// 处理顶部菜单选中事件
const handleTopMenuSelect = (menuPath: string) => {
selectedTopMenu.value = menuPath
}
selectedTopMenu.value = menuPath;
};
// 左侧菜单选中事件
const handleSideMenuSelect = (menuPath: string) => {
selectedActiveMenu.value = menuPath;
}
};
// 初始化：默认选中第一个菜单
onMounted(() => {
if (topLevelMenuList.value.length > 0) {
const firstMenu = topLevelMenuList.value[0]
const firstMenu = topLevelMenuList.value[0];
if (firstMenu && firstMenu.path) {
selectedTopMenu.value = firstMenu.path
selectedTopMenu.value = firstMenu.path;
}
}
// 监听窗口大小变化
window.addEventListener('resize', handleResize);
window.addEventListener("resize", handleResize);
// 初始化时根据屏幕大小设置菜单状态
handleResize();
@@ -156,7 +174,7 @@ onMounted(() => {
// 组件卸载时移除监听
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
window.removeEventListener("resize", handleResize);
});
</script>
<style lang="scss" scoped>
@@ -204,6 +222,8 @@ onUnmounted(() => {
.mj-collapse {
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
position: absolute;
right: 0;