From 9319d24f5a4e258f14bb1521d53e3059e40ea861 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 1 Apr 2021 22:11:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E7=9A=84=E5=A4=87=E6=B3=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/slides.ts               |  1 +
 src/views/Editor/Remark/index.vue | 59 +++++++++++++++++++++++++++++++
 src/views/Editor/index.vue        |  8 ++++-
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Editor/Remark/index.vue

diff --git a/src/types/slides.ts b/src/types/slides.ts
index aff28a99..08c043a5 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -205,6 +205,7 @@ export interface SlideBackground {
 export interface Slide {
   id: string;
   elements: PPTElement[];
+  remark?: string;
   background?: SlideBackground;
   animations?: PPTAnimation[];
   turningMode?: 'no' | 'fade' | 'slideX' | 'slideY';
diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue
new file mode 100644
index 00000000..b84af9a8
--- /dev/null
+++ b/src/views/Editor/Remark/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="remark">
+    <textarea
+      :value="remark"
+      placeholder="点击输入演讲者备注"
+      @input="$event => handleInput($event)"
+    ></textarea>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { MutationTypes, useStore } from '@/store'
+import { Slide } from '@/types/slides'
+
+export default defineComponent({
+  name: 'remark',
+  setup() {
+    const store = useStore()
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
+    const remark = computed(() => currentSlide.value?.remark || '')
+
+    const handleInput = (e: InputEvent) => {
+      const value = (e.target as HTMLTextAreaElement).value
+      store.commit(MutationTypes.UPDATE_SLIDE, { remark: value })
+    }
+
+    return {
+      remark,
+      handleInput,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.remark {
+  position: relative;
+  border-top: 1px solid $borderColor;
+  background-color: $lightGray;
+
+  textarea {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+    resize: none;
+    border: 0;
+    outline: 0;
+    padding: 8px;
+    font-size: 12px;
+    background-color: transparent;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index c49ab158..ebbae54e 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -6,6 +6,7 @@
       <div class="layout-content-center">
         <CanvasTool class="center-top" />
         <Canvas class="center-body" />
+        <Remark class="center-bottom" />
       </div>
       <Toolbar class="layout-content-right" />
     </div>
@@ -23,6 +24,7 @@ import Canvas from './Canvas/index.vue'
 import CanvasTool from './CanvasTool/index.vue'
 import Thumbnails from './Thumbnails/index.vue'
 import Toolbar from './Toolbar/index.vue'
+import Remark from './Remark/index.vue'
 
 export default defineComponent({
   name: 'editor',
@@ -32,6 +34,7 @@ export default defineComponent({
     CanvasTool,
     Thumbnails,
     Toolbar,
+    Remark,
   },
   setup() {
     useGlobalHotkey()
@@ -63,7 +66,10 @@ export default defineComponent({
     height: 40px;
   }
   .center-body {
-    height: calc(100% - 40px);
+    height: calc(100% - 40px - 40px);
+  }
+  .center-bottom {
+    height: 40px;
   }
 }
 .layout-content-right {