feat: 优化菜单 tag 实现，改用 Badge 并优化样式

src/components/SimpleMenu/src/SimpleMenuTag.vue

 <template>
-    <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
+    <Badge
+        v-if="getShowTag"
+        :class="['vben-simple-menu-badge', !getContent ? 'vben-simple-menu-badge--dot' : '']"
+        :dot="!getContent"
+        :count="getContent"
+        :number-style="{
+            color: 'f8f8f8',
+            lineHeight: '18px',
+            boxShadow: `0 0 0 1px #979797`,
+        }"
+    />
 </template>
 <script lang="ts">
     import type { Menu } from '/@/router/types'
 
     import { defineComponent, computed } from 'vue'
+    import { Badge } from 'ant-design-vue'
 
-    import { useDesign } from '/@/hooks/web/useDesign'
     import { propTypes } from '/@/utils/propTypes'
 
     export default defineComponent({
         name: 'SimpleMenuTag',
+        components: { Badge },
         props: {
             item: {
                 type: Object as PropType<Menu>,
@@ -20,8 +31,6 @@
             collapseParent: propTypes.bool,
         },
         setup(props) {
-            const { prefixCls } = useDesign('simple-menu')
-
             const getShowTag = computed(() => {
                 const { item } = props
 
@@ -43,23 +52,16 @@
                 return dot || collapseParent ? '' : content
             })
 
-            const getTagClass = computed(() => {
-                const { item, collapseParent } = props
-                const { tag = {} } = item || {}
-                const { dot, type = 'error' } = tag
-                const tagCls = `${prefixCls}-tag`
-                return [
-                    tagCls,
-
-                    [`${tagCls}--${type}`],
-                    {
-                        [`${tagCls}--collapse`]: collapseParent,
-                        [`${tagCls}--dot`]: dot || props.dot,
-                    },
-                ]
+            const getType = computed(() => {
+                if (!getShowTag.value) return 'error'
+                const { item } = props
+                const { tag } = item
+                const { type } = tag!
+                return type ?? 'error'
             })
+
             return {
-                getTagClass,
+                getType,
                 getShowTag,
                 getContent,
             }

src/components/SimpleMenu/src/index.less

@@ -33,6 +33,16 @@
         transition: all 0.3s;
     }
 
+    &-badge {
+        position: absolute;
+        right: 16px;
+        z-index: 1;
+
+        &--dot {
+            right: initial;
+        }
+    }
+
     &-tag {
         position: absolute;
         top: calc(50% - 8px);

src/router/helper/menuHelper.ts

@@ -72,6 +72,7 @@ export function transformRouteToMenu(routeModList: AppRouteModule[], routerMappi
                 hideMenu,
                 path: node.path,
                 ...(node.redirect ? { redirect: node.redirect } : {}),
+                ...(node.tag ? { tag: node.tag } : {}),
             }
         },
     })

src/router/routes/modules/demo/tools.ts

@@ -13,6 +13,9 @@ const tools: AppRouteModule = {
         icon: 'carbon:tools',
         title: t('routes.demo.tools.moduleName'),
     },
+    tag: {
+        dot: true,
+    },
     children: [
         {
             path: 'file',
@@ -49,6 +52,9 @@ const tools: AppRouteModule = {
                 icon: 'mdi:database-lock-outline',
             },
             component: () => import('/@/views/demo/tools/database/index.vue'),
+            tag: {
+                content: '开发中',
+            },
         },
         {
             path: 'online',

src/router/types.ts

@@ -17,10 +17,11 @@ export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
     children?: AppRouteRecordRaw[]
     props?: Recordable
     fullPath?: string
+    tag?: MenuTag
 }
 
 export interface MenuTag {
-    type?: 'primary' | 'error' | 'warn' | 'success'
+    type?: 'default' | 'warning' | 'error' | 'success' | 'processing'
     content?: string
     dot?: boolean
 }

types/vue-router.d.ts

@@ -47,5 +47,11 @@ declare module 'vue-router' {
         hideLayout?: boolean
         // 自动全屏
         autoFullScreen?: boolean
+        // tag
+        tag?: {
+            type?: 'primary' | 'error' | 'warn' | 'success'
+            content?: string
+            dot?: boolean
+        }
     }
 }