优化创建框架

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

@@ -27,16 +27,7 @@
             :data-row="i"
             :data-col="j"
           ></span>
-          <div
-            :key="j"
-            :class="['col', `col-${i}-${j}`]"
-            :style="{
-              width: col.width,
-              gridTemplateAreas: col.grid_template_areas,
-              gridTemplateColumns: col.grid_template_columns,
-              gridTemplateRows: col.grid_template_rows,
-            }"
-          >
+          <div :key="j" :class="['col', `col-${i}-${j}`]" :style="computedColStyle(col)">
             <!-- 网格 -->
             <template v-for="(grid, k) in col.grid_list">
               <span
@@ -313,19 +304,6 @@ export default {
 
         // 如果删除后还有 grid 则重新计算 grid 的 row 和 width
         if (gridList?.length > 0) {
-          let maxCol = 0; // 最大列数
-          let rowList = new Map();
-          gridList.forEach(({ row }) => {
-            rowList.set(row, (rowList.get(row) || 0) + 1);
-          });
-          let curMaxRow = 0; // 当前数量最大 row 的值
-          rowList.forEach((value, key) => {
-            if (value > maxCol) {
-              maxCol = value;
-              curMaxRow = key;
-            }
-          });
-
           let delNum = gridList.filter(({ row }) => row === delRow).length;
           let diff = Number(delW.replace('%', '')) / delNum;
           if (delNum === 0) {
@@ -342,53 +320,68 @@ export default {
               }
             });
           }
-          // 计算 grid_template_areas
-          let gridStr = '';
-          let gridArr = [];
-          gridList.forEach(({ grid_area, row }) => {
-            if (!gridArr[row - 1]) {
-              gridArr[row - 1] = [];
-            }
-            if (curMaxRow === row) {
-              gridArr[row - 1].push(`left-${grid_area} ${grid_area} right-${grid_area}`);
-            } else {
-              let filter = gridList.filter((item) => item.row === row);
-              let find = filter.findIndex((item) => item.grid_area === grid_area);
-              let needNum = (maxCol - filter.length) * 3; // 需要的数量
-
-              let str = '';
-              if (filter.length === 1) {
-                str = ` ${grid_area} `.repeat(needNum);
-              } else {
-                let arr = this.splitInteger(needNum, filter.length);
-                str = arr[find] === 0 ? ` ${grid_area} ` : ` ${grid_area} `.repeat(arr[find]);
-              }
-              gridArr[row - 1].push(`left-${grid_area} ${str} right-${grid_area}`);
-            }
-          });
-          gridArr.forEach((item) => {
-            gridStr += `'${item.join(' ')}' `;
-          });
-          colList.grid_template_areas = `'${'grid-top '.repeat(maxCol * 3)}' ${gridStr} '${'grid-bottom '.repeat(maxCol * 3)}'`;
-          colList.grid_template_rows = `0 ${gridList.map(({ height }) => height).join(' ')} 0`;
-
-          // 计算 grid_template_columns
-          let gridTemCols = '';
-          let rowOneNum = gridList.filter((item) => item.row === 1).length;
-          gridList.forEach((item) => {
-            // 如果第一行只有一个 grid 则不需要 - 8px
-            if (maxCol === 1 && item.row === 1) {
-              gridTemCols += `${item.width}`;
-              return;
-            }
-            if (item.row === 1) {
-              gridTemCols += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) 8px 8px `;
-            }
-          });
-          colList.grid_template_columns = `0 ${maxCol === 1 ? gridTemCols : gridTemCols.slice(0, gridTemCols.length - 8)} 0`;
         }
       };
     },
+    computedColStyle(col) {
+      let grid = col.grid_list;
+
+      let maxCol = 0; // 最大列数
+      let rowList = new Map();
+      grid.forEach(({ row }) => {
+        rowList.set(row, (rowList.get(row) || 0) + 1);
+      });
+      let curMaxRow = 0; // 当前数量最大 row 的值
+      rowList.forEach((value, key) => {
+        if (value > maxCol) {
+          maxCol = value;
+          curMaxRow = key;
+        }
+      });
+      // 计算 grid_template_areas
+      let gridStr = '';
+      let gridArr = [];
+      grid.forEach(({ grid_area, row }) => {
+        if (!gridArr[row - 1]) {
+          gridArr[row - 1] = [];
+        }
+        if (curMaxRow === row) {
+          gridArr[row - 1].push(`left-${grid_area} ${grid_area} right-${grid_area}`);
+        } else {
+          let filter = grid.filter((item) => item.row === row);
+          let find = filter.findIndex((item) => item.grid_area === grid_area);
+          let needNum = (maxCol - filter.length) * 3; // 需要的数量
+
+          let str = '';
+          if (filter.length === 1) {
+            str = ` ${grid_area} `.repeat(needNum + 1);
+          } else {
+            let arr = this.splitInteger(needNum, filter.length);
+            str = arr[find] === 0 ? ` ${grid_area} ` : ` ${grid_area} `.repeat(arr[find] + 1);
+          }
+          gridArr[row - 1].push(`left-${grid_area} ${str} right-${grid_area}`);
+        }
+      });
+      gridArr.forEach((item) => {
+        gridStr += `'${item.join(' ')}' `;
+      });
+
+      // 计算 grid_template_columns
+      let gridTemCols = '';
+      let rowOneNum = grid.filter((item) => item.row === 1).length;
+      grid.forEach((item) => {
+        if (item.row === 1) {
+          gridTemCols += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) 8px 8px `;
+        }
+      });
+
+      return {
+        width: col.width,
+        gridTemplateAreas: `'${'grid-top '.repeat(maxCol * 3)}' ${gridStr} '${'grid-bottom '.repeat(maxCol * 3)}'`,
+        gridTemplateColumns: `0 ${gridTemCols.slice(0, gridTemCols.length - 8)} 0`,
+        gridTemplateRows: `0 ${grid.map(({ height }) => height).join(' ')} 0`,
+      };
+    },
     /**
      * 分割整数为多个 3 的倍数
      * @param {number} num
@@ -576,58 +569,6 @@ export default {
         });
         grid[this.curGrid].width = `${w}%`;
       }
-
-      let maxCol = 0; // 最大列数
-      let rowList = new Map();
-      grid.forEach(({ row }) => {
-        rowList.set(row, (rowList.get(row) || 0) + 1);
-      });
-      let curMaxRow = 0; // 当前数量最大 row 的值
-      rowList.forEach((value, key) => {
-        if (value > maxCol) {
-          maxCol = value;
-          curMaxRow = key;
-        }
-      });
-      // 计算 grid_template_areas
-      let gridStr = '';
-      let gridArr = [];
-      grid.forEach(({ grid_area, row }) => {
-        if (!gridArr[row - 1]) {
-          gridArr[row - 1] = [];
-        }
-        if (curMaxRow === row) {
-          gridArr[row - 1].push(`left-${grid_area} ${grid_area} right-${grid_area}`);
-        } else {
-          let filter = grid.filter((item) => item.row === row);
-          let find = filter.findIndex((item) => item.grid_area === grid_area);
-          let needNum = (maxCol - filter.length) * 3; // 需要的数量
-
-          let str = '';
-          if (filter.length === 1) {
-            str = ` ${grid_area} `.repeat(needNum + 1);
-          } else {
-            let arr = this.splitInteger(needNum, filter.length);
-            str = arr[find] === 0 ? ` ${grid_area} ` : ` ${grid_area} `.repeat(arr[find] + 1);
-          }
-          gridArr[row - 1].push(`left-${grid_area} ${str} right-${grid_area}`);
-        }
-      });
-      gridArr.forEach((item) => {
-        gridStr += `'${item.join(' ')}' `;
-      });
-      col.grid_template_areas = `'${'grid-top '.repeat(maxCol * 3)}' ${gridStr} '${'grid-bottom '.repeat(maxCol * 3)}'`;
-      col.grid_template_rows = `0 ${grid.map(({ height }) => height).join(' ')} 0`;
-
-      // 计算 grid_template_columns
-      let gridTemCols = '';
-      let rowOneNum = grid.filter((item) => item.row === 1).length;
-      grid.forEach((item) => {
-        if (item.row === 1) {
-          gridTemCols += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) 8px 8px `;
-        }
-      });
-      col.grid_template_columns = `0 ${gridTemCols.slice(0, gridTemCols.length - 8)} 0`;
     },
     /**
      * 计算列插入的对象
@@ -651,9 +592,6 @@ export default {
       col.splice(this.curCol, 0, {
         width: '100%',
         height: 'auto',
-        grid_template_areas: `'grid-top grid-top grid-top' 'left-${letter} ${letter} right-${letter}' 'grid-bottom grid-bottom grid-bottom'`,
-        grid_template_columns: '0 100% 0',
-        grid_template_rows: '0 auto 0',
         grid_list: [
           {
             id,
@@ -679,9 +617,6 @@ export default {
           {
             width: '100%',
             height: 'auto',
-            grid_template_areas: `'grid-top grid-top grid-top' 'left-${letter} ${letter} right-${letter}' 'grid-bottom grid-bottom grid-bottom'`,
-            grid_template_columns: '0 100% 0',
-            grid_template_rows: '0 auto 0',
             grid_list: [
               {
                 id,