必要性

随着对话记录的增加，根据对话名称conv_name查询对话对用户来说非常有必要实现。

实现

原来的history_chats.vue中使用了getChatList() 在onMounted时直接获取用户的所有对话记录，如果要实现查询功能，需要增加两个变量：

//查询得到的记录
const currentHistory = ref(null); // 使用 ref 创建一个响应式引用  
//所有对话
const allHistory = ref(null); // 使用 ref 创建一个响应式引用  

然后更改原有的getlist方法，将allHistory的value给chatHistory，可以保留原本的总的对话记录，同时将chatHistory作为返回的记录结果：

function getChatList() {let data = { "user_id": user_id.value };return getUserAllConversation(data).then(res => {if (res.code === 200) {allHistory.value = res.data.conversations; // 使用 .value 来更新 ref 的值  allHistory.value.reverse();allHistory.value.forEach(chat => {chat.formattedCreateTime = formatDateTime(chat.create_time); // 添加一个新字段来保存格式化后的时间  });console.log(allHistory.value);chatHistory.value=allHistory.value;return true;} else {console.log(res.msg);}}).catch(e => {console.error('获取对话列表失败:', e);});
}

在html中添加输入框和查询按钮：

    <div style="display: flex; align-items: center; margin: 20px 0;"><el-input v-model="input" style="width: 60%;height: 40px;" placeholder="请输入历史记录名称进行查询" clearable></el-input><el-button type="primary"  size="large" @click="searchChatList()" style="margin-left: 10px;">查询</el-button></div>

实现的查询函数和实现思路如下

1. 检查输入框是否为空:

   • 如果输入框为空(即 input.value.trim() 为空字符串),则调用 getChatList() 函数获取全部的聊天记录,并将其赋值给 chatHistory.value。

2. 初始化 currentHistory 变量:

   • 将 allHistory.value 的值赋给 currentHistory.value。这里 allHistory.value 存储了所有的聊天记录。

3. 根据关键词筛选聊天记录:

   • 如果输入框中有关键词 keyword1,则使用 filter 方法从 currentHistory.value 中筛选出 conv_name 属性包含该关键词的聊天记录,并将结果赋给 currentHistory.value。

4. 更新 chatHistory.value:

   • 最后,将 currentHistory.value 的值赋给 chatHistory.value。这样就完成了根据关键词搜索聊天记录的功能。

主要逻辑是:先初始化 currentHistory 为全部聊天记录，然后根据用户输入的关键词,筛选出匹配的聊天记录,并更新 currentHistory，最后将 currentHistory 的值赋给 chatHistory,以供其他地方使用。

//进行搜索，替换当前的结果
const searchChatList = () =>{if(input.value.trim()===''){//为空返回全部getChatList();return;}const keyword1 =input.value.trim()// const list = JSON.parse(localStorage.getItem('list') as string)currentHistory.value = allHistory.valueif (keyword1) {currentHistory.value = currentHistory.value.filter(item => item.conv_name.includes(keyword1));}chatHistory.value = currentHistory.value;}

最终实现效果如下：