From c21b3b1b34d274200b33dd578351d2c5e1c36981 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Mon, 14 Feb 2022 21:12:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B1=BB=E5=9E=8B=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E3=80=81=E4=BC=98=E5=8C=96=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CheckboxButton.vue             |  6 ++++--
 src/components/ColorPicker/EditableInput.vue  |  2 +-
 src/components/FileInput.vue                  |  2 +-
 src/components/FullscreenSpin.vue             |  6 ++++--
 .../Editor/Canvas/ElementCreateSelection.vue  | 13 +++++++------
 src/views/Editor/Canvas/LinkDialog.vue        | 10 ++++++++--
 src/views/Editor/Canvas/MouseSelection.vue    |  6 ++++--
 .../Editor/Canvas/Operate/BorderLine.vue      |  6 +++---
 .../Canvas/Operate/LineElementOperate.vue     |  3 +--
 .../Editor/Canvas/Operate/LinkHandler.vue     | 19 +++++++++++++------
 .../Editor/Canvas/Operate/ResizeHandler.vue   |  1 +
 src/views/Editor/Canvas/Operate/index.vue     | 18 ++++++++++++------
 .../Editor/Canvas/hooks/useRotateElement.ts   |  4 ++--
 .../Editor/Canvas/hooks/useScaleElement.ts    |  6 +++---
 src/views/Editor/Canvas/index.vue             |  1 -
 src/views/Editor/CanvasTool/LinePool.vue      |  3 ---
 src/views/Editor/CanvasTool/MediaInput.vue    | 10 ++++++++--
 src/views/Editor/CanvasTool/ShapePool.vue     |  1 -
 src/views/Editor/EditorHeader/HotkeyDoc.vue   |  6 ++----
 src/views/Editor/Remark/index.vue             |  2 +-
 .../Editor/Toolbar/common/ColorButton.vue     |  6 ++++--
 src/views/Screen/SlideThumbnails.vue          |  1 +
 src/views/Screen/WritingBoardTool.vue         |  2 +-
 .../components/element/ElementOutline.vue     |  1 -
 24 files changed, 81 insertions(+), 54 deletions(-)

diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
index 7571ec1d..69bdb11b 100644
--- a/src/components/CheckboxButton.vue
+++ b/src/components/CheckboxButton.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'checkbox-button',
   props: {
     checked: {
@@ -13,7 +15,7 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ColorPicker/EditableInput.vue b/src/components/ColorPicker/EditableInput.vue
index f2b2904b..2b192006 100644
--- a/src/components/ColorPicker/EditableInput.vue
+++ b/src/components/ColorPicker/EditableInput.vue
@@ -29,7 +29,7 @@ export default defineComponent({
       return _hex.replace('#', '')
     })
 
-    const handleInput = (e: InputEvent) => {
+    const handleInput = (e: Event) => {
       const value = (e.target as HTMLInputElement).value
       if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
     }
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index 52953cef..5e6af4c9 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -32,7 +32,7 @@ export default defineComponent({
       inputRef.value.value = ''
       inputRef.value.click()
     }
-    const handleChange = (e: InputEvent) => {
+    const handleChange = (e: Event) => {
       const files = (e.target as HTMLInputElement).files
       if (files) emit('change', files)
     }
diff --git a/src/components/FullscreenSpin.vue b/src/components/FullscreenSpin.vue
index cce5db8b..528d9ec8 100644
--- a/src/components/FullscreenSpin.vue
+++ b/src/components/FullscreenSpin.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'fullscreen-spin',
   props: {
     loading: {
@@ -15,7 +17,7 @@ export default {
       default: '',
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 638c5f2f..3719fedc 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -5,11 +5,11 @@
     @mousedown.stop="$event => createSelection($event)"
     @contextmenu.stop.prevent
   >
-    <div :class="['selection', creatingElement.type]" v-if="start && end" :style="position">
+    <div :class="['selection', creatingElement?.type]" v-if="start && end" :style="position">
 
       <!-- 绘制线条专用 -->
       <svg
-        v-if="creatingElement.type === 'line' && lineData"
+        v-if="creatingElement?.type === 'line' && lineData"
         overflow="visible" 
         :width="lineData.svgWidth"
         :height="lineData.svgHeight"
@@ -18,10 +18,7 @@
           :d="lineData.path" 
           stroke="#d14424" 
           fill="none" 
-          stroke-width="1" 
-          stroke-linecap 
-          stroke-linejoin 
-          stroke-miterlimit 
+          stroke-width="2" 
         ></path>
 			</svg>
     </div>
@@ -230,6 +227,10 @@ export default defineComponent({
   height: 100%;
   z-index: 2;
   cursor: crosshair;
+
+  svg {
+    overflow: visible;
+  }
 }
 .selection {
   position: absolute;
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index 82a67791..e150c9f4 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -46,6 +46,12 @@ import useLink from '@/hooks/useLink'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
+type TypeKey = 'web' | 'slide'
+interface TabItem {
+  key: TypeKey;
+  label: string;
+}
+
 export default defineComponent({
   name: 'link-dialog',
   emits: ['close'],
@@ -56,7 +62,7 @@ export default defineComponent({
     const { handleElement } = storeToRefs(useMainStore())
     const { slides } = storeToRefs(useSlidesStore())
 
-    const type = ref<'web' | 'slide'>('web')
+    const type = ref<TypeKey>('web')
     const address = ref('')
     const slideId = ref('')
 
@@ -66,7 +72,7 @@ export default defineComponent({
       return slides.value.find(item => item.id === slideId.value) || null
     })
 
-    const tabs = [
+    const tabs: TabItem[] = [
       { key: 'web', label: '网页链接' },
       { key: 'slide', label: '幻灯片页面' },
     ]
diff --git a/src/views/Editor/Canvas/MouseSelection.vue b/src/views/Editor/Canvas/MouseSelection.vue
index 10b90661..b3c77d8e 100644
--- a/src/views/Editor/Canvas/MouseSelection.vue
+++ b/src/views/Editor/Canvas/MouseSelection.vue
@@ -10,7 +10,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'mouse-selection',
   props: {
     top: {
@@ -37,7 +39,7 @@ export default {
       },
     },
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/BorderLine.vue b/src/views/Editor/Canvas/Operate/BorderLine.vue
index aae35667..8a2d7502 100644
--- a/src/views/Editor/Canvas/Operate/BorderLine.vue
+++ b/src/views/Editor/Canvas/Operate/BorderLine.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { OperateBorderLine } from '@/types/edit'
 
-export default {
+export default defineComponent({
   name: 'border-line',
   props: {
     type: {
@@ -18,7 +18,7 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index 751cac8c..8e39faa8 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
@@ -4,8 +4,7 @@
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
-        :key="point.direction"
-        :type="point.direction"
+        :key="point.handler"
         :style="point.style"
         @mousedown.stop="$event => dragLineElement($event, elementInfo, point.handler)"
       />
diff --git a/src/views/Editor/Canvas/Operate/LinkHandler.vue b/src/views/Editor/Canvas/Operate/LinkHandler.vue
index b8c1d141..07c92da9 100644
--- a/src/views/Editor/Canvas/Operate/LinkHandler.vue
+++ b/src/views/Editor/Canvas/Operate/LinkHandler.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="link-handler" :style="{ top: elementInfo.height * canvasScale + 10 + 'px' }">
-    <a class="link" v-if="elementInfo.link.type === 'web'" :href="elementInfo.link.target" target="_blank">{{elementInfo.link.target}}</a>
-    <a class="link" v-else>幻灯片页面 {{elementInfo.link.target}}</a>
+  <div class="link-handler" :style="{ top: height * canvasScale + 10 + 'px' }">
+    <a class="link" v-if="link.type === 'web'" :href="link.target" target="_blank">{{link.target}}</a>
+    <a class="link" v-else>幻灯片页面 {{link.target}}</a>
     <div class="btns">
       <div class="btn" @click="openLinkDialog()">更换</div>
       <Divider type="vertical" />
@@ -11,10 +11,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
-import { PPTElement } from '@/types/slides'
+import { PPTElement, PPTElementLink } from '@/types/slides'
 import useLink from '@/hooks/useLink'
 
 export default defineComponent({
@@ -24,18 +24,25 @@ export default defineComponent({
       type: Object as PropType<PPTElement>,
       required: true,
     },
+    link: {
+      type: Object as PropType<PPTElementLink>,
+      required: true,
+    },
     openLinkDialog: {
       type: Function as PropType<() => void>,
       required: true,
     },
   },
-  setup() {
+  setup(props) {
     const { canvasScale } = storeToRefs(useMainStore())
 
     const { removeLink } = useLink()
 
+    const height = computed(() => props.elementInfo.type === 'line' ? 0 : props.elementInfo.height)
+
     return {
       canvasScale,
+      height,
       removeLink,
     }
   },
diff --git a/src/views/Editor/Canvas/Operate/ResizeHandler.vue b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
index d93a084b..7bfd1aec 100644
--- a/src/views/Editor/Canvas/Operate/ResizeHandler.vue
+++ b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
@@ -51,6 +51,7 @@ export default defineComponent({
   border: 1px solid $themeColor;
   background-color: #fff;
   border-radius: 1px;
+  cursor: pointer;
 
   &.left-top.rotate-0,
   &.right-bottom.rotate-0,
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index aca4db42..f488933f 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -5,8 +5,8 @@
     :style="{
       top: elementInfo.top * canvasScale + 'px',
       left: elementInfo.left * canvasScale + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
-      transformOrigin: `${elementInfo.width * canvasScale / 2}px ${elementInfo.height * canvasScale / 2}px`,
+      transform: `rotate(${rotate}deg)`,
+      transformOrigin: `${elementInfo.width * canvasScale / 2}px ${height * canvasScale / 2}px`,
     }"
   >
     <component
@@ -28,6 +28,7 @@
 
     <LinkHandler 
       :elementInfo="elementInfo" 
+      :link="elementInfo.link"
       :openLinkDialog="openLinkDialog" 
       v-if="isActive && elementInfo.link" 
       @mousedown.stop 
@@ -39,7 +40,7 @@
 import { defineComponent, PropType, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import { ElementTypes, PPTElement } from '@/types/slides'
+import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides'
 import { OperateLineHandler, OperateResizeHandler } from '@/types/edit'
 
 import ImageElementOperate from './ImageElementOperate.vue'
@@ -77,15 +78,15 @@ export default defineComponent({
       required: true,
     },
     rotateElement: {
-      type: Function as PropType<(element: PPTElement) => void>,
+      type: Function as PropType<(element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => void>,
       required: true,
     },
     scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandler) => void>,
+      type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandler) => void>,
       required: true,
     },
     dragLineElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateLineHandler) => void>,
+      type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandler) => void>,
       required: true,
     },
     openLinkDialog: {
@@ -117,11 +118,16 @@ export default defineComponent({
       return animations.findIndex(animation => animation.elId === props.elementInfo.id)
     })
 
+    const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
+    const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
+
     return {
       currentOperateComponent,
       canvasScale,
       toolbarState,
       elementIndexInAnimation,
+      rotate,
+      height,
     }
   },
 })
diff --git a/src/views/Editor/Canvas/hooks/useRotateElement.ts b/src/views/Editor/Canvas/hooks/useRotateElement.ts
index 963d06e9..1d14f4b6 100644
--- a/src/views/Editor/Canvas/hooks/useRotateElement.ts
+++ b/src/views/Editor/Canvas/hooks/useRotateElement.ts
@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import { PPTElement, PPTTextElement, PPTImageElement, PPTShapeElement } from '@/types/slides'
+import { PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 /**
@@ -22,7 +22,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
   const { addHistorySnapshot } = useHistorySnapshot()
 
   // 旋转元素
-  const rotateElement = (element: PPTTextElement | PPTImageElement | PPTShapeElement) => {
+  const rotateElement = (element: Exclude<PPTElement, PPTLineElement | PPTVideoElement | PPTAudioElement>) => {
     let isMouseDown = true
     let angle = 0
     const elOriginRotate = element.rotate || 0
diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts
index 9602c606..d3ff3d27 100644
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@@ -2,7 +2,7 @@ import { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
 import { PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
-import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
+import { OperateResizeHandlers, OperateResizeHandler, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import { MIN_SIZE } from '@/configs/element'
 import { AlignLine, uniqAlignLines } from '@/utils/element'
@@ -105,7 +105,7 @@ export default (
   const { addHistorySnapshot } = useHistorySnapshot()
 
   // 缩放元素
-  const scaleElement = (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
+  const scaleElement = (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandler) => {
     let isMouseDown = true
     mainStore.setScalingState(true)
 
@@ -412,7 +412,7 @@ export default (
   }
 
   // 多选元素缩放
-  const scaleMultiElement = (e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => {
+  const scaleMultiElement = (e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandler) => {
     let isMouseDown = true
     
     const { minX, maxX, minY, maxY } = range
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 78e143a7..0bd95a3c 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -267,7 +267,6 @@ export default defineComponent({
       viewportStyles,
       canvasScale,
       mouseSelectionState,
-      currentSlide,
       creatingElement,
       alignmentLines,
       linkDialogVisible,
diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue
index c828a609..72875b51 100644
--- a/src/views/Editor/CanvasTool/LinePool.vue
+++ b/src/views/Editor/CanvasTool/LinePool.vue
@@ -37,9 +37,6 @@
                 fill="none" 
                 stroke-width="2" 
                 :stroke-dasharray="line.style === 'solid' ? '0, 0' : '4, 1'"
-                stroke-linecap 
-                stroke-linejoin 
-                stroke-miterlimit 
                 :marker-start="line.points[0] ? `url(#${`preset-line-${index}`}-${line.points[0]}-start)` : ''"
                 :marker-end="line.points[1] ? `url(#${`preset-line-${index}`}-${line.points[1]}-end)` : ''"
               ></path>
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
index 5cb9340c..3d2b27e6 100644
--- a/src/views/Editor/CanvasTool/MediaInput.vue
+++ b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -32,16 +32,22 @@
 import { defineComponent, ref } from 'vue'
 import { message } from 'ant-design-vue'
 
+type TypeKey = 'video' | 'audio'
+interface TabItem {
+  key: TypeKey;
+  label: string;
+}
+
 export default defineComponent({
   name: 'media-input',
   emits: ['insertVideo', 'insertAudio', 'close'],
   setup(props, { emit }) {
-    const type = ref<'video' | 'audio'>('video')
+    const type = ref<TypeKey>('video')
 
     const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
     const audioSrc = ref('https://freesound.org/data/previews/614/614107_11861866-lq.mp3')
 
-    const tabs = [
+    const tabs: TabItem[] = [
       { key: 'video', label: '视频' },
       { key: 'audio', label: '音频' },
     ]
diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue
index e43e2993..cfe34433 100644
--- a/src/views/Editor/CanvasTool/ShapePool.vue
+++ b/src/views/Editor/CanvasTool/ShapePool.vue
@@ -18,7 +18,6 @@
                   vector-effect="non-scaling-stroke" 
                   stroke-linecap="butt" 
                   stroke-miterlimit="8"
-                  stroke-linejoin
                   fill="transparent"
                   stroke="#999"
                   stroke-width="2" 
diff --git a/src/views/Editor/EditorHeader/HotkeyDoc.vue b/src/views/Editor/EditorHeader/HotkeyDoc.vue
index 45d597ec..db4ca2bf 100644
--- a/src/views/Editor/EditorHeader/HotkeyDoc.vue
+++ b/src/views/Editor/EditorHeader/HotkeyDoc.vue
@@ -10,17 +10,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 import { HOTKEY_DOC } from '@/configs/hotkey'
 
-const hotkeys = HOTKEY_DOC
-
 export default defineComponent({
   name: 'hotkey-doc',
   setup() {
     return {
-      hotkeys,
+      hotkeys: HOTKEY_DOC,
     }
   },
 })
diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue
index ba550770..ea190bfe 100644
--- a/src/views/Editor/Remark/index.vue
+++ b/src/views/Editor/Remark/index.vue
@@ -32,7 +32,7 @@ export default defineComponent({
     
     const remark = computed(() => currentSlide.value?.remark || '')
 
-    const handleInput = (e: InputEvent) => {
+    const handleInput = (e: Event) => {
       const value = (e.target as HTMLTextAreaElement).value
       slidesStore.updateSlide({ remark: value })
     }
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 4b3d08b5..b6a59a57 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -9,7 +9,9 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'color-button',
   props: {
     color: {
@@ -17,7 +19,7 @@ export default {
       required: true,
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue
index f4023257..ec29c3dc 100644
--- a/src/views/Screen/SlideThumbnails.vue
+++ b/src/views/Screen/SlideThumbnails.vue
@@ -34,6 +34,7 @@ export default defineComponent({
   props: {
     turnSlideToIndex: {
       type: Function as PropType<(index: number) => void>,
+      required: true,
     },
   },
   setup(props, { emit }) {
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index 9afc843d..fb65e4de 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -54,7 +54,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const writingBoardRef = ref()
     const writingBoardColor = ref('#e2534d')
-    const writingBoardModel = ref('pen')
+    const writingBoardModel = ref<'pen' | 'eraser'>('pen')
     const blackboard = ref(false)
 
     // 切换到画笔状态
diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue
index 5d2f45b7..6850adb6 100644
--- a/src/views/components/element/ElementOutline.vue
+++ b/src/views/components/element/ElementOutline.vue
@@ -10,7 +10,6 @@
       vector-effect="non-scaling-stroke" 
       stroke-linecap="butt" 
       stroke-miterlimit="8"
-      stroke-linejoin
       fill="transparent"
       :d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`" 
       :stroke="outlineColor"