Refactor processing logic and enhance error handling

- Cleaned up code in processing.py by removing inline semicolons and improving readability.
- Updated upsert_file_relation calls to ensure consistent handling of file relations.
- Enhanced query_file_relations in db_schema.py to support filtering by file existence.
- Improved API error handling in index.ts with user-friendly messages for 401 and 403 errors.
- Added online/offline status tracking in Layout.vue.
- Implemented debounced search functionality across multiple views to optimize performance.
- Introduced loading skeletons in Dashboard.vue for better user experience during data fetching.
- Enhanced file preview cleanup logic in Images.vue, Orders.vue, and Tables.vue to prevent memory leaks.
- Updated global styles to include new loading and notification animations.

web/frontend/src/views/Barcodes.vue

@@ -42,7 +42,7 @@
               placeholder="搜索条码..."
               clearable
               style="width: 220px"
-              @keyup.enter="loadData"
+              @input="debouncedSearch"
               @clear="loadData"
             >
               <template #prefix><el-icon><Search /></el-icon></template>
@@ -89,7 +89,7 @@
               placeholder="搜索条码..."
               clearable
               style="width: 220px"
-              @keyup.enter="loadData"
+              @input="debouncedSearch"
               @clear="loadData"
             >
               <template #prefix><el-icon><Search /></el-icon></template>
@@ -181,16 +181,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search, Refresh, Plus, Connection, Right, Setting } from '@element-plus/icons-vue'
 import api from '../api'
 
+// Debounce helper
+function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  const debounced = (...args: Parameters<T>) => {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+  const cancel = () => { if (timer) clearTimeout(timer) }
+  return { debounced, cancel }
+}
+
 const loading = ref(false)
 const search = ref('')
 const rawItems = ref<any[]>([])
 const activeTab = ref('mapping')
 
+// Debounced search
+const { debounced: debouncedSearch, cancel: cancelSearch } = useDebounce(loadData, 400)
+
 const mappingItems = computed(() => rawItems.value.filter(r => !r.multiplier))
 const specialItems = computed(() => rawItems.value.filter(r => r.multiplier))
 
@@ -337,6 +351,7 @@ async function deleteItem(row: any) {
 }
 
 onMounted(loadData)
+onUnmounted(cancelSearch)
 </script>
 
 <style scoped>