427 lines
15 KiB
Vue
427 lines
15 KiB
Vue
<template>
|
|
<div class="chat-view">
|
|
<!-- Left Sidebar - ChatGPT Style -->
|
|
<aside class="chat-sidebar" :class="{ collapsed: sidebarCollapsed }">
|
|
<div class="sidebar-header">
|
|
<button class="collapse-toggle" @click="sidebarCollapsed = !sidebarCollapsed">
|
|
<el-icon><Fold v-if="!sidebarCollapsed" /><Expand v-else /></el-icon>
|
|
<span v-if="!sidebarCollapsed">{{ sidebarCollapsed ? '展开' : '收起' }}</span>
|
|
</button>
|
|
<button class="new-chat-btn" @click="handleNewChat">
|
|
<el-icon><Plus /></el-icon>
|
|
<span v-if="!sidebarCollapsed">新建对话</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="!sidebarCollapsed" class="conversations-list">
|
|
<div class="list-section">
|
|
<div class="section-title">今天</div>
|
|
<div
|
|
v-for="conv in todayConversations"
|
|
:key="conv.id"
|
|
class="conversation-item"
|
|
:class="{ active: currentConversationId === conv.id }"
|
|
@click="selectConversation(conv)"
|
|
>
|
|
<el-icon><ChatDotRound /></el-icon>
|
|
<span class="conv-title">{{ conv.title }}</span>
|
|
<div class="conv-actions">
|
|
<el-icon class="action-icon" @click.stop="deleteConversation(conv.id)"><Delete /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-section" v-if="olderConversations.length > 0">
|
|
<div class="section-title">历史记录</div>
|
|
<div
|
|
v-for="conv in olderConversations"
|
|
:key="conv.id"
|
|
class="conversation-item"
|
|
:class="{ active: currentConversationId === conv.id }"
|
|
@click="selectConversation(conv)"
|
|
>
|
|
<el-icon><ChatDotRound /></el-icon>
|
|
<span class="conv-title">{{ conv.title }}</span>
|
|
<div class="conv-actions">
|
|
<el-icon class="action-icon" @click.stop="deleteConversation(conv.id)"><Delete /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Chat Area -->
|
|
<div class="chat-main">
|
|
<!-- Header -->
|
|
<header class="chat-header">
|
|
<el-dropdown trigger="click" @command="handleAgentChange" class="agent-dropdown">
|
|
<div class="header-title">
|
|
<span class="agent-icon">{{ currentAgent.icon }}</span>
|
|
<span>{{ currentAgent.name }}</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="agent in agents"
|
|
:key="agent.id"
|
|
:command="agent.id"
|
|
:class="{ 'is-active': agent.id === currentAgent.id }"
|
|
>
|
|
<span class="dropdown-agent-icon">{{ agent.icon }}</span>
|
|
<span>{{ agent.name }}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</header>
|
|
|
|
<!-- Chat Content -->
|
|
<div class="chat-content" ref="chatContentRef">
|
|
<!-- Welcome Message -->
|
|
<div v-if="messages.length === 0" class="welcome-section">
|
|
<ChatDefault
|
|
:agent="currentAgent"
|
|
@suggestion-click="handleSuggestionClick"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Chat Messages -->
|
|
<div v-else class="messages-container">
|
|
<div
|
|
v-for="message in messages"
|
|
:key="message.id"
|
|
class="message"
|
|
:class="message.role"
|
|
>
|
|
<div class="message-avatar">
|
|
<img v-if="message.role === 'assistant'" src="/logo.jpg" alt="AI" class="ai-avatar-small" />
|
|
<div v-else class="user-avatar-small">👤</div>
|
|
</div>
|
|
<div class="message-content">
|
|
<div class="message-text">{{ message.content }}</div>
|
|
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading indicator -->
|
|
<div v-if="isLoading" class="message assistant">
|
|
<div class="message-avatar">
|
|
<img src="/logo.jpg" alt="AI" class="ai-avatar-small" />
|
|
</div>
|
|
<div class="message-content">
|
|
<div class="typing-indicator">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="input-area">
|
|
<div class="input-wrapper">
|
|
<textarea
|
|
v-model="inputText"
|
|
placeholder="请输入内容..."
|
|
@keydown.enter.prevent="handleSend"
|
|
:rows="1"
|
|
ref="textareaRef"
|
|
></textarea>
|
|
<div class="input-actions">
|
|
<div class="action-buttons">
|
|
<button class="action-btn" title="附件">
|
|
<el-icon><Paperclip /></el-icon>
|
|
</button>
|
|
<button class="action-btn" title="表情">
|
|
<el-icon><Star /></el-icon>
|
|
</button>
|
|
<button class="action-btn" title="图片">
|
|
<el-icon><Picture /></el-icon>
|
|
</button>
|
|
<button class="action-btn" title="更多">
|
|
<el-icon><MoreFilled /></el-icon>
|
|
</button>
|
|
<button class="action-btn" title="截图">
|
|
<el-icon><CameraFilled /></el-icon>
|
|
</button>
|
|
</div>
|
|
<div class="send-actions">
|
|
<button class="action-btn" title="语音">
|
|
<el-icon><Microphone /></el-icon>
|
|
</button>
|
|
<button class="send-btn" @click="handleSend" :disabled="!inputText.trim()">
|
|
<el-icon><Promotion /></el-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, nextTick, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import {
|
|
ChevronDown as ArrowDown,
|
|
Paperclip,
|
|
Star,
|
|
Image as Picture,
|
|
MoreHorizontal as MoreFilled,
|
|
Camera as CameraFilled,
|
|
Mic as Microphone,
|
|
Send as Promotion,
|
|
Plus,
|
|
PanelLeftClose as Fold,
|
|
PanelLeftOpen as Expand,
|
|
MessageCircle as ChatDotRound,
|
|
Trash2 as Delete
|
|
} from 'lucide-vue-next'
|
|
import ChatDefault from './components/ChatDefault/ChatDefault.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
// Mock 数据 - 智能体列表
|
|
const agents = ref([
|
|
{
|
|
id: 'default',
|
|
name: '城市生命线助手',
|
|
icon: '🏙️',
|
|
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
description: '我是城市生命线智能助手，专注于城市基础设施安全管理'
|
|
},
|
|
{
|
|
id: 'emergency',
|
|
name: '应急处理助手',
|
|
icon: '🚨',
|
|
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
|
description: '专注于应急事件处理和预案制定'
|
|
},
|
|
{
|
|
id: 'analysis',
|
|
name: '数据分析助手',
|
|
icon: '📊',
|
|
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
|
description: '提供数据分析和可视化服务'
|
|
},
|
|
{
|
|
id: 'safety',
|
|
name: '安全检查助手',
|
|
icon: '🔍',
|
|
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
|
description: '协助进行安全隐患排查和整改'
|
|
}
|
|
])
|
|
|
|
const currentAgent = ref(agents.value[0])
|
|
|
|
// 状态管理
|
|
const sidebarCollapsed = ref(false)
|
|
const currentConversationId = ref<number | null>(null)
|
|
const inputText = ref('')
|
|
const isLoading = ref(false)
|
|
const chatContentRef = ref<HTMLElement | null>(null)
|
|
const textareaRef = ref<HTMLTextAreaElement | null>(null)
|
|
|
|
// Mock 数据 - 对话历史
|
|
interface Conversation {
|
|
id: number
|
|
title: string
|
|
date: Date
|
|
messages: Message[]
|
|
}
|
|
|
|
interface Message {
|
|
id: string
|
|
content: string
|
|
role: 'user' | 'assistant'
|
|
timestamp: string
|
|
}
|
|
|
|
const conversations = ref<Conversation[]>([
|
|
{
|
|
id: 1,
|
|
title: '城市生命线关键设施咨询',
|
|
date: new Date(),
|
|
messages: []
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '消防安全隐患处理方案',
|
|
date: new Date(),
|
|
messages: []
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '排水系统优化建议',
|
|
date: new Date(Date.now() - 86400000),
|
|
messages: []
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '应急预案讨论',
|
|
date: new Date(Date.now() - 172800000),
|
|
messages: []
|
|
}
|
|
])
|
|
|
|
const messages = ref<Message[]>([])
|
|
|
|
// 今天的对话
|
|
const todayConversations = computed(() => {
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
return conversations.value.filter(conv => new Date(conv.date) >= today)
|
|
})
|
|
|
|
// 历史对话
|
|
const olderConversations = computed(() => {
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
return conversations.value.filter(conv => new Date(conv.date) < today)
|
|
})
|
|
|
|
// 格式化时间
|
|
const formatTime = (timestamp: string) => {
|
|
if (!timestamp) return ''
|
|
const date = new Date(timestamp)
|
|
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
|
|
// 滚动到底部
|
|
const scrollToBottom = async () => {
|
|
await nextTick()
|
|
if (chatContentRef.value) {
|
|
chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight
|
|
}
|
|
}
|
|
|
|
// 新建对话
|
|
const handleNewChat = () => {
|
|
const newConv: Conversation = {
|
|
id: Date.now(),
|
|
title: '新对话',
|
|
date: new Date(),
|
|
messages: []
|
|
}
|
|
conversations.value.unshift(newConv)
|
|
currentConversationId.value = newConv.id
|
|
messages.value = []
|
|
}
|
|
|
|
// 选择对话
|
|
const selectConversation = (conv: Conversation) => {
|
|
currentConversationId.value = conv.id
|
|
messages.value = conv.messages || []
|
|
scrollToBottom()
|
|
}
|
|
|
|
// 删除对话
|
|
const deleteConversation = (id: number) => {
|
|
const index = conversations.value.findIndex(c => c.id === id)
|
|
if (index > -1) {
|
|
conversations.value.splice(index, 1)
|
|
if (currentConversationId.value === id) {
|
|
currentConversationId.value = null
|
|
messages.value = []
|
|
}
|
|
}
|
|
}
|
|
|
|
// 切换智能体
|
|
const handleAgentChange = (agentId: string) => {
|
|
const agent = agents.value.find(a => a.id === agentId)
|
|
if (agent) {
|
|
currentAgent.value = agent
|
|
// 切换智能体时清空对话
|
|
messages.value = []
|
|
currentConversationId.value = null
|
|
}
|
|
}
|
|
|
|
// 处理建议点击
|
|
const handleSuggestionClick = async (suggestion: string) => {
|
|
inputText.value = suggestion
|
|
await handleSend()
|
|
}
|
|
|
|
// 发送消息 - Mock 实现
|
|
const handleSend = async () => {
|
|
const text = inputText.value.trim()
|
|
if (!text || isLoading.value) return
|
|
|
|
// 添加用户消息
|
|
const userMessage: Message = {
|
|
id: Date.now().toString(),
|
|
content: text,
|
|
role: 'user',
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
messages.value.push(userMessage)
|
|
inputText.value = ''
|
|
|
|
await scrollToBottom()
|
|
|
|
// 显示加载状态
|
|
isLoading.value = true
|
|
|
|
// Mock API 响应
|
|
setTimeout(async () => {
|
|
const mockResponses = [
|
|
'根据城市生命线安全管理的相关规定，我为您分析如下...',
|
|
'这是一个很好的问题。让我详细为您解答...',
|
|
'基于您的需求，我建议采取以下措施...',
|
|
'从专业角度来看，这个问题需要综合考虑多个因素...'
|
|
]
|
|
|
|
const assistantMessage: Message = {
|
|
id: Date.now().toString() + '_ai',
|
|
content: mockResponses[Math.floor(Math.random() * mockResponses.length)],
|
|
role: 'assistant',
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
messages.value.push(assistantMessage)
|
|
|
|
// 保存到当前对话
|
|
if (currentConversationId.value) {
|
|
const conv = conversations.value.find(c => c.id === currentConversationId.value)
|
|
if (conv) {
|
|
conv.messages = messages.value
|
|
// 更新对话标题（取第一条用户消息）
|
|
if (conv.title === '新对话' && messages.value.length > 0) {
|
|
const firstUserMsg = messages.value.find(m => m.role === 'user')
|
|
if (firstUserMsg) {
|
|
conv.title = firstUserMsg.content.slice(0, 20) + (firstUserMsg.content.length > 20 ? '...' : '')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
isLoading.value = false
|
|
await scrollToBottom()
|
|
}, 1000 + Math.random() * 1000) // 随机延迟 1-2 秒
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 从 URL 参数读取 agentId
|
|
const agentId = route.query.agentId as string
|
|
if (agentId) {
|
|
const agent = agents.value.find(a => a.id === agentId)
|
|
if (agent) {
|
|
currentAgent.value = agent
|
|
console.log('[AI Chat] 已切换到智能体:', agent.name)
|
|
}
|
|
}
|
|
|
|
console.log('AI Chat View mounted')
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import url('./AIChatView.scss');
|
|
</style> |