web iframe结构实现
This commit is contained in:
@@ -0,0 +1,247 @@
|
||||
.ai-chat-system {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: #f5f7fa;
|
||||
|
||||
// 左侧边栏
|
||||
.chat-sidebar {
|
||||
width: 200px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 12px 8px;
|
||||
|
||||
.nav-item.new-chat {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #f5f7fa;
|
||||
|
||||
.chat-header {
|
||||
padding: 24px 32px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
margin: 24px 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.ai-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.ai-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.ai-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ai-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ai-status {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #67c23a;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: #f5f7fa;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.user {
|
||||
justify-content: flex-end;
|
||||
|
||||
.message-content {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 60%;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #c0c4cc;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
background: #fff;
|
||||
|
||||
.quick-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
|
||||
.attach-icon {
|
||||
font-size: 20px;
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,61 @@
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 8px;
|
||||
|
||||
.history-title {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.history-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.history-name {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="chat-history">
|
||||
<div class="history-title">历史对话</div>
|
||||
<div class="history-list">
|
||||
<div
|
||||
v-for="chat in chatHistory"
|
||||
:key="chat.id"
|
||||
class="history-item"
|
||||
:class="{ active: currentChatId === chat.id }"
|
||||
@click="handleLoadChat(chat.id)"
|
||||
>
|
||||
<ElIcon><ChatLineRound /></ElIcon>
|
||||
<div class="history-info">
|
||||
<div class="history-name">{{ chat.title }}</div>
|
||||
<div class="history-time">{{ chat.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElIcon } from 'element-plus';
|
||||
import { ChatLineRound } from '@element-plus/icons-vue';
|
||||
|
||||
interface ChatItem {
|
||||
id: number;
|
||||
title: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
chatHistory: ChatItem[];
|
||||
currentChatId: number;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'loadChat', chatId: number): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const handleLoadChat = (chatId: number) => {
|
||||
emit('loadChat', chatId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url("./ChatHistory.scss");
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-box">
|
||||
<h1>工单管理系统</h1>
|
||||
<p>请先登录主系统</p>
|
||||
<el-button type="primary" @click="goToMainSystem">
|
||||
前往主系统登录
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const goToMainSystem = () => {
|
||||
window.location.href = 'http://localhost:5002'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background: white;
|
||||
padding: 48px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box h1 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.login-box p {
|
||||
margin-bottom: 24px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user