learning-system-portal/src/views/course/aiSet/aiAbstract.vue

<template>
  <div class="aiAbstract">
    <div class="ai-left">
      <div class="left-title">{{courseName}}</div>
      <ul class="ai-list">
        <li class="ai-item" v-for="(item, index) in videoList" @click="currentVideo = item" :class="{'active': currentVideo.id === item.id}" :key="index">
          <div class="ai-item-title">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <div class="ai-right">
      <div class="right-title">
        <h3>{{currentVideo.name}}</h3>
        <div>
          <el-button type="primary" @click="status = 1">下架本课程AI摘要</el-button>
        </div>
      </div>
      <div class="ai-content">
        <div class="videoBox">
          <videoPlayer :src="testUrl" style="height: auto;"> </videoPlayer>
          <div class="video-content">
            <h4>视频摘要</h4>
            <p>
              {{currentVideo.aiAbstract}}
            </p>
          </div>
        </div>
        <div class="videoOperation">
          <div class="opera-title">
            <h4>课程摘要</h4>
            <div class="opera-btn">
              <el-button type="primary" plain round  size="mini" @click="status = 2">重新生成</el-button>
              <el-button type="primary" plain round  size="mini" @click="status = 4">编辑</el-button>
              <el-button plain round  size="mini" @click="status = 3">取消</el-button>
            </div>
          </div>
          <div class="opera-content" v-show="status != 4">
            <span v-show="status == 1">{{ aiAbstract }}</span>
            <p v-show="status == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 摘要重新生成中，过程可能耗时较长，<br>无需在此等待哦～</p>
            <img v-show="status == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
          </div>
          <el-input v-show="status == 4"
            type="textarea"
            placeholder="请输入内容"
            autosize
            v-model="aiAbstract">
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videoPlayer from "@/components/VideoPlayer/index.vue";
export default {
  name: 'aiAbstract',
  // ai播放器相关
  components: {
    videoPlayer
  },
  data() {
    return {
      courseName: '企业经营法则--课程单元',
      videoList: [
        {
          id: 1,
          name: '1. 开源节流1',
          aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。'
        },
        {
          id: 2,
          name: '2. 企业经营法则总述',
          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
        {
          id: 3,
          name: '3. 企业经营法则总述',
          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
        {
          id: 4,
          name: '4. 企业经营法则总述',
          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
      ],
      testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
      currentVideo: {},
      aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。',
      status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中
    }
  },
  mounted() {
    this.currentVideo = this.videoList[0];
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.aiAbstract{
  height: 100%;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  gap: 15px;
  background: #f4f7fa;
  .ai-left{
    padding: 9px 10px;
    width: 24%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    .left-title{
      background: rgba(239, 244, 252, 1);
      padding: 15px;
      text-align: center;
      color: rgba(75, 92, 118, 1);
      font-family: Noto Sans SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 23px;
      letter-spacing: 0px;
    }
    .ai-list{
      margin: 0;
      .ai-item{
        cursor: pointer;
        padding: 15px;
        text-align: center;
        color: rgba(75, 92, 118, 1);
        font-family: Noto Sans SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 0px;
        padding: 17px 31px;
        border-bottom: 1px solid rgba(240, 240, 240, 1);
        text-align: left;
        &:hover{
          background: rgba(240, 240, 240, 1);
        }
        &.active{
          color: rgba(64, 158, 255, 1);
          font-weight: 500;
        }
      }
    }
  }
  .ai-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    .right-title{
      display: flex;
      padding: 0 28px;
      height: 76px;
      border-bottom: 1px solid rgba(229, 231, 235, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3{
        color: rgba(17, 24, 39, 1);
        font-family: Noto Sans SC;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        margin: 0;
      }
    }
    .ai-content{
      flex: 1;
      padding: 24px 30px;
      display: flex;
      gap: 30px;

      .videoBox{
        width: 55%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        .video-content{
          flex: 1;
          h4{
            margin: 0 0 10px 0;
            color: rgba(17, 24, 39, 1);
            font-family: Noto Sans SC;
            font-size: 16px;
            font-weight: 500;
            line-height: 23px;
          }
          p{
            color: rgba(17, 24, 39, 1);
            font-family: Noto Sans SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
        }
      }
      .videoOperation{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        .opera-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          h4{
            margin: 0;
            color: rgba(17, 24, 39, 1);
            font-family: Noto Sans SC;
            font-size: 16px;
            font-weight: 500;
            line-height: 23px;
          }
          .opera-btn{
            display: flex;
          }
        }
        .opera-content{
          flex: 1;
          border-radius: 7px;
          background: rgba(249, 250, 251, 1);
          padding: 15px;
          color: rgba(17, 24, 39, 1);
          font-family: Noto Sans SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          letter-spacing: 0px;
        }
      }
    }
  }
}
::v-deep .el-textarea{
  flex: 1;
}
::v-deep .el-textarea__inner{
  height: 100%!important;
}
</style>