Skip to content

Commit 70c5ae0

Browse files
rmlzyrmlzy
committed
feat: add some demo pages
1 parent 109b91e commit 70c5ae0

21 files changed

+343
-93
lines changed

Diff for: ‎src/app/config/app-menu.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ type IMenu = {
1212
export type IAppMenu = IMenu[];
1313

1414
export const APP_MENUS: IAppMenu = [
15-
{ level: 1, title: "Home", icon: "home", link: "/" },
15+
{ level: 1, title: "首页", icon: "home", link: "/" },
1616
{
1717
level: 1,
18-
title: "Interface",
18+
title: "控件",
1919
icon: "inbox",
2020
children: [
2121
{ level: 2, title: "Empty page", link: "/interface/empty" },
@@ -31,11 +31,17 @@ export const APP_MENUS: IAppMenu = [
3131
},
3232
{
3333
level: 1,
34-
title: "Form",
34+
title: "表单页",
3535
icon: "form",
3636
children: [
37-
{ level: 2, title: "Basic form", link: "/form/basic" },
38-
{ level: 2, title: "Advanced form", link: "/form/advanced" },
37+
{ level: 2, title: "基础表单", link: "/form/basic" },
38+
{ level: 2, title: "高级表单", link: "/form/advanced" },
3939
],
4040
},
41+
{
42+
level: 1,
43+
title: "个人页",
44+
icon: "user",
45+
children: [{ level: 2, title: "个人设置", link: "/account/settings" }],
46+
},
4147
];

Diff for: ‎src/app/config/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@ import { NzMenuThemeType } from "ng-zorro-antd/menu";
33

44
export interface IConfig {
55
menus: IAppMenu;
6-
layout: "vertical" | "horizontal";
76
asideTheme: NzMenuThemeType;
87
fixedHeader: boolean;
98
fluid: boolean;
109
}
1110

1211
export const CONFIG: IConfig = {
1312
menus: APP_MENUS,
14-
layout: "horizontal",
1513
asideTheme: "dark",
1614
fixedHeader: true,
1715
fluid: true,

Diff for: ‎src/app/pages/account/account-routing.module.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { NgModule } from "@angular/core";
2+
import { RouterModule, Routes } from "@angular/router";
3+
import { SettingsComponent } from "./settings/settings.component";
4+
5+
const routes: Routes = [
6+
{ path: "", redirectTo: "/settings", pathMatch: "full" },
7+
{ path: "settings", component: SettingsComponent },
8+
];
9+
10+
@NgModule({
11+
imports: [RouterModule.forChild(routes)],
12+
exports: [RouterModule],
13+
})
14+
export class AccountRoutingModule {}

Diff for: ‎src/app/pages/account/account.module.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
import { SharedModule } from "@/shared/shared.module";
4+
import { AccountRoutingModule } from "./account-routing.module";
5+
import { SettingsComponent } from "./settings/settings.component";
6+
7+
@NgModule({
8+
declarations: [SettingsComponent],
9+
imports: [CommonModule, SharedModule, AccountRoutingModule],
10+
})
11+
export class AccountModule {}

Diff for: ‎src/app/pages/account/settings/settings.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<nz-card>
2+
<form nz-form [formGroup]="settingForm" nzLayout="vertical" (ngSubmit)="submit()">
3+
<div nz-row [nzGutter]="15">
4+
<div nz-col [nzSpan]="8"></div>
5+
</div>
6+
</form>
7+
</nz-card>

Diff for: ‎src/app/pages/account/settings/settings.component.less

Whitespace-only changes.

Diff for: ‎src/app/pages/account/settings/settings.component.spec.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed } from "@angular/core/testing";
2+
3+
import { SettingsComponent } from "./settings.component";
4+
5+
describe("SettingsComponent", () => {
6+
let component: SettingsComponent;
7+
let fixture: ComponentFixture<SettingsComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [SettingsComponent],
12+
}).compileComponents();
13+
});
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(SettingsComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it("should create", () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

Diff for: ‎src/app/pages/account/settings/settings.component.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component, OnInit } from "@angular/core";
2+
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
3+
import { NzMessageService } from "ng-zorro-antd/message";
4+
5+
@Component({
6+
selector: "app-settings",
7+
templateUrl: "./settings.component.html",
8+
styleUrls: ["./settings.component.less"],
9+
})
10+
export class SettingsComponent implements OnInit {
11+
settingForm!: FormGroup;
12+
13+
constructor(private fb: FormBuilder, private message: NzMessageService) {}
14+
15+
ngOnInit(): void {
16+
this.settingForm = this.fb.group({
17+
repoName: ["", [Validators.required]],
18+
repoUrl: ["", [Validators.required]],
19+
repoOwner: ["", [Validators.required]],
20+
repoApprover: ["", [Validators.required]],
21+
repoDateRange: [null, [Validators.required]],
22+
repoType: ["", [Validators.required]],
23+
24+
jobName: ["", [Validators.required]],
25+
jobDesc: ["", [Validators.required]],
26+
jobOwner: ["", [Validators.required]],
27+
jobManager: ["", [Validators.required]],
28+
remindDate: [null, [Validators.required]],
29+
jobType: ["", [Validators.required]],
30+
});
31+
}
32+
33+
async submit(): Promise<void> {
34+
for (const i in this.settingForm.controls) {
35+
this.settingForm.controls[i].markAsDirty();
36+
this.settingForm.controls[i].updateValueAndValidity();
37+
}
38+
if (!this.settingForm.valid) {
39+
return;
40+
}
41+
console.log("Advanced Form 提交:", this.settingForm.value);
42+
this.message.success("操作成功");
43+
}
44+
}

Diff for: ‎src/app/pages/form/advanced/advanced.component.html

+122-10
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,134 @@
1-
<nz-page-header nzTitle="Basic Form">
1+
<nz-page-header nzTitle="高级表单">
22
<nz-breadcrumb nz-page-header-breadcrumb>
33
<nz-breadcrumb-item>
4-
<a routerLink="/">Home</a>
4+
<a routerLink="/">首页</a>
55
</nz-breadcrumb-item>
66
<nz-breadcrumb-item>
7-
<a routerLink="/form">Form</a>
7+
<a routerLink="/form">表单页</a>
88
</nz-breadcrumb-item>
9-
<nz-breadcrumb-item>Advanced Form</nz-breadcrumb-item>
9+
<nz-breadcrumb-item>高级表单</nz-breadcrumb-item>
1010
</nz-breadcrumb>
1111
<nz-page-header-content>高级表单常见于一次性输入和提交大批量数据的场景。</nz-page-header-content>
1212
</nz-page-header>
1313

14-
<nz-card nzTitle="仓库管理" class="mb15"></nz-card>
14+
<form nz-form [formGroup]="advancedForm" nzLayout="vertical" (ngSubmit)="submit()">
15+
<nz-card nzTitle="仓库管理" class="mb15">
16+
<div nz-row [nzGutter]="15">
17+
<div nz-col [nzSpan]="8">
18+
<nz-form-item>
19+
<nz-form-label nzRequired>仓库名</nz-form-label>
20+
<nz-form-control nzErrorTip="请输入仓库名称">
21+
<input nz-input formControlName="repoName" placeholder="请输入仓库名称" />
22+
</nz-form-control>
23+
</nz-form-item>
24+
</div>
25+
<div nz-col [nzSpan]="8">
26+
<nz-form-item>
27+
<nz-form-label nzRequired>仓库域名</nz-form-label>
28+
<nz-form-control nzErrorTip="请输入仓库域名">
29+
<input nz-input formControlName="repoUrl" placeholder="请输入仓库域名" />
30+
</nz-form-control>
31+
</nz-form-item>
32+
</div>
33+
<div nz-col [nzSpan]="8">
34+
<nz-form-item>
35+
<nz-form-label nzRequired>仓库管理员</nz-form-label>
36+
<nz-form-control nzErrorTip="请选择管理员">
37+
<input nz-input formControlName="repoOwner" placeholder="请选择管理员" />
38+
</nz-form-control>
39+
</nz-form-item>
40+
</div>
41+
</div>
42+
<div nz-row [nzGutter]="15">
43+
<div nz-col [nzSpan]="8">
44+
<nz-form-item>
45+
<nz-form-label nzRequired>审批人</nz-form-label>
46+
<nz-form-control nzErrorTip="请选择审批人">
47+
<input nz-input formControlName="repoApprover" placeholder="请选择审批人" />
48+
</nz-form-control>
49+
</nz-form-item>
50+
</div>
51+
<div nz-col [nzSpan]="8">
52+
<nz-form-item>
53+
<nz-form-label nzRequired>生效日期</nz-form-label>
54+
<nz-form-control nzErrorTip="请选择生效日期">
55+
<nz-range-picker formControlName="repoDateRange" class="w100"></nz-range-picker>
56+
</nz-form-control>
57+
</nz-form-item>
58+
</div>
59+
<div nz-col [nzSpan]="8">
60+
<nz-form-item>
61+
<nz-form-label nzRequired>仓库类型</nz-form-label>
62+
<nz-form-control nzErrorTip="请选择仓库类型">
63+
<input nz-input formControlName="repoType" placeholder="请选择仓库类型" />
64+
</nz-form-control>
65+
</nz-form-item>
66+
</div>
67+
</div>
68+
</nz-card>
1569

16-
<nz-card nzTitle="任务管理" class="mb15"></nz-card>
70+
<nz-card nzTitle="任务管理" class="mb15">
71+
<div nz-row [nzGutter]="15">
72+
<div nz-col [nzSpan]="8">
73+
<nz-form-item>
74+
<nz-form-label nzRequired>任务名</nz-form-label>
75+
<nz-form-control nzErrorTip="请输入任务名">
76+
<input nz-input formControlName="jobName" placeholder="请输入任务名" />
77+
</nz-form-control>
78+
</nz-form-item>
79+
</div>
80+
<div nz-col [nzSpan]="8">
81+
<nz-form-item>
82+
<nz-form-label nzRequired>任务描述</nz-form-label>
83+
<nz-form-control nzErrorTip="请输入任务描述">
84+
<input nz-input formControlName="jobDesc" placeholder="请输入任务描述" />
85+
</nz-form-control>
86+
</nz-form-item>
87+
</div>
88+
<div nz-col [nzSpan]="8">
89+
<nz-form-item>
90+
<nz-form-label nzRequired>执行人</nz-form-label>
91+
<nz-form-control nzErrorTip="请选择执行人">
92+
<input nz-input formControlName="jobOwner" placeholder="请选择执行人" />
93+
</nz-form-control>
94+
</nz-form-item>
95+
</div>
96+
</div>
97+
<div nz-row [nzGutter]="15">
98+
<div nz-col [nzSpan]="8">
99+
<nz-form-item>
100+
<nz-form-label nzRequired>责任人</nz-form-label>
101+
<nz-form-control nzErrorTip="请选择责任人">
102+
<input nz-input formControlName="jobManager" placeholder="请选择责任人" />
103+
</nz-form-control>
104+
</nz-form-item>
105+
</div>
106+
<div nz-col [nzSpan]="8">
107+
<nz-form-item>
108+
<nz-form-label nzRequired>提醒时间</nz-form-label>
109+
<nz-form-control nzErrorTip="请选择提醒时间">
110+
<nz-date-picker
111+
formControlName="remindDate"
112+
class="w100"
113+
nzPlaceHolder="请选择提醒时间"
114+
></nz-date-picker>
115+
</nz-form-control>
116+
</nz-form-item>
117+
</div>
118+
<div nz-col [nzSpan]="8">
119+
<nz-form-item>
120+
<nz-form-label nzRequired>任务类型</nz-form-label>
121+
<nz-form-control nzErrorTip="请选择任务类型">
122+
<input nz-input formControlName="jobType" placeholder="请选择任务类型" />
123+
</nz-form-control>
124+
</nz-form-item>
125+
</div>
126+
</div>
127+
</nz-card>
17128

18-
<nz-card nzTitle="成员管理"></nz-card>
129+
<nz-card nzTitle="成员管理"></nz-card>
19130

20-
<nz-footer-bar>
21-
<button nz-button nzType="primary">提交</button>
22-
</nz-footer-bar>
131+
<nz-footer-bar>
132+
<button nz-button nzType="primary" type="submit">提交</button>
133+
</nz-footer-bar>
134+
</form>

Diff for: ‎src/app/pages/form/advanced/advanced.component.ts

+34-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,44 @@
11
import { Component, OnInit } from "@angular/core";
2+
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
3+
import { NzMessageService } from "ng-zorro-antd/message";
24

35
@Component({
46
selector: "app-advanced",
57
templateUrl: "./advanced.component.html",
68
styleUrls: ["./advanced.component.less"],
79
})
810
export class AdvancedComponent implements OnInit {
9-
constructor() {}
11+
advancedForm!: FormGroup;
1012

11-
ngOnInit(): void {}
13+
constructor(private fb: FormBuilder, private message: NzMessageService) {}
14+
15+
ngOnInit() {
16+
this.advancedForm = this.fb.group({
17+
repoName: ["", [Validators.required]],
18+
repoUrl: ["", [Validators.required]],
19+
repoOwner: ["", [Validators.required]],
20+
repoApprover: ["", [Validators.required]],
21+
repoDateRange: [null, [Validators.required]],
22+
repoType: ["", [Validators.required]],
23+
24+
jobName: ["", [Validators.required]],
25+
jobDesc: ["", [Validators.required]],
26+
jobOwner: ["", [Validators.required]],
27+
jobManager: ["", [Validators.required]],
28+
remindDate: [null, [Validators.required]],
29+
jobType: ["", [Validators.required]],
30+
});
31+
}
32+
33+
async submit(): Promise<void> {
34+
for (const i in this.advancedForm.controls) {
35+
this.advancedForm.controls[i].markAsDirty();
36+
this.advancedForm.controls[i].updateValueAndValidity();
37+
}
38+
if (!this.advancedForm.valid) {
39+
return;
40+
}
41+
console.log("Advanced Form 提交:", this.advancedForm.value);
42+
this.message.success("操作成功");
43+
}
1244
}

Diff for: ‎src/app/pages/form/basic/basic.component.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1-
<nz-page-header nzTitle="Basic Form">
1+
<nz-page-header nzTitle="基础表单">
22
<nz-breadcrumb nz-page-header-breadcrumb>
33
<nz-breadcrumb-item>
4-
<a routerLink="/">Home</a>
4+
<a routerLink="/">首页</a>
55
</nz-breadcrumb-item>
66
<nz-breadcrumb-item>
7-
<a routerLink="/form">Form</a>
7+
<a routerLink="/form">表单页</a>
88
</nz-breadcrumb-item>
9-
<nz-breadcrumb-item>Basic Form</nz-breadcrumb-item>
9+
<nz-breadcrumb-item>基础表单</nz-breadcrumb-item>
1010
</nz-breadcrumb>
1111
<nz-page-header-content>
12-
Form pages are used to collect or verify information to users, and basic forms are common in
13-
scenarios where there are fewer data items.
12+
表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
1413
</nz-page-header-content>
1514
</nz-page-header>
1615

1716
<nz-card>
18-
<form nz-form [formGroup]="loginForm" (ngSubmit)="submit()">
17+
<form nz-form [formGroup]="basicForm" (ngSubmit)="submit()">
1918
<nz-form-item>
2019
<nz-form-label [nzSm]="7" nzRequired>Title</nz-form-label>
2120
<nz-form-control [nzSm]="10" nzErrorTip="Please enter a title">

0 commit comments

Comments
 (0)