侧边栏

src/components/CommonPreview.vue

@@ -49,6 +49,18 @@
         </ul>
         <p v-else style="text-align: center">暂无批注</p>
       </div>
+
+      <div class="sidebar">
+        <div
+          v-for="{ icon, title, handle } in sidebarIconList"
+          :key="icon"
+          :title="title"
+          class="sidebar-icon"
+          @click="handleSidebarClick(handle)"
+        >
+          <SvgIcon :icon-class="`sidebar-${icon}`" size="24" />
+        </div>
+      </div>
     </div>
 
     <el-dialog
@@ -158,6 +170,17 @@ export default {
         y: -1,
         componentId: 'WHOLE',
       },
+      sidebarIconList: [
+        { icon: 'search', title: '搜索', handle: '' },
+        { icon: 'mindmap', title: '思维导图', handle: 'openMindMap' },
+        { icon: 'connect', title: '连接', handle: '' },
+        { icon: 'audio', title: '音频', handle: '' },
+        { icon: 'image', title: '图片', handle: '' },
+        { icon: 'video', title: '视频', handle: '' },
+        { icon: 'text', title: '文本', handle: '' },
+        { icon: 'collect', title: '收藏', handle: '' },
+        { icon: 'setting', title: '设置', handle: '' },
+      ],
     };
   },
   created() {
@@ -313,6 +336,19 @@ export default {
         this.select_node,
       );
     },
+    /**
+     * 处理侧边栏图标点击事件
+     * @param {string} handle - 处理函数名
+     * @param {any} param - 处理函数参数
+     */
+    handleSidebarClick(handle, param) {
+      if (typeof handle === 'string' && handle && typeof this[handle] === 'function') {
+        this[handle](param);
+      }
+    },
+    openMindMap() {
+      console.log('打开思维导图');
+    },
   },
 };
 </script>
@@ -427,12 +463,12 @@ export default {
 
   .audit-content {
     display: flex;
-    column-gap: 20px;
     min-width: 1400px;
     height: calc(100vh - 175px);
 
     .remark-list {
       width: 300px;
+      margin-left: 20px;
       overflow: auto;
       border: 1px solid #e5e5e5;
 
@@ -477,6 +513,21 @@ export default {
         }
       }
     }
+
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      row-gap: 16px;
+      align-items: center;
+      height: 100%;
+      padding: 12px 8px;
+      margin-left: 8px;
+      box-shadow: -4px 0 4px rgba(0, 0, 0, 10%);
+
+      &-icon {
+        cursor: pointer;
+      }
+    }
   }
 }
 

src/icons/svg/sibebar/sidebar-audio.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 24 24">
+  <path
+    d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z">
+  </path>
+</svg>

src/icons/svg/sibebar/sidebar-collect.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 32 32">
+  <path
+    d="M4 24.667v-18c0-2.209 1.791-4 4-4v0h18.667c0.736 0 1.333 0.597 1.333 1.333v0 24c0 0.736-0.597 1.333-1.333 1.333v0h-18c-2.577 0-4.667-2.089-4.667-4.667v0zM25.333 26.667v-4h-16.667c-1.105 0-2 0.895-2 2s0.895 2 2 2v0h16.667zM13.333 5.333h-5.333c-0.736 0-1.333 0.597-1.333 1.333v0 13.783c0.583-0.284 1.269-0.449 1.994-0.449 0.002 0 0.004 0 0.007 0h16.666v-14.667h-2.667v10.667l-4.667-2.667-4.667 2.667v-10.667z">
+  </path>
+</svg>

src/icons/svg/sibebar/sidebar-connect.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 48 48">
+  <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M10 42C13.3137 42 16 39.3137 16 36C16 32.6863 13.3137 30 10 30C6.68629 30 4 32.6863 4 36C4 39.3137 6.68629 42 10 42Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M38 44C41.3137 44 44 41.3137 44 38C44 34.6863 41.3137 32 38 32C34.6863 32 32 34.6863 32 38C32 41.3137 34.6863 44 38 44Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M22 28C26.4183 28 30 24.4183 30 20C30 15.5817 26.4183 12 22 12C17.5817 12 14 15.5817 14 20C14 24.4183 17.5817 28 22 28Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M34 12C36.2091 12 38 10.2091 38 8C38 5.79086 36.2091 4 34 4C31.7909 4 30 5.79086 30 8C30 10.2091 31.7909 12 34 12Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M11 11L15 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M30 12L28 14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M34 33.5L28 26" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M14 31L18 27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

src/icons/svg/sibebar/sidebar-image.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 32 32">
+  <path
+    d="M6.437 28l-0.027 0.027-0.028-0.027h-2.393c-0.731-0.001-1.323-0.593-1.323-1.324v0-21.352c0.005-0.729 0.594-1.318 1.322-1.324h24.022c0.731 0 1.323 0.593 1.323 1.324v21.352c-0.005 0.729-0.594 1.318-1.322 1.324h-21.574zM26.667 20v-13.333h-21.333v18.667l13.333-13.333 8 8zM26.667 23.771l-8-8-9.563 9.563h17.563v-1.563zM10.667 14.667c-1.473 0-2.667-1.194-2.667-2.667s1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667s-1.194 2.667-2.667 2.667v0z">
+  </path>
+</svg>

src/icons/svg/sibebar/sidebar-mindmap.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 48 48">
+  <path
+    d="M8 28C10.2091 28 12 26.2091 12 24C12 21.7909 10.2091 20 8 20C5.79086 20 4 21.7909 4 24C4 26.2091 5.79086 28 8 28Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path>
+  <path
+    d="M42 8C43.1046 8 44 7.10457 44 6C44 4.89543 43.1046 4 42 4C40.8954 4 40 4.89543 40 6C40 7.10457 40.8954 8 42 8Z"
+    stroke="#333" stroke-width="4" stroke-linejoin="round"></path>
+  <path
+    d="M42 26C43.1046 26 44 25.1046 44 24C44 22.8954 43.1046 22 42 22C40.8954 22 40 22.8954 40 24C40 25.1046 40.8954 26 42 26Z"
+    stroke="#333" stroke-width="4" stroke-linejoin="round"></path>
+  <path
+    d="M42 44C43.1046 44 44 43.1046 44 42C44 40.8954 43.1046 40 42 40C40.8954 40 40 40.8954 40 42C40 43.1046 40.8954 44 42 44Z"
+    stroke="#333" stroke-width="4" stroke-linejoin="round"></path>
+  <path d="M32 6H20V42H32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
+    fill="transparent">
+  </path>
+  <path d="M12 24H32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

src/icons/svg/sibebar/sidebar-search.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 48 48">
+  <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect>
+  <path
+    d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
+    fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path>
+  <path d="M26.6568 14.3431C25.2091 12.8954 23.2091 12 21 12C18.7909 12 16.7909 12.8954 15.3431 14.3431" stroke="#333"
+    stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M33.2218 33.2218L41.7071 41.7071" stroke="#333" stroke-width="4" stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

src/icons/svg/sibebar/sidebar-text.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 48 48">
+  <path d="M20.1429 42H8C6.89543 42 6 41.1046 6 40V7C6 5.89543 6.89543 5 8 5H40C41.1046 5 42 5.89543 42 7V16.7167"
+    stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
+  <path d="M17 14L29 14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M23 28L23 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M27 38L37.5 23.5L42 27L31 42H27V38Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

src/icons/svg/sibebar/sidebar-video.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon svg-icon-path-icon fill" viewBox="0 0 48 48">
+  <path
+    d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z"
+    stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>
+  <path d="M20.5 28V21.9378L25.75 24.9689L31 28L25.75 31.0311L20.5 34.0622V28Z" fill="none" stroke="#333"
+    stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M6 15H42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M33 6L27 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+  <path d="M21 6L15 15" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -249,11 +249,49 @@ export default {
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)',
       });
+
+      /**
+       * 分组id列表
+       * 将 data.row_list 中的每一行转换为一个组
+       */
+      const group_component_id = this.data.row_list.flatMap((row, index) => {
+        // 查找每行中第一个包含 describe、label 或 stem 的组件
+        let findKey = '';
+        let findType = '';
+        row.col_list.some((col) => {
+          const findItem = col.grid_list.find(({ type }) => {
+            return ['describe', 'label', 'stem'].includes(type);
+          });
+          if (findItem) {
+            findKey = findItem.id;
+            findType = findItem.type;
+            return true;
+          }
+        });
+        let name = `组${index + 1}`;
+
+        // 如果有标签类组件，获取对应名称
+        if (findKey) {
+          let item = this.findChildComponentByKey(`grid-${findKey}`);
+          if (['describe', 'stem'].includes(findType)) {
+            name = item.data.content.replace(/<[^>]+>/g, ''); // 去掉html标签
+          } else if (findType === 'label') {
+            name = item.data.dynamicTags.map((tag) => tag.text).join(', ');
+          }
+        }
+
+        return {
+          name,
+          id_list: row.col_list.map((col) => col.grid_list.map((grid) => grid.id)),
+        };
+      });
+
       ContentSaveCoursewareContent({
         id: this.courseware_id,
         category: 'NEW',
         content: JSON.stringify(this.data),
         component_id_list,
+        group_component_id,
       }).then(() => {
         this.$message.success('保存成功');
         loading.close();
@@ -931,7 +969,7 @@ export default {
 
     // 获取子组件
     findChildComponentByKey(key) {
-      return this.$children.find((child) => child.$vnode.key === key);
+      return this.$refs.component.find((child) => child.$vnode.key === key);
     },
   },
 };