hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-06 17:36:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

ai视频一期功能提交

Browse Source
This commit is contained in:
sunli_tydic
2025-11-21 17:26:34 +08:00
parent 4b4c0943d8
commit caa9b23766
4 changed files with 125 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Course/aiScript.vue
View File

@@ -15,7 +15,7 @@
<div class="language-selector">
<span class="language-label">语言</span>
<el-select v-model="selectedLanguage" class="language-select" @change="changeLanguage" placeholder="请选择语言">
<el-option v-for="lang in selectableLang" :key="lang.srclang" :label="lang.label" :value="lang.srclang"></el-option>
<el-option v-for="lang in selectableLang" :key="lang.srclang" :label="getSelectLabel(lang)" :value="lang.srclang"></el-option>
</el-select>
</div>
</div>
@@ -146,6 +146,13 @@ export default {
},
methods: {
// 动态获取选择框的标签
getSelectLabel(lang) {
if (lang.srclang == 'zh-CN') {
return lang.label;
}
return `${lang.name} (${lang.label})`;
},
formatTime (time) {
// 格式化时间为HH:MM:SS，如01:00:00
const hours = Math.floor(time / 3600);

130
src/components/Course/courseForm.vue
View File

@@ -159,41 +159,39 @@
</el-input>
</el-form-item>
<el-form-item label="AI设置">
<div>
<div style="display: flex; align-items: center;gap: 10px;">
<div style="display: flex; align-items: center;gap: 3px;">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<div style="margin-top: 7px;">
<div style="display: flex; align-items: center;gap: 5px;">
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div v-show="courseInfo.aiSet==1" style="margin-left: -20px;">
<div style="display: flex; justify-content: space-between;;align-items: center;gap: 5px;margin: 10px 0;">
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI摘要</span>
<el-switch v-model="courseInfo.aiAbstract" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI文稿</span>
<el-switch v-model="courseInfo.aiDraft" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
<div style="display: flex; align-items: center;gap: 5px;margin: 10px 0;margin-left: -30px;">
<span>AI翻译语种</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="width: 240px;">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
<span>AI处理状态：</span>
</div>
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
</div>
<div v-show="courseInfo.aiSet==1">
<el-row :gutter="20" style="margin: 10px 0;">
<el-col :span="24" style="display: flex; align-items: center;gap: 10px;">
<span>是否需要生成AI摘要：</span>
<el-radio-group v-model="courseInfo.aiAbstract">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-col>
<el-col :span="24" style="display: flex; align-items: center;gap: 10px;">
<span>是否需要生成AI文稿：</span>
<el-radio-group v-model="courseInfo.aiDraft">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="20" style="margin: 10px 0;">
<el-col :span="20" style="display: flex; align-items: start;gap: 10px;flex-direction: column;">
<span>请选择该课程所支持的语种：</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="width: 240px;">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
</el-col>
</el-row>
</div>
</div>
</el-form-item>
@@ -370,41 +368,39 @@
</el-form-item>
<!-- ai播放器相关 -->
<el-form-item label="AI设置">
<div>
<div style="display: flex; align-items: center;gap: 10px;">
<div style="display: flex; align-items: center;gap: 3px;">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<div style="margin-top: 7px;">
<div style="display: flex; align-items: center;gap: 5px;">
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div v-show="courseInfo.aiSet==1" style="margin-left: -20px;">
<div style="display: flex;align-items: center;gap: 80px;margin: 20px 0;">
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI摘要</span>
<el-switch v-model="courseInfo.aiAbstract" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
<div style="display: flex; align-items: center;gap: 5px;">
<span>AI文稿</span>
<el-switch v-model="courseInfo.aiDraft" :active-value="1" :inactive-value="0"></el-switch>
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
<div style="display: flex; align-items: center;gap: 5px;margin: 20px 0;margin-left: -30px;">
<span>AI翻译语种</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="flex:1">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question" style="margin-left: 5px; color: #909399; cursor: pointer;"></i>
</el-tooltip>
<span>AI处理状态：</span>
</div>
<el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
</div>
<div v-show="courseInfo.aiSet==1">
<el-row :gutter="20" style="margin: 10px 0;">
<el-col :span="9" style="display: flex; align-items: center;gap: 10px;">
<span>是否需要生成AI摘要：</span>
<el-radio-group v-model="courseInfo.aiAbstract">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10" style="display: flex; align-items: center;gap: 10px;">
<span>是否需要生成AI文稿：</span>
<el-radio-group v-model="courseInfo.aiDraft">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="20" style="margin: 10px 0;">
<el-col :span="20" style="display: flex; align-items: center;gap: 10px;">
<span>请选择该课程所支持的语种：</span>
<el-select v-model="courseInfo.languageCode" placeholder="请选择" multiple filterable style="width: 240px;">
<el-option v-for="item in selectAllLang" :key="item.key" :label="item.label" :value="item.srclang"> </el-option>
</el-select>
</el-col>
</el-row>
</div>
</div>
</el-form-item>
@@ -614,7 +610,11 @@ export default {
selectedOrg: {
orgId: null,
name: ''
}
},
aiSetTip: '是否将课程进行AI处理', //提示信息
aiAbstractTip: '一键提炼课程视频核心要点，助力学员课前高效掌握重点，快速筛选学习资源', // 提示信息
aiDraftTip: '分段展示视频内容并精准同步时间轴，实现视频进度与文稿双向定位，学习内容触手可及', //提示信息
aiTranslateTip: '智能转换视频字幕与语音为多语种，支持全球学员按需切换语言，打破学习边界', // 提示信息
};
},
created() {

69
src/views/course/ManageList.vue
View File

@@ -332,19 +332,19 @@
<el-dialog
title="开启AI处理"
:visible.sync="aiProcessSetting.dlgShow"
width="500px"
width="400px"
>
<div class="ai-process-dialog">
<!-- AI处理状态 -->
<div class="form-item">
<span class="form-label">
<el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
<el-tooltip class="item" effect="dark" :content="aiSetTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI处理状态：
AI处理：
</span>
<span class="status-text">
{{ aiProcessSetting.aiSet === 1 ? '已开启' : '已关闭' }}
{{ aiProcessSetting.aiSet === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiSet"
@@ -356,29 +356,54 @@
<div v-show="aiProcessSetting.aiSet === 1">
<!-- 是否生成AI摘要 -->
<div class="form-item">
<span class="form-label">是否需要生成AI摘要：</span>
<el-radio-group v-model="aiProcessSetting.aiAbstract" class="radio-group">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI摘要：
</span>
<span class="status-text">
{{ aiProcessSetting.aiAbstract === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiAbstract"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</div>
<!-- 是否生成AI文稿 -->
<div class="form-item">
<span class="form-label">是否需要生成AI文稿：</span>
<el-radio-group v-model="aiProcessSetting.aiDraft" class="radio-group">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI文稿：
</span>
<span class="status-text">
{{ aiProcessSetting.aiDraft === 1 ? '开启' : '关闭' }}
</span>
<el-switch
v-model="aiProcessSetting.aiDraft"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</div>
<!-- 课程支持语种选择 -->
<div class="form-item" style="flex-flow: column;align-items: baseline;">
<span class="form-label">请选择该课程所支持语种：</span>
<span class="form-label">
<el-tooltip class="item" effect="dark" :content="aiTranslateTip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
AI翻译语种：
</span>
<el-select
v-model="aiProcessSetting.languageCode"
multiple
style="width: calc(100% - 135px);"
style="width: 100%;"
placeholder="请选择语种"
>
<el-option
@@ -607,7 +632,7 @@ export default {
languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
},
aiProcessSetting: { // 开启AI处理弹框
dlgShow: false,
dlgShow: true,
aiSet: 1,
aiAbstract: 1,
aiDraft: 1,
@@ -621,7 +646,11 @@ export default {
aiDraft: 1, // 1:上架 0:下架
aiTranslate: 1, // 1:上架 0:下架
languageCode: ['zh-CN', 'en-US', 'vi-VN'] // 支持的语种
}
},
aiSetTip: '是否将课程进行AI处理', //提示信息
aiAbstractTip: '一键提炼课程视频核心要点，助力学员课前高效掌握重点，快速筛选学习资源', // 提示信息
aiDraftTip: '分段展示视频内容并精准同步时间轴，实现视频进度与文稿双向定位，学习内容触手可及', //提示信息
aiTranslateTip: '智能转换视频字幕与语音为多语种，支持全球学员按需切换语言，打破学习边界', // 提示信息
};
},
mounted() {
@@ -1323,10 +1352,10 @@ export default {
}
.form-item{
margin-bottom: 15px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 5px;
gap: 10px;
}
.tips {
color: #f56c6c;

4
src/views/study/coursenew.vue
View File

@@ -373,6 +373,7 @@
></i
>我的笔记
</div>
<!-- 开发阶段先放开 v-if="courseInfo.aiDraft == 1" -->
<div
@click="heartabthree"
:class="tab == 3 ? 'control-tab-active' : ' '"
@@ -667,6 +668,7 @@
<!-- ai播放器相关 -->
<div
@click="coutab(4)"
v-if="courseInfo.aiAbstract == 1"
style="position: relative;"
:class="courestab == 4 ? 'course-info-tab-active' : ''"
>
@@ -751,7 +753,7 @@
style="padding-left: 17px; padding-top: 20px;background-color: #fff;"
>
<div style="padding: 30px;line-height: 24px;letter-spacing: 0.3px;color: rgba(102, 102, 102, 1);">
ai摘要
{{ courseInfo.summaryContent || '' }}
</div>
</div>
</div>