mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 20:06:44 +08:00
feat(portal): 实现AI对话窗口最小化功能
- 新增窗口最小化与最大化切换功能 - 调整对话框结构支持两种显示状态 -优化消息建议显示条件判断 - 修改API地址为本地开发环境地址- 更新错误提示文案提升用户体验 - 移除旧版AI入口相关逻辑和样式 - 引入新的AICaseConsult组件替换原有实现 - 修复消息列表为空时的默认展示逻辑 - 添加getLastUserMessage方法提取纯文本内容- 优化窗口控制按钮样式和交互逻辑
This commit is contained in:
@@ -1,16 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 最大化状态的弹窗 -->
|
||||
<el-dialog
|
||||
:visible="dialogVisible"
|
||||
width="600px"
|
||||
v-if="dialogVisible"
|
||||
:visible="true"
|
||||
width="800px"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="true"
|
||||
@close="onClose"
|
||||
class="case-expert-dialog"
|
||||
:modal="false"
|
||||
:append-to-body="true"
|
||||
:fullscreen="false"
|
||||
top="10vh"
|
||||
v-show="windowState === 'maximized'"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<div slot="title" class="dialog-title">
|
||||
<!-- <img src="@/assets/images/case-expert-icon.png" alt="案例专家" class="icon" /> -->
|
||||
<span>案例专家</span>
|
||||
<el-button
|
||||
type="text"
|
||||
class="window-control-btn"
|
||||
@click="minimizeWindow"
|
||||
>
|
||||
<i class="el-icon-minus"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
@@ -22,9 +36,8 @@
|
||||
>
|
||||
<div class="message-text" v-for="(item, index) in messageList" :key="index">
|
||||
<messages :messageData="item" :suggestions="suggestions"></messages>
|
||||
|
||||
</div>
|
||||
<div class="message-suggestions" v-if="messageList[messageList.length-1].textCompleted">
|
||||
<div class="message-suggestions" v-if="messageList.length > 0 && messageList[messageList.length-1].textCompleted">
|
||||
<div class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
|
||||
<a @click="sendSuggestions(item)"> {{ item }} →</a>
|
||||
</div>
|
||||
@@ -52,9 +65,35 @@
|
||||
ref="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 关闭按钮在右上角,由 el-dialog 自动处理 -->
|
||||
</el-dialog>
|
||||
|
||||
<!-- 最小化状态的弹窗 -->
|
||||
<div
|
||||
v-if="dialogVisible"
|
||||
class="minimized-window"
|
||||
v-show="windowState === 'minimized'"
|
||||
@click="maximizeWindow"
|
||||
>
|
||||
<div class="minimized-content">
|
||||
<span class="window-title">案例专家</span>
|
||||
<el-button
|
||||
type="text"
|
||||
class="window-control-btn"
|
||||
@click.stop="maximizeWindow"
|
||||
>
|
||||
<i class="el-icon-full-screen"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="minimized-message">
|
||||
<div v-if="messageList.length <= 1 && messageList[0].isBot">
|
||||
当前暂无对话内容,去创建对话吧
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ getLastUserMessage() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -77,6 +116,7 @@ export default {
|
||||
return {
|
||||
AIContent: '',
|
||||
isLoading: false,
|
||||
windowState: 'maximized', // 'maximized' 或 'minimized'
|
||||
messageList: [
|
||||
{
|
||||
typing:true,
|
||||
@@ -92,6 +132,12 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dialogVisible(newVal) {
|
||||
if (newVal) {
|
||||
// 每次打开时默认最大化
|
||||
this.windowState = 'maximized';
|
||||
}
|
||||
},
|
||||
messageList: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
@@ -108,6 +154,27 @@ export default {
|
||||
// 可以在这里执行其他逻辑
|
||||
},
|
||||
|
||||
minimizeWindow() {
|
||||
this.windowState = 'minimized';
|
||||
},
|
||||
|
||||
maximizeWindow() {
|
||||
this.windowState = 'maximized';
|
||||
},
|
||||
|
||||
getLastUserMessage() {
|
||||
// 从后往前找用户消息
|
||||
for (let i = this.messageList.length - 1; i >= 0; i--) {
|
||||
if (!this.messageList[i].isBot) {
|
||||
// 移除HTML标签只返回纯文本
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = this.messageList[i].text;
|
||||
return tempDiv.textContent || tempDiv.innerText || '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
// 处理加载状态
|
||||
handleLoading(status) {
|
||||
this.isLoading = status;
|
||||
@@ -170,6 +237,8 @@ export default {
|
||||
::v-deep .el-dialog{
|
||||
background: url("./components/u762.svg") no-repeat ;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
//background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
@@ -185,15 +254,23 @@ export default {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
padding-right: 20px;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.window-control-btn {
|
||||
font-size: 18px;
|
||||
padding: 5px 10px;
|
||||
color: #000000; /* 黑色图标 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -310,4 +387,45 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-window {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 300px;
|
||||
background: url("./components/u762.svg") no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 2000;
|
||||
cursor: pointer;
|
||||
|
||||
.minimized-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.window-title {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.window-control-btn {
|
||||
font-size: 16px;
|
||||
padding: 3px 8px;
|
||||
color: #000000; /* 黑色图标 */
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-message {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -310,10 +310,7 @@
|
||||
<div class="xcontent2-minor">
|
||||
|
||||
<div id="fixd-box">
|
||||
<div class="AI-case" style="position: relative" v-if="showAiCase " @click="getAICase">
|
||||
<img src="../../../../public/images/case-logo.png" alt="">
|
||||
<span @click="getAICase" style="position: absolute; top: 65px;left: 15px;z-index: 1;width: 40%;height: 30px;"></span>
|
||||
</div>
|
||||
<AICaseConsult />
|
||||
<router-link class="the_charts" to="/case/charts">
|
||||
<div class="text">排行榜</div>
|
||||
<div class="icon">></div>
|
||||
@@ -480,7 +477,7 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<AICall :dialogVisible="showAICall" @close="onClose" />
|
||||
<!-- <AICall :dialogVisible="showAICall" @close="onClose" />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -501,8 +498,7 @@ import apiType from "@/api/modules/type.js";
|
||||
import { cutFullName } from "@/utils/tools.js";
|
||||
import apiPlace from "@/api/phase2/place.js"
|
||||
import AICall from '@/views/portal/case/AICall.vue'
|
||||
import { showCaseAiEntrance } from '@/api/boe/aiChat.js'
|
||||
|
||||
import AICaseConsult from '@/views/portal/case/components/AICaseConsult.vue'
|
||||
export default {
|
||||
name: "case",
|
||||
components: {
|
||||
@@ -512,12 +508,12 @@ export default {
|
||||
interactBar,
|
||||
timeShow,
|
||||
author,
|
||||
AICall
|
||||
AICall,
|
||||
AICaseConsult
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAiCase:false,
|
||||
showAICall:false,
|
||||
|
||||
timeoutId: null,
|
||||
isTimeData: false,
|
||||
articlePageList: [],
|
||||
@@ -790,7 +786,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
let $this = this;
|
||||
this.getShowAiCase()
|
||||
// if(this.speciData.length==0){
|
||||
// this.specialized();
|
||||
// }
|
||||
@@ -876,13 +871,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 是否展示入口
|
||||
getShowAiCase(){
|
||||
showCaseAiEntrance().then(res=>{
|
||||
this.showAiCase = res.data
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
allRequests() {
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
@@ -1904,12 +1892,7 @@ export default {
|
||||
this.$router.push(`/case/detail?id=${item.id}`);
|
||||
},
|
||||
// 案例立即咨询
|
||||
getAICase() {
|
||||
this.showAICall = true
|
||||
},
|
||||
onClose() {
|
||||
this.showAICall = false
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -2884,22 +2867,4 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.AI-case {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 105px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -90,7 +90,6 @@ export default {
|
||||
|
||||
<template>
|
||||
<div class="messages">
|
||||
{{messageData}}
|
||||
<!-- 机器人消息-->
|
||||
<div v-if="messageData.isBot" class="bot-message">
|
||||
<div class="bot-think" v-if="messageData.thinkText" v-html="messageData.thinkText"></div>
|
||||
|
||||
@@ -93,7 +93,7 @@ export default {
|
||||
};
|
||||
|
||||
// 创建POST请求
|
||||
fetch('/systemapi/xboe/m/boe/case/ai/chat',{
|
||||
fetch('http://192.168.3.178:9091/xboe/m/boe/case/ai/chat',{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -310,7 +310,7 @@ export default {
|
||||
}
|
||||
aiMessage.textCompleted = true;
|
||||
this.$emit('loading', false);
|
||||
aiMessage.text = '抱歉,网络连接出现问题,请稍后重试。';
|
||||
aiMessage.text = '当前无法获取回答,请稍后重试';
|
||||
// 更新父组件的messageList
|
||||
this.$emit('update-message', aiMessage);
|
||||
});
|
||||
@@ -323,7 +323,7 @@ export default {
|
||||
// 出错时也设置文字处理完成状态
|
||||
aiMessage.textCompleted = true;
|
||||
this.$emit('loading', false);
|
||||
aiMessage.text = '抱歉,网络连接出现问题,请稍后重试。';
|
||||
aiMessage.text = '当前无法获取回答,请稍后重试';
|
||||
// 更新父组件的messageList
|
||||
this.$emit('update-message', aiMessage);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user