Skip to content

Commit dcbd237

Browse files
huajian123huajian123
committed
style: 代码优化
1 parent acc837b commit dcbd237

File tree

1 file changed

+92
-91
lines changed

1 file changed

+92
-91
lines changed

‎src/app/layout/default/default.component.html‎

Lines changed: 92 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,120 +2,121 @@
22
<nz-layout class="min-screen-full-height">
33
<!--非混合模式侧边栏固定时占位-->
44
@if (!isMixinMode && isSideMode && !isOverMode && isHasNavArea && isFixedLeftNav) {
5-
<nz-sider nzBreakpoint="lg" [nzCollapsed]="isCollapsed" [nzCollapsedWidth]="CollapsedNavWidth" [nzTheme]="theme" [nzWidth]="SideNavWidth" />
5+
<nz-sider nzBreakpoint="lg" [nzCollapsed]="isCollapsed" [nzCollapsedWidth]="CollapsedNavWidth" [nzTheme]="theme" [nzWidth]="SideNavWidth" />
66
}
77

88
<!--非混合模式侧边栏-->
99
@if (!isMixinMode && isSideMode && !isOverMode && isHasNavArea) {
10-
<nz-sider
11-
id="menuNav"
12-
class="menu-sidebar"
13-
nzBreakpoint="lg"
14-
[class.left-nav-fixed]="isFixedLeftNav"
15-
[nzCollapsed]="isCollapsed"
16-
[nzCollapsedWidth]="CollapsedNavWidth"
17-
[nzCollapsible]="true"
18-
[nzTheme]="theme"
19-
[nzTrigger]="trigger"
20-
[nzWidth]="SideNavWidth"
21-
(nzCollapsedChange)="changeCollapsed($event)"
22-
>
23-
<app-side-nav />
24-
</nz-sider>
10+
<nz-sider
11+
id="menuNav"
12+
class="menu-sidebar"
13+
nzBreakpoint="lg"
14+
[class.left-nav-fixed]="isFixedLeftNav"
15+
[nzCollapsed]="isCollapsed"
16+
[nzCollapsedWidth]="CollapsedNavWidth"
17+
[nzCollapsible]="true"
18+
[nzTheme]="theme"
19+
[nzTrigger]="trigger"
20+
[nzWidth]="SideNavWidth"
21+
(nzCollapsedChange)="changeCollapsed($event)"
22+
>
23+
<app-side-nav />
24+
</nz-sider>
2525
}
2626

2727
<!--混合模式顶部菜单header-->
2828
@if (isMixinMode && isHasTopArea) {
29-
<nz-header class="animate-02 dark-top-nav-bg top-fixed screen-full-width">
30-
<app-tool-bar>
31-
@if (isOverMode) {
32-
<ng-container left>
33-
<i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="changeCollapsed(!isCollapsed)"></i>
34-
</ng-container>
35-
} @if (!isOverMode) {
36-
<ng-container left>
37-
<div class="left-start-center flex-1" style="z-index: 100">
38-
<img class="m-l-10" alt="" src="assets/imgs/logo.svg" style="max-height: 32px; max-width: 54px" />
39-
<span class="sp-18 m-r-25 ng17color">Ant Design Pro</span>
40-
<div class="flex-1">
41-
@if (isSplitNav) {
42-
<app-nav-bar [isMixinHead]="true" />
43-
}
44-
</div>
45-
</div>
46-
</ng-container>
47-
}
48-
<ng-container right>
49-
<app-layout-head-right-menu />
50-
</ng-container>
51-
</app-tool-bar>
52-
</nz-header>
29+
<nz-header class="animate-02 dark-top-nav-bg top-fixed screen-full-width">
30+
<app-tool-bar>
31+
@if (isOverMode) {
32+
<ng-container left>
33+
<i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="changeCollapsed(!isCollapsed)"></i>
34+
</ng-container>
35+
}
36+
@if (!isOverMode) {
37+
<ng-container left>
38+
<div class="left-start-center flex-1" style="z-index: 100">
39+
<img class="m-l-10" alt="" src="assets/imgs/logo.svg" style="max-height: 32px; max-width: 54px" />
40+
<span class="sp-18 m-r-25 ng17color">Ant Design Pro</span>
41+
<div class="flex-1">
42+
@if (isSplitNav) {
43+
<app-nav-bar [isMixinHead]="true" />
44+
}
45+
</div>
46+
</div>
47+
</ng-container>
48+
}
49+
<ng-container right>
50+
<app-layout-head-right-menu />
51+
</ng-container>
52+
</app-tool-bar>
53+
</nz-header>
5354
}
5455

5556
<nz-layout [style]="{ marginTop: isMixinMode && isHasTopArea ? '48px' : 0 }">
5657
<!--sider模式的 header-->
5758
@if (!isMixinMode && isHasTopArea && isSideMode) {
58-
<nz-header
59-
style="transition: width 0.2s"
60-
[ngClass]="{
61-
'full-with': !isHasNavArea,
62-
fixed: isFixedHead,
63-
'fixed-collapsed': isFixedHead && isCollapsed,
64-
'fixed-over-mode': isFixedHead && isOverMode
65-
}"
66-
>
67-
<ng-container *ngTemplateOutlet="headerTpl" />
68-
</nz-header>
59+
<nz-header
60+
style="transition: width 0.2s"
61+
[ngClass]="{
62+
'full-with': !isHasNavArea,
63+
fixed: isFixedHead,
64+
'fixed-collapsed': isFixedHead && isCollapsed,
65+
'fixed-over-mode': isFixedHead && isOverMode
66+
}"
67+
>
68+
<ng-container *ngTemplateOutlet="headerTpl" />
69+
</nz-header>
6970
}
7071
<!--top模式header-->
7172
@if (!isMixinMode && isHasTopArea && isTopMode) {
72-
<nz-header
73-
[ngClass]="{
74-
'dark-top-nav-bg': theme === 'dark',
75-
'top-fixed': isFixedHead
76-
}"
77-
>
78-
<ng-container *ngTemplateOutlet="headerTpl" />
79-
</nz-header>
73+
<nz-header
74+
[ngClass]="{
75+
'dark-top-nav-bg': theme === 'dark',
76+
'top-fixed': isFixedHead
77+
}"
78+
>
79+
<ng-container *ngTemplateOutlet="headerTpl" />
80+
</nz-header>
8081
}
8182

8283
<!--混合模式sider固定时占位-->
8384
@if (isFixedLeftNav && isMixinMode && isHasNavArea && !isOverMode && (mixinModeLeftNav.length > 0 || !isSplitNav)) {
84-
<nz-sider nzBreakpoint="lg" nzNoAnimation [nzCollapsed]="isCollapsed" [nzCollapsedWidth]="CollapsedNavWidth" [nzTheme]="isNightTheme ? 'dark' : 'light'" [nzWidth]="SideNavWidth" />
85+
<nz-sider nzBreakpoint="lg" nzNoAnimation [nzCollapsed]="isCollapsed" [nzCollapsedWidth]="CollapsedNavWidth" [nzTheme]="isNightTheme ? 'dark' : 'light'" [nzWidth]="SideNavWidth" />
8586
}
8687
<!--混合模式sider-->
8788
@if (isMixinMode && isHasNavArea && !isOverMode && (mixinModeLeftNav.length > 0 || !isSplitNav)) {
88-
<nz-sider
89-
class="menu-sidebar"
90-
nzBreakpoint="lg"
91-
nzNoAnimation
92-
[class.mixin-left-nav-fixed]="isFixedLeftNav"
93-
[class.t-0]="!isHasTopArea"
94-
[nzCollapsed]="isCollapsed"
95-
[nzCollapsedWidth]="CollapsedNavWidth"
96-
[nzCollapsible]="true"
97-
[nzTheme]="isNightTheme ? 'dark' : 'light'"
98-
[nzTrigger]="trigger"
99-
[nzWidth]="SideNavWidth"
100-
(nzCollapsedChange)="changeCollapsed($event)"
101-
>
102-
<div class="mix-sider-height" style="overflow: hidden auto"><app-nav-bar [isMixinLeft]="isSplitNav" /></div>
103-
</nz-sider>
89+
<nz-sider
90+
class="menu-sidebar"
91+
nzBreakpoint="lg"
92+
nzNoAnimation
93+
[class.mixin-left-nav-fixed]="isFixedLeftNav"
94+
[class.t-0]="!isHasTopArea"
95+
[nzCollapsed]="isCollapsed"
96+
[nzCollapsedWidth]="CollapsedNavWidth"
97+
[nzCollapsible]="true"
98+
[nzTheme]="isNightTheme ? 'dark' : 'light'"
99+
[nzTrigger]="trigger"
100+
[nzWidth]="SideNavWidth"
101+
(nzCollapsedChange)="changeCollapsed($event)"
102+
>
103+
<div class="mix-sider-height" style="overflow: hidden auto"><app-nav-bar [isMixinLeft]="isSplitNav" /></div>
104+
</nz-sider>
104105
}
105106

106107
<nz-layout>
107108
<nz-content [ngStyle]="{ marginTop: contentMarginTop }">
108109
<div>
109110
@if (isShowTab) {
110-
<app-tab></app-tab>
111+
<app-tab></app-tab>
111112
}
112113
<div [@fadeRouteAnimation]="prepareRoute(outlet)">
113114
<router-outlet #outlet="outlet"></router-outlet>
114115
</div>
115116
</div>
116117
</nz-content>
117118
@if (isHasFooterArea) {
118-
<nz-footer class="text-center">Ant Design ©2022 Implement By 华舰</nz-footer>
119+
<nz-footer class="text-center">Ant Design ©2022 Implement By 华舰</nz-footer>
119120
}
120121
</nz-layout>
121122
</nz-layout>
@@ -124,7 +125,7 @@
124125
<app-setting-drawer />
125126

126127
@if (showChats) {
127-
<app-chat (changeShows)="showChats = false" />
128+
<app-chat (changeShows)="showChats = false" />
128129
}
129130

130131
<ng-template #trigger>
@@ -145,25 +146,25 @@
145146
<ng-template #headerTpl>
146147
<app-tool-bar>
147148
@if (isOverMode || isSideMode) {
148-
<ng-container left>
149-
<i id="trigger" class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="changeCollapsed(!isCollapsed)"></i>
150-
</ng-container>
149+
<ng-container left>
150+
<i id="trigger" class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="changeCollapsed(!isCollapsed)"></i>
151+
</ng-container>
151152
} @else {
152-
<div class="left-start-center flex-1" style="z-index: 100">
153-
@if (isHasNavHeadArea) {
154-
<img class="m-l-10" alt="" src="assets/imgs/logo.svg" style="max-height: 32px; max-width: 54px" />
155-
<span class="sp-18 m-r-8 ng17color">Ant Design</span>
156-
}
157-
<div class="flex-1">
158-
<app-nav-bar />
153+
<div class="left-start-center flex-1" style="z-index: 100">
154+
@if (isHasNavHeadArea) {
155+
<img class="m-l-10" alt="" src="assets/imgs/logo.svg" style="max-height: 32px; max-width: 54px" />
156+
<span class="sp-18 m-r-8 ng17color">Ant Design</span>
157+
}
158+
<div class="flex-1">
159+
<app-nav-bar />
160+
</div>
159161
</div>
160-
</div>
161162
}
162163
<ng-container right>
163164
<app-layout-head-right-menu />
164165
</ng-container>
165166
</app-tool-bar>
166167
</ng-template>
167168
@if (isOverMode) {
168-
<app-nav-drawer #navDrawer />
169+
<app-nav-drawer #navDrawer />
169170
}

0 commit comments

Comments
 (0)