创建了任务弹窗组件

src/app/shared/task-modal/task-modal.component.html

@@ -0,0 +1,57 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>新建任务</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="cancel()">取消</ion-button>
+      <ion-button (click)="confirm()" [strong]="true">确认</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-item>
+    <ion-label position="stacked">任务名称</ion-label>
+    <ion-input [(ngModel)]="task.title" placeholder="输入任务名称"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">任务标签</ion-label>
+    <ion-input [(ngModel)]="newTag" placeholder="输入标签并按回车" (keyup.enter)="addTag()"></ion-input>
+    <ion-buttons slot="end">
+      <ion-button (click)="addTag()">
+        <ion-icon name="add" slot="icon-only"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-item>
+
+  <div class="tags-container">
+    <ion-chip *ngFor="let tag of task.tags; let i = index" color="primary">
+      {{ tag }}
+      <ion-icon name="close" (click)="removeTag(i)"></ion-icon>
+    </ion-chip>
+  </div>
+
+  <ion-item>
+    <ion-label position="stacked">截止时间</ion-label>
+    <ion-datetime-button datetime="datetime"></ion-datetime-button>
+    <ion-modal [keepContentsMounted]="true">
+      <ion-datetime [(ngModel)]="task.dueDate" id="datetime"></ion-datetime>
+    </ion-modal>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">子任务</ion-label>
+    <ion-button fill="clear" slot="end" (click)="addSubtask()">
+      <ion-icon name="add" slot="icon-only"></ion-icon>
+    </ion-button>
+  </ion-item>
+
+  <div class="subtasks-container">
+    <ion-item *ngFor="let subtask of task.subtasks; let i = index">
+      <ion-input [(ngModel)]="task.subtasks[i]" placeholder="子任务内容"></ion-input>
+      <ion-button fill="clear" slot="end" (click)="removeSubtask(i)">
+        <ion-icon name="trash" color="danger"></ion-icon>
+      </ion-button>
+    </ion-item>
+  </div>
+</ion-content>

src/app/shared/task-modal/task-modal.component.scss

@@ -0,0 +1,25 @@
+.tags-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 12px 0;
+}
+
+.subtasks-container {
+  ion-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    margin-bottom: 8px;
+
+    ion-button {
+      margin-inline-end: -8px;
+    }
+  }
+}
+
+ion-datetime {
+  --background: var(--ion-color-light);
+  --background-rgb: 255, 255, 255;
+  border-radius: 8px;
+  padding: 12px;
+}

src/app/shared/task-modal/task-modal.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-task-modal',
+  templateUrl: './task-modal.component.html',
+  styleUrls: ['./task-modal.component.scss'],
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule]
+})
+export class TaskModalComponent {
+  task = {
+    title: '',
+    tags: [] as string[],
+    dueDate: new Date().toISOString(),
+    subtasks: [''] as string[]
+  };
+
+  newTag = '';
+
+  constructor(private modalCtrl: ModalController) {}
+
+  addTag() {
+    if (this.newTag) {
+      this.task.tags.push(this.newTag);
+      this.newTag = '';
+    }
+  }
+
+  removeTag(index: number) {
+    this.task.tags.splice(index, 1);
+  }
+
+  addSubtask() {
+    this.task.subtasks.push('');
+  }
+
+  removeSubtask(index: number) {
+    this.task.subtasks.splice(index, 1);
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss();
+  }
+
+  confirm() {
+    this.modalCtrl.dismiss(this.task);
+  }
+}

src/app/tab1/tab1.page.html

@@ -16,7 +16,7 @@
 
 <ion-content [fullscreen]="true">
   <div class="timestamp">{{ currentDate }}</div>
-  
+
   <ion-card>
     <ion-item lines="none">
       <ion-checkbox slot="start"></ion-checkbox>
@@ -33,4 +33,4 @@
       </ion-label>
     </ion-item>
   </ion-card>
-</ion-content>
+</ion-content>