将宽度从 % 改为 fr

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

@@ -227,29 +227,29 @@ export default {
 
         if (type === 'left' && j > 0) {
           const prevGrid = row.width_list[j - 1];
-          const prevWidth = Number(prevGrid.replace('%', ''));
-          const width = Number(row.width_list[j].replace('%', ''));
+          const prevWidth = Number(prevGrid.replace('fr', ''));
+          const width = Number(row.width_list[j].replace('fr', ''));
           const max = prevWidth + width - 10;
           if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
             return;
           }
           // 计算拖动的距离与总宽度的比例
           const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-          row.width_list[j + 1] = `${prevWidth + ratio}%`;
-          row.width_list[j] = `${width - ratio}%`;
+          row.width_list[j + 1] = `${prevWidth + ratio}fr`;
+          row.width_list[j] = `${width - ratio}fr`;
           this.$forceUpdate();
         }
         if (type === 'right' && j < row.col_list.length - 1) {
           let nextGrid = row.width_list[j + 1];
-          const nextWidth = Number(nextGrid.replace('%', ''));
-          const width = Number(row.width_list[j].replace('%', ''));
+          const nextWidth = Number(nextGrid.replace('fr', ''));
+          const width = Number(row.width_list[j].replace('fr', ''));
           const max = nextWidth + width - 10;
           if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
             return;
           }
           const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-          row.width_list[j + 1] = `${nextWidth - ratio}%`;
-          row.width_list[j] = `${width + ratio}%`;
+          row.width_list[j + 1] = `${nextWidth - ratio}fr`;
+          row.width_list[j] = `${width + ratio}fr`;
           this.$forceUpdate();
         }
       };
@@ -263,11 +263,11 @@ export default {
       let col = this.data.row_list[i].col_list[j];
       let grid_template_columns = '0';
       col.grid_list.forEach(({ width }, i) => {
-        const w = `calc(${width} - ${(16 * (col.grid_list.length - 1)) / col.grid_list.length}px)`;
+        const w = `${width}`;
         if (i === col.grid_list.length - 1) {
           grid_template_columns += ` ${w} 0`;
         } else {
-          grid_template_columns += ` ${w} 16px`;
+          grid_template_columns += ` ${w} `;
         }
       });
       col.grid_template_columns = grid_template_columns;
@@ -293,7 +293,7 @@ export default {
           const delW = width_list[j];
           width_list.splice(j, 1);
           this.data.row_list[i].width_list = width_list.map((item) => {
-            return `${Number(item.replace('%', '')) + Number(delW.replace('%', '') / width_list.length)}%`;
+            return `${Number(item.replace('fr', '')) + Number(delW.replace('fr', '') / width_list.length)}fr`;
           });
         }
 
@@ -305,7 +305,7 @@ export default {
         // 如果删除后还有 grid 则重新计算 grid 的 row 和 width
         if (gridList?.length > 0) {
           let delNum = gridList.filter(({ row }) => row === delRow).length;
-          let diff = Number(delW.replace('%', '')) / delNum;
+          let diff = Number(delW.replace('fr', '')) / delNum;
           if (delNum === 0) {
             // 删除 grid 后面的 row 都减 1
             gridList.forEach((item) => {
@@ -316,7 +316,7 @@ export default {
           } else {
             gridList.forEach((item) => {
               if (item.row === delRow) {
-                item.width = `${Number(item.width.replace('%', '')) + diff}%`;
+                item.width = `${Number(item.width.replace('fr', '')) + diff}fr`;
               }
             });
           }
@@ -368,10 +368,9 @@ export default {
 
       // 计算 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 `;
+          gridTemCols += `${item.width} 8px 8px `;
         }
       });
 
@@ -500,12 +499,12 @@ export default {
       let col = row.col_list;
       if (col.length <= 1) {
         return {
-          gridTemplateColumns: '0 100% 0',
+          gridTemplateColumns: '0 100fr 0',
         };
       }
       let str = row.width_list
         .map((item) => {
-          return `calc(${item} - ${(16 * (row.width_list.length - 1)) / row.width_list.length}px)`;
+          return `${item}`;
         })
         .join(' 16px ');
       let gridTemplateColumns = `0 ${str} 0`;
@@ -533,7 +532,7 @@ export default {
         grid.splice(this.curGrid, 0, {
           id,
           grid_area: letter,
-          width: '100%',
+          width: '100fr',
           height: 'auto',
           row: rowNum,
           type: this.curType,
@@ -551,7 +550,7 @@ export default {
         grid.splice(this.curGrid, 0, {
           id,
           grid_area: letter,
-          width: '100%',
+          width: '100fr',
           height: 'auto',
           row: rowNum,
           type: this.curType,
@@ -561,13 +560,13 @@ export default {
         let w = 0;
         grid.forEach((item, i) => {
           if (item.row === rowNum && i !== this.curGrid) {
-            let width = Number(item.width.replace('%', ''));
+            let width = Number(item.width.replace('fr', ''));
             let diff = width / allRowNum;
-            item.width = `${width - diff}%`;
+            item.width = `${width - diff}fr`;
             w += diff;
           }
         });
-        grid[this.curGrid].width = `${w}%`;
+        grid[this.curGrid].width = `${w}fr`;
       }
     },
     /**
@@ -582,22 +581,22 @@ export default {
 
       let w = 0;
       row.width_list.forEach((item, i) => {
-        let itemW = Number(item.replace('%', ''));
+        let itemW = Number(item.replace('fr', ''));
         let rowW = itemW / (row.width_list.length + 1);
         w += rowW;
-        row.width_list[i] = `${itemW - rowW}%`;
+        row.width_list[i] = `${itemW - rowW}fr`;
       });
-      row.width_list.splice(this.curCol, 0, `${w}%`);
+      row.width_list.splice(this.curCol, 0, `${w}fr`);
 
       col.splice(this.curCol, 0, {
-        width: '100%',
+        width: '100fr',
         height: 'auto',
         grid_list: [
           {
             id,
             grid_area: letter,
             row: 1,
-            width: '100%',
+            width: '100fr',
             height: 'auto',
             type: this.curType,
           },
@@ -612,16 +611,16 @@ export default {
       const letter = `L${getRandomNumber(6)}`;
 
       this.data.row_list.splice(this.curRow + 1, 0, {
-        width_list: ['100%'],
+        width_list: ['100fr'],
         col_list: [
           {
-            width: '100%',
+            width: '100fr',
             height: 'auto',
             grid_list: [
               {
                 id,
                 grid_area: letter,
-                width: '100%',
+                width: '100fr',
                 height: 'auto',
                 row: 1,
                 type: this.curType,

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

@@ -174,15 +174,10 @@ export default {
       let col = row.col_list;
       if (col.length <= 1) {
         return {
-          gridTemplateColumns: '100%',
+          gridTemplateColumns: '100fr',
         };
       }
-      let str = row.width_list
-        .map((item) => {
-          return `calc(${item} - ${(16 * (row.width_list.length - 1)) / row.width_list.length}px)`;
-        })
-        .join(' 16px ');
-      let gridTemplateColumns = `${str}`;
+      let gridTemplateColumns = row.width_list.join(' ');
 
       return {
         gridAutoFlow: 'column',
@@ -232,7 +227,7 @@ export default {
         } 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 needNum = maxCol - filter.length; // 需要的数量
 
           let str = '';
           if (filter.length === 1) {
@@ -250,10 +245,9 @@ export default {
 
       // 计算 grid_template_columns
       let gridTemplateColumns = '';
-      let rowOneNum = grid.filter((item) => item.row === 1).length;
       grid.forEach((item) => {
         if (item.row === 1) {
-          gridTemplateColumns += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) `;
+          gridTemplateColumns += `${item.width} `;
         }
       });
 
@@ -358,11 +352,12 @@ export default {
 
         .row {
           display: grid;
-          row-gap: 16px;
+          gap: 16px;
 
           .col {
             display: grid;
             gap: 16px;
+            overflow: auto;
           }
         }
       }