refactor: 优化 Dashboard-AI 组件布局和样式

frontend/src/App.vue

@@ -2,32 +2,36 @@
   <el-container class="layout-container" style="height: 100vh">
     <el-aside width="200px" style="background-color: #545c64">
       <div class="logo">投标信息一览</div>
-      <el-menu
+      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="1"
-        active-text-color="#ffd04b"
+        text-color="#fff" @select="handleSelect">
-        background-color="#545c64"
-        class="el-menu-vertical-demo"
-        default-active="1"
-        text-color="#fff"
-        @select="handleSelect"
-      >
         <el-menu-item index="1">
-          <el-icon><DataBoard /></el-icon>
+          <el-icon>
+            <DataBoard />
+          </el-icon>
           <span>Dashboard</span>
         </el-menu-item>
         <el-menu-item index="2">
-          <el-icon><MagicStick /></el-icon>
+          <el-icon>
+            <MagicStick />
+          </el-icon>
           <span>Dashboard AI</span>
         </el-menu-item>
         <el-menu-item index="3">
-          <el-icon><Document /></el-icon>
+          <el-icon>
+            <Document />
+          </el-icon>
           <span>Bids</span>
         </el-menu-item>
         <el-menu-item index="4">
-          <el-icon><Setting /></el-icon>
+          <el-icon>
+            <Setting />
+          </el-icon>
           <span>Keywords</span>
         </el-menu-item>
         <el-menu-item index="5">
-          <el-icon><Connection /></el-icon>
+          <el-icon>
+            <Connection />
+          </el-icon>
           <span>Crawl Info</span>
         </el-menu-item>
       </el-menu>
@@ -39,42 +43,19 @@
       </el-header>
 
       <el-main>
-        <Dashboard
+        <DashboardAI v-if="activeIndex === '2'" :bids="bids" :high-priority-bids="highPriorityBids" />
-          v-if="activeIndex === '1'"
+        <Dashboard v-if="activeIndex === '1'" :today-bids="todayBids" :high-priority-bids="highPriorityBids"
-          :today-bids="todayBids"
+          :keywords="keywords" :loading="loading" :is-crawling="isCrawling" @refresh="fetchData"
-          :high-priority-bids="highPriorityBids"
+          @update-bids="updateBidsByDateRange" />
-          :keywords="keywords"
-          :loading="loading"
-          :is-crawling="isCrawling"
-          @refresh="fetchData"
-          @update-bids="updateBidsByDateRange"
-        />
 
-        <DashboardAI
-          v-if="activeIndex === '2'"
-          :bids="bids"
-          :high-priority-bids="highPriorityBids"
-        />
 
-        <Bids
-          v-if="activeIndex === '3'"
-          :bids="bids"
-          :source-options="sourceOptions"
-          :loading="loading"
-          :total="total"
-          @fetch="handleFetchBids"
-        />
 
-        <Keywords
+        <Bids v-if="activeIndex === '3'" :bids="bids" :source-options="sourceOptions" :loading="loading" :total="total"
-          v-if="activeIndex === '4'"
+          @fetch="handleFetchBids" />
-          :keywords="keywords"
-          :loading="loading"
-          @refresh="fetchData"
-        />
 
-        <CrawlInfo
+        <Keywords v-if="activeIndex === '4'" :keywords="keywords" :loading="loading" @refresh="fetchData" />
-          v-if="activeIndex === '5'"
+
-        />
+        <CrawlInfo v-if="activeIndex === '5'" />
       </el-main>
     </el-container>
   </el-container>
@@ -189,9 +170,11 @@ onMounted(() => {
   line-height: 60px;
   border-bottom: 1px solid #eee;
 }
+
 .layout-container .el-aside {
   color: var(--el-text-color-primary);
 }
+
 .logo {
   height: 60px;
   line-height: 60px;

frontend/src/components/Dashboard-AI.vue

@@ -39,37 +39,16 @@
         </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;">
-        <el-date-picker
-          v-model="dateRange"
-          type="daterange"
-          range-separator="To"
-          start-placeholder="Start Date"
-          end-placeholder="End Date"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          clearable
-          style="width: 240px;"
-        />
-        <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>
     <el-row :gutter="20">
       <el-col :span="24">
         <el-card class="box-card" shadow="hover">
-          <template #header>
+          <!-- <template #header> -->
             <div class="card-header">
               <span>AI 推荐项目</span>
               <el-tag type="success">{{ aiRecommendations.length }} 个推荐</el-tag>
             </div>
-          </template>
+          <!-- </template> -->
           <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>
@@ -104,6 +83,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;">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="To"
+          start-placeholder="Start Date"
+          end-placeholder="End Date"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          clearable
+          style="width: 240px;"
+        />
+        <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>
     <el-row v-if="showAllBids" :gutter="20" style="margin-top: 20px;">
       <el-col :span="24">
         <el-card class="box-card" shadow="hover">
@@ -352,6 +353,12 @@ const getConfidenceType = (confidence: number) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+}
+
+.box-card{
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 a {