feat: 优化移动端顶部导航栏样式和布局

style: 优化移动端表格样式和响应式布局
style: 调整表格列宽
2026-01-19 17:05:04 +08:00 · 2026-01-19 17:01:16 +08:00 · 2026-01-19 14:10:37 +08:00 · 2026-01-19 13:50:53 +08:00 · 2026-01-19 13:47:41 +08:00 · 2026-01-19 12:54:57 +08:00
55 changed files with 3186 additions and 187 deletions
--- a/.env
+++ b/.env
@@ -49,3 +49,5 @@ API_KEY=22c64b60-6e60-433c-991d-f6d658024b9e
 # 是否启用 Basic Auth 认证（true/false）
 ENABLE_BASIC_AUTH=true

+PORT=3300
+HOST=0.0.0.0
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,10 @@ widget/looker/frontend/src/assets/fonts/OFL.txt
 dist-electron
 unpackage
 .cursor
-qingyun
+qingyun
+plan
+.trae
+plans
+android
+docs
+.idea
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,2 +1,5 @@
 # ARK API Key (用于 AI 推荐)
 VITE_ARK_API_KEY=a63d58b6-cf56-434b-8a42-5c781ba0822a
+
+# 后端 API 地址
+VITE_API_BASE_URL=http://localhost:3300/
--- a/frontend/.env.production
+++ b/frontend/.env.production
@@ -0,0 +1,5 @@
+# ARK API Key (用于 AI 推荐)
+VITE_ARK_API_KEY=a63d58b6-cf56-434b-8a42-5c781ba0822a
+
+# 后端 API 地址
+VITE_API_BASE_URL=http://139.180.190.142:3300/
--- 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>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,8 +5,8 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
-    "build:watch": "concurrently \"vue-tsc -b --watch\" \"vite build --watch\"",
+    "build": "vue-tsc -b && vite build --mode production",
+    "build:watch": "concurrently \"vue-tsc -b --watch\" \"vite build --watch --mode development\"",
    "preview": "vite preview"
  },
  "dependencies": {
--- 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="logo">投标信息一览</div>
-      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="1"
-        text-color="#fff" @select="handleSelect">
-        
+  <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" class="header-btn">
+          <el-icon :size="24"><Fold /></el-icon>
+        </el-button>
+        <span v-if="isMobile" class="mobile-title">投标信息一览</span>
+        <el-button type="primary" link @click="handleLogout" v-if="currentUser" class="header-btn">
+          <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 v-if="!isMobile" class="logo">投标信息一览</div>
+      <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,109 @@ 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;
+}
+
+.is-mobile .el-main {
+  padding-top: 60px;
+}
+
+.mobile-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #434a50;
+  color: white;
+  padding: 0;
+  height: 50px !important;
+  line-height: 50px;
+  z-index: 1001;
+}
+
+.mobile-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  padding: 0 10px;
+}
+
+.header-btn {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.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;
+  min-height: 48px;
+}
+
+.is-mobile .el-button {
+  min-height: 44px;
+}
+
+.is-mobile .el-icon {
+  padding: 4px;
+}
 </style>
--- 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,8 +11,8 @@
        />
      </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="45" align="center">
        <template #default="scope">
          <el-icon
            :style="{
@@ -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="200" />
-      <el-table-column prop="publishDate" label="Date" width="150">
+      <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>
@@ -44,7 +40,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 +99,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 +142,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%;
+  }
+
+  .bids-table {
+    overflow-x: auto;
+  }
+
+  .bids-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+
+  .pagination {
+    justify-content: center;
+  }
+}
 </style>
--- 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,27 @@
        </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" :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="180">
+        <el-table-column label="最新工程时间" min-width="140">
          <template #default="{ row }">
            {{ formatDateTime(row.latestPublishDate) }}
          </template>
        </el-table-column>
-        <el-table-column label="状态" width="100">
+        <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="200">
-          <template #default="{ row }">
-            <span v-if="row.error && row.error.trim()" style="color: #f56c6c">{{ row.error }}</span>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="100">
+        <el-table-column label="操作" width="60">
          <template #default="{ row }">
            <el-button
              type="primary"
@@ -47,14 +41,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>
@@ -118,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 {
@@ -168,7 +170,11 @@ onBeforeUnmount(() => {

 <style scoped>
 .crawl-info {
-  padding: 20px;
+  padding: 0;
+}
+
+.crawl-card {
+  width: 100%;
 }

 .card-header {
@@ -177,7 +183,67 @@ 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;
+  }
+
+  .crawl-table {
+    overflow-x: auto;
+  }
+
+  .crawl-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+
+  .el-table {
+    font-size: 12px;
+  }
+
+  .el-descriptions {
+    font-size: 12px;
+  }
+
+  .summary {
+    margin-top: 16px;
+  }
+
+  /* 移动端隐藏错误信息列 */
+  .crawl-table :deep(.hidden-on-mobile) {
+    display: none;
+  }
+}
 </style>
--- 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,8 +25,8 @@
            <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="45" align="center">
                <template #default="scope">
                  <el-icon
                    :style="{
@@ -42,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="200" />
-              <el-table-column prop="publishDate" label="发布日期" width="180">
+              <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="120">
+              <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>
@@ -65,26 +59,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 +101,10 @@
            <p style="margin-top: 10px;">该时间范围内暂无工程</p>
          </div>
          <div v-else>
-            <el-table :data="bidsByDateRange" style="width: 100%" size="small">
-              <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 :data="bidsByDateRange" style="width: 100%" size="small" class="bids-table">
+              <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>
@@ -358,18 +350,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 +424,45 @@ 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;
+  }
+
+  .ai-table,
+  .bids-table {
+    overflow-x: auto;
+  }
+
+  .ai-table :deep(.el-table__cell),
+  .bids-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
 </style>
--- 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,8 +49,8 @@
        </el-select>
      </div>
    </div>
-    <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%">
-      <el-table-column label="Pin" width="60" align="center">
+    <el-table :data="filteredTodayBids" v-loading="loading" style="width: 100%" class="bids-table">
+      <el-table-column label="Pin" width="50" align="center">
        <template #default="scope">
          <el-icon
            :style="{
@@ -62,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="220" />
-      <el-table-column prop="publishDate" label="Date" width="150">
+      <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>
@@ -122,7 +120,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 +318,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 +386,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%;
+  }
+
+  .bids-table {
+    overflow-x: auto;
+  }
+
+  .bids-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+}
 </style>
--- 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>
--- 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,8 +15,8 @@
      <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="45" align="center">
          <template #default="scope">
            <el-icon
              :style="{
@@ -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="200" />
-        <el-table-column prop="publishDate" label="发布日期" width="180">
+        <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>
@@ -107,11 +103,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 +125,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;
+  }
+
+  .pinned-table {
+    overflow-x: auto;
+  }
+
+  .pinned-table :deep(.el-table__cell) {
+    padding: 6px;
+  }
+
+  .box-card {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+}
 </style>
--- 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,19 @@
  -moz-osx-font-smoothing: grayscale;
 }

+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0;
+}
+
 a {
  font-weight: 500;
  color: #646cff;
@@ -24,19 +38,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 +57,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;
--- a/ionic-app/.env.development
+++ b/ionic-app/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:3300
--- a/ionic-app/.env.production
+++ b/ionic-app/.env.production
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://139.180.190.142:3300/
--- a/ionic-app/README.md
+++ b/ionic-app/README.md
@@ -0,0 +1,129 @@
+# 投标项目查看器 - Ionic 版本
+
+基于 Ionic + Vue 3 + TypeScript + Tailwind CSS 的移动端应用，适配 Android 平台。
+
+## 功能特性
+
+- **AI 推荐** - 显示 AI 推荐的投标项目，带推荐度标签
+- **爬虫信息** - 显示各爬虫来源的统计信息和状态
+- **置顶项目** - 显示用户置顶的投标项目
+- **下拉刷新** - 支持下拉刷新数据
+
+## 技术栈
+
+- **Ionic 8** - 移动端 UI 框架
+- **Vue 3** - 前端框架
+- **TypeScript** - 类型安全
+- **Tailwind CSS** - 样式框架
+- **Capacitor** - 原生功能集成
+- **Axios** - HTTP 客户端
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 开发
+
+启动开发服务器：
+
+```bash
+npm run dev
+```
+
+应用将在 http://localhost:8100 运行。
+
+## 构建
+
+构建生产版本：
+
+```bash
+npm run build
+```
+
+## Android 构建
+
+### 添加 Android 平台
+
+```bash
+npm install -g @capacitor/cli
+npx cap init
+npx cap add android
+```
+
+### 同步资源
+
+```bash
+npm run build
+npx cap sync
+```
+
+### 在 Android Studio 中打开
+
+```bash
+npx cap open android
+```
+
+## 环境变量
+
+创建 `.env.development` 文件：
+
+```env
+VITE_API_BASE_URL=http://localhost:3001
+```
+
+创建 `.env.production` 文件：
+
+```env
+VITE_API_BASE_URL=https://your-production-api.com
+```
+
+## 项目结构
+
+```
+ionic-app/
+├── src/
+│   ├── components/          # 组件
+│   │   ├── AiRecommendations.vue
+│   │   ├── CrawlInfo.vue
+│   │   └── PinnedBids.vue
+│   ├── pages/              # 页面
+│   │   └── HomePage.vue
+│   ├── router/             # 路由
+│   │   └── index.ts
+│   ├── theme/             # 主题
+│   │   └── variables.css
+│   ├── types/             # 类型定义
+│   │   └── index.ts
+│   ├── utils/             # 工具函数
+│   │   └── api.ts
+│   ├── App.vue            # 根组件
+│   ├── main.ts            # 入口文件
+│   └── vite-env.d.ts     # Vite 类型声明
+├── public/               # 静态资源
+├── .env.development      # 开发环境变量
+├── .env.production        # 生产环境变量
+├── capacitor.config.ts    # Capacitor 配置
+├── ionic.config.json      # Ionic 配置
+├── package.json
+├── tailwind.config.js     # Tailwind 配置
+├── tsconfig.json         # TypeScript 配置
+└── vite.config.ts        # Vite 配置
+```
+
+## API 接口
+
+| 接口 | 方法 | 说明 |
+|------|------|------|
+| `/api/ai/latest-recommendations` | GET | 获取最新 AI 推荐 |
+| `/api/bids/crawl-info-stats` | GET | 获取爬虫统计信息 |
+| `/api/bids/pinned` | GET | 获取置顶项目 |
+| `/api/bids/{title}/pin` | PATCH | 切换置顶状态 |
+
+## 注意事项
+
+1. 确保后端 API 服务正在运行
+2. 开发环境默认 API 地址为 `http://localhost:3001`
+3. 首次运行需要安装所有依赖
+4. Android 构建需要安装 Android Studio 和 Android SDK
--- a/ionic-app/android/.gitignore
+++ b/ionic-app/android/.gitignore
@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml
--- a/ionic-app/android/app/.gitignore
+++ b/ionic-app/android/app/.gitignore
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
--- a/ionic-app/android/app/build.gradle
+++ b/ionic-app/android/app/build.gradle
@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace "com.bidding.app"
+    compileSdk rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.bidding.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
--- a/ionic-app/android/app/capacitor.build.gradle
+++ b/ionic-app/android/app/capacitor.build.gradle
@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_17
+      targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-app')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}
--- a/ionic-app/android/build.gradle
+++ b/ionic-app/android/build.gradle
@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.2.1'
+        classpath 'com.google.gms:google-services:4.4.0'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
--- a/ionic-app/android/capacitor.settings.gradle
+++ b/ionic-app/android/capacitor.settings.gradle
@@ -0,0 +1,6 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
--- a/ionic-app/android/gradle.properties
+++ b/ionic-app/android/gradle.properties
@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
--- a/ionic-app/android/gradlew
+++ b/ionic-app/android/gradlew
@@ -0,0 +1,248 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
--- a/ionic-app/android/gradlew.bat
+++ b/ionic-app/android/gradlew.bat
@@ -0,0 +1,92 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/ionic-app/android/settings.gradle
+++ b/ionic-app/android/settings.gradle
@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
--- a/ionic-app/android/variables.gradle
+++ b/ionic-app/android/variables.gradle
@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 22
+    compileSdkVersion = 34
+    targetSdkVersion = 34
+    androidxActivityVersion = '1.8.0'
+    androidxAppCompatVersion = '1.6.1'
+    androidxCoordinatorLayoutVersion = '1.2.0'
+    androidxCoreVersion = '1.12.0'
+    androidxFragmentVersion = '1.6.2'
+    coreSplashScreenVersion = '1.0.1'
+    androidxWebkitVersion = '1.9.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.1.5'
+    androidxEspressoCoreVersion = '3.5.1'
+    cordovaAndroidVersion = '10.1.1'
+}
--- a/ionic-app/capacitor.config.json
+++ b/ionic-app/capacitor.config.json
@@ -0,0 +1,25 @@
+{
+  "appId": "com.bidding.app",
+  "appName": "BiddingApp",
+  "webDir": "dist",
+  "server": {
+    "androidScheme": "https"
+  },
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0,
+      "launchAutoHide": true,
+      "backgroundColor": "#3880ff",
+      "androidSplashResourceName": "splash",
+      "androidScaleType": "CENTER_CROP",
+      "showSpinner": true,
+      "androidSpinnerStyle": "large",
+      "iosSpinnerStyle": "small",
+      "spinnerColor": "#3880ff",
+      "splashFullScreen": true,
+      "splashImmersive": true,
+      "layoutName": "launch_screen",
+      "useDialog": true
+    }
+  }
+}
--- a/ionic-app/index.html
+++ b/ionic-app/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>投标项目查看器</title>
+
+    <base href="/" />
+
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/png" href="/favicon.ico" />
+
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <div id="api-footer" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--ion-toolbar-background, #f8f9fa); padding: 10px; text-align: center; font-size: 12px; color: var(--ion-text-color, #333); border-top: 1px solid #ddd;"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/ionic-app/ionic.config.json
+++ b/ionic-app/ionic.config.json
@@ -0,0 +1,7 @@
+{
+  "name": "bidding-looker-ionic",
+  "integrations": {
+    "capacitor": {}
+  },
+  "type": "vue"
+}
--- a/ionic-app/package.json
+++ b/ionic-app/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "bidding-looker-ionic",
+  "version": "1.0.0",
+  "description": "投标项目查看器 - Ionic 版本",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "ionic:build": "npm run build",
+    "ionic:serve": "vite --port 8100 --host",
+    "cap:sync": "capacitor sync",
+    "cap:open:android": "capacitor open android"
+  },
+  "dependencies": {
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/app": "^6.0.1",
+    "@capacitor/core": "^6.0.0",
+    "@ionic/vue": "^8.3.2",
+    "@ionic/vue-router": "^8.3.2",
+    "axios": "^1.7.9",
+    "ionicons": "^7.4.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
+  }
+}
--- a/ionic-app/postcss.config.js
+++ b/ionic-app/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/ionic-app/src/App.vue
+++ b/ionic-app/src/App.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { IonApp, IonRouterOutlet } from '@ionic/vue'
+import { onMounted } from 'vue'
+
+const apiHost = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
+
+onMounted(() => {
+  const footer = document.getElementById('api-footer')
+  if (footer) {
+    footer.textContent = `连接: ${apiHost}`
+  }
+})
+</script>
+
+<template>
+  <IonApp>
+    <IonRouterOutlet />
+  </IonApp>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+</style>
--- a/ionic-app/src/components/AiRecommendations.vue
+++ b/ionic-app/src/components/AiRecommendations.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonChip, IonLabel, IonSpinner, IonRefresher, IonRefresherContent, RefresherEventDetail } from '@ionic/vue'
+import { getAiRecommendations, togglePin } from '@/utils/api'
+import type { AiRecommendation } from '@/types'
+
+const recommendations = ref<AiRecommendation[]>([])
+const loading = ref<boolean>(true)
+const error = ref<string>('')
+
+const loadRecommendations = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    const items = await getAiRecommendations()
+    recommendations.value = items || []
+  } catch (err: any) {
+    error.value = `加载失败: ${err.message || err}`
+    console.error('加载 AI 推荐失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const getConfidenceColor = (confidence: number): string => {
+  if (confidence >= 80) return '#27ae60'
+  if (confidence >= 60) return '#f39c12'
+  return '#e74c3c'
+}
+
+const getConfidenceLabel = (confidence: number): string => {
+  if (confidence >= 80) return '高'
+  if (confidence >= 60) return '中'
+  return '低'
+}
+
+const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
+  await loadRecommendations()
+  const target = event.target as any
+  if (target && target.complete) {
+    target.complete()
+  }
+}
+
+const handleTogglePin = async (item: AiRecommendation) => {
+  try {
+    const newPinStatus = !item.pin
+    await togglePin(item.title, newPinStatus)
+    item.pin = newPinStatus
+  } catch (err) {
+    console.error('切换置顶状态失败:', err)
+  }
+}
+
+const formatDate = (dateStr?: string): string => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+onMounted(() => {
+  loadRecommendations()
+})
+
+defineExpose({
+  loadRecommendations
+})
+</script>
+
+<template>
+  <IonRefresher slot="fixed" @ionRefresh="handleRefresh">
+    <IonRefresherContent></IonRefresherContent>
+  </IonRefresher>
+
+  <div v-if="loading" class="loading-container">
+    <IonSpinner name="crescent" />
+    <p class="loading-text">加载中...</p>
+  </div>
+
+  <div v-else-if="error" class="error-container">
+    <p class="error-text">{{ error }}</p>
+  </div>
+
+  <div v-else-if="recommendations.length === 0" class="empty-container">
+    <p class="empty-text">暂无推荐项目</p>
+  </div>
+
+  <div v-else class="recommendation-list">
+    <IonCard v-for="item in recommendations" :key="item.id" class="recommendation-card">
+      <IonCardHeader>
+        <div class="card-header">
+          <IonChip :style="{ backgroundColor: getConfidenceColor(item.confidence) }" class="confidence-chip">
+            <IonLabel class="confidence-label">
+              {{ getConfidenceLabel(item.confidence) }} ({{ item.confidence }}%)
+            </IonLabel>
+          </IonChip>
+          <IonCardSubtitle class="date-text">{{ formatDate(item.publishDate) }}</IonCardSubtitle>
+        </div>
+        <IonCardTitle class="title-text">{{ item.title }}</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <div class="card-footer">
+          <span class="source-text">{{ item.source }}</span>
+          <button 
+            @click="handleTogglePin(item)"
+            :class="['pin-button', { pinned: item.pin }]"
+          >
+            {{ item.pin ? '已置顶' : '置顶' }}
+          </button>
+        </div>
+      </IonCardContent>
+    </IonCard>
+  </div>
+</template>
+
+<style scoped>
+.loading-container,
+.error-container,
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.loading-text,
+.error-text,
+.empty-text {
+  margin-top: 16px;
+  color: #666;
+  font-size: 14px;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.recommendation-list {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.recommendation-card {
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.confidence-chip {
+  color: #fff;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.confidence-label {
+  color: #fff;
+  font-size: 12px;
+}
+
+.date-text {
+  font-size: 12px;
+  color: #999;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.source-text {
+  font-size: 12px;
+  color: #666;
+}
+
+.pin-button {
+  padding: 6px 16px;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+  background: #fff;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pin-button.pinned {
+  background: #e74c3c;
+  color: #fff;
+  border-color: #e74c3c;
+}
+
+.pin-button:active {
+  transform: scale(0.95);
+}
+</style>
--- a/ionic-app/src/components/CrawlInfo.vue
+++ b/ionic-app/src/components/CrawlInfo.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonBadge, IonSpinner, IonRefresher, IonRefresherContent, IonButton, RefresherEventDetail } from '@ionic/vue'
+import { getCrawlInfoStats, crawlSingleSource } from '@/utils/api'
+import type { CrawlInfoStat } from '@/types'
+
+const crawlStats = ref<CrawlInfoStat[]>([])
+const loading = ref<boolean>(true)
+const error = ref<string>('')
+const updatingSources = ref<Set<string>>(new Set())
+
+const loadCrawlStats = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    const stats = await getCrawlInfoStats()
+    crawlStats.value = stats || []
+  } catch (err: any) {
+    error.value = `加载失败: ${err.message || err}`
+    console.error('加载爬虫统计信息失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleUpdateSource = async (sourceName: string) => {
+  if (updatingSources.value.has(sourceName)) {
+    return
+  }
+
+  try {
+    updatingSources.value.add(sourceName)
+    await crawlSingleSource(sourceName)
+    // 更新成功后重新加载统计数据
+    await loadCrawlStats()
+  } catch (err: any) {
+    console.error(`更新 ${sourceName} 失败:`, err)
+    alert(`更新失败: ${err.message || err}`)
+  } finally {
+    updatingSources.value.delete(sourceName)
+  }
+}
+
+const getStatusText = (stat: CrawlInfoStat): string => {
+  if (stat.error) {
+    return '出错'
+  }
+  if (stat.count > 0) {
+    return '正常'
+  }
+  return '无数据'
+}
+
+const getStatusColor = (stat: CrawlInfoStat): string => {
+  if (stat.error) {
+    return '#f8d7da'
+  }
+  if (stat.count > 0) {
+    return '#d4edda'
+  }
+  return '#e2e3e5'
+}
+
+const getStatusTextColor = (stat: CrawlInfoStat): string => {
+  if (stat.error) {
+    return '#721c24'
+  }
+  if (stat.count > 0) {
+    return '#155724'
+  }
+  return '#383d41'
+}
+
+const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
+  await loadCrawlStats()
+  const target = event.target as any
+  if (target && target.complete) {
+    target.complete()
+  }
+}
+
+const formatDateTime = (dateStr: string | null): string => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+const totalCount = computed(() => {
+  return crawlStats.value.reduce((sum: number, item: CrawlInfoStat) => sum + item.count, 0)
+})
+
+const activeSources = computed(() => {
+  return crawlStats.value.filter((item: CrawlInfoStat) => item.count > 0).length
+})
+
+const errorSources = computed(() => {
+  return crawlStats.value.filter((item: CrawlInfoStat) => item.error && item.error.trim()).length
+})
+
+onMounted(() => {
+  loadCrawlStats()
+})
+
+defineExpose({
+  loadCrawlStats
+})
+</script>
+
+<template>
+  <IonRefresher slot="fixed" @ionRefresh="handleRefresh">
+    <IonRefresherContent></IonRefresherContent>
+  </IonRefresher>
+
+  <div v-if="loading" class="loading-container">
+    <IonSpinner name="crescent" />
+    <p class="loading-text">加载中...</p>
+  </div>
+
+  <div v-else-if="error" class="error-container">
+    <p class="error-text">{{ error }}</p>
+  </div>
+
+  <div v-else-if="crawlStats.length === 0" class="empty-container">
+    <p class="empty-text">暂无爬虫统计信息</p>
+  </div>
+
+  <div v-else>
+    <IonCard class="summary-card">
+      <IonCardHeader>
+        <IonCardTitle>统计摘要</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <div class="summary-grid">
+          <div class="summary-item">
+            <span class="summary-label">爬虫来源总数</span>
+            <span class="summary-value">{{ crawlStats.length }}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">本次获取总数</span>
+            <span class="summary-value">{{ totalCount }}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">有数据来源</span>
+            <span class="summary-value">{{ activeSources }}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">出错来源</span>
+            <span class="summary-value error">{{ errorSources }}</span>
+          </div>
+        </div>
+      </IonCardContent>
+    </IonCard>
+
+    <div class="crawl-list">
+      <IonCard v-for="stat in crawlStats" :key="stat.source" class="crawl-card">
+        <IonCardContent class="crawl-card-content">
+          <div class="crawl-header">
+            <span class="source-name">{{ stat.source }}</span>
+            <div class="header-actions">
+              <IonBadge
+                :style="{
+                  backgroundColor: getStatusColor(stat),
+                  color: getStatusTextColor(stat)
+                }"
+                class="status-badge"
+              >
+                {{ getStatusText(stat) }}
+              </IonBadge>
+              <IonButton
+                size="small"
+                fill="outline"
+                :disabled="updatingSources.has(stat.source)"
+                @click="handleUpdateSource(stat.source)"
+                class="update-button"
+              >
+                <span v-if="updatingSources.has(stat.source)">更新中...</span>
+                <span v-else>更新</span>
+              </IonButton>
+            </div>
+          </div>
+          <div class="crawl-details">
+            <div class="detail-item">
+              <span class="detail-label">本次获取数量:</span>
+              <span class="detail-value">{{ stat.count }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">最近更新时间:</span>
+              <span class="detail-value">{{ formatDateTime(stat.latestUpdate) }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">最新工程时间:</span>
+              <span class="detail-value">{{ formatDateTime(stat.latestPublishDate) }}</span>
+            </div>
+            <div v-if="stat.error && stat.error.trim()" class="detail-item error">
+              <span class="detail-label">错误信息:</span>
+              <span class="detail-value">{{ stat.error }}</span>
+            </div>
+          </div>
+        </IonCardContent>
+      </IonCard>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-container,
+.error-container,
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.loading-text,
+.error-text,
+.empty-text {
+  margin-top: 16px;
+  color: #666;
+  font-size: 14px;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.summary-card {
+  margin: 16px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.summary-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.summary-value.error {
+  color: #e74c3c;
+}
+
+.crawl-list {
+  padding: 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.crawl-card {
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.crawl-card-content {
+  padding: 16px;
+}
+
+.crawl-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.source-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.update-button {
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 4px;
+  --padding-bottom: 4px;
+  font-size: 12px;
+  height: 28px;
+}
+
+.crawl-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+
+.detail-item.error {
+  color: #e74c3c;
+}
+
+.detail-label {
+  color: #666;
+}
+
+.detail-value {
+  color: #333;
+  font-weight: 500;
+}
+</style>
--- a/ionic-app/src/components/PinnedBids.vue
+++ b/ionic-app/src/components/PinnedBids.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonSpinner, IonRefresher, IonRefresherContent, RefresherEventDetail } from '@ionic/vue'
+import { getPinnedBids, togglePin } from '@/utils/api'
+import type { BidItem } from '@/types'
+
+const pinnedBids = ref<BidItem[]>([])
+const loading = ref<boolean>(true)
+const error = ref<string>('')
+
+const loadPinnedBids = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    const items = await getPinnedBids()
+    pinnedBids.value = items || []
+  } catch (err: any) {
+    error.value = `加载失败: ${err.message || err}`
+    console.error('加载置顶项目失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
+  await loadPinnedBids()
+  const target = event.target as any
+  if (target && target.complete) {
+    target.complete()
+  }
+}
+
+const handleTogglePin = async (item: BidItem) => {
+  try {
+    await togglePin(item.title, false)
+    pinnedBids.value = pinnedBids.value.filter((bid: BidItem) => bid.title !== item.title)
+  } catch (err) {
+    console.error('取消置顶失败:', err)
+  }
+}
+
+const formatDate = (dateStr: string): string => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+onMounted(() => {
+  loadPinnedBids()
+})
+
+defineExpose({
+  loadPinnedBids
+})
+</script>
+
+<template>
+  <IonRefresher slot="fixed" @ionRefresh="handleRefresh">
+    <IonRefresherContent></IonRefresherContent>
+  </IonRefresher>
+
+  <div v-if="loading" class="loading-container">
+    <IonSpinner name="crescent" />
+    <p class="loading-text">加载中...</p>
+  </div>
+
+  <div v-else-if="error" class="error-container">
+    <p class="error-text">{{ error }}</p>
+  </div>
+
+  <div v-else-if="pinnedBids.length === 0" class="empty-container">
+    <p class="empty-text">暂无置顶项目</p>
+  </div>
+
+  <div v-else class="pinned-list">
+    <IonCard v-for="item in pinnedBids" :key="item.id" class="pinned-card">
+      <IonCardHeader>
+        <IonCardTitle class="title-text">{{ item.title }}</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <div class="card-details">
+          <div class="detail-item">
+            <span class="detail-label">来源:</span>
+            <span class="detail-value">{{ item.source }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">发布日期:</span>
+            <span class="detail-value">{{ formatDate(item.publishDate) }}</span>
+          </div>
+        </div>
+        <div class="card-footer">
+          <a :href="item.url" target="_blank" class="view-link">查看详情</a>
+          <button @click="handleTogglePin(item)" class="unpin-button">取消置顶</button>
+        </div>
+      </IonCardContent>
+    </IonCard>
+  </div>
+</template>
+
+<style scoped>
+.loading-container,
+.error-container,
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.loading-text,
+.error-text,
+.empty-text {
+  margin-top: 16px;
+  color: #666;
+  font-size: 14px;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.pinned-list {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.pinned-card {
+  margin: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #666;
+}
+
+.detail-value {
+  color: #333;
+  font-weight: 500;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #eee;
+}
+
+.view-link {
+  color: #3498db;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.unpin-button {
+  padding: 6px 16px;
+  border: 1px solid #e74c3c;
+  border-radius: 16px;
+  background: #fff;
+  color: #e74c3c;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.unpin-button:active {
+  transform: scale(0.95);
+  background: #e74c3c;
+  color: #fff;
+}
+</style>
--- a/ionic-app/src/main.ts
+++ b/ionic-app/src/main.ts
@@ -0,0 +1,28 @@
+import { createApp } from 'vue'
+import { IonicVue } from '@ionic/vue'
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css'
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css'
+import '@ionic/vue/css/structure.css'
+import '@ionic/vue/css/typography.css'
+import '@ionic/vue/css/padding.css'
+import '@ionic/vue/css/float-elements.css'
+import '@ionic/vue/css/text-alignment.css'
+import '@ionic/vue/css/text-transformation.css'
+import '@ionic/vue/css/flex-utils.css'
+import '@ionic/vue/css/display.css'
+
+/* Theme variables */
+import './theme/variables.css'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(IonicVue)
+app.use(router)
+
+app.mount('#app')
--- a/ionic-app/src/pages/HomePage.vue
+++ b/ionic-app/src/pages/HomePage.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonIcon, IonLabel, IonButtons, IonButton } from '@ionic/vue'
+import { sparkles, statsChart, pin, logOutOutline } from 'ionicons/icons'
+import AiRecommendations from '@/components/AiRecommendations.vue'
+import CrawlInfo from '@/components/CrawlInfo.vue'
+import PinnedBids from '@/components/PinnedBids.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const activeTab = ref('pinned')
+const authStore = useAuthStore()
+
+const aiRecommendationsRef = ref()
+const crawlInfoRef = ref()
+const pinnedBidsRef = ref()
+
+const handleTabChange = (tab: string) => {
+  activeTab.value = tab
+  // 刷新对应标签页的数据
+  if (tab === 'recommendations' && aiRecommendationsRef.value) {
+    aiRecommendationsRef.value.loadRecommendations()
+  } else if (tab === 'crawl' && crawlInfoRef.value) {
+    crawlInfoRef.value.loadCrawlStats()
+  } else if (tab === 'pinned' && pinnedBidsRef.value) {
+    pinnedBidsRef.value.loadPinnedBids()
+  }
+}
+
+const handleLogout = () => {
+  authStore.logout()
+  // 路由守卫会自动跳转到登录页
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>投标项目查看器</IonTitle>
+        <IonButtons slot="end">
+          <IonButton @click="handleLogout">
+            <IonIcon :icon="logOutOutline" />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <IonSegment :value="activeTab" @ionChange="(e: any) => handleTabChange(e.detail.value)" class="segment-container">
+        <IonSegmentButton value="pinned">
+          <IonIcon :icon="pin" />
+          <IonLabel>置顶项目</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="recommendations">
+          <IonIcon :icon="sparkles" />
+          <IonLabel>AI 推荐</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="crawl">
+          <IonIcon :icon="statsChart" />
+          <IonLabel>爬虫信息</IonLabel>
+        </IonSegmentButton>
+        
+      </IonSegment>
+
+      <div class="tab-content">
+        <AiRecommendations v-if="activeTab === 'recommendations'" ref="aiRecommendationsRef" />
+        <CrawlInfo v-if="activeTab === 'crawl'" ref="crawlInfoRef" />
+        <PinnedBids v-if="activeTab === 'pinned'" ref="pinnedBidsRef" />
+      </div>
+    </IonContent>
+  </IonPage>
+</template>
+
+<style scoped>
+.segment-container {
+  margin: 16px;
+}
+
+.tab-content {
+  padding: 0 16px 16px;
+}
+</style>
--- a/ionic-app/src/pages/LoginPage.vue
+++ b/ionic-app/src/pages/LoginPage.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonInput, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonSpinner } from '@ionic/vue'
+import { useIonRouter } from '@ionic/vue'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useIonRouter()
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
+
+const handleLogin = async () => {
+  if (!username.value || !password.value) {
+    error.value = '请输入用户名和密码'
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    await authStore.login(username.value, password.value)
+    router.push('/home')
+  } catch (err: any) {
+    error.value = err.message || '登录失败，请检查用户名和密码'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>登录</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent class="login-content">
+      <IonCard class="login-card">
+        <IonCardHeader>
+          <IonCardTitle>投标项目查看器</IonCardTitle>
+        </IonCardHeader>
+        <IonCardContent>
+          <div v-if="error" class="error-message">
+            {{ error }}
+          </div>
+
+          <IonItem class="input-item">
+            <IonLabel position="floating">用户名</IonLabel>
+            <IonInput 
+              v-model="username" 
+              type="text" 
+              placeholder="请输入用户名"
+              :disabled="loading"
+            />
+          </IonItem>
+
+          <IonItem class="input-item">
+            <IonLabel position="floating">密码</IonLabel>
+            <IonInput 
+              v-model="password" 
+              type="password" 
+              placeholder="请输入密码"
+              :disabled="loading"
+            />
+          </IonItem>
+
+          <IonButton 
+            expand="block" 
+            @click="handleLogin"
+            :disabled="loading"
+            class="login-button"
+          >
+            <IonSpinner v-if="loading" name="crescent" slot="start" />
+            {{ loading ? '登录中...' : '登录' }}
+          </IonButton>
+        </IonCardContent>
+      </IonCard>
+    </IonContent>
+  </IonPage>
+</template>
+
+<style scoped>
+.login-content {
+  --background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-card {
+  margin: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.error-message {
+  background: #f8d7da;
+  color: #721c24;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.input-item {
+  margin-bottom: 16px;
+}
+
+.login-button {
+  margin-top: 24px;
+  --background: #667eea;
+  --color: #fff;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>
--- a/ionic-app/src/router/index.ts
+++ b/ionic-app/src/router/index.ts
@@ -0,0 +1,42 @@
+import { createRouter, createWebHistory } from '@ionic/vue-router'
+import HomePage from '@/pages/HomePage.vue'
+import LoginPage from '@/pages/LoginPage.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/login'
+  },
+  {
+    path: '/login',
+    component: LoginPage
+  },
+  {
+    path: '/home',
+    component: HomePage,
+    meta: { requiresAuth: true }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.requiresAuth && !authStore.state.value.isAuthenticated) {
+    // 需要认证但未登录，跳转到登录页
+    next('/login')
+  } else if (to.path === '/login' && authStore.state.value.isAuthenticated) {
+    // 已登录用户访问登录页，跳转到首页
+    next('/home')
+  } else {
+    next()
+  }
+})
+
+export default router
--- a/ionic-app/src/stores/auth.ts
+++ b/ionic-app/src/stores/auth.ts
@@ -0,0 +1,79 @@
+import { ref } from 'vue'
+import api from '@/utils/api'
+
+interface AuthState {
+  isAuthenticated: boolean
+  username: string | null
+  token: string | null
+}
+
+const state = ref<AuthState>({
+  isAuthenticated: false,
+  username: null,
+  token: null
+})
+
+export const useAuthStore = () => {
+  const login = async (username: string, password: string) => {
+    // 创建 Basic Auth token
+    const credentials = btoa(`${username}:${password}`)
+    const token = `Basic ${credentials}`
+
+    // 保存 token 到 localStorage
+    localStorage.setItem('auth_token', token)
+    localStorage.setItem('auth_username', username)
+
+    // 更新 API 实例的默认 headers
+    api.defaults.headers.common['Authorization'] = token
+
+    // 更新状态
+    state.value = {
+      isAuthenticated: true,
+      username,
+      token
+    }
+  }
+
+  const logout = () => {
+    // 清除 localStorage
+    localStorage.removeItem('auth_token')
+    localStorage.removeItem('auth_username')
+
+    // 清除 API headers
+    delete api.defaults.headers.common['Authorization']
+
+    // 更新状态
+    state.value = {
+      isAuthenticated: false,
+      username: null,
+      token: null
+    }
+  }
+
+  const checkAuth = () => {
+    const token = localStorage.getItem('auth_token')
+    const username = localStorage.getItem('auth_username')
+
+    if (token && username) {
+      api.defaults.headers.common['Authorization'] = token
+      state.value = {
+        isAuthenticated: true,
+        username,
+        token
+      }
+      return true
+    }
+
+    return false
+  }
+
+  // 初始化时检查认证状态
+  checkAuth()
+
+  return {
+    state,
+    login,
+    logout,
+    checkAuth
+  }
+}
--- a/ionic-app/src/theme/variables.css
+++ b/ionic-app/src/theme/variables.css
@@ -0,0 +1,229 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/theming-base-variables */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body.dark {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body.dark {
+    --ion-background-color: #03060b;
+    --ion-background-color-rgb: 3, 6, 11;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body.dark {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18, 18, 18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
--- a/ionic-app/src/types/index.ts
+++ b/ionic-app/src/types/index.ts
@@ -0,0 +1,40 @@
+// 投标项目类型
+export interface BidItem {
+  id: string
+  title: string
+  url: string
+  publishDate: string
+  source: string
+  pin: boolean
+  createdAt?: string
+  updatedAt?: string
+}
+
+// AI 推荐类型
+export interface AiRecommendation {
+  id: string
+  title: string
+  url: string
+  source: string
+  confidence: number
+  publishDate?: string
+  pin?: boolean
+}
+
+// 爬虫统计信息类型
+export interface CrawlInfoStat {
+  source: string
+  count: number
+  latestUpdate: string | null
+  latestPublishDate: string | null
+  error: string | null
+}
+
+// API 响应类型
+export interface ApiResponse<T> {
+  data: T
+  message?: string
+}
+
+// 日期范围类型
+export type DateRange = [string, string] | null
--- a/ionic-app/src/utils/api.ts
+++ b/ionic-app/src/utils/api.ts
@@ -0,0 +1,97 @@
+import axios from 'axios'
+import type { BidItem, AiRecommendation, CrawlInfoStat, DateRange } from '@/types'
+
+// 从环境变量读取 API 基础地址
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
+
+// 创建 axios 实例
+const api = axios.create({
+  baseURL: BASE_URL,
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器
+api.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+api.interceptors.response.use(
+  (response) => {
+    return response
+  },
+  (error) => {
+    console.error('API 请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * 获取置顶投标项目
+ */
+export function getPinnedBids(): Promise<BidItem[]> {
+  return api.get('/api/bids/pinned').then(res => res.data)
+}
+
+/**
+ * 获取最新 AI 推荐
+ */
+export function getAiRecommendations(): Promise<AiRecommendation[]> {
+  return api.get('/api/ai/latest-recommendations').then(res => res.data)
+}
+
+/**
+ * 获取爬虫统计信息
+ */
+export function getCrawlInfoStats(): Promise<CrawlInfoStat[]> {
+  return api.get('/api/bids/crawl-info-stats').then(res => res.data)
+}
+
+/**
+ * 爬取单个数据源
+ */
+export function crawlSingleSource(sourceName: string): Promise<any> {
+  return api.post(`/api/crawler/crawl/${encodeURIComponent(sourceName)}`).then(res => res.data)
+}
+
+/**
+ * 切换置顶状态
+ */
+export function togglePin(title: string, pin: boolean): Promise<void> {
+  return api.patch(`/api/bids/${encodeURIComponent(title)}/pin`, { pin }).then(res => res.data)
+}
+
+/**
+ * 按日期范围获取工程
+ */
+export function getBidsByDateRange(startDate: string, endDate?: string): Promise<BidItem[]> {
+  const params: any = { startDate }
+  if (endDate) {
+    params.endDate = endDate
+  }
+  return api.get('/api/bids/by-date-range', { params }).then(res => res.data)
+}
+
+/**
+ * 获取 AI 推荐（发送 bids 数据）
+ */
+export function fetchAiRecommendations(bids: { title: string }[]): Promise<AiRecommendation[]> {
+  return api.post('/api/ai/recommendations', { bids }).then(res => res.data)
+}
+
+/**
+ * 保存 AI 推荐结果
+ */
+export function saveAiRecommendations(recommendations: AiRecommendation[]): Promise<void> {
+  return api.post('/api/ai/save-recommendations', { recommendations }).then(res => res.data)
+}
+
+export default api
--- a/ionic-app/src/vite-env.d.ts
+++ b/ionic-app/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
--- a/ionic-app/tailwind.config.js
+++ b/ionic-app/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/ionic-app/tsconfig.json
+++ b/ionic-app/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/ionic-app/tsconfig.node.json
+++ b/ionic-app/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/ionic-app/vite.config.ts
+++ b/ionic-app/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 8100,
+    host: true
+  }
+})
--- a/src/ai/Prompt.ts
+++ b/src/ai/Prompt.ts
@@ -1 +1 @@
-export const PromptString: string = `先给我说你统计了多少个项目。我只对辽宁、山东、江苏、浙江、福建、广东、广西、海南、河北这些地方的海上风电、海上光伏、漂浮式光伏、滩涂光伏、滩涂风电、渔光互补、风光互补项目感兴趣。从我提供的这些工程里面找到我感兴趣的工程，无论如何至少推荐10个工程。如果没有推荐的，也要给出思考过程。`;
+export const PromptString: string = `先给我说你统计了多少个项目。我只对辽宁、山东、江苏、浙江、福建、广东、广西、海南、河北这些地方的海上风电、海上光伏、漂浮式光伏、滩涂光伏、滩涂风电、渔光互补、风光互补项目感兴趣。从我提供的这些工程里面找到我感兴趣的工程，无论如何至少推荐10个工程。如果没有推荐的，也要给出思考过程。不要修改或简化返回的工程名称。`;
--- a/src/common/auth/auth.guard.ts
+++ b/src/common/auth/auth.guard.ts
@@ -3,6 +3,7 @@ import {
  ExecutionContext,
  Injectable,
  UnauthorizedException,
+  Logger,
 } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { Request } from 'express';
@@ -10,6 +11,8 @@ import { UsersService } from '../../users/users.service';

@Injectable()
 export class AuthGuard implements CanActivate {
+  private readonly logger = new Logger(AuthGuard.name);
+
  constructor(
    private configService: ConfigService,
    private usersService: UsersService,
@@ -22,6 +25,8 @@ export class AuthGuard implements CanActivate {
    const enableBasicAuth =
      this.configService.get<string>('ENABLE_BASIC_AUTH') === 'true';

+    this.logger.log(`Basic Auth enabled: ${enableBasicAuth}`);
+
    if (!enableBasicAuth) {
      // 如果未启用 Basic Auth，允许所有访问
      return true;
@@ -31,6 +36,7 @@ export class AuthGuard implements CanActivate {
    const authHeader = request.headers['authorization'] as string;

    if (!authHeader || !authHeader.startsWith('Basic ')) {
+      this.logger.warn('Missing or invalid Authorization header');
      throw new UnauthorizedException('Missing or invalid Authorization header');
    }

@@ -42,16 +48,22 @@ export class AuthGuard implements CanActivate {
    const [username, password] = credentials.split(':');

    if (!username || !password) {
+      this.logger.warn('Invalid credentials format');
      throw new UnauthorizedException('Invalid credentials format');
    }

+    this.logger.log(`Attempting login for user: ${username}`);
+
    // 验证用户
    const user = await this.usersService.validateUser(username, password);

    if (!user) {
+      this.logger.warn(`Login failed for user: ${username} - Invalid username or password`);
      throw new UnauthorizedException('Invalid username or password');
    }

+    this.logger.log(`User ${username} logged in successfully`);
+
    // 将用户信息附加到请求对象
    (request as any).user = user;

--- a/src/main.ts
+++ b/src/main.ts
@@ -25,6 +25,8 @@ async function bootstrap() {
  const httpAdapter = app.getHttpAdapter();
  httpAdapter.getInstance().set('trust proxy', true);

-  await app.listen(process.env.PORT ?? 3000);
+  const host = process.env.HOST ?? '0.0.0.0';
+  const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
+  await app.listen(port, host);
 }
 void bootstrap();
--- a/src/scripts/deploy.ts
+++ b/src/scripts/deploy.ts
@@ -38,7 +38,7 @@ const config = {

 const destinations = {
  server: '/root/bidding/publish/server',
-  frontend: '/root/bidding/publish/frontend',
+  frontend: '/root/bidding/publish/frontend/dist',
  src: '/root/bidding/',
 };

--- a/src/scripts/update-source.ts
+++ b/src/scripts/update-source.ts
@@ -19,8 +19,8 @@ async function updateSource() {
      getRepositoryToken(BidItem),
    );

-    const oldSource = '北京电力交易平台';
-    const newSource = '北京京能电子商务平台';
+    const oldSource = '电能e招采平台';
+    const newSource = '电能e招采平台（国电投）';

    logger.log(`开始更新 source 字段: "${oldSource}" -> "${newSource}"`);
Author	SHA1	Message	Date
dmy	bdc62a2975	feat: 优化移动端顶部导航栏样式和布局	2026-01-19 17:05:04 +08:00
dmy	e3880408b7	style: 优化移动端表格样式和响应式布局	2026-01-19 17:01:16 +08:00
dmy	1453e03c76	style: 调整表格列宽	2026-01-19 14:10:37 +08:00
dmy	882c8b5b9f	fix: 移动端隐藏标题和logo	2026-01-19 13:50:53 +08:00
dmy	95dfcd0278	feat: 添加移动端响应式布局和样式优化	2026-01-19 13:47:41 +08:00
dmy	fffc17b9ad	feat: 提示语中增加不修改工程名称的要求	2026-01-19 12:54:57 +08:00
dmy	91e44018f0	chore: 在.gitignore中添加.idea目录	2026-01-18 20:48:43 +08:00
dmy	cf5a0b179e	feat: 添加单个数据源手动更新功能	2026-01-18 20:48:15 +08:00
dmy	9fc455cca4	feat: 添加API连接状态显示页脚在应用底部添加固定页脚显示当前连接的API地址	2026-01-18 19:08:04 +08:00
dmy	8f6e5c8423	feat: 添加投标项目查看器的Ionic移动端应用新增基于Ionic + Vue 3 + TypeScript + Tailwind CSS的移动端应用，适配Android平台。主要功能包括AI推荐项目展示、爬虫信息统计、置顶项目管理和下拉刷新功能。同时更新前后端API端口配置为3300。	2026-01-18 18:53:35 +08:00
dmy	f08c513bbe	feat: 添加环境变量配置并优化部署路径添加开发和生产环境变量文件更新前端构建命令以使用不同模式优化部署脚本中的前端部署路径在认证守卫中添加日志记录	2026-01-18 15:44:37 +08:00
				`@@ -0,0 +1 @@`
				`VITE_API_BASE_URL=http://139.180.190.142:3300/`