优化动画面板显示逻辑

src/plugins/iconPark.ts

@@ -98,6 +98,7 @@ import {
   CloseSmall,
   Undo,
   Transform,
+  Click,
 } from '@icon-park/vue-next'
 
 export default {
@@ -229,5 +230,6 @@ export default {
     app.component('IconSeoFolder', SeoFolder)
     app.component('IconUndo', Undo)
     app.component('IconTransform', Transform)
+    app.component('IconClick', Click)
   }
 }

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="element-animation-panel">
-    <div class="element-animation">
+    <div class="element-animation" v-if="handleElement">
       <Popover trigger="click" v-model:visible="animationPoolVisible">
         <template #content>
           <div class="animation-pool">
@@ -29,6 +29,8 @@
         </Button>
       </Popover>
     </div>
+
+    <div class="tip" v-else><IconClick /> 选中画布中的元素添加动画</div>
     
     <Divider />
 
@@ -42,7 +44,7 @@
       itemKey="id"
     >
       <template #item="{ element, index }">
-        <div class="sequence-item" :class="{ 'active': handleElement.id === element.elId }">
+        <div class="sequence-item" :class="{ 'active': handleElement?.id === element.elId }">
           <div class="index">{{index + 1}}</div>
           <div class="text">【{{element.elType}}】{{element.animationType}}</div>
           <div class="handler">
@@ -200,6 +202,11 @@ export default defineComponent({
 .element-animation-btn {
   width: 100%;
 }
+.tip {
+  text-align: center;
+  font-style: italic;
+  padding-top: 12px;
+}
 .animation-pool {
   width: 400px;
   height: 500px;

src/views/Editor/Toolbar/index.vue

@@ -41,7 +41,8 @@ export default defineComponent({
     ]
     const slideTabs = [
       { label: '页面样式', value: ToolbarStates.SLIDE_STYLE },
-      { label: '翻页动画', value: ToolbarStates.SLIDE_ANIMATION },
+      { label: '切换', value: ToolbarStates.SLIDE_ANIMATION },
+      { label: '动画', value: ToolbarStates.EL_ANIMATION },
     ]
     const multiSelectTabs = [
       { label: '位置', value: ToolbarStates.MULTI_POSITION },