格式化文档，侧边栏翻译改为多语言

src/components/CommonPreview.vue

@@ -17,15 +17,24 @@
         </div>
         <div v-if="isShowGroup">
           <span class="link" @click="isShowGroup = false">取消显示分组</span>
-          <span class="link" @click="
-            groupShowAll = false;
-          isShowGroup = false;
-          ">完成选择</span>
+          <span
+            class="link"
+            @click="
+              groupShowAll = false;
+              isShowGroup = false;
+            "
+            >完成选择</span
+          >
         </div>
-        <span v-else class="link" @click="
-          isShowGroup = true;
-        groupShowAll = true;
-        ">显示分组</span>
+        <span
+          v-else
+          class="link"
+          @click="
+            isShowGroup = true;
+            groupShowAll = true;
+          "
+          >显示分组</span
+        >
         <span class="link">
           <el-checkbox v-model="chinese" true-label="zh-Hant" false-label="zh-Hans">繁体</el-checkbox>
         </span>
@@ -61,10 +70,13 @@
         </div>
         <!-- 教材章节树 -->
         <div class="courseware-tree">
-          <div v-for="{ id: nodeId, name, status_name, deep, is_leaf_chapter } in node_list" :key="nodeId"
+          <div
+            v-for="{ id: nodeId, name, status_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))">
+            @click="selectChapterNode(nodeId, isTrue(is_leaf_chapter))"
+          >
             <span class="name nowrap-ellipsis" :title="name">
               {{ name }}
             </span>
@@ -73,10 +85,14 @@
         </div>
       </aside>
 
-      <div ref="previewMain" class="main-container" :style="{
-        paddingLeft: !isFullScreen && navigationShow ? '15px' : '315px',
-        paddingRight: !isFullScreen && sidebarShow ? '15px' : '315px',
-      }">
+      <div
+        ref="previewMain"
+        class="main-container"
+        :style="{
+          paddingLeft: !isFullScreen && navigationShow ? '15px' : '315px',
+          paddingRight: !isFullScreen && sidebarShow ? '15px' : '315px',
+        }"
+      >
         <!-- 左侧菜单栏 - 收缩 -->
         <div v-if="!navigationShow && !isFullScreen" class="catalogue-bar" @click="toggleNavigationShow">
           <SvgIcon icon-class="catalogue" size="54" />
@@ -91,13 +107,26 @@
             @mouseup="endSelection"
             @mouseleave="endSelection"
           > -->
-          <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"
-            :courseware-id="curSelectId" :component-list="component_list" :background="background"
+          <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"
+            :courseware-id="curSelectId"
+            :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" @editNote="handEditNote" @saveCollect="saveCollect"
-            @getTranslate="getTranslate" />
+            :show-remark="isShowAudit"
+            :component-remark-obj="remark_list_obj"
+            :project="project"
+            @computeScroll="computeScroll"
+            @addRemark="addRemark"
+            @editNote="handEditNote"
+            @saveCollect="saveCollect"
+            @getTranslate="getTranslate"
+          />
           <!-- <div
               v-if="isSelecting"
               :style="{
@@ -137,13 +166,20 @@
             <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" />
           </div>
           <div v-if="sidebarShow" class="toolbar-list">
-            <div v-for="{ icon, title, handle, param, children } in sidebarIconList" :key="icon"
-              :class="['sidebar-item', { active: curToolbarIcon === icon }]" :title="title"
-              @click="handleSidebarClick(handle, param, icon, children)">
-              <div class="sidebar-icon icon-mask" :style="{
-                backgroundColor: curToolbarIcon === icon ? '#fff' : '#1E2129',
-                maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
-              }"></div>
+            <div
+              v-for="{ icon, title, handle, param, children } in sidebarIconList"
+              :key="icon"
+              :class="['sidebar-item', { active: curToolbarIcon === icon }]"
+              :title="title"
+              @click="handleSidebarClick(handle, param, icon, children)"
+            >
+              <div
+                class="sidebar-icon icon-mask"
+                :style="{
+                  backgroundColor: curToolbarIcon === icon ? '#fff' : '#1E2129',
+                  maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
+                }"
+              ></div>
             </div>
           </div>
           <div class="adjustable" @click="toggleSidebarShow">
@@ -182,13 +218,20 @@
           <!-- <div v-if="curToolbarIcon === 'totalResources'" class="resource_box"></div> -->
           <div v-if="['image', 'audio', 'video', 'text'].includes(twoCurToolbarIcon)" class="resource_box">
             <div class="source-toolbar-list">
-              <div v-for="{ icon, title, handle, param } in twoSidebarList" :key="icon"
-                :class="['sidebar-item', { active: twoCurToolbarIcon === icon }]" :title="title"
-                @click="handleSidebarClick(handle, param, icon, '', 2)">
-                <div class="sidebar-icon icon-mask" :style="{
-                  backgroundColor: twoCurToolbarIcon === icon ? '#fff' : '#1E2129',
-                  maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
-                }"></div>
+              <div
+                v-for="{ icon, title, handle, param } in twoSidebarList"
+                :key="icon"
+                :class="['sidebar-item', { active: twoCurToolbarIcon === icon }]"
+                :title="title"
+                @click="handleSidebarClick(handle, param, icon, '', 2)"
+              >
+                <div
+                  class="sidebar-icon icon-mask"
+                  :style="{
+                    backgroundColor: twoCurToolbarIcon === icon ? '#fff' : '#1E2129',
+                    maskImage: `url(${require(`@/assets/icon/sidebar-${icon}.svg`)})`,
+                  }"
+                ></div>
               </div>
             </div>
             <div style="height: 40px"></div>
@@ -198,27 +241,43 @@
               <el-switch v-model="multimediaIsAllShow" :active-value="true" :inactive-value="false" />
             </div>
             <el-collapse v-model="activeBookChapterId" accordion @change="multimediaHandleChange">
-              <el-collapse-item v-for="chapter in bookChapterList" :key="chapter.id" :name="chapter.id"
-                :title="chapter.name">
+              <el-collapse-item
+                v-for="chapter in bookChapterList"
+                :key="chapter.id"
+                :name="chapter.id"
+                :title="chapter.name"
+              >
                 <!-- 加载状态 -->
                 <div v-if="multimediaLoadingStates" class="loading-text">加载中...</div>
 
                 <!-- 加载完成显示数据 -->
                 <div v-else-if="chapter.data">
-                  <ul :class="parseInt(drawerType) == 5 ? 'scroll-container file-list' : 'scroll-container'"
-                    infinite-scroll-disabled="disabled" :infinite-scroll-immediate="false">
+                  <ul
+                    :class="parseInt(drawerType) == 5 ? 'scroll-container file-list' : 'scroll-container'"
+                    infinite-scroll-disabled="disabled"
+                    :infinite-scroll-immediate="false"
+                  >
                     <li v-for="(item, index) in chapter.data" :key="`${chapter.id}-${index}`" class="list-item">
                       <template v-if="parseInt(drawerType) === 0">
                         <el-image v-if="shouldMediaShowItem(chapter, item)" :src="item.file_url" fit="contain" />
                       </template>
                       <template v-else-if="parseInt(drawerType) === 1">
-                        <AudioPlay v-if="shouldMediaShowItem(chapter, item)" 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" />
+                        <AudioPlay
+                          v-if="shouldMediaShowItem(chapter, item)"
+                          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 v-if="shouldMediaShowItem(chapter, item)" view-size="small" :file-id="item.file_id"
-                          :video-index="index" />
+                        <VideoPlay
+                          v-if="shouldMediaShowItem(chapter, item)"
+                          view-size="small"
+                          :file-id="item.file_id"
+                          :video-index="index"
+                        />
                       </template>
                       <template v-else-if="parseInt(drawerType) === 3"> </template>
                       <template v-else-if="parseInt(drawerType) === 4"> </template>
@@ -238,8 +297,12 @@
                       <div class="file-handle-info">
                         <span v-if="![1, 5].includes(parseInt(drawerType))" class="word">{{ item.file_name }}</span>
                         <div class="mark">
-                          <el-checkbox v-model="item.is_hided" :disabled="!item.is_can_edit" size="small"
-                            @change="handleMediaShowChange(item)">
+                          <el-checkbox
+                            v-model="item.is_hided"
+                            :disabled="!item.is_can_edit"
+                            size="small"
+                            @change="handleMediaShowChange(item)"
+                          >
                             隐藏
                           </el-checkbox>
                           <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(item, 0)" />
@@ -292,15 +355,19 @@
           <div v-if="curToolbarIcon === 'translate'" class="resource_box">
             <h5>{{ drawerTitle }}</h5>
             <div style="height: 40px"></div>
-            <div style="padding:10px">
+            <div style="padding: 10px">
               <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>
             </div>
           </div>
           <template v-if="curToolbarIcon === 'audit'">
-            <AuditRemark :remark-list="remark_list" :is-audit="isShowAudit" @deleteRemarks="deleteRemarks"
-              @handleLocationRemarks="handleLocationRemarks" />
+            <AuditRemark
+              :remark-list="remark_list"
+              :is-audit="isShowAudit"
+              @deleteRemarks="deleteRemarks"
+              @handleLocationRemarks="handleLocationRemarks"
+            />
           </template>
         </div>
 
@@ -310,8 +377,14 @@
       </aside>
     </div>
 
-    <el-dialog title="添加课件审核批注" :visible="visible" width="680px" :close-on-click-modal="false" class="remark-dialog"
-      @close="dialogClose('')">
+    <el-dialog
+      title="添加课件审核批注"
+      :visible="visible"
+      width="680px"
+      :close-on-click-modal="false"
+      class="remark-dialog"
+      @close="dialogClose('')"
+    >
       <Remark :remark="remark" :project-id="projectId" :courseware-id="select_node ? select_node : id" />
       <div slot="footer">
         <el-button @click="dialogClose('')">取消</el-button>
@@ -322,25 +395,47 @@
     </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" />
+      <MindMap
+        v-if="isChildDataLoad"
+        ref="mindMapRef"
+        :project-id="projectId"
+        :mind-map-json-data="mindMapJsonData"
+        @child-click="handleNodeClick"
+      />
     </el-dialog>
 
-    <el-dialog title="" :visible="visibleVisNetwork" width="1100px" class="audit-dialog" :close-on-click-modal="false"
-      @close="dialogClose('VisNetwork')">
+    <el-dialog
+      title=""
+      :visible="visibleVisNetwork"
+      width="1100px"
+      class="audit-dialog"
+      :close-on-click-modal="false"
+      @close="dialogClose('VisNetwork')"
+    >
       <VisNetwork ref="visNetworkRef" :book-id="projectId" @child-click="handleNodeClick" />
     </el-dialog>
 
-    <ExplanatoryNoteDialog ref="explanatoryNote" :open.sync="editDialogOpen" :init-data="oldRichData" title-text="笔记"
-      @confirm="saveNote" @cancel="delNote" />
+    <ExplanatoryNoteDialog
+      ref="explanatoryNote"
+      :open.sync="editDialogOpen"
+      :init-data="oldRichData"
+      title-text="笔记"
+      @confirm="saveNote"
+      @cancel="delNote"
+    />
 
     <TranslateDialog :open.sync="showTranslate" :init-text="translateText" :book-id="projectId" title-text="翻译" />
 
     <SimAnswerPermissionControl :visible.sync="visiblePermissionControl" :permission-control.sync="permissionControl" />
     <PreviewURL :url="preview_url" :visible.sync="visiblePreviewURL" />
 
-    <el-dialog title="翻译" width="240px" :close-on-click-modal="false" :visible="visibleTranslate"
-      @close="dialogClose('Translate')">
+    <el-dialog
+      title="翻译"
+      width="240px"
+      :close-on-click-modal="false"
+      :visible="visibleTranslate"
+      @close="dialogClose('Translate')"
+    >
       <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>
@@ -600,7 +695,7 @@ export default {
         11: '收藏列表',
         12: '笔记列表',
         13: '搜索结果',
-        21: '翻译',
+        21: '多语言',
       };
       return titleMap[this.drawerType] || '资源列表';
     },
@@ -659,7 +754,7 @@ export default {
     });
   },
   beforeDestroy() {
-    document.removeEventListener('fullscreenchange', () => { });
+    document.removeEventListener('fullscreenchange', () => {});
   },
   methods: {
     getProjectBaseInfo() {
@@ -879,7 +974,7 @@ export default {
             this.$message.success('删除成功!');
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     // 定位批注
     async handleLocationRemarks(componentId) {
@@ -963,7 +1058,7 @@ export default {
      * 打开选择语言弹窗
      */
     openTranslate(params) {
-      //this.visibleTranslate = true;
+      //  this.visibleTranslate = true;
       if (params && params.type) this.drawerType = Number(params.type);
     },
     /**
@@ -1303,7 +1398,7 @@ export default {
         .then(() => {
           this.delNote(id);
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     delNote(id) {
       const noteId = id || (this.oldRichData && this.oldRichData.id);
@@ -1389,7 +1484,7 @@ export default {
             this.allCottectList = this.allCottectList.filter((x) => x.id !== id);
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     async getTranslate(info) {
       this.showTranslate = true;
@@ -1510,7 +1605,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
     border-top: $border;
     border-bottom: $border;
 
-    >.menu-container {
+    > .menu-container {
       display: flex;
       justify-content: space-between;
       width: 360px;
@@ -1518,7 +1613,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       border-right: $border;
     }
 
-    >.courseware {
+    > .courseware {
       display: flex;
       flex-grow: 1;
       column-gap: 16px;
@@ -1566,7 +1661,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
         align-items: center;
 
         .link {
-          +.link {
+          + .link {
             margin-left: 0;
 
             &::before {
@@ -1775,7 +1870,6 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
 
           &.courseware {
             &:hover {
-
               .name,
               .status {
                 background-color: #f3f3f3;