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

---
 frontend/src/App.vue                      |  9 ++++
 frontend/src/components/Bids.vue          | 20 +++----
 frontend/src/components/CrawlInfo.vue     | 48 ++++++++++-------
 frontend/src/components/Dashboard-AI.vue  | 36 ++++++-------
 frontend/src/components/Dashboard.vue     | 20 +++----
 frontend/src/components/PinnedProject.vue | 22 ++++----
 frontend/src/style.css                    | 63 ++++-------------------
 7 files changed, 88 insertions(+), 130 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 433eece..0f77b8e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -443,5 +443,14 @@ onUnmounted(() => {
 
 .is-mobile .el-menu-item {
   padding: 0 20px !important;
+  min-height: 48px;
+}
+
+.is-mobile .el-button {
+  min-height: 44px;
+}
+
+.is-mobile .el-icon {
+  padding: 4px;
 }
 </style>
diff --git a/frontend/src/components/Bids.vue b/frontend/src/components/Bids.vue
index 8006224..e1fbefb 100644
--- a/frontend/src/components/Bids.vue
+++ b/frontend/src/components/Bids.vue
@@ -12,13 +12,13 @@
       </el-select>
     </div>
     <el-table :data="bids" v-loading="loading" style="width: 100%" class="bids-table">
-      <el-table-column label="Pin" width="50" align="center">
+      <el-table-column label="Pin" width="45" align="center">
         <template #default="scope">
           <el-icon
             :style="{
               color: scope.row.pin ? '#f56c6c' : '#909399',
               cursor: 'pointer',
-              fontSize: '16px'
+              fontSize: '18px'
             }"
             @click="togglePin(scope.row)"
           >
@@ -26,13 +26,9 @@
           </el-icon>
         </template>
       </el-table-column>
-      <el-table-column prop="title" label="Title">
-        <template #default="scope">
-          <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
-        </template>
-      </el-table-column>
-      <el-table-column prop="source" label="Source" width="150" />
-      <el-table-column prop="publishDate" label="Date" width="100">
+      <el-table-column prop="title" label="Title" min-width="150" />
+      <el-table-column prop="source" label="Source" min-width="100" />
+      <el-table-column prop="publishDate" label="Date" width="95">
         <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
       </el-table-column>
     </el-table>
@@ -162,11 +158,11 @@ a:hover {
     max-width: 100%;
   }
 
-  .el-table {
-    font-size: 12px;
+  .bids-table {
+    overflow-x: auto;
   }
 
-  .el-table .cell {
+  .bids-table :deep(.el-table__cell) {
     padding: 6px;
   }
 
diff --git a/frontend/src/components/CrawlInfo.vue b/frontend/src/components/CrawlInfo.vue
index 55e9753..af9df8e 100644
--- a/frontend/src/components/CrawlInfo.vue
+++ b/frontend/src/components/CrawlInfo.vue
@@ -11,33 +11,27 @@
         </div>
       </template>
 
-      <el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table">
-        <el-table-column prop="source" label="爬虫来源" width="230" />
-        <el-table-column prop="count" label="本次获取数量" width="160" sortable />
-        <el-table-column label="最近更新时间" width="140">
+      <el-table :data="crawlStats" stripe style="width: 100%" v-loading="loading" class="crawl-table" :cell-class-name="tableCellClassName">
+        <el-table-column prop="source" label="爬虫来源" min-width="120" />
+        <el-table-column prop="count" label="本次获取数量" width="110" sortable />
+        <el-table-column label="最近更新时间" min-width="140">
           <template #default="{ row }">
             {{ formatDateTime(row.latestUpdate) }}
           </template>
         </el-table-column>
-        <el-table-column label="最新工程时间" width="140">
+        <el-table-column label="最新工程时间" min-width="140">
           <template #default="{ row }">
             {{ formatDateTime(row.latestPublishDate) }}
           </template>
         </el-table-column>
-        <el-table-column label="状态" width="80">
+        <el-table-column label="状态" width="70">
           <template #default="{ row }">
-            <el-tag :type="row.error && row.error.trim() ? 'danger' : (row.count > 0 ? 'success' : 'info')">
+            <el-tag :type="row.error && row.error.trim() ? 'danger' : (row.count > 0 ? 'success' : 'info')" size="small">
               {{ row.error && row.error.trim() ? '出错' : (row.count > 0 ? '正常' : '无数据') }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="错误信息" min-width="120">
-          <template #default="{ row }">
-            <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="80">
+        <el-table-column label="操作" width="60">
           <template #default="{ row }">
             <el-button
               type="primary"
@@ -117,6 +111,15 @@ const fetchCrawlStats = async () => {
   }
 }
 
+// 表格单元格类名，用于响应式处理
+const tableCellClassName = ({ columnIndex }: { columnIndex: number }) => {
+  // 移动端隐藏错误信息列
+  if (columnIndex === 5) {
+    return 'hidden-on-mobile'
+  }
+  return ''
+}
+
 const crawlSingleSource = async (sourceName: string) => {
   crawlingSources.value.add(sourceName)
   try {
@@ -218,12 +221,16 @@ a:hover {
     font-size: 1rem;
   }
 
-  .el-table {
-    font-size: 11px;
+  .crawl-table {
+    overflow-x: auto;
   }
 
-  .el-table .cell {
-    padding: 4px;
+  .crawl-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+
+  .el-table {
+    font-size: 12px;
   }
 
   .el-descriptions {
@@ -233,5 +240,10 @@ a:hover {
   .summary {
     margin-top: 16px;
   }
+
+  /* 移动端隐藏错误信息列 */
+  .crawl-table :deep(.hidden-on-mobile) {
+    display: none;
+  }
 }
 </style>
diff --git a/frontend/src/components/Dashboard-AI.vue b/frontend/src/components/Dashboard-AI.vue
index 23649f4..40319c7 100644
--- a/frontend/src/components/Dashboard-AI.vue
+++ b/frontend/src/components/Dashboard-AI.vue
@@ -26,13 +26,13 @@
           </div>
           <div v-else>
             <el-table :data="aiRecommendations" style="width: 100%" size="small" class="ai-table">
-              <el-table-column label="Pin" width="50" align="center">
+              <el-table-column label="Pin" width="45" align="center">
                 <template #default="scope">
                   <el-icon
                     :style="{
                       color: scope.row.pin ? '#f56c6c' : '#909399',
                       cursor: 'pointer',
-                      fontSize: '16px'
+                      fontSize: '18px'
                     }"
                     @click="togglePin(scope.row)"
                   >
@@ -40,20 +40,16 @@
                   </el-icon>
                 </template>
               </el-table-column>
-              <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="150" />
-              <el-table-column prop="publishDate" label="发布日期" width="100">
+              <el-table-column prop="title" label="项目名称" min-width="150" />
+              <el-table-column prop="source" label="来源" min-width="80" />
+              <el-table-column prop="publishDate" label="发布日期" width="95">
                 <template #default="scope">
                   {{ formatDate(scope.row.publishDate) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="confidence" label="推荐度" width="80">
+              <el-table-column prop="confidence" label="推荐度" width="70">
                 <template #default="scope">
-                  <el-tag :type="getConfidenceType(scope.row.confidence)">
+                  <el-tag :type="getConfidenceType(scope.row.confidence)" size="small">
                     {{ scope.row.confidence }}%
                   </el-tag>
                 </template>
@@ -106,13 +102,9 @@
           </div>
           <div v-else>
             <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="100" />
-              <el-table-column prop="publishDate" label="发布日期" width="100">
+              <el-table-column prop="title" label="项目名称" min-width="150" />
+              <el-table-column prop="source" label="来源" min-width="80" />
+              <el-table-column prop="publishDate" label="发布日期" width="95">
                 <template #default="scope">
                   {{ formatDate(scope.row.publishDate) }}
                 </template>
@@ -457,11 +449,13 @@ a:hover {
     justify-content: center;
   }
 
-  .el-table {
-    font-size: 12px;
+  .ai-table,
+  .bids-table {
+    overflow-x: auto;
   }
 
-  .el-table .cell {
+  .ai-table :deep(.el-table__cell),
+  .bids-table :deep(.el-table__cell) {
     padding: 6px;
   }
 
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index a413db7..9f531ea 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -50,7 +50,7 @@
       </div>
     </div>
     <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%" class="bids-table">
-      <el-table-column label="Pin" width="60" align="center">
+      <el-table-column label="Pin" width="50" align="center">
         <template #default="scope">
           <el-icon
             :style="{
@@ -64,13 +64,9 @@
           </el-icon>
         </template>
       </el-table-column>
-      <el-table-column prop="title" label="Title">
-        <template #default="scope">
-          <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
-        </template>
-      </el-table-column>
-      <el-table-column prop="source" label="Source" width="100" />
-      <el-table-column prop="publishDate" label="Date" width="120">
+      <el-table-column prop="title" label="Title" min-width="150" />
+      <el-table-column prop="source" label="Source" min-width="90" />
+      <el-table-column prop="publishDate" label="Date" width="100">
         <template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
       </el-table-column>
     </el-table>
@@ -419,12 +415,12 @@ a:hover {
     max-width: 100%;
   }
 
-  .el-table {
-    font-size: 12px;
+  .bids-table {
+    overflow-x: auto;
   }
 
-  .el-table .cell {
-    padding: 8px;
+  .bids-table :deep(.el-table__cell) {
+    padding: 6px;
   }
 }
 </style>
diff --git a/frontend/src/components/PinnedProject.vue b/frontend/src/components/PinnedProject.vue
index 198ffbb..ad2affc 100644
--- a/frontend/src/components/PinnedProject.vue
+++ b/frontend/src/components/PinnedProject.vue
@@ -16,13 +16,13 @@
     </div>
     <div v-else>
       <el-table :data="pinnedBids" style="width: 100%" size="small" class="pinned-table">
-        <el-table-column label="Pin" width="50" align="center">
+        <el-table-column label="Pin" width="45" align="center">
           <template #default="scope">
             <el-icon
               :style="{
                 color: '#f56c6c',
                 cursor: 'pointer',
-                fontSize: '16px'
+                fontSize: '18px'
               }"
               @click="togglePin(scope.row)"
             >
@@ -30,13 +30,9 @@
             </el-icon>
           </template>
         </el-table-column>
-        <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="230" />
-        <el-table-column prop="publishDate" label="发布日期" width="100">
+        <el-table-column prop="title" label="项目名称" min-width="150" />
+        <el-table-column prop="source" label="来源" min-width="100" />
+        <el-table-column prop="publishDate" label="发布日期" width="95">
           <template #default="scope">
             {{ formatSimpleDate(scope.row.publishDate) }}
           </template>
@@ -142,12 +138,12 @@ a:hover {
     font-size: 0.9rem;
   }
 
-  .el-table {
-    font-size: 11px;
+  .pinned-table {
+    overflow-x: auto;
   }
 
-  .el-table .cell {
-    padding: 4px;
+  .pinned-table :deep(.el-table__cell) {
+    padding: 6px;
   }
 
   .box-card {
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 50de669..4b361dc 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -16,62 +16,17 @@
   -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;
-  }
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
-/* 桌面端保持原有样式 */
-@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;
-  }
+#app {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0;
 }
 
 a {