ai视频一期功能提交

src/api/modules/course.js

@@ -440,6 +440,11 @@ const queryCrowd=function(query){
 const ids=function (data){
   return ajax.postJson('/xboe/m/course/manage/ids',data);
 }
+
+// ai播放器相关 -  批量AI设置
+const benchAiSet=function(data){
+	return ajax.postJson('/xboe/m/course/manage/benchAiSet',data);
+}
 export default {
     saveBase,
     submitCourse,
@@ -482,6 +487,7 @@ export default {
 	exportCourseAudit,
 	exportCourse,
 	queryCrowd,
-  ids
+  ids,
+  benchAiSet
 
 }

src/assets/styles/btn.scss

@@ -97,3 +97,29 @@
   font-size: 14px;
   border-radius: 4px;
 }
+// 已下架
+.custom-takeout{
+  display: inline-block;
+  padding: 3px 13px;
+  border-radius: 20px;
+  font-size: 12px;
+  background: rgba(254, 249, 195, 1);
+  color: rgba(133, 77, 14, 1);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+  letter-spacing: 0px;
+}
+// 已上架
+.custom-putaway{
+  display: inline-block;
+  padding: 3px 13px;
+  border-radius: 20px;
+  font-size: 12px;
+  background: rgba(220, 252, 231, 1);
+  color: rgba(22, 101, 52, 1);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+  letter-spacing: 0px;
+}

src/components/Course/courseForm.vue

@@ -904,7 +904,7 @@ export default {
              }
           });
         }
-
+        this.initAiData();
       } else {
         //console.log(editData,'editData');
         this.weikeReset = editData.id;
@@ -1005,6 +1005,23 @@ export default {
         console.error("获取字典信息失败：", error);
       }
     },
+    // ai播放器相关
+    // 初始化ai数据
+    initAiData() {
+      // 如果ai设置为空则给默认值 - 会看成新增状态
+      if(this.courseInfo.aiSet === null || this.courseInfo.aiSet === '' || this.courseInfo.aiSet === undefined){
+        this.courseInfo.isAddAI = 1; //暂时是否是新增
+        this.courseInfo.aiSet = 1;
+        this.courseInfo.aiAbstract = 1;
+        this.courseInfo.aiDraft = 1;
+        this.courseInfo.aiTranslate = 1;
+        this.courseInfo.languageStatus = 1;
+        this.courseInfo.languageCode = ['zh-CN', 'en-US'];
+      } else {
+        // 获取ai设置信息
+        this.courseInfo.isAddAI = 0;
+      }
+    },
     //获取课程信息
     async getDetail(id) {
       this.curCourseId = id;
@@ -1032,18 +1049,7 @@ export default {
           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; //暂时是否是新增
-            this.courseInfo.aiSet = 1;
-            this.courseInfo.aiAbstract = 1;
-            this.courseInfo.aiDraft = 1;
-            this.courseInfo.aiTranslate = 1;
-            this.courseInfo.languageCode = ['zh-CN', 'en-US'];
-          } else {
-            // 获取ai设置信息
-            this.courseInfo.isAddAI = 0;
-          }
+          this.initAiData()
           if(!this.courseInfo.orgId){
             //根据课程创建者获取机构id
             apiUser.getOrgSimpleByUserId(result.course.sysCreateAid).then(ors=>{

src/components/VideoPlayer/index.vue

@@ -121,7 +121,7 @@
           </div>
           <!--  ai播放器相关 -->
           <div class="player-controls-bottom-right">
-            <div class="player-controls-btn box-aiTranslate">
+            <div v-if="isAiTranslate" class="player-controls-btn box-aiTranslate">
               <div v-show="isSubtitle" class="player-controls-btn cursor-pointer btn-speed">
                 <span>{{!currentLang ? 'AI翻译' : currentLangLabel}}</span>
                 <div class="speed-control">
@@ -337,13 +337,17 @@ export default {
   },
   // ai播放器相关
   computed: {
-    ...mapGetters(['selectableLang','currentLang'])
+    ...mapGetters(['selectableLang','currentLang','courseInfo']),
+    isAiTranslate () {
+      return this.courseInfo?.aiSet == 1 && this.courseInfo?.aiTranslate == 1;
+    }
   },
   created() {
     // ai播放器相关
     this.SET_currentLang('');
   },
   mounted() {
+    console.log('---',this.isAiTranslate,this.courseInfo,'courseInfo');
     this.videoDom = this.$refs.video;
     this.videoDom.focus({preventScroll: true});
     let speedValue=localStorage.getItem('boe_video_speed');

src/data/pages.js

@@ -117,6 +117,8 @@ export const iframes=[
   {title:'嵌入测试', path:'/iframe/index',hidden:false,component:'portal/iframe'},
   {title:'课件管理', path:'/iframe/course/coursewares',hidden:false,component:'course/Courseware'},
   {title:'课程管理', path:'/iframe/course/manages',hidden:false,component:'course/ManageList'},
+  {title:'ai摘要', path:'/iframe/course/aiAbstract',hidden:false,component:'course/aiSet/aiAbstract'},
+  {title:'ai翻译', path:'/iframe/course/aiTranslate',hidden:false,component:'course/aiSet/aiTranslate'},
   {title:'考试试题管理', path:'/iframe/exam/questions',hidden:false,component:'exam/Question'},
   {title:'查看答卷', path:'/iframe/exam/viewanswer',hidden:false,component:'exam/viewAnswer'},
   {title:'考试试卷管理', path:'/iframe/exam/papers',hidden:false,component:'exam/TestPaper'},

src/security.js

@@ -29,6 +29,19 @@ router.beforeEach((to, from, next) => {
     // 在免登录白名单，直接进入
     next()
   }else{
+    // if (!store.getters.init) {
+    //   store.commit('app/SET_INITDATA',true);
+    //   let myRouters=routers();
+    //   store.dispatch('GenerateRoutes',{routers:myRouters}).then(accessRoutes=>{
+    //     console.log('accessRoutes::',accessRoutes)
+    //       router.addRoutes(accessRoutes) // 动态添加可访问路由表
+    //       next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+    //   });
+    // } else {
+    //   to.meta.keepAlive = true
+    //   next();
+    // }
+    // return;
     if(getToken()){
       if(to.path === '/login'){
         // 如果是外部用户，把配置的路由跳转到个人中心

src/store/getters.js

@@ -33,5 +33,6 @@ const getters = {
     selectableLang:state => state.video.selectableLang,
     currentLang:state => state.video.currentLang,
     currentTime:state => state.video.currentTime,
+    courseInfo:state => state.video.courseInfo,
 }
 export default getters

src/store/modules/video.js

@@ -95,6 +95,7 @@ const state = {
   selectableLang: [], // 可选语言列表+字幕信息
   currentLang: '', // 当前选中语言
   currentTime: -1, // 当前视频时间
+  courseInfo: {},
 }
 
 const mutations = {
@@ -117,15 +118,13 @@ const mutations = {
   SET_currentTime: (state, time) => {
     state.currentTime = time
   },
+  SET_courseInfo: (state, info) => {
+    state.courseInfo = info
+  },
 }
 
 const actions = {
-  unicomPraises({ commit }, data) {
-    commit('SET_praisesUnicom', data)
-  },
-  unicomFavorites({ commit }, data) {
-    commit('SET_favoritesUnicom', data)
-  }
+  
 }
 
 export default {

src/views/course/ManageList.vue

@@ -456,11 +456,11 @@
             <!-- AI摘要状态 -->
             <div class="form-item">
               <span class="form-label">AI摘要状态：</span>
-              <span class="status-badge" :class="{'status-badge--active': aiSetting.aiAbstract === 1}">
+              <span  :class="aiSetting.aiAbstract === 1 ? 'custom-putaway' : 'custom-takeout'">
                 {{ aiSetting.aiAbstract === 1 ? '已上架' : '已下架' }}
               </span>
               <div class="action-buttons">
-                <el-button type="text" @click="aiSetting.aiAbstract = 0">
+                <el-button type="text" @click="changeAIKey('aiAbstract')">
                   {{ aiSetting.aiAbstract === 0 ? '上架' : '下架' }}
                 </el-button>
                 <el-button type="text" >编辑</el-button>
@@ -470,11 +470,11 @@
             <!-- AI文稿状态 -->
             <div class="form-item">
               <span class="form-label">AI文稿状态：</span>
-              <span class="status-badge" :class="{'status-badge--active': aiSetting.aiDraft === 1}">
+              <span  :class="aiSetting.aiDraft === 1 ? 'custom-putaway' : 'custom-takeout'">
                 {{ aiSetting.aiDraft === 1 ? '已上架' : '已下架' }}
               </span>
               <div class="action-buttons">
-                <el-button type="text" @click="aiSetting.aiDraft = 0">
+                <el-button type="text" @click="changeAIKey('aiDraft')">
                   {{ aiSetting.aiDraft === 0 ? '上架' : '下架' }}
                 </el-button>
               </div>
@@ -483,11 +483,11 @@
             <!-- AI翻译状态 -->
             <div class="form-item">
               <span class="form-label">AI翻译状态：</span>
-              <span class="status-badge" :class="{'status-badge--active': aiSetting.aiTranslate === 1}">
+              <span  :class="aiSetting.aiTranslate === 1 ? 'custom-putaway' : 'custom-takeout'">
                 {{ aiSetting.aiTranslate === 1 ? '已上架' : '已下架' }}
               </span>
               <div class="action-buttons">
-                <el-button type="text" @click="aiSetting.aiTranslate = 0">
+                <el-button type="text" @click="changeAIKey('aiTranslate')">
                   {{ aiSetting.aiTranslate === 0 ? '上架' : '下架' }}
                 </el-button>
                 <el-button type="text" >编辑</el-button>
@@ -495,22 +495,27 @@
             </div>
 
             <!-- 支持语种 -->
-            <div class="form-item">
-              <span class="form-label">支持语种：</span>
-              <div class="languages-list">
-                <div class="language-tag">
-                  中文
-                  <span class="status-badge">已下架</span>
-                </div>
-                <div class="language-tag">
-                  英语
-                  <span class="status-badge">生成中</span>
-                </div>
-                <div class="language-tag">
-                  越南语
-                  <span class="status-badge status-badge--active">已上架</span>
+            <div class="form-item" style="align-items: flex-start;">
+              <span class="form-label" style="white-space: nowrap;">支持语种：</span>
+              <div class="languages-list" v-show="false">
+                <div v-for="lang in aiSetting.languageCode" :key="lang" class="language-tag">
+                  {{ getLanguageName(lang) }}
+                  <span class="custom-takeout">已下架</span>
                 </div>
               </div>
+              <el-select
+                v-model="aiSetting.languageCode"
+                multiple
+                style="width: 100%;"
+                placeholder="请选择语种"
+              >
+                <el-option
+                  v-for="lang in selectAllLang"
+                  :key="lang.srclang"
+                  :label="lang.label"
+                  :value="lang.srclang"
+                ></el-option>
+              </el-select>
             </div>
           </div>
         </div>
@@ -531,7 +536,7 @@ import auditCourse2 from '@/components/Course/auditCourse2.vue';
 import adminPage from '@/components/Administration/adminPage.vue';
 import apiResowner from '../../api/modules/resowner.js';
 import apiType from '../../api/modules/type.js'
-import {courseType} from '../../utils/tools.js';
+import {courseType, deepCopy} from '../../utils/tools.js';
 import apiCourse from '../../api/modules/course.js';
 // import {resOwnerIndexName,sysTypeIndexName} from '@/utils/type.js';
 import { mapGetters,mapActions } from 'vuex';
@@ -632,7 +637,7 @@ export default {
         languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
       },
       aiProcessSetting: {  // 开启AI处理弹框
-        dlgShow: true,
+        dlgShow: false,
         aiSet: 1,
         aiAbstract: 1,
         aiDraft: 1,
@@ -685,6 +690,7 @@ export default {
 
   },
   methods: {
+    
     getAudiences(){
       apiUserbasic.getInAudienceIds().then(res=>{
         if (res.status == 200) {
@@ -1148,6 +1154,9 @@ export default {
 
 
     // ai播放器相关
+    getLanguageName(lang){
+      return this.selectAllLang.find(item => item.srclang === lang).label || '';
+    },
     handleSelectionChange(val){
       this.selectedCourses = val;
       console.log(val);
@@ -1172,115 +1181,109 @@ export default {
     },
     // AI设置
     setAI(row) {
-      this.aiSetting.courseId = row.id;
-      // 这里可以添加获取当前课程AI设置的逻辑
-      this.aiSetting.dlgShow = true;
+      console.log('row', row);
+      this.aiSetting = {
+        dlgShow: true,
+        ...row
+      };
+    },
+    changeAIKey(key) {
+      this.aiSetting[key] = this.aiSetting[key] === 1 ? 0 : 1;
     },
-
     // 确认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;
-      // 可以选择是否刷新列表数据
+      const item = deepCopy(this.aiSetting);
+      item.languageStatus = item.aiSet;
+      item.languageCode = item.languageCode || [];
+      if (!item.languageCode.includes('zh-CN')) {
+        item.languageCode.unshift('zh-CN'); // 默认添加中文 去重
+      }
+      this._benchAiSet([item], (res) => {
+        this.$message.success('AI设置保存成功');
+        this.aiSetting.dlgShow = false;
+        // 可以选择是否刷新列表数据
+        this.searchData();
+      }, (res) => {
+        this.$message.error('AI设置保存失败！');
+      })
     },
     setLanguage() {
       if (this.selectedCourses.length > 0) {
-        this.languageSetting = {...this.languageSetting, ...this.getAIInfoByList(this.selectedCourses)}
-        this.languageSetting.dlgShow = true;
+        this.languageSetting = {...{ 
+          dlgShow: true,
+          languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
+        }, ...this.getAIInfoByList(this.selectedCourses)}
       }
     },
     enableAI() {
       // 开启AI处理按钮点击事件
       if (this.selectedCourses.length > 0) {
-        this.aiProcessSetting = {...this.aiProcessSetting, ...this.getAIInfoByList(this.selectedCourses)} 
-        this.aiProcessSetting.dlgShow = true;
+        this.aiProcessSetting = {...{
+          dlgShow: true,
+          aiSet: 1,
+          aiAbstract: 1,
+          aiDraft: 1,
+          languageCode: ['zh-CN', 'en-US'] // 默认选中的语种
+        }, ...this.getAIInfoByList(this.selectedCourses)} 
       }
     },
-
-    async confirmLanguageSetting() {
-      try {
-        // 收集选中的课程ID
-        const courseIds = this.selectedCourses.map(course => course.id).join(',');
-        // 获取选择的语种
-        const languages = this.languageSetting.selectedLanguages.join(',');
-
-        // 这里可以根据实际需求调用API进行语种设置
-        console.log('批量设置课程语种', { courseIds, languages });
-
-        // 显示成功提示
-        this.$message({
-          type: 'success',
-          message: `已成功为${this.selectedCourses.length}个课程设置语种`,
-          offset: 50
-        });
-
-        // 关闭弹框
+    // 批量设置语种 - 确认
+    confirmLanguageSetting() {
+      const courseList = deepCopy(this.selectedCourses);
+      let languageCode = deepCopy(this.languageSetting.languageCode || []);
+      if (!languageCode.includes('zh-CN')) {
+        languageCode.unshift('zh-CN'); // 默认添加中文 去重
+      }
+      courseList.forEach(item => {
+        item.languageCode = languageCode;
+        item.aiTranslate = item.aiSet;
+        item.languageStatus = item.aiSet;
+      })
+      this._benchAiSet(courseList, (res) => {
+        this.$message.success('设置语种成功！');
         this.languageSetting.dlgShow = false;
-
-        // 刷新数据（如果需要）
-        // this.searchData();
-      } catch (error) {
-        console.error('设置语种失败', error);
-        this.$message({
-          type: 'error',
-          message: '设置语种失败，请稍后重试',
-          offset: 50
-        });
-      }
-    },
-    async confirmAiProcess() {
-      try {
-        // 收集选中的课程ID
-        const courseIds = this.selectedCourses.map(course => course.id).join(',');
-        // 获取AI处理配置
-        const { aiSet, aiAbstract, aiDraft, selectedLanguages } = this.aiProcessSetting;
-
-        // 这里可以根据实际需求调用API进行AI处理设置
-        console.log('批量开启AI处理', {
-          courseIds,
-          aiSet,
-          aiAbstract,
-          aiDraft,
-          languages: selectedLanguages.join(',')
-        });
-
-        // 模拟计算跳过和更新的课程数量
-        const totalCourses = this.selectedCourses.length;
-        const skippedCount = Math.floor(totalCourses * 0.2); // 假设20%的课程已开启AI处理
-        const updatedCount = totalCourses - skippedCount;
-
-        // 显示成功提示
-        this.$message({
-          type: 'success',
-          message: `已跳过${skippedCount}个已开启AI处理的课程，成功为${updatedCount}个课程更新AI处理设置`,
-          offset: 50
-        });
-
-        // 关闭弹框
-        this.aiProcessSetting.dlgShow = false;
-
-        // 刷新数据
+        // 可以选择是否刷新列表数据
         this.searchData();
-      } catch (error) {
-        console.error('开启AI处理失败', error);
-        this.$message({
-          type: 'error',
-          message: '开启AI处理失败，请稍后重试',
-          offset: 50
-        });
+      }, (res) => {
+        this.$message.error('设置语种失败！');
+      })
+    },
+
+    // 批量开启AI处理 - 确认
+    confirmAiProcess() {
+      // 获取AI处理配置
+      let { aiSet, aiAbstract, aiDraft, languageCode } = this.aiProcessSetting;
+      const courseList = deepCopy(this.selectedCourses);
+      languageCode = languageCode || [];
+      if (!languageCode.includes('zh-CN')) {
+        languageCode.unshift('zh-CN'); // 默认添加中文 去重
       }
+      courseList.forEach(item => {
+        item.aiSet = aiSet;
+        item.aiAbstract = aiAbstract;
+        item.aiDraft = aiDraft;
+        item.aiTranslate = aiSet;
+        item.languageStatus = aiSet;
+        item.languageCode = languageCode;
+      })
+      this._benchAiSet(courseList, (res) => {
+        this.$message.success('开启AI处理成功！');
+        this.aiProcessSetting.dlgShow = false;
+        // 可以选择是否刷新列表数据
+        this.searchData();
+      }, (res) => {
+        this.$message.error('开启AI处理失败！');
+      })
+    },
+
+    _benchAiSet(courseList, successCB, failCB) {
+      apiCourse.benchAiSet({courseList}).then(res => {
+        if(res.status === 200){
+          successCB && successCB(res);
+        }else{
+          failCB && failCB(res);
+        }
+      })
     },
   }
 };
@@ -1363,22 +1366,6 @@ export default {
   margin: 10px 0;
   line-height: 1.5;
 }
-.status-badge{
-  display: inline-block;
-  padding: 3px 13px;
-  border-radius: 20px;
-  font-size: 12px;
-  background: rgba(254, 249, 195, 1);
-  color: rgba(133, 77, 14, 1);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 17px;
-  letter-spacing: 0px;
-}
-.status-badge--active{
-  background: rgba(220, 252, 231, 1);
-  color: rgba(22, 101, 52, 1);
-}
 .languages-list{
   display: flex;
   flex-wrap: wrap;

src/views/course/aiSet/aiAbstract.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="aiAbstract">
+    <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">
+            <h4>视频摘要</h4>
+            <p>
+              {{currentVideo.aiAbstract}}
+            </p>
+          </div>
+        </div>
+        <div class="videoOperation">
+          <div class="opera-title">
+            <h4>课程摘要</h4>
+            <div class="opera-btn">
+              <el-button type="primary" plain round  size="mini" @click="status = 2">重新生成</el-button>
+              <el-button type="primary" plain round  size="mini" @click="status = 4">编辑</el-button>
+              <el-button plain round  size="mini" @click="status = 3">取消</el-button>
+            </div>
+          </div>
+          <div class="opera-content" v-show="status != 4">
+            <span v-show="status == 1">{{ aiAbstract }}</span>
+            <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;">
+          </div>
+          <el-input v-show="status == 4"
+            type="textarea"
+            placeholder="请输入内容"
+            autosize
+            v-model="aiAbstract">
+          </el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import videoPlayer from "@/components/VideoPlayer/index.vue";
+export default {
+  name: 'aiAbstract',
+  // ai播放器相关
+  components: {
+    videoPlayer
+  },
+  data() {
+    return {
+      courseName: '企业经营法则--课程单元',
+      videoList: [
+        {
+          id: 1,
+          name: '1. 开源节流1',
+          aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。'
+        },
+        {
+          id: 2,
+          name: '2. 企业经营法则总述',
+          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
+        },
+        {
+          id: 3,
+          name: '3. 企业经营法则总述',
+          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
+        },
+        {
+          id: 4,
+          name: '4. 企业经营法则总述',
+          aiAbstract: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
+        },
+      ],
+      testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
+      currentVideo: {},
+      aiAbstract: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。',
+      status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中
+    }
+  },
+  mounted() {
+    this.currentVideo = this.videoList[0];
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.aiAbstract{
+  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;
+          h4{
+            margin: 0 0 10px 0;
+            color: rgba(17, 24, 39, 1);
+            font-family: Noto Sans SC;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 23px;
+          }
+          p{
+            color: rgba(17, 24, 39, 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;
+          h4{
+            margin: 0;
+            color: rgba(17, 24, 39, 1);
+            font-family: Noto Sans SC;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 23px;
+          }
+          .opera-btn{
+            display: flex;
+          }
+        }
+        .opera-content{
+          flex: 1;
+          border-radius: 7px;
+          background: rgba(249, 250, 251, 1);
+          padding: 15px;
+          color: rgba(17, 24, 39, 1);
+          font-family: Noto Sans SC;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0px;
+        }
+      }
+    }
+  }
+}
+::v-deep .el-textarea{
+  flex: 1;
+}
+::v-deep .el-textarea__inner{
+  height: 100%!important;
+}
+</style>

src/views/course/aiSet/aiTranslate.vue

@@ -0,0 +1,388 @@
+<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>

src/views/portal/course/Index.vue

@@ -393,7 +393,7 @@
                           </div>
                         </div>
                         <!-- <img slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;"> -->
-                        <img v-show="cinfo.aiAbstract == '1'" slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;">
+                        <img v-show="cinfo.aiAbstract == 1" slot="reference" src="../../../assets/images/course/courseAbstract.png" alt="摘要" style="width: 94px;height: 44px;margin-left: -10px;">
                       </el-popover>
                       <div class="course-info-user" style="max-width: 100px;" v-if="cinfo.teacher">
                         <el-tooltip :content="cinfo.teacher" placement="bottom" effect="light">

src/views/study/coursenew.vue

@@ -376,6 +376,7 @@
             <!-- 开发阶段先放开 v-if="courseInfo.aiDraft == 1" -->
             <div
               @click="heartabthree"
+              v-if="courseInfo.aiDraft == 1 && contentData.contentType == 10"
               :class="tab == 3 ? 'control-tab-active' : ' '"
               style="position: relative"
             >
@@ -650,7 +651,7 @@
           </div>
           <!--     ai播放器相关    -->
           <!-- ai文稿 -->
-          <div class="ai-script" v-if="tab == 3">
+          <div class="ai-script" v-if="contentData.contentType == 10 && tab == 3">
             <ai-script ref="aiscript" @changeCurrentTime="changeCurrentTime"></ai-script>
           </div>
         </div>
@@ -1054,6 +1055,7 @@ export default {
     },
     ...mapMutations({
       SET_selectableLang: 'video/SET_selectableLang',
+      SET_courseInfo: 'video/SET_courseInfo',
     }),
     handleOpen(key, path) {
       if (this.isFalse) {
@@ -1387,6 +1389,10 @@ export default {
     // ai播放器相关 - 视频处理
     handleAIVideo(list = [], r) {
       this.SET_selectableLang(list);
+      this.SET_courseInfo(this.courseInfo);
+      if (this.courseInfo.aiSet && this.courseInfo.aiAbstract == 1 && this.courseInfo.summaryContent) {
+        this.coutab(4);
+      }
       console.log("ai处理", this.selectableLang);
     },
     isShowTime() {