优化 便签列表页上下滑动时不再触发标签条的移动；

优化 添加了新的vite编译配置；

src/components/NoteItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7">
+  <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7" @touchstart="handleContainerTouchStart" @touchmove="handleContainerTouchMove" @touchend="handleContainerTouchEnd">
     <!-- 删除按钮 -->
     <button class="btn_delete" @click.stop="handleDelete" :style="deleteButtonStyle">
       <span>删除</span>
@@ -73,8 +73,10 @@ const props = defineProps({
 // 滑动相关状态
 const slideOffset = ref(0)
 const startX = ref(0)
+const startY = ref(0) // 记录起始Y坐标
 const isSliding = ref(false)
 const isSlided = ref(false) // 是否已经滑动到阈值
+const isScrolling = ref(false) // 是否正在滚动
 
 const formattedDate = computed(() => {
   // 直接返回已经格式化的日期字符串
@@ -109,6 +111,22 @@ const deleteButtonStyle = computed(() => {
 // 当滑动距离超过此值时，显示删除按钮
 const SLIDE_THRESHOLD = 64 // 4rem 转换为 px
 
+// 容器触摸事件处理函数
+const handleContainerTouchStart = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+}
+
+const handleContainerTouchMove = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+}
+
+const handleContainerTouchEnd = e => {
+  // 阻止事件冒泡到父组件
+  e.stopPropagation()
+}
+
 // 处理便签点击事件
 // 只有在未滑动状态下才触发点击事件，避免与滑动操作冲突
 const handlePress = () => {
@@ -148,21 +166,47 @@ const handleDelete = () => {
 // 触摸开始事件处理函数
 // 记录触摸开始时的X坐标，用于计算滑动距离
 const handleTouchStart = e => {
+  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+  e.stopPropagation()
   // 重置滑动状态
   startX.value = e.touches[0].clientX
+  startY.value = e.touches[0].clientY // 记录起始Y坐标
+  isSliding.value = false
+  isSlided.value = false
+  isScrolling.value = false // 重置滚动状态
 }
 
 // 触摸移动事件处理函数
 // 根据手指移动距离计算便签条的水平偏移量
 const handleTouchMove = e => {
-  if (!startX.value) return
+  if (!startX.value || !startY.value) return
 
   const currentX = e.touches[0].clientX
+  const currentY = e.touches[0].clientY
   const diffX = currentX - startX.value
+  const diffY = currentY - startY.value
+
+  // 如果已经确定是滚动，则不再处理
+  if (isScrolling.value) return
+
+  // 判断是滚动还是滑动操作
+  // 如果Y轴移动距离大于X轴移动距离，则认为是滚动
+  if (Math.abs(diffY) > Math.abs(diffX)) {
+    isScrolling.value = true
+    return
+  }
 
   // 只处理右滑动（正值）
   if (diffX > 0) {
-    e.preventDefault() // 防止页面滚动
+    // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+    e.stopPropagation()
+    // 阻止父级滚动容器的滚动行为
+    e.stopImmediatePropagation()
+    
+    // 只有当滑动达到一定距离时才阻止页面滚动
+    if (diffX > 5) {
+      e.preventDefault() // 防止页面滚动
+    }
 
     // 设置滑动状态
     isSliding.value = true
@@ -193,9 +237,12 @@ const handleTouchMove = e => {
 
 // 触摸结束事件处理函数
 // 根据滑动距离决定便签条的最终位置
-const handleTouchEnd = () => {
+const handleTouchEnd = e => {
   if (!startX.value) return
 
+  // 阻止事件冒泡到父组件，防止页面滚动时触发便签滑动
+  e?.stopPropagation()
+
   // 如果滑动超过阈值，保持滑出状态；否则回弹
   if (slideOffset.value >= SLIDE_THRESHOLD) {
     // 保持滑出状态，显示删除按钮
@@ -208,8 +255,10 @@ const handleTouchEnd = () => {
     isSlided.value = false
   }
 
-  // 重置起始位置
+  // 重置起始位置和滚动状态
   startX.value = 0
+  startY.value = 0
+  isScrolling.value = false
 }
 </script>
 
@@ -241,6 +290,7 @@ const handleTouchEnd = () => {
 .list-item_7 {
   width: 100%;
   height: 3.16rem;
+  touch-action: pan-y; /* 只允许垂直滚动，禁止水平滑动 */
   .section_17 {
     box-sizing: border-box;
     width: 95%;

src/pages/NoteListPage.vue

@@ -189,9 +189,9 @@ const handleStarToggle = async noteId => {
   if (note) {
     try {
       await store.updateNote(noteId, { isStarred: !note.isStarred })
-      console.log(`Note ${noteId} starred status updated`)
+      console.log(`便签 ${noteId} 星标状态已更新`)
     } catch (error) {
-      console.error('Failed to update note star status:', error)
+      console.error('更新便签星标状态失败:', error)
     }
   }
 }
@@ -201,9 +201,9 @@ const handleTopToggle = async noteId => {
   if (note) {
     try {
       await store.updateNote(noteId, { isTop: !note.isTop })
-      console.log(`Note ${noteId} top status updated`)
+      console.log(`便签 ${noteId} 置顶状态已更新`)
     } catch (error) {
-      console.error('Failed to update note top status:', error)
+      console.error('更新便签置顶状态失败:', error)
     }
   }
 }
@@ -216,15 +216,15 @@ const confirmDeleteNote = async noteId => {
       if (currentFolder.value === 'trash') {
         // 在回收站中删除便签，彻底删除
         await store.permanentlyDeleteNote(noteToDelete.value)
-        console.log(`Note ${noteToDelete.value} permanently deleted`)
+        console.log(`便签 ${noteToDelete.value} 已彻底删除`)
       } else {
         // 不在回收站中，将便签移至回收站
         await store.moveToTrash(noteToDelete.value)
-        console.log(`Note ${noteToDelete.value} moved to trash`)
+        console.log(`便签 ${noteToDelete.value} 已移至回收站`)
       }
       noteToDelete.value = null
     } catch (error) {
-      console.error('Failed to delete note:', error)
+      console.error('删除便签失败:', error)
     }
   }
 }
@@ -271,29 +271,29 @@ const handleFolderToggle = () => {
 
 const handleSearch = query => {
   // 搜索功能已在computed属性filteredAndSortedNotes中实现
-  console.log('Search for:', query)
+  console.log('搜索:', query)
 
   // 可以在这里添加搜索统计或其它功能
   if (query && query.length > 0) {
-    console.log(`Found ${filteredAndSortedNotes.value.length} matching notes`)
+    console.log(`找到 ${filteredAndSortedNotes.value.length} 个匹配的便签`)
   }
 }
 
 const handleClearSearch = () => {
   // 清除搜索已在v-model中处理
-  console.log('Search cleared')
+  console.log('搜索已清除')
 
   // 清除搜索后可以重置一些状态
   setSearchQuery('')
 }
 
 const handleSearchFocus = () => {
-  console.log('Search bar focused')
+  console.log('搜索栏获得焦点')
   // 可以在这里添加获得焦点时的特殊处理
 }
 
 const handleSearchBlur = () => {
-  console.log('Search bar blurred')
+  console.log('搜索栏失去焦点')
   // 可以在这里添加失去焦点时的特殊处理
 }