用户可能发送了错误信息，需要对发送的信息做一个修改，这里我们可以用编辑模式来实现。
用户信息修改
用户信息修改的方式分了好几种，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <template>
<div>
<!-- 聊天记录展示 -->
<div v-for="(message, index) in chatList" :key="index">
<div v-if="message.isEditing">
<!-- 编辑状态下显示输入框 -->
<el-input
v-model="message.content"
type="textarea"
@keyup.enter="saveEdit(index)"
@keyup.esc="cancelEdit(index)"
></el-input>
<el-button @click="saveEdit(index)">保存</el-button>
<el-button @click="cancelEdit(index)">取消</el-button>
</div>
<div v-else>
<!-- 非编辑状态下显示消息内容 -->
<span v-if="message.type === 'user'">用户: </span>
<span v-else>模型: </span>
<span>{{ message.content }}</span>
<!-- 仅用户消息可编辑 -->
<el-button v-if="message.type === 'user'" @click="startEdit(index)">编辑</el-button>
</div>
</div>
<!-- 新消息输入框 -->
<el-input
v-model="newMessage"
type="textarea"
@keyup.enter="sendMessage"
></el-input>
<el-button @click="sendMessage">发送</el-button>
</div>
</template>
<script lang="ts" setup>
const chatList = ref([
{ type: 'user', content: '你好', isEditing: false },
{ type: 'assistant', content: '你好！有什么可以帮助你的？', isEditing: false }
])
const newMessage = ref('')
// 开始编辑消息
const startEdit = (index: number) => {
chatList.value[index].isEditing = true
}
const saveEdit = (index: number) => {
chatList.value[index].isEditing = false
// 将修改后的消息发送给后端的逻辑
console.log('保存编辑后的消息:', chatList.value[index].content)
}
const cancelEdit = (index: number) => {
chatList.value[index].isEditing = false
}
// 发送新消息
const sendMessage = () => {
if (newMessage.value.trim()) {
chatList.value.push({ type: 'user', content: newMessage.value, isEditing: false })
// 模型回复
}
}
</script>
|