mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 13:26:44 +08:00
ai视频一期功能提交
This commit is contained in:
sunli_tydic
245
src/views/course/aiSet/aiAbstract.vue
Normal file
245
src/views/course/aiSet/aiAbstract.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user