# devTestPlatWeb

**Repository Path**: aurkas/dev-test-plat-web

## Basic Information

- **Project Name**: devTestPlatWeb
- **Description**: 云蝶AI产研平台的web端
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2026-09-18
- **Last Updated**: 2026-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 devTestPlatWeb 研发测试一体化平台（前端）

![Vue](https://img.shields.io/badge/Vue-3.5-42B883?style=flat&logo=vue.js&logoColor=white) ![Vite](https://img.shields.io/badge/Vite-7.3-646CFF?style=flat&logo=vite&logoColor=white) ![Element Plus](https://img.shields.io/badge/Element%20Plus-2.14-409EFF?style=flat&logo=element&logoColor=white) ![Pinia](https://img.shields.io/badge/Pinia-3.0-FFD859?style=flat&logo=pinia&logoColor=black) ![Node](https://img.shields.io/badge/Node-%3E%3D20.19-339933?style=flat&logo=node.js&logoColor=white) ![License](https://img.shields.io/badge/License-Mulan%20PSL%20v2-blue?style=flat)

**基于 Vue 3 + Vite 的研发测试一体化平台前端：从 AI 需求生成、原型设计与技术方案，到开发任务、接口文档、用例编排与自动化回归，覆盖需求到测试的完整链路。**

> 中文 | [English](README.en.md)

## 📋 功能模块

### 产品与需求（AI 驱动）

| 模块 | 说明 |
|------|------|
| **🤖 AI 需求生成** | 自然语言输入 → AI 澄清提问 → PRD 草稿（支持多版本对比） → 一键落库为需求树；支持会话历史与独立窗口模式 |
| **🔧 AI 需求微调** | 基于已有需求树做增量调整，生成 `CREATE / UPDATE / MOVE / MERGE / DELETE` 变更清单，确认后再应用 |
| **🖼️ 原型预览** | 三种浏览模式：树形浏览、单页画布（缩放/平移）、全局画布（按需求分组的超大画布）；支持 AI HTML、截图、外链三类原型 |
| **✏️ 原型 AI 微调** | 对 AI 生成的 HTML 原型下发自然语言指令进行重绘、局部微调与重新生成 |
| **🔀 原型流程图** | 基于原型页面生成 Mermaid 流程图，支持 AI 澄清与流程重生成 |
| **📦 需求 / 交付 / 验收** | 需求树维护、节点移动、原型换绑、交付管理与验收项管理 |

### 研发管理

| 模块 | 说明 |
|------|------|
| **📚 仓库管理** | 按应用维护 Git 仓库信息，供技术方案关联并避免重复录入 |
| **📋 技术方案与评审** | 按方案类型独立维护 Markdown 技术方案、评审状态、方案分支、Commit 与 SQL/配置/脚本等产物；同一需求同一类型仅维护一份正式方案 |
| **🤖 AI 技术方案生成** | 收集研发上下文，支持澄清、草稿预览/编辑、AI 微调、版本回溯与人工审批；审批后事务写入技术方案、产物、分支和开发任务 |
| **✅ 开发任务** | 按负责人、优先级和任务类型管理任务，并按 `TODO → IN_PROGRESS → IN_TESTING → DONE` 推进 |
| **🧑‍💻 本地 Coding Agent 协作** | 本地 Agent 拉取研发上下文，在开发者授权的仓库中开发，并回写进度、自测、Commit 和 Review；平台不直接操作本地 Git 仓库 |

### 接口与测试

| 模块 | 说明 |
|------|------|
| **📱 应用与端点** | 应用管理、应用端点（多环境地址）管理 |
| **🔐 Token 管理** | 应用维度的鉴权 Token 维护，供用例执行时引用 |
| **📝 接口文档管理** | 接口定义、请求/响应参数树（`ParamTreeForm` / `ParamFieldTree`）管理 |
| **📐 接口时序图** | 基于 PlantUML 渲染接口调用时序图 |
| **🧪 测试用例管理** | 用例创建、参数与断言配置、依赖数据编排 |
| **⚡ 用例编排** | 多用例串联编排与执行 |
| **🔄 定时回归任务** | 定时任务与任务明细调度管理 |
| **📊 执行报告** | 用例执行报告查询与失败分析 |
| **💬 AI 交互式测试** | 对话式测试助手，支持 `default / DeepSeek / Qwen / Ollama` 多模型、DeepSeek 流式输出、可配置上下文轮数，后端按需调用 MCP tools |

### 系统与权限

| 模块 | 说明 |
|------|------|
| **📂 菜单管理** | 目录 / 菜单 / 按钮三级菜单树维护，登录后按 `moduleList` 动态渲染侧边栏 |
| **👤 角色管理** | 角色维护与权限分配 |
| **👥 用户管理** | 用户维护与角色绑定 |
| **🧾 操作日志** | 操作行为审计查询 |
| **📈 首页看板** | 各类资产统计卡片 + ECharts 图表（项目状态、执行成功率等） |

## 🏗️ 技术栈

```mermaid
graph LR
    A[Vue 3.5] --> B[Vite 7.3]
    A --> C[Pinia 3 状态管理]
    A --> D[Vue Router 4]
    A --> E[Element Plus 2.14]
    A --> F[Axios 1.16]
    A --> G[ECharts 6 图表]
    A --> H[Mermaid 11 流程图]
    A --> I[PlantUML Encoder 时序图]
    A --> J[Marked + DOMPurify Markdown]
    A --> K[MCP Client / SSE]
```

## 🚀 快速开始

### 前置条件

- Node.js `^20.19.0 || >=22.12.0`
- 后端服务 devTestPlat（默认 `http://localhost:9080`）

### 安装与启动

```bash
# 克隆仓库
git clone <repository-url> dev-test-plat-web
cd dev-test-plat-web

# 安装依赖
pnpm install

# 启动开发服务器（development 模式，默认 http://localhost:5173）
pnpm run dev

# 或使用 test 模式启动
pnpm run dev:test
```

### 构建

```bash
pnpm run build        # development 模式构建
pnpm run build:test   # test 模式构建
pnpm run build:prod   # production 模式构建
pnpm run preview      # 本地预览构建产物
```

## ⚙️ 环境变量

环境变量位于 `.env.development` / `.env.test` / `.env.production`：

| 变量 | 默认值 | 说明 |
|------|--------|------|
| `VITE_API_BASE_URL` | `/devplat` | 前端请求前缀，同时作为 Vite 代理匹配路径 |
| `VITE_API_TARGET` | `http://localhost:9080` | 开发代理转发的后端地址 |
| `VITE_MCP_SERVER_URL` | `/devplat/sse` | MCP Server SSE 端点（Spring AI WebMVC MCP） |

开发环境由 `vite.config.js` 将 `VITE_API_BASE_URL` 前缀的请求代理到 `VITE_API_TARGET`，无需额外配置 CORS。

## 🐳 容器部署

```bash
# 构建并启动（多阶段构建：node 构建 → nginx 托管，映射 80 端口）
docker compose up -d --build

# 健康检查
curl http://localhost/health
```

`nginx.conf` 已内置 gzip 压缩、静态资源长缓存、Vue Router history 模式回退（`try_files`）、`/devplat` 反向代理与 `/health` 健康检查端点。生产部署时请按实际后端地址调整 `nginx.conf` 中的 `proxy_pass`。

## 🖥️ 项目结构

```
src/
├── views/                      # 页面组件
│   ├── Login.vue               # 登录
│   ├── Home.vue                # 首页看板（ECharts）
│   ├── Application.vue         # 应用管理
│   ├── EndPoint.vue            # 端点管理
│   ├── TokenManagement.vue     # Token 管理
│   ├── InterfaceDocManagement.vue   # 接口文档管理
│   ├── InterfaceUmlManagement.vue   # 接口时序图（PlantUML）
│   ├── TestCase*.vue           # 用例管理 / 编排 / 定时任务 / 执行报告
│   ├── AiTestChat.vue          # AI 交互式测试
│   ├── UserManagement.vue      # 用户管理
│   ├── OperationLogManagement.vue   # 操作日志
│   ├── product/                # 产品与研发域：需求、交付、验收、AI、原型、技术方案与开发任务
│   │   ├── DevRepositoryManagement.vue      # Git 仓库管理
│   │   ├── TechProposalManagement.vue       # 技术方案、评审、分支与产物
│   │   ├── AiTechProposalGeneration.vue     # AI 技术方案生成
│   │   ├── DevTaskManagement.vue            # 开发任务管理
│   │   └── components/         # 原型画布、预览器、微调与流程弹窗
│   └── system/                 # 菜单管理、角色管理
├── layouts/MainLayout.vue      # 主框架布局（动态菜单 + 侧边栏折叠）
├── components/                 # 通用组件（MenuTree、参数树、需求 Diff）
├── router/index.js             # 路由与登录守卫
├── stores/user.js              # Pinia 用户态（token / userName / moduleList）
├── services/mcpService.js      # MCP SSE 客户端（initialize / tools list / tools call）
├── utils/                      # request 封装、Markdown/Mermaid 渲染、研发管理枚举（devEnums.js）
├── styles/markdown.css         # Markdown 样式
└── App.vue                     # 根组件
```

## 🛠️ 命令一览

| 命令 | 描述 |
|------|------|
| `pnpm run dev` | 启动开发服务器（development 模式） |
| `pnpm run dev:test` | 启动开发服务器（test 模式） |
| `pnpm run build` | development 模式构建 |
| `pnpm run build:test` | test 模式构建 |
| `pnpm run build:prod` | production 模式构建 |
| `pnpm run preview` | 本地预览构建产物 |

## 🔐 认证与权限

- 登录接口 `POST /userLogin` 返回 `token`、`userName` 与 `moduleList`，由 Pinia + `localStorage` 持久化。
- Axios 请求拦截器统一携带 `Token` 请求头；响应拦截器统一处理业务错误码与 401/403/404/500，401 时清理凭证并跳转登录。
- 路由守卫拦截未携带 token 的访问；`/ai-requirement`、`/prototype-preview` 为 `standalone` 独立窗口路由。
- 侧边栏菜单按 `moduleList` 动态渲染（目录/菜单/按钮三种类型），配合角色权限分配实现菜单级权限控制。
- 研发管理能力面向开发（角色类型 `1`）与前端（角色类型 `3`）：可按权限维护仓库、技术方案、方案分支与开发任务；技术方案按类型隔离，AI 生成结果须经人工审批后才写入正式数据。

## 🤝 贡献指南

1. Fork 本仓库
2. 创建分支：`git checkout -b feat/your-feature-name`
3. 提交代码：`git commit -m 'feat: 添加某项功能'`
4. 推送分支：`git push origin feat/your-feature-name`
5. 发起 Pull Request（Issue / PR 模板见 `.gitee/`）

提交前请执行 `pnpm run build` 确认构建通过。

## 📚 设计文档

| 文档 | 说明 |
|------|------|
| [需求原型全局画布技术方案](docs/prototype-global-canvas-design.md) | 全局画布浏览模式的背景、目标、边界与技术设计 |
| [v1.2.0 研发端需求文档](../devTestPlat-java/doc/v1.2.0/README.md) | 同级 Java 项目中的研发管理 PRD、技术方案、AI 技术方案生成与本地 Coding Agent 协作设计 |

## 🌐 多语言

| 语言 | 文件 |
|------|------|
| 中文 | `README.md` |
| English | `README.en.md` |

## 📄 许可证

[木兰宽松许可证第 2 版（Mulan PSL v2）](LICENSE)

---

*使用 Vue 3 + Vite + Element Plus 构建 ❤️*