mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 04:46:44 +08:00
视频ai文稿 ai摘要静态
This commit is contained in:
sunli_tydic
267
src/components/Course/aiScript.vue
Normal file
267
src/components/Course/aiScript.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="ai-script">
|
||||
<!-- 搜索和语言选择区域 -->
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词查找文稿内容"
|
||||
class="search-input"
|
||||
prefix-icon="el-icon-search"
|
||||
@keyup.enter.native="searchContent"
|
||||
@input="handleInputChange"
|
||||
clearable
|
||||
native-type="text"
|
||||
/>
|
||||
<div class="language-selector">
|
||||
<span class="language-label">语言</span>
|
||||
<el-select v-model="selectedLanguage" class="language-select" @change="changeLanguage">
|
||||
<el-option label="中文" value="zh"></el-option>
|
||||
<el-option label="英文" value="en"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容展示区域 -->
|
||||
<div class="content-container">
|
||||
<!-- 动态渲染内容块 -->
|
||||
<div v-for="(item, index) in contentList" :key="index" class="content-item" :class="{'active': activeIndex === index}">
|
||||
<div class="timestamp">
|
||||
<div class="timestamp-text">
|
||||
<i class="el-icon-time"></i>
|
||||
{{ item.timestamp }}
|
||||
</div>
|
||||
</div>
|
||||
<el-card class="content-text">
|
||||
<div v-html="item.highlightedContent || item.content"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ai-script',
|
||||
data () {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
selectedLanguage: 'zh',
|
||||
originalContentList: [
|
||||
{
|
||||
timestamp: '00:00:04',
|
||||
content: '从功能上来看，整个平台是涵盖了四个核心的环节，第一个是我们的智课，第一个环节，通过我们的大模型能力将我们企业现有的材料上传之后，能够智能生成培训课件那培训课件。可以智能的转化成我们的培训视频已有的培训课件可以实现快速上架，第二个是学习的阶段，微信形式微课形式的一个线上学习的一个模式，通过岗位地图引导在线上进行视频学习，在移动端的时候，配合我们的智能数字导师可以进行线上微课的一个授课以及智能的互动问答解答。'
|
||||
},
|
||||
{
|
||||
timestamp: '00:10:04',
|
||||
content: '第三个就是考核的模式，也就是学习后的一个考核，通过我们的智能出题来生成我们课件对应的试题，那在进行学习完成之后，完成岗位的考试进行实时判卷，同时也能看到每个考核它的整个错题集的情况。最后就是我们的发证认证，所有的任务都会配合他对应的一个认证资格的认证，一人一证一码，随时可以查询他的证书情况和他的成绩培训情况。'
|
||||
},
|
||||
{
|
||||
timestamp: '00:13:04',
|
||||
content: '第三个就是考核的模式，也就是学习后的一个考核，通过我们的智能出题来生成我们课件对应的试题，那在进行学习完成之后，完成岗位的考试进行实时判卷，同时也能看到每个考核它的整个错题集的情况。最后就是我们的发证认证，所有的任务都会配合他对应的一个认证资格的认证，一人一证一码，随时可以查询他的证书情况和他的成绩培训情况。'
|
||||
}
|
||||
],
|
||||
contentList: [], // 用于显示的内容列表
|
||||
activeIndex: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化时显示所有内容
|
||||
this.contentList = this.originalContentList.map(item => ({ ...item }));
|
||||
},
|
||||
methods: {
|
||||
searchContent () {
|
||||
// 搜索功能实现
|
||||
if (!this.searchKeyword.trim()) {
|
||||
// 如果搜索关键词为空，显示所有内容
|
||||
this.contentList = this.originalContentList.map(item => ({ ...item }));
|
||||
return;
|
||||
}
|
||||
|
||||
const keyword = this.searchKeyword.trim();
|
||||
// 过滤包含关键词的内容
|
||||
const filteredList = this.originalContentList.filter(item =>
|
||||
item.content.includes(keyword)
|
||||
);
|
||||
|
||||
if (filteredList.length === 0) {
|
||||
// 如果没有搜索到内容，显示提示
|
||||
this.$message({
|
||||
message: '未找到相关内容',
|
||||
type: 'info'
|
||||
});
|
||||
this.contentList = this.originalContentList.map(item => ({ ...item }));
|
||||
} else {
|
||||
// 对搜索到的内容进行关键词高亮处理
|
||||
this.contentList = filteredList.map(item => ({
|
||||
...item,
|
||||
highlightedContent: this.highlightKeyword(item.content, keyword)
|
||||
}));
|
||||
console.log(this.contentList)
|
||||
}
|
||||
},
|
||||
highlightKeyword(content, keyword) {
|
||||
// 对关键词进行转义，防止正则表达式特殊字符的影响
|
||||
const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
// 使用正则表达式全局匹配关键词并添加高亮标记
|
||||
const regex = new RegExp(`(${escapedKeyword})`, 'gi');
|
||||
return content.replace(regex, '<span style="color: rgba(6, 125, 255, 1); background: rgba(6, 125, 255, 0.1);">$1</span>');
|
||||
},
|
||||
changeLanguage (event) {
|
||||
this.selectedLanguage = event
|
||||
console.log('切换语言:', this.selectedLanguage)
|
||||
},
|
||||
handleInputChange() {
|
||||
// 当输入框内容变化时，如果为空则重置显示所有内容
|
||||
if (!this.searchKeyword.trim()) {
|
||||
this.contentList = this.originalContentList.map(item => ({ ...item }));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-script {
|
||||
padding: 15px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin: 0 20px 15px 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
border-radius: 20px;
|
||||
border-color: #2688FF;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner:focus) {
|
||||
border-color: #1a6fe0;
|
||||
box-shadow: 0 0 0 2px rgba(38, 136, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-input__icon) {
|
||||
color: #2688FF;
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.language-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.language-select {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
:deep(.el-select__inner) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: 530px;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 5px 0;
|
||||
.timestamp-text{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border-radius: 12px;
|
||||
padding: 2px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-icon-time) {
|
||||
color: #2688FF;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: rgba(250, 250, 250, 1);
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.28px;
|
||||
}
|
||||
|
||||
.active {
|
||||
.timestamp-text{
|
||||
color: rgba(6, 125, 255, 1);
|
||||
background: rgba(6, 125, 255, 0.1);
|
||||
}
|
||||
.content-text{
|
||||
border: 1px solid rgba(116, 182, 255, 1);
|
||||
box-shadow: 0px 0px 7px 0px rgba(6, 125, 255, 0.24);
|
||||
background: rgba(250, 250, 250, 1);
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover) {
|
||||
box-shadow: 0 2px 12px 0 rgba(38, 136, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.search-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user