字幕查看

du

2025-04-10 265f54d530fcc8e0ad0d00a012b217a97817da02

字幕查看

 easegen-front/src/views/myCourse/index.vue

@@ -150,7 +150,7 @@
    @closed="resetSubtitleForm"
  >
    <el-form :model="subtitleForm" ref="subtitleFormRef">
      <el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="断句时间阈值" prop="timeThreshold" :rules="[
            { required: true, message: '请输入断句时间阈值', trigger: 'blur' },
@@ -203,40 +203,46 @@
      <el-form-item label="字幕内容" prop="content" :rules="[
        { required: true, message: '请先生成或上传字幕内容', trigger: 'blur' }
      ]">
        <el-input
          v-model="subtitleForm.content"
          type="textarea"
          :rows="20"
          placeholder="字幕内容将显示在这里（SRT格式）"
          resize="none"
        />
        <div style="width: 100%;" class="textarea-wrapper">
          <el-input
            class="scroll-outside"
            v-model="subtitleForm.content"
            type="textarea"
            :rows="20"
            placeholder="字幕内容将显示在这里（SRT格式）"
            resize="none"
          />
          <el-button
            style="margin-top: 20px;float: right"
            type="primary"
            @click="saveSubtitles"
            :loading="saving"
            :disabled="!subtitleForm.content"
          >
            保存字幕
          </el-button>
        </div>

      </el-form-item>
      <el-form-item label="预览视频" v-if="subtitleForm.subtitlesAddStatus==2">
        <video width="100%" :src="subtitleForm.videoUrl" controls></video>
      </el-form-item>
      <el-form-item label="下载字幕视频" v-if="subtitleForm.subtitlesAddStatus==2">
        <el-button
          v-if="subtitleForm.subtitlesAddStatus==2"
          type="primary"
          @click="handleDownload(subtitleForm.videoUrl,subtitleForm.videoUrl)"
        >
          字幕视频
        </el-button>
        <div style="width: 100%;">
          <video width="100%" :src="subtitleForm.videoUrl" controls></video>
          <el-button
            style="margin-top: 20px;float: right"
            type="primary"
            @click="handleDownload(subtitleForm.videoUrl,subtitleForm.videoUrl)"
          >
            下载视频
          </el-button>
        </div>
      </el-form-item>
    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="subtitleDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveSubtitles"
          :loading="saving"
          :disabled="!subtitleForm.content"
        >
          保存字幕
        </el-button>
        <el-button @click="subtitleDialogVisible = false">关 闭</el-button>

      </div>
    </template>
  </el-dialog>
@@ -332,6 +338,7 @@
    message.warning("未找到资源文件！")
    return
  }
  // window.open(url, '_blank');
  const link = document.createElement('a')
  link.href = url
  link.download = courseName
@@ -710,3 +717,33 @@
  getList()
})
</script>
<style scoped>
.textarea-wrapper {
  position: relative;
  width: fit-content;
}

.scroll-outside {
  /* 隐藏默认滚动条 */
  overflow: hidden;
}

.scroll-outside .el-textarea__inner {
  /* 显示自定义滚动条 */
  overflow-y: auto;
  /* 确保滚动条不会挤压内容 */
  padding-right: 0;
  /* 可选：增加右边距为滚动条留出空间 */
  margin-right: 16px;
}

/* 可选：自定义滚动条样式 */
.scroll-outside .el-textarea__inner::-webkit-scrollbar {
  width: 8px;
}

.scroll-outside .el-textarea__inner::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
</style>