实现效果如下

发布的功能还没有实现，仅仅实现了简单的页面显示
关键代码如下

<template>
  <div class="layout">
      <el-header class="header">
        <div class="logo">EasyBlog</div>
      </el-header>
      <el-container class="container">
        <el-aside width="200px"
                  class="left-aside">
          <div>
            <el-button class="post-btn"
                       @click="createHtml"> 发布</el-button>
          </div>
          <div class="menu-panel">
            <ul>
              <li v-for="(menu,index) in menuList">
                <span class="menu-title-p"
                      @click="openClose(index)">
                  <span :class="['iconfont',menu.icon]"></span>
                  <span class="menu-title">{{menu.title}}</span>
                  <span :class="['iconfont','open-close',menu.open?'icon-open':'icon-close']"></span>
                </span>
                <ul class="sub-menu"
                    v-show="menu.open">
                  <li v-for="subMenu in menu.children">
                    <router-link :to="subMenu.path"
                                 :class="['sub-menu-item',activePath==subMenu.path?'active':'']"
                                 v-if="subMenu.roleType == null || subMenu.roleType == userInfo.roleType">{{subMenu.title}}</router-link>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-aside>
      </el-container> 
  </div>
</template>
<script setup>
import { getCurrentInstance, ref, watch, reactive } from "vue"
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const menuList = ref([
  {
    title: "博客",
    icon: "icon-blog",
    open: true,
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
      },
      {
        title: "分类管理",
        path: "/blog/category",
      },
    ],
  },
  {
    title: "专题",
    icon: "icon-zhuanti",
    open: true,
    children: [
      {
        title: "专题管理",
        path: "/special/list",
      },
    ],
  },
  {
    title: "设置",
    icon: "icon-settings",
    open: true,
    children: [
      {
        title: "个人信息设置",
        path: "/settings/my",
      },
      {
        title: "博客成员",
        path: "/settings/user",
      },
      {
        title: "系统设置",
        path: "/settings/sysInfo",
        roleType: 1,
      },
    ],
  },
  {
    title: "回收站",
    icon: "icon-delete",
    open: true,
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
      },
    ],
  },
]);
const api = {
  "getUserInfo": "getUserInfo",
  "logout": "logout",
  "createHtml": "createHtml",
  "checkProgress": "checkProgress",
}
const openClose = (index) => {
  const open = menuList.value[index].open;
  menuList.value[index].open = !open;
}
const userInfo = ref({});
const getUserInfo = async () => {//???????
  let result = await proxy.Request({
    url: api.getUserInfo
  })

  if (!result) {
    return;
  }
  userInfo.value = result.data;
  userInfo.value.avatar = proxy.globalInfo.imageUrl + result.data.avatar;
}
getUserInfo();
</script>

1. openClose函数，实现点击子标题的展开与收缩，通过index确定是对哪个标题进行操作，直接对对象中的open标记取反即可

const openClose = (index) => {
  const open = menuList.value[index].open;
  menuList.value[index].open = !open;
}

2. 将所有标题放在一个对象数组中，在展示时，只需要一次读取数组即可，极大的缩小了代码量。

const menuList = ref([
  {
    title: "博客",
    icon: "icon-blog",
    open: true,
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
      },
      {
        title: "分类管理",
        path: "/blog/category",
      },
    ],
  },
  {
    title: "专题",
    icon: "icon-zhuanti",
    open: true,
    children: [
      {
        title: "专题管理",
        path: "/special/list",
      },
    ],
  },
  {
    title: "设置",
    icon: "icon-settings",
    open: true,
    children: [
      {
        title: "个人信息设置",
        path: "/settings/my",
      },
      {
        title: "博客成员",
        path: "/settings/user",
      },
      {
        title: "系统设置",
        path: "/settings/sysInfo",
        roleType: 1,
      },
    ],
  },
  {
    title: "回收站",
    icon: "icon-delete",
    open: true,
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
      },
    ],
  },
]);