ai视频一期功能提交

src/components/Course/aiScript.vue

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

src/components/Course/courseForm.vue

@@ -159,41 +159,39 @@
               </el-input>
             </el-form-item>
             <el-form-item label="AI设置">
-              <div>
+              <div style="margin-top: 7px;">
-                  <div style="display: flex; align-items: center;gap: 10px;">
+                  <div style="display: flex; align-items: center;gap: 5px;">
-                    <div style="display: flex; align-items: center;gap: 3px;">
+                    <el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
-                      <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" 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="margin-top: 7px;">
-                  <div style="display: flex; align-items: center;gap: 10px;">
+                  <div style="display: flex; align-items: center;gap: 5px;">
-                    <div style="display: flex; align-items: center;gap: 3px;">
+                    <el-switch v-model="courseInfo.aiSet" :active-value="1" :inactive-value="0"></el-switch>
-                      <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" 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() {

src/views/course/ManageList.vue

@@ -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>
+              <span class="form-label">
-              <el-radio-group v-model="aiProcessSetting.aiAbstract" class="radio-group">
+                <el-tooltip class="item" effect="dark" :content="aiAbstractTip" placement="top">
-                <el-radio :label="1">是</el-radio>
+                  <i class="el-icon-question"></i>
-                <el-radio :label="0">否</el-radio>
+                </el-tooltip>
-              </el-radio-group>
+                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>
+              <span class="form-label">
-              <el-radio-group v-model="aiProcessSetting.aiDraft" class="radio-group">
+                <el-tooltip class="item" effect="dark" :content="aiDraftTip" placement="top">
-                <el-radio :label="1">是</el-radio>
+                  <i class="el-icon-question"></i>
-                <el-radio :label="0">否</el-radio>
+                </el-tooltip>
-              </el-radio-group>
+                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;

src/views/study/coursenew.vue

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