本节课我们将继续探讨项目详情页的第二个子页面，这也是平台的核心内容之一：
需求配置。
简单来说，需求配置是指从原始需求到生成用例的中间优化过程。它主要包括以下几个阶段：1. 功能的分割和分解；2. 优化和易于理解；3. 确定测试点。
众所周知，目前的大模型在处理超长文本的需求时表现得不够精细，甚至在处理一些图片类需求时也无法有效读取和理解。过去，提到用GPT生成测试用例，大家通常只是简单地将需求文档直接输入给GPT，让它生成用例。然而，随着时间的推移，业内的用例生成策略不断进化和迭代。如今，即便是一个需求，也需要经过多个步骤进行优化，以确保生成更优质的用例并增强人们对其过程的控制。
本教程不仅涵盖了前后端的实现和设计，还包括了解决核心问题的宝贵方案。所以，亲爱的读者们，请不要吝啬你们的赞和分享哦~
接下来，我们开始开发：
-
在
v_project/src/components文件夹内新建一个子组件：SrsSet.vue，用来存放需求配置。
-
在
ProjectDetail.vue父组件中引入这个子组件，并同样传入project的信息。
vue-admin-change-reviewer下载审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
回到
SrsSet.vue中，接收这个项目信息。这个项目信息中的id我们之后要用来发送一个接口给后台，用来传送原始需求和展示分解优化后的需求。
本节课我们先来完成这个页面的效果：
代码语言：javascript，代码运行次数：0
<template>
<!-- 需求配置步骤：1.需求分解 2.需求优化 3.人工确认 4.保存结果 -->
<br></br>
<el-card class="custom-card">
<template>
<el-button style="position: absolute;right: 10px" type="success">开始分解</el-button>
请粘贴原始需求
</template>
<el-input :rows="3" placeholder="请输入原始需求后点击右侧开始分解按钮" type="textarea"></el-input>
</el-card>
<br></br>
<el-card class="custom-card">
<template>
<el-button style="position: absolute;right: 10px" type="primary">确定保存</el-button>
分解结果:
</template>
<el-input></el-input>
<el-input></el-input>
<el-input></el-input>
</el-card>
</template>
<p>export default {
name: "SrsSet",
props: ["project"],
computed: {
name: {
get() {
return this.project.id; // 从prop获取初始值
},
}
}
}</p><p>.card-content {
margin-bottom: 5px;
}
效果如下：
本节到此结束，欢迎继续关注更新。
