eep_page/packages/BookEep.vue

<template>
  <div class="common-preview" :class="{ 'is-mobile': isMobile }">
    <div class="audit-content">
      <div ref="previewMain" class="main-container">
        <main :class="['preview-main', 'no-audit']" :style="computedCommonPreviewStyle">
          <div
            v-if="!isMobile"
            class="preview-left"
            :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"
          ></div>
          <CoursewarePreview
            v-if="!isMobile"
            ref="courseware"
            :is-show-group="isShowGroup"
            :group-show-all="groupShowAll"
            :group-row-list="groupRowList"
            :row-checked-list="rowCheckedList"
            :data="data"
            :courseware-id="curSelectId"
            :component-list="cList"
            :background="background"
            :can-remark="false"
            :show-remark="false"
            :component-remark-obj="{}"
            :project="project"
            :is-mobile="isMobile"
            @editNote="handEditNote"
            @saveCollect="saveCollect"
            @getTranslate="getTranslate"
          />
          <MobileCoursewarePreview
            v-else
            ref="mobileCourseware"
            :is-show-group="isShowGroup"
            :group-show-all="groupShowAll"
            :group-row-list="groupRowList"
            :row-checked-list="rowCheckedList"
            :data="data"
            :courseware-id="curSelectId"
            :component-list="cList"
            :background="background"
            :can-remark="false"
            :show-remark="false"
            :component-remark-obj="{}"
            :project="project"
            :is-mobile="isMobile"
            @editNote="handEditNote"
            @saveCollect="saveCollect"
            @getTranslate="getTranslate"
          />
          <div
            v-if="!isMobile"
            class="preview-right"
            :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"
          ></div>
        </main>
      </div>
    </div>

    <ExplanatoryNoteDialog
      ref="explanatoryNote"
      :open.sync="editDialogOpen"
      :init-data="oldRichData"
      :title-text="dialogTitleText"
      :modal="false"
      @confirm="dialogSave"
      @cancel="dialogCancel"
    />

    <TranslateDialog
      :open.sync="showTranslate"
      :modal="false"
      :init-text="translateText"
      :book-id="id"
      title-text="翻译 (机器翻译)"
    />
  </div>
</template>

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

import { isTrue } from '@/utils/validate';
import { buildCoursewareStyle } from '@/views/book/courseware/preview/common/utils/coursewareStyle';
import { updateBaseURL } from '@/utils/http';
import {
  GetMyNoteList,
  AddMyCollect,
  GetMyCollectList,
  DeleteMyNote,
  UpdateMyNote,
  AddMyNote,
  AddCoursewareFeedback,
  DeleteCoursewareFeedback,
  GetCoursewareFeedbackList,
} from '@/api/book';
import { ensureExtendedFonts } from '@/common/data';

const defaultBc = {
  background_image_url: '',
  background_position: {
    left: 0,
    top: 0,
  },
  background: {},
};

export default {
  name: 'BookEep',
  components: {
    CoursewarePreview,
    ExplanatoryNoteDialog,
    TranslateDialog,
    MobileCoursewarePreview,
  },
  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: '',
    },
    permissControl: {
      type: Object,
      default: () => ({}),
    },
    // 外部传入组件用户答案，JSON 格式字符串
    componentUserAnswer: {
      type: String,
      default: '',
    },
    isShowGroup: {
      type: Boolean,
      default: false,
    },
    rowChecked: {
      type: String,
      default: '{}',
    },
  },
  data() {
    const isMobile = /android|iphone|ipad|ipod/i.test(navigator.userAgent || navigator.vendor || window.opera);

    return {
      background: this.bookBackground.length > 0 ? JSON.parse(this.bookBackground) : defaultBc,
      groupRowList: this.contentGroupRowList.length > 0 ? JSON.parse(this.contentGroupRowList) : [],
      data: this.content.length > 0 ? JSON.parse(this.content) : { row_list: [] },
      cList: this.handleComponentList(),
      curSelectId: this.id,
      isTrue,
      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', // 是否可以编辑
      allCollectList: [],
      newSelectedInfo: {}, // 新的选中信息
      allNoteList: [],
      oldRichData: {},
      editDialogOpen: false,
      dialogType: 0,
      lang: 'ZH',
      chinese: 'zh-Hans',
      showPinYin: 'false',
      langList: [],
      showTranslate: false,
      translateText: '',
      selectedInfo: null,
      allFeedbackList: [],
      drawerType: 1,
      isMobile,
      groupShowAll: false, // 是否显示全部分组内容
    };
  },
  computed: {
    computedCommonPreviewStyle() {
      return buildCoursewareStyle(this.background, 'commonPreview');
    },
    dialogTitleText() {
      if (this.dialogType === 2) return '反馈';
      return '笔记';
    },
    rowCheckedList() {
      const _rowChecked = this.rowChecked === '[]' ? '{}' : this.rowChecked;
      return _rowChecked ? JSON.parse(_rowChecked) : {};
    },
  },
  watch: {
    componentList: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.cList = this.handleComponentList();
          this.applyComponentUserAnswer();
        }
      },
      deep: true,
    },
    bookBackground: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.background = JSON.parse(newVal);
        } else {
          this.background = defaultBc;
        }
      },
    },
    content: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.data = JSON.parse(newVal);
        }
      },
    },
    contentGroupRowList: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.groupRowList = JSON.parse(newVal);
        }
      },
    },
    id: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.curSelectId = newVal;
        }
      },
    },
    permissControl: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.permissionControl = newVal;
        }
      },
      deep: true,
      immediate: true,
    },
    componentUserAnswer: {
      handler() {
        this.applyComponentUserAnswer();
      },
      deep: true,
      immediate: true,
    },
    rowCheckedList: {
      handler(val) {
        this.groupShowAll = Object.keys(val).length === 0;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    const origin = window.location.origin;
    if (origin && origin.indexOf('localhost') === -1) {
      updateBaseURL(`${origin}/`);
    }
  },
  mounted() {
    this.applyComponentUserAnswer();
    // 自动注册扩展字体（惰性加载，与主应用共享 _extendedFontsLoaded 标记，仅首次请求）
    ensureExtendedFonts();
  },
  methods: {
    /**
     * 获取当前实际渲染的课件预览组件
     * 桌面端为 CoursewarePreview(ref=courseware)，移动端为 MobileCoursewarePreview(ref=mobileCourseware)
     * @returns {Object|null} 课件预览组件实例
     */
    getActiveCoursewareComponent() {
      return this.isMobile ? this.$refs.mobileCourseware : this.$refs.courseware;
    },
    /**
     * 获取当前课件内全部子 preview 组件实例（桌面与移动端均为 $refs.preview）
     * @returns {Array} preview 组件实例列表
     */
    getActivePreviewList() {
      const cw = this.getActiveCoursewareComponent();
      return (cw && cw.$refs && cw.$refs.preview) || [];
    },
    backTop() {
      this.$refs.previewMain.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    },

    convertText(text) {
      return text;
    },

    handleComponentList() {
      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 cList;
    },

    /**
     * 获取所有组件的用户答案，供 UI 包使用者通过 ref 调用
     * @returns {Object} 以组件 id 为键的答案映射
     */
    getAllComponentUserAnswer() {
      const previewList = this.getActivePreviewList();
      const answerMap = {};

      previewList.forEach((item) => {
        const id = item?.$el?.dataset?.id;
        if (!id || typeof item.getAnswer !== 'function') return;
        answerMap[id] = item.getAnswer();
      });

      const obj = {
        duration: 0,
        count_not_done: 0,
        count_right: 0,
        count_error: 0,
        content: JSON.stringify(answerMap),
      };

      return JSON.stringify(obj);
    },

    /**
     * 将外部传入的用户答案回填到组件
     */
    applyComponentUserAnswer() {
      if (!this.componentUserAnswer || this.componentUserAnswer.length === 0) return;
      this.$nextTick(() => {
        const previewList = this.getActivePreviewList();
        if (!previewList.length) return;

        const answerMap = JSON.parse(this.componentUserAnswer || '{}');
        if (!answerMap || Object.keys(answerMap).length === 0) return;

        previewList.forEach((item) => {
          const id = item?.$el?.dataset?.id;
          if (!id || typeof item.showAnswer !== 'function') return;
          if (!Object.hasOwn(answerMap, id)) return;

          item.showAnswer(true, true, answerMap[id], true);
        });
      });
    },

    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`;
        }
      });
    },

    /**
     * 获取收藏列表
     * @param {Object} params - 参数对象
     * @param {number} params.type - 收藏类型（可选）
     */
    async getCollect(params) {
      if (params && params.type) this.drawerType = Number(params.type);
      this.allCollectList = [];
      await GetMyCollectList({ courseware_id: this.curSelectId }).then((res) => {
        if (res.status === 1) {
          res.collect_list.forEach((x) => {
            if (x.collect_desc) {
              let n = JSON.parse(x.collect_desc);
              let obj = {
                coursewareId: x.courseware_id,
                id: x.id,
                blockId: n.blockId,
                startIndex: n.startIndex,
                endIndex: n.endIndex,
                text: n.text,
              };
              this.allCollectList.push(obj);
            }
          });
        }
      });
    },
    /**
     * 保存收藏
     * @param {Object} collect - 收藏信息对象
     * @param {string} collect.coursewareId - 课件 ID
     * @param {string} collect.blockId - 区块 ID
     * @param {number} collect.startIndex - 起始索引
     * @param {number} collect.endIndex - 结束索引
     * @param {string} collect.text - 收藏文本
     */
    async saveCollect(collect) {
      if (this.allCollectList.length === 0) {
        await this.getCollect();
      }

      let old = this.allCollectList.find(
        (x) =>
          x.coursewareId === collect.coursewareId &&
          x.blockId === collect.blockId &&
          x.startIndex === collect.startIndex &&
          x.endIndex === collect.endIndex,
      );
      if (old) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: "<i class='el-icon-check' />已收藏",
        });
        return;
      }
      this.newSelectedInfo = collect;
      let collectInfo = {
        blockId: this.newSelectedInfo.blockId,
        startIndex: this.newSelectedInfo.startIndex,
        endIndex: this.newSelectedInfo.endIndex,
        text: this.newSelectedInfo.text,
      };

      let reqData = {
        courseware_id: this.newSelectedInfo.coursewareId, // 课件 ID
        component_id: 'WHOLE',
        collect_desc: JSON.stringify(collectInfo), // 位置描述
      };
      AddMyCollect(reqData)
        .then(() => {
          this.getCollect();
        })
        .then(() => {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: "<i class='el-icon-check' />已收藏",
          });
        });
    },
    /**
     * 获取笔记列表
     * @param {Object} params - 参数对象
     */
    async getNote(params) {
      if (params && params.type) this.drawerType = Number(params.type);
      this.allNoteList = [];
      await GetMyNoteList({ courseware_id: this.curSelectId }).then((res) => {
        if (res.status === 1) {
          res.note_list.forEach((x) => {
            if (x.note_desc) {
              let n = JSON.parse(x.note_desc);
              let obj = {
                coursewareId: x.courseware_id,
                id: x.id,
                blockId: n.blockId,
                startIndex: n.startIndex,
                endIndex: n.endIndex,
                text: n.text,
                note: this.addImageMaxWidth(n.note),
              };
              this.allNoteList.push(obj);
            }
          });
        }
      });
    },
    async handEditNote(note) {
      this.oldRichData = {};
      if (this.allNoteList.length === 0) {
        await this.getNote();
      }
      let old = this.allNoteList.find(
        (x) =>
          x.coursewareId === note.coursewareId &&
          x.blockId === note.blockId &&
          x.startIndex === note.startIndex &&
          x.endIndex === note.endIndex,
      );
      if (old) {
        this.oldRichData = old;
        this.oldRichData.dataStr = old.note;
      }
      this.newSelectedInfo = note;
      this.editDialogOpen = true;
      this.dialogType = 1;
    },
    /**
     * 获取翻译
     * @param {Object} info - 翻译信息对象
     * @param {string} info.text - 需要翻译的文本
     */
    async getTranslate(info) {
      this.showTranslate = true;
      this.translateText = info.text;
    },
    dialogSave(obj) {
      if (this.dialogType === 1) return this.saveNote(obj);
      if (this.dialogType === 2) return this.saveFeedback(obj);
    },
    dialogCancel(id) {
      if (this.dialogType === 1) return this.delNote(id);
      if (this.dialogType === 2) return this.delFeedback(id);
    },
    /**
     * 保存笔记
     * @param {Object} note - 笔记信息对象
     * @param {string} note.dataStr - 笔记内容
     */
    saveNote(note) {
      let noteInfo = {
        blockId: this.newSelectedInfo.blockId,
        startIndex: this.newSelectedInfo.startIndex,
        endIndex: this.newSelectedInfo.endIndex,
        note: note.dataStr,
        text: this.newSelectedInfo.text,
      };

      let reqData = {
        courseware_id: this.newSelectedInfo.coursewareId, // 课件 ID
        component_id: 'WHOLE',
        note_desc: JSON.stringify(noteInfo), // 位置描述
      };
      if (note.id) {
        if (!noteInfo.note) {
          this.delNote(note.id);
          return;
        }
        let upDate = {
          id: note.id,
          note_desc: reqData.note_desc,
        };
        UpdateMyNote(upDate).then(() => {
          this.getNote();
        });
      } else {
        AddMyNote(reqData).then(() => {
          this.getNote();
        });
      }
      this.editDialogOpen = false;
      this.newSelectedInfo = null;
      this.selectedInfo = null;
    },
    delNote(id) {
      const noteId = id || (this.oldRichData && this.oldRichData.id);
      if (!noteId) return;
      DeleteMyNote({ id: noteId }).then(() => {
        this.allNoteList = this.allNoteList.filter((x) => x.id !== noteId);
      });
    },

    saveFeedback(feedBack) {
      if (feedBack.id) {
        this.delFeedback(feedBack.id);
      }

      if (feedBack.dataStr) {
        let feedBackInfo = {
          blockId: this.newSelectedInfo.blockId,
          startIndex: this.newSelectedInfo.startIndex,
          endIndex: this.newSelectedInfo.endIndex,
          feedBack: feedBack.dataStr,
          text: this.newSelectedInfo.text,
        };

        let reqData = {
          courseware_id: this.newSelectedInfo.coursewareId, // 课件 ID
          component_id: 'WHOLE',
          content: JSON.stringify(feedBackInfo),
          content_select: this.newSelectedInfo.text,
        };

        AddCoursewareFeedback(reqData).then(() => {
          this.getFeedback();
        });
      }
      this.editDialogOpen = false;
      this.newSelectedInfo = null;
      this.selectedInfo = null;
    },
    delFeedback(id) {
      const feedBackId = id || (this.oldRichData && this.oldRichData.id);
      if (!feedBackId) return;
      DeleteCoursewareFeedback({ id: feedBackId })
        .then(() => {
          this.allFeedbackList = this.allFeedbackList.filter((x) => x.id !== feedBackId);
        })
        .catch(() => {});
    },
    /**
     * 为HTML内容中的图片添加最大宽度限制
     * @param {string} html - HTML字符串
     * @returns {string} - 处理后的HTML字符串
     */
    addImageMaxWidth(html) {
      if (!html) return html;

      const regex = /<img([^>]*)>/gi;
      return html.replace(regex, (match, attributes) => {
        if (attributes.includes('style=')) {
          return match.replace(/style=["']([^"']*)["']/i, (styleMatch, styleValue) => {
            if (styleValue.includes('max-width')) {
              return styleMatch;
            }
            return `style="${styleValue}; max-width: 200px;"`;
          });
        }
        return `<img${attributes} style="max-width: 200px;">`;
      });
    },
    async getFeedback(params) {
      if (params && params.type) this.drawerType = Number(params.type);
      this.allFeedbackList = [];
      await GetCoursewareFeedbackList({ courseware_id: this.curSelectId }).then((res) => {
        if (res.status === 1 && res.feedback_list) {
          res.feedback_list.forEach((x) => {
            if (x.content) {
              let n = JSON.parse(x.content);
              let obj = {
                coursewareId: x.courseware_id,
                id: x.id,
                blockId: n.blockId,
                startIndex: n.startIndex,
                endIndex: n.endIndex,
                text: n.text,
                feedBack: this.addImageMaxWidth(n.feedBack),
              };
              this.allFeedbackList.push(obj);
            }
          });
        }
      });
    },
    submitPreviewGroupId() {
      const cw = this.getActiveCoursewareComponent();
      return JSON.stringify((cw && cw.rowCheckList) || {});
    },
  },
};
</script>

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

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

.common-preview {
  min-width: calc($total-width);

  // 移动端适配
  &.is-mobile {
    min-width: 100%;

    .main-container {
      min-width: 100%;
    }

    .audit-content {
      min-width: 100%;
    }

    main.preview-main {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }
  }

  .main-container {
    position: relative;
    flex: 1;
    min-width: 1110px;
    padding: 15px;
    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;
    }

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

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

  .audit-content {
    display: flex;
    min-width: calc($total-width);

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