日常学习计划

AiStudy-app/src/app/tab2/tab2.page.html

@@ -77,12 +77,17 @@
           <ion-icon name="calendar" color="primary"></ion-icon>
           日常学习计划
         </ion-card-title>
-        <ion-button fill="clear" (click)="refreshPlans($event)">
-          <ion-icon name="refresh-outline"></ion-icon>
-        </ion-button>
+        <div class="header-actions">
+          <ion-button fill="clear" (click)="togglePlans($event)">
+            <ion-icon [name]="isPlansExpanded ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" (click)="refreshPlans($event)">
+            <ion-icon name="refresh-outline"></ion-icon>
+          </ion-button>
+        </div>
       </div>
     </ion-card-header>
-    <ion-card-content>
+    <ion-card-content [class.collapsed]="!isPlansExpanded">
       <div class="daily-plan-preview" *ngIf="todayPlans.length > 0">
         <div class="plan-items">
           <ion-item-sliding *ngFor="let plan of todayPlans">

AiStudy-app/src/app/tab2/tab2.page.scss

@@ -105,21 +105,27 @@ ion-progress-bar {
         }
       }
 
-      ion-button {
-        margin: 0;
-        --padding-start: 4px;
-        --padding-end: 4px;
-        height: 36px;
-        width: 36px;
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
-        ion-icon {
-          font-size: 18px;
-          color: var(--ion-color-medium);
-        }
+        ion-button {
+          margin: 0;
+          --padding-start: 4px;
+          --padding-end: 4px;
+          height: 36px;
+          width: 36px;
 
-        &:hover {
           ion-icon {
-            color: var(--ion-color-primary);
+            font-size: 18px;
+            color: var(--ion-color-medium);
+          }
+
+          &:hover {
+            ion-icon {
+              color: var(--ion-color-primary);
+            }
           }
         }
       }
@@ -127,6 +133,16 @@ ion-progress-bar {
   }
 
   ion-card-content {
+    transition: max-height 0.3s ease-out;
+    overflow: hidden;
+    max-height: 1000px;
+
+    &.collapsed {
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
     padding: 0 16px 16px;
   }
 

AiStudy-app/src/app/tab2/tab2.page.ts

@@ -36,7 +36,9 @@ import {
   calendar,
   checkmarkCircle,
   ellipseOutline,
-  refreshOutline
+  refreshOutline,
+  chevronUpOutline,
+  chevronDownOutline,
 } from 'ionicons/icons';
 import { DailyPlanService, DailyPlan } from '../services/daily-plan.service';
 import { FormsModule } from '@angular/forms';
@@ -87,6 +89,7 @@ export class Tab2Page implements OnInit {
   completedTasks: number = 0;
   totalTasks: number = 0;
   todayPlans: DailyPlan[] = [];
+  isPlansExpanded: boolean = true;
 
   constructor(
     private router: Router,
@@ -103,7 +106,9 @@ export class Tab2Page implements OnInit {
       calendar,
       checkmarkCircle,
       ellipseOutline,
-      refreshOutline
+      refreshOutline,
+      chevronUpOutline,
+      chevronDownOutline,
     });
   }
 
@@ -264,4 +269,9 @@ export class Tab2Page implements OnInit {
     event.stopPropagation(); // 阻止事件冒泡，避免触发卡片的点击事件
     await this.loadTodayPlans();
   }
+
+  togglePlans(event: Event) {
+    event.stopPropagation();
+    this.isPlansExpanded = !this.isPlansExpanded;
+  }
 }