webman迁移

dafuweng-webman/web/src/layouts/frontend/components/menuSub.vue

@@ -0,0 +1,59 @@
+<template>
+    <template v-for="(item, idx) in props.menus" :key="idx">
+        <template v-if="!isEmpty(item.children)">
+            <el-sub-menu @click="onClickSubMenu(item)" v-blur :index="`column-${item.meta?.id}`">
+                <template #title>
+                    <Icon v-if="showIcon" :name="item.meta?.icon" color="var(--el-text-color-primary)" />
+                    {{ item.meta?.title }}
+                </template>
+                <MenuSub :menus="item.children!" :show-icon="showIcon" />
+            </el-sub-menu>
+        </template>
+        <template v-else>
+            <el-menu-item @click="onClickMenu(item)" v-blur :index="'column-' + item.meta?.id" :class="(item.name as string).replace(/[\/]/g, '-')">
+                <Icon v-if="showIcon" :name="item.meta?.icon" color="var(--el-text-color-primary)" />
+                <template #title>{{ item.meta?.title }}</template>
+            </el-menu-item>
+        </template>
+    </template>
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from 'lodash-es'
+import { onClickMenu } from '/@/utils/router'
+import type { RouteRecordRaw } from 'vue-router'
+import MenuSub from '/@/layouts/frontend/components/menuSub.vue'
+
+interface Props {
+    menus: RouteRecordRaw[]
+    showIcon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    menus: () => [],
+    showIcon: false,
+})
+
+const onClickSubMenu = (menu: RouteRecordRaw) => {
+    /**
+     * 1、'/'表示菜单规则的 path 为空
+     * 2、会员中心菜单目录不需要跳转
+     */
+    if (menu.path == '/' || menu.meta?.type == 'menu_dir') return
+    onClickMenu(menu)
+}
+</script>
+
+<style scoped lang="scss">
+.el-sub-menu .icon,
+.el-menu-item .icon {
+    vertical-align: middle;
+    margin-right: 2px;
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.is-active > .icon {
+    color: var(--el-menu-active-color) !important;
+}
+</style>