初始化提交

src/components/NoteItem.vue

@@ -0,0 +1,223 @@
+<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>