198 lines
4.9 KiB
Markdown
198 lines
4.9 KiB
Markdown
|
# 投标项目查看器 - uni-app 版本
|
|||
|
|
|
|||
|
|
这是一个基于 uni-app 开发的投标项目查看器，仿造了 Wails 桌面应用的功能。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- ⚡ **Vue 3** - 使用 Composition API
|
|||
|
|
- 🎨 **Tailwind CSS** - 原子化 CSS 框架
|
|||
|
|
- 📘 **TypeScript** - 类型安全
|
|||
|
|
- 🔧 **Vite** - 快速构建工具
|
|||
|
|
- 🌍 **uni-app** - 跨平台框架
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- 📌 **置顶项目** - 查看置顶的投标项目
|
|||
|
|
- 🤖 **AI 推荐** - 查看 AI 推荐的项目
|
|||
|
|
- 📊 **爬虫状态** - 查看各数据源的爬虫状态
|
|||
|
|
- 🔄 **自动刷新** - 可配置的自动刷新间隔
|
|||
|
|
- 🎯 **环境变量** - 支持 .env 配置
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
uni-app-version/
|
|||
|
|
├── pages/ # 页面目录
|
|||
|
|
│ └── index/ # 主页面
|
|||
|
|
├── components/ # 组件目录
|
|||
|
|
│ ├── PinnedBids.vue
|
|||
|
|
│ ├── AiRecommendations.vue
|
|||
|
|
│ └── CrawlInfo.vue
|
|||
|
|
├── utils/ # 工具类
|
|||
|
|
│ └── api.js # API 请求封装
|
|||
|
|
├── static/ # 静态资源
|
|||
|
|
├── App.vue # 应用入口
|
|||
|
|
├── main.js # 入口文件
|
|||
|
|
├── manifest.json # 应用配置
|
|||
|
|
├── pages.json # 页面路由配置
|
|||
|
|
└── uni.scss # 全局样式变量
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
### 环境要求
|
|||
|
|
|
|||
|
|
- Node.js >= 14
|
|||
|
|
- HBuilderX 或 uni-app CLI
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
|
|||
|
|
项目已配置 `.npmrc` 文件处理依赖版本兼容性问题，直接安装即可：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果遇到依赖冲突，可以使用：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install --legacy-peer-deps
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 配置环境变量
|
|||
|
|
|
|||
|
|
项目使用 `.env` 文件管理环境变量。复制 `.env` 文件并根据需要修改：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# .env
|
|||
|
|
VITE_API_BASE_URL=http://localhost:3000
|
|||
|
|
VITE_API_KEY=your_secure_api_key_here # 公网访问时需要的 API Key（可选）
|
|||
|
|
VITE_APP_TITLE=投标项目查看器
|
|||
|
|
VITE_APP_VERSION=1.0.0
|
|||
|
|
VITE_AUTO_REFRESH_INTERVAL=300000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `.env` - 默认配置
|
|||
|
|
- `.env.development` - 开发环境配置
|
|||
|
|
- `.env.production` - 生产环境配置
|
|||
|
|
|
|||
|
|
#### API Key 配置说明
|
|||
|
|
|
|||
|
|
当 `VITE_API_BASE_URL` 配置为公网地址（非 localhost）时，应用会自动在请求头中添加 `X-API-Key`。
|
|||
|
|
|
|||
|
|
**配置方式：**
|
|||
|
|
|
|||
|
|
1. **环境变量（推荐）**：在 `.env` 或 `.env.production` 中设置 `VITE_API_KEY`
|
|||
|
|
2. **本地存储**：应用会自动从 `uni.getStorageSync('apiKey')` 读取（如果环境变量未设置）
|
|||
|
|
|
|||
|
|
**注意事项：**
|
|||
|
|
- 本地访问（localhost 或 127.0.0.1）不需要 API Key，会自动放行
|
|||
|
|
- 公网访问必须提供正确的 API Key，否则会返回 401 错误
|
|||
|
|
- API Key 应该与后端配置的 `API_KEY` 环境变量一致
|
|||
|
|
|
|||
|
|
### 运行项目
|
|||
|
|
|
|||
|
|
#### H5 开发
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev:h5
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 微信小程序开发
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 构建项目
|
|||
|
|
|
|||
|
|
#### H5 构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build:h5
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 微信小程序构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build:mp-weixin
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API 接口
|
|||
|
|
|
|||
|
|
应用需要以下后端 API 接口：
|
|||
|
|
|
|||
|
|
- `GET /api/bids/pinned` - 获取置顶投标项目
|
|||
|
|
- `GET /api/ai/latest-recommendations` - 获取 AI 推荐
|
|||
|
|
- `GET /api/bids/crawl-info-stats` - 获取爬虫统计信息
|
|||
|
|
|
|||
|
|
## 功能说明
|
|||
|
|
|
|||
|
|
### 自动刷新
|
|||
|
|
|
|||
|
|
应用每 5 分钟自动刷新当前标签页的数据。
|
|||
|
|
|
|||
|
|
### 手动刷新
|
|||
|
|
|
|||
|
|
点击右上角的"🔄 刷新"按钮可以手动刷新当前标签页的数据。
|
|||
|
|
|
|||
|
|
### 下拉刷新
|
|||
|
|
|
|||
|
|
在主页面下拉可以刷新当前标签页的数据（需要启用下拉刷新功能）。
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 确保后端 API 服务已启动并运行在配置的地址上
|
|||
|
|
2. 如果遇到跨域问题，需要在后端配置 CORS
|
|||
|
|
3. 在非 H5 平台，点击链接会复制到剪贴板而不是直接打开
|
|||
|
|
4. **公网访问**：如果后端部署在公网，需要配置 `VITE_API_KEY` 环境变量，确保与后端的 `API_KEY` 一致
|
|||
|
|
5. **本地访问**：访问 localhost 或 127.0.0.1 时不需要 API Key，会自动放行
|
|||
|
|
|
|||
|
|
## 项目特点
|
|||
|
|
|
|||
|
|
### TypeScript 支持
|
|||
|
|
|
|||
|
|
所有代码使用 TypeScript 编写，提供完整的类型定义：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
// API 请求类型安全
|
|||
|
|
export interface BidItem {
|
|||
|
|
id: string
|
|||
|
|
title: string
|
|||
|
|
url: string
|
|||
|
|
publishDate: string
|
|||
|
|
source: string
|
|||
|
|
pin: boolean
|
|||
|
|
createdAt: string
|
|||
|
|
updatedAt: string
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Tailwind CSS
|
|||
|
|
|
|||
|
|
使用 Tailwind CSS 进行样式开发，提供一致的设计系统：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<view class="bg-white rounded-lg p-4 hover:shadow-lg">
|
|||
|
|
<!-- 内容 -->
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 环境变量
|
|||
|
|
|
|||
|
|
通过 Vite 的环境变量系统，支持多环境配置：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
// 在代码中访问环境变量
|
|||
|
|
const apiUrl = import.meta.env.VITE_API_BASE_URL
|
|||
|
|
const apiKey = import.meta.env.VITE_API_KEY // API Key（可选）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### API 鉴权
|
|||
|
|
|
|||
|
|
应用支持自动 API Key 鉴权：
|
|||
|
|
|
|||
|
|
- **本地访问**：访问 `localhost` 或 `127.0.0.1` 时，不会添加 API Key
|
|||
|
|
- **公网访问**：访问公网地址时，自动从环境变量或本地存储读取 API Key 并添加到请求头 `X-API-Key`
|
|||
|
|
- **配置方式**：通过环境变量 `VITE_API_KEY` 或本地存储 `apiKey` 配置
|