eep_page/src/components/CommonPreview.vue

<template>
  <div class="common-preview">
    <div class="common-preview__header">
      <div class="courseware">
        <span class="flow-nodename">{{ courseware_info.cur_audit_flow_node_name }}</span>
        <slot name="middle" :courseware="courseware_info"></slot>
        <div class="group">
          <el-checkbox v-model="isShowGroup">显示分组</el-checkbox>
          <el-checkbox v-model="groupShowAll">分组显示全部</el-checkbox>
          <el-checkbox v-model="isJudgeCorrect">判断对错</el-checkbox>
          <el-checkbox v-model="isShowAnswer" :disabled="!isJudgeCorrect">显示答案</el-checkbox>
        </div>
        <span class="link">
          <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
            <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
          </el-select>
        </span>
        <div class="operator">
          <slot name="operator" :courseware="courseware_info" :project-id="projectId"></slot>
        </div>
      </div>
    </div>

    <div class="audit-content">
      <!-- 左侧菜单栏  -->
      <aside v-if="navigationShow" class="left-menu">
        <div class="courseware-info">
          <div class="cover-image">
            <img v-if="project.cover_image_file_url.length > 0" :src="project.cover_image_file_url" alt="cover-image" />
          </div>
          <div class="info-content">
            <div class="catalogue-icon" @click="toggleNavigationShow">
              <SvgIcon icon-class="catalogue" size="54" />
            </div>
            <div class="courseware">
              <div class="name nowrap-ellipsis" :title="courseware_info.book_name">
                {{ courseware_info.book_name }}
              </div>
              <div class="editor" :title="project.editor">
                {{ project.editor }}
              </div>
            </div>
          </div>
        </div>
        <!-- 教材章节树 -->
        <div class="courseware-tree">
          <div
            v-for="{ id: nodeId, name, deep, is_leaf_chapter } in node_list"
            :key="nodeId"
            :class="['menu-item', { active: curSelectId === nodeId }, { courseware: isTrue(is_leaf_chapter) }]"
            :style="computedNameStyle(deep, isTrue(is_leaf_chapter))"
            @click="selectChapterNode(nodeId, isTrue(is_leaf_chapter))"
          >
            <span class="name nowrap-ellipsis" :title="name">
              {{ name }}
            </span>
          </div>
        </div>
      </aside>

      <div
        ref="previewMain"
        class="main-container"
        :style="{ paddingLeft: navigationShow ? '15px' : '315px', paddingRight: sidebarShow ? '15px' : '315px' }"
      >
        <!-- 左侧菜单栏 - 收缩 -->
        <div v-if="!navigationShow" class="catalogue-bar" @click="toggleNavigationShow">
          <SvgIcon icon-class="catalogue" size="54" />
        </div>

        <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
          <div class="preview-left"></div>
          <CoursewarePreview
            v-if="courseware_info.book_name"
            ref="courserware"
            :is-show-group="isShowGroup"
            :group-show-all="groupShowAll"
            :group-row-list="content_group_row_list"
            :data="data"
            :component-list="component_list"
            :background="background"
            :can-remark="isTrue(courseware_info.is_my_audit_task) && isTrue(courseware_info.is_can_add_audit_remark)"
            :show-remark="isShowAudit"
            :component-remark-obj="remark_list_obj"
            :project="project"
            @computeScroll="computeScroll"
            @addRemark="addRemark"
          />
          <div class="preview-right"></div>
        </main>

        <!-- 右侧菜单栏 - 收缩 -->
        <aside v-if="!sidebarShow" class="sidebar-bar">
          <aside class="toolbar">
            <div class="toolbar-special">
              <!-- <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" />
              <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" /> -->
              <img :src="require(`@/assets/icon/arrow-down.png`)" alt="伸缩" @click="toggleSidebarShow" />
            </div>
          </aside>
        </aside>
      </div>
      <div v-if="!sidebarShow" class="back-top" @click="backTop">
        <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
      </div>

      <!-- 右侧工具栏 -->
      <aside v-if="sidebarShow" ref="sidebarMenu" class="sidebar">
        <aside class="toolbar">
          <div class="toolbar-special">
            <!-- <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" />
            <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" /> -->
          </div>
          <div v-if="sidebarShow" class="toolbar-list">
            <div
              v-for="{ icon, title, handle, param } in sidebarIconList"
              :key="icon"
              :class="['sidebar-item', { active: curToolbarIcon === icon }]"
              :title="title"
              @click="handleSidebarClick(handle, param, icon)"
            >
              <div
                class="sidebar-icon icon-mask"
                :style="{
                  backgroundColor: curToolbarIcon === icon ? '#fff' : '#1E2129',
                  maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.png`)})`,
                }"
              ></div>
            </div>
          </div>
          <div class="adjustable" @click="toggleSidebarShow">
            <img :src="require(`@/assets/icon/arrow-up.png`)" alt="伸缩" />
          </div>
        </aside>
        <div class="content">
          <template v-if="curToolbarIcon === 'audit'">
            <AuditRemark :remark-list="remark_list" :is-audit="isShowAudit" @deleteRemarks="deleteRemarks" />
          </template>
          <el-drawer
            custom-class="custom-drawer"
            :visible="drawerType.length > 0"
            :with-header="false"
            :modal="false"
            size="240"
            direction="ltr"
            :style="drawerStyle"
          >
            <div class="infinite-list-wrapper">
              <h5>{{ drawerTitle }}</h5>
              <ul
                v-infinite-scroll="loadMore"
                class="scroll-container"
                infinite-scroll-disabled="disabled"
                :infinite-scroll-immediate="false"
              >
                <li
                  v-for="(item, index) in file_list"
                  :key="index"
                  class="list-item"
                  @click="handleFileClick(item?.courseware_id, item?.component_id)"
                >
                  <template v-if="parseInt(drawerType) === 0">
                    <el-image :src="item.file_url" fit="contain" />
                    <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
                  </template>
                  <template v-else-if="parseInt(drawerType) === 1">
                    <AudioPlay
                      view-size="middle"
                      :file-id="item.file_id"
                      :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
                      :show-slider="true"
                      :audio-index="index"
                    />
                  </template>
                  <template v-else-if="parseInt(drawerType) === 2">
                    <VideoPlay view-size="small" :file-id="item.file_id" :video-index="index" />
                    <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
                  </template>
                </li>
              </ul>
              <p v-if="loading">加载中...</p>
              <p v-if="noMore">没有更多了</p>
            </div>
          </el-drawer>
        </div>

        <div class="back-top" @click="backTop">
          <img :src="require(`@/assets/icon/back-top.png`)" alt="返回顶部" />
        </div>
      </aside>
    </div>

    <el-dialog
      title="添加课件审校批注"
      :visible="visible"
      width="680px"
      :close-on-click-modal="false"
      class="remark-dialog"
      @close="dialogClose('')"
    >
      <RichText
        v-model="remark_content"
        toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
        :wordlimit-num="false"
        :height="240"
        page-from="audit"
      />
      <div slot="footer">
        <el-button @click="dialogClose('')">取消</el-button>
        <el-button type="primary" :loading="submit_loading" @click="addCoursewareAuditRemark(select_node)">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="" :visible="visibleMindMap" width="1100px" class="audit-dialog" @close="dialogClose('MindMap')">
      <MindMap
        v-if="isChildDataLoad"
        ref="mindMapRef"
        :project-id="projectId"
        :mind-map-json-data="mindMapJsonData"
        @child-click="handleNodeClick"
      />
    </el-dialog>
  </div>
</template>

<script>
import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
import RichText from '@/components/RichText.vue';
import { isTrue } from '@/utils/validate';
import MindMap from '@/components/MindMap.vue';
import VideoPlay from '@/views/book/courseware/preview/components/common/VideoPlay.vue';
import AudioPlay from '@/views/book/courseware/preview/components/common/AudioPlay.vue';
import AuditRemark from '@/components/AuditRemark.vue';
import * as OpenCC from 'opencc-js';

import {
  GetBookCoursewareInfo,
  GetProjectBaseInfo,
  GetCoursewareAuditRemarkList,
  AddCoursewareAuditRemark,
  DeleteCoursewareAuditRemarkList,
  GetProjectInfo,
} from '@/api/project';
import {
  ContentGetCoursewareContent_View,
  ChapterGetBookChapterStructExpandList,
  GetBookBaseInfo,
  MangerGetBookMindMap,
  PageQueryBookResourceList,
  GetLanguageTypeList,
  GetBookUnifiedAttrib,
} from '@/api/book';

export default {
  name: 'CommonPreview',
  components: {
    CoursewarePreview,
    RichText,
    MindMap,
    AudioPlay,
    VideoPlay,
    AuditRemark,
  },
  provide() {
    return {
      getLang: () => this.lang,
      getChinese: () => this.chinese,
      getLangList: () => this.langList,
      convertText: this.convertText,
    };
  },
  props: {
    projectId: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    // 是否是审校页面
    isAudit: {
      type: Boolean,
      default: false,
    },
    isShowAudit: {
      type: Boolean,
      default: true,
    },
    isBook: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const sidebarIconList = [
      // { icon: 'search', title: '搜索', handle: '', param: {} },
      { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
      // { icon: 'knowledge', title: '知识图谱', handle: '', param: {} },
      // { icon: 'totalResources', title: '总资源', handle: '', param: {} },
      // { icon: 'collect', title: '收藏', handle: '', param: {} },
      { icon: 'audio', title: '音频', handle: 'openDrawer', param: { type: '1' } },
      { icon: 'image', title: '图片', handle: 'openDrawer', param: { type: '0' } },
      { icon: 'video', title: '视频', handle: 'openDrawer', param: { type: '2' } },
      // { icon: 'note', title: '笔记', handle: '', param: {} },
      // { icon: 'translate', title: '翻译', handle: '', param: {} },
      // { icon: 'setting', title: '设置', handle: '', param: {} },
    ];

    if (this.isShowAudit) {
      sidebarIconList.push({ icon: 'audit', title: '审校批注', handle: 'openAudit', param: {} });
    }

    return {
      select_node: this.id,
      courseware_info: {
        book_name: '',
        is_can_start_edit: 'false',
        is_can_submit_audit: 'false',
        is_can_audit_pass: 'false',
        is_can_audit_reject: 'false',
        is_can_add_audit_remark: 'false',
        is_can_finish_audit: 'false',
        is_can_request_shangjia_book: 'false',
        is_can_request_rollback_project: 'false',
        is_can_shangjia_book: 'false',
        is_can_rollback_project: 'false',
      },
      background: {
        background_image_url: '',
        background_position: {
          left: 0,
          top: 0,
        },
      },
      node_list: [],
      data: { row_list: [] },
      component_list: [],
      content_group_row_list: [],
      remark_list: [],
      remark_list_obj: {}, // 存放以组件为对象的数组
      visible: false,
      remark_content: '',
      submit_loading: false,
      isTrue,
      menuPosition: {
        x: -1,
        y: -1,
        componentId: 'WHOLE',
      },
      curToolbarIcon: this.isShowAudit ? 'audit' : '',
      sidebarIconList,
      visibleMindMap: false,
      isChildDataLoad: false,
      mindMapJsonData: {}, // 思维导图json数据
      drawerType: '', // 抽屉类型
      drawerStyle: {
        top: '0',
        height: '0',
        right: '0',
      },
      page_capacity: 10,
      cur_page: 1,
      file_list: [],
      total_count: 0,
      loading: true,
      lastLoadTime: 0,
      minLoadInterval: 3 * 1000,
      isShowGroup: false,
      groupShowAll: true,
      opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
      langList: [],
      lang: 'ZH',
      chinese: 'zh-Hans',
      isJudgeCorrect: false,
      isShowAnswer: false,
      unified_attrib: {},
      curSelectId: this.id,
      navigationShow: true,
      sidebarShow: true,
      project: {
        editor: '', // 作者
        cover_image_file_id: null, // 封面图片ID
        cover_image_file_url: '', // 封面图片URL
      },
    };
  },
  computed: {
    disabled() {
      const result = this.loading || this.noMore;
      return result;
    },
    noMore() {
      const result = this.file_list.length >= this.total_count;
      return result;
    },
    drawerTitle() {
      const titleMap = {
        0: '图片资源',
        1: '音频资源',
        2: '视频资源',
      };
      return titleMap[this.drawerType] || '资源列表';
    },
  },
  watch: {
    isJudgeCorrect(newVal) {
      if (!newVal) {
        this.isShowAnswer = false;
      }
      this.simulateAnswer(newVal);
    },
    isShowAnswer() {
      this.simulateAnswer();
    },
  },
  created() {
    if (this.id) {
      this.getBookCoursewareInfo(this.id);
      this.getCoursewareComponentContent_View(this.id);
      this.getCoursewareAuditRemarkList(this.id);
    } else {
      this.isBook ? this.getBookBaseInfo() : this.getProjectBaseInfo();
    }
    this.getBookChapterStructExpandList();
    this.getBookUnifiedAttr();
    if (!this.isBook) {
      this.getProjectInfo();
    }
  },
  mounted() {
    this.calcDrawerPosition();
  },
  methods: {
    getProjectBaseInfo() {
      GetProjectBaseInfo({ id: this.projectId }).then(({ project_info }) => {
        this.courseware_info = { ...project_info, book_name: project_info.name };
      });
    },

    getBookBaseInfo() {
      GetBookBaseInfo({ id: this.projectId }).then(({ book_info }) => {
        this.courseware_info = { ...this.courseware_info, ...book_info, book_name: book_info.name };
        this.project = {
          editor: book_info.editor,
          cover_image_file_id: book_info.cover_image_file_id,
          cover_image_file_url: book_info.cover_image_file_url,
        };
      });
    },

    getProjectInfo() {
      GetProjectInfo({ id: this.projectId }).then(({ project_info }) => {
        if (project_info.cover_image_file_url) {
          this.project = project_info;
        }
      });
    },

    /**
     * 得到教材课件信息
     * @param {string} id - 课件ID
     */
    getBookCoursewareInfo(id) {
      GetBookCoursewareInfo({ id, is_contain_producer: 'true', is_contain_auditor: 'true' }).then(
        ({ courseware_info }) => {
          this.courseware_info = { ...this.courseware_info, ...courseware_info };
          this.getLangList();
        },
      );
    },
    /**
     * 得到课件内容（展示内容）
     * @param {string} id - 课件ID
     */
    getCoursewareComponentContent_View(id) {
      ContentGetCoursewareContent_View({ id }).then(({ content, component_list, content_group_row_list }) => {
        if (content) {
          const _content = JSON.parse(content);
          this.data = _content;
          this.background = {
            background_image_url: _content.background_image_url,
            background_position: _content.background_position,
          };
        } else {
          this.data = { row_list: [] };
        }

        if (component_list) this.component_list = component_list;
        if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
      });
    },

    getLangList() {
      GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
        ({ language_type_list }) => {
          this.langList = language_type_list;
        },
      );
    },

    /**
     * 得到教材章节结构展开列表
     */
    getBookChapterStructExpandList() {
      ChapterGetBookChapterStructExpandList({
        book_id: this.projectId,
        node_deep_mode: 0,
        is_contain_producer: 'true',
        is_contain_auditor: 'true',
      }).then(({ node_list }) => {
        this.node_list = node_list;
      });
    },

    getBookUnifiedAttr() {
      GetBookUnifiedAttrib({ book_id: this.projectId }).then(({ content }) => {
        if (content) {
          this.unified_attrib = JSON.parse(content);
        }
      });
    },

    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     */
    selectNode(nodeId) {
      this.getCoursewareComponentContent_View(nodeId);
      this.getBookCoursewareInfo(nodeId);
      this.getCoursewareAuditRemarkList(nodeId);
      this.select_node = nodeId;
    },
    // 审校批注列表
    getCoursewareAuditRemarkList(id) {
      this.remark_list = [];
      GetCoursewareAuditRemarkList({
        courseware_id: id,
      }).then(({ remark_list }) => {
        this.remark_list = remark_list;
        if (!remark_list) return;

        this.remark_list_obj = remark_list.reduce((acc, item) => {
          if (!acc[item.component_id]) {
            acc[item.component_id] = [];
          }
          acc[item.component_id].push(item);
          return acc;
        }, {});
      });
    },
    addRemark(selectNode, x, y, componentId) {
      this.remark_content = '';
      this.visible = true;
      if (selectNode) {
        this.menuPosition = {
          x,
          y,
          componentId,
        };
      } else {
        this.menuPosition = {
          x: -1,
          y: -1,
          componentId: 'WHOLE',
        };
      }
    },
    dialogClose(type) {
      this[`visible${type}`] = false;
    },
    // 添加审校批注
    addCoursewareAuditRemark(id) {
      this.submit_loading = true;
      AddCoursewareAuditRemark({
        courseware_id: id || this.id,
        content: this.remark_content,
        component_id: this.menuPosition.componentId,
        position_x: this.menuPosition.x,
        position_y: this.menuPosition.y,
      })
        .then(() => {
          this.submit_loading = false;
          this.visible = false;
          this.getCoursewareAuditRemarkList(id || this.id);
        })
        .catch(() => {
          this.submit_loading = false;
        });
    },
    // 删除批注
    deleteRemarks(id) {
      this.$confirm('确定要删除此条批注吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteCoursewareAuditRemarkList({ id }).then(() => {
            this.getCoursewareAuditRemarkList(this.select_node ? this.select_node : this.id);
            this.$message.success('删除成功!');
          });
        })
        .catch(() => {});
    },
    // 计算previewMain滑动距离
    computeScroll() {
      this.$refs.courserware.handleResult(
        this.$refs.previewMain.scrollTop,
        this.$refs.previewMain.scrollLeft,
        this.select_node,
      );
    },
    /**
     * 处理侧边栏图标点击事件
     * @param {string} handle - 处理函数名
     * @param {any} param - 处理函数参数
     * @param {string} icon - 图标名称
     */
    handleSidebarClick(handle, param, icon) {
      if (typeof handle === 'string' && handle && typeof this[handle] === 'function') {
        this[handle](param);
      }
      this.curToolbarIcon = icon;
    },

    openMindMap() {
      MangerGetBookMindMap({ book_id: this.projectId }).then(({ content }) => {
        if (content) {
          this.mindMapJsonData = JSON.parse(content);
          this.isChildDataLoad = true;
        }
      });
      this.visibleMindMap = true;
    },

    async handleNodeClick(data) {
      let [nodeId, componentId] = data.split('#');
      if (nodeId) this.selectNode(nodeId);
      if (componentId) {
        let node = await this.$refs.courserware.findChildComponentByKey(componentId);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.$el.offsetTop - 50,
            left: node.$el.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
      this.visibleMindMap = false;
    },

    // 计算抽屉滑出位置
    calcDrawerPosition() {
      const menu = this.$refs.sidebarMenu;
      if (menu) {
        const rect = menu.getBoundingClientRect();
        this.drawerStyle = {
          top: `${rect.top}px`,
          height: `${rect.height}px`,
          left: `${rect.right - 240}px`,
        };
      }
    },
    /**
     * 打开抽屉并初始化加载
     * @param {Object} param - 抽屉参数
     * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频）
     */
    openDrawer({ type }) {
      if (this.drawerType === type) {
        this.drawerType = '';
        return;
      }
      // 重置所有加载状态
      this.resetLoadState();
      this.drawerType = type; // 假设这是你的类型变量
      this.$nextTick(() => {
        // 确保DOM更新后触发加载
        this.loadMore();
      });
    },
    openAudit() {
      this.drawerType = '';
    },
    resetLoadState() {
      this.cur_page = 1;
      this.file_list = [];
      this.total_count = 0;
      this.loading = false;
      this.lastLoadTime = 0; // 重置时间戳，允许立即加载
      this.loadCount = 0;
    },
    // 加载更多数据
    async loadMore() {
      const now = Date.now();
      // 只有当lastLoadTime不为0（不是第一次）且时间间隔太短时才return
      if (this.lastLoadTime > 0 && now - this.lastLoadTime < this.minLoadInterval) {
        return;
      }

      if (this.disabled || this.loading) {
        if (this.lastLoadTime > 0) {
          return;
        }
      }
      this.loading = true;
      const params = {
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        book_id: this.projectId,
        type: parseInt(this.drawerType),
      };
      await PageQueryBookResourceList(params)
        .then(({ total_count, resource_list }) => {
          this.total_count = total_count;
          // 记录加载前的滚动高度
          const scrollContainer = this.$el.querySelector('.el-drawer__body');
          const isAtBottom = this.isScrollAtBottom(scrollContainer);

          this.file_list = this.cur_page === 1 ? resource_list : [...this.file_list, ...resource_list];
          if (!resource_list || resource_list.length === 0) {
            return;
          }
          this.cur_page += 1;

          // 只有当前已经在底部时才微调滚动位置
          if (isAtBottom) {
            this.$nextTick(() => {
              // 轻微向上滚动，创造滚动空间
              scrollContainer.scrollTop -= 5;
            });
          }
        })
        .finally(() => {
          this.loading = false;
          this.lastLoadTime = now;
        });
    },
    isScrollAtBottom(container) {
      if (!container) return false;
      return container.scrollHeight - container.scrollTop <= container.clientHeight + 5;
    },
    async handleFileClick(courseware_id, component_id) {
      if (courseware_id) this.selectNode(courseware_id);
      if (component_id) {
        let node = await this.$refs.courserware.findChildComponentByKey(component_id);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.offsetTop - 50,
            left: node.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
    },
    /**
     * 文本转换
     * @param {string} text - 要转换的文本
     * @returns {string} - 转换后的文本
     */
    convertText(text) {
      if (this.chinese === 'zh-Hant' && this.opencc) {
        return this.opencc(text);
      }
      return text;
    },

    simulateAnswer(disabled = true) {
      this.$refs.courserware.simulateAnswer(this.isJudgeCorrect, this.isShowAnswer, disabled);
    },

    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     * @param {boolean} isLeaf - 是否是叶子节点
     */
    selectChapterNode(nodeId, isLeaf) {
      if (!isLeaf) return;
      if (this.curSelectId === nodeId) return;
      this.curSelectId = nodeId;
      this.selectNode(nodeId);
    },
    /**
     * 计算章节名称样式
     * @param {number} deep - 节点深度
     * @param {boolean} isLeaf - 是否是叶子节点
     * @returns {Object} - 样式对象
     */
    computedNameStyle(deep, isLeaf) {
      return {
        'padding-left': `${(deep - 1) * 8}px`,
        cursor: isLeaf ? 'pointer' : 'auto',
      };
    },
    /**
     * 切换左侧导航栏显示与隐藏
     */
    toggleNavigationShow() {
      this.navigationShow = !this.navigationShow;
    },
    /**
     * 切换右侧工具栏显示与隐藏
     */
    toggleSidebarShow() {
      this.sidebarShow = !this.sidebarShow;
    },
    backTop() {
      this.$refs.previewMain.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    },
  },
};
</script>

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

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

.common-preview {
  &__header {
    position: sticky;
    top: 56px;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 6px 4px;
    margin-bottom: 5px;
    background-color: #fff;
    border-top: $border;
    border-bottom: $border;

    > .courseware {
      display: flex;
      flex-grow: 1;
      column-gap: 16px;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .lang-select {
        :deep .el-input {
          width: 100px;
        }

        :deep .el-input__inner {
          height: 24px;
          line-height: 24px;
          background-color: #fff;
        }

        :deep .el-input__icon {
          line-height: 24px;
        }
      }

      .flow-nodename {
        flex: 1;
      }

      .group {
        display: flex;
        align-items: center;
      }

      .operator {
        display: flex;
        column-gap: 8px;
        align-items: center;

        .link {
          + .link {
            margin-left: 0;

            &::before {
              margin-right: 8px;
              color: #999;
              content: '|';
            }
          }
        }
      }
    }
  }

  .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: 1400px;
    height: calc(100vh - 166px);

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

      .courseware-tree {
        display: flex;
        flex: 1;
        flex-direction: column;
        row-gap: 8px;
        padding: 12px;
        margin-top: 12px;
        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;
            }
          }
        }
      }
    }

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

        :deep .el-drawer {
          width: 240px !important;
          border: 1px solid #e5e5e5;
          transition: none !important;
          animation: none !important;

          .el-drawer__body {
            height: calc(100vh - 200px);
            overflow-y: auto;

            h5 {
              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;
          }
        }
      }

      .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 .audio-middle {
  width: 210px !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);
    }
  }
}
</style>

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