把tab1的卡片替换为组件

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

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>{{ title }}</ion-label>
+    <ion-badge *ngFor="let tag of tags" color="primary">{{ tag }}</ion-badge>
+  </ion-item>
+  <ion-item>
+    <ion-icon name="time-outline" slot="start"></ion-icon>
+    <ion-text>{{ dueTime }}</ion-text>
+    <ion-note slot="end">{{ subtasksCount }} 子任务</ion-note>
+  </ion-item>
+</ion-card>

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

@@ -0,0 +1,17 @@
+ion-card {
+  margin: 12px;
+
+  ion-item {
+    --padding-start: 8px;
+    --inner-padding-end: 8px;
+
+    ion-badge {
+      margin-left: 8px;
+    }
+  }
+
+  ion-note {
+    font-size: 0.9em;
+    color: var(--ion-color-medium);
+  }
+}

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

@@ -1,38 +1,12 @@
 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';
+import { IonicModule } 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>
-  `,
+  templateUrl: './task-card.component.html',
   styleUrls: ['./task-card.component.scss'],
   standalone: true,
-  imports: [
-    IonCard,
-    IonItem,
-    IonCheckbox,
-    IonLabel,
-    IonBadge
-  ]
+  imports: [IonicModule]
 })
 export class TaskCardComponent {
   @Input() title = '';

src/app/tab1/tab1.module.ts

@@ -15,6 +15,6 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
     ExploreContainerComponentModule,
     Tab1PageRoutingModule
   ],
-  declarations: [Tab1Page]
+  declarations: []
 })
 export class Tab1PageModule {}

src/app/tab1/tab1.page.html

@@ -17,20 +17,11 @@
 <ion-content [fullscreen]="true">
   <div class="timestamp">{{ currentDate }}</div>
 
-  <ion-card>
-    <ion-item lines="none">
-      <ion-checkbox slot="start"></ion-checkbox>
-      <ion-label>
-        <div class="task-header">
-          <span class="task-title">项目会议</span>
-          <ion-badge color="light">工作</ion-badge>
-          <ion-badge color="light">重要</ion-badge>
-        </div>
-        <div class="task-meta">
-          <span>⏰ 09:30</span>
-          <span>📁 2个子任务</span>
-        </div>
-      </ion-label>
-    </ion-item>
-  </ion-card>
+  <app-task-card
+    *ngFor="let card of cards"
+    [title]="card.title"
+    [tags]="card.tags"
+    [dueTime]="card.dueTime"
+    [subtasksCount]="card.subtasks?.length || 0"
+  ></app-task-card>
 </ion-content>

src/app/tab1/tab1.page.ts

@@ -2,12 +2,15 @@ import { Component } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { TaskModalComponent } from '../shared/task-modal/task-modal.component';
 import { DataService } from '../services/data.service';
+import { TaskCardComponent } from '../shared/task-card/task-card.component';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonFab, IonFabButton, IonIcon,IonButton,IonButtons } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss'],
-  standalone: false,
+  templateUrl: './tab1.page.html',
+  styleUrls: ['./tab1.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonFab, IonFabButton, IonIcon, TaskCardComponent, IonButtons, IonButton]
 })
 export class Tab1Page {
   currentDate: string;