首页优化

src/app/tab1/tab1.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar color="light">
-    <ion-title>番茄任务</ion-title>
+    <ion-title>任务清单</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="openAddTaskModal()">
         <ion-icon slot="icon-only" name="add-outline"></ion-icon>
@@ -11,8 +11,8 @@
 
 <ion-content>
   <ion-list lines="none">
-    <ion-item-sliding *ngFor="let task of tasks">
-      <ion-item class="task-item">
+    <ion-item-sliding *ngFor="let task of tasks; let i = index">
+      <ion-item class="task-item" [style.--task-color]="getTaskColor(i)">
         <ion-checkbox slot="start" [(ngModel)]="task.completed" (ionChange)="toggleTaskCompletion(task)"></ion-checkbox>
         <ion-label class="task-label">
           <h2 [class.strikethrough]="task.completed">{{ task.title }}</h2>

src/app/tab1/tab1.page.scss

@@ -1,8 +1,18 @@
+:host {
+  --background: #e0f7e9; /* 浅绿色背景 */
+}
+
+ion-content {
+  --background: var(--background);
+  background-color: var(--background); /* 确保背景颜色应用 */
+}
+
 .task-item {
-  --background: var(--ion-color-light);
   border-radius: 8px;
   margin: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --background: var(--task-color, #e0f7e9); /* 默认浅绿色背景 */
+  background-color: var(--background); /* 确保背景颜色应用 */
 }
 
 .task-label h2 {

src/app/tab1/tab1.page.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { addOutline, trash } from 'ionicons/icons';
 
 interface Task {
   id: number;
@@ -21,8 +22,7 @@ interface Task {
     IonicModule,
     CommonModule,
     FormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class Tab1Page implements OnInit {
   tasks: Task[] = [];
@@ -35,7 +35,13 @@ export class Tab1Page implements OnInit {
     endTime: new Date().toISOString(),
   };
 
-  constructor() {}
+  constructor() {
+    // 注册图标
+    addIcons({
+      'add-outline': addOutline,
+      'trash': trash
+    });
+  }
 
   ngOnInit() {
     const savedTasks = localStorage.getItem('tasks');
@@ -109,6 +115,11 @@ export class Tab1Page implements OnInit {
     }
   }
 
+  getTaskColor(index: number): string {
+    const colors = ['#ffebee', '#e3f2fd', '#e8f5e9', '#fff3e0', '#f3e5f5'];
+    return colors[index % colors.length];
+  }
+
   private saveTasks() {
     localStorage.setItem('tasks', JSON.stringify(this.tasks));
   }

src/app/tabs/tabs.page.html

@@ -1,18 +1,18 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+    <ion-tab-button tab="tab1">
+      <ion-icon name="list-outline"></ion-icon>
+      <ion-label>任务清单</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+    <ion-tab-button tab="tab2">
+      <ion-icon name="timer-outline"></ion-icon>
+      <ion-label>专注计时</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+    <ion-tab-button tab="tab3">
+      <ion-icon name="stats-chart-outline"></ion-icon>
+      <ion-label>数据统计</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>

src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { triangle, ellipse, square } from 'ionicons/icons';
+import { triangle, ellipse, square, listOutline, timerOutline, statsChartOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ triangle, ellipse, square });
+    addIcons({listOutline,timerOutline,statsChartOutline,triangle,ellipse,square});
   }
 }

src/index.html

@@ -17,6 +17,8 @@
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/css/ionicons.min.css">
 </head>
 
 <body>