feat: 添加幻灯片备注功能

README.md

@@ -25,7 +25,6 @@ npm run serve
 - 历史记录
 - 快捷键
 - 右键菜单
-- 主题设置
 
 ## 幻灯片页面编辑
 - 页面添加、删除
@@ -33,6 +32,8 @@ npm run serve
 - 页面复制粘贴
 - 背景设置（纯色、渐变、图片）
 - 网格线
+- 主题设置
+- 幻灯片备注
 
 ## 幻灯片元素编辑
 - 元素添加、删除
@@ -100,7 +101,6 @@ npm run serve
 - 画笔工具
 
 # 📃 TODO
-- [ ] 幻灯片备注
 - [ ] 幻灯片模板
 - [ ] 图表缩略图优化
 - [ ] 公式元素

src/views/Editor/Remark/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="remark">
+    <div 
+      class="resize-handler"
+      @mousedown="$event => resize($event)"
+    ></div>
     <textarea
       :value="remark"
       placeholder="点击输入演讲者备注"
@@ -15,7 +19,13 @@ import { Slide } from '@/types/slides'
 
 export default defineComponent({
   name: 'remark',
-  setup() {
+  props: {
+    height: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
     const store = useStore()
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
     const remark = computed(() => currentSlide.value?.remark || '')
@@ -25,9 +35,36 @@ export default defineComponent({
       store.commit(MutationTypes.UPDATE_SLIDE, { remark: value })
     }
 
+    const resize = (e: MouseEvent) => {
+      let isMouseDown = true
+      const startPageY = e.pageY
+      const originHeight = props.height
+
+      document.onmousemove = e => {
+        if (!isMouseDown) return
+
+        const currentPageY = e.pageY
+
+        const moveY = currentPageY - startPageY
+        let newHeight = -moveY + originHeight
+
+        if (newHeight < 40) newHeight = 40
+        if (newHeight > 120) newHeight = 120
+
+        emit('update:height', newHeight)
+      }
+
+      document.onmouseup = () => {
+        isMouseDown = false
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+
     return {
       remark,
       handleInput,
+      resize,
     }
   },
 })
@@ -56,4 +93,13 @@ export default defineComponent({
     background-color: transparent;
   }
 }
+.resize-handler {
+  height: 7px;
+  position: absolute;
+  top: -3px;
+  left: 0;
+  right: 0;
+  cursor: n-resize;
+  z-index: 2;
+}
 </style>

src/views/Editor/index.vue

@@ -5,8 +5,12 @@
       <Thumbnails class="layout-content-left" />
       <div class="layout-content-center">
         <CanvasTool class="center-top" />
-        <Canvas class="center-body" />
+        <Canvas class="center-body" :style="{ height: `calc(100% - ${remarkHeight + 40}px)` }" />
-        <Remark class="center-bottom" />
+        <Remark
+          class="center-bottom" 
+          v-model:height="remarkHeight" 
+          :style="{ height: `${remarkHeight}px` }"
+        />
       </div>
       <Toolbar class="layout-content-right" />
     </div>
@@ -14,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 import useGlobalHotkey from '@/hooks/useGlobalHotkey'
 import usePasteEvent from '@/hooks/usePasteEvent'
@@ -37,8 +41,14 @@ export default defineComponent({
     Remark,
   },
   setup() {
+    const remarkHeight = ref(40)
+
     useGlobalHotkey()
     usePasteEvent()
+
+    return {
+      remarkHeight,
+    }
   },
 })
 </script>
@@ -65,12 +75,6 @@ export default defineComponent({
   .center-top {
     height: 40px;
   }
-  .center-body {
-    height: calc(100% - 40px - 40px);
-  }
-  .center-bottom {
-    height: 40px;
-  }
 }
 .layout-content-right {
   width: 260px;