创建了卡片组件

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

@@ -0,0 +1,43 @@
+import { Component, Input } from '@angular/core';
+import { IonCard } from '@ionic/angular';
+import { IonItem } from '@ionic/angular';
+import { IonCheckbox } from '@ionic/angular';
+import { IonLabel } from '@ionic/angular';
+import { IonBadge } from '@ionic/angular';
+
+@Component({
+  selector: 'app-task-card',
+  template: `
+    <ion-card>
+      <ion-item lines="none">
+        <ion-checkbox slot="start"></ion-checkbox>
+        <ion-label>
+          <div class="task-header">
+            <span class="task-title">{{title}}</span>
+            <ion-badge *ngFor="let tag of tags" color="light">{{tag}}</ion-badge>
+          </div>
+          <div class="task-meta">
+            <span>⏰ {{dueTime}}</span>
+            <span *ngIf="subtasksCount > 0">📁 {{subtasksCount}}个子任务</span>
+          </div>
+        </ion-label>
+      </ion-item>
+    </ion-card>
+  `,
+  styleUrls: ['./task-card.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonItem,
+    IonCheckbox,
+    IonLabel,
+    IonBadge
+  ]
+})
+export class TaskCardComponent {
+  @Input() title = '';
+  @Input() tags: string[] = [];
+  @Input() dueDate = '';
+  @Input() dueTime = '';
+  @Input() subtasksCount = 0;
+}