perf: 样式、交互优化

src/views/Editor/Canvas/index.vue

@@ -202,12 +202,13 @@ export default defineComponent({
           handler: selectAllElement,
         },
         {
-          text: '重置当前页',
+          text: '网格线',
-          handler: deleteAllElements,
+          subText: showGridLines.value ? '√' : '',
+          handler: toggleGridLines,
         },
         {
-          text: showGridLines.value ? '关闭网格线' : '打开网格线',
+          text: '重置当前页',
-          handler: toggleGridLines,
+          handler: deleteAllElements,
         },
         { divider: true },
         {

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -127,32 +127,6 @@ export default defineComponent({
       return animationTypes[animation.type]
     })
 
-    const updateElementAnimation = (type: string) => {
-      const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => {
-        if (item.elId === handleElement.value.id) return { ...item, type }
-        return item
-      })
-      store.commit(MutationTypes.UPDATE_SLIDE, { animations })
-      animationPoolVisible.value = false
-      addHistorySnapshot()
-    }
-
-    const addAnimation = (type: string) => {
-      if (handleElementAnimation.value) {
-        updateElementAnimation(type)
-        return
-      }
-      const animations: PPTAnimation[] = currentSlideAnimations.value ? JSON.parse(JSON.stringify(currentSlideAnimations.value)) : []
-      animations.push({
-        elId: handleElement.value.id,
-        type,
-        duration: 1000,
-      })
-      store.commit(MutationTypes.UPDATE_SLIDE, { animations })
-      animationPoolVisible.value = false
-      addHistorySnapshot()
-    }
-
     const deleteAnimation = (elId: string) => {
       const animations = (currentSlideAnimations.value as PPTAnimation[]).filter(item => item.elId !== elId)
       store.commit(MutationTypes.UPDATE_SLIDE, { animations })
@@ -186,6 +160,36 @@ export default defineComponent({
       }
     }
 
+    const updateElementAnimation = (type: string) => {
+      const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => {
+        if (item.elId === handleElement.value.id) return { ...item, type }
+        return item
+      })
+      store.commit(MutationTypes.UPDATE_SLIDE, { animations })
+      animationPoolVisible.value = false
+      addHistorySnapshot()
+
+      runAnimation(handleElement.value.id, type)
+    }
+
+    const addAnimation = (type: string) => {
+      if (handleElementAnimation.value) {
+        updateElementAnimation(type)
+        return
+      }
+      const animations: PPTAnimation[] = currentSlideAnimations.value ? JSON.parse(JSON.stringify(currentSlideAnimations.value)) : []
+      animations.push({
+        elId: handleElement.value.id,
+        type,
+        duration: 1000,
+      })
+      store.commit(MutationTypes.UPDATE_SLIDE, { animations })
+      animationPoolVisible.value = false
+      addHistorySnapshot()
+
+      runAnimation(handleElement.value.id, type)
+    }
+
     return {
       handleElement,
       animationPoolVisible,
@@ -238,9 +242,11 @@ export default defineComponent({
   height: 40px;
   line-height: 40px;
   text-align: center;
-  background-color: $lightGray;
   cursor: pointer;
 }
+.animation-box {
+  background-color: $lightGray;
+}
 
 .sequence-item {
   height: 36px;

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -155,7 +155,7 @@
       </Popover>
     </div>
 
-    <div class="title" style="margin-top: 20px;">应用预置主题：</div>
+    <div class="title" style="margin-top: 20px;">预置主题：</div>
     <div class="theme-list">
       <div 
         class="theme-item"