wlkjyy
f7c3be1d30
- Created ImageForm.vue as standalone page for add/edit image functionality - Removed dialog-based image form from VmImages.vue - Implemented tagsViewStore for global tab state management - Added automatic tab closing on form cancel/back - Fixed data persistence issue when switching between image edits - Removed quick actions section from ImageForm - Updated router configuration for new image form route
87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<el-sub-menu v-if="hasChildren" :index="menu.path">
|
|
<template #title>
|
|
<el-icon v-if="menu.icon || menu.meta?.icon">
|
|
<component :is="menu.icon || menu.meta?.icon" />
|
|
</el-icon>
|
|
<span>{{ menu.title || menu.meta?.title }}</span>
|
|
</template>
|
|
<sidebar-menu-item
|
|
v-for="child in menu.children"
|
|
:key="child.path"
|
|
:menu="child"
|
|
/>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="menu.path">
|
|
<el-icon v-if="menu.icon || menu.meta?.icon">
|
|
<component :is="menu.icon || menu.meta?.icon" />
|
|
</el-icon>
|
|
<template #title>{{ menu.title || menu.meta?.title }}</template>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import * as ElementPlusIcons from '@element-plus/icons-vue'
|
|
|
|
// 接收菜单项属性
|
|
const props = defineProps({
|
|
menu: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
// 判断是否有子菜单
|
|
const hasChildren = computed(() => {
|
|
return props.menu.children && props.menu.children.length > 0
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-icon {
|
|
margin-right: 12px;
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
transition: color 0.2s ease;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
|
|
color: #7f8c8d !important;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.el-menu-item:hover .el-icon,
|
|
:deep(.el-sub-menu__title:hover .el-icon) {
|
|
color: #34495e !important;
|
|
}
|
|
|
|
/* 激活菜单项图标 */
|
|
.el-menu-item.is-active .el-icon {
|
|
color: #2c3e50 !important;
|
|
}
|
|
|
|
:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
|
|
color: #2c3e50 !important;
|
|
}
|
|
|
|
/* 菜单文字样式 */
|
|
.el-menu-item span, :deep(.el-sub-menu__title span) {
|
|
font-size: 14px;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
/* 子菜单项样式优化 */
|
|
:deep(.el-sub-menu .el-menu-item) {
|
|
font-size: 13px;
|
|
padding-left: 48px !important;
|
|
}
|
|
|
|
:deep(.el-sub-menu .el-menu-item .el-icon) {
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
</style> |