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/Tasks.vue

@@ -58,7 +58,7 @@
             <el-option label="Excel处理" value="Excel标准化处理" />
             <el-option label="合并采购单" value="合并采购单" />
           </el-select>
-          <el-input v-model="search" placeholder="搜索..." clearable size="small" style="width: 160px" @keyup.enter="loadData" @clear="loadData">
+          <el-input v-model="search" placeholder="搜索..." clearable size="small" style="width: 160px" @input="debouncedSearch" @clear="loadData">
             <template #prefix><el-icon><Search /></el-icon></template>
           </el-input>
           <el-button size="small" @click="loadData" :icon="Refresh">刷新</el-button>
@@ -136,11 +136,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Timer, CircleCheck, CircleClose, Loading, Search, Refresh } from '@element-plus/icons-vue'
 import api from '../api'
 
+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 filterStatus = ref('')
@@ -152,6 +162,9 @@ const total = ref(0)
 
 const taskStats = reactive({ total: 0, completed: 0, failed: 0, running: 0 })
 
+// Debounced search
+const { debounced: debouncedSearch, cancel: cancelSearch } = useDebounce(loadData, 400)
+
 const showDetailDialog = ref(false)
 const detailTask = ref<any>(null)
 
@@ -223,6 +236,7 @@ onMounted(() => {
   loadData()
   loadStats()
 })
+onUnmounted(cancelSearch)
 </script>
 
 <style scoped>