mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 11:56:44 +08:00
389 lines
12 KiB
Vue
389 lines
12 KiB
Vue
<template>
|
||
<div class="aiTranslate">
|
||
<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">
|
||
<div class="select-lang">
|
||
<img src="@/assets/images/course/languageIcon.png" alt="" width="10" height="10">
|
||
<span>本课程支持语种：</span>
|
||
<el-button type="primary" @click="setLanguage()" icon="el-icon-connection">设置语种</el-button>
|
||
</div>
|
||
<div class="lang-content">
|
||
<div class="lang-item" v-for="(item, index) in selectedLang" :key="index">
|
||
<span>{{ item.label }}</span>
|
||
<span :class="item.aiTranslate == 1 ? 'custom-putaway' : 'custom-takeout'">{{ item.aiTranslate == 1 ? '已上架' : '已下架' }}</span>
|
||
<el-button type="text" @click="item.aiTranslate = item.aiTranslate == 1 ? 0 : 1">{{ item.aiTranslate == 1 ? '下架' : '上架' }}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="videoOperation">
|
||
<div class="opera-title">
|
||
<span>目标语种</span>
|
||
<el-select v-model="value" placeholder="请选择目标语种" style="flex: 1;">
|
||
<el-option
|
||
v-for="item in selectAllLang"
|
||
:key="item.srclang"
|
||
:label="item.label"
|
||
:value="item.srclang"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-button type="primary" @click="status = 2">加载字幕</el-button>
|
||
</div>
|
||
<div class="opera-content">
|
||
<div class="bg-gray" v-show="status != 4">
|
||
<p v-show="status == 1" v-html="aiTranslate"></p>
|
||
<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;">
|
||
<img v-show="status == 5" src="@/assets/images/course/selectLanguage.png" alt="" width="112" height="130" style="display: flex;margin: 35% auto 0 auto;">
|
||
</div>
|
||
<el-input v-show="status == 4"
|
||
type="textarea"
|
||
placeholder="请输入内容"
|
||
autosize
|
||
v-model="aiTranslate">
|
||
</el-input>
|
||
<div class="opera-btn">
|
||
<el-button v-show="status == 1" type="primary" plain round size="mini" @click="updateDialogVisible = true">重新生成</el-button>
|
||
<el-button v-show="status == 1" type="primary" plain round size="mini" @click="status = 4">编辑</el-button>
|
||
<el-button v-show="status == 4" plain round size="mini" @click="status = 1">取消</el-button>
|
||
<el-button v-show="status == 4" type="primary" plain round size="mini" @click="status = 1">确认</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
title="确认同步更新吗"
|
||
:visible.sync="updateDialogVisible"
|
||
width="420px"
|
||
style="border-radius: 10px;"
|
||
center>
|
||
<p style="text-align: center;">系统将根据当前最新中文内容重新生成其他语种的翻译，您此前对翻译的修改将会丢失！</p>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="updateDialogVisible = false">取 消</el-button>
|
||
<el-button style="margin-left: 60px;" type="primary" @click="updateDialogVisible = false">确认同步更新</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="AIf翻译"
|
||
:visible.sync="selectDialogVisible"
|
||
width="500px"
|
||
class="select-dialog">
|
||
<div class="select-dialog-content">
|
||
<p>请选择该课程所支持语种</p>
|
||
<el-select v-model="selectLang" placeholder="请选择目标语种" style="width: 100%;" multiple>
|
||
<el-option
|
||
v-for="item in selectAllLang"
|
||
:key="item.srclang"
|
||
:label="item.label"
|
||
:value="item.srclang"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="selectDialogVisible = false">取 消</el-button>
|
||
<el-button style="" type="primary" @click="selectDialogVisible = false">确 认</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import videoPlayer from "@/components/VideoPlayer/index.vue";
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
name: 'aiTranslate',
|
||
// ai播放器相关
|
||
components: {
|
||
videoPlayer
|
||
},
|
||
data() {
|
||
return {
|
||
courseName: '企业经营法则--课程单元',
|
||
videoList: [
|
||
{
|
||
id: 1,
|
||
name: '1. 开源节流1',
|
||
aiTranslate: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '2. 企业经营法则总述',
|
||
aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '3. 企业经营法则总述',
|
||
aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '4. 企业经营法则总述',
|
||
aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
|
||
},
|
||
],
|
||
testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
|
||
currentVideo: {},
|
||
aiTranslate: `
|
||
00:00:01/00:00:03
|
||
Hello everyone in the audience
|
||
|
||
00:00:03/00:00:05
|
||
today I want to share with you the topic of
|
||
|
||
00:00:05/00:00:09
|
||
"The Development History and Future Prospects of Computer Technology -
|
||
`,
|
||
status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中 5: 未选择语种
|
||
selectedLang: [
|
||
{
|
||
label: '英文',
|
||
srclang: 'en',
|
||
aiTranslate: 1,
|
||
},
|
||
{
|
||
label: '中文',
|
||
srclang: 'zh',
|
||
aiTranslate: 1,
|
||
},
|
||
{
|
||
label: '日文',
|
||
srclang: 'ja',
|
||
aiTranslate: 1,
|
||
},
|
||
{
|
||
label: '韩文',
|
||
srclang: 'ko',
|
||
aiTranslate: 1,
|
||
},
|
||
{
|
||
label: '法文',
|
||
srclang: 'fr',
|
||
aiTranslate: 0,
|
||
},
|
||
],
|
||
updateDialogVisible: false,
|
||
selectDialogVisible: false,
|
||
selectLang: [],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['selectAllLang']),
|
||
},
|
||
mounted() {
|
||
this.currentVideo = this.videoList[0];
|
||
},
|
||
methods: {
|
||
setLanguage(){
|
||
this.selectDialogVisible = true;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.aiTranslate{
|
||
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;
|
||
.select-lang{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
color: rgba(107, 114, 128, 1);
|
||
font-family: Noto Sans SC;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 17px;
|
||
}
|
||
.lang-content{
|
||
display: flex;
|
||
margin-top: 25px;
|
||
align-items: center;
|
||
gap: 25px 60px;
|
||
flex-wrap: wrap;
|
||
.lang-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: rgba(96, 98, 102, 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;
|
||
gap: 15px;
|
||
>span{
|
||
color: rgba(75, 92, 118, 1);
|
||
font-family: Noto Sans SC;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.opera-content{
|
||
position: relative;
|
||
flex: 1;
|
||
color: rgba(17, 24, 39, 1);
|
||
font-family: Noto Sans SC;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
letter-spacing: 0px;
|
||
white-space: pre-wrap;
|
||
.bg-gray{
|
||
border-radius: 7px;
|
||
background: rgba(249, 250, 251, 1);
|
||
height: 100%;
|
||
padding: 15px;
|
||
}
|
||
.opera-btn{
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-textarea{
|
||
height: 100%!important;
|
||
}
|
||
::v-deep .el-textarea__inner{
|
||
height: 100%!important;
|
||
}
|
||
::v-deep .el-dialog {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.select-dialog{
|
||
::v-deep .el-dialog__header{
|
||
border-bottom: 1px solid rgba(229, 231, 235, 1);
|
||
}
|
||
.select-dialog-content{
|
||
p{
|
||
color: rgba(17, 24, 39, 1);
|
||
font-family: Noto Sans SC;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|