update:tasks and services

src/app/home/home.page.html

@@ -1,9 +1,5 @@
 <ion-header>
-  <ion-toolbar>
-    <ion-title>
-      首页
-    </ion-title>
-  </ion-toolbar>
+
 </ion-header>
 
 <ion-content>

src/app/home/home.page.scss

@@ -6,7 +6,7 @@ ion-content {
   
     .top-section {
       display: flex;
-      height: 75vh; // 占据3/4的高度
+      height: 73vh; // 占据3/4的高度
   
       .left, .right {
         display: flex;
@@ -38,7 +38,7 @@ ion-content {
       display: flex;
       justify-content: space-around;
       align-items: center;
-      height: 25vh; // 占据1/4的高度
+      height: 20vh; // 占据1/4的高度
   
       ion-button {
         width: 40%; // 按钮宽度40%

src/app/services/services.page.html

@@ -1,13 +1,41 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>services</ion-title>
+    <ion-title>服务页面</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">services</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <ion-button expand="block" color="primary" (click)="generateAISchedule()" class="ai-schedule-button">
+    <ion-icon slot="start" name="calendar"></ion-icon>
+    AI时间表生成
+  </ion-button>
+
+  <h2 class="center-title">自律评分</h2>
+  <ion-card class="custom-card">
+    <ion-card-content>
+      <div *ngIf="!hasSelfDisciplineScore">
+        <ion-button expand="block" color="secondary" (click)="generateSelfDisciplineScore()">
+          生成
+        </ion-button>
+      </div>
+      <div *ngIf="hasSelfDisciplineScore">
+        <p>{{ selfDisciplineScore }}</p>
+        <p>{{ selfDisciplineEvaluation }}</p>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <h2 class="center-title">时间优化建议</h2>
+  <ion-card class="custom-card">
+    <ion-card-content>
+      <div *ngIf="!hasTimeOptimizationSuggestion">
+        <ion-button expand="block" color="tertiary" (click)="generateTimeOptimizationSuggestion()">
+          生成
+        </ion-button>
+      </div>
+      <div *ngIf="hasTimeOptimizationSuggestion">
+        <p>{{ timeOptimizationSuggestion }}</p>
+      </div>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

src/app/services/services.page.scss

@@ -0,0 +1,28 @@
+ion-header {
+    --background: #f8f9fa;
+    --color: #000;
+  }
+  
+  ion-content {
+    --padding-start: 16px;
+    --padding-end: 16px;
+  }
+  
+  .ai-schedule-button {
+    margin-top: 20px;
+    height: 50px;
+  }
+  
+  .center-title {
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  
+  .custom-card {
+    margin: 20px 0;
+    padding: 20px;
+  }
+  

src/app/services/services.page.ts

@@ -1,15 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-services',
   templateUrl: './services.page.html',
   styleUrls: ['./services.page.scss'],
 })
-export class ServicesPage implements OnInit {
+export class ServicesPage {
+  hasSelfDisciplineScore = false;
+  selfDisciplineScore: string = '';
+  selfDisciplineEvaluation: string = '';
+
+  hasTimeOptimizationSuggestion = false;
+  timeOptimizationSuggestion: string = '';
 
   constructor() { }
 
-  ngOnInit() {
+  generateAISchedule() {
+    // 进入子页面生成AI时间表的逻辑
+    console.log('AI时间表生成按钮点击');
+  }
+
+  generateSelfDisciplineScore() {
+    this.hasSelfDisciplineScore = true;
+    this.selfDisciplineScore = '自律评分：85';
+    this.selfDisciplineEvaluation = '昨天的表现很好，继续保持！';
+    console.log('自律评分生成');
   }
 
+  generateTimeOptimizationSuggestion() {
+    this.hasTimeOptimizationSuggestion = true;
+    this.timeOptimizationSuggestion = '建议每天早起一小时，提高效率。';
+    console.log('时间优化建议生成');
+  }
 }

src/app/tasks/tasks-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
+import { RouterModule, Routes } from '@angular/router';
 import { TasksPage } from './tasks.page';
 
 const routes: Routes = [

src/app/tasks/tasks.module.ts

@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-
 import { IonicModule } from '@ionic/angular';
-
 import { TasksPageRoutingModule } from './tasks-routing.module';
-
 import { TasksPage } from './tasks.page';
 
 @NgModule({

src/app/tasks/tasks.page.html

@@ -1,13 +1,47 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>tasks</ion-title>
+    <ion-title>任务管理</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">tasks</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <div *ngIf="tasks.length === 0" class="empty-tasks">
+    <ion-text color="medium">
+      <h2>您的任务空空如也，来添加一些任务吧！</h2>
+    </ion-text>
+  </div>
+
+  <ion-list *ngIf="tasks.length > 0">
+    <ion-item-sliding *ngFor="let task of tasks; let i = index">
+      <ion-item>
+        <ion-button fill="outline" (click)="editTask(i)" slot="start" class="edit-button">
+          <ion-icon name="create-outline"></ion-icon>
+        </ion-button>
+        <ion-label *ngIf="!task.editing" class="time-label">{{task.startTime}} - {{task.endTime}}</ion-label>
+        <div *ngIf="task.editing" class="time-edit">
+          <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
+          <span>:</span>
+          <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
+          <span> - </span>
+          <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
+          <span>:</span>
+          <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
+        </div>
+        <ion-label *ngIf="!task.editing" class="content-label">{{task.content}}</ion-label>
+        <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
+        <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
+          <ion-icon name="checkmark-outline"></ion-icon>
+        </ion-button>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-item-option color="danger" (click)="deleteTask(i)" class="delete-button">删除</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button (click)="addTask()">
+      <ion-icon name="add-outline"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>

src/app/tasks/tasks.page.scss

@@ -0,0 +1,73 @@
+ion-content {
+  --background: #f0f0f5;
+
+  .empty-tasks {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    text-align: center;
+  }
+
+  ion-list {
+    margin: 20px;
+
+    ion-item {
+      --background: #ffffff;
+      --border-radius: 8px;
+      margin-bottom: 15px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      height: 100px; /* Increased height for better touch area */
+      align-items: center; /* Center content vertically */
+      display: flex; /* Use flexbox for vertical alignment */
+      font-size: 18px;
+
+      .edit-button, .save-button {
+        font-size: 24px;
+      }
+
+      .time-label, .content-label, .content-input, .time-input {
+        flex: 1; /* Ensure content takes up available space */
+        text-align: center; /* Center text horizontally */
+      }
+
+      .time-edit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1; /* Ensure the time-edit div takes up available space */
+        font-size: 18px;
+
+        ion-input {
+          max-width: 50px;
+          margin: 0 5px;
+          text-align: center;
+          --padding-start: 0;
+          --padding-end: 0;
+          --border: none; /* Remove underline */
+        }
+
+        span {
+          margin: 0 5px;
+        }
+      }
+    }
+  }
+
+  .delete-button {
+    width: 100px; /* Increased width for better touch area */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%; /* Ensure button height matches item height */
+  }
+
+  ion-fab {
+    margin-bottom: 20px;
+
+    ion-fab-button {
+      --background: #3880ff;
+      --color: white;
+    }
+  }
+}

src/app/tasks/tasks.page.ts

@@ -1,15 +1,91 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tasks',
   templateUrl: './tasks.page.html',
   styleUrls: ['./tasks.page.scss'],
 })
-export class TasksPage implements OnInit {
+export class TasksPage {
+  tasks: { startTime: string; endTime: string; content: string; editing: boolean; startHour: string; startMinute: string; endHour: string; endMinute: string; }[] = [
+    { startTime: '08:00', endTime: '11:30', content: '早间任务', editing: false, startHour: '08', startMinute: '00', endHour: '11', endMinute: '30' },
+    { startTime: '12:00', endTime: '17:30', content: '中间任务', editing: false, startHour: '12', startMinute: '00', endHour: '17', endMinute: '30' },
+    { startTime: '18:00', endTime: '21:30', content: '晚间任务', editing: false, startHour: '18', startMinute: '00', endHour: '21', endMinute: '30' },
+    // Add more tasks as needed
+  ];
 
-  constructor() { }
+  constructor(private alertController: AlertController) {}
 
-  ngOnInit() {
+  editTask(index: number) {
+    this.tasks[index].editing = true;
   }
 
+  async saveTask(index: number) {
+    const task = this.tasks[index];
+    if (this.isValidTime(task.startHour, task.startMinute) && this.isValidTime(task.endHour, task.endMinute)) {
+      task.startTime = `${this.padZero(task.startHour)}:${this.padZero(task.startMinute)}`;
+      task.endTime = `${this.padZero(task.endHour)}:${this.padZero(task.endMinute)}`;
+      task.editing = false;
+      this.sortTasks();
+    } else {
+      const alert = await this.alertController.create({
+        header: '时间错误',
+        message: '小时不能超过24，分钟不能超过60。',
+        buttons: ['确定']
+      });
+      await alert.present();
+    }
+  }
+
+  addTask() {
+    this.tasks.push({ startTime: '00:00', endTime: '00:00', content: '新任务', editing: true, startHour: '00', startMinute: '00', endHour: '00', endMinute: '00' });
+  }
+
+  deleteTask(index: number) {
+    this.tasks.splice(index, 1);
+  }
+
+  clearTime(task: { startHour: string; startMinute: string; endHour: string; endMinute: string; }, type: 'start' | 'end') {
+    if (type === 'start') {
+      task.startHour = '';
+      task.startMinute = '';
+    } else {
+      task.endHour = '';
+      task.endMinute = '';
+    }
+  }
+
+  formatHour(task: { startHour: string; endHour: string; }, type: 'start' | 'end') {
+    if (type === 'start' && task.startHour) {
+      task.startHour = this.padZero(task.startHour);
+    } else if (type === 'end' && task.endHour) {
+      task.endHour = this.padZero(task.endHour);
+    }
+  }
+
+  formatMinute(task: { startMinute: string; endMinute: string; }, type: 'start' | 'end') {
+    if (type === 'start' && task.startMinute) {
+      task.startMinute = this.padZero(task.startMinute);
+    } else if (type === 'end' && task.endMinute) {
+      task.endMinute = this.padZero(task.endMinute);
+    }
+  }
+
+  padZero(num: string): string {
+    return num.length < 2 ? '0' + num : num;
+  }
+
+  isValidTime(hour: string, minute: string): boolean {
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    return h >= 0 && h < 24 && m >= 0 && m < 60;
+  }
+
+  sortTasks() {
+    this.tasks.sort((a, b) => {
+      const aStart = parseInt(a.startHour) * 60 + parseInt(a.startMinute);
+      const bStart = parseInt(b.startHour) * 60 + parseInt(b.startMinute);
+      return aStart - bStart;
+    });
+  }
 }