bidding_watcher/ionic-app

投标项目查看器 - Ionic 版本

基于 Ionic + Vue 3 + TypeScript + Tailwind CSS 的移动端应用，适配 Android 平台。

功能特性

• AI 推荐 - 显示 AI 推荐的投标项目，带推荐度标签
• 爬虫信息 - 显示各爬虫来源的统计信息和状态
• 置顶项目 - 显示用户置顶的投标项目
• 下拉刷新 - 支持下拉刷新数据

技术栈

• Ionic 8 - 移动端 UI 框架
• Vue 3 - 前端框架
• TypeScript - 类型安全
• Tailwind CSS - 样式框架
• Capacitor - 原生功能集成
• Axios - HTTP 客户端

安装依赖

npm install

开发

启动开发服务器：

npm run dev

应用将在 http://localhost:8100 运行。

构建

构建生产版本：

npm run build

Android 构建

添加 Android 平台

npm install -g @capacitor/cli
npx cap init
npx cap add android

同步资源

npm run build
npx cap sync

在 Android Studio 中打开

npx cap open android

环境变量

创建 .env.development 文件：

VITE_API_BASE_URL=http://localhost:3001

创建 .env.production 文件：

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