Ollama-book/src/components/User/Comment.vue

<template>
  <div class="comment-container">
    <div class="background-wrapper"></div>

    <div class="content-wrapper">
      <div class="barrage-box">
        <vue-baberrage
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :maxWordCount="50"
          :throttleGap="2000"
          :loop="false"
          :boxHeight="600"
          :messageHeight="50"
          :lanesCount="8"
          class="barrage-component"
        >
        </vue-baberrage>
      </div>

      <div class="input-box">
        <el-input
          v-model.trim="input"
          placeholder="发送一条友善的评论吧~"
          maxlength="50"
          show-word-limit
          class="comment-input"
        >
          <template slot="prepend">
            <i class="el-icon-chat-line-round"></i>
          </template>
          <el-button
            slot="append"
            type="primary"
            :loading="sending"
            @click="addContent"
          >
            发送弹幕
          </el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from "vue-baberrage";
import _ from "lodash";

export default {
  name: "Comment",
  data() {
    return {
      barrageIsShow: true,
      input: "",
      sending: false,
      barrageList: [],
      barrage: {
        id: "",
        avatar:
          "https://img0.baidu.com/it/u=825023390,3429989944&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        msg: "",
        time: "",
        type: MESSAGE_TYPE.NORMAL,
        barrageStyle: {
          fontSize: "16px",
          padding: "5px 10px",
          backgroundColor: "rgba(0, 0, 0, 0.6)",
          color: "#fff",
          borderRadius: "4px",
        },
      },
    };
  },
  methods: {
    addContent: _.throttle(
      async function () {
        if (
          !this.input.trim() ||
          /^\d+$/.test(this.input) ||
          /^[a-zA-Z]+$/.test(this.input)
        ) {
          this.$message.warning("请输入有意义的评论内容");
          return;
        }

        try {
          this.sending = true;
          this.barrage.msg = this.input;
          const { data: res } = await this.$http.post(
            "user/add_comment",
            this.barrage
          );

          if (res.status !== 200) {
            throw new Error(res.msg);
          }

          await this.getCommentList();
          this.input = "";
          this.$message.success("发送成功");
        } catch (error) {
          this.$message.error(error.message || "发送失败");
        } finally {
          this.sending = false;
        }
      },
      3000,
      { trailing: false }
    ),

    async getCommentList() {
      try {
        const { data: res } = await this.$http.get("user/get_commentlist");
        if (res.status !== 200) {
          throw new Error(res.msg);
        }
        this.barrageList = [...res.data, {}];
      } catch (error) {
        this.$message.error("获取评论列表失败");
      }
    },
  },
  mounted() {
    this.getCommentList();
    // 定时刷新弹幕列表
    setInterval(() => {
      this.getCommentList();
    }, 30000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.comment-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.background-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    filter: blur(5px);
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.3)
    );
  }
}

.content-wrapper {
  position: relative;
  z-index: 1;

  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.barrage-box {
  width: 100vw;
  width: 100%;
  height: 600px;
  margin-bottom: 30px;

  .barrage-component {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
}

.input-box {
  width: 100%;
  max-width: 600px;
  padding: 20px;

  .comment-input {
    /deep/ .el-input-group__prepend {
      background: #fff;
      padding: 0 15px;
      i {
        font-size: 18px;
        color: #409eff;
      }
    }

    /deep/ .el-input__inner {
      height: 45px;
      font-size: 16px;
    }

    /deep/ .el-button {
      padding: 12px 20px;
      font-size: 16px;
    }
  }
}

// 响应式适配
@media screen and (max-width: 768px) {
  .input-box {
    padding: 10px;

    .comment-input {
      /deep/ .el-input__inner {
        height: 40px;
        font-size: 14px;
      }
    }
  }
}
</style>