12.23

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

@@ -5,35 +5,23 @@
 </ion-header>
 
 <ion-content class="custom-content">
-  <ion-card class="input-card">
+  <ion-card class="input" >
     <ion-card-content>
-      <ion-input
-        class="custom-input"
-        name="text"
-        type="text"
-        [(ngModel)]="page2"
-        placeholder="请输入内容"
-        (focus)="clearPlaceholder()"
-      ></ion-input>
+      <ion-input placeholder="时间" type="text" name="text" class="input"></ion-input>
     </ion-card-content>
   </ion-card>
 
   <!-- “请输入您的需求”盒子 -->
-  <ion-card class="input-card">
+  <ion-card>
     <ion-card-content>
-      <ion-textarea
-        [(ngModel)]="userPrompt"
-        placeholder="请输入文本提示词"
-        autoGrow="true"
-        class="custom-textarea"
-      ></ion-textarea>
+      <ion-input [(ngModel)]="userPrompt" placeholder="请输入您的需求" type="text" name="text" class="input"></ion-input>
     </ion-card-content>
   </ion-card>
 
-  <!-- 按钮：执行消息生成函数 -->
-  <ion-button (click)="sendMessage()" expand="block" class="custom-button">
+    <ion-button (click)="sendMessage()"  expand="block" class="custom-button">
     旅游路线
-  </ion-button>
+    </ion-button>
+
 
   <!-- 展示：返回消息内容 -->
   <div *ngIf="!isComplete" class="response-message">{{responseMsg}}</div>

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

@@ -1,5 +1,5 @@
 .custom-toolbar {
-    --background: #c8b0af; // 设置页眉背景颜色为紫色
+    --background: #D6CCC2; // 设置页眉背景颜色为紫色
     --color: white; // 设置页眉文字颜色为白色
   }
   
@@ -7,22 +7,30 @@
     font-size: 1.5rem; // 可以根据需要调整字体大小
   }
   ion-content.custom-content {
-    --background: #ceaf9f; // 替换#your-color-code为你想要的颜色
+    --background: #F5EBE0; // 替换#your-color-code为你想要的颜色
   }
-  .input-card {
-    margin: 10px;
-    ion-card-content {
-      padding: 10px;
-    }
-  }
-  .custom-button {
-    --background: #808080; // 灰色背景
-  }
-  .response-card {
-    margin: 10px;
-    --background: #ffffff; // 设置背景颜色为白色，可根据需要更改
-  }
-  
-  .response-message {
-    white-space: pre-wrap; // 保持回复中的格式
-  }
+
+.input {
+  width: 100%;
+  max-width: 220px;
+  height: 45px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1.5px solid lightgrey;
+  outline: none;
+  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  box-shadow: 0px 0px 20px -18px;
+}
+
+.input:hover {
+  border: 2px solid lightgrey;
+  box-shadow: 0px 0px 20px -17px;
+}
+
+.input:active {
+  transform: scale(0.95);
+}
+
+.input:focus {
+  border: 2px solid grey;
+}

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

@@ -20,7 +20,7 @@ import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 })
 export class Tab2Page implements OnInit {
   page2: string = "时间"; // 用户输入的游玩时间
-  userPrompt: string = "请描述您的需求"; // 用户输入的需求提示
+  userPrompt: string = ""; // 用户输入的需求提示
   responseMsg: string = ""; // 用于展示AI返回的消息内容
   isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
   constructor() {}

travel-app/src/app/tab3/tab3.page.html

@@ -1,30 +1,51 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Chat</ion-title>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content>
-  <ion-list>
-    <ion-item *ngFor="let message of messages">
-      <ion-label [ngClass]="{'bot-message': message.from === 'bot', 'user-message': message.from === 'user'}">
-        {{message.text}}
-      </ion-label>
-    </ion-item>
-  </ion-list>
+<ion-content class="custom-content" padding>
+  <form (ngSubmit)="publishPost()" #postForm="ngForm">
+    
+    <div class="input-container">
+      <ion-item>
+        <div class="upload-container">
+          <!-- 上传文件盒子 -->
+          <div *ngIf="selectedFiles.length === 0" class="upload-box" (click)="fileInput.click()">
+            <ion-icon name="add" class="upload-icon"></ion-icon>
+            <input type="file" #fileInput (change)="onFilesSelected($event)" accept="image/*,video/*" multiple style="display: none;" />
+          </div>
 
-  <ion-footer>
-    <ion-toolbar>
-      <ion-input [(ngModel)]="newMessage" placeholder="输入你的问题或需求"></ion-input>
-      <ion-button (click)="sendMessage()" expand="block">发送</ion-button>
-    </ion-toolbar>
-  </ion-footer>
+          <!-- 显示已上传的文件 -->
+          <div *ngIf="selectedFiles.length > 0">
+            <div *ngFor="let file of selectedFiles" class="file-preview">
+              <ng-container *ngIf="file.isImage; else videoTemplate">
+                <img [src]="file.src" class="file-image" />
+              </ng-container>
+              <ng-template #videoTemplate>
+                <video [src]="file.src" class="file-image" controls></video>
+              </ng-template>
+              <ion-button (click)="removeFile(file)" fill="clear" class="remove-button">
+                <ion-icon name="trash"></ion-icon>
+              </ion-button>
+            </div>
+          </div>
+        </div>
+      </ion-item>
+    </div>
 
-  @if(!isComplete){
-    <div>{{responseMsg}}</div>
-  }
-  <!-- 消息传输完成后，实时预览Markdown格式 -->
-  @if(isComplete){
-    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
-  }
-</ion-content>
+    <div class="input-container">
+      <input type="text" id="input-title" [(ngModel)]="postTitle" name="title" required>
+      <label for="input-title" class="label">标题</label>
+      <div class="underline"></div>
+    </div>
+
+    <div class="input-container">
+      <textarea id="input-content" [(ngModel)]="postContent" name="content" required></textarea>
+      <label for="input-content" class="label">正文</label>
+      <div class="underline"></div>
+    </div>
+  </form>
+</ion-content>
+
+
+<ion-footer>
+  <ion-button (click)="sendMessage()" expand="block" class="custom-button">
+    发布笔记
+  </ion-button>
+</ion-footer>

travel-app/src/app/tab3/tab3.page.scss

@@ -1,16 +1,132 @@
-.bot-message {
-    align-self: flex-start;
-    background-color: #e0e0e0;
-    border-radius: 10px;
-    padding: 10px;
-    max-width: 70%;
-    }
-    .user-message {
-    align-self: flex-end;
-    background-color: #0084ff;
-    color: white;
-    border-radius: 10px;
-    padding: 10px;
-    max-width: 70%;
-    }
-    
+ion-content.custom-content {
+  --background: #F5EBE0; // 替换#your-color-code为你想要的颜色
+}
+
+/* 输入容器 */
+.input-container {
+  position: relative;
+  margin: 30px 0; /* 添加上下间距 */
+}
+
+/* 输入框样式 */
+.input-container input[type="text"],
+.input-container textarea {
+  font-size: 20px;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid #ccc;
+  padding: 5px 0;
+  background-color: transparent;
+  outline: none;
+}
+
+/* 标签样式 */
+.input-container .label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #ccc;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+/* 输入框聚焦和有效时标签样式 */
+.input-container input[type="text"]:focus ~ .label,
+.input-container input[type="text"]:valid ~ .label,
+.input-container textarea:focus ~ .label,
+.input-container textarea:valid ~ .label {
+  top: -20px;
+  font-size: 16px;
+  color: #333;
+}
+
+/* 下划线样式 */
+.input-container .underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background-color: #333;
+  transform: scaleX(0);
+  transition: all 0.3s ease;
+}
+
+/* 输入框聚焦和有效时下划线样式 */
+.input-container input[type="text"]:focus ~ .underline,
+.input-container input[type="text"]:valid ~ .underline,
+.input-container textarea:focus ~ .underline,
+.input-container textarea:valid ~ .underline {
+  transform: scaleX(1);
+}
+
+/* 上传容器样式 */
+.upload-container {
+  display: flex; /* 使用 Flexbox 布局 */
+  align-items: center; /* 垂直居中对齐 */
+}
+
+/* 上传盒子样式 */
+.upload-box {
+  display: flex; /* 使用flex布局使加号居中 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  border: 2px dashed rgba(228, 232, 236, 0.7); /* 边框样式，使用透明度 */
+  border-radius: 10px; /* 圆角 */
+  padding: 20px; /* 内边距，确保加号图标不被挤压 */
+  text-align: center; /* 文字居中 */
+  background-color: rgba(242, 246, 250, 0.5); /* 背景颜色，使用透明度 */
+  cursor: pointer; /* 鼠标悬停时显示手型 */
+  transition: background-color 0.3s; /* 背景颜色过渡效果 */
+  height: 100px; /* 设置上传框的高度 */
+  margin-right: 10px; /* 盒子与图片之间的间距 */
+}
+
+/* 悬停时改变背景颜色 */
+.upload-box:hover {
+  background-color: rgba(236, 243, 244, 0.7); /* 悬停时改变背景颜色，使用透明度 */
+}
+
+/* 加号图标样式 */
+.upload-icon {
+  font-size: 40px; /* 加号图标的大小 */
+  color: #007bff; /* 加号图标的颜色 */
+}
+
+/* 文件预览容器 */
+.file-preview-container {
+  display: flex; /* 使用 flexbox 来排列文件预览 */
+  flex-wrap: wrap; /* 允许换行 */
+  gap: 10px; /* 设置间距 */
+}
+
+/* 文件预览样式 */
+.file-preview {
+  position: relative; /* 使文件预览相对定位 */
+  width: 100px; /* 设置固定宽度 */
+  height: 100px; /* 设置固定高度 */
+  overflow: hidden; /* 隐藏溢出 */
+  flex: 0 0 auto; /* 不放大也不缩小，基础大小 */
+}
+
+.file-image {
+  width: 100%; /* 使图片宽度适应 */
+  height: 100%; /* 使图片高度适应 */
+  object-fit: cover; /* 保持比例并裁剪超出部分 */
+  border-radius: 10px; /* 圆角 */
+}
+
+/* 删除按钮样式 */
+.remove-button {
+  position: absolute; /* 绝对定位 */
+  top: 5px; /* 距离顶部 */
+  right: 5px; /* 距离右侧 */
+  z-index: 3; /* 设置较高的z-index值以确保按钮在图片上方 */
+}
+
+/* 修正ion-item的样式，使其居左 */
+ion-item {
+  --background: #F5EBE0;
+  margin: 10px 0;
+  text-align: left; /* 使内容左对齐 */
+}

travel-app/src/app/tab3/tab3.page.ts

@@ -1,70 +1,67 @@
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
-import { Component } from '@angular/core';
-import { NavController } from '@ionic/angular';
-// 假设的AI服务，需要替换为实际的飞码AI服务连接代码
-import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
+import { addIcons } from 'ionicons';
+import { add } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss'],
+  templateUrl: './tab3.page.html',
+  styleUrls: ['./tab3.page.scss'],
   standalone: true,
   imports: [
     CommonModule,
     IonicModule,
     FormsModule,
-    MarkdownPreviewModule
   ]
 })
+export class Tab3Page {
+  postTitle: string = '';
+  postContent: string = '';
+  selectedFiles: { src: string | ArrayBuffer | null, isImage: boolean }[] = []; // 用于存储多个文件信息
 
-export class Tab3Page  {
-
-  responseMsg: string = ""; // 用于展示AI返回的消息内容
-  isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
+  constructor() {
+    addIcons({ add });
+  }
 
-  messages = [
-    {
-      from: 'bot',
-      text: '您好！我是人工智能助手，很高兴为您服务。请问有什么可以帮助您的？'
-    },
-    {
-      from: 'user',
-      text: '你能帮我写一篇文章吗？'
-    },
-    {
-      from: 'user',
-      text: '有没有什么推荐的阅读材料？'
-    },
-    {
-      from: 'user',
-      text: '能帮我分析一下市场趋势吗？'
+  onFilesSelected(event: Event) {
+    // 清空已选文件数组
+    this.selectedFiles = [];
+    
+    const files = (event.target as HTMLInputElement).files;
+    if (files) {
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const reader = new FileReader();
+        reader.onload = () => {
+          this.selectedFiles.push({ src: reader.result, isImage: file.type.startsWith('image/') }); // 将文件信息添加到数组中
+        };
+        reader.readAsDataURL(file);
+      }
     }
-  ];
-  newMessage = '';
-
-  constructor(private navCtrl: NavController) {}
-
-  // 发送消息到AI服务并获取响应
-  sendMessage() {
-    console.log("creating AI message...");
+  }
 
-    let PromptTemplate = ``;
+  removeFile(fileToRemove: { src: string | ArrayBuffer | null, isImage: boolean }) {
+    this.selectedFiles = this.selectedFiles.filter(file => file !== fileToRemove); // 从数组中移除指定文件
+  }
 
-    let completion = new FmodeChatCompletion([
-      { role: "system", content: "你是一名友好的AI助手" },
-      { role: "user", content: PromptTemplate }
-    ]);
+  sendMessage() {}
 
-    completion.sendCompletion().subscribe((message:any)=>{
-      // 打印消息体
-      console.log(message.content)
-      // 赋值消息内容给组件内属性
-      this.responseMsg = message.content
-      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
-        this.isComplete = true
-      }
-    })
+  publishPost() {
+    if (this.postTitle && this.postContent) {
+      // 这里可以将帖子数据发送到服务器
+      console.log('发布帖子:', {
+        title: this.postTitle,
+        content: this.postContent,
+        files: this.selectedFiles,
+      });
+      // 清空表单
+      this.postTitle = '';
+      this.postContent = '';
+      this.selectedFiles = [];
+    } else {
+      console.log('标题和正文不能为空');
+    }
   }
 }

travel-app/src/index.html

@@ -13,6 +13,7 @@
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <link rel="stylesheet" href="https://unpkg.com/ionicons@5.5.2/dist/ionicons.min.css">
 
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />