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

<ion-header class="ion-no-border">
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon name="close" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title class="ion-text-center">新建任务</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="confirm()" [strong]="true" color="primary">
        保存
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-horizontal">
  <ion-list lines="none">
    <!-- 任务名称 -->
    <ion-item fill="outline" class="ion-margin-vertical">
      <ion-label position="stacked">任务名称</ion-label>
      <ion-input
        [(ngModel)]="task.title"
        placeholder="请输入任务名称"
        clearOnEdit
      ></ion-input>
    </ion-item>

    <!-- 任务标签 -->
    <ion-item fill="outline" class="ion-margin-vertical">
      <ion-label position="stacked">任务标签</ion-label>
      <ion-input
        [(ngModel)]="newTag"
        placeholder="输入标签后按回车"
        (keyup.enter)="addTag()"
      ></ion-input>
      <ion-button
        slot="end"
        fill="clear"
        (click)="addTag()"
        [disabled]="!newTag"
      >
        <ion-icon name="add" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-item>

    <!-- 标签展示 -->
    <div class="tags-container ion-margin-bottom">
      <ion-chip
        *ngFor="let tag of task.tags; let i = index"
        color="medium"
        outline
      >
        {{ tag }}
        <ion-icon name="close" (click)="removeTag(i)"></ion-icon>
      </ion-chip>
    </div>

    <!-- 截止时间 -->
    <ion-item
      fill="outline"
      class="ion-margin-vertical"
      button
      detail="false"
      (click)="openDateTimePicker()"
    >
      <ion-label>截止时间</ion-label>
      <ion-text slot="end">{{ task.dueDate | date: 'MM月dd日 HH:mm' }}</ion-text>
    </ion-item>

    <!-- 日期选择器 -->


    <!-- 子任务 -->
    <div class="subtask-section ion-margin-vertical">
      <ion-item lines="none">
        <ion-label>子任务列表</ion-label>
        <ion-button fill="clear" (click)="addSubtask()">
          <ion-icon name="add-circle" slot="start"></ion-icon>
          添加子任务
        </ion-button>
      </ion-item>

      <ion-list class="subtask-list">
        <ion-item *ngFor="let subtask of task.subtasks; let i = index">
          <ion-input
            [(ngModel)]="task.subtasks[i]"
            placeholder="子任务描述"
            clearOnEdit
          ></ion-input>
          <ion-button
            fill="clear"
            color="danger"
            (click)="removeSubtask(i)"
          >
            <ion-icon name="trash" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </div>

    <!-- 备注 -->
    <ion-item fill="outline" class="ion-margin-vertical">
      <ion-label position="stacked">任务备注</ion-label>
      <ion-textarea
        [(ngModel)]="task.note"
        placeholder="请输入任务备注（可选）"
        autoGrow
        rows="3"
      ></ion-textarea>
    </ion-item>
  </ion-list>
</ion-content>