移动端侧边栏

src/mobile_preview/index.vue

@@ -4,34 +4,15 @@
       <div class="menu-container">
         {{ courseware_info.book_name }}
       </div>
-      <!-- <div class="courseware">
-        <span class="name-path">{{ courseware_info.name_path }}</span>
-        <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"></slot>
-        </div>
-      </div> -->
     </div>
 
     <div class="audit-content">
+      <div class="content-left">
+        <MenuPopover :node-list="node_list" type="mobile" @selectNode="selectNode" />
+      </div>
+
       <div ref="previewMain" class="main-container">
         <main :class="['preview-main']">
-          <span class="title" :style="{ backgroundColor: unified_attrib?.topic_color }">
-            <MenuPopover :node-list="node_list" @selectNode="selectNode" />
-            <span>{{ courseware_info.name_path }}</span>
-          </span>
           <MobileCoursewarePreview
             v-if="courseware_info.book_name"
             ref="courserware"
@@ -48,6 +29,36 @@
           />
         </main>
       </div>
+
+      <aside ref="sidebarMenu" class="sidebar" :style="{ height: sidebarShow ? '300px' : '60px' }">
+        <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"></div>
+      </aside>
     </div>
   </div>
 </template>
@@ -84,6 +95,20 @@ export default {
     };
   },
   data() {
+    const sidebarIconList = [
+      // { icon: 'search', title: '搜索', handle: '', param: {} },
+      { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
+      { icon: 'knowledge', title: '知识图谱', handle: 'openVisNetwork', param: {} },
+      { icon: 'search', title: '搜索', handle: 'getSearch', param: { type: '5' } },
+      // { icon: 'totalResources', title: '总资源', handle: '', param: {} },
+      { icon: 'collect', title: '收藏', handle: 'getCollect', param: { type: '3' } },
+      { 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: 'getNote', param: { type: '4' } },
+      // { icon: 'translate', title: '翻译', handle: '', param: {} },
+      // { icon: 'setting', title: '设置', handle: '', param: {} },
+    ];
     const book_id = getLocalStore('book_id') || '';
     return {
       book_id,
@@ -123,18 +148,7 @@ export default {
         y: -1,
         componentId: 'WHOLE',
       },
-      sidebarIconList: [
-        { icon: 'search', title: '搜索', handle: '', param: {} },
-        { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
-        { icon: 'connect', 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: 'text', title: '文本', handle: '', param: {} },
-        { icon: 'file', title: '文件', handle: '', param: {} },
-        { icon: 'collect', title: '收藏', handle: '', param: {} },
-        { icon: 'setting', title: '设置', handle: '', param: {} },
-      ],
+      sidebarIconList,
       visibleMindMap: false,
       isChildDataLoad: false,
       mindMapJsonData: {}, // 思维导图json数据
@@ -158,6 +172,8 @@ export default {
       isJudgeCorrect: false,
       isShowAnswer: false,
       unified_attrib: {},
+      sidebarShow: true,
+      curToolbarIcon: '',
     };
   },
   computed: {
@@ -332,6 +348,13 @@ export default {
     simulateAnswer(disabled = true) {
       this.$refs.courserware.simulateAnswer(this.isJudgeCorrect, this.isShowAnswer, disabled);
     },
+
+    /**
+     * 切换右侧工具栏显示与隐藏
+     */
+    toggleSidebarShow() {
+      this.sidebarShow = !this.sidebarShow;
+    },
   },
 };
 </script>
@@ -446,27 +469,90 @@ export default {
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
-
-    .title {
-      display: inline-flex;
-      column-gap: 24px;
-      align-items: center;
-      width: 100%;
-      min-width: 280px;
-      height: 64px;
-      padding: 18px 24px;
-      font-size: 20px;
-      color: #fff;
-      background-color: #f44444;
-      border-top-left-radius: 12px;
-      border-top-right-radius: 16px;
-    }
   }
 
   .audit-content {
     display: flex;
     width: 100%;
     height: calc(100vh - 56px);
+
+    .content-left,
+    .sidebar {
+      width: 20px;
+    }
+
+    .content-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      margin-right: 4px;
+      background-color: #fff;
+    }
+
+    .sidebar {
+      padding: 4px;
+      margin-left: 4px;
+      background-color: #fff;
+
+      .toolbar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+
+        img {
+          cursor: pointer;
+        }
+
+        &-special {
+          display: flex;
+          flex-direction: column;
+          row-gap: 6px;
+          margin-bottom: 8px;
+
+          img {
+            width: 12px;
+            height: 12px;
+          }
+        }
+
+        &-list {
+          display: flex;
+          flex-direction: column;
+          row-gap: 6px;
+          align-items: center;
+          width: 100%;
+
+          .sidebar-item {
+            width: 100%;
+            text-align: center;
+
+            .sidebar-icon {
+              width: 12px;
+              height: 12px;
+              cursor: pointer;
+            }
+
+            &.active {
+              background-color: #4095e5;
+            }
+          }
+        }
+
+        .adjustable {
+          img {
+            width: 12px;
+            height: 12px;
+          }
+        }
+      }
+
+      .content {
+        flex: 1;
+        background-color: #fff;
+      }
+    }
   }
 }
 </style>

src/views/personal_workbench/common/MenuPopover.vue

@@ -9,7 +9,7 @@
         @click="selectNode(nodeId, isTrue(is_leaf_chapter))"
       >
         <SvgIcon
-          v-if="isTrue(is_leaf_chapter)"
+          v-if="isTrue(is_leaf_chapter) && !isMobile"
           size="12"
           icon-class="menu-item"
           :class-name="isTrue(is_my_edit_task) ? 'my-edit-task' : ''"
@@ -19,7 +19,10 @@
         </span>
       </div>
     </div>
-    <div slot="reference"><SvgIcon icon-class="menu-2" size="24" /></div>
+    <div slot="reference">
+      <SvgIcon v-if="isMobile" icon-class="catalogue" size="16" />
+      <SvgIcon v-else icon-class="menu-2" size="24" />
+    </div>
   </el-popover>
 </template>
 
@@ -41,6 +44,10 @@ export default {
       type: String,
       default: '',
     },
+    type: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -48,6 +55,11 @@ export default {
       curSelectId: this.id || '',
     };
   },
+  computed: {
+    isMobile() {
+      return this.type === 'mobile';
+    },
+  },
   methods: {
     /**
      * 选择节点

src/web_preview/index.vue

@@ -841,8 +841,8 @@ export default {
     },
 
     handLocation(item, type) {
-      if (type == 3) {
-        var did = item.courseware_id + '#' + item.component_id;
+      if (type === 3) {
+        let did = `${item.courseware_id}#${item.component_id}`;
         this.handleNodeClick(did);
         return;
       }