feat: 添加基础的备注功能

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';

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>

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 {