SmartisanNote.Remake/src/components/NoteItem.vue

<template>
  <div class="note-item-container">
    <!-- 左滑删除操作区域 -->
    <div 
      v-if="onDelete"
      class="delete-area"
      :class="{ 'delete-area-visible': isSwiped }"
    >
      <span class="delete-text">删除</span>
    </div>
    
    <!-- 便签内容区域 -->
    <div 
      class="note-content"
      :class="{ 
        'note-content-swiped': isSwiped,
        'note-content-pressed': isPressed
      }"
      @click="onPress"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
      @mouseleave="handleMouseLeave"
    >
      <div class="note-header">
        <span class="note-date">
          {{ date }}
        </span>
        <ion-icon 
          v-if="isStarred"
          :icon="star"
          class="star-icon"
        ></ion-icon>
      </div>
      <div class="note-title-container">
        <span class="note-title">
          {{ firstLine || '无内容' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { star } from 'ionicons/icons';

export default {
  name: 'NoteItem',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    date: {
      type: String,
      required: true
    },
    isStarred: {
      type: Boolean,
      default: false
    },
    onPress: {
      type: Function,
      required: true
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      star,
      isSwiped: false,
      isPressed: false,
      touchStartX: 0,
      touchEndX: 0
    }
  },
  computed: {
    firstLine() {
      if (!this.content) return '';
      return this.content.split('\n')[0];
    }
  },
  methods: {
    handleTouchStart(event) {
      this.touchStartX = event.touches[0].clientX;
      this.isPressed = true;
    },
    handleTouchMove(event) {
      this.touchEndX = event.touches[0].clientX;
      // 如果有滑动，取消按下状态
      if (Math.abs(this.touchStartX - this.touchEndX) > 5) {
        this.isPressed = false;
      }
    },
    handleTouchEnd() {
      // 重置按下状态
      this.isPressed = false;
      
      // 计算滑动距离
      const swipeDistance = this.touchStartX - this.touchEndX;
      
      // 如果滑动距离超过阈值，则显示删除按钮
      if (swipeDistance > 50) {
        this.isSwiped = true;
      } else if (swipeDistance < -50) {
        this.isSwiped = false;
      }
    },
    handleMouseDown() {
      this.isPressed = true;
    },
    handleMouseUp() {
      this.isPressed = false;
    },
    handleMouseLeave() {
      this.isPressed = false;
    }
  }
}
</script>

<style scoped>
.note-item-container {
  height: 78.33px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1px;
  position: relative;
  background: var(--background-card);
}

.delete-area {
  position: absolute;
  right: -80px;
  top: 0;
  bottom: 0;
  width: 80px;
  height: 100%;
  background: #ffe65c53;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s ease;
}

.delete-area-visible {
  right: 0px;
}

.delete-text {
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.note-content {
  width: 100%;
  cursor: pointer;
  height: 100%;
  background: var(--background-card);
  box-sizing: border-box;
  transition: transform 0.3s ease, background-color 0.2s ease;
  position: relative;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background-color 0.2s ease;
}

.note-content-swiped {
  transform: translateX(-80px);
}

.note-content-pressed {
  background: var(--background-secondary);
  transform: scale(0.99);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px 0 52px;
  position: relative;
  height: 24px;
}

.note-date {
  font-size: 10px;
  color: var(--note-date);
  line-height: 1.2;
}

.star-icon {
  font-size: 16px;
  color: var(--note-star);
}

.note-title-container {
  position: absolute;
  top: 38.5px;
  left: 52px;
  right: 12px;
  height: 30px;
}

.note-title {
  font-size: 16.5px;
  color: var(--note-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;
}
</style>