feat: 增强前端界面功能和用户体验

- 新增爬虫状态检测：前端实时检测爬虫运行状态，防止重复点击
- 添加来源筛选功能：可按采购平台来源筛选招标信息
- 实现关键字过滤：支持多选关键字过滤今日招标，结果保存到localStorage
- 添加分页功能：招标列表支持分页显示，可调整每页数量
- 优化关键字管理：将表格形式改为标签云形式，更直观易用
- 改进UI布局：优化标题栏布局，添加筛选控件，提升用户体验
- 调整定时任务：将爬虫频率从每30分钟改为每天午夜执行，减少服务器压力
- 增强交互体验：添加加载状态、空状态处理、标签颜色区分等细节优化

frontend/src/App.vue

@@ -34,7 +34,7 @@
         <div v-if="activeIndex === '1'">
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
             <h2 style="margin: 0;">Dashboard</h2>
-            <el-button type="primary" :loading="crawling" @click="handleCrawl">
+            <el-button type="primary" :loading="crawling" :disabled="isCrawling" @click="handleCrawl">
               <el-icon style="margin-right: 5px"><Refresh /></el-icon>
               立刻抓取
             </el-button>
@@ -63,8 +63,26 @@
             </el-col>
           </el-row>
           <el-divider />
-          <h3>Today's Bids</h3>
-          <el-table :data="bids" v-loading="loading" style="width: 100%">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+            <h3 style="margin: 0;">Today's Bids</h3>
+            <el-select
+              v-model="selectedKeywords"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              placeholder="Filter by Keywords"
+              clearable
+              style="width: 300px;"
+            >
+              <el-option
+                v-for="keyword in keywords"
+                :key="keyword.id"
+                :label="keyword.word"
+                :value="keyword.word"
+              />
+            </el-select>
+          </div>
+          <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%">
               <el-table-column prop="title" label="Title">
                 <template #default="scope">
                   <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
@@ -78,7 +96,17 @@
         </div>
 
         <div v-if="activeIndex === '2'">
-          <h2>All Bids</h2>
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+            <h2 style="margin: 0;">All Bids</h2>
+            <el-select v-model="selectedSource" placeholder="Filter by Source" clearable style="width: 200px" @change="currentPage = 1; fetchData()">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source"
+                :label="source"
+                :value="source"
+              />
+            </el-select>
+          </div>
            <el-table :data="bids" v-loading="loading" style="width: 100%">
               <el-table-column prop="title" label="Title">
                 <template #default="scope">
@@ -90,6 +118,16 @@
                 <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
               </el-table-column>
           </el-table>
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @current-change="handlePageChange"
+            @size-change="handleSizeChange"
+            style="margin-top: 20px; justify-content: flex-end;"
+          />
         </div>
 
         <div v-if="activeIndex === '3'">
@@ -97,16 +135,20 @@
              <h2>Keyword Management</h2>
              <el-button type="primary" @click="dialogVisible = true">Add Keyword</el-button>
           </div>
-         
-          <el-table :data="keywords" v-loading="loading" style="width: 100%">
-            <el-table-column prop="word" label="Keyword" />
-            <el-table-column prop="weight" label="Weight" />
-            <el-table-column label="Action">
-              <template #default="scope">
-                <el-button type="danger" size="small" @click="handleDeleteKeyword(scope.row.id)">Delete</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
+          
+          <div v-loading="loading" style="min-height: 200px;">
+            <el-tag
+              v-for="keyword in keywords"
+              :key="keyword.id"
+              closable
+              :type="getTagType(keyword.weight)"
+              @close="handleDeleteKeyword(keyword.id)"
+              style="margin: 5px;"
+            >
+              {{ keyword.word }}
+            </el-tag>
+            <el-empty v-if="keywords.length === 0" description="No keywords" />
+          </div>
         </div>
       </el-main>
     </el-container>
@@ -131,7 +173,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, computed, watch } from 'vue'
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import { DataBoard, Document, Setting, Refresh } from '@element-plus/icons-vue'
@@ -143,32 +185,102 @@ const keywords = ref<any[]>([])
 const loading = ref(false)
 const crawling = ref(false)
 const dialogVisible = ref(false)
+const selectedSource = ref('')
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const sourceOptions = ref<string[]>([])
+const isCrawling = ref(false)
+const selectedKeywords = ref<string[]>([])
+
+// 从 localStorage 加载保存的关键字
+const loadSavedKeywords = () => {
+  const saved = localStorage.getItem('selectedKeywords')
+  if (saved) {
+    try {
+      selectedKeywords.value = JSON.parse(saved)
+    } catch (e) {
+      console.error('Failed to parse saved keywords:', e)
+    }
+  }
+}
+
+// 监听关键字变化并保存到 localStorage
+watch(selectedKeywords, (newKeywords) => {
+  localStorage.setItem('selectedKeywords', JSON.stringify(newKeywords))
+}, { deep: true })
 
 const form = reactive({
   word: '',
   weight: 1
 })
 
+// 根据 weight 获取 tag 类型
+const getTagType = (weight: number) => {
+  if (weight >= 5) return 'danger'
+  if (weight >= 4) return 'warning'
+  if (weight >= 3) return 'primary'
+  if (weight >= 2) return 'success'
+  return 'info'
+}
+
 const handleSelect = (key: string) => {
   activeIndex.value = key
 }
 
+// 处理分页变化
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  fetchData()
+}
+
+// 处理每页数量变化
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchData()
+}
+
 const formatDate = (dateString: string) => {
   if (!dateString) return '-'
   return new Date(dateString).toLocaleDateString()
 }
 
+// 过滤 Today's Bids，只显示包含所选关键字的项目
+const filteredTodayBids = computed(() => {
+  if (selectedKeywords.value.length === 0) {
+    return bids.value
+  }
+  
+  return bids.value.filter(bid => {
+    return selectedKeywords.value.some(keyword =>
+      bid.title.toLowerCase().includes(keyword.toLowerCase())
+    )
+  })
+})
+
 const fetchData = async () => {
   loading.value = true
   try {
-    const [bidsRes, highRes, kwRes] = await Promise.all([
-      axios.get('/api/bids'),
+    const [bidsRes, highRes, kwRes, sourcesRes, statusRes] = await Promise.all([
+      axios.get('/api/bids', {
+        params: {
+          page: currentPage.value,
+          limit: pageSize.value,
+          source: selectedSource.value || undefined
+        }
+      }),
       axios.get('/api/bids/high-priority'),
-      axios.get('/api/keywords')
+      axios.get('/api/keywords'),
+      axios.get('/api/bids/sources'),
+      axios.get('/api/crawler/status')
     ])
     bids.value = bidsRes.data.items
+    total.value = bidsRes.data.total
     highPriorityBids.value = highRes.data
     keywords.value = kwRes.data
+    sourceOptions.value = sourcesRes.data
+    isCrawling.value = statusRes.data.isCrawling
   } catch (error) {
     ElMessage.error('Failed to fetch data')
   } finally {
@@ -177,6 +289,10 @@ const fetchData = async () => {
 }
 
 const handleCrawl = async () => {
+  if (isCrawling.value) {
+    ElMessage.warning('Crawl is already running')
+    return
+  }
   crawling.value = true
   try {
     await axios.post('/api/crawler/run')
@@ -217,6 +333,7 @@ const handleDeleteKeyword = async (id: string) => {
 }
 
 onMounted(() => {
+  loadSavedKeywords()
   fetchData()
 })
 </script>