创新项目实训--解题页面前端2

模板部分 (<template>)

• 根容器 (<div class="chatHome">): 包含整个聊天应用的布局。
  • 左侧容器 (<div class="chatLeft">): 当前为空，可以用于放置联系人列表或其他内容。
  • 右侧容器 (<div class="chatRight">):
    • 聊天窗口 (<ChatWindow>): 当showChatWindow为true时显示，传递chatWindowInfo作为属性。
    • 图标 (<div class="showIcon">): 当showChatWindow为false时显示，显示一个图标或图片。

脚本部分 (<script>)

导入模块和组件

• PersonCard: 一个联系人卡片组件，当前未在模板中使用。
• ChatWindow: 聊天窗口组件。
• generateUUID: 从util.js导入的生成UUID的函数。

组件配置

• name: 组件名称，设为"App"。
• components: 注册了PersonCard和ChatWindow两个子组件。

数据和状态 (data)

• pcCurrent: 当前选中的联系人ID。
• personList: 联系人列表。
• showChatWindow: 布尔值，控制聊天窗口的显示状态。
• chatWindowInfo: 当前聊天窗口的联系人信息。

生命周期钩子 (mounted)

• 当前未实现，但可以在组件挂载时执行一些初始化操作。

方法 (methods)

• delete_one_chat(data): 删除一个聊天记录：
  • 从本地存储中读取chats并删除指定的聊天。
  • 更新本地存储中的chats和history。
  • 更新组件的personList和showChatWindow状态。
• add_chat(): 添加一个新的聊天：
  • 创建一个新的聊天对象，包含名称、ID、时间和类型。
  • 将新的聊天添加到personList和本地存储中的chats。
• clickPerson(info): 点击联系人触发的函数：
  • 显示聊天窗口，并设置当前选中的联系人信息。
  • 更新pcCurrent为当前联系人的ID。
• personCardSort(id): 排序联系人列表，将选中的联系人移到列表的顶部：
  • 找到并移除选中的联系人。
  • 将选中的联系人添加到personList的开头。

<template>
  <div class="chatHome">
    <div class="chatLeft">
    </div>
    <div class="chatRight">
      <!-- <router-view></router-view> -->
      <div v-if="showChatWindow">
        <ChatWindow
          :frinedInfo="chatWindowInfo"
        ></ChatWindow>
        <!-- @personCardSort="personCardSort" -->
      </div>
      <div class="showIcon" v-else>
        <span class="iconfont icon-snapchat"></span>
        <!-- <img src="@/assets/img/snapchat.png" alt="" /> -->
      </div>
    </div>
    <!-- <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> -->
  </div>
</template>

<script>
import PersonCard from "@/components/PersonCard.vue";
import ChatWindow from "./chatwindow.vue";
import {generateUUID} from "@/util/util.js"
export default {
  name: "App",
  components: {
    PersonCard,
    ChatWindow,
  },
  data() {
    return {
      pcCurrent: "",
      personList: [],
      showChatWindow: true,
      chatWindowInfo: {},
    };
  },
  mounted() {
  },
  methods: {
    delete_one_chat(data){
      let chats = JSON.parse(localStorage.getItem("chats"));
      for(let i=0;i<chats.length;i++){
        if(chats[i].id==data){
          chats.splice(i,1);
        }
      }
      localStorage.setItem("chats", JSON.stringify(chats));
      let history = JSON.parse(localStorage.getItem("history"));
      for(let i=0;i<history.length;i++){
        if(history[i].uuid==data){
          history.splice(i,1);
        }
      }
      localStorage.setItem("history", JSON.stringify(history));
      let chat0 = [];
      for(let i=0;i<chats.length;i++){
        if(chats[i].type==0){
          chat0.push(chats[i]);
        }
      }
      this.personList = chat0;
      this.showChatWindow = false;
    },
    add_chat(){
      let new_chat = {
            name: "new_chat",
            id: generateUUID(),
            time: new Date().toLocaleString(),
            type : 0,
      }
      // this.personList.push(this.personList[0])
      this.personList.push(new_chat)
      let chats = JSON.parse(localStorage.getItem("chats"));
      chats.push(new_chat)
      localStorage.setItem("chats", JSON.stringify(chats));
    },
    clickPerson(info) {
      this.showChatWindow = true;
      this.chatWindowInfo = info;
      this.personInfo = info;
      this.pcCurrent = info.id;
    },
    personCardSort(id) {
      if (id !== this.personList[0].id) {
        console.log(id);
        let nowPersonInfo;
        for (let i = 0; i < this.personList.length; i++) {
          if (this.personList[i].id == id) {
            nowPersonInfo = this.personList[i];
            this.personList.splice(i, 1);
            break;
          }
        }
        this.personList.unshift(nowPersonInfo);
      }
    },
  },
};
</script>

根容器 (.chatHome)

• 布局: 使用display: flex，使.chatHome容器中的子元素按照弹性布局排列。

左侧容器 (.chatLeft)

• 宽度: 设置宽度为20px。
• 标题 (.title): 设置字体颜色为白色，左侧内边距为10px。
• 在线人员容器 (.online-person):
  • 上边距: 设置为60px。
  • 在线文本 (.onlin-text): 设置左侧内边距为10px，字体颜色为rgb(176, 178, 189)。
  • 添加按钮 (.add-butt):
    • 尺寸: 宽度为100px，高度为20px。
    • 样式: 圆角半径为10px，背景颜色为rgb(50, 54, 68)，文本居中对齐，内边距为7px 0 12px 0，外边距为5px，字体颜色为白色。
    • 悬停效果: 悬停时，背景颜色变为#1d90f5。
  • 人员卡片容器 (.person-cards-wrapper):
    • 样式: 左侧内边距为10px，高度为53.5vh，上边距为20px，圆角半径为10px，背景颜色为rgb(50, 54, 68)，垂直滚动条样式隐藏。
    • 溢出控制: 设置overflow-y: scroll，使内容可以滚动，并隐藏滚动条。

右侧容器 (.chatRight)

• 布局: 使用flex: 1，占据剩余空间，右侧内边距为30px。
• 图标 (.showIcon):
  • 定位: 使用position: absolute，使图标绝对定位。
  • 垂直居中: top: calc(50% - 150px)。
  • 水平居中: left: calc(50% - 50px)。
  • Snapchat图标 (.icon-snapchat):
    • 尺寸: 宽度和高度为300px。
    • 字体大小: 设置为300px。

<style lang="scss" scoped>
.chatHome {
  // margin-top: 20px;
  display: flex;
  .chatLeft {
    width: 20px;
    .title {
      color: #fff;
      padding-left: 10px;
    }
    .online-person {
      margin-top: 60px;
      .onlin-text {
        padding-left: 10px;
        color: rgb(176, 178, 189);
      }
      .add-butt{
        width: 100px;
        height: 20px;
        border-radius: 10px;
        background-color: rgb(50, 54, 68);
        position: relative;
        text-align: center;
        padding: 7px 0px 12px 0;
        margin: 5px 5px;
        cursor: pointer;
        color: #fff;
        &:hover {
          background-color: #1d90f5;
        }
      }
      .person-cards-wrapper {
        padding-left: 10px;
        height: 53.5vh;
        margin-top: 20px;
        overflow: hidden;
        border-radius: 10px;
        background-color: rgb(50, 54, 68);
        // border: 1px solid #5d5c5c;
        overflow-y: scroll;
        box-sizing: border-box;
        &::-webkit-scrollbar {
          width: 0; /* Safari,Chrome 隐藏滚动条 */
          height: 0; /* Safari,Chrome 隐藏滚动条 */
          display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
        }
      }
    }
  }

  .chatRight {
    flex: 1;
    padding-right: 30px;
    .showIcon {
      position: absolute;
      top: calc(50% - 150px); /*垂直居中 */
      left: calc(50% - 50px); /*水平居中 */
      .icon-snapchat {
        width: 300px;
        height: 300px;
        font-size: 300px;
        // color: rgb(28, 30, 44);
      }
    }
  }
}
</style>