预览显示分组

src/components/CommonPreview.vue

@@ -8,6 +8,10 @@
         <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>
+        </div>
         <div class="operator">
           <slot name="operator" :courseware="courseware_info"></slot>
         </div>
@@ -24,6 +28,9 @@
           <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"
@@ -219,6 +226,7 @@ export default {
       node_list: [],
       data: { row_list: [] },
       component_list: [],
+      content_group_row_list: [],
       remark_list: [],
       remark_list_obj: {}, // 存放以组件为对象的数组
       visible: false,
@@ -256,6 +264,8 @@ export default {
       file_list: [],
       total_count: 0,
       loading: false,
+      isShowGroup: false,
+      groupShowAll: true,
     };
   },
   computed: {
@@ -308,14 +318,20 @@ export default {
      * @param {string} id - 课件ID
      */
     getCoursewareComponentContent_View(id) {
-      ContentGetCoursewareContent_View({ id }).then(({ content, component_list }) => {
+      ContentGetCoursewareContent_View({ id }).then(({ content, component_list, content_group_row_list }) => {
         if (content) {
-          this.data = JSON.parse(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;
+        this.content_group_row_list = JSON.parse(content_group_row_list) || [];
       });
     },
     /**
@@ -349,6 +365,7 @@ export default {
         courseware_id: id,
       }).then(({ remark_list }) => {
         this.remark_list = remark_list;
+        if (!remark_list) return;
         remarkListObj = remark_list.reduce((acc, item) => {
           if (!acc[item.component_id]) {
             acc[item.component_id] = [];
@@ -575,6 +592,11 @@ export default {
         flex: 1;
       }
 
+      .group {
+        display: flex;
+        align-items: center;
+      }
+
       .operator {
         display: flex;
         column-gap: 8px;

src/layouts/default/header/index.vue

@@ -1,7 +1,8 @@
 <template>
   <header class="header">
     <div class="logo">
-      <el-image class="logo-image" :src="require('../../../assets/gcls_logo.png')" />
+      <el-image class="logo-image" :src="require('../../../assets/header/home_logo.png')" />
+      <h3>智慧梧桐数字教材编辑器</h3>
     </div>
 
     <ul class="header-list">
@@ -113,13 +114,20 @@ export default {
   border-bottom: 1px solid #ebebeb;
 
   .logo {
+    display: flex;
     flex: 1;
+    column-gap: 12px;
+    align-items: center;
     height: 48px;
     margin-right: 36px;
 
     &-image {
       height: 100%;
     }
+
+    h3 {
+      color: $font-color;
+    }
   }
 
   &-list {

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -15,7 +15,15 @@
     ]"
   >
     <template v-for="(row, i) in data.row_list">
-      <div :key="i" class="row" :style="getMultipleColStyle(i)">
+      <div v-show="computedRowVisibility(row.row_id)" :key="i" class="row" :style="getMultipleColStyle(i)">
+        <el-checkbox
+          v-if="
+            isShowGroup &&
+            groupRowList.find(({ row_id, is_pre_same_group }) => row.row_id === row_id && !is_pre_same_group)
+          "
+          v-model="rowCheckList[row.row_id]"
+          :class="['row-checkbox', `${row.row_id}`]"
+        />
         <!-- 列 -->
         <template v-for="(col, j) in row.col_list">
           <div :key="j" :class="['col', `col-${i}-${j}`]" :style="computedColStyle(col)">
@@ -115,6 +123,18 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    groupRowList: {
+      type: Array,
+      default: () => [],
+    },
+    isShowGroup: {
+      type: Boolean,
+      default: false,
+    },
+    groupShowAll: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -129,8 +149,22 @@ export default {
       }, // courserware盒子原始距离页面顶部和左边的距离
       menuPosition: { x: 0, y: 0, select_node: '' }, // 用于存储菜单的位置
       componentId: '', // 添加批注的组件id
+      rowCheckList: {},
     };
   },
+  watch: {
+    groupRowList: {
+      handler(val) {
+        if (!val) return;
+        this.rowCheckList = val
+          .filter(({ is_pre_same_group }) => !is_pre_same_group)
+          .reduce((acc, row) => {
+            acc[row.row_id] = false;
+            return acc;
+          }, {});
+      },
+    },
+  },
   mounted() {
     const element = this.$refs.courserware;
     const rect = element.getBoundingClientRect();
@@ -170,6 +204,25 @@ export default {
       };
     },
     /**
+     * 计算行的可见性
+     * @params {string} rowId 行的ID
+     */
+    computedRowVisibility(rowId) {
+      if (this.groupShowAll) return true;
+      let { row_id, is_pre_same_group } = this.groupRowList.find(({ row_id }) => row_id === rowId);
+      if (is_pre_same_group) {
+        const index = this.groupRowList.findIndex(({ row_id }) => row_id === rowId);
+        if (index === -1) return false;
+        for (let i = index - 1; i >= 0; i--) {
+          if (!this.groupRowList[i].is_pre_same_group) {
+            return this.rowCheckList[this.groupRowList[i].row_id];
+          }
+        }
+        return false;
+      }
+      return this.rowCheckList[row_id];
+    },
+    /**
      * 分割整数为多个 1的倍数
      * @param {number} num
      * @param {number} parts
@@ -342,6 +395,11 @@ export default {
       gap: 16px;
       overflow: hidden;
     }
+
+    .row-checkbox {
+      position: absolute;
+      left: 4px;
+    }
   }
 
   .custom-context-menu,