feat: 支持文本段落首行缩进（#112）

src/assets/styles/prosemirror.scss

@@ -15,6 +15,10 @@
     color: inherit;
   }
 
+  p {
+    text-indent: var(--textIndent);
+  }
+
   p + p {
     margin-top: 5px;
   }

src/types/slides.ts

@@ -141,6 +141,7 @@ export interface PPTTextElement extends PPTBaseElement {
   wordSpace?: number;
   opacity?: number;
   shadow?: PPTElementShadow;
+  textIndent?: number;
 }
 
 

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

@@ -234,6 +234,13 @@
         <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
       </Select>
     </div>
+    <div class="row">
+      <div style="flex: 2;">首行缩进：</div>
+      <Select style="flex: 3;" :value="textIndent" @change="value => updateTextIndent(value)">
+        <template #suffixIcon><IconIndentRight /></template>
+        <SelectOption v-for="item in textIndentOptions" :key="item" :value="item">{{item}}px</SelectOption>
+      </Select>
+    </div>
     <div class="row">
       <div style="flex: 2;">文本框填充：</div>
       <Popover trigger="click">
@@ -368,6 +375,7 @@ export default defineComponent({
     const fill = ref<string>()
     const lineHeight = ref<number>()
     const wordSpace = ref<number>()
+    const textIndent = ref<number>()
 
     watch(handleElement, () => {
       if (!handleElement.value || handleElement.value.type !== 'text') return
@@ -375,6 +383,7 @@ export default defineComponent({
       fill.value = handleElement.value.fill || '#fff'
       lineHeight.value = handleElement.value.lineHeight || 1.5
       wordSpace.value = handleElement.value.wordSpace || 0
+      textIndent.value = handleElement.value.textIndent || 0
     }, { deep: true, immediate: true })
 
     const fontSizeOptions = [
@@ -384,6 +393,7 @@ 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 updateLineHeight = (value: number) => {
@@ -395,6 +405,11 @@ export default defineComponent({
       updateElement({ wordSpace: value })
     }
 
+    // 设置字间距
+    const updateTextIndent = (value: number) => {
+      updateElement({ textIndent: value })
+    }
+
     // 设置文本框填充
     const updateFill = (value: string) => {
       updateElement({ fill: value })
@@ -433,14 +448,17 @@ export default defineComponent({
       fill,
       lineHeight,
       wordSpace,
+      textIndent,
       richTextAttrs,
       availableFonts,
       webFonts,
       fontSizeOptions,
       lineHeightOptions,
       wordSpaceOptions,
+      textIndentOptions,
       updateLineHeight,
       updateWordSpace,
+      updateTextIndent,
       updateFill,
       emitRichTextCommand,
       emitBatchRichTextCommand,

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

@@ -28,7 +28,11 @@
           :height="elementInfo.height"
           :outline="elementInfo.outline"
         />
-        <div class="text ProseMirror-static" v-html="elementInfo.content"></div>
+        <div 
+          class="text ProseMirror-static" 
+          :style="{ '--textIndent': `${elementInfo.textIndent || 0}px` }"
+          v-html="elementInfo.content"
+        ></div>
       </div>
     </div>
   </div>

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

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