From 6f087bfe978e0657ddd37c1f88849f15e99e4256 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 28 May 2022 14:58:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E6=AE=B5=E8=90=BD=E9=A6=96=E8=A1=8C=E7=BC=A9=E8=BF=9B=EF=BC=88?=
 =?UTF-8?q?#112=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/prosemirror.scss             |  4 ++++
 src/types/slides.ts                            |  1 +
 .../ElementStylePanel/TextStylePanel.vue       | 18 ++++++++++++++++++
 .../element/TextElement/BaseTextElement.vue    |  6 +++++-
 .../components/element/TextElement/index.vue   |  1 +
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/prosemirror.scss b/src/assets/styles/prosemirror.scss
index cc43fca5..c748a397 100644
--- a/src/assets/styles/prosemirror.scss
+++ b/src/assets/styles/prosemirror.scss
@@ -15,6 +15,10 @@
     color: inherit;
   }
 
+  p {
+    text-indent: var(--textIndent);
+  }
+
   p + p {
     margin-top: 5px;
   }
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 4d2110e0..a3c413d1 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -141,6 +141,7 @@ export interface PPTTextElement extends PPTBaseElement {
   wordSpace?: number;
   opacity?: number;
   shadow?: PPTElementShadow;
+  textIndent?: number;
 }
 
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 5b06ba65..81412f82 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/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,
diff --git a/src/views/components/element/TextElement/BaseTextElement.vue b/src/views/components/element/TextElement/BaseTextElement.vue
index bc969868..ab3ea9ff 100644
--- a/src/views/components/element/TextElement/BaseTextElement.vue
+++ b/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>
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index 19699689..267fdf04 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/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)"