urbanLifeline/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue

<template>
    <div class="ai-chat-system">
        <!-- 左右布局 -->
        <!-- 左侧边栏 -->
        <aside class="chat-sidebar">
            <!-- 标头 -->
            <div class="sidebar-header">
                <h1>智能客服系统</h1>
            </div>

            <!-- 新增对话按钮 -->
            <div class="nav-section">
                <div class="nav-item new-chat" @click="startNewChat">
                    <ElIcon><Plus /></ElIcon>
                    <span>新建对话</span>
                </div>
            </div>

            <!-- 历史对话列表 -->
            <ChatHistory 
                :chatHistory="chatHistory" 
                :currentChatId="currentChatId"
                @loadChat="loadChat"
            />

            <div class="sidebar-footer">
                v2.1.0 (Build 2025)
            </div>
        </aside>

        <!-- 主内容区 -->
        <div class="chat-main">
            <!-- header -->
            <div class="chat-header">
                <h1>泰豪小电-对内</h1>
                <p class="subtitle">Real-time Support Agent</p>
            </div>

            <!-- 聊天区域 -->
            <div class="chat-area">
                <!-- 智能体信息  助手 -->
                <div class="ai-info">
                    <div class="ai-avatar">🤖</div>
                    <div class="ai-details">
                        <div class="ai-name">泰豪智能服务助手</div>
                        <div class="ai-status">
                            <span class="status-dot"></span>
                            基于 RAG 知识库 · 24小时在线
                        </div>
                    </div>
                </div>

                <!-- 聊天记录 -->
                <div class="messages" ref="messagesRef">
                    <div 
                        v-for="msg in messages" 
                        :key="msg.id" 
                        class="message" 
                        :class="msg.role"
                    >
                        <div class="message-content">
                            <div class="message-text">{{ msg.text }}</div>
                            <div class="message-time">{{ msg.time }}</div>
                        </div>
                    </div>
                </div>

                <!-- footer -->
                <!-- 默认提示词 -->
                <div class="quick-actions">
                    <button class="quick-btn" @click="quickReply('设备操作手册')">
                        <ElIcon><Document /></ElIcon>
                        设备操作手册
                    </button>
                    <button class="quick-btn" @click="quickReply('故障排查指南')">
                        <ElIcon><Warning /></ElIcon>
                        故障排查指南
                    </button>
                    <button class="quick-btn" @click="quickReply('维保服务规范')">
                        <ElIcon><List /></ElIcon>
                        维保服务规范
                    </button>
                    <button class="quick-btn" @click="quickReply('技术参数查询')">
                        <ElIcon><Search /></ElIcon>
                        技术参数查询
                    </button>
                </div>

                <!-- 输入框 -->
                <div class="input-area">
                    <ElIcon class="attach-icon"><Paperclip /></ElIcon>
                    <ElInput
                        v-model="inputText"
                        placeholder="描述您的问题 (如: 发电机启动失败异常)..."
                        @keyup.enter="sendMessage"
                    />
                    <ElButton type="primary" :icon="Promotion" circle @click="sendMessage" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElInput, ElIcon } from 'element-plus';
import { 
    Plus, 
    Document, 
    Warning, 
    List, 
    Search, 
    Paperclip, 
    Promotion 
} from '@element-plus/icons-vue';
import ChatHistory from './components/ChatHistory.vue';

// 当前选中的对话ID
const currentChatId = ref(1);

// 历史对话列表
const chatHistory = ref([
    { id: 1, title: '发电机故障咨询', time: '今天 10:30' },
    { id: 2, title: '设备维保规范查询', time: '今天 09:15' },
    { id: 3, title: '配件更换流程', time: '昨天 16:42' },
    { id: 4, title: 'TH-500GF参数查询', time: '昨天 14:20' },
    { id: 5, title: '巡检报告模板', time: '12月10日' },
    { id: 6, title: '客户投诉处理流程', time: '12月09日' }
]);

// 聊天消息列表
const messages = ref([
    { id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
]);

// 输入框文本
const inputText = ref('');

// 消息容器引用
const messagesRef = ref<HTMLElement | null>(null);

// 开始新对话
const startNewChat = () => {
    const newId = Date.now();
    chatHistory.value.unshift({
        id: newId,
        title: '新对话',
        time: '刚刚'
    });
    currentChatId.value = newId;
    messages.value = [
        { 
            id: 1, 
            role: 'assistant', 
            text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', 
            time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) 
        }
    ];
};

// 加载历史对话
const loadChat = (chatId: number) => {
    currentChatId.value = chatId;
    // 模拟加载历史对话
    messages.value = [
        { id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
    ];
};

// 发送消息
const sendMessage = () => {
    if (!inputText.value.trim()) return;
    
    messages.value.push({
        id: Date.now(),
        role: 'user',
        text: inputText.value,
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    });
    
    inputText.value = '';
};

// 快捷回复
const quickReply = (text: string) => {
    inputText.value = text;
    sendMessage();
};
</script>

<style scoped lang="scss">
@import url("./AIChatView.scss");
</style>