添加改动标识 ai播放器相关

2025-12-07 01:46:42 +08:00 · 2025-11-21 14:30:09 +08:00
parent b31f02bf23
commit 4b4c0943d8
8 changed files with 313 additions and 227 deletions
--- a/src/components/Course/courseForm.vue
+++ b/src/components/Course/courseForm.vue
@@ -158,6 +158,45 @@
                placeholder="请尽量填写课程简介，用于列表中显示，可以让用户更容易了解课程信息">
              </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">
+                        <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>
          </el-col>
          <el-col :span="14">
            <div @click="checkCourse"><weikeContent ref="weikeContent" :reset="weikeReset" :contents="contentInfo.list" :course="courseInfo" min-height="644px"></weikeContent></div>
@@ -329,6 +368,7 @@
                placeholder="请尽量填写课程简介，用于列表中显示，可以让用户更容易了解课程信息">
              </el-input>
            </el-form-item>
+            <!--     ai播放器相关     -->
            <el-form-item label="AI设置">
              <div>
                  <div style="display: flex; align-items: center;gap: 10px;">
@@ -581,6 +621,7 @@ export default {
    this.getSceneData();
  },
  computed: {
+    // ai播放器相关
    ...mapGetters(['resOwnerMap', 'sysTypeMap','userInfo','identity', 'selectAllLang']),
    catalogTree() {
      let treeList = [];
@@ -990,6 +1031,7 @@ export default {
          this.dicts = result.dicts; //课程的老师信息
          console.log("--- 编辑查看 this.isPermission  = ",this.isPermission)
          console.log("--- 编辑查看 this.dicts  = ",this.dicts)
+          // ai播放器相关
          // 如果ai设置为空则给默认值 - 会看成新增状态
          if(this.courseInfo.aiSet === null || this.courseInfo.aiSet === '' || this.courseInfo.aiSet === undefined){
            this.courseInfo.isAddAI = 1; //暂时是否是新增
--- a/src/components/VideoPlayer/index.vue
+++ b/src/components/VideoPlayer/index.vue
@@ -119,6 +119,7 @@
            </div>
            <div class="player-time">{{ currentTimeFormat }} / {{ fullTimeFormat }}</div>
          </div>
+          <!--  ai播放器相关 -->
          <div class="player-controls-bottom-right">
            <div class="player-controls-btn box-aiTranslate">
              <div v-show="isSubtitle" class="player-controls-btn cursor-pointer btn-speed">
@@ -329,14 +330,17 @@ export default {
      fullTimeFormat: "00:00:00", // 视频总长度的文字
      barrageTimelineStart: 0, // 弹幕时间轴的起始时间点（手动调整进度条触发更新）
      isInit:false, // 是否初始化过
+      // ai播放器相关
      isSubtitle: true, // 是否开启字幕
      currentLangLabel:'', // 当前字幕语言
    };
  },
+  // ai播放器相关
  computed: {
    ...mapGetters(['selectableLang','currentLang'])
  },
  created() {
+    // ai播放器相关
    this.SET_currentLang('');
  },
  mounted() {
@@ -350,7 +354,7 @@ export default {
    }

    setInterval(() => {
-          // console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
+          console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
          // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
          if(!this.isDrag){
            var time = localStorage.getItem('videoProgressData')
@@ -397,7 +401,7 @@ export default {
      }
      // 根据视频的readyState判断下一帧是否已加载，并控制loading的显示
      this.isShowLoading = this.videoDom.readyState < 3;
-      // console.log("当前缓存:"+this.videoDom.readyState)
+      console.log("当前缓存:"+this.videoDom.readyState)
      if (this.videoDom.readyState < 3){
        console.log("详细信息",this.videoDom)
        console.log("卡了",this.videoDom.readyState)
@@ -444,6 +448,7 @@ export default {
    // });
  },
  methods: {
+    // ai播放器相关
    ...mapMutations({
      SET_currentLang: 'video/SET_currentLang',
      SET_currentTime: 'video/SET_currentTime',
@@ -661,6 +666,7 @@ export default {
    },
    onAudioTimeUpdate() {
      const currentTime = this.$refs.video.currentTime;
+      // ai播放器相关
      this.SET_currentTime(currentTime)
      this.$emit('onTimeUpdate', currentTime);
    },
@@ -680,7 +686,7 @@ export default {
        }
      }
    },
-    /**
+    /** ai播放器相关
     * 切换字幕
     */
    toggleSubtitle(value) {
@@ -694,7 +700,7 @@ export default {
        }
      }
    },
-    /**
+    /** ai播放器相关
     * 切换字幕语言
     */
    changeLang(item) {
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -28,6 +28,7 @@ const getters = {
    studyTaskCount:state => state.user.studyTaskCount,
    praisesUnicom:state =>state.pdf.praisesUnicom,
    favoritesUnicom:state =>state.pdf.favoritesUnicom,
+    // ai播放器相关
    selectAllLang:state => state.video.selectAllLang,
    selectableLang:state => state.video.selectableLang,
    currentLang:state => state.video.currentLang,
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,7 +12,7 @@ import resOwner from './modules/resOwner'
 import majorType from './modules/majorType'
 import orgDomain from './modules/orgDomain'
 import pdf from './modules/pdf'
-import video from './modules/video'
+import video from './modules/video'  // ai播放器相关

 Vue.use(Vuex)

--- a/src/store/modules/video.js
+++ b/src/store/modules/video.js
@@ -1,4 +1,4 @@
-
+// ai播放器相关
 const state = {
  selectAllLang: [
    {
--- a/src/views/course/ManageList.vue
+++ b/src/views/course/ManageList.vue
@@ -64,6 +64,7 @@
          </div>
        </div>
            <el-row :gutter="20" style="margin-top:10px">
+            <!--     ai播放器相关        -->
            <el-col :span="24">
              <!-- <el-button icon="el-icon-folder" type="primary" size="small">导出</el-button> -->
              <el-button class="Create-coures" type="primary" @click="addNewCourse()" icon="el-icon-plus">新建课程</el-button>
@@ -73,6 +74,7 @@
        </el-row>
    </div>
    <div style="margin-right:30px;">
+    <!--     ai播放器相关        -->
      <el-table style="margin:10px 32px 10px 22px;" :data="pageData" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="50"></el-table-column>
@@ -139,6 +141,7 @@
        <el-table-column label="操作" width="180px" fixed="right">
          <template slot-scope="scope" class="btn-gl">
            <!-- 20240621 修改scope.row.isPermission = fasle 时不展示操作按钮-->
+            <!--     ai播放器相关        -->
            <el-button v-if="scope.row.isPermission && scope.row.status != 2" type="text" size="mini" @click="setAI(scope.row)">AI设置</el-button>
            <el-button type="text" size="mini" v-if="scope.row.isPermission && scope.row.status == 5 && !scope.row.published" @click="releaseData(scope.row)">发布</el-button>
            <el-button v-if="scope.row.isPermission && pageManage && scope.row.published" @click="showStudent(scope.row)" type="text" size="mini">学员</el-button>
@@ -292,6 +295,7 @@
      <course-form ref="courseForm" @submitSuccess="searchData" @close="searchData"></course-form>
    </div>

+    <!--     ai播放器相关        -->
    <!-- 设置语种弹框 -->
    <el-dialog
      title="AI翻译"
@@ -316,7 +320,7 @@
        </el-select>
      </div>
      <div style="color: #ff4d4f; font-size: 12px;">
-        注：仅支持对已开启AI处理的课程进行批量语种设置；所选的课程中已超过X个未开启AI处理的课程，以上配置仅对X个已开启AI处理的课程生效。
+        注：仅支持对已开启AI处理的课程进行批量语种设置；所选的课程中有{{languageSetting.aiSetNoNum}}个未开启AI处理的课程，以上配置仅对{{languageSetting.aiSetNum}}个已开启AI处理的课程生效。
      </div>
      <template #footer>
        <el-button @click="languageSetting.dlgShow = false">取消</el-button>
@@ -337,7 +341,8 @@
              <el-tooltip class="item" effect="dark" content="是否将课程进行AI处理" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
-             AI处理状态：</span>
+              AI处理状态：
+            </span>
            <span class="status-text">
              {{ aiProcessSetting.aiSet === 1 ? '已开启' : '已关闭' }}
            </span>
@@ -348,7 +353,7 @@
            ></el-switch>
          </div>

-          <div>
+          <div v-show="aiProcessSetting.aiSet === 1">
            <!-- 是否生成AI摘要 -->
            <div class="form-item">
              <span class="form-label">是否需要生成AI摘要：</span>
@@ -388,7 +393,7 @@

          <!-- 提示信息 -->
          <div class="tips">
-            <span>注：已跳过x个已开启AI处理的课程，仅更新剩余x个</span>
+            <span>注：已跳过{{aiProcessSetting.aiSetNum}}个已开启AI处理的课程，仅更新剩余{{aiProcessSetting.aiSetNoNum}}个</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
@@ -422,7 +427,7 @@
              :inactive-value="0"
            ></el-switch>
          </div>
-          
+          <div v-show="aiSetting.aiSet === 1">
            <!-- AI摘要状态 -->
            <div class="form-item">
              <span class="form-label">AI摘要状态：</span>
@@ -482,7 +487,7 @@
                </div>
              </div>
            </div>
-          
+          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="aiSetting.dlgShow = false">取消</el-button>
@@ -509,6 +514,7 @@ import apiUserbasic from "@/api/boe/userbasic.js"
 export default {
  name: 'manageCourse',
  components: {courseForm, manager, auditCourse1, auditCourse2,adminPage},
+  // ai播放器相关
  computed: {
      ...mapGetters(['resOwnerMap','sysTypeMap','userInfo', 'selectAllLang']),
  },
@@ -594,19 +600,20 @@ export default {
      },
      extendRefId:'',
      extendRefType:'',
+      // ai播放器相关
      selectedCourses: [], //已选课程
-      languageSetting: {
+      languageSetting: { // 设置语种弹框
        dlgShow: false,
        languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
      },
-        aiProcessSetting: {
+      aiProcessSetting: {  // 开启AI处理弹框
        dlgShow: false,
        aiSet: 1,
        aiAbstract: 1,
        aiDraft: 1,
        languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
      },
-        aiSetting: {
+      aiSetting: { // AI设置弹框
        dlgShow: false,
        courseId: '',
        aiSet: 1,
@@ -661,9 +668,6 @@ export default {
        //出现学员管理
        window.parent.openSelectStu(row);
    },
-    handleSelectionChange(val){
-      this.selectedCourses = val;
-    },
    handleChoose(row){ //选择课程
      window.parent.selectCourse(row);
    },
@@ -675,31 +679,6 @@ export default {
    inputOn() {
      this.$forceUpdate();
    },
-    // AI设置
-    setAI(row) {
-      this.aiSetting.courseId = row.id;
-      // 这里可以添加获取当前课程AI设置的逻辑
-      this.aiSetting.dlgShow = true;
-    },
-    
-    // 确认AI设置
-    confirmAISetting() {
-      const { courseId, aiSet, aiAbstract, aiDraft, aiTranslate } = this.aiSetting;
-      
-      // 这里可以添加保存AI设置的API调用
-      console.log('保存AI设置', {
-        courseId,
-        aiSet,
-        aiAbstract,
-        aiDraft,
-        aiTranslate
-      });
-      
-      // 模拟成功保存
-      this.$message.success('AI设置保存成功');
-      this.aiSetting.dlgShow = false;
-      // 可以选择是否刷新列表数据
-    },

    // 置顶
    setTop(row) {
@@ -1089,14 +1068,114 @@ export default {
    //   }
    //   this.$message({ message: msg, type: 'success', offset: 50 });
    // },
+    delItem(row) {
+      this.$confirm('您确定要删除所选课程吗？', '删除提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+            let params = {
+         id: row.id,
+         title: row.name,
+
+      };
+       try {
+        //  {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
+        const {status} = await apiCourse.del(params);
+        if(status === 200) {
+          this.$message.success('操作成功！'); //只是之前发布过的课程删除才可
+          // if(!row.erasable){
+          //   let event = {
+          //     key: "CourseDelete",//被管理员删除
+          //     title: '被管理员删除课程',//事件的标题
+          //     parameters:"author:"+row.sysCreateAid,//作者，一般这种情况不是管理员自己添加的
+          //     content: '被管理员删除课程',//事件的内容
+          //     objId: row.id,//关联的id
+          //     objType: "1",//关联的类型
+          //     objInfo:row.name,
+          //     aid: this.userInfo.aid, //当前登录人的id
+          //     aname: this.userInfo.name,//当前人的姓名
+          //     status: 1 //状态，直接写1
+          //   }
+          //   this.$store.dispatch("userTrigger", event);
+          // }
+
+          this.searchData();
+        }
+      } catch (error) {
+        console.log(error);
+      }
+        })
+        .catch((err) => {
+          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
+        });
+    },
+    showAddCatalogZhang(bal) {
+      this.catalogs.addNewZhang = bal;
+    },
+    saveNewCatalogZhang() {
+      this.catalogs.addNewZhang = false;
+    },
+
+
+    // ai播放器相关
+    handleSelectionChange(val){
+      this.selectedCourses = val;
+      console.log(val);
+    },
+    // 获取选中课程的AI信息
+    getAIInfoByList(list = []) { 
+      let selectNum = 0; // 选中的课程数量
+      let aiSetNum = 0; // 已设置AI的课程数量
+      let aiSetNoNum = 0; // 未设置AI的课程数量
+      list.forEach(item => {
+        if(item.aiSet === 1){
+          aiSetNum++;
+        }else{
+          aiSetNoNum++;
+        }
+      });
+      return {
+        selectNum,
+        aiSetNum,
+        aiSetNoNum
+      }
+    },
+    // AI设置
+    setAI(row) {
+      this.aiSetting.courseId = row.id;
+      // 这里可以添加获取当前课程AI设置的逻辑
+      this.aiSetting.dlgShow = true;
+    },
+
+    // 确认AI设置
+    confirmAISetting() {
+      const { courseId, aiSet, aiAbstract, aiDraft, aiTranslate } = this.aiSetting;
+
+      // 这里可以添加保存AI设置的API调用
+      console.log('保存AI设置', {
+        courseId,
+        aiSet,
+        aiAbstract,
+        aiDraft,
+        aiTranslate
+      });
+
+      // 模拟成功保存
+      this.$message.success('AI设置保存成功');
+      this.aiSetting.dlgShow = false;
+      // 可以选择是否刷新列表数据
+    },
    setLanguage() {
      if (this.selectedCourses.length > 0) {
+        this.languageSetting = {...this.languageSetting, ...this.getAIInfoByList(this.selectedCourses)}
        this.languageSetting.dlgShow = true;
      }
    },
    enableAI() {
      // 开启AI处理按钮点击事件
      if (this.selectedCourses.length > 0) {
+        this.aiProcessSetting = {...this.aiProcessSetting, ...this.getAIInfoByList(this.selectedCourses)} 
        this.aiProcessSetting.dlgShow = true;
      }
    },
@@ -1174,55 +1253,6 @@ export default {
        });
      }
    },
-    
-    delItem(row) {
-      this.$confirm('您确定要删除所选课程吗？', '删除提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async() => {
-            let params = {
-         id: row.id,
-         title: row.name,
-
-      };
-       try {
-        //  {id:课程id,多个使用逗号分隔,Boolean erasable 是否物理删除,title:课程的名称, remark 备注}
-        const {status} = await apiCourse.del(params);
-        if(status === 200) {
-          this.$message.success('操作成功！'); //只是之前发布过的课程删除才可
-          // if(!row.erasable){
-          //   let event = {
-          //     key: "CourseDelete",//被管理员删除
-          //     title: '被管理员删除课程',//事件的标题
-          //     parameters:"author:"+row.sysCreateAid,//作者，一般这种情况不是管理员自己添加的
-          //     content: '被管理员删除课程',//事件的内容
-          //     objId: row.id,//关联的id
-          //     objType: "1",//关联的类型
-          //     objInfo:row.name,
-          //     aid: this.userInfo.aid, //当前登录人的id
-          //     aname: this.userInfo.name,//当前人的姓名
-          //     status: 1 //状态，直接写1
-          //   }
-          //   this.$store.dispatch("userTrigger", event);
-          // }
-
-          this.searchData();
-        }
-      } catch (error) {
-        console.log(error);
-      }
-        })
-        .catch((err) => {
-          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
-        });
-    },
-    showAddCatalogZhang(bal) {
-      this.catalogs.addNewZhang = bal;
-    },
-    saveNewCatalogZhang() {
-      this.catalogs.addNewZhang = false;
-    },
  }
 };
 </script>
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -376,7 +376,7 @@
                    <div class="couresstartTime">
                      <span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
                    </div>
-
+                    <!--   ai播放器相关   -->
                    <div class="course-info" style="align-items: center;">
                      <el-popover
                        placement="top-start"
@@ -2439,6 +2439,7 @@ console.log(res.result.list,'data')
 .option-active {
  color: #387DF7;
 }</style>
+<!-- ai播放器相关 -->
 <style lang="scss">
 .course-popover{
  border-radius: 12px;
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -647,6 +647,7 @@
              :score="courseInfo.score"
            ></my-note>
          </div>
+          <!--     ai播放器相关    -->
          <!-- ai文稿 -->
          <div class="ai-script" v-if="tab == 3">
            <ai-script ref="aiscript" @changeCurrentTime="changeCurrentTime"></ai-script>
@@ -663,6 +664,7 @@
              >
                内容简介<span class=""></span>
              </div>
+              <!-- ai播放器相关 -->
              <div
                @click="coutab(4)"
                style="position: relative;"
@@ -743,6 +745,7 @@
              ></note-comments>
            </div>
          </div>
+          <!-- ai播放器相关 -->
           <div
              v-show="courestab == 4"
              style="padding-left: 17px; padding-top: 20px;background-color: #fff;"
@@ -1004,6 +1007,7 @@ export default {
    this.loadData();
  },
  computed: {
+    // ai播放器相关
    ...mapGetters(["userInfo", 'selectableLang']),
    catalogTree() {
      let treeList = [];
@@ -1040,6 +1044,7 @@ export default {
    },
  },
  methods: {
+    // ai播放器相关
    // 处理从AI文稿组件传递过来的时间跳转事件
    changeCurrentTime(time) {
      console.log(time,'time')
@@ -1211,7 +1216,7 @@ export default {
          this.curriculumData.url = r.content;
        }
        this.$refs.mynote.showVideoTimeBtn(true);
-        // 视频类型加载ai相关功能
+        // ai播放器相关 - 视频类型加载ai相关功能
        if (r.contentType == 10) {
          this.handleAIVideo(r.boeaiSubtitleRspList, r);
        }
@@ -1377,7 +1382,7 @@ export default {
        localStorage.setItem("videoProgressData", JSON.stringify(arr));
      }
    },
-    // 视频处理 - 处理ai相关功能
+    // ai播放器相关 - 视频处理
    handleAIVideo(list = [], r) {
      this.SET_selectableLang(list);
      console.log("ai处理", this.selectableLang);
@@ -2338,6 +2343,7 @@ export default {
    heartabtwo() {
      this.tab = 2;
    },
+    // ai播放器相关
    heartabthree() {
      this.tab = 3;
    },