创新实训第五周周报

在上一周我确定好了项目前端的风格，在这一周初，我先将界面进行了分块计划在本周进行新建对话功能。

以下是对应的html代码：

 <div class="container">
    <div class="popup" ref="popup" @click="popupClose">
      <div class="con_left" @click.stop>
        <button class="new_talk" @click="newTalk">开始新对话{{ type }}</button>

        <div class="talk_list">
          <div v-for="item in talkList" @click="reTalk(item)" :class="{ 'border': tid == item.id }">
            <span>{{ item.data[(item.data.length - 2)].content }}</span>
            <i class="el-icon-s-comment"></i>
<!--            下拉选项-->
            <el-dropdown style="height :22px; width: 30px ;position: relative; right: 0px; top: -5px;">
        <span class="el-dropdown-link" style="position: absolute; left: 0px; top: 1px;" >
         <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="reTalk(item)">进入对话</el-dropdown-item>
                  <el-dropdown-item @click="deleteTalk(item)">删除对话</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

这部分的前端样式我是几乎仿照chat gpt的样式来完成的，因为两个项目的风格不是十分一致，对颜色等细节，我又做了一些调整。

接着，这部分内容需要一些js代码来驱动，js代码如下：

saveHistory() {
      let obj = {
        id: 'scene' + this.getTimeStamp(),
        data: this.messages
      }
//       创建一个对象 obj，包含两个属性：id 和 data。
// id 属性由字符串 'scene' 和当前时间戳组成，用于标识保存的对话历史数据。
// data 属性则保存了当前的消息列表 this.messages。
      if (this.messages.length > 0) {
        if (localStorage.getItem("talkId")) {
          this.talkList.map(item => {
            if (item.id == localStorage.getItem("talkId")) {
              item.data = this.messages
            }
          })
        } else {
          this.talkList.unshift(obj)
        }

        localStorage.removeItem("talkId")
        this.tid = ''
        this.talkList = this.talkList.slice(0, 8)
        localStorage.setItem("talkList", JSON.stringify(this.talkList))
        //         如果本地存储中存在名为 "talkId" 的项，执行相应逻辑；否则执行另一套逻辑。
// 当本地存储中存在名为 "talkId" 的项时：
// 遍历 talkList 数组，找到对应的对话历史数据项（根据 "talkId" 进行匹配），并更新对应的消息数据为当前的消息列表 this.messages。
// 当本地存储中不存在名为 "talkId" 的项时：
// 将新的对话历史数据项 obj 添加到 talkList 数组的开头。
// 移除本地存储中的 "talkId" 项，并重置 tid 属性。
// 将 talkList 数组保留最新的 8 个对话历史数据项，并将更新后的 talkList 保存到本地存储中。
      }

    },
    newTalk() {
      this.saveHistory()
      this.messages = []
      localStorage.setItem("messages", JSON.stringify([]))
      this.popupClose()
    },

后续为贴合整个项目的整体外观，我对css做了以下调整：

.container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  min-width: 100px;
  transition: 0.6s;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(10px);
}

.con_left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  min-width: 250px;
  max-width: 250px;
  background: rgba(255, 255, 255, 1);
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  transition: 0.5s;

  .talk_list {
    width: 80%;
    margin-top: 10px;
    color: #4c4c4c;

    .border {
      border: 1px solid #778dfc;
      background: #f2f6ff;

      color: #6e86ff;

      &:hover {
        background: #f0f4ff;
      }

      // font-weight: bold;
    }