fix: 类型修复、优化补充

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>

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())
     }

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)
     }

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>

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-width="2" 
-          stroke-linecap 
-          stroke-linejoin 
-          stroke-miterlimit 
         ></path>
 			</svg>
     </div>
@@ -230,6 +227,10 @@ export default defineComponent({
   height: 100%;
   z-index: 2;
   cursor: crosshair;
+
+  svg {
+    overflow: visible;
+  }
 }
 .selection {
   position: absolute;

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: '幻灯片页面' },
     ]

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>

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>

src/views/Editor/Canvas/Operate/LineElementOperate.vue

@@ -4,8 +4,7 @@
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
-        :key="point.direction"
+        :key="point.handler"
-        :type="point.direction"
         :style="point.style"
         @mousedown.stop="$event => dragLineElement($event, elementInfo, point.handler)"
       />

src/views/Editor/Canvas/Operate/LinkHandler.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="link-handler" :style="{ top: elementInfo.height * canvasScale + 10 + 'px' }">
+  <div class="link-handler" :style="{ top: 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-if="link.type === 'web'" :href="link.target" target="_blank">{{link.target}}</a>
-    <a class="link" v-else>幻灯片页面 {{elementInfo.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,
     }
   },

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,

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)`,
+      transform: `rotate(${rotate}deg)`,
-      transformOrigin: `${elementInfo.width * canvasScale / 2}px ${elementInfo.height * canvasScale / 2}px`,
+      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,
     }
   },
 })

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

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

src/views/Editor/Canvas/index.vue

@@ -267,7 +267,6 @@ export default defineComponent({
       viewportStyles,
       canvasScale,
       mouseSelectionState,
-      currentSlide,
       creatingElement,
       alignmentLines,
       linkDialogVisible,

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>

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: '音频' },
     ]

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" 

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,
     }
   },
 })

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 })
     }

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>

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 }) {

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)
 
     // 切换到画笔状态

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"