From a88eab39f6b2f5c33913d51fac4e885c052ed4a1 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期四, 21 八月 2025 14:39:00 +0800 Subject: [PATCH] 整体样式修改 --- src/layout/components/Sidebar/SidebarItem.vue | 156 ++++++++++++++++++++++++++-------------------------- 1 files changed, 78 insertions(+), 78 deletions(-) diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 27f987c..1a84a86 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -1,30 +1,30 @@ <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> + <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> @@ -33,69 +33,69 @@ import { getNormalPath } from '@/utils/ruoyi' const props = defineProps({ - // route object - item: { - type: Object, - required: true - }, - isNest: { - type: Boolean, - default: false - }, - basePath: { - type: String, - default: '' - } + // 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 + 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) + 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 "" - } + if (title.length > 5) { + return title + } else { + return "" + } } </script> <style scoped> -- Gitblit v1.9.3