easegen.git - Gitblit

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="t('courseCenter.intelligentSpeech')"
    width="80%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="rewriter-container flex-col">
      <div class="content-wrapper flex-col">
        <div class="main-content flex-row">
          <!-- 左侧功能区域 -->
          <div class="left-area flex-col">
            <!-- 智写方式 -->
            <div class="config-item flex items-center">
              <div class="config-label" style="width: 120px"
                >{{ t('courseCenter.smartWritingMethod') }}：</div
              >
              <el-select
                v-model="writeMode"
                :placeholder="t('common.selectText') + t('courseCenter.smartWritingMethod')"
              >
                <el-option :label="t('courseCenter.imageRewriting')" value="image" />
                <el-option :label="t('courseCenter.textRewriting')" value="text" />
                <el-option :label="t('courseCenter.expandWritten')" value="expand" />
                <el-option :label="t('courseCenter.abbreviation')" value="shrink" />
              </el-select>
            </div>
 
            <!-- 图片预览区，仅图片改写时显示 -->
            <div v-if="writeMode === 'image'" class="config-item">
              <div class="config-label">{{ t('courseCenter.PPTReview') }}：</div>
              <div class="preview-image flex-center">
                <el-image
                  :src="imageUrl"
                  :style="{
                    width: '320px',
                    height: imageUrl ? '320px / (imageWidth / imageHeight)' : '0'
                  }"
                  :preview-src-list="[imageUrl]"
                  :initial-index="0"
                  fit="contain"
                  preview-teleported
                />
              </div>
            </div>
 
            <!-- 写作风格，仅图片改写和文字改写时显示 -->
            <div v-if="['image', 'text'].includes(writeMode)" class="config-item flex items-center">
              <div class="config-label" style="width: 80px">{{ t('courseCenter.style') }}：</div>
              <el-select
                v-model="writeStyle"
                :placeholder="t('common.selectText') + t('courseCenter.writingStyle')"
              >
                <el-option :label="t('courseCenter.professionalFormal')" value="professional" />
                <el-option :label="t('courseCenter.popularDailyLife')" value="casual" />
                <el-option :label="t('courseCenter.confidenceMotivation')" value="inspiring" />
              </el-select>
            </div>
 
            <div v-if="writeMode === 'image'" class="config-item flex items-center">
              <div class="config-label" style="width: 80px">{{ t('courseCenter.theme') }}：</div>
              <el-input v-model="pageTheme" :placeholder="t('courseCenter.placeholderTheme')" />
            </div>
 
            <!-- 个性化要求，仅图片改写和文字改写时显示 -->
            <div v-if="['image', 'text'].includes(writeMode)" class="config-item flex items-center">
              <div class="config-label" style="width: 80px"
                >{{ t('courseCenter.requirement') }}：</div
              >
              <el-input
                v-model="customRequirements"
                type="textarea"
                :rows="2"
                resize="none"
                :placeholder="t('courseCenter.placeholderRequirement')"
              />
            </div>
 
            <!-- 生成讲稿按钮 -->
            <div class="rewrite-actions">
              <el-button type="primary" :loading="isRewriting" @click="handleRewrite">
                {{ t('courseCenter.generateSpeech') }}
              </el-button>
            </div>
          </div>
          <!-- 中间原始讲稿区 -->
          <div class="output-area flex-col justify-between">
            <div class="original-content flex-col">
              <el-input
                v-model="originalContent"
                type="textarea"
                :rows="25"
                resize="none"
                readonly
                :placeholder="t('courseCenter.originalContent')"
              />
            </div>
          </div>
          <!-- 右侧输出区 -->
          <div class="output-area flex-col justify-between">
            <div class="output-content flex-col">
              <el-input
                v-model="displayContent"
                type="textarea"
                :rows="25"
                resize="none"
                readonly
                :placeholder="
                  isRewriting
                    ? t('courseCenter.speechContent') + '...'
                    : t('courseCenter.rewrittenContent')
                "
              />
            </div>
            <!-- <div class="text-wrapper_17 flex-col">
              <span class="text_41">
                请输入对原文稿拓写的要求，如丰富某部分内容、让文稿更口语化等。也可以直接点击右侧按钮进行标准化拓写
              </span>
            </div> -->
          </div>
        </div>
        <!-- <div class="text-wrapper_18 flex-col"><span class="text_42">确定使用文案</span></div> -->
        <!-- 底部确认按钮 -->
        <div class="footer-actions flex-row justify-end">
          <el-button type="primary" @click="handleConfirm" :disabled="!outputContent || isTyping">
            {{t('courseCenter.confirmUseScript')}}
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import { ChatApi } from '@/api/digitalcourse/chat'
import { ElMessage } from 'element-plus'
const { t } = useI18n() // 国际化
const props = defineProps({
  imageUrl: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  }
})
 
const emit = defineEmits(['update:modelValue', 'confirm'])
 
const dialogVisible = ref(false)
const rewriteRequirement = ref('')
const rewrittenText = ref('')
 
const writeMode = ref('image') // 默认图片改写
// 使用 props.title 作为 pageTheme 的默认值
const pageTheme = ref(props.title)
const writeStyle = ref('professional')
const customRequirements = ref('')
const originalContent = ref(props.content)
console.log('传入的content:', props.content)
 
const outputContent = ref('') // 存储完整的生成内容
const displayContent = ref('') // 用于显示打字机效果的内容
const isRewriting = ref(false)
const isTyping = ref(false) // 新增打字机效果进行中的状态
 
// 业务编码映射
const BUSINESS_CODES = {
  image: 'BUSI_0003', // 图片改写
  text: 'BUSI_0004', // 文字改写
  expand: 'BUSI_0001', // 扩写
  shrink: 'BUSI_0002' // 缩写
}
 
const open = () => {
  dialogVisible.value = true
  // 每次打开时更新内容
  originalContent.value = props.content
  // 重置其他状态
  writeMode.value = 'image'
  writeStyle.value = 'professional'
  pageTheme.value = props.title
  customRequirements.value = ''
  outputContent.value = ''
  displayContent.value = ''
  isTyping.value = false
}
 
const handleClose = () => {
  dialogVisible.value = false
  rewriteRequirement.value = ''
  rewrittenText.value = ''
  writeMode.value = 'image'
  pageTheme.value = props.title // 重置为默认值
  customRequirements.value = ''
}
 
const typewriterEffect = (text: string, speed = 30) => {
  // 200ms 输出一个字符，相当于每秒5个字符
  return new Promise<void>((resolve) => {
    let index = 0
    displayContent.value = ''
    isTyping.value = true // 开始打字效果时设置状态
 
    const timer = setInterval(() => {
      if (index < text.length) {
        displayContent.value += text[index]
        index++
      } else {
        clearInterval(timer)
        isTyping.value = false // 打字效果完成后重置状态
        resolve()
      }
    }, speed)
  })
}
 
const handleRewrite = async () => {
  try {
    isRewriting.value = true
    outputContent.value = ''
    displayContent.value = ''
 
    const params = {
      business_code: BUSINESS_CODES[writeMode.value], // 根据写作模式获取对应的业务编码
      content_param: JSON.stringify({
        ppt_title: pageTheme.value,
        ppt_content: props.content,
        image_url: writeMode.value === 'image' ? props.imageUrl : '',
        custom_requirements: ['image', 'text'].includes(writeMode.value)
          ? customRequirements.value
          : '',
        write_style: ['image', 'text'].includes(writeMode.value) ? writeStyle.value : ''
      })
    }
 
    // 获取完整内容
    const chat = await ChatApi.streamChat(params)
    let fullContent = ''
 
    for await (const chunk of chat.iterateStream()) {
      try {
        if (chunk.choices?.[0]?.delta?.content) {
          fullContent += chunk.choices[0].delta.content
        }
      } catch (e) {
        console.error('处理数据块时出错:', e)
      }
    }
 
    outputContent.value = fullContent // 保存完整内容
 
    // 开始打字机效果
    await typewriterEffect(fullContent)
  } catch (error) {
    console.error('改写失败:', error)
    ElMessage.error('改写失败，请重试')
  } finally {
    isRewriting.value = false
  }
}
 
// 组件卸载时清理可能的定时器
onUnmounted(() => {
  displayContent.value = ''
  outputContent.value = ''
  isTyping.value = false
})
 
const handleConfirm = () => {
  if (!outputContent.value || isTyping.value) {
    ElMessage.warning('请等待讲稿生成完成')
    return
  }
  emit('confirm', outputContent.value)
  handleClose()
}
 
defineExpose({
  open
})
</script>
 
<style scoped lang="scss">
.footer-actions {
  margin-top: 10px;
  border-top: 1px solid #eee;
}
 
// 添加打字机效果的光标样式
:deep(.el-textarea__inner) {
  &::after {
    content: '|';
    animation: cursor-blink 1s infinite;
  }
}
 
.left-area {
  width: 320px; // 修改为固定宽度
  min-width: 320px; // 添加最小宽度确保不会被压缩
  padding: 20px;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
 
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
 
  .preview-image {
    flex: 1; // 占据剩余空间
    margin-bottom: 20px;
  }
 
  .rewrite-actions {
    height: 60px; // 给按钮区域固定高度
    margin-top: auto;
  }
 
  .config-item {
    width: '320px';
    margin-bottom: 20px;
 
    .config-label {
      font-size: 14px;
      color: #606266;
      margin-bottom: 0px;
    }
 
    .preview-image {
      margin: 10px 0;
      border: 1px solid #eee;
      border-radius: 4px;
      padding: 10px;
    }
 
    :deep(.el-radio-group) {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
 
      .el-radio {
        margin-right: 0;
      }
    }
  }
}
 
// 居中布局的通用类
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
// .rewriter-container {
//   background-color: rgba(0, 0, 0, 0.71);
//   height: 1080px;
//   width: 1920px;
//   position: absolute;
//   left: 0;
//   top: 0;
// }
.content-wrapper {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  width: 100%;
  height: 588px;
  margin: 0px 0 0 0px;
}
 
.group_14 {
  background-color: rgba(247, 249, 251, 1);
  width: 100%;
  height: 68px;
}
 
.text_37 {
  width: 32px;
  height: 28px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: MiSans VF-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  margin: 20px 0 0 24px;
}
 
.label_14 {
  width: 24px;
  height: 24px;
  margin: 22px 24px 0 0;
}
 
.main-content {
  background-color: rgba(236, 240, 244, 1);
  width: 100%;
  height: 554px;
}
 
.text_38 {
  width: 279px;
  height: 168px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: NaN;
  text-align: left;
  line-height: 150px;
  margin: 20px 0 0 24px;
}
 
.feature-area {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 12px;
  width: 140px;
  height: 444px;
  border: 1px solid rgba(234, 234, 234, 1);
  margin-left: 20px;
  justify-content: flex-center;
}
 
.section_5 {
  background-color: rgba(239, 248, 253, 1);
  border-radius: 12px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(50, 115, 246, 1);
  justify-content: flex-center;
  margin: 32px 0 0 20px;
}
 
.label_15 {
  width: 32px;
  height: 32px;
  margin: 20px 0 0 34px;
}
 
.text_39 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(50, 115, 246, 1);
  font-size: 14px;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 14px;
  margin: 8px 0 20px 22px;
}
 
.feature-item {
  background-color: rgba(249, 249, 249, 1);
  border-radius: 12px;
  width: 100px;
  height: 100px;
  margin: 40px 0 0 20px;
}
 
.align-center {
  align-items: center; // flex 布局下的子元素水平居中
}
 
.feature-icon-wrapper {
  width: 70px;
  height: 60px;
  margin: 20px 0 0 15px;
  .feature-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto; // 图片水平居中
  }
 
  .text-group_11 {
    text-align: center; // 文字水平居中
  }
}
 
.feature-icon {
  width: 32px;
  height: 32px;
  margin-left: 19px;
}
 
.text-group_11 {
  width: 70px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 8px;
}
 
.section_7 {
  background-color: rgba(249, 249, 249, 1);
  border-radius: 12px;
  width: 100px;
  height: 100px;
  margin: 40px 0 32px 20px;
}
 
.image-text_24 {
  width: 56px;
  height: 60px;
  margin: 20px 0 0 22px;
}
 
.label_17 {
  width: 32px;
  height: 32px;
  margin-left: 12px;
}
 
.text-group_12 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 8px;
}
 
.output-area {
  width: calc(100% - 16px); // 减去左右各8px的边距
  height: calc(100% - 20px); // 减去上下各8px的边距
  margin: 8px; // 四周统一8px边距
}
.output-content {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  height: 100%;
  border: 1px solid rgba(234, 234, 234, 1);
  width: 100%;
}
 
.text_40 {
  width: 84px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 150px;
  margin: 20px 0 0 20px;
}
 
.text-wrapper_17 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 12px;
  height: 74px;
  border: 1px solid rgba(234, 234, 234, 1);
  margin-top: 12px;
  width: 531px;
}
 
.text_41 {
  width: 495px;
  height: 42px;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: NaN;
  text-align: left;
  line-height: 150px;
  margin: 16px 0 0 16px;
}
 
.text-wrapper_18 {
  background-color: rgba(50, 115, 246, 1);
  border-radius: 8px;
  height: 40px;
  width: 140px;
  margin: 16px 0 20px 870px;
}
 
.text_42 {
  width: 84px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 14px;
  margin: 10px 0 0 28px;
}
// 样式保持不变,只是修改了一些类名
.script-rewriter {
  display: flex;
  flex-direction: column;
  height: 80vh;
 
  .preview-image {
    width: 600px;
    margin: 0 auto;
 
    :deep(.el-image) {
      width: 100%;
      display: block;
    }
  }
}
</style>