feat:add diary

myapp/src/app/modals/diary.modal.ts

@@ -0,0 +1,9 @@
+export interface Diary {
+  id: number;
+  date: string;
+  weekday: string;
+  time: string;
+  content: string;
+  weather?: string;
+  mood?: string;
+}

myapp/src/app/pipes/truncate.pipe.ts

@@ -3,10 +3,26 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
   name: 'truncate'
 })
-export class TruncatePipe implements PipeTransform {
+// export class TruncatePipe implements PipeTransform {
 
-  transform(value: unknown, ...args: unknown[]): unknown {
-    return null;
-  }
+//   transform(value: unknown, ...args: unknown[]): unknown {
+//     return null;
+//   }
+
+// }
 
+export class TruncatePipe implements PipeTransform {
+  transform(value: string, limit: number = 100, completeWords: boolean = false, ellipsis: string = '...'): string {
+    if (!value) return '';
+    
+    if (value.length <= limit) {
+      return value;
+    }
+    
+    if (completeWords) {
+      limit = value.substr(0, limit).lastIndexOf(' ');
+    }
+    
+    return `${value.substr(0, limit)}${ellipsis}`;
+  }
 }

myapp/src/app/services/diary.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { Diary } from '../modals/diary.modal';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DiaryService {
+  private storageKey = 'diaries';
+
+  constructor() {}
+
+  async getDiaries(): Promise<Diary[]> {
+    const data = localStorage.getItem(this.storageKey);
+    return data ? JSON.parse(data) : [];
+  }
+
+  async addDiary(diary: Diary): Promise<void> {
+    const diaries = await this.getDiaries();
+    diaries.push(diary);
+    localStorage.setItem(this.storageKey, JSON.stringify(diaries));
+  }
+
+  async updateDiary(updatedDiary: Diary): Promise<void> {
+    const diaries = await this.getDiaries();
+    const index = diaries.findIndex(d => d.id === updatedDiary.id);
+    if (index !== -1) {
+      diaries[index] = updatedDiary;
+      localStorage.setItem(this.storageKey, JSON.stringify(diaries));
+    }
+  }
+
+  async deleteDiary(id: number): Promise<void> {
+    const diaries = await this.getDiaries();
+    const updatedDiaries = diaries.filter(d => d.id !== id);
+    localStorage.setItem(this.storageKey, JSON.stringify(updatedDiaries));
+  }
+}

myapp/src/app/tab1/edit/edit.page.html

@@ -1,58 +1,52 @@
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button (click)="navCtrl.back()">取消</ion-button>
+      <ion-button (click)="cancel()">取消</ion-button>
     </ion-buttons>
-    <ion-title>{{action}}日记</ion-title>
+    <ion-title>{{mode === 'edit' ? '编辑日记' : '新建日记'}}</ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="saveDiary()">保存</ion-button>
+      <ion-button (click)="save()" [strong]="true">保存</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-list>
-    <ion-item>
-      <ion-label>日期</ion-label>
-      <ion-text>{{diary.date}}日 {{diary.weekday}} {{diary.time}}</ion-text>
-    </ion-item>
+<ion-content [fullscreen]="true">
+  <div class="edit-container">
+    <div class="info-row">
+      <div class="date-info">
+        <div class="date">{{diary.date}}</div>
+        <div class="weekday">{{diary.weekday}}</div>
+        <div class="time">{{diary.time}}</div>
+      </div>
+      
+      <div class="selectors">
+        <ion-item>
+          <ion-select label="天气" [(ngModel)]="diary.weather" interface="action-sheet">
+            <ion-select-option value="晴">晴</ion-select-option>
+            <ion-select-option value="多云">多云</ion-select-option>
+            <ion-select-option value="阴">阴</ion-select-option>
+            <ion-select-option value="雨">雨</ion-select-option>
+            <ion-select-option value="雪">雪</ion-select-option>
+          </ion-select>
+        </ion-item>
+        
+        <ion-item>
+          <ion-select label="心情" [(ngModel)]="diary.mood" interface="action-sheet">
+            <ion-select-option value="😊">😊 开心</ion-select-option>
+            <ion-select-option value="😢">😢 难过</ion-select-option>
+            <ion-select-option value="😠">😠 生气</ion-select-option>
+            <ion-select-option value="😌">😌 平静</ion-select-option>
+            <ion-select-option value="🤔">🤔 思考</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </div>
+    </div>
     
-    <ion-item>
-      <ion-label>天气</ion-label>
-      <ion-select [(ngModel)]="diary.weather" interface="popover">
-        <ion-select-option value="晴">晴</ion-select-option>
-        <ion-select-option value="多云">多云</ion-select-option>
-        <ion-select-option value="阴">阴</ion-select-option>
-        <ion-select-option value="雨">雨</ion-select-option>
-        <ion-select-option value="雪">雪</ion-select-option>
-      </ion-select>
-    </ion-item>
-    
-    <ion-item>
-      <ion-label>心情</ion-label>
-      <ion-select [(ngModel)]="diary.mood" interface="popover">
-        <ion-select-option value="😊">😊 开心</ion-select-option>
-        <ion-select-option value="😌">😌 平静</ion-select-option>
-        <ion-select-option value="🥰">🥰 幸福</ion-select-option>
-        <ion-select-option value="😄">😄 大笑</ion-select-option>
-        <ion-select-option value="😺">😺 调皮</ion-select-option>
-        <ion-select-option value="🍂">🍂 怀旧</ion-select-option>
-        <ion-select-option value="📖">📖 思考</ion-select-option>
-      </ion-select>
-    </ion-item>
-  </ion-list>
-
-  <ion-textarea
-    [(ngModel)]="diary.content"
-    placeholder="写下你的日记..."
-    autoGrow="true"
-    rows="10"
-    style="padding: 10px;"
-  ></ion-textarea>
-
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="action === '查看'">
-    <ion-fab-button (click)="deleteDiary()" color="danger">
-      <ion-icon name="trash"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
+    <ion-textarea
+      [(ngModel)]="diary.content"
+      placeholder="写下你的日记..."
+      autoGrow="true"
+      class="diary-content"
+    ></ion-textarea>
+  </div>
 </ion-content>

myapp/src/app/tab1/edit/edit.page.scss

@@ -0,0 +1,42 @@
+.edit-container {
+  padding: 16px;
+  
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    
+    .date-info {
+      display: flex;
+      flex-direction: column;
+      
+      .date {
+        font-size: 24px;
+        font-weight: bold;
+      }
+      
+      .weekday, .time {
+        font-size: 14px;
+        color: var(--ion-color-medium);
+      }
+    }
+    
+    .selectors {
+      width: 60%;
+      
+      ion-item {
+        --padding-start: 0;
+        --inner-padding-end: 0;
+        margin-bottom: 8px;
+      }
+    }
+  }
+  
+  .diary-content {
+    border: 1px solid var(--ion-color-light);
+    border-radius: 8px;
+    padding: 12px;
+    min-height: 200px;
+    font-size: 16px;
+  }
+}

myapp/src/app/tab1/edit/edit.page.ts

@@ -1,93 +1,66 @@
-import { Component } from '@angular/core';
-import { NavController, NavParams } from '@ionic/angular';
-import { CloudObject } from 'src/lib/ncloud';
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { DiaryService } from 'src/app/services/diary.service';
+import { Diary } from 'src/app/modals/diary.modal';
 
 @Component({
   selector: 'app-edit',
-  templateUrl: 'edit.page.html',
-  styleUrls: ['edit.page.scss'],
+  templateUrl: './edit.page.html',
+  styleUrls: ['./edit.page.scss'],
   standalone:false,
 })
-export class EditPage {
-  action: string = '新建';
-  diary: any = {
-    date: new Date().getDate().toString(),
-    weekday: this.getWeekday(new Date()),
-    time: this.getCurrentTime(),
+export class EditPage implements OnInit {
+  diary: Diary = {
+    id: 0,
+    date: '',
+    weekday: '',
+    time: '',
     content: '',
-    weather: '晴',
-    mood: '😊'
+    weather: '',
+    mood: ''
   };
+  
+  mode: 'create' | 'edit' = 'create';
 
   constructor(
-    public navCtrl: NavController,
-    private navParams: NavParams
-  ) {
-    const params = this.navParams.get('queryParams');
-    this.action = params?.action || '新建';
-    
-    if (params?.diary) {
-      this.diary = JSON.parse(params.diary);
-    }
-  }
+    private modalCtrl: ModalController,
+    private navParams: NavParams,
+    private diaryService: DiaryService
+  ) {}
 
-  // 获取星期几
-  private getWeekday(date: Date): string {
+  ngOnInit() {
+    const currentDate = new Date();
     const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-    return weekdays[date.getDay()];
-  }
-
-  // 获取当前时间
-  private getCurrentTime(): string {
-    const now = new Date();
-    const hours = now.getHours().toString().padStart(2, '0');
-    const minutes = now.getMinutes().toString().padStart(2, '0');
-    return `${hours}:${minutes}`;
-  }
-
-  // 保存日记
-  async saveDiary() {
-    if (!this.diary.content) {
-      console.error('日记内容不能为空');
-      return;
-    }
-
-    const diaryObj = new CloudObject('Diary');
     
-    // 如果是编辑现有日记
-    if (this.diary.objectId) {
-      diaryObj.id = this.diary.objectId;
-    }
+    // Set default values
+    this.diary.date = currentDate.getDate().toString();
+    this.diary.weekday = weekdays[currentDate.getDay()];
+    this.diary.time = `${currentDate.getHours()}:${currentDate.getMinutes().toString().padStart(2, '0')}`;
     
-    // 设置日记数据
-    diaryObj.set({
-      ...this.diary,
-      updatedAt: new Date().toISOString()
-    });
-
-    try {
-      await diaryObj.save();
-      this.navCtrl.back(); // 返回上一页
-    } catch (error) {
-      console.error('保存日记失败:', error);
+    // Check if we're editing an existing diary
+    const diaryToEdit = this.navParams.get('diary');
+    if (diaryToEdit) {
+      this.diary = { ...diaryToEdit };
+      this.mode = 'edit';
     }
   }
 
-  // 删除日记
-  async deleteDiary() {
-    if (!this.diary.objectId) {
-      console.error('无法删除未保存的日记');
-      return;
+  async save() {
+    if (this.mode === 'create') {
+      // Generate a new ID (in a real app, this would be handled by a backend)
+      const diaries = await this.diaryService.getDiaries();
+      this.diary.id = diaries.length > 0 ? Math.max(...diaries.map((d: { id: any; }) => d.id)) + 1 : 1;
+      
+      await this.diaryService.addDiary(this.diary);
+    } else {
+      await this.diaryService.updateDiary(this.diary);
     }
-
-    const diaryObj = new CloudObject('Diary');
-    diaryObj.id = this.diary.objectId;
     
-    try {
-      await diaryObj.destroy();
-      this.navCtrl.back(); // 返回上一页
-    } catch (error) {
-      console.error('删除日记失败:', error);
-    }
+    this.modalCtrl.dismiss({ saved: true });
+    console.log("保存成功")
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss({ saved: false });
   }
 }

myapp/src/app/tab1/tab1.module.ts

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

myapp/src/app/tab1/tab1.page.html

@@ -10,7 +10,7 @@
         <div class="header-title">日记本</div>
         
         <ion-buttons slot="end">
-        <ion-fab-button (click)="goToEditPage('新建')" size="small">
+        <ion-fab-button (click)="goToEditPage('编辑')" size="small">
             <ion-icon name="add"></ion-icon>
         </ion-fab-button>
          <ion-button (click)="logout('登出')">
@@ -25,17 +25,32 @@
     
     <!-- 内容区域 -->
     <div class="content" id="diaryList">
-         @for(message of messageList;track message){
+         @for(diary of diaries;track diary.id){
         <!-- 日记卡片1 -->
-        <div class="diary-card" (click)="goMessage(message)">
+        <div class="diary-card" (click)="goMessage(diary)">
             <div class="diary-time">
-                <div class="diary-date">{{message.date}}</div>
-                <div class="diary-week">{{message.weekday}}</div>
-                <div class="diary-hour">{{message.time}}</div>
+                <div class="diary-date">{{diary.date}}</div>
+                <div class="diary-week">{{diary.weekday}}</div>
+                <div class="diary-hour">{{diary.time}}</div>
             </div>
             <div class="diary-content">
-                {{message.content}}
+                {{diary.content}}
             </div>
+            <!-- @if(diary.weather || diary.mood) {
+            <div class="diary-meta">
+                @if(diary.weather) {
+                <span class="weather">{{diary.weather}}</span>
+                }
+                @if(diary.mood) {
+                <span class="mood">{{diary.mood}}</span>
+                }
+            </div>
+            } -->
+        </div>
+        } @empty {
+        <div class="empty-state">
+            <ion-icon name="journal-outline"></ion-icon>
+            <p>还没有日记，点击右上角+创建第一篇日记</p>
         </div>
         }
     </div>

myapp/src/app/tab1/tab1.page.scss

@@ -14,65 +14,38 @@ body {
 }
 
 /* 顶部标题栏 */
-// .header {
-//     background-color: #fff9f0;
-//     padding: 15px 20px;
-//     display: flex;
-//     justify-content: space-between;
-//     align-items: center;
-//     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-//     position: sticky;
-//     top: 0;
-//     z-index: 100;
-//     border-bottom: 1px solid #f0e6d6;
-// }
-
-// .header-title {
-//     font-size: 1.1rem;
-//     font-weight: 600;
-//     color: #b38a58;
-//     letter-spacing: 0.5px;
-// }
-
-// .header-icon {
-//     font-size: 1.3rem;
-//     color: #b38a58;
-//     cursor: pointer;
-//     transition: opacity 0.2s;
-// }
-
-// .header-icon:active {
-//     opacity: 0.7;
-// }
-
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  background: var(--ion-color-primary);
-  color: white;
-  
-  .header-title {
-    font-size: 1.2rem;
-    font-weight: 500;
-  }
-  
-  ion-buttons {
+    background-color: #fff9f0;
+    padding: 15px 20px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 8px;
-  }
-  
-  ion-fab-button {
-    --box-shadow: none;
-    margin-left: 8px;
-  }
-}
-
-
-
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid #f0e6d6;
+
+    .header-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #b38a58;
+    letter-spacing: 0.5px;
+    }
+
+    ion-buttons {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    ion-fab-button {
+        --box-shadow: none;
+        margin-left: 8px;
+    }
 
+}
+ 
 /* 内容区域 */
 .content {
     flex: 1;
@@ -137,16 +110,30 @@ body {
     padding-top: 3px;
 }
 
-/* 加载更多 */
-.load-more {
+.diary-meta {
+      margin-top: 8px;
+      display: flex;
+      gap: 8px;
+      
+      .weather, .mood {
+        font-size: 14px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        background-color: var(--ion-color-light);
+      }
+    }
+
+    .empty-state {
     text-align: center;
-    margin-top: 10px;
-    color: #b38a58;
-    font-size: 0.9rem;
-    padding: 12px;
-    cursor: pointer;
-}
-
-.load-more:active {
-    opacity: 0.7;
-}
+    margin-top: 50px;
+    color: var(--ion-color-medium);
+    
+    ion-icon {
+      font-size: 64px;
+      margin-bottom: 16px;
+    }
+    
+    p {
+      font-size: 16px;
+    }
+  }

myapp/src/app/tab1/tab1.page.ts

@@ -1,10 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
-
-import { addIcons } from 'ionicons';
-import { add } from 'ionicons/icons';
-import { CloudObject, CloudQuery,CloudUser } from 'src/lib/ncloud';
+//import { addIcons } from 'ionicons';
+//import { add } from 'ionicons/icons';
 import { AuthService } from '../services/auth.service';
+import { Router } from '@angular/router';
+import { ModalController } from '@ionic/angular';
+import { EditPage } from './edit/edit.page';
+import { DiaryService } from '../services/diary.service';
+import { Diary } from '../modals/diary.modal';
+ 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -12,247 +16,151 @@ import { AuthService } from '../services/auth.service';
   standalone: false,
 })
 export class Tab1Page implements OnInit{
+  
+  
+  diaries: Diary[] = [];
   router: any;
-   
-  async ngOnInit(){
+  authService: any;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private diaryService: DiaryService,
+    private navCtrl: NavController,
+    //private router: Router
+  ) {}
+
+  async ngOnInit() {
     await this.loadDiaries();
   }
-
-  // 加载日记列表
+ 
   async loadDiaries() {
-    const query = new CloudQuery('Diary');
-    query.equalTo('owner', (await this.getCurrentUser())?.id);
-    const diaries = await query.find();
-    this.messageList = diaries.map(diary => diary.data).sort((a, b) => {
-      return new Date(b['createdAt']).getTime() - new Date(a['createdAt']).getTime();
+    this.diaries = await this.diaryService.getDiaries();
+    // Sort by date (newest first)
+    this.diaries.sort((a, b) => {
+      return new Date(b.date).getTime() - new Date(a.date).getTime();
     });
   }
 
-  // 获取当前用户
-  async getCurrentUser() {
-    const user = new CloudUser();
-    return await user.current();
-  }
-
-  // 跳转到编辑页面
-  async goToEditPage(action: string, diary?: any) {
-    const result = await this.navCtrl.navigateForward(['tabs', 'tab1', 'edit'], {
-      queryParams: {
-        action,
-        diary: diary ? JSON.stringify(diary) : null
+  async goToEditPage(edit?:string) {
+    const modal = await this.modalCtrl.create({
+      component: EditPage,
+      componentProps: {
+        mode: 'create'
       }
     });
     
-    // 如果是从编辑页面返回，刷新列表
-    if (result !== false) {
-      await this.loadDiaries();
-    }
-  }
-
-  // 批量导入静态数据
-  async importSampleDiaries() {
-    const user = await this.getCurrentUser();
-    if (!user) {
-      console.error('请先登录');
-      return;
-    }
-
-    const sampleDiaries = [
-      
-      {
-        "id": 1,
-        "date": "15",
-        "weekday": "周三",
-        "time": "14:30",
-        "content": "今天阳光明媚，去公园散步时看到樱花开了。粉色的花瓣随风飘落，美得像一幅画。坐在长椅上读了一会儿书，感觉心情特别平静。",
-        "weather": "晴",
-        "mood": "😊"
-      },
-      {
-        "id": 2,
-        "date": "14",
-        "weekday": "周二",
-        "time": "21:15",
-        "content": "项目终于告一段落，加班到很晚但很有成就感。回家的路上买了杯热奶茶犒劳自己，发现常去的那家奶茶店换了新包装，杯子上画着可爱的小兔子。",
-        "weather": "多云",
-        "mood": "😌"
-      },
-      {
-        "id": 3,
-        "date": "12",
-        "weekday": "周日",
-        "time": "09:45",
-        "content": "周末尝试做了新的菜谱 - 番茄牛腩。虽然炖的时间比预期长，但结果非常美味！下午窝在沙发上看了一部老电影，窗外下着小雨，这种慵懒的周末真是太棒了。",
-        "weather": "小雨",
-        "mood": "🥰"
-      },
-      {
-        "id": 4,
-        "date": "18",
-        "weekday": "周五",
-        "time": "18:20",
-        "content": "参加了公司的团队建设活动，第一次体验了攀岩项目。虽然爬到一半有些害怕，但在同事的鼓励下成功登顶，突破自我的感觉真好！",
-        "weather": "阴",
-        "mood": "😄"
-      },
-      {
-        "id": 5,
-        "date": "20",
-        "weekday": "周六",
-        "time": "15:10",
-        "content": "和朋友去了新开的猫咖，有十几只不同品种的猫咪。最喜欢那只胖乎乎的橘猫，它居然在我腿上睡了一下午，治愈了连日的疲惫。",
-        "weather": "晴",
-        "mood": "😺"
-      },
-      {
-        "id": 6,
-        "date": "22",
-        "weekday": "周一",
-        "time": "08:05",
-        "content": "早起晨跑时发现小区里的桂花开了，空气里都是甜甜的香气。顺手拍了张晨光中的花枝，设为手机壁纸后整天都有好心情。",
-        "weather": "雾",
-        "mood": "🌼"
-      },
-      {
-        "id": 7,
-        "date": "25",
-        "weekday": "周四",
-        "time": "19:40",
-        "content": "下班路上遇到卖糖炒栗子的小摊，热乎乎的栗子捧在手里，边走边吃仿佛回到学生时代。突然想念大学的林荫道和图书馆了。",
-        "weather": "微风",
-        "mood": "🍂"
-      },
-      {
-        "id": 8,
-        "date": "28",
-        "weekday": "周日",
-        "time": "22:30",
-        "content": "整理旧物时发现了高中时期的同学录，翻看那些青涩的留言和夸张的贴纸，忍不住笑出声。那些以为忘记的回忆突然都鲜活起来。",
-        "weather": "晴",
-        "mood": "📖"
+    modal.onDidDismiss().then(async (result) => {
+      if (result.data?.saved) {
+        await this.loadDiaries(); // Refresh the list
       }
-      // 其他日记数据...
-    ];
-
-    for (const diary of sampleDiaries) {
-      const diaryObj = new CloudObject('Diary');
-      diaryObj.set({
-        ...diary,
-        owner: user.id // 关联当前用户
-      });
-      await diaryObj.save();
-    }
-
-    await this.loadDiaries(); // 导入后刷新列表
-  }
-
-  messageList:any[]=[
-  // {
-  //   "id": 1,
-  //   "date": "15",
-  //   "weekday": "周三",
-  //   "time": "14:30",
-  //   "content": "今天阳光明媚，去公园散步时看到樱花开了。粉色的花瓣随风飘落，美得像一幅画。坐在长椅上读了一会儿书，感觉心情特别平静。",
-  //   "weather": "晴",
-  //   "mood": "😊"
-  // },
-  // {
-  //   "id": 2,
-  //   "date": "14",
-  //   "weekday": "周二",
-  //   "time": "21:15",
-  //   "content": "项目终于告一段落，加班到很晚但很有成就感。回家的路上买了杯热奶茶犒劳自己，发现常去的那家奶茶店换了新包装，杯子上画着可爱的小兔子。",
-  //   "weather": "多云",
-  //   "mood": "😌"
-  // },
-  // {
-  //   "id": 3,
-  //   "date": "12",
-  //   "weekday": "周日",
-  //   "time": "09:45",
-  //   "content": "周末尝试做了新的菜谱 - 番茄牛腩。虽然炖的时间比预期长，但结果非常美味！下午窝在沙发上看了一部老电影，窗外下着小雨，这种慵懒的周末真是太棒了。",
-  //   "weather": "小雨",
-  //   "mood": "🥰"
-  // },
-  // {
-  //   "id": 4,
-  //   "date": "18",
-  //   "weekday": "周五",
-  //   "time": "18:20",
-  //   "content": "参加了公司的团队建设活动，第一次体验了攀岩项目。虽然爬到一半有些害怕，但在同事的鼓励下成功登顶，突破自我的感觉真好！",
-  //   "weather": "阴",
-  //   "mood": "😄"
-  // },
-  // {
-  //   "id": 5,
-  //   "date": "20",
-  //   "weekday": "周六",
-  //   "time": "15:10",
-  //   "content": "和朋友去了新开的猫咖，有十几只不同品种的猫咪。最喜欢那只胖乎乎的橘猫，它居然在我腿上睡了一下午，治愈了连日的疲惫。",
-  //   "weather": "晴",
-  //   "mood": "😺"
-  // },
-  // {
-  //   "id": 6,
-  //   "date": "22",
-  //   "weekday": "周一",
-  //   "time": "08:05",
-  //   "content": "早起晨跑时发现小区里的桂花开了，空气里都是甜甜的香气。顺手拍了张晨光中的花枝，设为手机壁纸后整天都有好心情。",
-  //   "weather": "雾",
-  //   "mood": "🌼"
-  // },
-  // {
-  //   "id": 7,
-  //   "date": "25",
-  //   "weekday": "周四",
-  //   "time": "19:40",
-  //   "content": "下班路上遇到卖糖炒栗子的小摊，热乎乎的栗子捧在手里，边走边吃仿佛回到学生时代。突然想念大学的林荫道和图书馆了。",
-  //   "weather": "微风",
-  //   "mood": "🍂"
-  // },
-  // {
-  //   "id": 8,
-  //   "date": "28",
-  //   "weekday": "周日",
-  //   "time": "22:30",
-  //   "content": "整理旧物时发现了高中时期的同学录，翻看那些青涩的留言和夸张的贴纸，忍不住笑出声。那些以为忘记的回忆突然都鲜活起来。",
-  //   "weather": "晴",
-  //   "mood": "📖"
-  // }
-  ];
-  private diaryQuery = new CloudQuery("Diary");
-  
-  constructor(
-    private navCtrl:NavController,
-    private authService: AuthService,
-  ) {
-    addIcons({ add, });
+    });
+    
+    await modal.present();
   }
 
-   // 查看日记详情
-  async goMessage(message: any) {
-    await this.goToEditPage('查看', message);
+  async viewDiary(diary: Diary) {
+    const modal = await this.modalCtrl.create({
+      component: EditPage,
+      componentProps: {
+        diary: diary,
+        mode: 'edit'
+      }
+    });
+    
+    modal.onDidDismiss().then(async (result) => {
+      if (result.data?.saved) {
+        await this.loadDiaries(); // Refresh the list
+      }
+    });
+    
+    await modal.present();
   }
 
-  // goMessage(message?:any){
-  //   console.log(message),
-  //   this.navCtrl.navigateForward(["tabs","tab1","message"],{
-  //     queryParams:message
-  //   })
-  //   return
-  // }
-
   async logout(login?:string) {
     await this.authService.logout();
     this.router.navigate(['/login']);
   }
-  
-  //前往日记创建页面
-  // goToEditPage(diary?:string){
-  //   this.navCtrl.navigateForward(["tabs","tab1","edit"],{
-  //     queryParams: { mode: 'create' }
-  //   });
-  
-  // }
 
+  goMessage(message?:any){
+    console.log(message),
+    this.navCtrl.navigateForward(["tabs","tab1","message"],{
+      queryParams:message
+    })
+    return
+  }
+
+    messageList:any[]=[
+  {
+    "id": 1,
+    "date": "15",
+    "weekday": "周三",
+    "time": "14:30",
+    "content": "今天阳光明媚，去公园散步时看到樱花开了。粉色的花瓣随风飘落，美得像一幅画。坐在长椅上读了一会儿书，感觉心情特别平静。",
+    "weather": "晴",
+    "mood": "😊"
+  },
+  {
+    "id": 2,
+    "date": "14",
+    "weekday": "周二",
+    "time": "21:15",
+    "content": "项目终于告一段落，加班到很晚但很有成就感。回家的路上买了杯热奶茶犒劳自己，发现常去的那家奶茶店换了新包装，杯子上画着可爱的小兔子。",
+    "weather": "多云",
+    "mood": "😌"
+  },
+  {
+    "id": 3,
+    "date": "12",
+    "weekday": "周日",
+    "time": "09:45",
+    "content": "周末尝试做了新的菜谱 - 番茄牛腩。虽然炖的时间比预期长，但结果非常美味！下午窝在沙发上看了一部老电影，窗外下着小雨，这种慵懒的周末真是太棒了。",
+    "weather": "小雨",
+    "mood": "🥰"
+  },
+  {
+    "id": 4,
+    "date": "18",
+    "weekday": "周五",
+    "time": "18:20",
+    "content": "参加了公司的团队建设活动，第一次体验了攀岩项目。虽然爬到一半有些害怕，但在同事的鼓励下成功登顶，突破自我的感觉真好！",
+    "weather": "阴",
+    "mood": "😄"
+  },
+  {
+    "id": 5,
+    "date": "20",
+    "weekday": "周六",
+    "time": "15:10",
+    "content": "和朋友去了新开的猫咖，有十几只不同品种的猫咪。最喜欢那只胖乎乎的橘猫，它居然在我腿上睡了一下午，治愈了连日的疲惫。",
+    "weather": "晴",
+    "mood": "😺"
+  },
+  {
+    "id": 6,
+    "date": "22",
+    "weekday": "周一",
+    "time": "08:05",
+    "content": "早起晨跑时发现小区里的桂花开了，空气里都是甜甜的香气。顺手拍了张晨光中的花枝，设为手机壁纸后整天都有好心情。",
+    "weather": "雾",
+    "mood": "🌼"
+  },
+  {
+    "id": 7,
+    "date": "25",
+    "weekday": "周四",
+    "time": "19:40",
+    "content": "下班路上遇到卖糖炒栗子的小摊，热乎乎的栗子捧在手里，边走边吃仿佛回到学生时代。突然想念大学的林荫道和图书馆了。",
+    "weather": "微风",
+    "mood": "🍂"
+  },
+  {
+    "id": 8,
+    "date": "28",
+    "weekday": "周日",
+    "time": "22:30",
+    "content": "整理旧物时发现了高中时期的同学录，翻看那些青涩的留言和夸张的贴纸，忍不住笑出声。那些以为忘记的回忆突然都鲜活起来。",
+    "weather": "晴",
+    "mood": "📖"
+  }
+  ]; 
 }

myapp/src/app/tab1/test-message/test-message.page.ts

@@ -7,6 +7,8 @@ import { Share } from '@capacitor/share';
 import { Browser } from '@capacitor/browser';
 import { Location } from '@angular/common';
 
+//import { ModalController, NavParams } from '@ionic/angular';
+//import { DiaryService } from '../../services/diary.service';
 interface Diary {
   id: number;
   date: string;
@@ -31,11 +33,7 @@ interface LocationInfo {
   standalone:false,
 })
 export class TestMessagePage implements OnInit {
-
-  //message:any={}
-
-  
-
+ 
   message: Diary = {
     id: 1,
     date: '15',
@@ -44,7 +42,7 @@ export class TestMessagePage implements OnInit {
     content: '今天阳光明媚，去公园散步时看到樱花开了。粉色的花瓣随风飘落，美得像一幅画。坐在长椅上读了一会儿书，感觉心情特别平静。',
     weather: '晴',
     mood: '😊'
-  };
+  }; 
 
   tags: string[] = ['公园', '樱花', '阅读'];
   tagColors: { [key: string]: string } = {
@@ -90,14 +88,18 @@ export class TestMessagePage implements OnInit {
   isDarkMode = false;
 
   toastCtrl: any;
-  constructor(
+  constructor( 
+    
     private route:ActivatedRoute,
-
     private router: Router,
     private actionSheetCtrl: ActionSheetController,
     private alertController: AlertController,
     private platform: Platform,
-    private locationBack: Location
+    private locationBack: Location,
+
+    //private navParams: NavParams,
+    //private diaryService: DiaryService,
+    //private modalCtrl: ModalController
   ) { 
     this.route.queryParams.subscribe(params=>{
      //console.log(params)