Vue-28-利用Vue3大模型对话框设计之添加对话主题让大模型扮演不同角色

1 主要功能改进说明

1、添加主题选择列
(1)在布局左侧添加了主题选择区域theme-sidebar。
(2)定义了三个主题选项：一般对话、重要对话、特殊对话。
(3)支持点击切换主题并高亮显示当前选中项。

2、传递主题参数给后端
(1)在handleSend方法中，将currentTheme.value作为第二个参数传递给sendHistory函数。
(2)后端可以根据这个参数来选择相应的角色提示词。

3、样式调整
(1)为新添加的主题选择列添加了相应样式。
(2)调整了整体布局以适应三列结构。

这样实现后，用户可以选择不同的对话主题，前端会将选中的主题参数传递给后端，由后端根据主题选择相应的角色提示词来处理对话。

2 ChatPage.vue

2.1 模板部分(template)

(1)显示对话主题标题。
(2)通过v-for循环渲染主题列表。
(3)每个主题项可点击选择，绑定selectTheme方法。
(4)当前选中主题会添加active样式类突出显示。
(5)themes数组提供主题数据，currentTheme表示当前选中主题。
<