feat: add tag display to the menu

vben
1 parent 4baf90a5
Showing 5 changed files with 76 additions and 2 deletions
CHANGELOG.zh_CN.md
src/components/Menu/src/MenuContent.tsx
src/components/Menu/src/index.less
src/router/menus/modules/dashboard.ts
src/router/types.d.ts
@@ -3,6 +3,7 @@
 ### ✨ Features
  
 - 表单项的`componentsProps`支持函数类型
+- 菜单新增 tag 显示
  
 ### ⚡ Performance Improvements
  
@@ -35,6 +35,23 @@ export default defineComponent({
       return icon ? <Icon icon={icon} size={18} class="menu-item-icon" /> : null;
     }
  
+    function renderTag() {
+      const { item, showTitle } = props;
+      if (!item || showTitle) return null;
+
+      const { tag } = item;
+      if (!tag) return null;
+
+      const { dot, content, type = 'error' } = tag;
+      if (!dot && !content) return null;
+      const cls = ['basic-menu__tag'];
+
+      dot && cls.push('dot');
+      type && cls.push(type);
+
+      return <span class={cls}>{dot ? '' : content}</span>;
+    }
+
     return () => {
       if (!props.item) {
         return null;
@@ -46,17 +63,21 @@ export default defineComponent({
  
       const beforeStr = name.substr(0, index);
       const afterStr = name.substr(index + searchValue.length);
+      const cls = showTitle ? 'show-title' : 'basic-menu__name';
       return (
         <>
           {renderIcon(icon!)}
           {index > -1 && searchValue ? (
-            <span class={showTitle ? 'show-title' : ''}>
+            <span class={cls}>
               {beforeStr}
               <span class={`basic-menu__keyword`}>{searchValue}</span>
               {afterStr}
             </span>
           ) : (
-            <span class={[showTitle ? 'show-title' : '']}>{name}</span>
+            <span class={[cls]}>
+              {name}
+              {renderTag()}
+            </span>
           )}
         </>
       );
@@ -51,6 +51,45 @@
  
   // collapsed show title end
  
+  &__name {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__tag {
+    display: inline-block;
+    padding: 2px 4px;
+    margin-right: 4px;
+    font-size: 12px;
+    line-height: 14px;
+    color: #fff;
+    border-radius: 2px;
+
+    &.dot {
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &.primary {
+      background: @primary-color;
+    }
+
+    &.error {
+      background: @error-color;
+    }
+
+    &.success {
+      background: @success-color;
+    }
+
+    &.warn {
+      background: @warning-color;
+    }
+  }
   // scrollbar -s tart
   &__content {
     /* 滚动槽 */
@@ -4,10 +4,16 @@ const menu: MenuModule = {
   menu: {
     name: 'Dashboard',
     path: '/dashboard',
+    // tag: {
+    //   dot: true,
+    // },
     children: [
       {
         path: '/workbench',
         name: '工作台',
+        // tag: {
+        //   content: 'new',
+        // },
       },
       {
         path: '/analysis',
@@ -43,6 +43,11 @@ export interface AppRouteRecordRaw extends Omit&lt;RouteRecordRaw, &#39;meta&#39;&gt; {
   props?: any;
   fullPath?: string;
 }
+export interface MenuTag {
+  type?: 'primary' | 'error' | 'warn' | 'success';
+  content?: string;
+  dot?: boolean;
+}
  
 export interface Menu {
   name: string;
@@ -60,6 +65,8 @@ export interface Menu {
   roles?: RoleEnum[];
  
   meta?: Partial<RouteMeta>;
+
+  tag?: MenuTag;
 }
 export interface MenuModule {
   orderNo?: number;