From 95dfcd02788fcf3b198364bfa8e11891d8c6e037 Mon Sep 17 00:00:00 2001
From: dmy <dmy@dmy.com>
Date: Mon, 19 Jan 2026 13:47:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                       |   2 +-
 frontend/src/App.vue                      | 196 ++++++++++++++++++++--
 frontend/src/components/Bids.vue          |  83 +++++++--
 frontend/src/components/CrawlInfo.vue     |  82 +++++++--
 frontend/src/components/Dashboard-AI.vue  | 161 ++++++++++++++----
 frontend/src/components/Dashboard.vue     | 137 ++++++++++++---
 frontend/src/components/Keywords.vue      |  90 +++++++---
 frontend/src/components/PinnedProject.vue |  47 +++++-
 frontend/src/style.css                    |  83 ++++++---
 9 files changed, 732 insertions(+), 149 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 5c70f3b..d76e1d4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>投标</title>
   </head>
   <body>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c3388db..6dba4bf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,33 @@
 <template>
-  <el-container class="layout-container" style="height: 100vh">
-    <el-aside width="200px" style="background-color: #545c64">
+  <div class="layout-container" :class="{ 'is-mobile': isMobile }">
+    <!-- 移动端顶部导航栏 -->
+    <el-header v-if="isMobile" class="mobile-header">
+      <div class="mobile-header-content">
+        <el-button type="primary" link @click="toggleSidebar">
+          <el-icon :size="24"><Fold /></el-icon>
+        </el-button>
+        <span class="mobile-title">投标信息一览</span>
+        <el-button type="primary" link @click="handleLogout" v-if="currentUser">
+          <el-icon :size="24"><SwitchButton /></el-icon>
+        </el-button>
+      </div>
+    </el-header>
+
+    <!-- 移动端侧边栏遮罩层 -->
+    <div v-if="isMobile && sidebarVisible" class="sidebar-overlay" @click="toggleSidebar"></div>
+
+    <!-- 侧边栏 - 桌面端固定显示，移动端可滑动 -->
+    <el-aside :class="{ 'mobile-sidebar': isMobile, 'sidebar-visible': sidebarVisible }" width="200px">
       <div class="logo">投标信息一览</div>
-      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="1"
-        text-color="#fff" @select="handleSelect">
-        
+      <el-menu
+        active-text-color="#ffd04b"
+        background-color="#545c64"
+        class="el-menu-vertical-demo"
+        :default-active="activeIndex"
+        text-color="#fff"
+        @select="handleSelect"
+        :collapse="isMobile"
+      >
         <el-menu-item index="1">
           <el-icon>
             <MagicStick />
@@ -39,31 +62,44 @@
     </el-aside>
 
     <el-container>
-      <el-header style="text-align: right; font-size: 12px">
-        <span v-if="currentUser">{{ currentUser }}</span>
-        <el-button v-if="currentUser" type="primary" link @click="handleLogout">退出登录</el-button>
+      <!-- 桌面端顶部导航栏 -->
+      <el-header v-if="!isMobile" class="desktop-header">
+        <div class="header-content">
+          <span v-if="currentUser" class="username">{{ currentUser }}</span>
+          <el-button v-if="currentUser" type="primary" link @click="handleLogout">退出登录</el-button>
+        </div>
       </el-header>
 
       <el-main>
         <DashboardAI v-if="activeIndex === '1'" :bids="bids" />
-        <Dashboard v-if="activeIndex === '2'" :today-bids="todayBids"
-          :keywords="keywords" :loading="loading" :is-crawling="isCrawling" @refresh="fetchData"
-          @update-bids="updateBidsByDateRange" />
+        <Dashboard
+          v-if="activeIndex === '2'"
+          :today-bids="todayBids"
+          :keywords="keywords"
+          :loading="loading"
+          :is-crawling="isCrawling"
+          @refresh="fetchData"
+          @update-bids="updateBidsByDateRange"
+        />
 
-
-
-        <Bids v-if="activeIndex === '3'" :bids="bids" :source-options="sourceOptions" :loading="loading" :total="total"
-          @fetch="handleFetchBids" />
+        <Bids
+          v-if="activeIndex === '3'"
+          :bids="bids"
+          :source-options="sourceOptions"
+          :loading="loading"
+          :total="total"
+          @fetch="handleFetchBids"
+        />
 
         <Keywords v-if="activeIndex === '4'" :keywords="keywords" :loading="loading" @refresh="fetchData" />
 
         <CrawlInfo v-if="activeIndex === '5'" />
       </el-main>
     </el-container>
-  </el-container>
+  </div>
 
   <!-- 登录对话框 -->
-  <el-dialog v-model="loginDialogVisible" title="用户登录" width="400px" :close-on-click-modal="false" :show-close="false">
+  <el-dialog v-model="loginDialogVisible" title="用户登录" width="90%" :style="{ maxWidth: '400px' }" :close-on-click-modal="false" :show-close="false">
     <el-form :model="loginForm" label-width="80px">
       <el-form-item label="用户名">
         <el-input v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter="handleLogin" />
@@ -82,7 +118,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import api, { setAuthCredentials, clearAuthCredentials, isAuthenticated } from './utils/api'
 import { ElMessage } from 'element-plus'
-import { DataBoard, Document, Setting, MagicStick, Connection } from '@element-plus/icons-vue'
+import { DataBoard, Document, Setting, MagicStick, Connection, Fold, SwitchButton } from '@element-plus/icons-vue'
 import Dashboard from './components/Dashboard.vue'
 import DashboardAI from './components/Dashboard-AI.vue'
 import Bids from './components/Bids.vue'
@@ -98,6 +134,10 @@ const isCrawling = ref(false)
 const total = ref(0)
 const sourceOptions = ref<string[]>([])
 
+// 移动端状态
+const isMobile = ref(false)
+const sidebarVisible = ref(false)
+
 // 登录相关状态
 const loginDialogVisible = ref(false)
 const loginLoading = ref(false)
@@ -107,8 +147,24 @@ const loginForm = ref({
 })
 const currentUser = ref<string | null>(null)
 
+// 检测屏幕宽度
+const checkScreenSize = () => {
+  isMobile.value = window.innerWidth < 768
+  if (!isMobile.value) {
+    sidebarVisible.value = true
+  }
+}
+
+const toggleSidebar = () => {
+  sidebarVisible.value = !sidebarVisible.value
+}
+
 const handleSelect = (key: string) => {
   activeIndex.value = key
+  // 移动端选择后关闭侧边栏
+  if (isMobile.value) {
+    sidebarVisible.value = false
+  }
 }
 
 const handleFetchBids = async (page: number, limit: number, source?: string) => {
@@ -256,14 +312,29 @@ onMounted(() => {
   
   // 监听认证要求事件
   window.addEventListener('auth-required', handleAuthRequired)
+  
+  // 监听屏幕大小变化
+  checkScreenSize()
+  window.addEventListener('resize', checkScreenSize)
 })
 
 onUnmounted(() => {
   window.removeEventListener('auth-required', handleAuthRequired)
+  window.removeEventListener('resize', checkScreenSize)
 })
 </script>
 
 <style scoped>
+.layout-container {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.layout-container .el-container {
+  height: 100%;
+}
+
 .layout-container .el-header {
   background-color: #fff;
   color: var(--el-text-color-primary);
@@ -273,6 +344,13 @@ onUnmounted(() => {
 
 .layout-container .el-aside {
   color: var(--el-text-color-primary);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-container .el-menu {
+  flex: 1;
 }
 
 .logo {
@@ -284,4 +362,86 @@ onUnmounted(() => {
   font-size: 18px;
   background-color: #434a50;
 }
+
+/* 桌面端样式 */
+.desktop-header .header-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+}
+
+.username {
+  margin-right: 15px;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 移动端样式 */
+.is-mobile .el-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-header {
+  background-color: #434a50;
+  color: white;
+  padding: 0;
+  height: 50px !important;
+  line-height: 50px;
+}
+
+.mobile-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: 0 10px;
+}
+
+.mobile-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.mobile-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  z-index: 1000;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.mobile-sidebar.sidebar-visible {
+  transform: translateX(0);
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.is-mobile .el-main {
+  flex: 1;
+  padding: 10px;
+  overflow: auto;
+}
+
+/* Element Plus 菜单在移动端的样式调整 */
+.is-mobile .el-menu {
+  border-right: none;
+}
+
+.is-mobile .el-menu-item {
+  padding: 0 20px !important;
+}
 </style>
diff --git a/frontend/src/components/Bids.vue b/frontend/src/components/Bids.vue
index 319f82a..545571f 100644
--- a/frontend/src/components/Bids.vue
+++ b/frontend/src/components/Bids.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <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="handleSourceChange">
+  <div class="bids-container">
+    <div class="bids-header">
+      <h2 class="bids-title">All Bids</h2>
+      <el-select v-model="selectedSource" placeholder="按来源筛选" clearable class="source-select" @change="handleSourceChange">
         <el-option
           v-for="source in sourceOptions"
           :key="source"
@@ -11,14 +11,14 @@
         />
       </el-select>
     </div>
-    <el-table :data="bids" v-loading="loading" style="width: 100%">
-      <el-table-column label="Pin" width="60" align="center">
+    <el-table :data="bids" v-loading="loading" style="width: 100%" class="bids-table">
+      <el-table-column label="Pin" width="50" align="center">
         <template #default="scope">
           <el-icon
             :style="{
               color: scope.row.pin ? '#f56c6c' : '#909399',
               cursor: 'pointer',
-              fontSize: '18px'
+              fontSize: '16px'
             }"
             @click="togglePin(scope.row)"
           >
@@ -31,8 +31,8 @@
           <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
         </template>
       </el-table-column>
-      <el-table-column prop="source" label="Source" width="200" />
-      <el-table-column prop="publishDate" label="Date" width="150">
+      <el-table-column prop="source" label="Source" width="100" />
+      <el-table-column prop="publishDate" label="Date" width="100">
         <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
       </el-table-column>
     </el-table>
@@ -44,7 +44,7 @@
       layout="total, sizes, prev, pager, next, jumper"
       @current-change="handlePageChange"
       @size-change="handleSizeChange"
-      style="margin-top: 20px; justify-content: flex-end;"
+      class="pagination"
     />
   </div>
 </template>
@@ -103,6 +103,41 @@ const togglePin = async (item: any) => {
 </script>
 
 <style scoped>
+.bids-container {
+  padding: 0;
+}
+
+.bids-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.bids-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.source-select {
+  width: 100%;
+  max-width: 200px;
+}
+
+.bids-table {
+  width: 100%;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
 a {
   text-decoration: none;
   color: inherit;
@@ -111,4 +146,32 @@ a {
 a:hover {
   color: #409eff;
 }
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .bids-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .bids-title {
+    font-size: 1.1rem;
+  }
+
+  .source-select {
+    max-width: 100%;
+  }
+
+  .el-table {
+    font-size: 12px;
+  }
+
+  .el-table .cell {
+    padding: 6px;
+  }
+
+  .pagination {
+    justify-content: center;
+  }
+}
 </style>
diff --git a/frontend/src/components/CrawlInfo.vue b/frontend/src/components/CrawlInfo.vue
index 90bd473..2a5fdf5 100644
--- a/frontend/src/components/CrawlInfo.vue
+++ b/frontend/src/components/CrawlInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="crawl-info">
-    <el-card>
+    <el-card class="crawl-card">
       <template #header>
         <div class="card-header">
-          <span>爬虫统计信息</span>
+          <span class="card-title">爬虫统计信息</span>
           <el-button type="primary" size="small" @click="fetchCrawlStats" :loading="loading">
             <el-icon><Refresh /></el-icon>
             刷新
@@ -11,33 +11,33 @@
         </div>
       </template>
 
-      <el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading">
-        <el-table-column prop="source" label="爬虫来源" width="200" />
-        <el-table-column prop="count" label="本次获取数量" width="120" sortable />
-        <el-table-column label="最近更新时间" width="180">
+      <el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table">
+        <el-table-column prop="source" label="爬虫来源" width="120" />
+        <el-table-column prop="count" label="本次获取数量" width="100" sortable />
+        <el-table-column label="最近更新时间" width="140">
           <template #default="{ row }">
             {{ formatDateTime(row.latestUpdate) }}
           </template>
         </el-table-column>
-        <el-table-column label="最新工程时间" width="180">
+        <el-table-column label="最新工程时间" width="140">
           <template #default="{ row }">
             {{ formatDateTime(row.latestPublishDate) }}
           </template>
         </el-table-column>
-        <el-table-column label="状态" width="100">
+        <el-table-column label="状态" width="80">
           <template #default="{ row }">
             <el-tag :type="row.error && row.error.trim() ? 'danger' : (row.count > 0 ? 'success' : 'info')">
               {{ row.error && row.error.trim() ? '出错' : (row.count > 0 ? '正常' : '无数据') }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="错误信息" min-width="200">
+        <el-table-column label="错误信息" min-width="120">
           <template #default="{ row }">
-            <span v-if="row.error && row.error.trim()" style="color: #f56c6c">{{ row.error }}</span>
+            <span v-if="row.error && row.error.trim()" style="color: #f56c6c; font-size: 12px;">{{ row.error }}</span>
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="80">
           <template #default="{ row }">
             <el-button
               type="primary"
@@ -47,14 +47,13 @@
               :disabled="crawlingSources.has(row.source)"
             >
               <el-icon><Refresh /></el-icon>
-              更新
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="summary" v-if="crawlStats.length > 0">
-        <el-descriptions :column="3" border>
+        <el-descriptions :column="2" border class="descriptions">
           <el-descriptions-item label="爬虫来源总数">
             {{ crawlStats.length }}
           </el-descriptions-item>
@@ -168,7 +167,11 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .crawl-info {
-  padding: 20px;
+  padding: 0;
+}
+
+.crawl-card {
+  width: 100%;
 }
 
 .card-header {
@@ -177,7 +180,58 @@ onBeforeUnmount(() => {
   align-items: center;
 }
 
+.card-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.crawl-table {
+  width: 100%;
+}
+
 .summary {
   margin-top: 20px;
 }
+
+.descriptions {
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: #409eff;
+}
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .card-title {
+    font-size: 1rem;
+  }
+
+  .el-table {
+    font-size: 11px;
+  }
+
+  .el-table .cell {
+    padding: 4px;
+  }
+
+  .el-descriptions {
+    font-size: 12px;
+  }
+
+  .summary {
+    margin-top: 16px;
+  }
+}
 </style>
diff --git a/frontend/src/components/Dashboard-AI.vue b/frontend/src/components/Dashboard-AI.vue
index e60cf6d..20f4551 100644
--- a/frontend/src/components/Dashboard-AI.vue
+++ b/frontend/src/components/Dashboard-AI.vue
@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-      <h2 style="margin: 0;">Dashboard AI</h2>
+  <div class="dashboard-ai-container">
+    <div class="dashboard-header">
+      <h2 class="dashboard-title">Dashboard AI</h2>
       <el-button type="primary" :loading="loading" @click="fetchAIRecommendations">
         <el-icon style="margin-right: 5px"><MagicStick /></el-icon>
         获取 AI 推荐
       </el-button>
     </div>
     <PinnedProject ref="pinnedProjectRef" @pin-changed="handlePinChanged" />
-    <el-row :gutter="20">
+    <el-row :gutter="20" class="ai-section">
       <el-col :span="24">
         <el-card class="box-card" shadow="hover">
-          <!-- <template #header> -->
-            <div class="card-header">
-              <span>AI 推荐项目</span>
-              <el-tag type="success">{{ aiRecommendations.length }} 个推荐</el-tag>
-            </div>
-          <!-- </template> -->
+          <div class="card-header">
+            <span>AI 推荐项目</span>
+            <el-tag type="success">{{ aiRecommendations.length }} 个推荐</el-tag>
+          </div>
           <div v-if="loading" style="text-align: center; padding: 40px;">
             <el-icon class="is-loading" :size="30"><Loading /></el-icon>
             <p style="margin-top: 10px; color: #909399;">AI 正在分析中...</p>
@@ -27,14 +25,14 @@
             <p style="font-size: 12px; margin-top: 5px;">点击上方按钮获取 AI 推荐</p>
           </div>
           <div v-else>
-            <el-table :data="aiRecommendations" style="width: 100%" size="small">
-              <el-table-column label="Pin" width="60" align="center">
+            <el-table :data="aiRecommendations" style="width: 100%" size="small" class="ai-table">
+              <el-table-column label="Pin" width="50" align="center">
                 <template #default="scope">
                   <el-icon
                     :style="{
                       color: scope.row.pin ? '#f56c6c' : '#909399',
                       cursor: 'pointer',
-                      fontSize: '18px'
+                      fontSize: '16px'
                     }"
                     @click="togglePin(scope.row)"
                   >
@@ -47,13 +45,13 @@
                   <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
                 </template>
               </el-table-column>
-              <el-table-column prop="source" label="来源" width="200" />
-              <el-table-column prop="publishDate" label="发布日期" width="180">
+              <el-table-column prop="source" label="来源" width="100" />
+              <el-table-column prop="publishDate" label="发布日期" width="100">
                 <template #default="scope">
                   {{ formatDate(scope.row.publishDate) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="confidence" label="推荐度" width="120">
+              <el-table-column prop="confidence" label="推荐度" width="80">
                 <template #default="scope">
                   <el-tag :type="getConfidenceType(scope.row.confidence)">
                     {{ scope.row.confidence }}%
@@ -65,26 +63,28 @@
         </el-card>
       </el-col>
     </el-row>
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-      <h3 style="margin: 0;">选择日期范围</h3>
-      <div style="display: flex; gap: 10px;">
+    <div class="filter-section">
+      <h3 class="filter-title">选择日期范围</h3>
+      <div class="filter-controls">
         <el-date-picker
           v-model="dateRange"
           type="daterange"
-          range-separator="To"
-          start-placeholder="Start Date"
-          end-placeholder="End Date"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           clearable
-          style="width: 240px;"
+          class="date-picker"
         />
-        <el-button type="primary" @click="setLast3Days">3天</el-button>
-        <el-button type="primary" @click="setLast7Days">7天</el-button>
-        <el-button type="success" :loading="bidsLoading" @click="fetchBidsByDateRange">
-          <el-icon style="margin-right: 5px"><List /></el-icon>
-          列出时间范围内所有工程
-        </el-button>
+        <div class="button-group">
+          <el-button type="primary" @click="setLast3Days">3天</el-button>
+          <el-button type="primary" @click="setLast7Days">7天</el-button>
+          <el-button type="success" :loading="bidsLoading" @click="fetchBidsByDateRange">
+            <el-icon style="margin-right: 5px"><List /></el-icon>
+            列出时间范围内所有工程
+          </el-button>
+        </div>
       </div>
     </div>
     <el-row v-if="showAllBids" :gutter="20" style="margin-top: 20px;">
@@ -105,14 +105,14 @@
             <p style="margin-top: 10px;">该时间范围内暂无工程</p>
           </div>
           <div v-else>
-            <el-table :data="bidsByDateRange" style="width: 100%" size="small">
+            <el-table :data="bidsByDateRange" style="width: 100%" size="small" class="bids-table">
               <el-table-column prop="title" label="项目名称">
                 <template #default="scope">
                   <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
                 </template>
               </el-table-column>
-              <el-table-column prop="source" label="来源" width="200" />
-              <el-table-column prop="publishDate" label="发布日期" width="180">
+              <el-table-column prop="source" label="来源" width="100" />
+              <el-table-column prop="publishDate" label="发布日期" width="100">
                 <template #default="scope">
                   {{ formatDate(scope.row.publishDate) }}
                 </template>
@@ -358,18 +358,72 @@ const togglePin = async (item: AIRecommendation) => {
 </script>
 
 <style scoped>
+.dashboard-ai-container {
+  padding: 0;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.dashboard-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.ai-section {
+  margin-top: 16px;
+}
+
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-
 }
 
-.box-card{
+.box-card {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.filter-section {
+  margin-bottom: 16px;
+  margin-top: 20px;
+}
+
+.filter-title {
+  margin: 0 0 12px 0;
+  font-size: 1rem;
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.date-picker {
+  width: 100%;
+  max-width: 280px;
+}
+
+.button-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ai-table,
+.bids-table {
+  width: 100%;
+}
+
 a {
   text-decoration: none;
   color: inherit;
@@ -378,4 +432,43 @@ a {
 a:hover {
   color: #409eff;
 }
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .dashboard-title {
+    font-size: 1.1rem;
+  }
+
+  .filter-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .date-picker {
+    max-width: 100%;
+  }
+
+  .button-group {
+    justify-content: center;
+  }
+
+  .el-table {
+    font-size: 12px;
+  }
+
+  .el-table .cell {
+    padding: 6px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
 </style>
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index f6602b5..a34c644 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-      <h2 style="margin: 0;">Dashboard</h2>
+  <div class="dashboard-container">
+    <div class="dashboard-header">
+      <h2 class="dashboard-title">Dashboard</h2>
       <el-button type="primary" :loading="crawling" :disabled="isCrawling" @click="handleCrawl">
         <el-icon style="margin-right: 5px"><Refresh /></el-icon>
         立刻抓取
@@ -9,34 +9,36 @@
     </div>
     <PinnedProject ref="pinnedProjectRef" @pin-changed="handlePinChanged" />
     <el-divider />
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-      <h3 style="margin: 0;">Today's Bids</h3>
-      <div style="display: flex; gap: 10px;">
+    <div class="filter-section">
+      <h3 class="filter-title">Today's Bids</h3>
+      <div class="filter-controls">
         <el-date-picker
           v-model="dateRange"
           type="daterange"
-          range-separator="To"
-          start-placeholder="Start Date"
-          end-placeholder="End Date"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           clearable
-          style="width: 240px;"
+          class="date-picker"
         />
-        <el-button type="primary" @click="setLast3Days">3天</el-button>
-        <el-button type="primary" @click="setLast7Days">7天</el-button>
-        <el-button type="success" :loading="updating" @click="updateBidsByDateRange">
-          <el-icon style="margin-right: 5px"><Refresh /></el-icon>
-          更新
-        </el-button>
+        <div class="button-group">
+          <el-button type="primary" @click="setLast3Days">3天</el-button>
+          <el-button type="primary" @click="setLast7Days">7天</el-button>
+          <el-button type="success" :loading="updating" @click="updateBidsByDateRange">
+            <el-icon style="margin-right: 5px"><Refresh /></el-icon>
+            更新
+          </el-button>
+        </div>
         <el-select
           v-model="selectedKeywords"
           multiple
           collapse-tags
           collapse-tags-tooltip
-          placeholder="Filter by Keywords"
+          placeholder="按关键字筛选"
           clearable
-          style="width: 300px;"
+          class="keyword-select"
         >
           <el-option
             v-for="keyword in keywords"
@@ -47,7 +49,7 @@
         </el-select>
       </div>
     </div>
-    <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%">
+    <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%" class="bids-table">
       <el-table-column label="Pin" width="60" align="center">
         <template #default="scope">
           <el-icon
@@ -67,8 +69,8 @@
           <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
         </template>
       </el-table-column>
-      <el-table-column prop="source" label="Source" width="220" />
-      <el-table-column prop="publishDate" label="Date" width="150">
+      <el-table-column prop="source" label="Source" width="120" />
+      <el-table-column prop="publishDate" label="Date" width="120">
         <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
       </el-table-column>
     </el-table>
@@ -122,7 +124,7 @@ watch(dateRange, (newDateRange) => {
   localStorage.setItem('dashboard_dateRange', JSON.stringify(newDateRange))
 }, { deep: true })
 
-// 从 localStorage 加载保存的关键字
+// 从 localStorage 保存的关键字
 const loadSavedKeywords = () => {
   const saved = localStorage.getItem('selectedKeywords')
   if (saved) {
@@ -320,6 +322,60 @@ if (!dateRange.value) {
 </script>
 
 <style scoped>
+.dashboard-container {
+  padding: 0;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.dashboard-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.filter-section {
+  margin-bottom: 16px;
+}
+
+.filter-title {
+  margin: 0 0 12px 0;
+  font-size: 1rem;
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.date-picker {
+  width: 100%;
+  max-width: 280px;
+}
+
+.button-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.keyword-select {
+  width: 100%;
+  max-width: 200px;
+}
+
+.bids-table {
+  width: 100%;
+}
+
 .card-header {
   display: flex;
   justify-content: space-between;
@@ -334,4 +390,41 @@ a {
 a:hover {
   color: #409eff;
 }
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .dashboard-title {
+    font-size: 1.1rem;
+  }
+
+  .filter-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .date-picker {
+    max-width: 100%;
+  }
+
+  .button-group {
+    justify-content: center;
+  }
+
+  .keyword-select {
+    max-width: 100%;
+  }
+
+  .el-table {
+    font-size: 12px;
+  }
+
+  .el-table .cell {
+    padding: 8px;
+  }
+}
 </style>
diff --git a/frontend/src/components/Keywords.vue b/frontend/src/components/Keywords.vue
index 9a6de6e..8b186c6 100644
--- a/frontend/src/components/Keywords.vue
+++ b/frontend/src/components/Keywords.vue
@@ -1,37 +1,37 @@
 <template>
-  <div>
-    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-      <h2>Keyword Management</h2>
-      <el-button type="primary" @click="dialogVisible = true">Add Keyword</el-button>
+  <div class="keywords-container">
+    <div class="keywords-header">
+      <h2 class="keywords-title">Keyword Management</h2>
+      <el-button type="primary" @click="dialogVisible = true">添加关键字</el-button>
     </div>
 
-    <div v-loading="loading" style="min-height: 200px;">
+    <div v-loading="loading" style="min-height: 200px;" class="keywords-list">
       <el-tag
         v-for="keyword in keywords"
         :key="keyword.id"
         closable
         :type="getTagType(keyword.weight)"
         @close="handleDeleteKeyword(keyword.id)"
-        style="margin: 5px;"
+        class="keyword-tag"
       >
         {{ keyword.word }}
       </el-tag>
-      <el-empty v-if="keywords.length === 0" description="No keywords" />
+      <el-empty v-if="keywords.length === 0" description="暂无关键字" />
     </div>
 
-    <el-dialog v-model="dialogVisible" title="Add Keyword" width="30%">
-      <el-form :model="form" label-width="120px">
-        <el-form-item label="Keyword">
-          <el-input v-model="form.word" />
+    <el-dialog v-model="dialogVisible" title="添加关键字" width="90%" :style="{ maxWidth: '400px' }">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="关键字">
+          <el-input v-model="form.word" placeholder="请输入关键字" />
         </el-form-item>
-        <el-form-item label="Weight">
+        <el-form-item label="权重">
           <el-input-number v-model="form.weight" :min="1" :max="5" />
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">Cancel</el-button>
-          <el-button type="primary" @click="handleAddKeyword">Confirm</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleAddKeyword">确认</el-button>
         </span>
       </template>
     </el-dialog>
@@ -72,36 +72,86 @@ const getTagType = (weight: number) => {
 
 const handleAddKeyword = async () => {
   if (!form.word) {
-    ElMessage.warning('Please enter a keyword')
+    ElMessage.warning('请输入关键字')
     return
   }
   try {
     await api.post('/api/keywords', form)
-    ElMessage.success('Keyword added')
+    ElMessage.success('关键字添加成功')
     dialogVisible.value = false
     form.word = ''
     form.weight = 1
     emit('refresh')
   } catch (error) {
-    ElMessage.error('Failed to add keyword')
+    ElMessage.error('添加关键字失败')
   }
 }
 
 const handleDeleteKeyword = async (id: string) => {
   try {
     await api.delete(`/api/keywords/${id}`)
-    ElMessage.success('Keyword deleted')
+    ElMessage.success('关键字删除成功')
     emit('refresh')
   } catch (error) {
-    ElMessage.error('Failed to delete keyword')
+    ElMessage.error('删除关键字失败')
   }
 }
 </script>
 
 <style scoped>
-.card-header {
+.keywords-container {
+  padding: 0;
+}
+
+.keywords-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.keywords-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.keywords-list {
+  min-height: 200px;
+}
+
+.keyword-tag {
+  margin: 5px;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: #409eff;
+}
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .keywords-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .keywords-title {
+    font-size: 1.1rem;
+  }
+
+  .keyword-tag {
+    margin: 4px;
+    font-size: 12px;
+  }
+
+  .keywords-list {
+    min-height: 150px;
+  }
 }
 </style>
diff --git a/frontend/src/components/PinnedProject.vue b/frontend/src/components/PinnedProject.vue
index cb30f58..f23c4d4 100644
--- a/frontend/src/components/PinnedProject.vue
+++ b/frontend/src/components/PinnedProject.vue
@@ -2,7 +2,7 @@
   <el-card class="box-card" shadow="hover">
     <template #header>
       <div class="card-header">
-        <span>Pinned</span>
+        <span class="card-title">Pinned</span>
         <el-tag type="danger">{{ pinnedBids.length }} 个置顶</el-tag>
       </div>
     </template>
@@ -15,14 +15,14 @@
       <p style="margin-top: 10px;">暂无置顶项目</p>
     </div>
     <div v-else>
-      <el-table :data="pinnedBids" style="width: 100%" size="small">
-        <el-table-column label="Pin" width="60" align="center">
+      <el-table :data="pinnedBids" style="width: 100%" size="small" class="pinned-table">
+        <el-table-column label="Pin" width="50" align="center">
           <template #default="scope">
             <el-icon
               :style="{
                 color: '#f56c6c',
                 cursor: 'pointer',
-                fontSize: '18px'
+                fontSize: '16px'
               }"
               @click="togglePin(scope.row)"
             >
@@ -35,8 +35,8 @@
             <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
           </template>
         </el-table-column>
-        <el-table-column prop="source" label="来源" width="200" />
-        <el-table-column prop="publishDate" label="发布日期" width="180">
+        <el-table-column prop="source" label="来源" width="100" />
+        <el-table-column prop="publishDate" label="发布日期" width="100">
           <template #default="scope">
             {{ formatSimpleDate(scope.row.publishDate) }}
           </template>
@@ -107,11 +107,20 @@ defineExpose({
   align-items: center;
 }
 
+.card-title {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
 .box-card {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.pinned-table {
+  width: 100%;
+}
+
 a {
   text-decoration: none;
   color: inherit;
@@ -120,4 +129,30 @@ a {
 a:hover {
   color: #409eff;
 }
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .card-title {
+    font-size: 0.9rem;
+  }
+
+  .el-table {
+    font-size: 11px;
+  }
+
+  .el-table .cell {
+    padding: 4px;
+  }
+
+  .box-card {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+}
 </style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index beb8313..50de669 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+/* 基础样式 */
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -15,6 +16,64 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* 移动端基础样式 */
+@media (max-width: 768px) {
+  :root {
+    font-size: 14px;
+  }
+
+  body {
+    margin: 0;
+    display: flex;
+    place-items: flex-start;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+
+  #app {
+    max-width: 100%;
+    margin: 0;
+    padding: 0.5rem;
+    text-align: left;
+  }
+
+  .card {
+    padding: 1em;
+  }
+
+  h1 {
+    font-size: 2em;
+    line-height: 1.1;
+  }
+}
+
+/* 桌面端保持原有样式 */
+@media (min-width: 769px) {
+  body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+
+  #app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -24,19 +83,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -56,17 +102,6 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
