所有页面的语法改写为setup形式；

修改了Header组件的样式、布局；
更新了IFLOW上下文；
添加了全局样式；
添加了pinia状态管理；

src/components/NoteItem.vue

@@ -1,20 +1,16 @@
 <template>
   <div class="note-item-container">
     <!-- 左滑删除操作区域 -->
-    <div 
-      v-if="onDelete"
-      class="delete-area"
-      :class="{ 'delete-area-visible': isSwiped }"
-    >
+    <div v-if="onDelete" class="delete-area" :class="{ 'delete-area-visible': isSwiped }">
       <span class="delete-text">删除</span>
     </div>
-    
+
     <!-- 便签内容区域 -->
-    <div 
+    <div
       class="note-content"
-      :class="{ 
+      :class="{
         'note-content-swiped': isSwiped,
-        'note-content-pressed': isPressed
+        'note-content-pressed': isPressed,
       }"
       @click="onPress"
       @touchstart="handleTouchStart"
@@ -22,17 +18,12 @@
       @touchend="handleTouchEnd"
       @mousedown="handleMouseDown"
       @mouseup="handleMouseUp"
-      @mouseleave="handleMouseLeave"
-    >
+      @mouseleave="handleMouseLeave">
       <div class="note-header">
         <span class="note-date">
           {{ date }}
         </span>
-        <ion-icon 
-          v-if="isStarred"
-          :icon="star"
-          class="star-icon"
-        ></ion-icon>
+        <ion-icon v-if="isStarred" :icon="star" class="star-icon"></ion-icon>
       </div>
       <div class="note-title-container">
         <span class="note-title">
@@ -43,89 +34,86 @@
   </div>
 </template>
 
-<script>
-import { star } from 'ionicons/icons';
+<script setup>
+import { ref, computed } from 'vue'
+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
-    }
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      star,
-      isSwiped: false,
-      isPressed: false,
-      touchStartX: 0,
-      touchEndX: 0
-    }
+  content: {
+    type: String,
+    required: true,
   },
-  computed: {
-    firstLine() {
-      if (!this.content) return '';
-      return this.content.split('\n')[0];
-    }
+  date: {
+    type: String,
+    required: true,
   },
-  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;
-    }
+  isStarred: {
+    type: Boolean,
+    default: false,
+  },
+  onPress: {
+    type: Function,
+    required: true,
+  },
+  onDelete: {
+    type: Function,
+    default: null,
+  },
+})
+
+const isSwiped = ref(false)
+const isPressed = ref(false)
+const touchStartX = ref(0)
+const touchEndX = ref(0)
+
+const firstLine = computed(() => {
+  if (!props.content) return ''
+  return props.content.split('\n')[0]
+})
+
+const handleTouchStart = (event) => {
+  touchStartX.value = event.touches[0].clientX
+  isPressed.value = true
+}
+
+const handleTouchMove = (event) => {
+  touchEndX.value = event.touches[0].clientX
+  // 如果有滑动，取消按下状态
+  if (Math.abs(touchStartX.value - touchEndX.value) > 5) {
+    isPressed.value = false
   }
 }
+
+const handleTouchEnd = () => {
+  // 重置按下状态
+  isPressed.value = false
+
+  // 计算滑动距离
+  const swipeDistance = touchStartX.value - touchEndX.value
+
+  // 如果滑动距离超过阈值，则显示删除按钮
+  if (swipeDistance > 50) {
+    isSwiped.value = true
+  } else if (swipeDistance < -50) {
+    isSwiped.value = false
+  }
+}
+
+const handleMouseDown = () => {
+  isPressed.value = true
+}
+
+const handleMouseUp = () => {
+  isPressed.value = false
+}
+
+const handleMouseLeave = () => {
+  isPressed.value = false
+}
 </script>
 
 <style scoped>
@@ -220,4 +208,4 @@ export default {
   white-space: nowrap;
   line-height: 30px;
 }
-</style>
+</style>