refactor: enhance UI components with improved styling and transitions

- Updated DownloadQueue.vue to use Tailwind CSS for styling and added transition effects for better user experience.
- Refactored InstalledAppsModal.vue to improve layout and responsiveness, incorporating Tailwind CSS styles.
- Enhanced ScreenPreview.vue with transitions and improved button styles for navigation.
- Revamped ThemeToggle.vue to provide a more modern toggle button design with accessibility features.
- Updated TopActions.vue to use Tailwind CSS for buttons and layout adjustments.
- Refined UpdateAppsModal.vue with a cleaner layout, improved button styles, and better handling of loading states.

src/components/AppHeader.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="topbar">
-    <TopActions @update="$emit('update')" @list="$emit('list')" />
-    <div class="search">
-      <input 
-        id="searchBox" 
-        placeholder="搜索应用名 / 包名 / 标签（回车或自动）"
-        @input="debounceSearch"
-        v-model="localSearchQuery"
-      />
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
+      <TopActions @update="$emit('update')" @list="$emit('list')" />
+      <div class="w-full flex-1">
+        <label for="searchBox" class="sr-only">搜索应用</label>
+        <div class="relative">
+          <i class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+          <input id="searchBox" v-model="localSearchQuery"
+            class="w-full rounded-2xl border border-slate-200/70 bg-white/80 py-3 pl-12 pr-4 text-sm text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-brand/50 focus:ring-4 focus:ring-brand/10 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-200"
+            placeholder="搜索应用名 / 包名 / 标签" @input="debounceSearch" />
+        </div>
+      </div>
     </div>
-    <div class="stats" id="currentCount">
-      共 {{ appsCount }} 个应用 · 在任何主流Linux发行上安装应用
+    <div class="text-sm text-slate-500 dark:text-slate-400" id="currentCount">
+      共 {{ appsCount }} 个应用 · 在任何主流 Linux 发行上安装应用
     </div>
   </div>
 </template>
@@ -35,10 +38,10 @@ const emit = defineEmits(['update-search', 'update', 'list']);
 const localSearchQuery = ref(props.searchQuery || '');
 const timeoutId = ref(null);
 
-const debounceSearch = (e) => {
+const debounceSearch = () => {
   clearTimeout(timeoutId.value);
   timeoutId.value = setTimeout(() => {
-    emit('update-search', e);
+    emit('update-search', localSearchQuery.value);
   }, 220);
 };
 
@@ -46,7 +49,3 @@ watch(() => props.searchQuery, (newVal) => {
   localSearchQuery.value = newVal || '';
 });
 </script>
-
-<style scoped>
-/* 该组件样式已在全局样式中定义 */
-</style>