新增 便签删除功能；

优化便签列表页布局；

src/components/NoteItem.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7">
+    <!-- 删除按钮 -->
+    <button class="btn_delete" @click.stop="handleDelete" :style="deleteButtonStyle">
+      <span>删除</span>
+    </button>
     <!-- 便签条 -->
     <div class="code-fun-flex-col code-fun-relative section_17" @click="handlePress" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{ transform: `translateX(${slideOffset}px)` }">
       <div class="code-fun-flex-row code-fun-justify-between">
@@ -19,10 +23,6 @@
         <img v-if="hasImage" class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
       </div>
     </div>
-    <!-- 删除按钮 -->
-    <button class="btn_delete">
-      <span>删除</span>
-    </button>
     <!-- 便签夹未滑动状态 -->
     <img class="image_27 pos_18" :src="isSliding ? '/assets/icons/drawable-xxhdpi/note_item_clip_up.png' : '/assets/icons/drawable-xxhdpi/note_item_clip_normal.png'" />
   </div>
@@ -30,7 +30,6 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { formatDateTime } from '../utils/dateUtils'
 
 const props = defineProps({
   content: {
@@ -86,11 +85,8 @@ const formattedDate = computed(() => {
 // 处理显示内容，过滤HTML标签并只显示第一行
 // 用于在便签列表中显示便签的预览内容
 const displayContent = computed(() => {
-  console.log('NoteItem content:', props.content)
   // 过滤HTML标签，只保留纯文本内容
   let text = props.content.replace(/<[^>]*>/g, '')
-  console.log('NoteItem text without HTML:', text)
-
   // 处理换行符，统一为\n
   text = text.replace(/\\n/g, '\n')
 
@@ -101,6 +97,14 @@ const displayContent = computed(() => {
   return lines[0]?.trim() || '无内容'
 })
 
+// 计算删除按钮的样式
+const deleteButtonStyle = computed(() => {
+  return {
+    opacity: isSlided.value ? 1 : 0,
+    pointerEvents: isSlided.value ? 'auto' : 'none',
+  }
+})
+
 // 滑动阈值（删除按钮宽度）
 // 当滑动距离超过此值时，显示删除按钮
 const SLIDE_THRESHOLD = 64 // 4rem 转换为 px
@@ -133,9 +137,12 @@ const handleTopToggle = () => {
 // 处理删除事件
 // 点击删除按钮时调用父组件传递的回调函数
 const handleDelete = () => {
-  if (props.onDelete) {
-    props.onDelete()
-  }
+  // 阻止事件冒泡，避免触发便签条的点击事件
+  props.onDelete()
+  // 重置滑动状态
+  slideOffset.value = 0
+  isSliding.value = false
+  isSlided.value = false
 }
 
 // 触摸开始事件处理函数
@@ -224,6 +231,7 @@ const handleTouchEnd = () => {
   text-align: right;
   border: none;
   padding: 0;
+  transition: opacity 0.2s ease;
   span {
     margin-right: 0.7rem;
     font-size: 0.6rem;