eep_page/packages/BookEep.vue

<template>
  <div class="common-preview">
    <div class="audit-content">
      <div ref="previewMain" class="main-container" :style="{ paddingLeft: '0', paddingRight: '0' }">
        <main :class="['preview-main', 'no-audit']" :style="computedCommonPreviewStyle">
          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
          <CoursewarePreview
            ref="courseware"
            :is-show-group="false"
            :group-show-all="true"
            :group-row-list="groupRowList"
            :data="data"
            :courseware-id="curSelectId"
            :component-list="cList"
            :background="background"
            :can-remark="false"
            :show-remark="false"
            :component-remark-obj="{}"
            :project="project"
          />
          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
        </main>
      </div>
      <div v-if="!sidebarShow" class="back-top" @click="backTop">
        <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
      </div>
    </div>
  </div>
</template>

<script>
import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';

import { isTrue } from '@/utils/validate';
import { buildCoursewareStyle } from '@/views/book/courseware/preview/common/utils/coursewareStyle';

export default {
  name: 'BookEep',
  components: {
    CoursewarePreview,
  },
  provide() {
    return {
      getLang: () => this.lang,
      getChinese: () => this.chinese,
      getShowPinYin: () => this.showPinYin,
      getLangList: () => this.langList,
      convertText: this.convertText,
      getTitleList: () => this.title_list,
      getPermissionControl: () => this.permissionControl,
    };
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    // 组件内容
    content: {
      type: String,
      default: '',
    },
    // 内容分组行列表
    contentGroupRowList: {
      type: String,
      default: '',
    },
    // 组件列表
    componentList: {
      type: Array,
      default: () => [],
    },
    // 教材背景
    bookBackground: {
      type: String,
      default: '',
    },
  },
  data() {
    const processHtmlString = this.processHtmlString;
    const cList = this.componentList || [];
    cList.forEach((x) => {
      if (x.component_type === 'audio') {
        let _c = JSON.parse(x.content);
        let p = _c.property || {};
        if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
        if (p.view_method === 'independent' && !p.style_mode) {
          p.style_mode = 'middle';
        }
        if (!p.style_mode) p.style_mode = 'big';
        if (p.view_method === 'icon') {
          p.file_name_display_mode = 'false';
          p.view_method = 'independent';
          p.style_mode = 'small';
        }

        x.content = JSON.stringify(_c);
      } else if (x.component_type === 'richtext') {
        if (!processHtmlString) return;
        let _c = JSON.parse(x.content);
        let p = _c.property || {};
        let lev = Number(p.title_style_level);
        if (p.is_title !== 'true' || lev < 1 || !_c.content) return;

        let style = this.title_list.find((y) => y.level === lev) || {};
        if (style && style.style) {
          style = JSON.parse(style.style);
          let c_text = _c.content;

          const parser = new DOMParser();
          const doc = parser.parseFromString(c_text, 'text/html');
          const body = doc.body;
          const pElements = body.querySelectorAll('p');
          processHtmlString(pElements, style);
          _c.content = body.innerHTML;

          x.content = JSON.stringify(_c);
        }
      }
    });

    return {
      background: this.bookBackground.length > 0 ? JSON.parse(this.bookBackground) : {},
      groupRowList: this.contentGroupRowList.length > 0 ? JSON.parse(this.contentGroupRowList) : [],
      data: this.content.length > 0 ? JSON.parse(this.content) : { row_list: [] },
      cList,
      curSelectId: this.id,
      isTrue,
      sidebarShow: true,
      project: {
        editor: '', // 作者
        cover_image_file_id: null, // 封面图片ID
        cover_image_file_url: '', // 封面图片URL
      },
      title_list: [],
      node_list: [],
      permissionControl: {
        can_answer: true, // 可作答
        can_judge_correct: false, // 可判断对错（客观题）
        can_show_answer: false, // 可查看答案
        can_correct: false, // 可批改
        can_check_correct: false, // 可查看批改
      },
      popoverShow: false,
      is_can_edit: 'false', // 是否可以编辑
    };
  },
  computed: {
    computedCommonPreviewStyle() {
      return buildCoursewareStyle(this.background, 'commonPreview');
    },
  },
  methods: {
    backTop() {
      this.$refs.previewMain.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    },

    convertText(text) {
      return text;
    },

    processHtmlString(pElements, styleConfig, isClear = false) {
      const _pElements = pElements || [];
      _pElements.forEach((pElement) => {
        if (pElement.innerHTML !== '<br data-mce-bogus="1">') {
          pElement.innerHTML = pElement.innerText;
        }
        if (isClear) {
          pElement.removeAttribute('style');
          pElement.removeAttribute('data-mce-style');
        } else {
          const style = pElement.style;

          if (styleConfig.font) style.fontFamily = styleConfig.font;
          if (styleConfig.font_size) style.fontSize = styleConfig.font_size;
          if (styleConfig.text_color) style.color = styleConfig.text_color;

          style.fontWeight = styleConfig.bold === 'true' ? 'bold' : 'normal';
          style.fontStyle = styleConfig.italic === 'true' ? 'italic' : 'normal';
          if (styleConfig.indent || styleConfig.indent === 0) style.marginLeft = `${styleConfig.indent}px`;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

$total-width: $courseware-width + $courseware-left-margin + $courseware-right-margin;

.common-preview {
  .main-container {
    position: relative;
    flex: 1;
    min-width: 1110px;
    padding: 15px 0;
    overflow: auto;
    background-color: #ececec;

    .catalogue-bar {
      position: absolute;
      top: 15px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      margin: -9px 6px 0 240px;
      cursor: pointer;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);
    }

    .sidebar-bar {
      position: absolute;
      top: 0;
      right: 240px;
      display: flex;
      width: 60px;
      height: calc(100vh - 166px);

      .toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        height: 100%;

        img {
          cursor: pointer;
        }

        &-special {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          align-items: center;
          width: 100%;
          margin-bottom: 24px;
          background-color: #fff;

          img {
            width: 36px;
            height: 36px;
          }
        }
      }
    }
  }

  .back-top {
    position: absolute;
    right: 240px;
    bottom: 0;
    display: flex;
    place-content: center center;
    align-items: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-color: #fff;
  }

  main.preview-main {
    display: flex;
    flex: 1;
    width: calc($total-width);
    min-width: calc($total-width);
    max-width: calc($total-width);
    min-height: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 40%);

    .preview-left {
      width: $courseware-left-margin;
      min-width: $courseware-left-margin;
      max-width: $courseware-left-margin;
      background-color: $courseware-bgColor;
    }

    .preview-right {
      width: $courseware-right-margin;
      min-width: $courseware-right-margin;
      max-width: $courseware-right-margin;
      background-color: $courseware-bgColor;
    }

    &.no-audit {
      margin: 0 auto;
    }
  }

  .audit-content {
    display: flex;
    min-width: 1810px;
    height: calc(100vh - 166px);

    &_org {
      height: calc(100vh - 126px);
    }

    .left-menu {
      display: flex;
      flex-direction: column;
      width: $catalogue-width;
      font-family: 'Microsoft YaHei', 'Arial', sans-serif;
      background-color: #fff;

      .courseware-info {
        display: flex;
        column-gap: 18px;
        width: 100%;
        height: 186px;
        padding: 6px 6px 24px;
        border-bottom: $border;

        .cover-image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 111px;
          height: 157px;
          background-color: rgba(229, 229, 229, 100%);

          img {
            max-width: 111px;
            max-height: 157px;
          }
        }

        .info-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .catalogue-icon {
            text-align: right;

            .svg-icon {
              cursor: pointer;
            }
          }

          .courseware {
            width: 159px;
            height: 64px;
            font-size: 16px;

            .name {
              font-weight: bold;
            }

            .editor {
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
              white-space: normal;
              -webkit-line-clamp: 2; /* 多行省略行数，按需调整 */
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }

    .sidebar {
      position: relative;
      display: flex;
      width: $sidebar-width;

      .toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60px;
        height: 100%;
        background-color: rgba(247, 248, 250, 100%);

        img {
          cursor: pointer;
        }

        &-special {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          margin-bottom: 24px;
        }

        &-list {
          display: flex;
          flex-direction: column;
          row-gap: 16px;
          align-items: center;
          width: 100%;

          .sidebar-item {
            width: 100%;
            text-align: center;

            .sidebar-icon {
              width: 36px;
              height: 36px;
              cursor: pointer;
            }

            &.active {
              background-color: #4095e5;
            }
          }
        }
      }

      .content {
        flex: 1;
        background-color: #fff;

        .resource_box {
          height: 100%;
          overflow-y: auto;
          border: 1px solid #e5e5e5;

          h5 {
            position: fixed;
            z-index: 999;
            width: 240px;
            padding: 0 5px;
            margin: 0;
            font-size: 18px;
            line-height: 40px;
            background: #f2f3f5;
          }

          .scroll-container {
            display: flex;
            flex-direction: column;
            row-gap: 8px;
            margin: 6px;

            .list-item {
              display: flex;
              align-items: center;
              cursor: pointer;
              border: 1px solid #ccc;
              border-radius: 8px;

              :deep .el-slider {
                .el-slider__runway {
                  background-color: #eee;
                }
              }

              .el-image {
                display: flex;
                width: 100%;
                min-width: 100%;
                height: 90px;
                background-color: #ccc;
                border-radius: 8px;
              }

              .video-play {
                width: 100%;
                min-width: 100%;
              }

              .text-box {
                word-break: break-word;
              }
            }
          }

          p {
            color: #999;
            text-align: center;
          }

          .card-box li {
            padding: 10px;
            border-bottom: 1px solid #ccc;

            .el-icon-notebook-2 {
              display: block;
              margin-bottom: 4px;
              font-size: 12px;
              color: grey;
            }
          }
        }
      }

      .back-top {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        place-content: center center;
        align-items: center;
        width: 60px;
        height: 60px;
        cursor: pointer;
      }
    }
  }
}

:deep .scroll-container .audio-wrapper {
  width: 100% !important;

  .audio-middle {
    width: 100% !important;
    padding: 6px 8px !important;
    border: none;
    border-radius: 8px;

    .audio-name {
      text-align: left;
    }

    .slider-area {
      column-gap: 8px !important;
    }

    :deep .remark-dialog {
      .el-dialog__body {
        padding: 5px 20px;
      }
    }

    :deep .audit-dialog {
      .el-dialog__body {
        height: calc(100vh - 260px);
        padding: 5px 20px;
      }

      .mind-map-container .mind-map {
        height: calc(100vh - 310px);
      }
    }
  }
}

.mt10 {
  margin: 10px 0 0 !important;
  background-color: #eee;
}

.courseware-tree {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 8px;
  max-height: calc(100vh - 200px);
  overflow: auto;

  .menu-item {
    display: flex;
    align-items: center;

    &:not(.courseware) {
      font-weight: bold;
    }

    &.courseware {
      &:hover {
        .name {
          background-color: #f3f3f3;
        }
      }
    }

    .svg-icon {
      margin-left: 4px;

      &.my-edit-task {
        color: $right-color;
      }
    }

    .name {
      flex: 1;
      padding: 4px 8px 4px 4px;
      border-radius: 4px;
    }

    &.active {
      .name {
        font-weight: bold;
        color: #4095e5;
      }
    }
  }
}
</style>

<style lang="scss">
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>