feat.liao.4.0

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171836.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171837.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwdriftbottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio  id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224171933.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController,IonCardTitle } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,IonCardTitle
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224172041.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+import { IonCardTitle } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,IonCardTitle
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224172141.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174145.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174155.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwdriftbottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224174644.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwdriftbottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175007.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+    --width: 90%;
+    --height: auto;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+  
+  .top-image img {
+    width: 100%;
+    height: auto;
+  }
+  
+  .button-container {
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    width: calc(100% - 40px);
+  }
+  
+  .circular-button {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175125.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+  --width: 90%;
+  --height: auto;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.top-image img {
+  width: 100%;
+  height: auto;
+}
+
+.button-container {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.circular-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175136.scss

@@ -0,0 +1,110 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+.my-custom-class {
+  --width: 90%;
+  --height: auto;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.top-image img {
+  width: 100%;
+  height: auto;
+}
+
+.button-container {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  width: calc(100% - 40px);
+}
+
+.circular-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175140.scss

@@ -0,0 +1,84 @@
+/* drift-bottle.component.scss */
+:host {
+    display: block;
+}
+
+/* 设置页面背景色 */
+ion-content {
+    --background: transparent; /* 确保内容背景透明 */
+    position: relative;
+    height: 100vh; /* 确保内容高度占满整个视口 */
+}
+
+.top-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80%; /* 图片占据页面的70%高度 */
+    overflow: hidden;
+    z-index: 0; /* 确保图片在工具栏之下 */
+    
+}
+
+
+.top-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
+    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
+}
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6); /* 白色半透明背景 */
+    transform: scale(0);
+    animation: rippleEffect 0.6s ease-out;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+.button-container {
+    position: absolute;
+    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
+    z-index: 2; /* 确保按钮在图片之上 */
+}
+
+.left-button {
+    left: 30px; /* 距离左边的距离 */
+}
+
+.right-button {
+    right: 30px; /* 距离右边的距离 */
+}
+
+.button-container img {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    display: block;
+}
+.circular-button {
+    width: 60px; /* 按钮图片宽度 */
+    height: 60px; /* 按钮图片高度 */
+    border-radius: 50%; /* 将图片剪裁为圆形 */
+    object-fit: cover; /* 保证图片填充圆形区域 */
+    transform: scale(1.5); /* 放大1.5倍 */
+    transform-origin: center; /* 放大的基点为中心 */
+    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
+}
+
+/* 如果需要，可以在悬停时添加一些效果 */
+.circular-button:hover {
+    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
+}
+
+
+  
+  
+  
+  

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175803.html

@@ -0,0 +1,22 @@
+<ion-content [fullscreen]="true">
+  <div class="top-image" >
+    <img src="/assets/img/漂流瓶.jpg" alt="漂流瓶">
+    
+  </div>
+  <!-- 其他内容可以放在这里 -->
+  <!-- 左边的按钮 -->
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
+    <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
+  </div>
+
+  <!-- 右边的按钮 -->
+  <div class="button-container right-button">
+    <img src="/assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
+  </div>
+
+   <!-- 背景音乐 -->
+   <audio id="backgroundAudio" autoplay loop>
+    <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+  </audio>
+</ion-content>

.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224175804.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
+
+@Component({
+  selector: 'app-drift-bottle',
+  templateUrl: './drift-bottle.component.html',
+  styleUrls: ['./drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
+})
+export class DriftBottleComponent implements OnInit {
+
+  constructor(private router: Router, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwDriftBottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224162336.html

@@ -0,0 +1,3 @@
+<p>
+  throw-drift-bottle works!
+</p>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224162336.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+})
+export class ThrowDriftBottleComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224170433.html

@@ -0,0 +1,13 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224170434.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224172140.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224172803.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224173612.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ModalThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throwdriftbottle() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224173624.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { IonCardTitle } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,IonCardTitle
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private router: Router, private http: HttpClient) { }
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174642.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>写漂流瓶内容</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">关闭</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 学校输入 -->
+      <ion-item>
+        <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+      </ion-item>
+
+      <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174644.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174736.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224174828.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader,IonCardTitle, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,IonCardTitle,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224175026.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.dismiss(); // 关闭模态框
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224175052.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonButton, IonList, IonListHeader, IonItem,IonCardTitle, IonContent, IonIcon, IonLabel, IonCardHeader, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { HttpClient } from '@angular/common/http';
+import { CloudObject } from 'src/lib/ncloud';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonSelect, IonSelectOption,
+    FormsModule, IonList, IonListHeader, IonItem,
+    IonLabel, IonIcon, IonButton, IonCardContent,IonCardTitle,
+    IonInput, IonSearchbar, IonCard, IonCardHeader,
+    CommonModule,
+  ]
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private http: HttpClient, private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.dismiss(); // 关闭模态框
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

.history/soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component_20241224180816.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}

soul-app/src/app/catch-drift-bottle/catch-drift-bottle.component.html

@@ -0,0 +1,3 @@
+<p>
+  catch-drift-bottle works!
+</p>

soul-app/src/app/catch-drift-bottle/catch-drift-bottle.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CatchDriftBottleComponent } from './catch-drift-bottle.component';
+
+describe('CatchDriftBottleComponent', () => {
+  let component: CatchDriftBottleComponent;
+  let fixture: ComponentFixture<CatchDriftBottleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CatchDriftBottleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CatchDriftBottleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

soul-app/src/app/catch-drift-bottle/catch-drift-bottle.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-catch-drift-bottle',
+  templateUrl: './catch-drift-bottle.component.html',
+  styleUrls: ['./catch-drift-bottle.component.scss'],
+  standalone: true,
+})
+export class CatchDriftBottleComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

soul-app/src/app/drift-bottle/drift-bottle.component.html

@@ -5,7 +5,7 @@
   </div>
   <!-- 其他内容可以放在这里 -->
   <!-- 左边的按钮 -->
-  <div class="button-container left-button">
+  <div class="button-container left-button" (click)="throwDriftBottleModal()">
     <img src="/assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
   </div>
 
@@ -15,7 +15,7 @@
   </div>
 
    <!-- 背景音乐 -->
-   <audio  id="backgroundAudio" autoplay loop>
+   <audio id="backgroundAudio" autoplay loop>
     <source src="/assets/audio/海浪.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>

soul-app/src/app/drift-bottle/drift-bottle.component.ts

@@ -1,27 +1,34 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader,IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
-  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent, IonTitle,IonCard, IonToolbar,IonInput,IonSearchbar } from '@ionic/angular/standalone';
-  import { Router } from '@angular/router';
+import { Router } from '@angular/router';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { ThrowDriftBottleComponent } from '../throw-drift-bottle/throw-drift-bottle.component';
 
 @Component({
   selector: 'app-drift-bottle',
   templateUrl: './drift-bottle.component.html',
   styleUrls: ['./drift-bottle.component.scss'],
   standalone: true,
-  imports: [IonHeader,IonToolbar,IonTitle,IonContent,
-        IonList,IonListHeader,IonItem,IonCardTitle,
-        IonLabel,IonIcon,IonButton,IonCardContent,IonAvatar,
-        IonInput,IonSearchbar,IonCard,IonCardHeader
-        
-      ]
+  imports: [
+    IonicModule,
+    // 其他导入项...
+  ]
 })
-export class DriftBottleComponent  implements OnInit {
+export class DriftBottleComponent implements OnInit {
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, private modalCtrl: ModalController) {}
 
-  goTab1(){
-    this.router.navigate(['tabs/tab1']);
-   }
   ngOnInit() {}
 
-}
+  goTab1() {
+    this.router.navigate(['tabs/tab1']);
+  }
+
+  async throwDriftBottleModal() {
+    const modal = await this.modalCtrl.create({
+      component: ThrowDriftBottleComponent,
+      cssClass: 'my-custom-class'
+    });
+
+    return await modal.present();
+  }
+}

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.html

@@ -0,0 +1,12 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>请写下你的漂流瓶内容</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <!-- 学校输入 -->
+    <ion-item>
+      <ion-input [(ngModel)]="driftbottleData.content" placeholder="在此处填写"></ion-input>
+    </ion-item>
+    <ion-button expand="block" color="danger" (click)="throw()">确定</ion-button>
+  </ion-card-content>
+</ion-card>

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ThrowDriftBottleComponent } from './throw-drift-bottle.component';
+
+describe('ThrowDriftBottleComponent', () => {
+  let component: ThrowDriftBottleComponent;
+  let fixture: ComponentFixture<ThrowDriftBottleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ThrowDriftBottleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ThrowDriftBottleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

soul-app/src/app/throw-drift-bottle/throw-drift-bottle.component.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, IonInput, IonItem, IonLabel, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/angular/standalone';
+import { CloudObject } from 'src/lib/ncloud';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-throw-drift-bottle',
+  templateUrl: './throw-drift-bottle.component.html',
+  styleUrls: ['./throw-drift-bottle.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonInput,
+    IonItem,
+    IonLabel,
+    FormsModule,
+    CommonModule
+  ],
+})
+export class ThrowDriftBottleComponent implements OnInit {
+  driftbottleData: { content: string } = { content: '' }; // 漂流瓶内容
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  throw() {
+    console.log('投掷漂流瓶:');
+    console.log(`内容: ${this.driftbottleData.content}`);
+    // 这里可以添加逻辑将漂流瓶内容发布到后端或其他处理
+    const driftbottleData = {
+      content: this.driftbottleData.content,
+    };
+
+    let driftbottle = new CloudObject("Driftbottle");
+    driftbottle.set(driftbottleData);
+    driftbottle.save().then(data => {
+      console.log('漂流瓶已成功投掷', data);
+      this.modalCtrl.dismiss(driftbottle, "confirm");
+    }).catch(err => {
+      console.error('投掷漂流瓶时出错');
+    });
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, "cancel");
+  }
+}
+
+export async function openThrowDriftBottleModal(modalCtrl: ModalController): Promise<any> {
+  const modal = await modalCtrl.create({
+    component: ThrowDriftBottleComponent,
+    breakpoints: [0.7, 1.0],
+    initialBreakpoint: 0.7
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}