130 lines
2.9 KiB
Markdown
130 lines
2.9 KiB
Markdown
|
# 投标项目查看器 - 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
|