mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-08 02:16:43 +08:00
feat(portal): 添加AI Call最小化窗口控制功能
- 在app store中新增showAICallMinimized状态用于控制AI Call最小化窗口显示 - 添加对应的mutation和action用于更新最小化窗口显示状态 - 在AICall.vue组件中实现最小化窗口的条件显示逻辑 - 修改case消息组件中的链接跳转方式为路由跳转 - 更新AI聊天接口的请求地址为统一网关路径 - 在App.vue中添加路由监听,根据路由动态控制AI Call窗口显示状态- 实现case和caseDetail路由下显示AI Call最小化窗口的逻辑
This commit is contained in:
26
src/App.vue
26
src/App.vue
@@ -23,12 +23,27 @@
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
...mapState('app', ['showAICall'])
|
||||
...mapState('app', ['showAICall', 'showAICallMinimized'])
|
||||
},
|
||||
methods: {
|
||||
onCloseAICall() {
|
||||
// 通过Vuex关闭AI Call组件
|
||||
this.$store.dispatch('app/setShowAICall', false);
|
||||
},
|
||||
|
||||
// 检查当前路由是否应该显示AI弹窗
|
||||
checkRouteForAICall() {
|
||||
const currentRoute = this.$route.name;
|
||||
// 只在case或caseDetail路由显示弹窗
|
||||
if (currentRoute === 'case' || currentRoute === 'caseDetail') {
|
||||
// 设置最小化窗口显示状态为true
|
||||
this.$store.dispatch('app/setShowAICallMinimized', true);
|
||||
} else {
|
||||
// 其他路由关闭弹窗
|
||||
this.$store.dispatch('app/setShowAICall', false);
|
||||
// 设置最小化窗口显示状态为false
|
||||
this.$store.dispatch('app/setShowAICallMinimized', false);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -37,7 +52,16 @@
|
||||
// if(this.userInfo && this.userInfo.name!=''){
|
||||
// this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
|
||||
// }
|
||||
|
||||
// 初始化检查路由
|
||||
this.checkRouteForAICall();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化
|
||||
$route(to, from) {
|
||||
this.checkRouteForAICall();
|
||||
}
|
||||
}
|
||||
// watch:{
|
||||
// userInfo(newVal,oldVal){
|
||||
// if(newVal && newVal.name!=''){
|
||||
|
||||
@@ -9,7 +9,9 @@ const state = {
|
||||
device: 'desktop',//默认是桌面,以后会有android,ios,minapp
|
||||
size: Cookies.get('size') || 'medium', //字段大小
|
||||
// 添加AI Call组件显示控制状态
|
||||
showAICall: false
|
||||
showAICall: false,
|
||||
// 控制AI Call最小化窗口在特定路由下显示的状态
|
||||
showAICallMinimized: false
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
@@ -40,6 +42,10 @@ const mutations = {
|
||||
// 添加控制AI Call组件显示的mutation
|
||||
SET_SHOW_AI_CALL: (state, show) => {
|
||||
state.showAICall = show
|
||||
},
|
||||
// 控制AI Call最小化窗口显示的mutation
|
||||
SET_SHOW_AI_CALL_MINIMIZED: (state, show) => {
|
||||
state.showAICallMinimized = show
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,6 +65,10 @@ const actions = {
|
||||
// 添加控制AI Call组件显示的action
|
||||
setShowAICall({ commit }, show) {
|
||||
commit('SET_SHOW_AI_CALL', show)
|
||||
},
|
||||
// 控制AI Call最小化窗口显示的action
|
||||
setShowAICallMinimized({ commit }, show) {
|
||||
commit('SET_SHOW_AI_CALL_MINIMIZED', show)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
<!-- 最小化状态的弹窗 -->
|
||||
<div
|
||||
class="minimized-window"
|
||||
v-show="windowState === 'minimized'"
|
||||
v-show="windowState === 'minimized' && showMinimizedWindow"
|
||||
@click="maximizeWindow"
|
||||
>
|
||||
<div class="minimized-content">
|
||||
@@ -96,6 +96,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import messages from './components/messages.vue'
|
||||
import sendMessage from './components/sendMessage.vue'
|
||||
|
||||
@@ -111,6 +112,13 @@ export default {
|
||||
messages,
|
||||
sendMessage
|
||||
},
|
||||
computed: {
|
||||
...mapState('app', ['showAICallMinimized']),
|
||||
showMinimizedWindow() {
|
||||
// 只有在Vuex状态为true时才显示最小化窗口
|
||||
return this.showAICallMinimized;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AIContent: '',
|
||||
@@ -428,4 +436,4 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -49,6 +49,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toUrl(item) {
|
||||
console.log(item);
|
||||
this.$router.push({
|
||||
path: '/case/detail',
|
||||
query: {
|
||||
id: item.caseId
|
||||
}
|
||||
})
|
||||
},
|
||||
startTyping(text) {
|
||||
// 清除之前的定时器
|
||||
if (this.typingTimer) {
|
||||
@@ -105,7 +114,7 @@ export default {
|
||||
<div class="case-refers-list">
|
||||
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
|
||||
<div class="case-refers-item-title">
|
||||
<a :href="'#case-' + item.caseId" class="title">{{ item.title }}</a>
|
||||
<a @click="toUrl(item)" class="title">{{ item.title }}</a>
|
||||
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
|
||||
</div>
|
||||
<div class="case-refers-item-author">
|
||||
|
||||
@@ -91,9 +91,9 @@ export default {
|
||||
conversationId: this.conversationId,
|
||||
query: question
|
||||
};
|
||||
|
||||
// http://192.168.3.178:9091
|
||||
// 创建POST请求
|
||||
fetch('http://192.168.3.178:9091/xboe/m/boe/case/ai/chat',{
|
||||
fetch('/systemapi/xboe/m/boe/case/ai/chat',{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
Reference in New Issue
Block a user