web iframe结构实现

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

@@ -0,0 +1,193 @@
+<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>