PPT 全方位辅助系统——项目记录7

本周我们继续学习前端的相关内容，并根据之前小组讨论后设计的项目前端页面进行前端页面和功能的进一步实现和完善。

本周我们主要完成了以下工作：

1）对前期已完成的代码和功能进行错误修改和细节优化；

2）增添了PPT辅导功能，即用户可以与大模型进行对话；

3）进一步美化了前端界面。

错误修改与细节优化

主要包括以下两个内容：

1）修改了之前因为router重复连接导致的页面刚打开时的反复刷新问题；

2）将所有组件的位置由绝对定位改为相对定位，使前端界面可以适应不同尺寸的显示屏。

PPT辅导

页面展示

核心代码

<template>
  <div class="header" style="font-size: 40px;">  
        <h1>PPT辅导</h1>  
  </div>

  <div class="chat-container">
    <div class="chat-window">
      <div v-for="message in messages" :key="message.id" :class="message.type">
        {{ message.text }}
      </div>
    </div>
    <div class="input-container">
      <input v-model="userInput" @keyup.enter="sendMessage" placeholder="Type your message..." />
      <button @click="sendMessage">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
  </div>
  <router-link to="/" class="back-button">
       
       <i class="fas fa-arrow-left"></i>

 </router-link>
 <router-view></router-view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInput: '',
      messages: [],
      messageId: 0
    };
  },
  methods: {
    async sendMessage() {
      if (this.userInput.trim() === '') return;

      const userMessage = {
        id: this.messageId++,
        text: this.userInput,
        type: 'user'
      };
      this.messages.push(userMessage);

      try {
        const response = await axios.post('http://localhost:8080/chat/async', this.userInput, {
          headers: {
            'Content-Type': 'text/plain'
          }
        });

        const aiMessage = {
          id: this.messageId++,
          text: response.data,
          type: 'ai'
        };
        this.messages.push(aiMessage);
      } catch (error) {
        console.error('Error sending message:', error);
      }

      this.userInput = '';
    }
  }
};
</script>

<style scoped>

.header {  
    display: flex;  
    margin-bottom: 20px;
    position: fixed; /* 使用相对定位 */  
    top: 13%; /* 距离顶部的位置 */  
    left: 6%; /* 距离左侧的位置 */  
    color: #000000;
    width: 75%;
    margin: auto;
    padding: 20px;
    
    
    
    padding: 20px;
    border-radius: 8px;
  }  

body {
  margin: 0;
  padding: 0;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  background-color: #f9f9f9;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  background-color: #f9f9f951;
  align-items: center; /* 中心对齐 */
  justify-content: center; /* 中心对齐 */
  position: fixed; /* 使用相对定位 */  
  top: 0%; /* 距离顶部的位置 */  
  left: 40%; /* 距离左侧的位置 */  
}

.chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #ffffff3a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 50vw; /* 设置宽度为视口宽度的80% */
  height: 70vh; /* 设置高度为视口高度的70% */
  max-width: 1200px; /* 设置最大宽度 */
  max-height: 800px; /* 设置最大高度 */
  margin-bottom: 20px;
  
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  flex: 1;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 25px;
  margin-right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid #007bff;
  border-radius: 25px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.user {
  text-align: right;
  background-color: #DCF8C6;
  padding: 10px;
  border-radius: 10px;
  margin: 5px 0;
  align-self: flex-end;
  max-width: 80%;
}

.ai {
  text-align: left;
  background-color: #FFF;
  padding: 10px;
  border-radius: 10px;
  margin: 5px 0;
  align-self: flex-start;
  max-width: 80%;
}
.back-button {
  cursor: pointer;
  font-size: 20px;
  color: #000000;
  /*margin: 0px;*/
  display: flex;  
  /*flex-direction: column; */
  position: fixed; /* 使用相对定位 */  
  top: 4%; /* 距离顶部的位置 */  
  left: 2%; /* 距离左侧的位置 */  
}

.back-button:hover {  
    background-color: #ffffff;  
  }
</style>

美化后其他页面展示