go-admin-ui的菜单分割线设计思路和代码实现

在菜单管理添加分割线，类似这种：

思路：利用空间结构和数据特点来唯一区分出分割线，来划分业务区域

<template>
  <div>
    <h1>Split Line Controller</h1>
    <ul>
      <li v-for="route in displayedRoutes" :key="route.path">
        {{ route.meta?.title || '' }} - {{ route.hidden ? '隐藏' : '显示' }}
        <ul v-if="filteredChildren(route).length">
          <li v-for="child in filteredChildren(route)" :key="child.path">
            ------ {{ child.meta?.title || '' }} - {{ child.hidden ? '隐藏' : '显示' }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SplitLineController",
  data() {
    return {
      routes: [
        {
          "path": "/redirect",
          "hidden": true,
          "children": [
            {
              "path": "/redirect/:path*"
            }
          ]
        },
        {
          "path": "/login",
          "hidden": true
        },
        {
          "path": "/auth-redirect",
          "hidden": true
        },
        {
          "path": "/404",
          "hidden": true
        },
        {
          "path": "/401",
          "hidden": true
        },
        {
          "path": "/",
          "redirect": "/home-page",
          "hidden": true,
          "children": [
            {
              "path": "home-page",
              "name": "HomePage",
              "meta": {
                "title": "欢迎页",
                "icon": "home-page"
              }
            }
          ]
        },
        {
          "path": "/profile",
          "redirect": "/profile/index",
          "hidden": true,
          "children": [
            {
              "path": "index",
              "name": "Profile",
              "meta": {
                "title": "个人中心",
                "icon": "user"
              }
            }
          ]
        },
        {
          "path": "/home-page",
          "hidden": false,
          "children": [],
          "name": "HomePage",
          "meta": {
            "title": "首页",
            "icon": "home-page"
          }
        },
        {
          "path": "/permission",
          "hidden": true,
          "children": [
            {
              "path": "/permission/my-application",
              "hidden": false,
              "children": [],
              "name": "MyApplicationManage",
              "meta": {
                "title": "我的申请",
                "icon": "api-monitor"
              }
            }
          ],
          "name": "",
          "meta": {
            "title": "权限申请",
            "icon": "access"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx业务分割线1",
            "icon": ""
          }
        },
        {
          "path": "/apple",
          "hidden": false,
          "children": [
            {
              "path": "/apple/tree",
              "hidden": false,
              "children": [],
              "name": "tree",
              "meta": {
                "title": "苹果树木",
                "icon": "nested"
              }
            },
            {
              "path": "/apple/leaf",
              "hidden": false,
              "children": [],
              "name": "leaf",
              "meta": {
                "title": "苹果叶子",
                "icon": "alarm-settings"
              }
            }
          ],
          "name": "AppleContent",
          "meta": {
            "title": "苹果内容质量",
            "icon": "list"
          }
        },
        {
          "path": "/banana",
          "hidden": false,
          "children": [
            {
              "path": "/banana/tree",
              "hidden": false,
              "children": [],
              "name": "tree",
              "meta": {
                "title": "香蕉树木",
                "icon": "size"
              }
            },
            {
              "path": "/banana/leaf",
              "hidden": false,
              "children": [],
              "name": "leaf",
              "meta": {
                "title": "香蕉叶子",
                "icon": "edit"
              }
            },
          ],
          "name": "",
          "meta": {
            "title": "香蕉评级后台",
            "icon": "peoples"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx业务分割线2",
            "icon": ""
          }
        },
        {
          "path": "/cat",
          "hidden": false,
          "children": [
            {
              "path": "/cat/live",
              "hidden": false,
              "children": [],
              "name": "Live",
              "meta": {
                "title": "猫",
                "icon": "build"
              }
            },
            {
              "path": "/dog/live",
              "hidden": false,
              "children": [],
              "name": "LiveComDistributionMange",
              "meta": {
                "title": "狗",
                "icon": "api-server"
              }
            }
          ],
          "name": "",
          "meta": {
            "title": "宠物管理",
            "icon": "build"
          }
        },
        {
          "path": "",
          "hidden": false,
          "children": [],
          "name": "",
          "meta": {
            "title": "xx管理分割线3",
            "icon": ""
          }
        },
        {
          "path": "/person",
          "hidden": false,
          "children": [
            {
              "path": "/person/myself",
              "hidden": false,
              "children": [],
              "name": "SysBusinessUserManage",
              "meta": {
                "title": "我的介绍",
                "icon": "people"
              }
            }
          ],
          "name": "Admin",
          "meta": {
            "title": "系统管理",
            "icon": "api-server"
          }
        }
      ],
      displayedRoutes: []
    };
  },
  methods: {
    controlSplits(routes) {
      let displayedRoutes = JSON.parse(JSON.stringify(routes)); // 深拷贝以保持原始结构
      for (let i = 0; i < displayedRoutes.length; i++) {
        const currentRoute = displayedRoutes[i];
        if (this.isSplitLine(currentRoute)) {
          let hasVisibleSibling = false;
          for (let j = i + 1; j < displayedRoutes.length; j++) {
            const nextRoute = displayedRoutes[j];
            if (this.isSplitLine(nextRoute)) break;
            if (!nextRoute.hidden) {
              hasVisibleSibling = true;
              break;
            }
          }
          currentRoute.hidden = !hasVisibleSibling;
        }
      }
      return displayedRoutes;
    },
    isSplitLine(route) {
      return route.path === "" && !route.component && route.meta && !route.meta.icon;
    },
    filteredChildren(route) {
      if (route.children) {
        return route.children.filter(child => !child.hidden);
      }
      return [];
    }
  },
  created() {
    this.displayedRoutes = this.controlSplits(this.routes);
  }
};
</script>

<style scoped>
h1 {
  font-size: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}
</style>