trae solo模式demo--用例管理平台

切换至Trae SOLO Builder全自动开发模式，从零搭建**前后端分离测试用例管理系统**，适配10人小型测试团队协作使用，分为独立前端Vite Vue工程、独立Django DRF后端工程两套完整项目，全程强制国内镜像杜绝依赖下载超时，自动完成前后端联调、自测验证、生成完整启动文档，所有代码带注释、分层规范、可直接导出完整工程包。 ## 一、全局强制镜像配置（解决pip/npm外网超时核心要求，必须生成对应配置文件） ### 前端Vue工程镜像约束 1. 前端根目录自动生成 .npmrc 文件，锁定淘宝国内镜像 registry=https://registry.npmmirror.com 2. 所有npm安装命令强制追加国内镜像参数，禁止访问官方国外npm源 3. package.json 保留标准 "dev": "vite" 启动脚本，适配Trae预览、本地PyCharm运行 ### 后端Django工程镜像约束 1. 后端根目录生成 pip.conf 配置文件，全局锁定清华pip源 https://pypi.tuna.tsinghua.edu.cn/simple 2. 自动生成 requirements.txt 完整依赖清单，安装pip包全部追加 -i 清华镜像参数 3. README写明本地PyCharm切换pip国内镜像完整命令，避免安装超时失败 ## 二、前后端固定技术栈规范 ### 前端技术栈（Vite5 + Vue3 + <script setup> 语法糖） 1. UI库：Element Plus，配置自动按需导入插件 unplugin-auto-import/unplugin-vue-components 2. 配套工具：Vue Router4、Pinia状态管理、Axios请求封装、Elment Plus表单校验 3. 全局统一请求拦截、JWT登录鉴权、全局错误提示、跨域适配后端接口 4. 页面全部响应式布局，适配PC后台管理，代码统一ES6规范、完整单行注释 ### 后端技术栈（Django5 + Django REST Framework DRF） 1. 数据库：内置SQLite轻量化数据库，无需安装MySQL，10人团队足够使用，开箱即用 2. 配套依赖：djangorestframework、djangorestframework-simplejwt（登录token）、django-cors-headers（跨域） 3. 架构分层：模型Model、序列化器Serializer、视图集ViewSet、路由分层、统一全局响应格式 4. 内置DRF可视化接口调试页面，所有RESTful接口自带参数校验、异常捕获、分页逻辑 ## 三、系统整体业务定位（适配10人小型测试团队） 面向10人以内测试小组，实现测试用例全生命周期管理，区分两种角色：管理员、普通测试人员；支持多人同时登录、用例增删改查、筛选检索、批量操作、简单数据统计，无复杂第三方集成，轻量化易部署。 ## 四、后端数据库模型与接口设计（4张核心数据表，完整CRUD接口） ### 1. 用户表 User（系统登录账号，适配10人团队） 字段：用户名、密码加密存储、真实姓名、角色（管理员/测试员）、创建时间 接口：登录JWT获取token、用户列表查询、新增/编辑团队成员、修改密码 ### 2. 项目表 Project（区分不同产品项目） 字段：项目名称、项目描述、创建人、创建时间 接口：项目新增、编辑、删除、全量列表查询（下拉选择用） ### 3. 模块表 Module（项目下细分功能模块） 字段：所属项目外键、模块名称、模块描述 接口：模块CRUD、按项目ID筛选模块 ### 4. 核心测试用例表 TestCase（系统核心业务） 字段： - 所属项目、所属模块（外键关联） - 用例标题、前置条件、测试步骤（JSON数组存储多条步骤）、预期结果 - 优先级：P0最高/P1/P2/P3、用例类型：功能/接口/UI测试 - 执行状态：未执行/通过/失败/阻塞、维护人、创建时间、更新时间 接口完整能力： 1. GET 分页查询用例列表，支持多条件联合筛选：项目、模块、优先级、执行状态、标题模糊搜索 2. GET 单条用例详情 3. POST 新增用例，序列化器完整字段校验 4. PUT 编辑用例全量信息 5. DELETE 删除单条用例、批量多选删除 6. 统计接口：返回各状态用例数量、各优先级数量，供首页仪表盘展示 ## 五、前端页面完整功能清单（Element Plus后台布局，侧边导航栏） ### 页面1：登录页面 账号密码登录，JWT token存储，未登录拦截跳转登录页，token过期自动退出 ### 页面2：首页仪表盘 1. 统计卡片：总用例数、未执行/通过/失败用例数量 2. 简易柱状图展示各项目用例分布（使用Element Plus内置图表） ### 页面3：项目管理页面 表格展示全部项目，新增弹窗、编辑弹窗、删除确认提示，分页 ### 页面4：模块管理页面 按项目筛选模块，弹窗增删改、删除二次确认 ### 页面5：核心测试用例列表页面（核心页面） 1. 顶部筛选区：项目下拉、模块联动下拉、优先级下拉、执行状态下拉、标题搜索框 2. 操作按钮：新增用例、批量删除、重置筛选条件 3. 表格字段：用例标题、所属项目/模块、优先级、执行状态、维护人、创建时间 4. 每行操作：查看详情、编辑、删除（删除弹出确认提示） 5. 底部分页组件，自定义每页条数 6. 多选批量删除功能 ### 页面6：新增/编辑用例弹窗（复用同一弹窗） 完整表单校验，字段包含： 1. 项目+联动模块选择、优先级下拉、用例类型下拉 2. 输入框：用例标题、前置条件 3. 动态增删测试步骤：多行文本，可新增/删除多条步骤 4. 文本域：预期结果 提交时全字段校验，弹窗关闭清空表单 ### 页面7：用户管理页面（仅管理员可见） 团队成员账号管理，新增/编辑账号、修改角色、重置密码，适配10人团队维护 ## 六、前后端标准目录结构（严格按分层生成全部文件） ### 前端Vite Vue工程目录 frontend-testcase/ ├── .npmrc # npm国内镜像配置 ├── package.json ├── vite.config.js # Element Plus自动按需导入配置 ├── README.md └── src/ ├── api/ # 所有后端接口请求封装 ├── views/ # 所有页面视图（登录、首页、用例管理、项目、用户管理） ├── components/ # 公共复用组件（筛选栏、弹窗、分页、动态步骤表单） ├── router/ # 路由配置、登录权限守卫 ├── store/ # Pinia状态管理（用户登录信息） ├── utils/ # axios封装、token工具、全局提示 ├── App.vue └── main.js ### 后端Django DRF工程目录 backend-testcase/ ├── pip.conf # pip清华镜像配置 ├── requirements.txt ├── manage.py ├── README.md # 后端启动、数据库迁移、联调完整文档 ├── myproject/ # 全局配置目录 │ ├── settings.py # DRF、JWT、跨域、分页全局配置 │ ├── urls.py │ └── wsgi.py ├── users/ # 用户账号模块（模型、序列化、视图、路由） ├── projects/ # 项目、模块业务模块 └── testcases/ # 测试用例核心业务模块 ## 七、SOLO全自动执行硬性要求 1. AI自动分步搭建前端、后端两套独立项目，先构建后端再构建前端，自动完成接口联调自测 2. 构建全程使用对应国内镜像安装所有依赖，自动处理下载超时、安装报错并修复 3. 后端自动生成SQLite初始化测试数据（3个项目、若干模块、10条测试用例、2个账号：管理员admin/测试员test） 4. 全部代码生成完成后，在内置终端输出完整可复制命令：镜像校验、依赖安装、数据库迁移、后端启动、前端启动 5. 自动验证前后端联调：前端登录、用例增删改查全部功能可正常交互，无跨域、接口404报错 6. 构建验证全部通过后，对话底部提供【导出前端工程】【导出后端工程】两个独立导出按钮，一键下载两套ZIP包 7. README详细写明：Trae云端运行步骤、本地PyCharm社区版启动全流程、账号密码、接口访问地址、系统功能使用说明 8. 不生成多余冗余文件，纯轻量化后台系统，适配10人小型测试团队日常使用

解决问题：这个 Prompt 把本次踩的 6 个大坑（pip中文编码、登录401、种子命令找不到、Vite代理EADDRINUSE、端口冲突、axios重试）都做成了 硬性约束 ，SOLO Builder 执行时会强制遵守，不会再走弯路。

切换至Trae SOLO Builder全自动开发模式，从零搭建**前后端分离测试用例管理系统**，适配10人小型测试团队协作使用，分为独立前端Vite Vue工程、独立Django DRF后端工程两套完整项目，全程强制国内镜像杜绝依赖下载超时，自动完成前后端联调、自测验证、生成完整启动文档，所有代码带注释、分层规范、可直接导出完整工程包。

⚠️ 核心约束（必须遵守，否则会出坑）

1. **requirements.txt / pip.conf 中绝对不能出现中文**（Windows中文系统pip默认用GBK读取会报UnicodeDecodeError），所有注释用英文

2. **登录接口必须用自定义LoginView**（含AllowAny+返回用户信息），不能直接用rest_framework_simplejwt的TokenObtainPairView，否则被全局IsAuthenticated拦截报401

3. **TokenRefreshView也要动态附加AllowAny权限**

4. **种子数据命令必须放在INSTALLED_APPS注册的app下**（如users/management/commands/），不能放在myproject配置目录下，否则Django找不到命令

5. **前端axios必须直连后端**（baseURL写死http://127.0.0.1:8002/api），绝对不能用Vite proxy------Windows下http-proxy模块有EADDRINUSE顽疾，第二次请求必挂

6. **Django启动端口用8002**（避开8000/8001等常用端口残留的TIME_WAIT）

7. **前端axios必须内置网络错误自动重试**（最多2次，间隔300ms），应对偶发网络抖动

一、全局强制镜像配置

前端Vue工程镜像约束

1. 前端根目录自动生成 .npmrc 文件，锁定淘宝国内镜像 registry= `https://registry.npmmirror.com`

2. 所有npm安装命令强制追加国内镜像参数

3. package.json 保留标准 "dev": "vite" 启动脚本

后端Django工程镜像约束

1. 后端根目录生成 pip.conf 配置文件，全局锁定清华pip源 `https://pypi.tuna.tsinghua.edu.cn/simple\`

2. pip.conf 内注释用英文，不能用中文

3. requirements.txt 内注释用英文，不能用中文

二、前后端固定技术栈

前端技术栈（Vite5 + Vue3 + <script setup>）

1. UI库：Element Plus，配置自动按需导入插件

2. 配套工具：Vue Router4、Pinia状态管理、Axios请求封装、Element Plus表单校验

3. axios直连后端：baseURL写死http://127.0.0.1:8002/api，禁用Vite代理

4. 全局JWT登录鉴权、全局错误提示、网络错误自动重试2次

5. 页面全部响应式布局，适配PC后台管理

后端技术栈（Django5 + DRF）

1. 数据库：SQLite轻量化数据库

2. 配套：djangorestframework、djangorestframework-simplejwt、django-cors-headers

3. 架构分层：Model、Serializer、ViewSet、路由

4. DRF全局配置：JWT鉴权、分页(每页10条)、CORS_ALLOW_ALL_ORIGINS=True

5. 自定义User模型扩展role字段（admin/tester）

6. 登录接口用自定义LoginView（继承TokenObtainPairView，加AllowAny+返回access/refresh/user）

7. TokenRefreshView动态附加AllowAny权限

三、系统业务定位

面向10人以内测试小组，实现测试用例全生命周期管理，区分管理员、测试员两种角色；支持用例增删改查、筛选检索、批量操作、数据统计。

四、后端数据库模型与接口设计（4张核心表）

1. User用户表

字段：用户名、密码加密、真实姓名、角色(admin/tester)、创建时间

接口：登录JWT、用户列表、新增/编辑/删除、修改密码

2. Project项目表

字段：项目名称、描述、创建人(FK)、创建时间

接口：CRUD、全量列表(下拉用)

3. Module模块表

字段：所属项目(FK)、模块名称、描述

接口：CRUD、按项目ID筛选

4. TestCase用例表（核心）

字段：项目(FK)、模块(FK)、标题、前置条件、步骤(JSON数组)、预期结果、优先级(P0-P3)、类型(function/api/ui)、状态(not_exec/pass/fail/blocked)、维护人(FK)、创建/更新时间

接口：

• GET分页多条件查询(project/module/priority/status/title模糊搜索)

• GET详情、POST新增、PUT编辑、DELETE删除

• POST批量删除(body: {"ids":1,2})

• GET统计接口(状态数量/优先级数量/项目分布)

五、前端页面清单（Element Plus后台布局）

1. **登录页**：JWT登录，token存储，未登录拦截

2. **首页仪表盘**：统计卡片(总数/未执行/通过/失败/阻塞) + 项目用例分布柱状图(纯CSS实现) + 优先级分布

3. **项目管理**：表格+分页+新增/编辑弹窗+删除确认

4. **模块管理**：按项目筛选+CRUD弹窗+删除确认

5. **测试用例列表**：多条件筛选区+批量删除+多选+分页+行操作

6. **用例弹窗**：复用新增/编辑弹窗，动态增删测试步骤，完整表单校验

7. **用户管理**：仅管理员可见，账号CRUD+角色+重置密码

六、后端种子数据（seed_data管理命令）

放在users/management/commands/下，创建：admin/admin123 + test/test123账号、3个项目、6个模块、10条测试用例

七、目录结构

前端

frontend-testcase/

├── .npmrc

├── package.json

├── vite.config.js（无proxy配置，仅Element Plus自动导入）

├── index.html

├── README.md

└── src/

├── api/（user.js/project.js/testcase.js）

├── utils/request.js（baseURL=http://127.0.0.1:8002/api + 重试逻辑）

├── store/user.js

├── router/index.js

├── components/（Layout.vue + TestCaseFormDialog.vue）

├── views/（Login/Dashboard/ProjectManage/ModuleManage/TestCaseList/UserManage）

├── App.vue

└── main.js

后端

backend-testcase/

├── pip.conf（英文注释）

├── requirements.txt（英文注释）

├── manage.py

├── README.md

├── myproject/（settings/urls/wsgi/asgi）

├── users/（含management/commands/seed_data.py）

├── projects/

└── testcases/

八、启动命令（按顺序执行）

后端：

cd backend-testcase

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

python manage.py makemigrations users projects testcases

python manage.py migrate

python manage.py seed_data

python manage.py runserver 127.0.0.1:8002

```

前端：

```

cd frontend-testcase

npm install --registry= https://registry.npmmirror.com npm run dev

```

```

打包：

方式1 cd d:\traesolodemo

Compress-Archive -Path '.\backend-testcase\*' -DestinationPath '.\backend-testcase.zip' -Force

Compress-Archive -Path '.\frontend-testcase\*' -DestinationPath '.\frontend-testcase.zip' -Force

方式2：Windows 资源管理器右键（最直观）

1. 在 Trae 资源管理器里右键 backend-testcase 文件夹 → 在文件资源管理器中显示

2. 在打开的 Windows 窗口里右键 backend-testcase 文件夹 → 发送到 → 压缩(zipped)文件夹

3. 自动生成 backend-testcase.zip ，重命名/移动到合适位置即可

对 frontend-testcase 重复一次。

方式3：排除冗余目录的精简包（适合分发）

如果要让zip更小（排除 node_modules / pycache / db.sqlite3）：

``` 使用方式3需要 .NET Framework 的 System.IO.Compression.FileSystem，PowerShell 5 默认可用。

推荐用方式1 ：最简单直接，2 行命令完成。如果你要给同事/朋友分发，建议用 方式3 （排除node_modules后体积会从几百MB降到几百KB）。

cd d:\traesolodemo

# 后端
Remove-Item .\backend-testcase.zip -ErrorAction SilentlyContinue
Compress-Archive -Path '.\backend-testcase\*' -DestinationPath '.\backend-testcase.zip' -Force
# 然后从zip里删除不需要的项
$zip = [System.IO.Compression.ZipFile]::Open((Join-Path (Get-Location) 'backend-testcase.zip'), 'Update')
$zip.Entries | Where-Object { $_.FullName -match '__(pycache)__|db\.sqlite3|\.pyc$' } | ForEach-Object { $_.Delete() }
$zip.Dispose()
Write-Host "Backend zip OK"

# 前端
Remove-Item .\frontend-testcase.zip -ErrorAction SilentlyContinue
Compress-Archive -Path '.\frontend-testcase\*' -DestinationPath '.\frontend-testcase.zip' -Force
$zip = [System.IO.Compression.ZipFile]::Open((Join-Path (Get-Location) 'frontend-testcase.zip'), 'Update')
$zip.Entries | Where-Object { $_.FullName -match 'node_modules|\.vite\\|dist\\' } | ForEach-Object { $_.Delete() }
$zip.Dispose()
Write-Host "Frontend zip OK"

# 查看大小
Get-ChildItem .\*.zip | Select-Object Name, @{N='Size(KB)';E={[math]::Round($_.Length/1KB,1)}}

同事拿到zip包后如何操作

让同事更省心的方案

如果同事是 非技术人员 ，更友好的做法是直接用 方式1打包 （不排除 node_modules），这样：

• 同事解压后 前端免 npm install （直接 npm run dev ）

• 后端还是要装 Python 和 pip install -r requirements.txt （这个绕不开，因为Python环境和操作系统强相关）

不过 node_modules 体积比较大（通常 100-300MB），方式1打出来的 frontend-testcase.zip 也会是这个量级。如果用网盘传输没问题，邮件附件肯定超限。

给同事的最简启动清单

把下面这段直接复制给同事：

```

【环境准备】

1. 装 Python 3.10+：https://www.python.org/downloads/

（勾选Add to PATH）

2. 装 Node.js 20+：https://nodejs.org/

【启动后端】

打开PowerShell执行：

cd <解压目录>\backend-testcase

pip install -r requirements.txt -i https://pypi.

tuna.tsinghua.edu.cn/simple

python manage.py migrate

python manage.py seed_data

python manage.py runserver 127.0.0.1:8002

【启动前端】（新开一个PowerShell）

cd <解压目录>\frontend-testcase

npm install --registry=https://registry.npmmirror.com

npm run dev

【访问】

浏览器打开 http://localhost:5173

账号 admin / admin123

```