Skip to Content
技术文档技术概览

技术概览

智能采购意图平台采用现代化的全栈技术架构，基于 Next.js、NestJS 和 Prisma 构建，实现 AI 驱动的端到端采购自动化。

技术栈

前端技术

  • 框架：Next.js 15 (React 19, App Router)
  • 语言：TypeScript
  • 样式：TailwindCSS
  • 组件库：shadcn/ui
  • 表单：React Hook Form + Zod
  • 状态管理：React Context + Server Components

后端技术

  • 框架：NestJS
  • 语言：TypeScript
  • 数据库：PostgreSQL 14+
  • ORM：Prisma
  • 认证：JWT + HMAC-SHA256 签名
  • API：RESTful

AI 与自动化

  • AI 模型：阿里通义千问-VL Plus（视觉识别）
  • 浏览器自动化：Browser-Use + Playwright
  • 任务调度：BullMQ + Redis

基础设施

  • Monorepo：Turborepo
  • 包管理：pnpm
  • 代码质量：Ultracite (Biome)
  • 容器化：Docker + Docker Compose
  • CI/CD：GitHub Actions

系统架构

四层架构设计

智能采购意图平台采用清晰的四层架构，职责分离，易于扩展：

核心流程

  1. 意图采集：浏览器插件 + AI 识别 → 自动提取商品信息
  2. 数据管理：标准化工单 → 状态流转管理
  3. 智能执行：条件判断 → 自动下单 → 异常处理
  4. 接口集成：RESTful API → Webhook → 企业系统对接

项目结构

procure/
├── apps/
│   ├── admin/              # 管理后台（Next.js）
│   │   ├── app/            # App Router 页面
│   │   ├── components/     # React 组件
│   │   └── features/       # 业务功能模块
│   ├── api/                # API 服务（NestJS）
│   │   ├── src/
│   │   │   ├── auth/       # 认证模块
│   │   │   ├── intents/    # 意图管理
│   │   │   └── common/     # 公共模块
│   │   └── test/           # E2E 测试
│   └── doc/                # 文档站点（Nextra）
├── packages/
│   ├── db/                 # 数据库层（Prisma）
│   │   ├── prisma/         # Schema & 迁移
│   │   └── src/            # DB 客户端
│   ├── services/           # 共享业务逻辑
│   ├── ui/                 # UI 组件库
│   │   └── src/components/ # shadcn/ui 组件
│   └── typescript-config/  # TS 配置共享
└── scripts/                # 工具脚本
    ├── build-docker.sh     # Docker 构建
    └── setup-secrets.sh    # GitHub Secrets 配置

核心能力

🤖 AI 智能识别

  • 视觉识别：阿里通义千问-VL Plus 自动识别商品信息
  • 准确率：95%+ 的识别准确率
  • 多平台支持：淘宝、京东、拼多多、1688

⚡ 自动化执行

  • Browser-Use：基于 AI 的浏览器自动化
  • 智能操作：模拟真人操作，自动完成下单
  • 异常处理：价格变动、库存不足等智能处理

🔐 企业级安全

  • JWT 认证：基于 Token 的身份验证
  • HMAC 签名：API 请求签名验证
  • 权限管理：细粒度的角色权限控制
  • 审计日志：完整的操作记录和追溯

🔄 系统集成

  • RESTful API：标准化的接口设计
  • Webhook 回调：实时状态通知
  • 灵活对接：支持多种企业系统集成

技术文档导航

🏗️ 技术架构

深入了解系统的技术架构设计：

💻 开发指南

快速上手平台开发：

快速开始

前置要求

  • Node.js 22+
  • pnpm 10.4+
  • PostgreSQL 14+
  • Docker（可选）

5 分钟快速启动

# 1. 克隆仓库
git clone <repository-url>
cd procure
 
# 2. 安装依赖
pnpm install
 
# 3. 配置环境变量
cp packages/db/.env.example packages/db/.env
cp apps/admin/.env.example apps/admin/.env
cp apps/api/.env.example apps/api/.env
 
# 4. 初始化数据库
pnpm db:generate
pnpm db:push
 
# 5. 启动开发服务器
pnpm dev

访问：

详细步骤请查看快速开始指南。

技术特色

Monorepo 架构

使用 Turborepo 管理 monorepo，实现：

  • 📦 代码共享和重用
  • ⚡ 增量构建和缓存
  • 🔄 统一的依赖管理
  • 🚀 高效的并行执行

类型安全

  • 端到端类型安全：从数据库到前端的完整类型推导
  • Prisma：自动生成类型安全的数据库客户端
  • Zod：运行时验证和类型推导
  • TypeScript：严格的类型检查

代码质量

  • Ultracite (Biome)：快速的格式化和 Linting
  • 自动修复：pnpm fix 自动修复代码问题
  • Git Hooks：提交前自动检查
  • CI 检查：Pull Request 自动化质量检查

开发体验

  • 热重载：Next.js/NestJS 自动重启
  • 类型提示：完整的 TypeScript IntelliSense
  • 错误提示：清晰的错误信息和堆栈
  • 开发工具：Prisma Studio、React DevTools

核心技术亮点

1. AI 驱动的商品识别

// 使用通义千问-VL Plus 识别商品
const result = await visionModel.analyze(screenshot, {
  task: "extract_product_info",
  fields: ["title", "price", "specs", "images"]
});
 
// 准确率 95%+
console.log(result.confidence); // 0.97

2. Browser-Use 自动化

// AI 驱动的浏览器操作
const agent = new BrowserAgent({
  task: "purchase_product",
  url: intent.productUrl,
  quantity: intent.quantity
});
 
await agent.execute();
// 自动完成登录、选择规格、下单等操作

3. 类型安全的 API

// Prisma 类型安全查询
const intent = await prisma.intention.findUnique({
  where: { id },
  include: { 
    execution: true,
    orderInfo: true 
  }
});
 
// 完整的类型推导
intent.execution?.status // "pending" | "running" | "completed"

4. Server Components

// Next.js 15 Server Components
export default async function IntentsPage() {
  // 直接在组件中查询数据库
  const intents = await prisma.intention.findMany();
  
  return <IntentList data={intents} />;
}
// 无需 API 调用，零 JavaScript 发送到客户端

部署架构

Docker 容器化

services:
  web:
    build: ./apps/admin
    ports: ["3000:3000"]
  
  api:
    build: ./apps/api
    ports: ["3001:3001"]
    
  db:
    image: postgres:14
    
  redis:
    image: redis:7

生产环境

  • 前端：Vercel / 自建 Nginx
  • 后端：Docker + Kubernetes
  • 数据库：PostgreSQL（主从复制）
  • 缓存：Redis Cluster
  • 监控：Prometheus + Grafana

详细部署方案请查看部署架构。

性能指标

响应时间

  • API 响应：< 100ms (P95)
  • 页面加载：< 1s (LCP)
  • 意图采集：< 2s
  • 自动执行：10-15 分钟

可用性

  • 服务可用性：99.9%+
  • 执行成功率：95%+
  • AI 识别准确率：95%+

扩展性

  • 支持水平扩展
  • 数据库分片支持
  • 缓存层高可用
  • 任务队列分布式

开发规范

Commit 规范

遵循 Conventional Commits ：

  • feat: - 新功能
  • fix: - Bug 修复
  • docs: - 文档更新
  • refactor: - 重构
  • perf: - 性能优化
  • test: - 测试相关
  • chore: - 构建/工具相关

代码风格

使用 Ultracite (Biome) 自动格式化：

pnpm fix     # 自动修复
pnpm check   # 检查问题

最佳实践

  1. 类型优先：充分利用 TypeScript
  2. 组件化：保持组件小而专注
  3. 错误处理：使用 try-catch 和错误边界
  4. 性能优化：合理使用缓存和索引
  5. 安全第一：验证所有输入，使用参数化查询

相关资源

官方文档

技术博客

学习资源

准备好开始了吗？ 从快速开始开始您的开发之旅，或深入了解技术架构！

架构概述