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

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

src/pages/FolderPage.vue

@@ -38,95 +38,79 @@
   </ion-page>
 </template>
 
-<script>
-import { ref, computed } from 'vue';
-import { useAppData } from '../utils/AppDataContext';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useAppStore } from '../stores/useAppStore';
 import { search, closeCircle } from 'ionicons/icons';
 import FolderItem from '../components/FolderItem.vue';
 import Header from '../components/Header.vue';
 
-export default {
-  name: 'FolderPage',
-  components: {
-    FolderItem,
-    Header
-  },
-  setup() {
-    const { state } = useAppData();
-    const searchQuery = ref('');
-    const selectedFolder = ref('all');
-    
-    // Calculate note count for each folder
-    const foldersWithCount = computed(() => {
-      return state.folders.map(folder => {
-        const noteCount = state.notes.filter(note => note.folderId === folder.id).length;
-        return {
-          ...folder,
-          noteCount,
-        };
-      });
-    });
-    
-    // Add default folders at the beginning
-    const allNotesCount = computed(() => state.notes.length);
-    const starredNotesCount = computed(() => state.notes.filter(note => note.isStarred).length);
-    // Assuming we have a way to track deleted notes in the future
-    const trashNotesCount = 0;
-    
-    const foldersWithAllNotes = computed(() => {
-      return [
-        { id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
-        { id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
-        { id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
-        ...foldersWithCount.value,
-      ];
-    });
-    
-    const handleFolderPress = (folderId) => {
-      // 更新选中的文件夹状态
-      selectedFolder.value = folderId;
-      // 在实际应用中，这里会将选中的文件夹传递回NoteListScreen
-      // 通过导航参数传递选中的文件夹ID
-      window.location.hash = `#/notes?folder=${folderId}`;
-    };
-    
-    const handleAddFolder = () => {
-      // In a full implementation, this would open a folder creation dialog
-      console.log('Add folder pressed');
-    };
-    
-    const handleSearch = () => {
-      // In a full implementation, this would filter folders based on searchQuery
-      console.log('Search for:', searchQuery.value);
-    };
-    
-    const handleBackPress = () => {
-      window.history.back();
-    };
-    
-    // Filter folders based on search query
-    const filteredFolders = computed(() => {
-      return foldersWithAllNotes.value.filter(folder => 
-        folder.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-      );
-    });
-    
-    const setSearchQuery = (value) => {
-      searchQuery.value = value;
-    };
-    
+const store = useAppStore();
+
+// 加载初始数据
+onMounted(() => {
+  store.loadData();
+});
+
+const searchQuery = ref('');
+const selectedFolder = ref('all');
+
+// Calculate note count for each folder
+const foldersWithCount = computed(() => {
+  return store.folders.map(folder => {
+    const noteCount = store.notes.filter(note => note.folderId === folder.id).length;
     return {
-      searchQuery,
-      selectedFolder,
-      filteredFolders,
-      handleFolderPress,
-      handleAddFolder,
-      handleSearch,
-      handleBackPress,
-      setSearchQuery,
-      search,
-      closeCircle
+      ...folder,
+      noteCount,
     };
-  }
+  });
+});
+
+// Add default folders at the beginning
+const allNotesCount = computed(() => store.notes.length);
+const starredNotesCount = computed(() => store.notes.filter(note => note.isStarred).length);
+// Assuming we have a way to track deleted notes in the future
+const trashNotesCount = 0;
+
+const foldersWithAllNotes = computed(() => {
+  return [
+    { id: 'all', name: '全部便签', noteCount: allNotesCount.value, createdAt: new Date() },
+    { id: 'starred', name: '加星便签', noteCount: starredNotesCount.value, createdAt: new Date() },
+    { id: 'trash', name: '回收站', noteCount: trashNotesCount, createdAt: new Date() },
+    ...foldersWithCount.value,
+  ];
+});
+
+const handleFolderPress = (folderId) => {
+  // 更新选中的文件夹状态
+  selectedFolder.value = folderId;
+  // 在实际应用中，这里会将选中的文件夹传递回NoteListScreen
+  // 通过导航参数传递选中的文件夹ID
+  window.location.hash = `#/notes?folder=${folderId}`;
+};
+
+const handleAddFolder = () => {
+  // In a full implementation, this would open a folder creation dialog
+  console.log('Add folder pressed');
+};
+
+const handleSearch = () => {
+  // In a full implementation, this would filter folders based on searchQuery
+  console.log('Search for:', searchQuery.value);
+};
+
+const handleBackPress = () => {
+  window.history.back();
+};
+
+// Filter folders based on search query
+const filteredFolders = computed(() => {
+  return foldersWithAllNotes.value.filter(folder => 
+    folder.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const setSearchQuery = (value) => {
+  searchQuery.value = value;
 };
 </script>