求助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-button
type="link"
@click="editNode(node)"
icon="edit"
v-if="index !== 0 || node.editable"
/>
<a-button
type="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-model
ref="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-option
v-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>代码运行效果：
可以结合它的深度思考过程修改提问内容，使之更符合需求。