初始化提交

src/pages/FolderPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <ion-page>
+    <Header 
+      title="文件夹"
+      :onBack="() => window.history.back()"
+    />
+    <div style="padding: 10px; background-color: var(--background)">
+      <div style="display: flex; align-items: center; background-color: var(--search-bar-background); border-radius: 8px; padding: 0 10px">
+        <ion-icon :icon="search" style="font-size: 20px; color: var(--text-tertiary)"></ion-icon>
+        <ion-input
+          placeholder="搜索文件夹..."
+          :value="searchQuery"
+          @ionChange="e => setSearchQuery(e.detail.value)"
+          style="--padding-start: 10px; --padding-end: 10px; flex: 1; font-size: 16px; color: var(--text-primary)"
+        ></ion-input>
+        <ion-button 
+          v-if="searchQuery.length > 0"
+          fill="clear" 
+          @click="() => setSearchQuery('')"
+        >
+          <ion-icon :icon="closeCircle" style="font-size: 20px; color: var(--text-tertiary)"></ion-icon>
+        </ion-button>
+      </div>
+    </div>
+    <ion-content>
+      <ion-list style="background-color: var(--background); padding: 0 16px; --ion-item-background: var(--background)">
+        <FolderItem
+          v-for="folder in filteredFolders"
+          :key="folder.id"
+          :id="folder.id"
+          :name="folder.name"
+          :noteCount="folder.noteCount"
+          :onPress="() => handleFolderPress(folder.id)"
+          :isSelected="folder.id === selectedFolder"
+        />
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import { useAppData } from '../utils/AppDataContext';
+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;
+    };
+    
+    return {
+      searchQuery,
+      selectedFolder,
+      filteredFolders,
+      handleFolderPress,
+      handleAddFolder,
+      handleSearch,
+      handleBackPress,
+      setSearchQuery,
+      search,
+      closeCircle
+    };
+  }
+};
+</script>