feat: 表格支持主动调整高度（#77）

src/hooks/useCreateElement.ts

@@ -164,6 +164,7 @@ export default () => {
         colHeader: false,
         colFooter: false,
       },
+      cellMinHeight: 36,
     })
   }
   

src/types/slides.ts

@@ -517,6 +517,8 @@ export interface TableTheme {
  * 
  * colWidths: 列宽数组，如[30, 50, 20]表示三列宽度分别为30%, 50%, 20%
  * 
+ * cellMinHeight: 单元格最小高度
+ * 
  * data: 表格数据
  */
 export interface PPTTableElement extends PPTBaseElement {
@@ -524,6 +526,7 @@ export interface PPTTableElement extends PPTBaseElement {
   outline: PPTElementOutline
   theme?: TableTheme
   colWidths: number[]
+  cellMinHeight: number
   data: TableCell[][]
 }
 

src/views/Editor/Canvas/Operate/TableElementOperate.vue

@@ -10,7 +10,7 @@
     <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
-        v-for="point in textElementResizeHandlers"
+        v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
         :rotate="elementInfo.rotate"
@@ -70,5 +70,5 @@ const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
 const scaleWidth = computed(() => (props.elementInfo.width + outlineWidth.value) * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 
-const { textElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
 </script>

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -118,6 +118,8 @@ export default (
     const elOriginTop = element.top
     const elOriginWidth = element.width
     const elOriginHeight = element.height
+
+    const originTableCellMinHeight = element.type === 'table' ? element.cellMinHeight : 0
     
     const elRotate = ('rotate' in element && element.rotate) ? element.rotate : 0
     const rotateRadian = Math.PI * elRotate / 180
@@ -412,6 +414,16 @@ export default (
             path,
           }
         }
+        if (el.type === 'table') {
+          let cellMinHeight = originTableCellMinHeight + (height - elOriginHeight) / el.data.length
+          cellMinHeight = cellMinHeight < 36 ? 36 : cellMinHeight
+
+          if (cellMinHeight === originTableCellMinHeight) return { ...el, left, width }
+          return {
+            ...el, left, top, width, height,
+            cellMinHeight: cellMinHeight < 36 ? 36 : cellMinHeight,
+          }
+        }
         return { ...el, left, top, width, height }
       })
     }

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -82,7 +82,7 @@
           :min="minSize"
           :max="800"
           :step="5"
-          :disabled="isHorizontalText" 
+          :disabled="isHorizontalText || handleElement!.type === 'table'" 
           :value="height" 
           @change="value => updateHeight(value as number)"
           style="flex: 4;"

src/views/components/element/TableElement/BaseTableElement.vue

@@ -15,6 +15,7 @@
         <StaticTable
           :data="elementInfo.data"
           :width="elementInfo.width"
+          :cellMinHeight="elementInfo.cellMinHeight"
           :colWidths="elementInfo.colWidths"
           :outline="elementInfo.outline"
           :theme="elementInfo.theme"

src/views/components/element/TableElement/EditableTable.vue

@@ -26,7 +26,7 @@
         <col span="1" v-for="(width, index) in colSizeList" :key="index" :width="width">
       </colgroup>
       <tbody>
-        <tr v-for="(rowCells, rowIndex) in tableCells" :key="rowIndex">
+        <tr v-for="(rowCells, rowIndex) in tableCells" :key="rowIndex" :style="{ height: cellMinHeight + 'px' }">
           <td 
             class="cell"
             :class="{
@@ -53,11 +53,12 @@
               v-if="activedCell === `${rowIndex}_${colIndex}`"
               class="cell-text" 
               :class="{ 'active': activedCell === `${rowIndex}_${colIndex}` }"
+              :style="{ minHeight: (cellMinHeight - 4) + 'px' }"
               :value="cell.text"
               @updateValue="value => handleInput(value, rowIndex, colIndex)"
               @insertExcelData="value => insertExcelData(value, rowIndex, colIndex)"
             />
-            <div v-else class="cell-text" v-html="formatText(cell.text)" />
+            <div v-else class="cell-text" :style="{ minHeight: (cellMinHeight - 4) + 'px' }" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -89,6 +90,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  cellMinHeight: {
+    type: Number,
+    required: true,
+  },
   colWidths: {
     type: Array as PropType<number[]>,
     required: true,
@@ -700,10 +705,6 @@ table {
     }
   }
 
-  tr {
-    height: 36px;
-  }
-
   .cell {
     position: relative;
     white-space: normal;
@@ -724,7 +725,6 @@ table {
   }
 
   .cell-text {
-    min-height: 32px;
     padding: 5px;
     line-height: 1.5;
     user-select: none;

src/views/components/element/TableElement/StaticTable.vue

@@ -17,10 +17,7 @@
         <col span="1" v-for="(width, index) in colSizeList" :key="index" :width="width">
       </colgroup>
       <tbody>
-        <tr
+        <tr v-for="(rowCells, rowIndex) in data" :key="rowIndex" :style="{ height: cellMinHeight + 'px' }">
-          v-for="(rowCells, rowIndex) in data" 
-          :key="rowIndex"
-        >
           <td 
             class="cell"
             :style="{
@@ -35,7 +32,7 @@
             :colspan="cell.colspan"
             v-show="!hideCells.includes(`${rowIndex}_${colIndex}`)"
           >
-            <div class="cell-text" v-html="formatText(cell.text)" />
+            <div class="cell-text" :style="{ minHeight: (cellMinHeight - 4) + 'px' }" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -59,6 +56,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  cellMinHeight: {
+    type: Number,
+    required: true,
+  },
   colWidths: {
     type: Array as PropType<number[]>,
     required: true,
@@ -144,10 +145,6 @@ table {
     }
   }
 
-  tr {
-    height: 36px;
-  }
-
   .cell {
     position: relative;
     white-space: normal;
@@ -156,7 +153,6 @@ table {
   }
 
   .cell-text {
-    min-height: 32px;
     padding: 5px;
     line-height: 1.5;
   }

src/views/components/element/TableElement/index.vue

@@ -21,6 +21,7 @@
           @mousedown.stop
           :data="elementInfo.data"
           :width="elementInfo.width"
+          :cellMinHeight="elementInfo.cellMinHeight"
           :colWidths="elementInfo.colWidths"
           :outline="elementInfo.outline"
           :theme="elementInfo.theme"