feat(theme:layout-default): add layout-default-top-menu-item (#1570)

Author: cipchk

packages/theme/layout-default/index.en-US.md

@@ -141,6 +141,10 @@ The layout can be dynamically managed at runtime through the `LayoutDefaultServi
 
 The trigger style of the head item.
 
+### layout-default-top-menu-item
+
+Header business menu item.
+
 ## Layout description
 
 In the upper-left-right layout mode, it is applied to the development of the **business page**. Its specification details:

packages/theme/layout-default/index.zh-CN.md

@@ -141,6 +141,10 @@ export class LayoutBasicComponent {
 
 头部项的触发样式。
 
+### layout-default-top-menu-item
+
+头部业务菜单项。
+
 ## 布局说明
 
 按上-左-右布局方式，运用于**业务页**的开发。其规范细节：

packages/theme/layout-default/layout-top-menu-item.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+import { BooleanInput, InputBoolean } from '@delon/util/decorator';
+
+@Component({
+  selector: 'layout-default-top-menu-item',
+  template: `<ng-content></ng-content>`,
+  host: {
+    '[class.alain-default__nav-item]': `true`,
+    '[class.alain-default__top-menu-item]': `true`,
+    '[class.alain-default__top-menu-item-selected]': `selected`,
+    '[class.alain-default__top-menu-item-disabled]': `disabled`
+  },
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class LayoutDefaultTopMenuItemComponent {
+  static ngAcceptInputType_selected: BooleanInput;
+  static ngAcceptInputType_disabled: BooleanInput;
+
+  @Input() @InputBoolean() selected = false;
+  @Input() @InputBoolean() disabled = false;
+}

packages/theme/layout-default/layout.module.ts

@@ -13,14 +13,16 @@ import { LayoutDefaultHeaderItemTriggerDirective } from './layout-header-item-tr
 import { LayoutDefaultHeaderItemComponent } from './layout-header-item.component';
 import { LayoutDefaultHeaderComponent } from './layout-header.component';
 import { LayoutDefaultNavComponent } from './layout-nav.component';
+import { LayoutDefaultTopMenuItemComponent } from './layout-top-menu-item';
 import { LayoutDefaultComponent } from './layout.component';
 
 const COMPONENTS = [
   LayoutDefaultComponent,
   LayoutDefaultNavComponent,
   LayoutDefaultHeaderComponent,
   LayoutDefaultHeaderItemComponent,
-  LayoutDefaultHeaderItemTriggerDirective
+  LayoutDefaultHeaderItemTriggerDirective,
+  LayoutDefaultTopMenuItemComponent
 ];
 
 @NgModule({

packages/theme/layout-default/public_api.ts

@@ -3,6 +3,7 @@ export * from './layout.module';
 export * from './layout-header.component';
 export * from './layout-header-item.component';
 export * from './layout-header-item-trigger.directive';
+export * from './layout-top-menu-item';
 export * from './layout-nav.component';
 export * from './types';
 export * from './layout.service';

packages/theme/layout-default/style/_header.less

@@ -43,6 +43,10 @@
     margin: 0;
     padding: 0;
 
+    &:first-child {
+      margin-right: 16px;
+    }
+
     &-middle {
       flex: 1;
     }
@@ -76,7 +80,7 @@
 
       &:hover {
         color: #fff;
-        background-color: rgba(255, 255, 255, 0.2) !important;
+        background-color: @alain-default-header-nav-bg-hover;
       }
 
       > i,
@@ -87,6 +91,24 @@
       }
     }
   }
+
+  &__top-menu-item {
+    display: flex;
+    align-items: center;
+    height: @alain-default-header-hg;
+    padding: @alain-default-header-top-menu-item-padding;
+    border-radius: 0;
+
+    &-selected {
+      color: #fff;
+      background-color: @alain-default-header-nav-bg-hover;
+    }
+
+    &-disabled {
+      opacity: .5;
+      pointer-events: none;
+    }
+  }
 }
 
 // Search

packages/theme/layout-default/style/theme-compact.less

@@ -5,3 +5,5 @@
 
 @alain-default-aside-collapsed-nav-fs: 20px;
 @alain-default-aside-collapsed-nav-img-wh: 20px;
+
+@alain-default-header-top-menu-item-padding: 0 8px;

packages/theme/layout-default/style/theme-default.less

@@ -8,6 +8,9 @@
 @alain-default-header-icon-fs: 18px;
 @alain-default-header-logo-max-height: 36px;
 @alain-default-header-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
+@alain-default-header-nav-bg-hover: rgba(255, 255, 255, 0.2);
+
+@alain-default-header-top-menu-item-padding: 0 16px;
 
 @alain-default-aside-wd: 200px;
 @alain-default-aside-bg: #fff;

src/dev/layout.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
-// import { Router } from '@angular/router';
 import {
   AppstoreOutline,
   BellOutline,
@@ -25,6 +25,7 @@ import {
 import { ReuseCustomContextMenu } from '@delon/abc/reuse-tab';
 import { ALAIN_I18N_TOKEN, Menu, MenuService, RTLService, SettingsService, User } from '@delon/theme';
 import { LayoutDefaultOptions } from '@delon/theme/layout-default';
+import { deepCopy } from '@delon/util/other';
 import { NzIconService } from 'ng-zorro-antd/icon';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -60,6 +61,16 @@ const ICONS = [
           <i nz-icon nzType="github"></i>
         </a>
       </layout-default-header-item>
+      <layout-default-header-item direction="middle">
+        <layout-default-top-menu-item
+          *ngFor="let m of topMenus"
+          (click)="changeMenu(m.key)"
+          [selected]="m.selected"
+          [disabled]="m.disabled"
+        >
+          <i nz-icon nzType="github"></i> {{ m.label }}
+        </layout-default-top-menu-item>
+      </layout-default-header-item>
       <layout-default-header-item direction="right">
         <a class="alain-default__nav-item" (click)="rtl.toggle()">{{ rtl.nextDir | uppercase }}</a>
       </layout-default-header-item>
@@ -106,6 +117,11 @@ export class DevLayoutComponent implements OnInit {
   get user(): User {
     return this.settings.user;
   }
+  topMenus: Array<{ key: string; label: string; selected?: boolean; disabled?: boolean }> = [
+    { key: '', label: 'Default', selected: true },
+    { key: 'bus', label: 'Bus', selected: false },
+    { key: 'disabled', label: 'Disabbled', disabled: true }
+  ];
 
   menus: Menu[] = [
     {
@@ -190,14 +206,32 @@ export class DevLayoutComponent implements OnInit {
     private menuSrv: MenuService,
     public settings: SettingsService,
     public msgSrv: NzMessageService,
-    // private router: Router,
+    private router: Router,
     @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
     public rtl: RTLService
   ) {
     iconSrv.addIcon(...ICONS);
     // this.testReuse();
   }
 
+  changeMenu(key: string): void {
+    this.menuSrv.add(
+      key === ''
+        ? deepCopy(this.menus)
+        : [
+            {
+              text: 'test',
+              group: true,
+              children: [{ text: `TYPE - ${key}`, link: '/dev/view/1', icon: 'anticon anticon-appstore' }]
+            }
+          ]
+    );
+    for (let tm of this.topMenus) {
+      tm.selected = tm.key === key;
+    }
+    this.loadFirstValidMenu();
+  }
+
   // private testReuse(): void {
   //   const urls = ['/dev/l2', '/dev/l3', '/dev/l4', '/dev/l5', '/dev/l6'];
   //   const fn = (pos: number) => {
@@ -222,6 +256,17 @@ export class DevLayoutComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.menuSrv.add(this.menus);
+    this.menuSrv.add(deepCopy(this.menus));
+  }
+
+  private loadFirstValidMenu(): void {
+    let res: Menu | undefined;
+    this.menuSrv.visit(this.menuSrv.menus, item => {
+      if (res == null && item.hide !== true && item.link != null && item.link.length > 0) {
+        res = item;
+      }
+    });
+    if (res == null) return;
+    this.router.navigateByUrl(res.link!!);
   }
 }