update

src/views/_common/_operate/AnimationIndex.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="animation-index">
+    <div class="index" v-for="(item, index) in animations" :key="index">
+      {{index}}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue'
+import { PPTAnimation } from '@/types/slides'
+
+export default {
+  name: 'animation-index',
+  props: {
+    animations: {
+      type: Array as PropType<PPTAnimation[]>,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.animation-index {
+  position: absolute;
+  top: 0;
+  left: -22px;
+  font-size: 12px;
+}
+.index {
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #666;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3px;
+}
+</style>

src/views/_common/_operate/BorderLine.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="['border-line', type, { 'wide': isWide }]"></div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue'
+
+type BorderLineType = 't' | 'b' | 'l' | 'r'
+
+export default {
+  name: 'border-line',
+  props: {
+    type: {
+      type: String as PropType<BorderLineType>,
+      required: true,
+    },
+    isWide: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.border-line {
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 0;
+  top: 0;
+  border: 0 dashed $themeColor;
+
+  &.t {
+    border-top-width: 1px;
+  }
+  &.b {
+    border-bottom-width: 1px;
+  }
+  &.l {
+    border-left-width: 1px;
+  }
+  &.r {
+    border-right-width: 1px;
+  }
+
+  &.wide {
+    &::before {
+      content: '';
+      position: absolute;
+      background: transparent;
+      cursor: move;
+    }
+
+    &.t::before {
+      top: -8px;
+      left: -8px;
+      width: calc(100% + 16px);
+      height: 16px;
+    }
+    &.b::before {
+      bottom: -8px;
+      left: -8px;
+      width: calc(100% + 16px);
+      height: 16px;
+    }
+    &.l::before {
+      top: -8px;
+      left: -8px;
+      width: 16px;
+      height: calc(100% + 16px);
+    }
+    &.r::before {
+      top: -8px;
+      right: -8px;
+      width: 16px;
+      height: calc(100% + 16px);
+    }
+  }
+}
+</style>

src/views/_common/_operate/ResizablePoint.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="['resizable-point', type]"></div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue'
+
+type ResizablePointType = 't-l' | 't-c' | 't-r' | 'm-l' | 'm-r' | 'b-l' | 'b-c' | 'b-r' | 'any'
+
+export default {
+  name: 'resizable-point',
+  props: {
+    type: {
+      type: String as PropType<ResizablePointType>,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.resizable-point {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  left: 0;
+  top: 0;
+  margin: -5px 0 0 -5px;
+  border: 1px solid #666;
+  background-color: #fff;
+  border-radius: 50%;
+
+  &.t-l {
+    cursor: nwse-resize;
+  }
+  &.t-c {
+    cursor: ns-resize;
+  }
+  &.t-r {
+    cursor: nesw-resize;
+  }
+  &.m-l {
+    cursor: ew-resize;
+  }
+  &.m-r {
+    cursor: ew-resize;
+  }
+  &.b-l {
+    cursor: nesw-resize;
+  }
+  &.b-c {
+    cursor: ns-resize;
+  }
+  &.b-r {
+    cursor: nwse-resize;
+  }
+  &.any {
+    cursor: pointer;
+  }
+}
+</style>

src/views/_common/_operate/RotateHandler.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="rotate-handle">
+    <div class="rotate-icon"><IconFont type="icon-rotate" /></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'rotate-handle',
+}
+</script>
+
+<style lang="scss" scoped>
+.rotate-handle {
+  position: absolute;
+  top: -24px;
+  margin: -12px 0 0 -12px;
+  width: 24px;
+  height: 24px;
+  background-color: #333;
+  border-radius: 50%;
+  color: #fff;
+
+  .rotate-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>