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

优化添加了新的vite编译配置；
2025-10-14 18:02:55 +08:00
parent 216932c32b
commit dc74e0bfb1
5 changed files with 79 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,8 +24,10 @@
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
+        "@rollup/plugin-terser": "^0.4.4",
        "@vitejs/plugin-vue": "^5.1.4",
        "less": "^4.4.2",
+        "terser": "^5.44.0",
        "vite": "^5.4.8",
        "vite-plugin-pwa": "^1.0.3"
      }
@@ -12092,7 +12094,7 @@
    },
    "node_modules/terser": {
      "version": "5.44.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
+      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.44.0.tgz",
      "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
      "license": "BSD-2-Clause",
      "dependencies": {
--- a/package.json
+++ b/package.json
@@ -29,8 +29,10 @@
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
    "@vitejs/plugin-vue": "^5.1.4",
    "less": "^4.4.2",
+    "terser": "^5.44.0",
    "vite": "^5.4.8",
    "vite-plugin-pwa": "^1.0.3"
  }
--- a/src/components/NoteItem.vue
+++ b/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.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%;
--- a/src/pages/NoteListPage.vue
+++ b/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('搜索栏失去焦点')
  // 可以在这里添加失去焦点时的特殊处理
 }

--- a/vite.config.js
+++ b/vite.config.js
@@ -86,6 +86,13 @@ export default defineConfig(({ mode }) => {
    },
    build: {
      outDir: isPwaMode ? 'dist/offline' : 'dist/standard',
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        },
+      },
      rollupOptions: {
        output: {
          // 为CSS和JS文件添加哈希后缀