冲刺记录9

完成了项目主页面，相关代码如下：

<script>
import { gsap } from 'gsap';
import MyHeader from './headOne.vue';

export default {
  name: "indexOne",
  components:{
    MyHeader,
  },
  data() {
    return {
      messages: [],
      inputMessage: '',
      kimiResponseRef:[],
    };
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) {
        return; // 如果输入为空，直接返回
      }

      // 定义Moonshot API的URL
      const apiUrl = 'https://api.moonshot.cn/v1/chat/completions';

      // 定义请求数据
      const requestData = {
        model: "moonshot-v1-8k",
        messages: [
          { role: "system", content: "你是石家庄铁道大学的一个热情的心理老师，你对向你倾诉的学生们非常地关怀，你解决学生的问题时，要以言语引导的形式去解决学生的问题，最后不要用分点的形式给出方案，你是一个真人，你需要用温暖的语言解决学生的问题，你回答的句数不要超过6句。如果你认为学生遭到了霸凌现象，你需要引导学生正面霸凌现象，给他列举实例，要告诉他需要做出反抗，称呼不用过于亲昵" },
          { role: "user", content: this.inputMessage }
        ],
        temperature: 0.3
      };
      // 发起API请求
      fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'sk-MVUbo9dcpKWrbVfYo4Dxpb7qNkyGPFS6ErxXJFejnPJsLtkd' // 替换为你的Moonshot API密钥
        },
        body: JSON.stringify(requestData)
      })
          .then(response => response.json())
          .then(data => {
            // 取出Kimi的回答内容
            const kimiResponse = data.choices[0].message.content;
            this.messages.push({ text: this.inputMessage, isUser: true });
            this.messages.push({ text: kimiResponse, isUser: false });

            this.inputMessage = ''; // 清空输入框
          })
          .catch(error => {
            // 处理错误情况
            console.error('发生错误:', error);
          });
    },
  },
  mounted() {
    function star_fly(elm) {
      elm.style.width = '4px';
      elm.style.height = '4px';
      elm.style.position = 'absolute';
      elm.style.backgroundColor = '#ffffff';
      elm.style.boxShadow = '0px 0px 17px 4px wheat';
      elm.style.borderRadius = '50%';
      gsap.fromTo(elm, {
        x: Math.random() * containerWidth,
        y:  -window.innerHeight,
        opacity: 1,
      }, {
        y: containerHeight + 10,
        duration: Math.random() * 7 + 2,
        delay: Math.random() * 3,
        repeat: -1,
        ease: 'none',
        onComplete: () => {
          gsap.set(elm, { x: Math.random() * containerWidth, y: -10 });
        },
      });
    }
    const star_num = 75;
    const container = document.querySelector('.container');
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;

    for (let i = 0; i < star_num; i++) {
      const star = document.createElement('div');
      star.classList.add('particle_star');
      container.appendChild(star);
      star_fly(star);
    }


  },
}
</script>

<template>
  <div class="container">
  <div class="chat-app">
    <el-container>
      <el-container>
        <div>
          <el-container class="header">
            <MyHeader></MyHeader>
          </el-container>
        </div>
        <div>
          <el-main class="el-main" style="padding: 0 ; ">

            <div class="messages-container">
              <div
                  v-for="(message, index) in messages"
                  :key="index"
                  :class="{'message': true, 'is-user': message.isUser}"
              >

                <el-avatar :icon="message.isUser ? 'el-icon-user-solid' : 'el-icon-s-help'"></el-avatar>

                <el-card class="message-content" :class="{'user-message': message.isUser}">
                  {{ message.text }}
                </el-card>
              </div>
            </div>
          </el-main>
        </div>
        <el-footer class="el-footer" style="text-align: right; padding: 20px;">
          <el-input
              v-model="inputMessage"
              type="textarea"
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
          ></el-input>
          <el-button class="el-button--primary" type="primary" @click="sendMessage">发送</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
  </div>
</template>

<style scoped>
.chat-app /deep/ .el-button--primary {
  margin-left: 20px;
  z-index: 9999; /* 设置一个足够高的 z-index 值 */
}
.container
{
  margin: 0 auto;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url('../assets/bg.jpg');
}

.messages-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.message {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.message-content {
  max-width: 60%;
}
.message.is-user {
  justify-content: flex-end;
  flex-direction: row-reverse; /* 确保头像在消息内容的右侧 */
  margin-left: auto;
}
.message.is-user .message-content {
  background-color: #DCF8C6;
}
.el-main {
  min-height: 83vh; /* 设置最小高度为视口高度 */
  z-index: 9999; /* 设置一个足够高的 z-index 值 */
}
.el-footer
{
  display: flex;
   background-color: transparent;
  background-clip: padding-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>