# 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 — Integrated Dev & Test Platform (Frontend)

![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)

**A Vue 3 + Vite frontend for an integrated development and testing platform — covering the full path from AI requirement generation, prototyping, and technical proposals to development tasks, API docs, test case orchestration, and automated regression.**

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

## 📋 Modules

### Product & Requirements (AI-driven)

| Module | Description |
|--------|-------------|
| **🤖 AI Requirement Generation** | Natural language input → AI clarification questions → PRD drafts (multi-version comparison) → one-click persistence into the requirement tree; session history and standalone-window mode included |
| **🔧 AI Requirement Refinement** | Incremental adjustments over an existing requirement tree, producing a `CREATE / UPDATE / MOVE / MERGE / DELETE` change list for review before applying |
| **🖼️ Prototype Preview** | Three browse modes: tree view, single-page canvas (zoom/pan), and global canvas (large canvas grouped by requirement); supports AI HTML, screenshot, and external-link prototypes |
| **✏️ Prototype AI Finetune** | Send natural-language instructions to redraw, locally tweak, or regenerate AI-generated HTML prototypes |
| **🔀 Prototype Flow Diagrams** | Generate Mermaid flow diagrams from prototype pages, with AI clarification and flow regeneration |
| **📦 Requirement / Delivery / Acceptance** | Requirement tree maintenance, node move, prototype rebinding, delivery management, and acceptance items |

### Development Management

| Module | Description |
|--------|-------------|
| **📚 Repository Management** | Maintain Git repository information by application for reuse in technical proposals |
| **📋 Technical Proposals & Reviews** | Maintain Markdown proposals, review status, repository branches, commits, and SQL/configuration/script artifacts separately by proposal type; each requirement has at most one formal proposal of a given type |
| **🤖 AI Technical Proposal Generation** | Collect development context and support clarification, draft preview/editing, AI revision, version history, and human approval; approval transactionally persists the proposal, artifacts, branches, and development tasks |
| **✅ Development Tasks** | Manage tasks by assignee, priority, and type, progressing through `TODO → IN_PROGRESS → IN_TESTING → DONE` |
| **🧑‍💻 Local Coding Agent Collaboration** | Local agents fetch development context, work in developer-authorized repositories, and report progress, self-tests, commits, and reviews; the platform never operates local Git repositories directly |

### API & Testing

| Module | Description |
|--------|-------------|
| **📱 Applications & Endpoints** | Application management and per-environment endpoint management |
| **🔐 Token Management** | Application-scoped auth tokens referenced during test execution |
| **📝 API Doc Management** | API definitions with request/response parameter trees (`ParamTreeForm` / `ParamFieldTree`) |
| **📐 Sequence Diagrams** | API call sequence diagrams rendered via PlantUML |
| **🧪 Test Case Management** | Case creation, parameter and assertion configuration, dependency data setup |
| **⚡ Auto Flow** | Chain multiple test cases into an orchestrated flow and execute it |
| **🔄 Scheduled Regression** | Scheduled task and task-detail management |
| **📊 Execution Reports** | Report queries and failure analysis |
| **💬 AI Interactive Testing** | Chat-based testing assistant supporting `default / DeepSeek / Qwen / Ollama`, DeepSeek streaming output, and configurable context rounds; the backend invokes MCP tools as needed |

### System & Access Control

| Module | Description |
|--------|-------------|
| **📂 Menu Management** | Three-level menu tree (directory / menu / button); the sidebar renders dynamically from `moduleList` after login |
| **👤 Role Management** | Role maintenance and permission assignment |
| **👥 User Management** | User maintenance and role binding |
| **🧾 Operation Logs** | Audit trail queries |
| **📈 Dashboard** | Asset statistic cards plus ECharts visualizations (project status, execution success rate, etc.) |

## 🏗️ Tech Stack

```mermaid
graph LR
    A[Vue 3.5] --> B[Vite 7.3]
    A --> C[Pinia 3 State]
    A --> D[Vue Router 4]
    A --> E[Element Plus 2.14]
    A --> F[Axios 1.16]
    A --> G[ECharts 6 Charts]
    A --> H[Mermaid 11 Flow]
    A --> I[PlantUML Encoder]
    A --> J[Marked + DOMPurify]
    A --> K[MCP Client / SSE]
```

## 🚀 Quick Start

### Prerequisites

- Node.js `^20.19.0 || >=22.12.0`
- The devTestPlat backend service (defaults to `http://localhost:9080`)

### Install & Run

```bash
# Clone the repository
git clone <repository-url> dev-test-plat-web
cd dev-test-plat-web

# Install dependencies
pnpm install

# Start the dev server (development mode, http://localhost:5173 by default)
pnpm run dev

# Or start in test mode
pnpm run dev:test
```

### Build

```bash
pnpm run build        # development mode build
pnpm run build:test   # test mode build
pnpm run build:prod   # production mode build
pnpm run preview      # preview the build output locally
```

## ⚙️ Environment Variables

Defined in `.env.development` / `.env.test` / `.env.production`:

| Variable | Default | Description |
|----------|---------|-------------|
| `VITE_API_BASE_URL` | `/devplat` | Request prefix, also used as the Vite proxy match path |
| `VITE_API_TARGET` | `http://localhost:9080` | Backend address the dev proxy forwards to |
| `VITE_MCP_SERVER_URL` | `/devplat/sse` | MCP Server SSE endpoint (Spring AI WebMVC MCP) |

In development, `vite.config.js` proxies requests prefixed with `VITE_API_BASE_URL` to `VITE_API_TARGET`, so no extra CORS setup is required.

## 🐳 Container Deployment

```bash
# Build and start (multi-stage: node build → nginx serve, port 80)
docker compose up -d --build

# Health check
curl http://localhost/health
```

`nginx.conf` ships with gzip compression, long-lived static asset caching, Vue Router history fallback (`try_files`), a `/devplat` reverse proxy, and a `/health` endpoint. Adjust `proxy_pass` in `nginx.conf` to match your actual backend address before deploying to production.

## 🖥️ Project Structure

```
src/
├── views/                      # Page components
│   ├── Login.vue               # Login
│   ├── Home.vue                # Dashboard (ECharts)
│   ├── Application.vue         # Application management
│   ├── EndPoint.vue            # Endpoint management
│   ├── TokenManagement.vue     # Token management
│   ├── InterfaceDocManagement.vue   # API doc management
│   ├── InterfaceUmlManagement.vue   # Sequence diagrams (PlantUML)
│   ├── TestCase*.vue           # Cases / auto flow / scheduled tasks / reports
│   ├── AiTestChat.vue          # AI interactive testing
│   ├── UserManagement.vue      # User management
│   ├── OperationLogManagement.vue   # Operation logs
│   ├── product/                # Product & development domain: requirements, delivery, acceptance, AI, prototypes, proposals, and tasks
│   │   ├── DevRepositoryManagement.vue      # Git repository management
│   │   ├── TechProposalManagement.vue       # Proposals, reviews, branches, and artifacts
│   │   ├── AiTechProposalGeneration.vue     # AI technical proposal generation
│   │   ├── DevTaskManagement.vue            # Development task management
│   │   └── components/         # Prototype canvas, previewers, finetune & flow dialogs
│   └── system/                 # Menu and role management
├── layouts/MainLayout.vue      # Main shell (dynamic menu + collapsible sidebar)
├── components/                 # Shared components (MenuTree, param trees, requirement diff)
├── router/index.js             # Routes and login guard
├── stores/user.js              # Pinia user state (token / userName / moduleList)
├── services/mcpService.js      # MCP SSE client (initialize / tools list / tools call)
├── utils/                      # Axios wrapper, Markdown/Mermaid rendering, development enums (devEnums.js)
├── styles/markdown.css         # Markdown styles
└── App.vue                     # Root component
```

## 🛠️ Commands

| Command | Description |
|---------|-------------|
| `pnpm run dev` | Start dev server (development mode) |
| `pnpm run dev:test` | Start dev server (test mode) |
| `pnpm run build` | Build in development mode |
| `pnpm run build:test` | Build in test mode |
| `pnpm run build:prod` | Build in production mode |
| `pnpm run preview` | Preview the build output locally |

## 🔐 Authentication & Authorization

- `POST /userLogin` returns `token`, `userName`, and `moduleList`, persisted via Pinia + `localStorage`.
- The Axios request interceptor attaches the `Token` header; the response interceptor centralizes business error codes and 401/403/404/500 handling, clearing credentials and redirecting to login on 401.
- A router guard blocks requests without a token. `/ai-requirement` and `/prototype-preview` are `standalone` routes intended for separate windows.
- The sidebar renders dynamically from `moduleList` (directory / menu / button types), combining with role permission assignment for menu-level access control.
- Development management is available to development (role type `1`) and frontend (role type `3`) roles according to their permissions. Technical proposals are isolated by type, and AI-generated results require human approval before formal data is persisted.

## 🤝 Contributing

1. Fork the repository
2. Create a branch: `git checkout -b feat/your-feature-name`
3. Commit your changes: `git commit -m 'feat: add some feature'`
4. Push the branch: `git push origin feat/your-feature-name`
5. Open a Pull Request (Issue / PR templates live in `.gitee/`)

Please run `pnpm run build` before submitting to confirm the build passes.

## 📚 Design Docs

| Document | Description |
|----------|-------------|
| [Prototype Global Canvas Design](docs/prototype-global-canvas-design.md) | Background, goals, scope, and technical design of the global canvas browse mode (Chinese) |
| [v1.2.0 Development Management Documents](../devTestPlat-java/doc/v1.2.0/README.md) | PRD and technical designs for development management, AI technical proposal generation, and local Coding Agent collaboration in the sibling Java project |

## 🌐 Languages

| Language | File |
|----------|------|
| Chinese | `README.md` |
| English | `README.en.md` |

## 📄 License

[Mulan Permissive Software License, Version 2 (Mulan PSL v2)](LICENSE)

---

*Built with ❤️ using Vue 3 + Vite + Element Plus*