升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue

@@ -1,79 +1,117 @@
-<style lang="scss" scoped>
-@import "./styles/menu.scss";
-</style>
 <template>
-  <div class="ivu-shrinkable-menu">
-    <!-- 一级菜单 -->
-    <Menu ref="sideMenu" width="80px" theme="dark"  :active-name="currNav" @on-select="selectNav">
-      <MenuItem v-for="(item, i) in navList" :key="i" :name="item.name">
-        {{item.title}}
-      </MenuItem>
-    </Menu>
-    <!-- 二级菜单 -->
-    <Menu
-      ref="childrenMenu"
-      :active-name="$route.name"
-      width="100px"
-      @on-select="changeMenu"
+  <div class="shrinkable-menu">
+    <el-menu
+      ref="sideMenu"
+      class="nav-menu-dark"
+      :default-active="currNav"
+      @select="selectNav"
     >
-      <template v-for="item in menuList">
-        <MenuGroup :title="item.title" :key="item.id" style="padding-left:0;">
-          <MenuItem :name="menu.name" v-for="menu in item.children" :key="menu.name">
-            {{menu.title}}
-          </MenuItem>
-        </MenuGroup>
-
+      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
+        {{ item.title }}
+      </el-menu-item>
+    </el-menu>
+    <el-menu
+      ref="childrenMenu"
+      :key="currNav"
+      class="sub-menu"
+      :default-active="$route.name"
+      @select="changeMenu"
+    >
+      <template v-for="item in menuList" :key="item.id">
+        <el-menu-item-group :title="item.title">
+          <el-menu-item
+            v-for="menu in item.children"
+            :key="menu.name"
+            :index="menu.name"
+          >
+            {{ menu.title }}
+          </el-menu-item>
+        </el-menu-item-group>
       </template>
-    </Menu>
+    </el-menu>
   </div>
 </template>
 
 <script>
 import util from "@/libs/util.js";
+
 export default {
   name: "shrinkableMenu",
   computed: {
-
-    // 二级菜单列表
     menuList() {
       return this.$store.state.app.menuList;
     },
-    // 一级菜单
     navList() {
       return this.$store.state.app.navList;
     },
-    // 当前一级菜单
     currNav() {
       return this.$store.state.app.currNav;
-    }
+    },
   },
   watch: {
-    // 监听路由变化
-    $route: {
-      handler: function (val, oldVal) {
-        if (val.meta.firstRouterName && val.meta.firstRouterName !== this.currNav) {
-          this.selectNav(val.meta.firstRouterName)
-        }
+    $route(val) {
+      if (
+        val.meta.firstRouterName &&
+        val.meta.firstRouterName !== this.currNav
+      ) {
+        this.selectNav(val.meta.firstRouterName);
       }
-    }
+    },
   },
   methods: {
-    changeMenu(name) { //二级路由点击
-      this.$router.push({
-        name: name
-      });
+    changeMenu(name) {
+      if (!name) return;
+      this.$router.push({ name });
     },
-    selectNav(name) { // 一级路由点击
-      this.$store.commit("childrenMenu",this.$refs.childrenMenu)
+    selectNav(name) {
+      this.$store.commit("childrenMenu", this.$refs.childrenMenu);
       this.$store.commit("setCurrNav", name);
       this.setStore("currNav", name);
       util.initRouter(this);
     },
-  }
+  },
 };
 </script>
+
 <style lang="scss" scoped>
-.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
-    color: $theme_color;
+.shrinkable-menu {
+  height: calc(100% - 60px);
+  width: 180px;
+  display: flex;
+}
+
+.nav-menu-dark {
+  width: 80px;
+  background-color: #191a23;
+  border-right: none;
+  overflow-y: auto;
+
+  :deep(.el-menu-item) {
+    color: rgba(255, 255, 255, 0.7);
+    justify-content: center;
+    padding: 0 8px !important;
+    text-align: center;
+    line-height: 1.3;
+    height: auto;
+    min-height: 56px;
+    white-space: normal;
+  }
+
+  :deep(.el-menu-item.is-active) {
+    background-color: #fff !important;
+    color: $theme_color !important;
+  }
+}
+
+.sub-menu {
+  width: 100px;
+  overflow-y: auto;
+  border-right: none;
+
+  :deep(.el-menu-item-group__title) {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+  }
 }
 </style>