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

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

src/components/FolderItem.vue

@@ -57,80 +57,72 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue';
 import { folder, star, trash, document } from 'ionicons/icons';
 
-export default {
-  name: 'FolderItem',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    noteCount: {
-      type: Number,
-      required: true
-    },
-    onPress: {
-      type: Function,
-      required: true
-    },
-    isSelected: {
-      type: Boolean,
-      default: false
-    }
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
   },
-  data() {
-    return {
-      folder,
-      star,
-      trash,
-      document,
-      isPressed: false
-    }
+  name: {
+    type: String,
+    required: true
   },
-  computed: {
-    folderIcon() {
-      switch (this.id) {
-        case 'all':
-          return this.folder;
-        case 'starred':
-          return this.star;
-        case 'trash':
-          return this.trash;
-        default:
-          return this.document;
-      }
-    },
-    folderIconSrc() {
-      switch (this.id) {
-        case 'all':
-          return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_all.png';
-        case 'starred':
-          return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_favorite.png';
-        case 'trash':
-          return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_trash.png';
-        default:
-          return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_document.png';
-      }
-    }
+  noteCount: {
+    type: Number,
+    required: true
   },
-  methods: {
-    handleMouseDown() {
-      this.isPressed = true;
-    },
-    handleMouseUp() {
-      this.isPressed = false;
-    },
-    handleMouseLeave() {
-      this.isPressed = false;
-    }
+  onPress: {
+    type: Function,
+    required: true
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
   }
-}
+});
+
+const isPressed = ref(false);
+
+const folderIcon = computed(() => {
+  switch (props.id) {
+    case 'all':
+      return folder;
+    case 'starred':
+      return star;
+    case 'trash':
+      return trash;
+    default:
+      return document;
+  }
+});
+
+const folderIconSrc = computed(() => {
+  switch (props.id) {
+    case 'all':
+      return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_all.png';
+    case 'starred':
+      return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_favorite.png';
+    case 'trash':
+      return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_trash.png';
+    default:
+      return '/assets/icons/drawable-xxhdpi/sidebar_folder_icon_document.png';
+  }
+});
+
+const handleMouseDown = () => {
+  isPressed.value = true;
+};
+
+const handleMouseUp = () => {
+  isPressed.value = false;
+};
+
+const handleMouseLeave = () => {
+  isPressed.value = false;
+};
 </script>
 
 <style scoped>