Chat/
├── AIChatView.vue           # 主聊天界面组件
├── AIChatView.scss          # 主界面样式
├── components/
│   ├── ChatDefault/         # 欢迎界面组件
│   │   ├── ChatDefault.vue
│   │   └── ChatDefault.scss
│   └── ChatHistory/         # 历史记录组件（预留）
│       ├── ChatHistory.vue
│       └── ChatHistory.scss
└── README.md                # 本文档

核心功能

1. 侧边栏功能

✅ 对话历史列表（今天/历史记录分组）
✅ 新建对话
✅ 删除对话
✅ 侧边栏收起/展开

2. 智能体系统

✅ 多智能体支持（城市生命线、应急处理、数据分析、安全检查）
✅ 智能体切换（下拉选择）
✅ 每个智能体独立的欢迎信息和建议

3. 消息交互

✅ 消息发送/接收
✅ 用户/AI 消息区分显示
✅ 打字中动画效果
✅ 消息时间显示
✅ 自动滚动到底部

4. 输入功能

✅ 多行文本输入
✅ Enter 发送（Shift+Enter 换行）
✅ 附件、表情、图片等功能按钮（UI 已实现）
✅ 发送按钮禁用状态

Mock 数据

智能体列表

[
    {
        id: 'default',
        name: '城市生命线助手',
        icon: '🏙️',
        color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        description: '我是城市生命线智能助手，专注于城市基础设施安全管理'
    },
    // ... 其他智能体
]

Mock API 响应

发送消息后，系统会在 1-2 秒后返回随机的 Mock 响应：

"根据城市生命线安全管理的相关规定，我为您分析如下..."
"这是一个很好的问题。让我详细为您解答..."
"基于您的需求，我建议采取以下措施..."
"从专业角度来看，这个问题需要综合考虑多个因素..."

样式特点

设计风格

ChatGPT 风格的侧边栏布局
现代简约的配色方案
流畅的动画效果
响应式设计

主题色

主色调：紫色 #7c3aed
背景色：灰白 #f7f7f8
边框色：浅灰 #e5e7eb
文字色：深灰 #374151

使用方式

基本使用

<template>
    <AIChatView />
</template>

<script setup>
import AIChatView from '@/views/public/Chat/AIChatView.vue'
</script>

集成到路由

{
    path: '/chat',
    name: 'Chat',
    component: () => import('@/views/public/Chat/AIChatView.vue')
}

后续接入真实 API

修改发送消息函数

在 AIChatView.vue 中找到 handleSend 函数，将 Mock 实现替换为真实 API 调用：

// 替换这部分 Mock 代码
setTimeout(async () => {
    const mockResponses = [...]
    // ...
}, 1000)

// 改为真实 API 调用
try {
    const response = await chatAPI.sendMessage({
        message: text,
        agentId: currentAgent.value.id,
        conversationId: currentConversationId.value
    })
    
    const assistantMessage: Message = {
        id: response.id,
        content: response.content,
        role: 'assistant',
        timestamp: response.timestamp
    }
    messages.value.push(assistantMessage)
} catch (error) {
    console.error('发送失败:', error)
}

加载历史对话

在 onMounted 中添加历史对话加载：

onMounted(async () => {
    try {
        const history = await chatAPI.getConversations()
        conversations.value = history
    } catch (error) {
        console.error('加载历史失败:', error)
    }
})

依赖

Vue 3
Element Plus
TypeScript

注意事项

确保已安装 Element Plus 并正确配置图标
/logo.jpg 需要存在于 public 目录
消息滚动使用了 scrollTop，需要在有高度的容器中使用
缩进使用 4 个空格（符合用户规则）

待优化功能

消息流式输出
代码块语法高亮
Markdown 渲染
消息重新生成
消息编辑
导出对话记录
附件上传功能实现
语音输入功能实现

README.md Unescape Escape

AI 聊天界面组件

功能概览

文件结构

核心功能

1. 侧边栏功能

2. 智能体系统

3. 消息交互

4. 输入功能

Mock 数据

智能体列表

Mock API 响应

样式特点

设计风格

主题色

使用方式

基本使用

集成到路由

后续接入真实 API

修改发送消息函数

加载历史对话

依赖

注意事项

待优化功能

README.md