Vue-30-利用Vue3大模型对话框设计之切换主题时显示对应的session列表
文章目录
- 1 功能说明
- 2 stores/chat.js
-
- 2.1 主题相关
-
- 2.1.1 当前主题和对应的会话记录
- 2.1.2 切换主题
- 2.1.3 当前主题的会话列表
- 2.2 会话相关
-
- 2.2.1 创建新会话
- 2.2.2 删除会话
- 2.2.3 当前主题下的会话
- 2.3 整体代码
- 3 ChatPage.vue
1 功能说明
之前的实现中,所有主题共享同一个会话列表,我们需要为每个主题维护独立的会话记录。
需要修改 stores/chat.js 和 ChatPage.vue 来支持按主题存储和显示会话记录。
1、在chat store中:
(1)增加了currentTheme状态来跟踪当前主题。
(2)使用themeSessions对象为每个主题维护独立的会话列表。
(3)添加了switchTheme方法来处理主题切换逻辑。
(4)修改了sessions为计算属性,返回当前主题的会话列表。
(5)所有操作会话的方法都修改为操作当前主题的会话。
2、在ChatPage.vue中:
(1)修改selectTheme方法,调用chatStore.switchTheme(theme)而不是清空会话列表。
(2)保留了其他功能不变。
现在,当用户在不同主题之间切换时,每个主题都会保留自己的会话记录,实现了按主题隔离会话的功能。