feat(portal): 实现AI对话窗口最小化功能

- 新增窗口最小化与最大化切换功能
- 调整对话框结构支持两种显示状态
-优化消息建议显示条件判断
- 修改API地址为本地开发环境地址- 更新错误提示文案提升用户体验
- 移除旧版AI入口相关逻辑和样式
- 引入新的AICaseConsult组件替换原有实现
- 修复消息列表为空时的默认展示逻辑
- 添加getLastUserMessage方法提取纯文本内容- 优化窗口控制按钮样式和交互逻辑
This commit is contained in:
陈昱达
2025-09-28 16:39:55 +08:00
parent e3422d15ee
commit a3dab45af0
4 changed files with 181 additions and 99 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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);
});