预览修改

src/views/book/courseware/preview/components/article/index.vue

@@ -803,7 +803,6 @@ export default {
 
     .ArticleView-body {
       box-sizing: border-box;
-      background: #fff;
       border: 1px solid rgba(0, 0, 0, 10%);
       border-radius: 8px;
 

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -61,7 +61,7 @@
                     <span
                       class="items-lian"
                       :style="{
-                        background:
+                        color:
                           data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                       }"
                       >{{ items.con }}</span

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -19,7 +19,7 @@ const mixin = {
       loader: false,
     };
   },
-  inject: ['getLang', 'getChinese', 'convertText'],
+  inject: ['getLang', 'getChinese', 'convertText', 'getTitleList'],
   props: {
     id: {
       type: String,
@@ -159,7 +159,15 @@ const mixin = {
         const topPct = typeof pos.top === 'undefined' ? '' : pos.top;
 
         backgroundData.backgroundImage = `url(${this.data.property.background_image_url})`;
-        backgroundData.backgroundSize = pos.image_mode === 'fill' ? '100% 100%' : `${widthPct}% ${heightPct}%`;
+        let bcSize = '';
+        if (pos.image_mode === 'fill') {
+          bcSize = '100% 100%';
+        } else if (pos.image_mode === 'repeat') {
+          bcSize = 'auto';
+        } else {
+          bcSize = `${widthPct}% ${heightPct}%`;
+        }
+        backgroundData.backgroundSize = bcSize;
         backgroundData.backgroundPosition = pos.image_mode === 'fill' ? '0% 0%' : `${leftPct}% ${topPct}%`;
         backgroundData.backgroundRepeat = pos.image_mode === 'repeat' ? 'repeat' : 'no-repeat';
       }

src/views/book/courseware/preview/components/dialogue_article/index.vue

@@ -796,7 +796,6 @@ export default {
 
     .ArticleView-body {
       box-sizing: border-box;
-      background: #fff;
       border: 1px solid rgba(0, 0, 0, 10%);
       border-radius: 4px;
 

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -175,12 +175,10 @@ export default {
           this.answer.answer_list.push(obj);
         });
       }
-      if (this.showLang) {
-        this.data.multilingual.forEach((item) => {
-          let trans_arr = item.translation.split('\n');
-          this.$set(this.multilingualTextList, item.type, trans_arr);
-        });
-      }
+      this.data.multilingual.forEach((item) => {
+        let trans_arr = item.translation.split('\n');
+        this.$set(this.multilingualTextList, item.type, trans_arr);
+      });
 
       this.data.image_list.forEach((item) => {
         this.image_url = item.file_url;

src/views/book/courseware/preview/components/image_text/components/MagazineSentence.vue

@@ -13,205 +13,207 @@
       </div>
     </div>
     <div class="content-inner" :style="{ background: themeList[sentenceTheme].contentBg }">
-      <template v-for="(itemC, indexC) in data[sentenceActive].wordsResultList">
-        <div
-          :key="indexC"
-          :class="[
-            'content-item',
-            (activeWordIndex === null &&
-              currentTime * 1000 <= data[sentenceActive].ed &&
-              currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
-            activeWordIndex === indexC
-              ? 'active'
-              : '',
-            indexC === 0 ? 'text-left' : '',
-          ]"
-          :style="{
-            color:
+      <template v-if="data[sentenceActive] && data[sentenceActive].wordsResultList">
+        <template v-for="(itemC, indexC) in data[sentenceActive].wordsResultList">
+          <div
+            :key="indexC"
+            :class="[
+              'content-item',
               (activeWordIndex === null &&
                 currentTime * 1000 <= data[sentenceActive].ed &&
                 currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
               activeWordIndex === indexC
-                ? themeList[sentenceTheme].sentenceActiveColor
-                : themeList[sentenceTheme].sentenceColor,
-            fontSize: fontSize + 'px',
-            lineHeight: fontSize + 8 + 'px',
-          }"
-          @click="palyWord(indexC)"
-        >
-          <!-- {{ itemC.wordsName || itemC.onebest }} -->
-          <template v-if="itemC.isShow">
-            <template
-              v-if="
-                data[sentenceActive].wordsResultList[indexC + 1] &&
-                data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
-                chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
-              "
-            >
-              <span class="NNPE-words-box">
-                <span
-                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
-                  :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? itemC.pinyin_up
-                      : itemC.pinyin
-                  }}</span
-                >
-                <span class="NNPE-chs">
-                  <template>
-                    <span
-                      :style="{
-                        fontFamily: itemC.fontFamily,
-                      }"
-                      >{{ itemC.wordsName }}</span
-                    >
-                  </template>
-                </span>
-                <span
-                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
-                  :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? itemC.pinyin_up
-                      : itemC.pinyin
-                  }}</span
-                >
-              </span>
-              <span class="NNPE-words-box">
-                <span
-                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
-                  :class="[
-                    'NNPE-pinyin',
-                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  style="text-align: left"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
-                      : data[sentenceActive].wordsResultList[indexC + 1].pinyin
-                  }}</span
-                >
-                <span
-                  class="NNPE-chs"
-                  style="text-align: left"
-                  :style="{
-                    fontFamily: data[sentenceActive].wordsResultList[indexC + 1].fontFamily,
-                  }"
-                  >{{ data[sentenceActive].wordsResultList[indexC + 1].wordsName }}</span
-                >
-                <span
-                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
-                  :class="[
-                    'NNPE-pinyin',
-                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  style="text-align: left"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
-                      : data[sentenceActive].wordsResultList[indexC + 1].pinyin
-                  }}</span
-                >
-              </span>
-              <span
+                ? 'active'
+                : '',
+              indexC === 0 ? 'text-left' : '',
+            ]"
+            :style="{
+              color:
+                (activeWordIndex === null &&
+                  currentTime * 1000 <= data[sentenceActive].ed &&
+                  currentTime * 1000 >= data[sentenceActive].wordsResultList[indexC].wordBg) ||
+                activeWordIndex === indexC
+                  ? themeList[sentenceTheme].sentenceActiveColor
+                  : themeList[sentenceTheme].sentenceColor,
+              fontSize: fontSize + 'px',
+              lineHeight: fontSize + 8 + 'px',
+            }"
+            @click="palyWord(indexC)"
+          >
+            <!-- {{ itemC.wordsName || itemC.onebest }} -->
+            <template v-if="itemC.isShow">
+              <template
                 v-if="
-                  data[sentenceActive].wordsResultList[indexC + 2] &&
-                  data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
-                  chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
+                  data[sentenceActive].wordsResultList[indexC + 1] &&
+                  data[sentenceActive].wordsResultList[indexC + 1].wordsName &&
+                  chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 1].wordsName) > -1
                 "
-                class="NNPE-words-box"
               >
-                <span
-                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
-                  :class="[
-                    'NNPE-pinyin',
-                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  style="text-align: left"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
-                      : data[sentenceActive].wordsResultList[indexC + 2].pinyin
-                  }}</span
-                >
-                <span
-                  class="NNPE-chs"
-                  style="text-align: left"
-                  :style="{
-                    fontFamily: data[sentenceActive].wordsResultList[indexC + 2].fontFamily,
-                  }"
-                  >{{ data[sentenceActive].wordsResultList[indexC + 2].wordsName }}</span
-                >
-                <span
-                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
-                  :class="[
-                    'NNPE-pinyin',
-                    noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  style="text-align: left"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
-                      : data[sentenceActive].wordsResultList[indexC + 2].pinyin
-                  }}</span
-                >
-              </span>
-            </template>
-            <template v-else>
-              <span class="NNPE-words-box">
-                <span
-                  v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
-                  class="NNPE-pinyin"
-                  :class="[
-                    itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
-                    noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? itemC.pinyin_up
-                      : itemC.pinyin
-                  }}</span
-                >
-                <span class="NNPE-chs">
-                  <template>
-                    <span
-                      :style="{
-                        fontFamily: itemC.fontFamily,
-                      }"
-                      >{{ itemC.wordsName }}</span
-                    >
-                  </template>
+                <span class="NNPE-words-box">
+                  <span
+                    v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                    :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? itemC.pinyin_up
+                        : itemC.pinyin
+                    }}</span
+                  >
+                  <span class="NNPE-chs">
+                    <template>
+                      <span
+                        :style="{
+                          fontFamily: itemC.fontFamily,
+                        }"
+                        >{{ itemC.wordsName }}</span
+                      >
+                    </template>
+                  </span>
+                  <span
+                    v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                    :class="['NNPE-pinyin', noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '']"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? itemC.pinyin_up
+                        : itemC.pinyin
+                    }}</span
+                  >
+                </span>
+                <span class="NNPE-words-box">
+                  <span
+                    v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                    :class="[
+                      'NNPE-pinyin',
+                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    style="text-align: left"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
+                        : data[sentenceActive].wordsResultList[indexC + 1].pinyin
+                    }}</span
+                  >
+                  <span
+                    class="NNPE-chs"
+                    style="text-align: left"
+                    :style="{
+                      fontFamily: data[sentenceActive].wordsResultList[indexC + 1].fontFamily,
+                    }"
+                    >{{ data[sentenceActive].wordsResultList[indexC + 1].wordsName }}</span
+                  >
+                  <span
+                    v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                    :class="[
+                      'NNPE-pinyin',
+                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 1].pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    style="text-align: left"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? data[sentenceActive].wordsResultList[indexC + 1].pinyin_up
+                        : data[sentenceActive].wordsResultList[indexC + 1].pinyin
+                    }}</span
+                  >
                 </span>
                 <span
-                  v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
-                  class="NNPE-pinyin"
-                  :class="[
-                    itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
-                    noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
-                  ]"
-                  :style="{ fontSize: fontSize - 6 + 'px' }"
-                  >{{
-                    property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
-                      ? itemC.pinyin_up
-                      : itemC.pinyin
-                  }}</span
+                  v-if="
+                    data[sentenceActive].wordsResultList[indexC + 2] &&
+                    data[sentenceActive].wordsResultList[indexC + 2].wordsName &&
+                    chsFhList.indexOf(data[sentenceActive].wordsResultList[indexC + 2].wordsName) > -1
+                  "
+                  class="NNPE-words-box"
                 >
-              </span>
+                  <span
+                    v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                    :class="[
+                      'NNPE-pinyin',
+                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    style="text-align: left"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
+                        : data[sentenceActive].wordsResultList[indexC + 2].pinyin
+                    }}</span
+                  >
+                  <span
+                    class="NNPE-chs"
+                    style="text-align: left"
+                    :style="{
+                      fontFamily: data[sentenceActive].wordsResultList[indexC + 2].fontFamily,
+                    }"
+                    >{{ data[sentenceActive].wordsResultList[indexC + 2].wordsName }}</span
+                  >
+                  <span
+                    v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                    :class="[
+                      'NNPE-pinyin',
+                      noFont.indexOf(data[sentenceActive].wordsResultList[indexC + 2].pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    style="text-align: left"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? data[sentenceActive].wordsResultList[indexC + 2].pinyin_up
+                        : data[sentenceActive].wordsResultList[indexC + 2].pinyin
+                    }}</span
+                  >
+                </span>
+              </template>
+              <template v-else>
+                <span class="NNPE-words-box">
+                  <span
+                    v-if="property.pinyin_position == 'top' && property.view_pinyin === 'true'"
+                    class="NNPE-pinyin"
+                    :class="[
+                      itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                      noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? itemC.pinyin_up
+                        : itemC.pinyin
+                    }}</span
+                  >
+                  <span class="NNPE-chs">
+                    <template>
+                      <span
+                        :style="{
+                          fontFamily: itemC.fontFamily,
+                        }"
+                        >{{ itemC.wordsName }}</span
+                      >
+                    </template>
+                  </span>
+                  <span
+                    v-if="property.pinyin_position == 'bottom' && property.view_pinyin === 'true'"
+                    class="NNPE-pinyin"
+                    :class="[
+                      itemC.wordsName != '“' && itemC.padding ? 'padding' : '',
+                      noFont.indexOf(itemC.pinyin) > -1 ? 'noFont' : '',
+                    ]"
+                    :style="{ fontSize: fontSize - 6 + 'px' }"
+                    >{{
+                      property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                        ? itemC.pinyin_up
+                        : itemC.pinyin
+                    }}</span
+                  >
+                </span>
+              </template>
             </template>
-          </template>
+          </div>
+        </template>
+        <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
+          {{ multilingualTextList[sentenceActive] }}
         </div>
       </template>
-      <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
-        {{ multilingualTextList[sentenceActive] }}
-      </div>
     </div>
     <div class="sentence-bottom">
       <div class="fontsize-box" :style="{ background: themeList[sentenceTheme].bottomBg }">

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -363,7 +363,6 @@ export default {
       path.setAttribute('stroke-linecap', 'round'); // 设置线段的两端样式
       const assistColor = this.data?.unified_attrib?.topic_color || '#306eff';
       path.setAttribute('stroke', assistColor); // 设置填充颜色
-      path.setAttribute('transform', `translate(2, 2)`); // 设置偏移量
     },
     /**
      * 计算当前连线点的位置
@@ -523,7 +522,7 @@ export default {
     .list-item {
       display: flex;
       column-gap: 8px;
-      align-items: center;
+      align-items: stretch;
       padding: 1px;
 
       .item-wrapper {

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -198,23 +198,21 @@ export default {
       this.wordShow = !this.wordShow;
     },
     handleData() {
-      if (this.showLang) {
-        this.data.multilingual.forEach((item) => {
-          let trans_arr = item.translation.split('\n');
-          this.$set(this.titleTrans, item.type, trans_arr[0] ? trans_arr[0] : '');
-          let chunkSize = 2;
-          let chunkedArr = trans_arr.splice(1).reduce((acc, curr, index) => {
-            // 当索引是chunkSize的倍数时，开始一个新的子数组
-            if (index % chunkSize === 0) {
-              acc.push([curr]); // 开始新的子数组并添加当前元素
-            } else {
-              acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
-            }
-            return acc;
-          }, []);
-          this.$set(this.multilingualTextList, item.type, chunkedArr);
-        });
-      }
+      this.data.multilingual.forEach((item) => {
+        let trans_arr = item.translation.split('\n');
+        this.$set(this.titleTrans, item.type, trans_arr[0] ? trans_arr[0] : '');
+        let chunkSize = 2;
+        let chunkedArr = trans_arr.splice(1).reduce((acc, curr, index) => {
+          // 当索引是chunkSize的倍数时，开始一个新的子数组
+          if (index % chunkSize === 0) {
+            acc.push([curr]); // 开始新的子数组并添加当前元素
+          } else {
+            acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
+          }
+          return acc;
+        }, []);
+        this.$set(this.multilingualTextList, item.type, chunkedArr);
+      });
       // this.data.option.forEach((item) => {
       //   if (item.file_list && item.file_list[0]) {
       //     GetFileURLMap({ file_id_list: item.file_list }).then(({ url_map }) => {

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -29,17 +29,20 @@
                 :style="{
                   borderTop: i === 0 ? '1px solid ' + data.property.border_color : '',
                   borderBottom: '1px solid ' + data.property.border_color,
+
                   borderLeft:
                     i === 0 && data.property.first_line_color
                       ? '1px solid ' + data.property.border_color
                       : j === 0
-                        ? '2px solid ' + data.property.decoration_color
+                        ? '2px solid ' +
+                          (data.property.decoration_color ? data.property.decoration_color : data.property.border_color)
                         : '1px dotted ' + data.property.border_color,
                   borderRight:
                     i === 0 && data.property.first_line_color
                       ? '1px solid ' + data.property.border_color
                       : j === row.length - 1
-                        ? '2px solid ' + data.property.decoration_color
+                        ? '2px solid ' +
+                          (data.property.decoration_color ? data.property.decoration_color : data.property.border_color)
                         : '1px dotted ' + data.property.border_color,
                   borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
                   background:

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -155,12 +155,10 @@ export default {
           this.source_list[2].push(item);
         }
       });
-      if (this.showLang) {
-        this.data.multilingual.forEach((item) => {
-          let trans_arr = item.translation.split('\n');
-          this.$set(this.multilingualTextList, item.type, trans_arr);
-        });
-      }
+      this.data.multilingual.forEach((item) => {
+        let trans_arr = item.translation.split('\n');
+        this.$set(this.multilingualTextList, item.type, trans_arr);
+      });
     },
     //   下载表格
     downLoad(file) {

src/web_preview/index.vue

@@ -68,7 +68,7 @@
         :style="{ paddingLeft: navigationShow ? '15px' : '315px', paddingRight: sidebarShow ? '15px' : '315px' }"
       >
         <!-- 左侧菜单栏 - 收缩 -->
-        <div v-if="!navigationShow" class="catalogue-bar" @click="toggleNavigationShow">
+        <div v-if="!navigationShow && !isFullScreen" class="catalogue-bar" @click="toggleNavigationShow">
           <SvgIcon icon-class="catalogue" size="54" />
         </div>
 
@@ -96,7 +96,7 @@
         </main>
 
         <!-- 右侧菜单栏 - 收缩 -->
-        <aside v-if="!sidebarShow" class="sidebar-bar">
+        <aside v-if="!sidebarShow && !isFullScreen" class="sidebar-bar">
           <aside class="toolbar">
             <div class="toolbar-special">
               <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" @click="fullScreen" />
@@ -490,6 +490,7 @@ export default {
       book_id: '',
       activeBookChapterId: '',
       multimediaLoadingStates: true,
+      isFullScreen: false, // 是否全屏状态
     };
   },
   computed: {
@@ -544,6 +545,17 @@ export default {
     this.getBookChapterStructExpandList();
     this.getBookUnifiedAttr();
     this.getProjectInfo();
+    // 监听全屏事件
+    document.addEventListener('fullscreenchange', () => {
+      if (document.fullscreenElement) {
+        this.isFullScreen = true;
+      } else {
+        this.isFullScreen = false;
+      }
+    });
+  },
+  beforeDestroy() {
+    document.removeEventListener('fullscreenchange', () => {});
   },
   methods: {
     selectFirstLeafNode() {