daimp-front/sub-operation-service/src/layouts/component/Menu/SubItem.vue

<!--
 * @Description:
 * @Author: zenghua.wang
 * @Date: 2023-06-20 14:29:45
 * @LastEditors: zenghua.wang
 * @LastEditTime: 2024-01-27 16:07:37
-->
<template>
  <template v-if="item.children">
    <!--    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">-->
    <!--      <layout-link :to="onlyOneChild.path">-->
    <!--        <el-menu-item :index="onlyOneChild.path">-->
    <!--          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta?.title }}</template>-->
    <!--        </el-menu-item>-->
    <!--      </layout-link>-->
    <!--    </template>-->
    <el-sub-menu :index="item.path" teleported>
      <template #title>
        <!-- 左侧图标 -->
        <img :src="getAssetsFile('images/smartFarm/' + item.icon)?.href ?? ''" alt="" />
        <span>{{ item.title }}</span>
        <!--        <layout-icon :size="20" :icon="item?.meta?.icon" />-->
        <!--        <span>{{ item.meta && item.meta?.title }}</span>-->
      </template>
      <!-- 右侧图标（替换默认箭头）没生效 -->
      <template #expand-icon>
        <img alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
      </template>
      <sub-item v-for="child in item.children" :key="child.path" :item="child" />
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item-group :title="item.title">
      <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
        <span style="color: black !important">{{ child.title }}</span>
      </el-menu-item>
    </el-menu-item-group>
  </template>
</template>

<script setup name="sub-item">
import { ref } from 'vue';
// import { isExternal } from '@/utils/validate.js';
import LayoutLink from './Link';
import LayoutIcon from './Icon';
import { getAssetsFile } from '@/utils/index.js';
// import path from 'path-browserify';

defineProps({
  item: {
    type: Object,
    required: true,
  },
  basePath: {
    type: String,
    default: '',
  },
});

const onlyOneChild = ref(null);
const hasOneShowingChild = (children = [], parent) => {
  const showingChildren = children.filter((item) => {
    // 过滤掉需要隐藏的菜单
    if (item.hidden) {
      return false;
    } else {
      // 临时设置（如果只有一个显示子项，则将使用）
      onlyOneChild.value = item;
      return true;
    }
  });

  // 当只有一个子路由器时，默认情况下会显示该子路由器
  if (showingChildren.length === 1) {
    return true;
  }
  // 如果没有要显示的子路由器，则显示父路由器
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, noShowingChildren: true };
    return true;
  }

  return false;
};

// const resolvePath = (routePath) => {
//   if (isExternal(routePath)) {
//     return routePath;
//   }
//   if (isExternal(props.basePath)) {
//     return props.basePath;
//   }
//   return path.resolve(props.basePath, routePath);
// };
</script>

<style scoped>
/* 强制覆盖默认样式 */
.isOpen {
  width: 16px !important; /* 设置图片宽度 */
  height: 16px !important; /* 设置图片高度 */
  margin-left: auto !important; /* 让图标靠右 */
  display: block !important; /* 避免被隐藏 */
  transition: transform 0.3s; /* 添加旋转动画 */
}

/* 修复父元素可能存在的样式冲突 */
.el-sub-menu__title {
  overflow: visible !important; /* 防止图片被裁剪 */
}

.item-children {
  text-align: center;
  font-size: 16px;
  margin-top: 8px;
  transition: transform 0.3s ease;
  .dot {
    display: inline-block;
    height: 4px;
    margin-right: 15px;
    width: 4px;
    border-radius: 90px;
    background-color: black;
    vertical-align: middle;
  }
}
</style>