221 lines
7.9 KiB
Vue
221 lines
7.9 KiB
Vue
<template>
|
||
<AdminLayout title="智能体管理" info="配置和管理AI智能客服">
|
||
<div class="agent-container">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>AI客服配置</span>
|
||
<el-button type="primary" size="small" @click="saveConfig">保存配置</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<el-form :model="agentConfig" label-width="150px">
|
||
<el-form-item label="智能体名称">
|
||
<el-input v-model="agentConfig.name" placeholder="请输入智能体名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="AI模型">
|
||
<el-select v-model="agentConfig.model" style="width: 100%;">
|
||
<el-option label="GPT-4" value="gpt-4" />
|
||
<el-option label="Claude-3" value="claude-3" />
|
||
<el-option label="文心一言" value="ernie" />
|
||
<el-option label="本地模型" value="local" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="温度(Temperature)">
|
||
<el-slider v-model="agentConfig.temperature" :min="0" :max="1" :step="0.1" show-stops />
|
||
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.temperature }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="最大令牌数">
|
||
<el-input-number v-model="agentConfig.maxTokens" :min="100" :max="4000" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="系统提示词">
|
||
<el-input v-model="agentConfig.systemPrompt" type="textarea" :rows="4" placeholder="输入系统提示词，用于指导AI的行为" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="启用知识库">
|
||
<el-switch v-model="agentConfig.enableKnowledge" />
|
||
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableKnowledge ? '已启用' : '未启用' }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="启用情感分析">
|
||
<el-switch v-model="agentConfig.enableSentiment" />
|
||
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableSentiment ? '已启用' : '未启用' }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="启用自动转工单">
|
||
<el-switch v-model="agentConfig.enableAutoTicket" />
|
||
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableAutoTicket ? '已启用' : '未启用' }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="响应超时(秒)">
|
||
<el-input-number v-model="agentConfig.timeout" :min="5" :max="60" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="日志级别">
|
||
<el-select v-model="agentConfig.logLevel" style="width: 100%;">
|
||
<el-option label="DEBUG" value="debug" />
|
||
<el-option label="INFO" value="info" />
|
||
<el-option label="WARN" value="warn" />
|
||
<el-option label="ERROR" value="error" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- 测试区域 -->
|
||
<el-card style="margin-top: 16px;">
|
||
<template #header>
|
||
<span>测试智能体</span>
|
||
</template>
|
||
|
||
<div class="test-section">
|
||
<el-input v-model="testMessage" type="textarea" :rows="3" placeholder="输入测试消息..." style="margin-bottom: 12px;" />
|
||
<el-button type="primary" @click="testAgent">发送测试</el-button>
|
||
|
||
<div v-if="testResponse" class="test-response">
|
||
<h4>AI响应:</h4>
|
||
<p>{{ testResponse }}</p>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 性能统计 -->
|
||
<el-card style="margin-top: 16px;">
|
||
<template #header>
|
||
<span>性能统计</span>
|
||
</template>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<div class="stat-box">
|
||
<div class="stat-value">{{ stats.totalChats }}</div>
|
||
<div class="stat-label">总对话数</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="stat-box">
|
||
<div class="stat-value">{{ stats.avgResponseTime }}ms</div>
|
||
<div class="stat-label">平均响应时间</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="stat-box">
|
||
<div class="stat-value">{{ stats.satisfaction }}</div>
|
||
<div class="stat-label">平均满意度</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="stat-box">
|
||
<div class="stat-value">{{ stats.uptime }}%</div>
|
||
<div class="stat-label">系统可用性</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</AdminLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import AdminLayout from '@/views/admin/AdminLayout.vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const agentConfig = ref({
|
||
name: '泰豪小电智能客服',
|
||
model: 'gpt-4',
|
||
temperature: 0.7,
|
||
maxTokens: 2000,
|
||
systemPrompt: '你是一个专业的客服助手，代表泰豪小电公司。你需要帮助客户解决设备相关的问题，提供友好、专业的服务。如果问题超出你的能力范围，请建议转接给人工客服。',
|
||
enableKnowledge: true,
|
||
enableSentiment: true,
|
||
enableAutoTicket: true,
|
||
timeout: 30,
|
||
logLevel: 'info'
|
||
})
|
||
|
||
const testMessage = ref('')
|
||
const testResponse = ref('')
|
||
|
||
const stats = ref({
|
||
totalChats: 1258,
|
||
avgResponseTime: 1250,
|
||
satisfaction: 4.5,
|
||
uptime: 99.8
|
||
})
|
||
|
||
const saveConfig = () => {
|
||
ElMessage.success('配置保存成功')
|
||
}
|
||
|
||
const testAgent = () => {
|
||
if (!testMessage.value.trim()) {
|
||
ElMessage.warning('请输入测试消息')
|
||
return
|
||
}
|
||
testResponse.value = '感谢您的咨询。我已收到您的问题，正在为您处理。如果您的问题涉及设备故障，我可以帮您创建一个工单，由我们的技术团队为您服务。'
|
||
ElMessage.success('测试消息已发送')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import url("./AgentView.scss");
|
||
|
||
.agent-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.test-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.test-response {
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #409eff;
|
||
}
|
||
|
||
.test-response h4 {
|
||
margin: 0 0 8px 0;
|
||
color: #303133;
|
||
}
|
||
|
||
.test-response p {
|
||
margin: 0;
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.stat-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #409eff;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
</style> |