@yelon/bis 20.0.1 → 20.0.2

package/fesm2022/layout.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { inject, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { YunzaiHttpI18NService, _HttpClient, I18nPipe } from '@yelon/theme';
+import { _HttpClient, YunzaiHttpI18NService, I18nPipe } from '@yelon/theme';
 import * as i3$1 from 'ng-zorro-antd/dropdown';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzFormModule } from 'ng-zorro-antd/form';
@@ -28,7 +28,7 @@ import * as i1$1 from '@yelon/theme/layout-default';
 import { LayoutDisplayService, LayoutDefaultModule } from '@yelon/theme/layout-default';
 import * as i12 from '@yelon/theme/theme-btn';
 import { ThemeBtnModule } from '@yelon/theme/theme-btn';
-import { WINDOW, YUNZAI_CONFIG, useLocalStorageHeader, NavType, useLocalStorageProjectInfo, hasFavicon, setFavicon, useLocalStorageCurrent, useLocalStorageHeaderType, useLocalStorageDefaultRoute, log } from '@yelon/util';
+import { YunzaiConfigService, WINDOW, useLocalStorageHeader, YUNZAI_CONFIG, NavType, useLocalStorageProjectInfo, hasFavicon, setFavicon, useLocalStorageCurrent, useLocalStorageHeaderType, useLocalStorageDefaultRoute, log } from '@yelon/util';
 import * as i7 from 'ng-zorro-antd/avatar';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import * as i11 from 'ng-zorro-antd/descriptions';
@@ -38,36 +38,36 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import * as i10 from 'ng-zorro-antd/skeleton';
 import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 import { Subject, takeUntil } from 'rxjs';
+import { mergeBisConfig } from '@yelon/bis/config';
 import * as i2$1 from 'ng-zorro-antd/menu';
 
 class YunzaiNavApplicationComponent {
-    $destroy = new Subject();
+    config = mergeBisConfig(inject(YunzaiConfigService));
+    http = inject(_HttpClient);
+    win = inject(WINDOW);
+    i18n = inject(YunzaiHttpI18NService);
+    destroy$ = new Subject();
     state = {
         active: false,
-        type: 'mine',
+        type: 'all',
         topic: undefined,
         topics: [],
         list: [],
         search: null
     };
     get showAllMenu() {
-        if (this.bis.nav)
-            return this.bis.nav.all;
+        if (this.config.nav)
+            return this.config.nav.all;
         return true;
     }
     get showMineMenu() {
-        if (this.bis.nav)
-            return this.bis.nav.mine;
+        if (this.config.nav)
+            return this.config.nav.mine;
         return true;
     }
-    i18n = inject(YunzaiHttpI18NService);
-    http = inject(_HttpClient);
-    win = inject(WINDOW);
-    conf = inject(YUNZAI_CONFIG);
-    bis = this.conf.bis;
     ngOnInit() {
         this.fetchAllTopic();
-        this.attachNav('mine');
+        this.attachNav('all');
         this.win.addEventListener('click', (event) => {
             const { target } = event;
             const btn = this.win.document.getElementById('navBtn');
@@ -135,7 +135,7 @@ class YunzaiNavApplicationComponent {
                 appId: topic.key,
                 createDate: new Date()
             })
-                .pipe(takeUntil(this.$destroy))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe();
         }
         switch (topic.target) {
@@ -179,10 +179,10 @@ class YunzaiNavApplicationComponent {
         }
     }
     ngOnDestroy() {
-        this.$destroy.complete();
+        this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: YunzaiNavApplicationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: YunzaiNavApplicationComponent, isStandalone: true, selector: "yunzai-layout-nav-application", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: YunzaiNavApplicationComponent, isStandalone: true, selector: "yunzai-layout-nav-application", ngImport: i0, template: `
     <ng-template #search>
       <div nz-row class="yz-application-list-search">
         <nz-input-group [nzPrefix]="prefixTemplate">
@@ -195,56 +195,70 @@ class YunzaiNavApplicationComponent {
     </ng-template>
 
     <ng-template #ld>
-      <div style="overflow: hidden;width: 100%; height: calc(100% - 58px)">
-        <div class="yz-application-list">
-          <ul>
-            <li *ngFor="let topic of state.list">
+      <div class="yz-application-list">
+        <ul>
+          @for (topic of state.list; track topic) {
+            <li>
               <h5>{{ topic.name | i18n }}</h5>
-              <a data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" href="javascript:;" *ngFor="let nav of topic.children" (click)="open(nav)">{{ nav.name | i18n }}</a>
+              @for (nav of topic.children; track nav) {
+                <a data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" href="javascript:;" (click)="open(nav)">{{ nav.name | i18n }}</a>
+              }
             </li>
-          </ul>
-        </div>
+          }
+        </ul>
       </div>
     </ng-template>
 
-    <div data-event-id="_nav_app" id="navBtn" class="yunzai-default__nav-item" (click)="diffChange()">{{ 'mode.nav' | i18n }}</div>
+    <div data-event-id="_nav_app" id="navBtn" class="yunzai-default__nav-item" (click)="diffChange()">{{ 'mode.nav' | i18n }} </div>
 
-    <div class="yz-application" id="navDropdown" *ngIf="state.active">
-      <div class="yz-application-topic">
-        <h2>{{ 'mode.nav' | i18n }}</h2>
-        <dl>
-          <dd *ngIf="showMineMenu" data-event-id="_nav_topic" data-name="我的应用" class="yz-application-text" (click)="attachNav('mine')">
-            <b> {{ 'mode.nav.mine' | i18n }}</b>
-            <nz-icon nzType="right" nzTheme="outline"></nz-icon>
-          </dd>
-          <dd data-event-id="_nav_topic" [attr.data-name]="nav.name | i18n" class="yz-application-text" *ngFor="let nav of state.topics" (click)="attachNav('other', nav)">
-            <b>{{ nav.name | i18n }}</b>
-            <nz-icon nzType="right" nzTheme="outline"></nz-icon>
-          </dd>
-        </dl>
+    <div class="yz-application" id="navDropdown" nz-row *ngIf="state.active">
+      <div nz-col [nzSpan]="3" class="yz-application-topic">
+        <div class="yz-application-topic-list">
+          @if (showAllMenu) {
+            <div data-event-id="_nav_topic" data-name="全部应用" class="yz-application-text" (click)="attachNav('all')">{{ 'mode.nav.all' | i18n }} </div>
+          }
+          @if (showMineMenu) {
+            <div data-event-id="_nav_topic" data-name="我的应用" class="yz-application-text" (click)="attachNav('mine')">{{ 'mode.nav.mine' | i18n }} </div>
+          }
+          @for (nav of state.topics; track nav) {
+            <div data-event-id="_nav_topic" [attr.data-name]="nav.name | i18n" class="yz-application-text" (click)="attachNav('other', nav)">{{ nav.name | i18n }} </div>
+          }
+        </div>
       </div>
-      <div [ngSwitch]="state.topic" class="yz-application-container">
-        <ng-container *ngIf="state.type === 'mine'">
-          <ng-template [ngTemplateOutlet]="search"></ng-template>
-          <ng-template [ngTemplateOutlet]="ld"></ng-template>
-        </ng-container>
-        <div *ngIf="state.type === 'other'" style="overflow: hidden;width: 100%; height: 100%">
-          <div class="yz-application-list">
-            <div class="yz-application-list-item">
-              <ul>
-                <li data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" *ngFor="let nav of state.list" (click)="open(nav)">
-                  <a href="javascript:;">
-                    <h4>{{ nav.name | i18n }}</h4>
-                    <p>{{ nav.intro | i18n }}</p>
-                  </a>
-                </li>
-              </ul>
+      <div nz-col [nzSpan]="21" class="yz-application-container">
+        @switch (state.type) {
+          @case ('all') {
+            <div>
+              <ng-template [ngTemplateOutlet]="search" />
+              <ng-template [ngTemplateOutlet]="ld" />
             </div>
-          </div>
-        </div>
+          }
+          @case ('mine') {
+            <div>
+              <ng-template [ngTemplateOutlet]="search" />
+              <ng-template [ngTemplateOutlet]="ld" />
+            </div>
+          }
+          @case ('other') {
+            <div class="yz-application-list yz-application-list-other">
+              <div class="yz-application-list-item">
+                <ul>
+                  @for (nav of state.list; track nav) {
+                    <li data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" (click)="open(nav)">
+                      <a href="javascript:;">
+                        <h4>{{ nav.name | i18n }}</h4>
+                        <p>{{ nav.intro | i18n }}</p>
+                      </a>
+                    </li>
+                  }
+                </ul>
+              </div>
+            </div>
+          }
+        }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: YunzaiNavApplicationComponent, decorators: [{
             type: Component,
@@ -263,53 +277,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
     </ng-template>
 
     <ng-template #ld>
-      <div style="overflow: hidden;width: 100%; height: calc(100% - 58px)">
-        <div class="yz-application-list">
-          <ul>
-            <li *ngFor="let topic of state.list">
+      <div class="yz-application-list">
+        <ul>
+          @for (topic of state.list; track topic) {
+            <li>
               <h5>{{ topic.name | i18n }}</h5>
-              <a data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" href="javascript:;" *ngFor="let nav of topic.children" (click)="open(nav)">{{ nav.name | i18n }}</a>
+              @for (nav of topic.children; track nav) {
+                <a data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" href="javascript:;" (click)="open(nav)">{{ nav.name | i18n }}</a>
+              }
             </li>
-          </ul>
-        </div>
+          }
+        </ul>
       </div>
     </ng-template>
 
-    <div data-event-id="_nav_app" id="navBtn" class="yunzai-default__nav-item" (click)="diffChange()">{{ 'mode.nav' | i18n }}</div>
+    <div data-event-id="_nav_app" id="navBtn" class="yunzai-default__nav-item" (click)="diffChange()">{{ 'mode.nav' | i18n }} </div>
 
-    <div class="yz-application" id="navDropdown" *ngIf="state.active">
-      <div class="yz-application-topic">
-        <h2>{{ 'mode.nav' | i18n }}</h2>
-        <dl>
-          <dd *ngIf="showMineMenu" data-event-id="_nav_topic" data-name="我的应用" class="yz-application-text" (click)="attachNav('mine')">
-            <b> {{ 'mode.nav.mine' | i18n }}</b>
-            <nz-icon nzType="right" nzTheme="outline"></nz-icon>
-          </dd>
-          <dd data-event-id="_nav_topic" [attr.data-name]="nav.name | i18n" class="yz-application-text" *ngFor="let nav of state.topics" (click)="attachNav('other', nav)">
-            <b>{{ nav.name | i18n }}</b>
-            <nz-icon nzType="right" nzTheme="outline"></nz-icon>
-          </dd>
-        </dl>
+    <div class="yz-application" id="navDropdown" nz-row *ngIf="state.active">
+      <div nz-col [nzSpan]="3" class="yz-application-topic">
+        <div class="yz-application-topic-list">
+          @if (showAllMenu) {
+            <div data-event-id="_nav_topic" data-name="全部应用" class="yz-application-text" (click)="attachNav('all')">{{ 'mode.nav.all' | i18n }} </div>
+          }
+          @if (showMineMenu) {
+            <div data-event-id="_nav_topic" data-name="我的应用" class="yz-application-text" (click)="attachNav('mine')">{{ 'mode.nav.mine' | i18n }} </div>
+          }
+          @for (nav of state.topics; track nav) {
+            <div data-event-id="_nav_topic" [attr.data-name]="nav.name | i18n" class="yz-application-text" (click)="attachNav('other', nav)">{{ nav.name | i18n }} </div>
+          }
+        </div>
       </div>
-      <div [ngSwitch]="state.topic" class="yz-application-container">
-        <ng-container *ngIf="state.type === 'mine'">
-          <ng-template [ngTemplateOutlet]="search"></ng-template>
-          <ng-template [ngTemplateOutlet]="ld"></ng-template>
-        </ng-container>
-        <div *ngIf="state.type === 'other'" style="overflow: hidden;width: 100%; height: 100%">
-          <div class="yz-application-list">
-            <div class="yz-application-list-item">
-              <ul>
-                <li data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" *ngFor="let nav of state.list" (click)="open(nav)">
-                  <a href="javascript:;">
-                    <h4>{{ nav.name | i18n }}</h4>
-                    <p>{{ nav.intro | i18n }}</p>
-                  </a>
-                </li>
-              </ul>
+      <div nz-col [nzSpan]="21" class="yz-application-container">
+        @switch (state.type) {
+          @case ('all') {
+            <div>
+              <ng-template [ngTemplateOutlet]="search" />
+              <ng-template [ngTemplateOutlet]="ld" />
             </div>
-          </div>
-        </div>
+          }
+          @case ('mine') {
+            <div>
+              <ng-template [ngTemplateOutlet]="search" />
+              <ng-template [ngTemplateOutlet]="ld" />
+            </div>
+          }
+          @case ('other') {
+            <div class="yz-application-list yz-application-list-other">
+              <div class="yz-application-list-item">
+                <ul>
+                  @for (nav of state.list; track nav) {
+                    <li data-event-id="_nav_item" [attr.data-name]="nav.name | i18n" (click)="open(nav)">
+                      <a href="javascript:;">
+                        <h4>{{ nav.name | i18n }}</h4>
+                        <p>{{ nav.intro | i18n }}</p>
+                      </a>
+                    </li>
+                  }
+                </ul>
+              </div>
+            </div>
+          }
+        }
       </div>
     </div>
   `,
@@ -318,11 +346,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }] });
 
 class YunzaiLayoutNavGroupComponent {
-    $destroy = new Subject();
+    http = inject(_HttpClient);
+    destroy$ = new Subject();
+    win = inject(WINDOW);
     state = {
         topics: []
     };
-    http = inject(_HttpClient);
     ngOnInit() {
         const [, getTopics] = useLocalStorageHeader();
         this.state.topics = getTopics() || [];
@@ -334,49 +363,64 @@ class YunzaiLayoutNavGroupComponent {
                 appId: topic.key,
                 createDate: new Date()
             })
-                .pipe(takeUntil(this.$destroy))
+                .pipe(takeUntil(this.destroy$))
                 .subscribe();
         }
         switch (topic.target) {
             case 'href':
-                inject(WINDOW).location.href = topic.url;
+                this.win.location.href = topic.url;
                 break;
             case 'blank':
-                inject(WINDOW).open(topic.url);
+                this.win.open(topic.url);
                 break;
             case 'target':
-                inject(WINDOW).open(topic.url);
+                this.win.open(topic.url);
                 break;
             default:
-                inject(WINDOW).location.href = topic.url;
+                this.win.location.href = topic.url;
                 break;
         }
     }
     ngOnDestroy() {
-        this.$destroy.complete();
+        this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: YunzaiLayoutNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: YunzaiLayoutNavGroupComponent, isStandalone: true, selector: "yunzai-layout-nav-group", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: YunzaiLayoutNavGroupComponent, isStandalone: true, selector: "yunzai-layout-nav-group", ngImport: i0, template: `
     <div class="yz-application-group">
       <nz-tabset>
-        <nz-tab *ngFor="let menu of state.topics" [nzTitle]="groupTitleTpl">
-          <ng-template #groupTitleTpl>
-            <a data-event-id="_nav_topic" [attr.data-name]="menu.name | i18n" nz-dropdown [nzDropdownMenu]="menuTpl" [nzTrigger]="'click'" [nzOverlayClassName]="'yz-application-dropdown'">
-              <nz-icon *ngIf="menu.icon" [nzType]="menu.icon" nzTheme="outline"></nz-icon>
-              {{ menu.name | i18n }}
-              <nz-icon *ngIf="menu.children && menu.children.length > 0" nz-icon nzType="down" nzTheme="outline"></nz-icon>
-            </a>
-            <nz-dropdown-menu #menuTpl="nzDropdownMenu">
-              <ul nz-menu nzSelectable *ngIf="menu.children && menu.children.length > 0">
-                <ng-container *ngFor="let item of menu.children">
-                  <li data-event-id="_nav_item" *ngIf="item.auth" [attr.data-name]="item.name | i18n" nz-menu-item (click)="open(item)">
-                    <nz-icon *ngIf="item.icon" [nzType]="item.icon" nzTheme="outline" style="margin-right: 4px;"></nz-icon>{{ item.name | i18n }}
-                  </li>
-                </ng-container>
-              </ul>
-            </nz-dropdown-menu>
-          </ng-template>
-        </nz-tab>
+        @for (menu of state.topics; track menu) {
+          <nz-tab [nzTitle]="groupTitleTpl">
+            <ng-template #groupTitleTpl>
+              <a data-event-id="_nav_topic" [attr.data-name]="menu.name | i18n" nz-dropdown [nzDropdownMenu]="menuTpl" [nzTrigger]="'click'" [nzOverlayClassName]="'yz-application-dropdown'">
+                @if (menu.icon) {
+                  <nz-icon [nzType]="menu.icon" nzTheme="outline"></nz-icon>
+                }
+                {{ menu.name | i18n }}
+                @if (menu.children && menu.children.length > 0) {
+                  <nz-icon nzType="down" nzTheme="outline"></nz-icon>
+                }
+              </a>
+              <nz-dropdown-menu #menuTpl="nzDropdownMenu">
+                @if (menu.children && menu.children.length > 0) {
+                  <ul nz-menu nzSelectable>
+                    @for (item of menu.children; track item) {
+                      <ng-container>
+                        @if (item.auth) {
+                          <li data-event-id="_nav_item" [attr.data-name]="item.name | i18n" nz-menu-item (click)="open(item)">
+                            @if (item.icon) {
+                              <nz-icon [nzType]="item.icon" nzTheme="outline"></nz-icon>
+                            }
+                            {{ item.name | i18n }}
+                          </li>
+                        }
+                      </ng-container>
+                    }
+                  </ul>
+                }
+              </nz-dropdown-menu>
+            </ng-template>
+          </nz-tab>
+        }
       </nz-tabset>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i3$1.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "directive", type: i3$1.NzDropDownADirective, selector: "a[nz-dropdown]" }, { kind: "component", type: i3$1.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i4$1.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i4$1.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
@@ -388,24 +432,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                     template: `
     <div class="yz-application-group">
       <nz-tabset>
-        <nz-tab *ngFor="let menu of state.topics" [nzTitle]="groupTitleTpl">
-          <ng-template #groupTitleTpl>
-            <a data-event-id="_nav_topic" [attr.data-name]="menu.name | i18n" nz-dropdown [nzDropdownMenu]="menuTpl" [nzTrigger]="'click'" [nzOverlayClassName]="'yz-application-dropdown'">
-              <nz-icon *ngIf="menu.icon" [nzType]="menu.icon" nzTheme="outline"></nz-icon>
-              {{ menu.name | i18n }}
-              <nz-icon *ngIf="menu.children && menu.children.length > 0" nz-icon nzType="down" nzTheme="outline"></nz-icon>
-            </a>
-            <nz-dropdown-menu #menuTpl="nzDropdownMenu">
-              <ul nz-menu nzSelectable *ngIf="menu.children && menu.children.length > 0">
-                <ng-container *ngFor="let item of menu.children">
-                  <li data-event-id="_nav_item" *ngIf="item.auth" [attr.data-name]="item.name | i18n" nz-menu-item (click)="open(item)">
-                    <nz-icon *ngIf="item.icon" [nzType]="item.icon" nzTheme="outline" style="margin-right: 4px;"></nz-icon>{{ item.name | i18n }}
-                  </li>
-                </ng-container>
-              </ul>
-            </nz-dropdown-menu>
-          </ng-template>
-        </nz-tab>
+        @for (menu of state.topics; track menu) {
+          <nz-tab [nzTitle]="groupTitleTpl">
+            <ng-template #groupTitleTpl>
+              <a data-event-id="_nav_topic" [attr.data-name]="menu.name | i18n" nz-dropdown [nzDropdownMenu]="menuTpl" [nzTrigger]="'click'" [nzOverlayClassName]="'yz-application-dropdown'">
+                @if (menu.icon) {
+                  <nz-icon [nzType]="menu.icon" nzTheme="outline"></nz-icon>
+                }
+                {{ menu.name | i18n }}
+                @if (menu.children && menu.children.length > 0) {
+                  <nz-icon nzType="down" nzTheme="outline"></nz-icon>
+                }
+              </a>
+              <nz-dropdown-menu #menuTpl="nzDropdownMenu">
+                @if (menu.children && menu.children.length > 0) {
+                  <ul nz-menu nzSelectable>
+                    @for (item of menu.children; track item) {
+                      <ng-container>
+                        @if (item.auth) {
+                          <li data-event-id="_nav_item" [attr.data-name]="item.name | i18n" nz-menu-item (click)="open(item)">
+                            @if (item.icon) {
+                              <nz-icon [nzType]="item.icon" nzTheme="outline"></nz-icon>
+                            }
+                            {{ item.name | i18n }}
+                          </li>
+                        }
+                      </ng-container>
+                    }
+                  </ul>
+                }
+              </nz-dropdown-menu>
+            </ng-template>
+          </nz-tab>
+        }
       </nz-tabset>
     </div>
   `,
@@ -662,8 +721,8 @@ class YunzaiLayoutBasicComponent {
       </layout-default-header-item>
     </layout-default>
     <ng-template #asideUserTpl>
-      <div data-event-id="_route_user" class="yunzai-default__aside-user" style="margin-bottom: 8px">
-        <nz-avatar class="yunzai-default__aside-user-avatar" style="flex-wrap: wrap;" [nzSize]="40" [nzSrc]="aside.icon" (click)="aboutApplication()" />
+      <div data-event-id="_route_user" class="yunzai-default__aside-user">
+        <nz-avatar class="yunzai-default__aside-user-avatar" [nzSize]="40" [nzSrc]="aside.icon" (click)="aboutApplication()" />
         <div class="yunzai-default__aside-user-info" nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu">
           <strong>{{ aside.name | i18n }}</strong>
           <p>{{ aside.intro | i18n }}</p>
@@ -699,11 +758,13 @@ class YunzaiLayoutBasicComponent {
         </nz-skeleton>
       </ng-container>
     </nz-modal>
-  `, isInline: true, styles: ["::ng-deep .sidebar-nav__item-icon{display:none}::ng-deep .sidebar-nav__item-icon.anticon,::ng-deep .sidebar-nav__item-icon.sidebar-nav__item-img,::ng-deep .sidebar-nav__item-icon.sidebar-nav__item-svg{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: LayoutDefaultModule }, { kind: "component", type: i1$1.LayoutDefaultComponent, selector: "layout-default", inputs: ["options", "asideUser", "asideBottom", "nav", "content", "customError", "fetchingStrictly", "fetching"], exportAs: ["layoutDefault"] }, { kind: "component", type: i1$1.LayoutDefaultHeaderItemComponent, selector: "layout-default-header-item", inputs: ["hidden", "direction"] }, { kind: "directive", type: i1$1.LayoutDefaultHeaderItemTriggerDirective, selector: "[layout-default-header-item-trigger]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ReuseTabModule }, { kind: "component", type: i3$2.ReuseTabComponent, selector: "reuse-tab, [reuse-tab]", inputs: ["mode", "i18n", "debug", "max", "tabMaxWidth", "excludes", "allowClose", "keepingScroll", "storageState", "keepingScrollContainer", "customContextMenu", "tabBarExtraContent", "tabBarGutter", "tabBarStyle", "tabType", "routeParamMatchMode", "disabled", "titleRender", "canClose"], outputs: ["change", "close"], exportAs: ["reuseTab"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i3$1.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$1.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzAvatarModule }, { kind: "component", type: i7.NzAvatarComponent, selector: "nz-avatar", inputs: ["nzShape", "nzSize", "nzGap", "nzText", "nzSrc", "nzSrcSet", "nzAlt", "nzIcon", "nzLoading", "nzFetchPriority"], outputs: ["nzError"], exportAs: ["nzAvatar"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i9.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i9.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzSkeletonModule }, { kind: "component", type: i10.NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }, { kind: "ngmodule", type: NzDescriptionsModule }, { kind: "component", type: i11.NzDescriptionsComponent, selector: "nz-descriptions", inputs: ["nzBordered", "nzLayout", "nzColumn", "nzSize", "nzTitle", "nzExtra", "nzColon"], exportAs: ["nzDescriptions"] }, { kind: "component", type: i11.NzDescriptionsItemComponent, selector: "nz-descriptions-item", inputs: ["nzSpan", "nzTitle"], exportAs: ["nzDescriptionsItem"] }, { kind: "ngmodule", type: ThemeBtnModule }, { kind: "component", type: i12.ThemeBtnComponent, selector: "theme-btn", inputs: ["types", "devTips", "deployUrl"], outputs: ["themeChange"] }, { kind: "ngmodule", type: YunzaiWidgetsModule }, { kind: "component", type: i13.YunzaiHeaderClearStorageComponent, selector: "yunzai-header-clear-storage" }, { kind: "component", type: i13.YunzaiHeaderFullScreenComponent, selector: "yunzai-header-fullscreen" }, { kind: "component", type: i13.YunzaiHeaderNotifyComponent, selector: "yunzai-header-notify" }, { kind: "component", type: i13.YunzaiHeaderI18nComponent, selector: "yunzai-header-i18n", inputs: ["showLangText"] }, { kind: "component", type: i13.YunzaiHeaderUserComponent, selector: "yunzai-header-user" }, { kind: "component", type: YunzaiNavApplicationComponent, selector: "yunzai-layout-nav-application" }, { kind: "component", type: YunzaiLayoutNavGroupComponent, selector: "yunzai-layout-nav-group" }, { kind: "component", type: YunzaiLayoutNavTileComponent, selector: "yunzai-layout-nav-tile" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: LayoutDefaultModule }, { kind: "component", type: i1$1.LayoutDefaultComponent, selector: "layout-default", inputs: ["options", "asideUser", "asideBottom", "nav", "content", "customError", "fetchingStrictly", "fetching"], exportAs: ["layoutDefault"] }, { kind: "component", type: i1$1.LayoutDefaultHeaderItemComponent, selector: "layout-default-header-item", inputs: ["hidden", "direction"] }, { kind: "directive", type: i1$1.LayoutDefaultHeaderItemTriggerDirective, selector: "[layout-default-header-item-trigger]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ReuseTabModule }, { kind: "component", type: i3$2.ReuseTabComponent, selector: "reuse-tab, [reuse-tab]", inputs: ["mode", "i18n", "debug", "max", "tabMaxWidth", "excludes", "allowClose", "keepingScroll", "storageState", "keepingScrollContainer", "customContextMenu", "tabBarExtraContent", "tabBarGutter", "tabBarStyle", "tabType", "routeParamMatchMode", "disabled", "titleRender", "canClose"], outputs: ["change", "close"], exportAs: ["reuseTab"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i3$1.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$1.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: NzAvatarModule }, { kind: "component", type: i7.NzAvatarComponent, selector: "nz-avatar", inputs: ["nzShape", "nzSize", "nzGap", "nzText", "nzSrc", "nzSrcSet", "nzAlt", "nzIcon", "nzLoading", "nzFetchPriority"], outputs: ["nzError"], exportAs: ["nzAvatar"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i9.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: i9.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "ngmodule", type: NzSkeletonModule }, { kind: "component", type: i10.NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }, { kind: "ngmodule", type: NzDescriptionsModule }, { kind: "component", type: i11.NzDescriptionsComponent, selector: "nz-descriptions", inputs: ["nzBordered", "nzLayout", "nzColumn", "nzSize", "nzTitle", "nzExtra", "nzColon"], exportAs: ["nzDescriptions"] }, { kind: "component", type: i11.NzDescriptionsItemComponent, selector: "nz-descriptions-item", inputs: ["nzSpan", "nzTitle"], exportAs: ["nzDescriptionsItem"] }, { kind: "ngmodule", type: ThemeBtnModule }, { kind: "component", type: i12.ThemeBtnComponent, selector: "theme-btn", inputs: ["types", "devTips", "deployUrl"], outputs: ["themeChange"] }, { kind: "ngmodule", type: YunzaiWidgetsModule }, { kind: "component", type: i13.YunzaiHeaderClearStorageComponent, selector: "yunzai-header-clear-storage" }, { kind: "component", type: i13.YunzaiHeaderFullScreenComponent, selector: "yunzai-header-fullscreen" }, { kind: "component", type: i13.YunzaiHeaderNotifyComponent, selector: "yunzai-header-notify" }, { kind: "component", type: i13.YunzaiHeaderI18nComponent, selector: "yunzai-header-i18n", inputs: ["showLangText"] }, { kind: "component", type: i13.YunzaiHeaderUserComponent, selector: "yunzai-header-user" }, { kind: "component", type: YunzaiNavApplicationComponent, selector: "yunzai-layout-nav-application" }, { kind: "component", type: YunzaiLayoutNavGroupComponent, selector: "yunzai-layout-nav-group" }, { kind: "component", type: YunzaiLayoutNavTileComponent, selector: "yunzai-layout-nav-tile" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: YunzaiLayoutBasicComponent, decorators: [{
             type: Component,
-            args: [{ selector: `yunzai-layout-basic`, template: `
+            args: [{
+                    selector: `yunzai-layout-basic`,
+                    template: `
     <layout-default [options]="options" [asideUser]="asideUserTpl" [content]="displayReusetab ? contentTpl : noneTpl">
       <layout-default-header-item direction="left">
         <ng-container [ngSwitch]="navType">
@@ -784,8 +845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
       </layout-default-header-item>
     </layout-default>
     <ng-template #asideUserTpl>
-      <div data-event-id="_route_user" class="yunzai-default__aside-user" style="margin-bottom: 8px">
-        <nz-avatar class="yunzai-default__aside-user-avatar" style="flex-wrap: wrap;" [nzSize]="40" [nzSrc]="aside.icon" (click)="aboutApplication()" />
+      <div data-event-id="_route_user" class="yunzai-default__aside-user">
+        <nz-avatar class="yunzai-default__aside-user-avatar" [nzSize]="40" [nzSrc]="aside.icon" (click)="aboutApplication()" />
         <div class="yunzai-default__aside-user-info" nz-dropdown nzTrigger="click" [nzDropdownMenu]="userMenu">
           <strong>{{ aside.name | i18n }}</strong>
           <p>{{ aside.intro | i18n }}</p>
@@ -821,7 +882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         </nz-skeleton>
       </ng-container>
     </nz-modal>
-  `, imports: [
+  `,
+                    imports: [
                         LayoutDefaultModule,
                         RouterModule,
                         ReuseTabModule,
@@ -838,7 +900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         YunzaiNavApplicationComponent,
                         YunzaiLayoutNavGroupComponent,
                         YunzaiLayoutNavTileComponent
-                    ], styles: ["::ng-deep .sidebar-nav__item-icon{display:none}::ng-deep .sidebar-nav__item-icon.anticon,::ng-deep .sidebar-nav__item-icon.sidebar-nav__item-img,::ng-deep .sidebar-nav__item-icon.sidebar-nav__item-svg{display:inline-block}\n"] }]
+                    ]
+                }]
         }] });
 
 const COMPONENTS = [YunzaiLayoutNavTileComponent, YunzaiLayoutNavGroupComponent, YunzaiLayoutBasicComponent];