eep_page/src/views/book/courseware/create/components/question/character/Character.vue

<template>
  <ModuleBase ref="base" :type="data.type">
    <template #content>
      <!-- eslint-disable max-len -->
      <div class="character-wrapper">
        <div class="fun-type">
          <a
            v-for="{ value, label } in modelList"
            :key="value"
            :class="[data.property.model === value ? 'active' : '']"
            @click="data.property.model = value"
            >{{ label }}</a
          >
        </div>
        <div v-for="(item, index) in data.option_list" :key="index" class="content-box">
          <div class="content-item">
            <el-input
              v-model="item.content"
              maxlength="10"
              show-word-limit
              :placeholder="
                data.property.model === 'write'
                  ? '可输入汉字与符号→、+等，@：代表图片，#：代表书写格，例如好→女+子'
                  : '输入汉字，@：代表图片，#：代表书写格'
              "
              @blur="handleMindMap"
            />
            <el-button @click="identify(item, index)">识别</el-button>
            <!-- <SoundRecord v-if="item.audio_file_id" :wav-blob.sync="item.audio_file_id" />
            <el-button v-else @click="handleMatic(item.content, index)">生成音频</el-button> -->
            <el-button @click="handleDelete(index)">删除此条</el-button>
          </div>
          <template v-if="data.property.is_enable_voice === 'true'">
            <div v-if="item.audio_file_id" style="margin-top: 8px">
              <SoundRecord :wav-blob.sync="item.audio_file_id" />
            </div>
            <template v-else>
              <div :class="['upload-audio-play']">
                <UploadAudio
                  v-if="data.property.audio_generation_method === 'upload'"
                  :file-id="item.audio_file_id"
                  :show-upload="!item.audio_file_id"
                  :item-index="index"
                  @upload="uploads"
                  @deleteFile="deleteFiles"
                />
                <div
                  v-else-if="data.property.audio_generation_method === 'auto'"
                  class="auto-matic"
                  @click="handleMatic(item.content, index)"
                >
                  <SvgIcon icon-class="voiceprint-line" class="record" />
                  <span class="auto-btn">{{ item.audio_file_id ? '已生成' : '生成音频' }}</span
                  >{{ item.audio_file_id ? '成功' : '' }}
                </div>
                <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
              </div>
            </template>
          </template>
          <div class="option-item">
            <template v-if="data.property.model === 'miao'">
              <span>书写示范：</span>
              <el-radio-group v-model="item.is_show_ben">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </template>
            <template v-if="data.property.model === 'write'">
              <span>字格分开：</span>
              <el-radio-group v-model="item.is_margin">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </template>
            <template v-if="isEnable(data.property.view_pinyin)">
              <!-- <span>共用拼音：</span>
              <el-radio-group v-model="item.is_common_pinyin">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group> -->
              <template v-if="item.is_common_pinyin">
                <span>拼音</span>
                <el-input v-model="item.pinyin" placeholder="输入拼音" />
              </template>
            </template>

            <template v-if="isEnable(data.property.is_enable_shiyi)">
              <span>释义</span>
              <el-input v-model="item.shiyi" placeholder="输入释义" />
            </template>
          </div>
          <div v-for="(items, indexs) in item.content_list" :key="indexs" class="content-items">
            <template v-if="items">
              <label>内容：{{ items.con }} </label>
              <UploadFile
                v-if="items.type === 'img'"
                :type="data.type"
                :file-list="items.file_list"
                :file-id-list="items.file_id_list"
                :label-text="'图片'"
                :accept-file-type="acceptFileType"
                :index="index"
                :indexs="indexs"
                :limit="1"
                @updateFileList="updateFileList"
              />
              <div class="option-item">
                <template v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin">
                  <span>拼音</span>
                  <el-input v-model="items.pinyin" placeholder="输入拼音" />
                </template>
                <!-- <template v-if="isEnable(data.property.is_enable_shiyi) && data.property.model === 'input'">
                <span>释义</span>
                <el-input v-model="items.shiyi" placeholder="输入释义"></el-input>
              </template> -->
              </div>
            </template>
          </div>
        </div>
        <el-button icon="el-icon-plus" style="margin: 10px 0" @click="addElement">增加一个</el-button>
      </div>
      <AnswerAnalysisList
        v-if="data.answer_list?.length > 0 || data.analysis_list?.length > 0"
        :answer-list="data.answer_list"
        :analysis-list="data.analysis_list"
        :unified-attrib="data.unified_attrib"
        @updateAnswerAnalysisFileList="updateAnswerAnalysisFileList"
        @deleteAnswerAnalysis="deleteAnswerAnalysis"
      />
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';

import { getCharacterData, modelList, getOption } from '@/views/book/courseware/data/character';
import { GetStaticResources, TextToAudioFile } from '@/api/app';
import { PinyinBuild_OldFormat } from '@/api/book';
import cnchar from 'cnchar';
import UploadFile from '../../base/common/UploadFile.vue';
import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';

export default {
  name: 'CharacterPage',
  components: { UploadFile, SoundRecord, UploadAudio },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getCharacterData(),
      modelList,
      getOption,
      acceptFileType: '.png,.jpg,.jpeg',
    };
  },
  watch: {
    // 'data.content': 'handleMindMap',
  },
  methods: {
    // 解析输入内容
    handleChangeContent() {
      if (this.data.content.trim()) {
        let contentArr = this.data.content.split('\n');
        let contentList = [];
        contentArr.forEach((item, index) => {
          if (item.trim()) {
            let content_arr = item.trim().split('');
            let content_arrs = [];
            let content_arr_strokes = [];
            content_arr.forEach((itemc) => {
              if (itemc.trim()) {
                content_arrs.push(itemc.trim());
              }
            });
            content_arrs.forEach((itemc, indexc) => {
              content_arr_strokes.push(null);
              let MethodName = 'hz_resource_manager-GetHZStrokesContent';
              let data = {
                hz: itemc,
              };
              GetStaticResources(MethodName, data).then((res) => {
                let obj = {
                  hz: itemc.trim(),
                  strokes: res,
                };
                content_arr_strokes[indexc] = obj;
              });
            });
            contentList.push({
              con: item.trim(),
              pinyin: cnchar.spell(item.trim(), 'array', 'low', 'tone').join(' '),
              audio_file_id: '',
              hz_strokes_list: content_arr_strokes,
            });
            this.handleMatic(item.trim(), contentList.length - 1);
          }
        });
        this.data.content_list = contentList;
      } else {
        this.data.content_list = [];
      }
      this.handleMindMap();
    },
    // 自动生成音频
    handleMatic(con, index) {
      TextToAudioFile({
        text: con.replace(/<[^>]+>/g, ''),
        voice_type: this.data.property.voice_type,
        emotion: this.data.property.emotion,
        speed_ratio: this.data.property.speed_ratio,
      })
        .then(({ status, file_id, file_url }) => {
          if (status === 1) {
            this.data.option_list[index].audio_file_id = {
              file_url,
              file_id,
            };
          }
        })
        .catch(() => {});
    },
    updateFileList({ file_list, file_id_list }, index, indexs) {
      this.data.option_list[index].content_list[indexs].file_list = file_list;
      this.data.option_list[index].content_list[indexs].file_id_list = file_id_list;
    },
    // 增加
    addElement() {
      this.data.option_list.push(getOption());
    },
    // 删除
    handleDelete(index) {
      this.data.option_list.splice(index, 1);
    },
    handleMindMap() {
      // 思维导图数据
      let node_list = [];
      this.data.option_list.forEach((item) => {
        node_list.push({
          name: item.content.replace(/<[^>]*>?/gm, ''),
          id: Math.random().toString(36).substring(2, 12),
        });
      });
      this.data.mind_map.node_list = node_list;
    },
    // 识别
    async identify(items, index) {
      let con = items.content.trim();
      if (con) {
        items.content_list = [];
        let arr = con.split('');
        const regex = /[\u4E00-\u9FFF]/;
        let str = '';
        arr.forEach((item) => {
          if (regex.test(item)) {
            str += item;
          }
        });
        let MethodName = 'hz_resource_manager-GetMultHZStrokesContent';
        let data = {
          hz_str: str,
        };
        // items.pinyin = cnchar.spell(str, 'array', 'low', 'tone').join(' ');
        if (str) {
          items.pinyin = await this.handlePinyin(str);
        }
        await GetStaticResources(MethodName, data)
          .then((res) => {
            for (let key in res) {
              if (key != 'status' && key != ',' && res[key]) {
                res[key] = JSON.parse(res[key]);
              }
            }
            let hzDetailList = res;

            arr.forEach((item, index) => {
              let objs = {};
              if (item === '@') {
                // 图片
                objs = {
                  con: item,
                  type: 'img',
                  file_list: [],
                  file_id_list: [],
                  pinyin: '',
                };
              } else if (item === '#') {
                // 书写
                objs = {
                  con: item,
                  type: 'write',
                  img: '',
                  base64: '',
                  pinyin: '',
                };
              } else if (regex.test(item)) {
                // 汉字
                let hz_list = [];
                let res = JSON.parse(JSON.stringify(hzDetailList[item]));
                let obj = {
                  con: item,
                  hzDetail: {
                    hz_json: res,
                  },
                };
                hz_list.push(obj);
                objs = {
                  con: item,
                  type: 'hanzi',
                  hz_info: hz_list,
                  pinyin: cnchar.spell(item, 'array', 'low', 'tone').join(' '),
                  shiyi: '',
                  answer: '',
                  is_example: false,
                  answer_pinyin: '',
                  answer_en: '',
                  is_can_input_answer: true,
                  high_strokes: '',
                };
              } else {
                // 连字符
                objs = {
                  con: item,
                  type: 'lian',
                  pinyin: '',
                };
              }
              this.$set(items.content_list, index, objs);
            });
          })
          .catch(() => {});
        for (let index = 0; index < arr.length; index++) {
          if (regex.test(arr[index])) {
            // 汉字
            items.content_list[index].pinyin = await this.handlePinyin(arr[index]);
          }
        }
      } else {
        this.$message.warning('请先输入内容');
      }
    },
    // 自动生成拼音
    handlePinyin(text) {
      let data = {
        text,
        is_rich_text: 'false',
        is_first_sentence_first_hz_pinyin_first_char_upper_case: 'false',
        is_fill_space: 'false',
        is_custom_fc: 'false',
      };
      return new Promise((resolve, reject) => {
        PinyinBuild_OldFormat(data).then((res) => {
          if (res.parsed_text) {
            let mergedData = '';
            res.parsed_text.paragraph_list.map((outerArr, i) =>
              outerArr.map((innerArr, j) =>
                innerArr.map((newItem, k) => {
                  mergedData += `${newItem.pinyin} `;
                }),
              ),
            );
            resolve(mergedData);
          }
        });
      });
    },
    uploads(file_id, index, file_url) {
      this.data.option_list[index].audio_file_id = {
        file_url,
        file_id,
      };
    },
    deleteFiles(index) {
      this.data.option_list[index].audio_file_id = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.character-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;

  :deep .rich-wrapper {
    width: 100%;
  }

  .tips {
    font-size: 12px;
    color: #999;
  }

  .fun-type {
    display: flex;
    gap: 5px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e6eb;

    a {
      padding: 5px 10px;
      font-weight: normal;
      color: #1d2129;
      cursor: pointer;
      background: #f2f3f5;
      border: 1px solid #f2f3f5;
      border-radius: 2px;

      &.active {
        color: #165dff;
        background: #e7eeff;
        border-color: #165dff;
      }
    }
  }

  .upload-file {
    // display: flex;
    column-gap: 12px;
    align-items: center;
    margin: 8px 0;

    .file-name {
      display: flex;
      column-gap: 14px;
      align-items: center;
      justify-content: space-between;
      max-width: 360px;
      padding: 8px 12px;
      font-size: 14px;
      color: #1d2129;
      background-color: #f7f8fa;

      span {
        display: flex;
        column-gap: 14px;
        align-items: center;
      }
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .fun-type {
    display: flex;
    gap: 5px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e6eb;

    a {
      padding: 5px 10px;
      font-weight: normal;
      color: #1d2129;
      cursor: pointer;
      background: #f2f3f5;
      border: 1px solid #f2f3f5;
      border-radius: 2px;

      &.active {
        color: #165dff;
        background: #e7eeff;
        border-color: #165dff;
      }
    }
  }

  .content-box {
    width: 100%;
  }

  .content-item {
    display: flex;
    gap: 16px;

    .el-input {
      max-width: 600px;
    }
  }

  .content-items {
    margin: 10px 0;

    label {
      font-size: 14px;
      line-height: 34px;
      color: #4e5969;
    }
  }

  .option-item {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    margin-top: 5px;

    span {
      flex-shrink: 0;
      width: max-content;
      margin-right: 10px;
      font-size: 14px;
      color: #4e5969;
    }

    .el-input {
      max-width: 100px;
      margin-right: 30px;
    }

    .el-radio-group {
      margin-right: 30px;
    }
  }
}

.auto-matic,
.upload-audio-play {
  margin-top: 8px;

  :deep .upload-wrapper {
    margin-top: 0;
  }

  .audio-wrapper {
    :deep .audio-play {
      width: 16px;
      height: 16px;
      color: #000;
      background-color: initial;
    }

    :deep .audio-play.not-url {
      color: #a1a1a1;
    }

    :deep .voice-play {
      width: 16px;
      height: 16px;
    }
  }
}

.auto-matic {
  display: flex;
  flex-shrink: 0;
  column-gap: 12px;
  align-items: center;
  width: 200px;
  padding: 5px 12px;
  background-color: $fill-color;
  border-radius: 2px;

  .auto-btn {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #1d2129;
    cursor: pointer;
  }
}
</style>