Files
dmy b6a6398864 feat: 添加用户认证系统
引入基于 Basic Auth 的用户认证系统,包括用户管理、登录界面和 API 鉴权
- 新增用户实体和管理功能
- 实现前端登录界面和凭证管理
- 重构 API 鉴权为 Basic Auth 模式
- 添加用户管理脚本工具
2026-01-18 12:47:16 +08:00

4.9 KiB
Raw Permalink Blame History

投标项目查看器 - 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 文件处理依赖版本兼容性问题,直接安装即可:

npm install

如果遇到依赖冲突,可以使用:

npm install --legacy-peer-deps

配置环境变量

项目使用 .env 文件管理环境变量。复制 .env 文件并根据需要修改:

# .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 开发

npm run dev:h5

微信小程序开发

npm run dev:mp-weixin

构建项目

H5 构建

npm run build:h5

微信小程序构建

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 编写,提供完整的类型定义:

// API 请求类型安全
export interface BidItem {
  id: string
  title: string
  url: string
  publishDate: string
  source: string
  pin: boolean
  createdAt: string
  updatedAt: string
}

Tailwind CSS

使用 Tailwind CSS 进行样式开发,提供一致的设计系统:

<view class="bg-white rounded-lg p-4 hover:shadow-lg">
  <!-- 内容 -->
</view>

环境变量

通过 Vite 的环境变量系统,支持多环境配置:

// 在代码中访问环境变量
const apiUrl = import.meta.env.VITE_API_BASE_URL
const apiKey = import.meta.env.VITE_API_KEY  // API Key可选

API 鉴权

应用支持自动 API Key 鉴权:

  • 本地访问:访问 localhost127.0.0.1 时,不会添加 API Key
  • 公网访问:访问公网地址时,自动从环境变量或本地存储读取 API Key 并添加到请求头 X-API-Key
  • 配置方式:通过环境变量 VITE_API_KEY 或本地存储 apiKey 配置