feat(P01): 迁移 Taro 小程序项目代码

- 迁移前端源码 (src/)
- 迁移后端服务 (server/)
- 迁移配置文件 (package.json, tsconfig.json 等)
- 更新需求概要文档
- 更新架构设计文档
- 更新接口定义文档
- 更新环境配置文档
- 创建测试目录结构和配置

项目技术栈:
- Taro 4.1.9 (跨端框架)
- React 18
- TypeScript
- NestJS (后端)
- Tailwind CSS 4
- shadcn/ui 组件库
This commit is contained in:
Dev AI
2026-05-22 16:25:05 +08:00
parent 00ce240c01
commit fb348f3740
106 changed files with 13015 additions and 182 deletions
+101 -14
View File
@@ -1,21 +1,108 @@
# P01_errlens_app - 需求概要
## 项目概述
ErrLens 是一个 AI 辅助编程工具,旨在帮助开发者快速定位和修复代码错误。
## 核心功能
1. **错误检测** - 实时分析代码中的潜在问题
2. **智能修复** - 自动生成修复建议
3. **代码审查** - 提供代码质量评估
4. **学习建议** - 根据错误类型提供学习资源
ErrLens 小程序应用是一个基于 **Taro 4 框架**开发的多端小程序项目,支持微信小程序、抖音小程序和 H5 平台。
## 用户角色
- 初级开发者:学习编程时获得实时反馈
- 中级开发者:提高代码质量和效率
- 团队负责人:监控团队代码质量
## 项目定位
- **产品类型**:AI 辅助编程工具的移动端入口
- **目标用户**:开发者、编程学习者、代码审查人员
- **核心价值**:随时随地访问 ErrLens 的代码错误检测和修复建议功能
## 技术栈
- 前端:React + TypeScript
- 后端:Node.js + Express
- 数据库:PostgreSQL
- AI 服务:自定义模型 + OpenAI API
### 前端框架
| 技术 | 版本 | 说明 |
|------|------|------|
| Taro | 4.1.9 | 跨端开发框架 |
| React | 18.x | UI 框架 |
| TypeScript | 5.x | 类型安全 |
| Tailwind CSS | 4.x | 原子化样式 |
| Zustand | 5.x | 状态管理 |
### 后端框架
| 技术 | 版本 | 说明 |
|------|------|------|
| NestJS | 10.x | Node.js 服务端框架 |
| Express | 5.x | HTTP 服务器 |
| PostgreSQL | 15+ | 关系数据库 |
| Drizzle ORM | 0.45.x | ORM 工具 |
### 集成服务
| 服务 | 说明 |
|------|------|
| Supabase | 数据库连接 |
| S3 兼容存储 | 文件存储 |
| Coze SDK | AI 能力集成 |
## 核心功能模块
### 1. 首页模块
- [ ] 欢迎页面展示
- [ ] 功能快捷入口
- [ ] 最新动态/公告
### 2. 代码分析模块
- [ ] 代码上传/粘贴
- [ ] 错误检测结果展示
- [ ] 修复建议生成
### 3. 用户模块
- [ ] 用户登录/注册
- [ ] 个人中心
- [ ] 历史记录
### 4. 设置模块
- [ ] 主题切换
- [ ] 通知设置
- [ ] 关于我们
## 页面结构
```
pages/
├── index/ # 首页
├── analyze/ # 代码分析
├── history/ # 历史记录
├── profile/ # 个人中心
└── settings/ # 设置页面
```
## 组件库
项目使用 **Taro 版 shadcn/ui** 组件库,位于 `src/components/ui/`
| 组件类型 | 示例组件 |
|---------|---------|
| 基础组件 | Button, Input, Textarea |
| 布局组件 | Card, Dialog, Drawer, Sheet |
| 数据展示 | Table, Badge, Avatar |
| 导航组件 | Tabs, Breadcrumb |
| 反馈组件 | Toast, Alert, Progress |
## 多端支持
| 平台 | 状态 | 说明 |
|------|------|------|
| 微信小程序 | ✅ 支持 | 主流平台 |
| 抖音小程序 | ✅ 支持 | 字节系平台 |
| H5 | ✅ 支持 | Web 端预览 |
## 用户体验目标
- **加载速度**:首屏加载 < 2s
- **交互流畅**:帧率 >= 60fps
- **跨端一致**:各端 UI 表现一致
- **离线可用**:支持本地缓存
## 安全要求
- 用户数据加密存储
- API 请求鉴权
- 敏感信息脱敏
---
**文档版本**v1.0.0
**最后更新**2026-05-22
+199 -51
View File
@@ -1,59 +1,207 @@
# P01_errlens_app - 架构设计
## 系统架构
采用微服务架构,前后端分离。
## 整体架构
### 架构图
```
┌─────────────────────────────────────────────────────┐
前端层
React + TypeScript + Tailwind CSS
└──────────────────────┬──────────────────────────────┘
│ HTTP/WebSocket
┌─────────────────────────────────────────────────────┐
API网关
Express + Middleware
└──────────────────────┬──────────────────────────────┘
┌─────────────────┼─────────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
代码分析 │ │ AI服务 用户管理 │
Service │ Service│ Service
└──────────┘ └──────────┘ └──────────┘
│ │ │
└─────────────────┼─────────────────┘
──────────────┐
│ PostgreSQL
──────────────
┌─────────────────────────────────────────────────────────────
小程序客户端
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ │ 首页 │ │ 分析 │ │ 历史 │ │ 我的 │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │ │
┌────────────────────────────────────────┴────┐ │
组件库 (shadcn/ui)
└────────────────────┬─────────────────────────┘
│ │ │
┌────────────────────┴─────────────────────────┐
│ │ 状态管理 (Zustand) │ │
│ └────────────────────┬─────────────────────────┘ │
│ │ │
┌────────────────────┴─────────────────────────┐
│ Network 层 (API 封装)
└────────────────────┬─────────────────────────┘
└───────────────────────┼───────────────────────────────────┘
│ HTTP
┌───────────────────────────────────────────────────────────┐
后端服务 (NestJS)
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 用户模块 │ │ 分析模块 │ │ 历史模块 │ │ 系统模块 │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │ │
│ ┌────┴────────────┴────────────┴────────────┴────┐ │
│ │ Service 层 │ │
│ └────────────────────┬─────────────────────────┘ │
│ │ │
│ ┌────────────────────┴─────────────────────────┐ │
│ │ 数据层 (Drizzle ORM) │ │
│ └────────────────────┬─────────────────────────┘ │
└───────────────────────┼───────────────────────────────────┘
┌─────────────────┐
│ PostgreSQL │
│ Supabase │
└─────────────────┘
```
## 核心模块
### 1. 代码分析模块
- 解析源代码
- 静态分析检测
- 错误分类与评级
### 2. AI 服务模块
- 调用 AI 模型
- 生成修复建议
- 优化提示词
### 3. 用户管理模块
- 用户认证授权
- 使用统计
- 个性化配置
## 目录结构
```
src/
├── api/ # REST API 路由
├── controllers/ # 业务逻辑
├── services/ # 核心服务
├── models/ # 数据模型
├── middleware/ # 中间件
└── utils/ # 工具函数
```
P01_errlens_app/
├── src/ # 前端源码
│ ├── app.config.ts # Taro 应用配置
│ ├── app.tsx # 根组件
│ ├── app.css # 全局样式
│ ├── index.html # H5 入口
│ │
│ ├── components/ # 组件
│ │ └── ui/ # shadcn/ui 组件库
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ └── ... (50+ 组件)
│ │
│ ├── pages/ # 页面
│ │ └── index/ # 首页
│ │ ├── index.tsx
│ │ ├── index.config.ts
│ │ └── index.css
│ │
│ ├── lib/ # 工具库
│ │ ├── utils.ts # 通用工具
│ │ ├── platform.ts # 平台检测
│ │ ├── measure.ts # 尺寸测量
│ │ └── hooks/ # 自定义 Hooks
│ │
│ ├── presets/ # 预设配置
│ │ ├── index.tsx
│ │ ├── env.ts
│ │ ├── h5-container.tsx
│ │ └── ...
│ │
│ └── network.ts # API 请求封装
├── server/ # 后端源码 (NestJS)
│ ├── src/
│ │ ├── app.module.ts # 根模块
│ │ ├── app.controller.ts # 根控制器
│ │ ├── app.service.ts # 根服务
│ │ └── main.ts # 入口文件
│ │
│ ├── nest-cli.json
│ ├── tsconfig.json
│ └── package.json
├── config/ # 构建配置
│ ├── index.ts # 通用配置
│ ├── dev.ts # 开发环境配置
│ └── prod.ts # 生产环境配置
├── types/ # 类型定义
│ ├── global.d.ts
│ └── lucide.d.ts
├── tests/ # 测试代码
│ ├── unit/ # 单元测试
│ ├── integration/ # 集成测试
│ └── e2e/ # E2E 测试
├── docs/ # 项目文档
│ ├── 01_需求概要.md
│ ├── 02_架构设计.md
│ └── 03_接口定义.md
├── package.json # 前端依赖
├── tsconfig.json # TypeScript 配置
├── babel.config.js # Babel 配置
├── eslint.config.mjs # ESLint 配置
├── stylelint.config.mjs # Stylelint 配置
├── project.config.json # 微信小程序配置
└── ENVIRONMENT.md # 环境准备指南
```
## 核心模块设计
### 1. Network 层
```typescript
// src/network.ts
// API 请求封装,自动添加项目域名前缀
// 支持 request / uploadFile / downloadFile
```
**职责**
- 统一处理 API 请求
- 自动添加域名和路径前缀
- 请求/响应日志打印
- 错误处理
### 2. 组件库
**位置**`src/components/ui/`
**组件分类**
- 基础组件:Button, Input, Badge, Avatar
- 布局组件:Card, Dialog, Drawer, Sheet
- 数据展示:Table, Progress, Skeleton
- 导航组件:Tabs, Breadcrumb
- 反馈组件:Toast, Alert, Tooltip
### 3. 状态管理
**方案**Zustand
**特点**
- 轻量级
- 无 Provider 嵌套
- TypeScript 友好
### 4. 后端模块
```
server/src/
├── controllers/ # 控制器
├── services/ # 业务逻辑
├── modules/ # NestJS 模块
├── entities/ # 数据实体
├── dto/ # 数据传输对象
└── interceptors/ # 拦截器
```
## 多端适配策略
### 平台检测
```typescript
import { Taro, ENV_TYPE } from '@tarojs/taro'
const isWeapp = Taro.getEnv() === ENV_TYPE.WEAPP // 微信小程序
const isTT = Taro.getEnv() === ENV_TYPE.TT // 抖音小程序
const isH5 = Taro.getEnv() === ENV_TYPE.WEB // H5
```
### 跨端规则
| 场景 | 适配方案 |
|------|---------|
| Text 换行 | 添加 `block` 类 |
| Input 样式 | View 包裹,样式放 View |
| Fixed + Flex | 使用 inline style |
| 原生组件 | 平台检测 + 降级方案 |
## 部署架构
### 开发环境
- 前端:H5 端口 5000
- 后端:Node 端口 3000
### 生产环境
- 微信小程序:构建 weapp 包
- 抖音小程序:构建 tt 包
- H5:构建 web 静态资源
---
**文档版本**v1.0.0
**最后更新**2026-05-22
+258 -59
View File
@@ -1,54 +1,41 @@
# P01_errlens_app - 接口定义
## API 基础路径
`/api/v1`
## 接口规范
## 认证方式
JWT Token,放在 Authorization 头:
```
Authorization: Bearer <token>
```
### 基础信息
- **Base URL**: `/api`(开发环境通过 Vite Proxy 代理到 `http://localhost:3000/api`
- **请求格式**: JSON
- **响应格式**: Envelope Pattern `{ code, msg, data }`
## 接口列表
### 通用响应结构
### 1. 代码分析
#### POST /api/v1/analyze
分析代码中的错误
**请求体:**
```json
```typescript
// 成功响应
{
"code": "string",
"language": "string",
"options": {
"strict": true
}
code: 200,
msg: "success",
data: { ... }
}
// 错误响应
{
code: 400 | 401 | 403 | 404 | 500,
msg: "错误信息",
data: null
}
```
**响应:**
```json
{
"success": true,
"errors": [
{
"line": 10,
"column": 5,
"type": "error",
"message": "变量未定义",
"suggestion": "建议在使用前定义变量"
}
]
}
---
## 用户模块
### 1. 用户登录
```
POST /api/auth/login
```
### 2. 用户管理
#### POST /api/v1/users/login
用户登录
**请求体:**
**请求参数**
```json
{
"email": "string",
@@ -56,40 +43,252 @@ Authorization: Bearer <token>
}
```
**响应**
**响应示例**
```json
{
"success": true,
"token": "string",
"user": {
"id": "string",
"email": "string",
"name": "string"
"code": 200,
"msg": "success",
"data": {
"token": "jwt_token_here",
"user": {
"id": "uuid",
"email": "user@example.com",
"nickname": "用户名"
}
}
}
```
### 3. 修复建议
---
#### POST /api/v1/fix
获取修复建议
### 2. 用户注册
**请求体:**
```
POST /api/auth/register
```
**请求参数**
```json
{
"email": "string",
"password": "string",
"nickname": "string"
}
```
**响应示例**
```json
{
"code": 200,
"msg": "success",
"data": {
"id": "uuid",
"email": "user@example.com",
"nickname": "用户名"
}
}
```
---
### 3. 获取用户信息
```
GET /api/users/profile
```
**请求头**
```
Authorization: Bearer <token>
```
**响应示例**
```json
{
"code": 200,
"msg": "success",
"data": {
"id": "uuid",
"email": "user@example.com",
"nickname": "用户名",
"avatar": "https://...",
"createdAt": "2026-05-22T00:00:00Z"
}
}
```
---
## 代码分析模块
### 1. 上传代码分析
```
POST /api/analyze
```
**请求头**
```
Authorization: Bearer <token>
```
**请求参数**
```json
{
"code": "string",
"error": {
"type": "string",
"message": "string"
"language": "javascript | python | typescript | ..."
}
```
**响应示例**
```json
{
"code": 200,
"msg": "success",
"data": {
"taskId": "uuid",
"status": "completed",
"results": [
{
"line": 10,
"column": 5,
"severity": "error",
"message": "缺少分号",
"suggestion": "在行末添加分号"
}
]
}
}
```
**响应:**
---
### 2. 获取分析结果
```
GET /api/analyze/:taskId
```
**响应示例**
```json
{
"success": true,
"fixedCode": "string",
"explanation": "string"
"code": 200,
"msg": "success",
"data": {
"taskId": "uuid",
"status": "completed",
"results": [...]
}
}
```
```
---
### 3. 获取历史记录
```
GET /api/analyze/history
```
**查询参数**
```
page: number (default: 1)
pageSize: number (default: 20)
```
**响应示例**
```json
{
"code": 200,
"msg": "success",
"data": {
"list": [
{
"id": "uuid",
"codeSnippet": "function hello() {...}",
"language": "javascript",
"resultCount": 3,
"createdAt": "2026-05-22T00:00:00Z"
}
],
"total": 100,
"page": 1,
"pageSize": 20
}
}
```
---
## 文件上传模块
### 1. 上传文件
```
POST /api/upload
```
**请求头**
```
Authorization: Bearer <token>
Content-Type: multipart/form-data
```
**请求参数**
```
file: binary
```
**响应示例**
```json
{
"code": 200,
"msg": "success",
"data": {
"url": "https://storage.example.com/files/xxx.png",
"filename": "xxx.png",
"size": 1024
}
}
```
---
## 错误码定义
| 错误码 | 说明 |
|-------|------|
| 200 | 成功 |
| 400 | 请求参数错误 |
| 401 | 未授权 / Token 过期 |
| 403 | 权限不足 |
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |
---
## API 测试命令
### 开发环境测试
```bash
# 登录接口
curl -X POST http://localhost:3000/api/auth/login \
-H "Content-Type: application/json" \
-d '{"email":"test@example.com","password":"123456"}'
# 获取用户信息
curl -X GET http://localhost:3000/api/users/profile \
-H "Authorization: Bearer <token>"
# 代码分析
curl -X POST http://localhost:3000/api/analyze \
-H "Authorization: Bearer <token>" \
-H "Content-Type: application/json" \
-d '{"code":"console.log(1)","language":"javascript"}'
```
---
**文档版本**v1.0.0
**最后更新**2026-05-22