From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 27 五月 2025 17:52:03 +0800 Subject: [PATCH] 页面样式修改 --- src/layout/components/Sidebar/SidebarItem.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 103 insertions(+), 0 deletions(-) diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue new file mode 100644 index 0000000..27f987c --- /dev/null +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -0,0 +1,103 @@ +<template> + <div v-if="!item.hidden"> + <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> + <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> + <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"> + <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/> + <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template> + </el-menu-item> + </app-link> + </template> + + <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported> + <template v-if="item.meta" #title> + <svg-icon :icon-class="item.meta && item.meta.icon" /> + <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span> + </template> + + <sidebar-item + v-for="(child, index) in item.children" + :key="child.path + index" + :is-nest="true" + :item="child" + :base-path="resolvePath(child.path)" + class="nest-menu" + /> + </el-sub-menu> + </div> +</template> + +<script setup> +import { isExternal } from '@/utils/validate' +import AppLink from './Link' +import { getNormalPath } from '@/utils/ruoyi' + +const props = defineProps({ + // route object + item: { + type: Object, + required: true + }, + isNest: { + type: Boolean, + default: false + }, + basePath: { + type: String, + default: '' + } +}) + +const onlyOneChild = ref({}) + +function hasOneShowingChild(children = [], parent) { + if (!children) { + children = [] + } + const showingChildren = children.filter(item => { + if (item.hidden) { + return false + } + onlyOneChild.value = item + return true + }) + + // When there is only one child router, the child router is displayed by default + if (showingChildren.length === 1) { + return true + } + + // Show parent if there are no child router to display + if (showingChildren.length === 0) { + onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } + return true + } + + return false +} + +function resolvePath(routePath, routeQuery) { + if (isExternal(routePath)) { + return routePath + } + if (isExternal(props.basePath)) { + return props.basePath + } + if (routeQuery) { + let query = JSON.parse(routeQuery) + return { path: getNormalPath(props.basePath + '/' + routePath), query: query } + } + return getNormalPath(props.basePath + '/' + routePath) +} + +function hasTitle(title){ + if (title.length > 5) { + return title + } else { + return "" + } +} +</script> +<style scoped> + +</style> -- Gitblit v1.9.3