diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 339df473..ccef47a8 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
### ✨ Features
- 表单项的`componentsProps`支持函数类型
+- 菜单新增 tag 显示
### ⚡ Performance Improvements
diff --git a/src/components/Menu/src/MenuContent.tsx b/src/components/Menu/src/MenuContent.tsx
index 79fe3e55..f0ffb026 100644
--- a/src/components/Menu/src/MenuContent.tsx
+++ b/src/components/Menu/src/MenuContent.tsx
@@ -35,6 +35,23 @@ export default defineComponent({
return 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 {dot ? '' : content};
+ }
+
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 ? (
-
+
{beforeStr}
{afterStr}
) : (
- {name}
+
+ {name}
+ {renderTag()}
+
)}
>
);
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
index a75b0a2c..3cc58080 100644
--- a/src/components/Menu/src/index.less
+++ b/src/components/Menu/src/index.less
@@ -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 {
/* 滚动槽 */
diff --git a/src/router/menus/modules/dashboard.ts b/src/router/menus/modules/dashboard.ts
index 36463831..0078573e 100644
--- a/src/router/menus/modules/dashboard.ts
+++ b/src/router/menus/modules/dashboard.ts
@@ -4,10 +4,16 @@ const menu: MenuModule = {
menu: {
name: 'Dashboard',
path: '/dashboard',
+ // tag: {
+ // dot: true,
+ // },
children: [
{
path: '/workbench',
name: '工作台',
+ // tag: {
+ // content: 'new',
+ // },
},
{
path: '/analysis',
diff --git a/src/router/types.d.ts b/src/router/types.d.ts
index 601aedb7..4baa2107 100644
--- a/src/router/types.d.ts
+++ b/src/router/types.d.ts
@@ -43,6 +43,11 @@ export interface AppRouteRecordRaw extends Omit {
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;
+
+ tag?: MenuTag;
}
export interface MenuModule {
orderNo?: number;