"新增：便签编辑页面预览模式功能并完善删除动画"

src/components/Header.vue

@@ -13,15 +13,28 @@
 
       <!-- 右侧操作按钮 -->
       <!-- 新建便签 -->
-      <!-- 新建便签 -->
       <img v-if="actionIcon === 'create'" class="image_4" src="/assets/icons/drawable-xxhdpi/btn_create.png" @click="handleAction('create')" />
 
-      <div v-else-if="actionIcon === 'save'" class="code-fun-flex-row code-fun-items-center right-group">
+      <!-- 编辑模式 -->
+      <div v-else-if="actionIcon === 'edit'" class="code-fun-flex-row code-fun-items-center right-group">
         <!-- 插入图片 -->
         <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_pic.png" @click="handleAction('insertImage')" />
         <!-- 保存便签 -->
         <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_save_notes.png" @click="handleAction('save')" />
       </div>
+
+      <!-- 预览模式 -->
+      <div v-else-if="actionIcon === 'preview'" class="code-fun-flex-row code-fun-items-center right-group">
+        <!-- 删除便签 -->
+        <img 
+          ref="deleteButtonRef"
+          class="image_4" 
+          :src="deleteButtonFrame" 
+          @click="handleAction('delete')" 
+        />
+        <!-- 分享便签 -->
+        <img class="image_4" src="/assets/icons/drawable-xxhdpi/btn_share_notes.png" @click="handleAction('share')" />
+      </div>
       <!-- 占位符 -->
       <div v-else class="image_4-placeholder"></div>
     </div>
@@ -29,7 +42,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, defineExpose } from 'vue'
 
 const props = defineProps({
   title: {
@@ -87,6 +100,9 @@ const props = defineProps({
 })
 
 const localFolderExpanded = ref(false)
+const deleteButtonRef = ref(null)
+const deleteButtonFrame = ref('/assets/icons/drawable-xxhdpi/btn_delete_notes.png')
+const isDeleteAnimating = ref(false)
 
 const folderExpanded = computed(() => {
   // 优先使用父组件传递的isFolderExpanded状态，否则使用本地状态
@@ -124,6 +140,42 @@ const handleFolderToggle = () => {
   }
 }
 
+// 播放删除按钮动画（只使用存在的帧）
+const playDeleteAnimation = () => {
+  if (isDeleteAnimating.value) return
+  
+  isDeleteAnimating.value = true
+  // 只使用存在的帧编号
+  const frames = [1, 6, 9, 10, 13, 16, 19, 21, 23, 25, 26, 27, 28, 29, 30]
+  let currentFrameIndex = 0
+  
+  const playFrame = () => {
+    if (currentFrameIndex < frames.length) {
+      // 格式化帧编号（补零）
+      const frameNumber = frames[currentFrameIndex].toString().padStart(4, '0')
+      deleteButtonFrame.value = `/assets/icons/drawable-xxhdpi/title_bar_del_btn_mov_${frameNumber}.png`
+      currentFrameIndex++
+      
+      // 使用setTimeout控制动画播放速度
+      setTimeout(playFrame, 50) // 约20fps，调整速度以适应帧数
+    } else {
+      // 动画播放完成，重置为默认图标
+      setTimeout(() => {
+        deleteButtonFrame.value = '/assets/icons/drawable-xxhdpi/btn_delete_notes.png'
+        isDeleteAnimating.value = false
+      }, 100)
+    }
+  }
+  
+  // 开始播放动画
+  playFrame()
+}
+
+// 暴露播放删除动画的方法给父组件
+defineExpose({
+  playDeleteAnimation
+})
+
 const handleLeftAction = () => {
   // 处理左侧图标点击事件
   if (props.onLeftAction) {