feat: 支持文本框段间距

src/assets/styles/prosemirror.scss

@@ -20,7 +20,7 @@
   }
 
   p + p {
-    margin-top: 5px;
+    margin-top: var(--paragraphSpace);
   }
 
   ul {

src/hooks/useExport.ts

@@ -412,6 +412,7 @@ export default () => {
           if (el.shadow) options.shadow = getShadowOption(el.shadow)
           if (el.outline?.width) options.line = getOutlineOption(el.outline)
           if (el.opacity !== undefined) options.transparency = (1 - el.opacity) * 100
+          if (el.paragraphSpace !== undefined) options.paraSpaceBefore = el.paragraphSpace * 0.75
 
           pptxSlide.addText(textProps, options)
         }

src/plugins/icon.ts

@@ -100,6 +100,7 @@ import {
   Share,
   IndentLeft,
   IndentRight,
+  VerticalSpacingBetweenItems,
 } from '@icon-park/vue-next'
 
 const icons = {
@@ -201,6 +202,7 @@ const icons = {
   Share,
   IndentLeft,
   IndentRight,
+  VerticalSpacingBetweenItems,
 }
 
 export default {

src/types/slides.ts

@@ -129,6 +129,10 @@ interface PPTBaseElement {
  * opacity?: 不透明度，默认1
  * 
  * shadow?: 阴影
+ * 
+ * textIndent?: 段落首行缩进
+ * 
+ * paragraphSpace?: 段间距，默认 5px
  */
 export interface PPTTextElement extends PPTBaseElement {
   type: 'text';
@@ -142,6 +146,7 @@ export interface PPTTextElement extends PPTBaseElement {
   opacity?: number;
   shadow?: PPTElementShadow;
   textIndent?: number;
+  paragraphSpace?: number;
 }
 
 

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -227,6 +227,13 @@
         <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
       </Select>
     </div>
+    <div class="row">
+      <div style="flex: 2;">段间距：</div>
+      <Select style="flex: 3;" :value="paragraphSpace" @change="value => updateParagraphSpace(value)">
+        <template #suffixIcon><IconVerticalSpacingBetweenItems /></template>
+        <SelectOption v-for="item in paragraphSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
+      </Select>
+    </div>
     <div class="row">
       <div style="flex: 2;">字间距：</div>
       <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
@@ -376,6 +383,7 @@ export default defineComponent({
     const lineHeight = ref<number>()
     const wordSpace = ref<number>()
     const textIndent = ref<number>()
+    const paragraphSpace = ref<number>()
 
     watch(handleElement, () => {
       if (!handleElement.value || handleElement.value.type !== 'text') return
@@ -384,6 +392,7 @@ export default defineComponent({
       lineHeight.value = handleElement.value.lineHeight || 1.5
       wordSpace.value = handleElement.value.wordSpace || 0
       textIndent.value = handleElement.value.textIndent || 0
+      paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace
     }, { deep: true, immediate: true })
 
     const fontSizeOptions = [
@@ -394,18 +403,24 @@ export default defineComponent({
     const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
     const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
     const textIndentOptions = [0, 48, 96, 144, 192, 240, 288, 336]
+    const paragraphSpaceOptions = [0, 5, 10, 15, 20, 25, 30, 40, 50, 80]
 
     // 设置行高
     const updateLineHeight = (value: number) => {
       updateElement({ lineHeight: value })
     }
 
+    // 设置段间距
+    const updateParagraphSpace = (value: number) => {
+      updateElement({ paragraphSpace: value })
+    }
+
     // 设置字间距
     const updateWordSpace = (value: number) => {
       updateElement({ wordSpace: value })
     }
 
-    // 设置字间距
+    // 设置首行缩进
     const updateTextIndent = (value: number) => {
       updateElement({ textIndent: value })
     }
@@ -449,6 +464,7 @@ export default defineComponent({
       lineHeight,
       wordSpace,
       textIndent,
+      paragraphSpace,
       richTextAttrs,
       availableFonts,
       webFonts,
@@ -456,7 +472,9 @@ export default defineComponent({
       lineHeightOptions,
       wordSpaceOptions,
       textIndentOptions,
+      paragraphSpaceOptions,
       updateLineHeight,
+      updateParagraphSpace,
       updateWordSpace,
       updateTextIndent,
       updateFill,

src/views/components/element/TextElement/BaseTextElement.vue

@@ -30,7 +30,10 @@
         />
         <div 
           class="text ProseMirror-static" 
-          :style="{ '--textIndent': `${elementInfo.textIndent || 0}px` }"
+          :style="{
+            '--textIndent': `${elementInfo.textIndent || 0}px`,
+            '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
+          }"
           v-html="elementInfo.content"
         ></div>
       </div>

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

@@ -39,7 +39,10 @@
           :defaultFontName="elementInfo.defaultFontName"
           :editable="!elementInfo.lock"
           :value="elementInfo.content"
-          :style="{ '--textIndent': `${elementInfo.textIndent || 0}px` }"
+          :style="{
+            '--textIndent': `${elementInfo.textIndent || 0}px`,
+            '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
+          }"
           @update="value => updateContent(value)"
           @blur="checkEmptyText()"
           @mousedown="$event => handleSelectElement($event, false)"