视频ai文稿 ai摘要静态

src/components/Course/aiScript.vue

@@ -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>

src/views/portal/course/Index.vue

@@ -360,7 +360,20 @@
                       <span v-if="cinfo.type == 30" class="course-type-left">线下课</span>
                       <span v-if="cinfo.type == 40" class="course-type-left">学习项目</span>
                     </div>
-                    <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
+                    <div class="course-title" style="display: flex;justify-content: space-between;align-items: center;">
+                      <div class="two-line-ellipsis" style="flex: 1;" :title="cinfo.title" v-html="cinfo.name"></div>
+                      <el-popover
+                        placement="top-start"
+                        width="402"
+                        trigger="hover"
+                        popper-class="course-popover"
+                        >
+                        <div>本课程以 “基础理论 + 实战应用” 为核心，助力学习者搭建完整 AI 知识体系，掌握技术落地能力。课程目标明确：一是理解 AI、机器学习等核心概念与发展脉络，建立科学认知；二是熟练掌握 AI 所需数学基础、Python 编程及主流算法逻辑；三是能独立完成简单 AI 项目的全流程开发。适用人群广泛，涵盖零基础入门者（学生、职场转型者）、需提升实操能力的技术从业者，以及关注 AI 商业价值的产品、运营等职场人。</div>
+                        <img slot="reference" :src="`${webBaseUrl}/images/courseAbstract.png`" alt="摘要" style="width: 84px; height: 36px;">
+                      </el-popover>
+                      
+                    </div>
+                    <!-- <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div> -->
                     <!-- 关键字 -->
                     <div class="keywordInfo-every">
                       <div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
@@ -409,6 +422,10 @@
                     <div class="course-img-box">
                       <course-image :text="true" :course="cinfo"></course-image>
                     </div>
+                    <div class="course-title ">
+                      <div class="two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
+                      <img :src="`${webBaseUrl}/images/courseAbstract.png`" alt="摘要" style="width: 84px; height: 36px;">
+                    </div>
                     <div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
                     <div class="course-title two-line-ellipsis">
                       {{ cinfo.remark }}
@@ -2421,4 +2438,33 @@ console.log(res.result.list,'data')
 
 .option-active {
   color: #387DF7;
-}</style>
+}
+</style>
+<style lang="less">
+.course-popover{
+  box-sizing: border-box;
+  border-radius: 12px;
+  box-shadow: 0px 0px 16px 0px rgba(231, 242, 255, 0.25);
+  /* 实现边框渐变效果 */
+  position: relative;
+  background-clip: padding-box;
+  border: 1px solid transparent;
+  background: linear-gradient(to bottom, #2688FF, #FFFFFF, #E7F2FF);
+  line-height: 24px;
+  letter-spacing: 0.3px;
+  padding: 13px 25px;
+
+}
+.course-popover::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  margin: 1px;
+  border-radius: inherit;
+  background: rgba(255, 255, 255, 1);
+}
+</style>

src/views/study/coursenew.vue

@@ -174,6 +174,10 @@
               <div @click="heartabtwo" :class="tab == 2 ? 'control-tab-active' : ' '">
                 <i class="el-icon-edit" style="margin-right:9px;margin-left:9px"></i>我的笔记
               </div>
+              <div @click="heartabthree" :class="tab == 3 ? 'control-tab-active' : ' '" style="position: relative;">
+                <i class="el-icon-document" style="margin-right:9px;margin-left:9px"></i>ai文稿
+                <img src="@/assets/images/course/wengaoTip.png" alt="" style="position: absolute;top: -3px;right: -14px;width: 15px;height: 14px;">
+              </div>
             </div>
             <!-- 课程单元  -->
             <div class="course-units" v-if="tab == 1">
@@ -252,6 +256,10 @@
               <my-note ref="mynote" :height="controlHeight" @change="noteChange" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
                 :score="courseInfo.score"></my-note>
             </div>
+            <!-- ai文稿 -->
+            <div class="ai-script" v-show="tab == 3">
+              <ai-script ref="aiscript"></ai-script>
+            </div>
         </div>
       </div>
       <div class="course-infobox">
@@ -365,6 +373,7 @@
   import homework from '@/components/Course/homework';
   import assess from '@/components/Course/assess';
   import myNote from '../../components/Course/myNote.vue';
+  import aiScript from '../../components/Course/aiScript.vue';
   import apiFollow from "@/api/phase2/userfollow.js";
   import apiMessage from '@/api/system/message.js'
   // import Vue from 'vue';
@@ -384,6 +393,7 @@
       audioPlayer,
       videoPlayer,
       myNote,
+      aiScript,
       noteComments,
       portalFooter,
       followButton
@@ -1749,6 +1759,9 @@
       heartabtwo() {
         this.tab = 2
       },
+      heartabthree() {
+        this.tab = 3
+      },
       handleAudioTimeUpdate(currentTime) {
         // if(this.contentStudysLength.length == 0){
         let params = {