docs: 补充代码注释

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -101,6 +101,7 @@ export default defineComponent({
 
     const animations = ANIMATIONS
 
+    // 当前页面的动画列表
     const animationSequence = computed(() => {
       if (!currentSlideAnimations.value) return []
       const animationSequence = []
@@ -119,6 +120,7 @@ export default defineComponent({
       return animationSequence
     })
 
+    // 当前选中元素的入场动画信息
     const handleElementAnimation = computed(() => {
       if (!handleElement.value) return null
       const animations = currentSlideAnimations.value || []
@@ -127,12 +129,14 @@ export default defineComponent({
       return animationTypes[animation.type]
     })
 
+    // 删除元素入场动画
     const deleteAnimation = (elId: string) => {
       const animations = (currentSlideAnimations.value as PPTAnimation[]).filter(item => item.elId !== elId)
       store.commit(MutationTypes.UPDATE_SLIDE, { animations })
       addHistorySnapshot()
     }
 
+    // 拖拽修改入场动画顺序后同步数据
     const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
       const { newIndex, oldIndex } = eventData
       if (oldIndex === newIndex) return
@@ -146,6 +150,7 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 执行入场动画预览
     const runAnimation = (elId: string, animationType: string) => {
       const prefix = 'animate__'
       const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
@@ -160,6 +165,7 @@ export default defineComponent({
       }
     }
 
+    // 修改元素入场动画，并执行一次预览
     const updateElementAnimation = (type: string) => {
       const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => {
         if (item.elId === handleElement.value.id) return { ...item, type }
@@ -172,6 +178,7 @@ export default defineComponent({
       runAnimation(handleElement.value.id, type)
     }
 
+    // 添加元素入场动画，并执行一次预览
     const addAnimation = (type: string) => {
       if (handleElementAnimation.value) {
         updateElementAnimation(type)

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -180,6 +180,7 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 设置元素位置
     const updateLeft = (value: number) => {
       const props = { left: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
@@ -190,6 +191,8 @@ export default defineComponent({
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
+
+    // 设置元素宽度、高度、旋转角度
     const updateWidth = (value: number) => {
       const props = { width: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
@@ -205,11 +208,15 @@ export default defineComponent({
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
+
+    // 固定元素的宽高比
     const updateFixedRatio = (value: boolean) => {
       const props = { fixedRatio: value }
       store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
+
+    // 将元素旋转45度（顺时针或逆时针）
     const updateRotate45 = (command: '+' | '-') => {
       let _rotate = Math.floor(rotate.value / 45) * 45
       if (command === '+') _rotate = _rotate + 45

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -52,6 +52,7 @@ export default defineComponent({
     const { addHistorySnapshot } = useHistorySnapshot()
     const { combineElements, uncombineElements } = useCombineElement()
 
+    // 判断当前多选的几个元素是否可以组合
     const canCombine = computed(() => {
       const firstGroupId = activeElementList.value[0].groupId
       if (!firstGroupId) return true
@@ -60,11 +61,12 @@ export default defineComponent({
       return !inSameGroup
     })
 
+    // 对齐选中的元素
     const alignActiveElement = (command: ElementAlignCommand) => {
       const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
       const elementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
 
-      // 获取每一个组合的宽高位置
+      // 如果所选择的元素为组合元素的成员，需要计算该组合的整体范围
       const groupElementRangeMap = {}
       for (const activeElement of activeElementList.value) {
         if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
@@ -73,6 +75,7 @@ export default defineComponent({
         }
       }
 
+      // 根据不同的命令，计算对齐的位置
       if (command === ElementAlignCommands.LEFT) {
         elementList.forEach(element => {
           if (activeElementIdList.value.includes(element.id)) {

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -40,12 +40,14 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 修改播放时的切换页面方式
     const updateTurningMode = (mode: string) => {
       if (mode === currentTurningMode.value) return
       store.commit(MutationTypes.UPDATE_SLIDE, { turningMode: mode })
       addHistorySnapshot()
     }
 
+    // 将当前页的切换页面方式应用到全部页面
     const applyAllSlide = () => {
       const newSlides = slides.value.map(slide => {
         return {

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -217,6 +217,7 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    // 设置背景模式：纯色、图片、渐变色
     const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
       if (type === 'solid') {
         const newBackground: SlideBackground = {
@@ -248,17 +249,20 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置背景图片
     const updateBackground = (props: Partial<SlideBackground>) => {
       store.commit(MutationTypes.UPDATE_SLIDE, { background: { ...background.value, ...props } })
       addHistorySnapshot()
     }
 
+    // 上传背景图片
     const uploadBackgroundImage = (files: File[]) => {
       const imageFile = files[0]
       if (!imageFile) return
       getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
     }
 
+    // 应用当前页背景到全部页面
     const applyBackgroundAllSlide = () => {
       const newSlides = slides.value.map(slide => {
         return {
@@ -270,10 +274,12 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 设置主题
     const updateTheme = (themeProps: Partial<SlideTheme>) => {
       store.commit(MutationTypes.SET_THEME, themeProps)
     }
 
+    // 将当前主题应用到全部页面
     const applyThemeAllSlide = () => {
       const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
       const { themeColor, backgroundColor, fontColor } = theme.value