701 lines
16 KiB
Plaintext
701 lines
16 KiB
Plaintext
<template>
|
||
<div class="chat-container">
|
||
<!-- 对话区域 -->
|
||
<div class="chat-area" :class="{ 'sidebar-visible': showSidebar }">
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="search-box">
|
||
<n-input
|
||
v-model:value="searchKeyword"
|
||
placeholder="搜索对话..."
|
||
clearable
|
||
size="small"
|
||
>
|
||
<template #prefix>
|
||
<n-icon :component="SearchIcon" />
|
||
</template>
|
||
</n-input>
|
||
</div>
|
||
|
||
<!-- 话题列表 -->
|
||
<n-scrollbar class="topics-list">
|
||
<div
|
||
v-for="topic in filteredTopics"
|
||
:key="topic.id"
|
||
class="topic-item"
|
||
:class="{ active: store.state.currentTopicId === topic.id }"
|
||
@click="store.setCurrentTopic(topic.id)"
|
||
>
|
||
<div class="topic-content">
|
||
<div class="topic-header">
|
||
<span class="topic-name">{{ topic.name }}</span>
|
||
<n-dropdown
|
||
trigger="click"
|
||
:options="getTopicMenuOptions(topic)"
|
||
@select="(key) => handleTopicMenu(key, topic)"
|
||
>
|
||
<n-button text size="tiny" @click.stop>
|
||
<n-icon :component="DotsVerticalIcon" size="16" />
|
||
</n-button>
|
||
</n-dropdown>
|
||
</div>
|
||
<div class="topic-preview">{{ topic.lastMessage || '暂无消息' }}</div>
|
||
<div class="topic-meta">
|
||
<span>{{ topic.messageCount }} 条消息</span>
|
||
<span>{{ formatDate(topic.updatedAt) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="filteredTopics.length === 0" class="empty-topics">
|
||
<p>{{ searchKeyword ? '未找到匹配的对话' : '暂无对话' }}</p>
|
||
</div>
|
||
</n-scrollbar>
|
||
</div>
|
||
|
||
<!-- 对话区域 -->
|
||
<div class="chat-area">
|
||
<div v-if="!store.state.currentTopicId" class="empty-chat">
|
||
<div class="empty-icon">
|
||
<n-icon :component="MessageIcon" size="64" />
|
||
</div>
|
||
<h3>选择一个对话开始聊天</h3>
|
||
<p>或者创建一个新对话</p>
|
||
<n-button type="primary" @click="handleCreateTopic">
|
||
<template #icon>
|
||
<n-icon :component="PlusIcon" />
|
||
</template>
|
||
新建对话
|
||
</n-button>
|
||
</div>
|
||
|
||
<template v-else>
|
||
<!-- 对话头部 -->
|
||
<div class="chat-header">
|
||
<div class="header-info">
|
||
<h3>{{ store.currentTopic.value?.name }}</h3>
|
||
<span class="message-count">{{ store.state.messages.length }} 条消息</span>
|
||
</div>
|
||
<div class="header-actions">
|
||
<n-button text @click="handleClearMessages">
|
||
<n-icon :component="TrashIcon" />
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息列表 -->
|
||
<n-scrollbar class="messages-container" ref="messagesScrollRef">
|
||
<div class="messages-list">
|
||
<div
|
||
v-for="msg in store.state.messages"
|
||
:key="msg.id"
|
||
class="message-item"
|
||
:class="msg.role"
|
||
>
|
||
<div class="message-avatar">
|
||
<n-icon
|
||
:component="msg.role === 'user' ? UserIcon : RobotIcon"
|
||
size="20"
|
||
/>
|
||
</div>
|
||
<div class="message-content">
|
||
<div class="message-header">
|
||
<span class="message-role">{{
|
||
msg.role === 'user' ? '你' : 'AI 助手'
|
||
}}</span>
|
||
<span class="message-time">{{ formatTime(msg.timestamp) }}</span>
|
||
<n-tag v-if="msg.status === 'sending'" type="info" size="small">
|
||
发送中...
|
||
</n-tag>
|
||
<n-tag v-else-if="msg.status === 'error'" type="error" size="small">
|
||
发送失败
|
||
</n-tag>
|
||
</div>
|
||
<div class="message-text">
|
||
<div v-if="msg.status === 'sending'" class="typing-indicator">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<template v-else>
|
||
{{ msg.content }}
|
||
</template>
|
||
<div v-if="msg.error" class="message-error">
|
||
{{ msg.error }}
|
||
</div>
|
||
</div>
|
||
<div v-if="msg.role === 'assistant' && msg.status === 'success'" class="message-actions">
|
||
<n-button text size="tiny" @click="handleCopyMessage(msg.content)">
|
||
<n-icon :component="CopyIcon" size="14" />
|
||
复制
|
||
</n-button>
|
||
<n-button text size="tiny" @click="handleRegenerateMessage(msg.id)">
|
||
<n-icon :component="RefreshIcon" size="14" />
|
||
重新生成
|
||
</n-button>
|
||
<n-button text size="tiny" @click="handleDeleteMessage(msg.id)">
|
||
<n-icon :component="TrashIcon" size="14" />
|
||
删除
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-scrollbar>
|
||
|
||
<!-- 输入框 -->
|
||
<div class="input-container">
|
||
<n-input
|
||
v-model:value="inputText"
|
||
type="textarea"
|
||
placeholder="输入消息... (Shift + Enter 换行，Enter 发送)"
|
||
:autosize="{ minRows: 1, maxRows: 6 }"
|
||
:disabled="store.state.isSending"
|
||
@keydown.enter="handleKeyDown"
|
||
/>
|
||
<div class="input-actions">
|
||
<div class="input-info">
|
||
<span v-if="selectedModel" class="model-info">
|
||
模型: {{ selectedModel }}
|
||
</span>
|
||
</div>
|
||
<n-button
|
||
type="primary"
|
||
:disabled="!inputText.trim() || store.state.isSending"
|
||
:loading="store.state.isSending"
|
||
@click="handleSendMessage"
|
||
>
|
||
<template #icon>
|
||
<n-icon :component="SendIcon" />
|
||
</template>
|
||
发送
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 编辑话题弹窗 -->
|
||
<n-modal
|
||
v-model:show="showEditModal"
|
||
preset="card"
|
||
title="编辑对话"
|
||
style="width: 500px"
|
||
>
|
||
<n-form>
|
||
<n-form-item label="对话名称">
|
||
<n-input v-model:value="editForm.name" placeholder="请输入对话名称" />
|
||
</n-form-item>
|
||
<n-form-item label="描述">
|
||
<n-input
|
||
v-model:value="editForm.description"
|
||
type="textarea"
|
||
placeholder="可选"
|
||
:rows="3"
|
||
/>
|
||
</n-form-item>
|
||
</n-form>
|
||
<template #footer>
|
||
<div style="display: flex; justify-content: flex-end; gap: 12px">
|
||
<n-button @click="showEditModal = false">取消</n-button>
|
||
<n-button type="primary" @click="handleSaveEdit">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, nextTick, onMounted } from 'vue'
|
||
import {
|
||
NButton,
|
||
NIcon,
|
||
NInput,
|
||
NScrollbar,
|
||
NTag,
|
||
NDropdown,
|
||
NModal,
|
||
NForm,
|
||
NFormItem,
|
||
useMessage
|
||
} from 'naive-ui'
|
||
import {
|
||
Plus as PlusIcon,
|
||
Search as SearchIcon,
|
||
DotsVertical as DotsVerticalIcon,
|
||
Message as MessageIcon,
|
||
Trash as TrashIcon,
|
||
User as UserIcon,
|
||
Robot as RobotIcon,
|
||
Copy as CopyIcon,
|
||
Refresh as RefreshIcon,
|
||
Send as SendIcon
|
||
} from '@vicons/tabler'
|
||
import { useChatStore } from '../../stores/chatStore'
|
||
import type { Topic } from '../../types/chat'
|
||
|
||
const message = useMessage()
|
||
const store = useChatStore()
|
||
|
||
// 响应式数据
|
||
const searchKeyword = ref('')
|
||
const inputText = ref('')
|
||
const showEditModal = ref(false)
|
||
const editingTopic = ref<Topic | null>(null)
|
||
const editForm = ref({
|
||
name: '',
|
||
description: ''
|
||
})
|
||
const messagesScrollRef = ref()
|
||
const selectedModel = ref<string>()
|
||
|
||
// 计算属性
|
||
const filteredTopics = computed(() => {
|
||
let topics = store.state.topics
|
||
|
||
if (searchKeyword.value) {
|
||
const keyword = searchKeyword.value.toLowerCase()
|
||
topics = topics.filter(
|
||
t =>
|
||
t.name.toLowerCase().includes(keyword) ||
|
||
t.lastMessage?.toLowerCase().includes(keyword)
|
||
)
|
||
}
|
||
|
||
return topics
|
||
})
|
||
|
||
// 话题菜单选项
|
||
const getTopicMenuOptions = (topic: Topic) => [
|
||
{
|
||
label: topic.pinned ? '取消置顶' : '置顶',
|
||
key: 'pin'
|
||
},
|
||
{
|
||
label: '重命名',
|
||
key: 'rename'
|
||
},
|
||
{
|
||
label: '删除',
|
||
key: 'delete'
|
||
}
|
||
]
|
||
|
||
// 处理话题菜单
|
||
const handleTopicMenu = (key: string, topic: Topic) => {
|
||
switch (key) {
|
||
case 'pin':
|
||
store.toggleTopicPin(topic.id)
|
||
message.success(topic.pinned ? '已取消置顶' : '已置顶')
|
||
break
|
||
case 'rename':
|
||
editingTopic.value = topic
|
||
editForm.value.name = topic.name
|
||
editForm.value.description = topic.description || ''
|
||
showEditModal.value = true
|
||
break
|
||
case 'delete':
|
||
if (confirm(`确定要删除对话"${topic.name}"吗？`)) {
|
||
store.deleteTopic(topic.id)
|
||
message.success('已删除')
|
||
}
|
||
break
|
||
}
|
||
}
|
||
|
||
// 创建话题
|
||
const handleCreateTopic = () => {
|
||
const name = prompt('请输入对话名称:', '新对话')
|
||
if (name) {
|
||
store.createTopic(name.trim())
|
||
message.success('已创建')
|
||
}
|
||
}
|
||
|
||
// 保存编辑
|
||
const handleSaveEdit = () => {
|
||
if (!editingTopic.value) return
|
||
|
||
store.updateTopic(editingTopic.value.id, {
|
||
name: editForm.value.name,
|
||
description: editForm.value.description
|
||
})
|
||
|
||
showEditModal.value = false
|
||
editingTopic.value = null
|
||
message.success('已保存')
|
||
}
|
||
|
||
// 清空消息
|
||
const handleClearMessages = () => {
|
||
if (confirm('确定要清空当前对话的所有消息吗？')) {
|
||
// TODO: 实现清空消息
|
||
message.success('已清空')
|
||
}
|
||
}
|
||
|
||
// 发送消息
|
||
const handleSendMessage = async () => {
|
||
if (!inputText.value.trim() || store.state.isSending) return
|
||
|
||
const content = inputText.value.trim()
|
||
inputText.value = ''
|
||
|
||
try {
|
||
await store.sendMessageStream(content, selectedModel.value, () => {
|
||
// 滚动到底部
|
||
scrollToBottom()
|
||
})
|
||
scrollToBottom()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '发送失败')
|
||
}
|
||
}
|
||
|
||
// 键盘事件
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault()
|
||
handleSendMessage()
|
||
}
|
||
}
|
||
|
||
// 复制消息
|
||
const handleCopyMessage = (content: string) => {
|
||
navigator.clipboard
|
||
.writeText(content)
|
||
.then(() => message.success('已复制'))
|
||
.catch(() => message.error('复制失败'))
|
||
}
|
||
|
||
// 重新生成
|
||
const handleRegenerateMessage = async (messageId: string) => {
|
||
try {
|
||
await store.regenerateMessage(messageId)
|
||
message.success('正在重新生成...')
|
||
scrollToBottom()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '重新生成失败')
|
||
}
|
||
}
|
||
|
||
// 删除消息
|
||
const handleDeleteMessage = (messageId: string) => {
|
||
if (confirm('确定要删除这条消息吗？')) {
|
||
store.deleteMessage(messageId)
|
||
message.success('已删除')
|
||
}
|
||
}
|
||
|
||
// 滚动到底部
|
||
const scrollToBottom = () => {
|
||
nextTick(() => {
|
||
if (messagesScrollRef.value) {
|
||
messagesScrollRef.value.scrollTo({ top: messagesScrollRef.value.$el.scrollHeight, behavior: 'smooth' })
|
||
}
|
||
})
|
||
}
|
||
|
||
// 格式化日期
|
||
const formatDate = (date: Date): string => {
|
||
const now = new Date()
|
||
const diff = now.getTime() - new Date(date).getTime()
|
||
const mins = Math.floor(diff / 60000)
|
||
const hours = Math.floor(diff / 3600000)
|
||
const days = Math.floor(diff / 86400000)
|
||
|
||
if (mins < 1) return '刚刚'
|
||
if (mins < 60) return `${mins}分钟前`
|
||
if (hours < 24) return `${hours}小时前`
|
||
if (days < 7) return `${days}天前`
|
||
|
||
return new Date(date).toLocaleDateString('zh-CN')
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (date: Date): string => {
|
||
return new Date(date).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
store.initialize()
|
||
scrollToBottom()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chat-container {
|
||
display: flex;
|
||
height: 100%;
|
||
background: var(--color-base);
|
||
}
|
||
|
||
/* 话题侧边栏 */
|
||
.topics-sidebar {
|
||
width: 280px;
|
||
border-right: 1px solid var(--border-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--color-target-bg);
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.sidebar-header h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.search-box {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.topics-list {
|
||
flex: 1;
|
||
padding: 8px;
|
||
}
|
||
|
||
.topic-item {
|
||
padding: 12px;
|
||
margin-bottom: 4px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.topic-item:hover {
|
||
background: var(--hover-color);
|
||
}
|
||
|
||
.topic-item.active {
|
||
background: var(--primary-color-hover);
|
||
}
|
||
|
||
.topic-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.topic-name {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.topic-preview {
|
||
font-size: 12px;
|
||
color: var(--text-color-3);
|
||
margin-bottom: 4px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.topic-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
.empty-topics {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
/* 对话区域 */
|
||
.chat-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.empty-chat {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.empty-icon {
|
||
color: var(--border-color);
|
||
}
|
||
|
||
.empty-chat h3 {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.empty-chat p {
|
||
margin: 0;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
/* 对话头部 */
|
||
.chat-header {
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-info h3 {
|
||
margin: 0 0 4px 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.message-count {
|
||
font-size: 12px;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
/* 消息列表 */
|
||
.messages-container {
|
||
flex: 1;
|
||
padding: 24px;
|
||
}
|
||
|
||
.messages-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.message-item {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.message-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.message-item.assistant .message-avatar {
|
||
background: var(--success-color);
|
||
}
|
||
|
||
.message-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.message-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.message-role {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.message-time {
|
||
font-size: 12px;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
.message-text {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.message-error {
|
||
color: var(--error-color);
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.message-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.typing-indicator {
|
||
display: flex;
|
||
gap: 4px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.typing-indicator span {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
animation: typing 1.4s infinite;
|
||
}
|
||
|
||
.typing-indicator span:nth-child(2) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.typing-indicator span:nth-child(3) {
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
@keyframes typing {
|
||
0%, 60%, 100% {
|
||
opacity: 0.3;
|
||
}
|
||
30% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 输入框 */
|
||
.input-container {
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--border-color);
|
||
background: var(--color-target-bg);
|
||
}
|
||
|
||
.input-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.input-info {
|
||
font-size: 12px;
|
||
color: var(--text-color-3);
|
||
}
|
||
|
||
.model-info {
|
||
background: var(--tag-color);
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|