求助DeepSeek帮我开发一个直线审批流程设计页面Vue2.0

之前使用文心一言协助开发过类似的页面，需求方认为某些业务表单需要添加审批流程，可以人为设置审批步骤，由于需求很模糊而且人/天有限，当时的提问很混乱，内容如下：

我的vue2.0系统中需要审批流程设计页面，所有涉及到的流程都是直线无分支，每个节点代表一个角色，通过antd vue组件实现，可以添加节点，删除节点，修改节点(名称、选择角色)，ant-design-vue版本为^1.7.8。

将这一坨汉字混合物提交给一言后，给出的代码虽然有两处低级的语法错误，但是基本上满足了我的需求，大大超过了我的预期。
上线一段时间后后，该功能得到了客户的重视，并提出一些修改意见，通过沟通我整理出一个很详尽的需求：

需求概述：需要设计一个审批流程页面，该页面中的所有流程均为直线无分支的简单逻辑。每个节点代表一个角色，vue2实现。
功能需求：
节点操作：
可以添加节点。
可以删除节点（除第一个节点外）。
可以修改节点（包括名称和关联角色），添加与修改操作均以弹窗表单的形式进行。
点击保存按钮后，修改或新增的节点将被添加到流程中。

节点特性：
第一个节点为发起人，该节点只能修改不能删除。
节点以卡片形式展示，并用箭头连接起来。

技术栈：
使用Vue2框架。
ant-design-vue版本为^1.7.8。

额外需求：
如果能通过步骤条（Stepper）组件来实现上述流程展示效果，将更为理想。

当我信心满满的将它提交给一言，发现竟然给出的是Vue3+antd1.7.8的混合体代码，而且并没有实现默认的申请人节点(第一个节点为发起人，该节点只能修改不能删除)

也就是说当我的提问变得格式化，逻辑化，给出的答案往往会丢掉一些关键点，形成一坨代码混合物。这种情况下，我不得不把需求文档重新整理成一坨汉字混合物提交，给出的答案才会是格式化，逻辑化，包含了需求关键点的。
抖音上说DeepSeek能够理解并处理复杂的语言和逻辑问题，同样的提问内容尝试了一下：

然后就是各种服务器繁忙：

离开半小时后重新提交终于给出了详细的思考过程与完整代码示例：

代码如下：

<template><div class="approval-flow"><a-button type="primary" @click="addNode" style="margin-bottom: 20px">添加节点</a-button><a-steps :current="null" direction="horizontal" class="custom-steps"><a-step v-for="(node, index) in nodes" :key="node.id"><template #title><div class="node-card"><div class="card-header"><span>{{ node.name }}</span><a-buttontype="link"@click="editNode(node)"icon="edit"v-if="index !== 0 || node.editable"/><a-buttontype="link"@click="deleteNode(node.id)"icon="delete"v-if="index !== 0"/></div><div class="card-content"><a-tag color="blue">{{ node.role }}</a-tag></div></div></template></a-step></a-steps><a-modal:title="isEdit ? '编辑节点' : '新增节点'":visible="visible"@ok="handleOk"@cancel="visible = false"><a-form-modelref="form":model="currentNode":rules="rules"layout="vertical"><a-form-model-item label="节点名称" prop="name"><a-input v-model="currentNode.name" /></a-form-model-item><a-form-model-item label="关联角色" prop="role"><a-select v-model="currentNode.role" placeholder="请选择角色"><a-select-optionv-for="role in roles":key="role.value":value="role.value">{{ role.label }}</a-select-option></a-select></a-form-model-item></a-form-model></a-modal></div>
</template><script>
let nodeId = 1;
export default {data() {return {nodes: [{id: 0,name: "发起人",role: "发起人角色",editable: true,},],visible: false,isEdit: false,currentNode: {},roles: [{ label: "部门主管", value: "manager" },{ label: "财务审核", value: "finance" },{ label: "总经理", value: "ceo" },],rules: {name: [{ required: true, message: "请输入节点名称", trigger: "blur" }],role: [{ required: true, message: "请选择关联角色", trigger: "change" }],},};},methods: {addNode() {this.currentNode = { id: nodeId++ };this.isEdit = false;this.visible = true;},editNode(node) {this.currentNode = { ...node };this.isEdit = true;this.visible = true;},deleteNode(id) {this.nodes = this.nodes.filter((node) => node.id !== id);},handleOk() {this.$refs.form.validate((valid) => {if (valid) {if (this.isEdit) {const index = this.nodes.findIndex((n) => n.id === this.currentNode.id);this.$set(this.nodes, index, this.currentNode);} else {this.nodes.push(this.currentNode);}this.visible = false;}});},},
};
</script><style scoped>
.custom-steps {padding: 20px 0;
}.node-card {border: 1px solid #e8e8e8;border-radius: 4px;padding: 16px;width: 200px;background: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}.card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;
}.card-content {text-align: center;
}/* 自定义步骤条样式 */
/deep/ .ant-steps-item-container {display: flex;align-items: center;
}/deep/ .ant-steps-item-tail {top: 30px !important;padding: 0 10px !important;
}/deep/ .ant-steps-item-icon {margin-right: 0 !important;
}/deep/ .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {padding-left: 10px;padding-right: 10px;
}
</style>

代码运行效果：

可以结合它的深度思考过程修改提问内容，使之更符合需求。