frontend/
├── public/
│ └── favicon.ico
├── src/
│ ├── api/ # API 接口
│ │ ├── index.js # axios 配置
│ │ ├── testCase.js # 测试用例 API
│ │ ├── execution.js # 执行 API
│ │ └── user.js # 用户 API
│ ├── assets/ # 静态资源
│ │ ├── images/
│ │ └── styles/
│ │ ├── variables.scss
│ │ └── global.scss
│ ├── components/ # 公共组件
│ │ ├── common/
│ │ │ ├── AppHeader.vue
│ │ │ ├── AppSidebar.vue
│ │ │ └── AppFooter.vue
│ │ ├── test/
│ │ │ ├── TestCaseList.vue
│ │ │ ├── TestExecutionPanel.vue
│ │ │ └── TestResultChart.vue
│ │ └── charts/
│ │ ├── LineChart.vue
│ │ └── PieChart.vue
│ ├── composables/ # 组合式函数
│ │ ├── useWebSocket.js
│ │ └── useTable.js
│ ├── layouts/ # 布局
│ │ ├── DefaultLayout.vue
│ │ └── AuthLayout.vue
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ ├── index.js
│ │ ├── testStore.js
│ │ ├── executionStore.js
│ │ └── userStore.js
│ ├── utils/ # 工具函数
│ │ ├── request.js # 请求封装
│ │ ├── format.js # 格式化工具
│ │ └── validator.js # 验证工具
│ ├── views/ # 页面视图
│ │ ├── Dashboard.vue # 仪表盘
│ │ ├── TestCases.vue # 测试用例管理
│ │ ├── TestCaseDetail.vue # 测试用例详情
│ │ ├── TestCaseCreate.vue # 创建测试用例
│ │ ├── Executions.vue # 执行历史
│ │ ├── ExecutionDetail.vue # 执行详情
│ │ ├── Reports.vue # 测试报告
│ │ └── Login.vue # 登录页面
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── index.html
├── package.json
├── vite.config.js
└── README.md
cd frontend
1. 核心依赖
npm install vue-router@4 pinia axios
2. UI 组件库
npm install element-plus
npm install @element-plus/icons-vue
3. 工具库
npm install dayjs lodash-es
4. 开发依赖
npm install -D @types/node sass
5. 如果需要图表
npm install echarts vue-echarts
6. 如果需要 Markdown
npm install marked highlight.js