还原了搜索栏布局、样式；

还原了文件夹管理布局、样式；
还原了头部布局、样式；

src/components/FolderItem.vue

@@ -1,221 +1,77 @@
 <template>
-  <div 
-    @click="onPress"
-    class="folder-item-container"
-    :class="{ 'folder-item-selected': isSelected, 'folder-item-pressed': isPressed }"
-    @mousedown="handleMouseDown"
-    @mouseup="handleMouseUp"
-    @mouseleave="handleMouseLeave"
-  >
-    <div class="folder-item-content">
-      <!-- Hidden folder icon (matches native implementation) -->
-      <img 
-        v-if="folderIconSrc"
-        :src="folderIconSrc" 
-        class="folder-item-icon"
-        alt="folder icon"
-        style="visibility: hidden;"
-      />
-      <ion-icon 
-        v-else
-        :icon="folderIcon" 
-        class="folder-item-icon"
-        style="visibility: hidden;"
-      ></ion-icon>
-      
-      <!-- Checkbox for selection (visible when isSelected is true) -->
-      <img 
-        v-if="isSelected"
-        src="/assets/icons/drawable-xxhdpi/icon_folder_checked.png"
-        class="folder-item-checkbox"
-        alt="selected"
-      />
-      <img 
-        v-else
-        src="/assets/icons/drawable-xxhdpi/icon_folder_unchecked.png"
-        class="folder-item-checkbox"
-        alt="not selected"
-      />
-      
-      <div class="folder-item-text-container">
-        <div class="folder-item-name">
-          {{ name }}
-        </div>
-        <div class="folder-item-count">
-          {{ noteCount }} 条便签
-        </div>
-      </div>
-      
-      <!-- Selected indicator (visible when isSelected is true) -->
-      <img 
-        v-if="isSelected"
-        src="/assets/icons/drawable-xxhdpi/folder_selected.png"
-        class="folder-item-selected-icon"
-        alt="selected"
-      />
-    </div>
+  <div @click="onPress" class="code-fun-flex-row code-fun-items-center code-fun-relative folder-item">
+    <img class="folder-icon" :src="iconSrc" />
+    <span class="folder-name">{{ name }}</span>
+    <span class="folder-count">{{ noteCount }}</span>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { folder, star, trash, document } from 'ionicons/icons';
+import { computed } from 'vue'
 
 const props = defineProps({
   id: {
     type: String,
-    required: true
+    required: true,
   },
   name: {
     type: String,
-    required: true
+    required: true,
   },
   noteCount: {
     type: Number,
-    required: true
+    required: true,
   },
   onPress: {
     type: Function,
-    required: true
+    required: true,
   },
   isSelected: {
     type: Boolean,
-    default: false
-  }
-});
+    default: false,
+  },
+})
 
-const isPressed = ref(false);
-
-const folderIcon = computed(() => {
+const iconSrc = computed(() => {
   switch (props.id) {
     case 'all':
-      return folder;
+      return 'assets/icons/drawable-xxhdpi/icon_folder_all.png'
     case 'starred':
-      return star;
+      return 'assets/icons/drawable-xxhdpi/icon_folder_favorite.png'
     case 'trash':
-      return trash;
+      return 'assets/icons/drawable-xxhdpi/icon_folder_trash.png'
+    case 'archive':
+      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
     default:
-      return document;
+      return 'assets/icons/drawable-xxhdpi/icon_folder_document.png'
   }
-});
-
-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>
-.folder-item-container {
-  position: relative;
-  min-height: 44px;
-  background-color: var(--background-card);
-  cursor: pointer;
-  overflow: hidden;
+.folder-item {
+  padding: 0.3rem 0;
+  background-color: #00000000;
 }
 
-.folder-item-container.folder-item-selected {
-  background-color: var(--folder-item-selected);
-}
-
-.folder-item-container.folder-item-pressed {
-  background-color: var(--black-05);
-  transform: scale(0.99);
-}
-
-.folder-item-container.folder-item-pressed::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url('/assets/icons/drawable-xxhdpi/folder_item_pressed_bg.png') repeat;
-  background-size: 100% 100%;
-  opacity: 0.5;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.folder-item-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 44px;
-  padding: 0 16px;
-  position: relative;
-}
-
-.folder-item-icon {
-  width: 30px;
-  height: 30px;
-  color: var(--folder-name);
+.folder-icon {
+  width: 1.8rem;
+  height: 1.8rem;
   flex-shrink: 0;
-  margin-left: 1px;
-  padding-left: 11px;
+  margin-inline: 0.3rem;
 }
 
-.folder-item-icon[src] {
-  width: 30px;
-  height: 30px;
-  object-fit: contain;
+.folder-name {
+  font-size: 0.9rem;
+  line-height: 1.52rem;
+  color: #9b9b9b;
 }
 
-.folder-item-checkbox {
-  width: 30px;
-  height: 30px;
-  flex-shrink: 0;
-  margin-left: 10px;
+.folder-count {
+  font-size: 0.8rem;
+  line-height: 1.16rem;
+  margin-left: 0.7rem;
+  margin-top: 0.2rem;
+  color: #b8b8b8;
 }
-
-.folder-item-selected-icon {
-  width: 30px;
-  height: 30px;
-  margin-left: auto;
-  flex-shrink: 0;
-  margin-right: 0;
-}
-
-.folder-item-text-container {
-  flex: 1;
-  margin-left: 10px;
-  margin-right: 6px;
-}
-
-.folder-item-name {
-  font-size: 15px;
-  font-weight: normal;
-  color: var(--folder-name);
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.folder-item-count {
-  font-size: 12px;
-  color: var(--folder-count);
-  line-height: 1.2;
-  margin-top: 2px;
-}
-</style>
+</style>