mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +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: {
|
computed: {
|
||||||
...mapGetters(['userInfo']),
|
...mapGetters(['userInfo']),
|
||||||
...mapState('app', ['showAICall'])
|
...mapState('app', ['showAICall', 'showAICallMinimized'])
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onCloseAICall() {
|
onCloseAICall() {
|
||||||
// 通过Vuex关闭AI Call组件
|
// 通过Vuex关闭AI Call组件
|
||||||
this.$store.dispatch('app/setShowAICall', false);
|
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() {
|
mounted() {
|
||||||
@@ -37,7 +52,16 @@
|
|||||||
// if(this.userInfo && this.userInfo.name!=''){
|
// if(this.userInfo && this.userInfo.name!=''){
|
||||||
// this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
|
// this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
// 初始化检查路由
|
||||||
|
this.checkRouteForAICall();
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听路由变化
|
||||||
|
$route(to, from) {
|
||||||
|
this.checkRouteForAICall();
|
||||||
|
}
|
||||||
|
}
|
||||||
// watch:{
|
// watch:{
|
||||||
// userInfo(newVal,oldVal){
|
// userInfo(newVal,oldVal){
|
||||||
// if(newVal && newVal.name!=''){
|
// if(newVal && newVal.name!=''){
|
||||||
|
|||||||
@@ -9,7 +9,9 @@ const state = {
|
|||||||
device: 'desktop',//默认是桌面,以后会有android,ios,minapp
|
device: 'desktop',//默认是桌面,以后会有android,ios,minapp
|
||||||
size: Cookies.get('size') || 'medium', //字段大小
|
size: Cookies.get('size') || 'medium', //字段大小
|
||||||
// 添加AI Call组件显示控制状态
|
// 添加AI Call组件显示控制状态
|
||||||
showAICall: false
|
showAICall: false,
|
||||||
|
// 控制AI Call最小化窗口在特定路由下显示的状态
|
||||||
|
showAICallMinimized: false
|
||||||
}
|
}
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
@@ -40,6 +42,10 @@ const mutations = {
|
|||||||
// 添加控制AI Call组件显示的mutation
|
// 添加控制AI Call组件显示的mutation
|
||||||
SET_SHOW_AI_CALL: (state, show) => {
|
SET_SHOW_AI_CALL: (state, show) => {
|
||||||
state.showAICall = 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
|
// 添加控制AI Call组件显示的action
|
||||||
setShowAICall({ commit }, show) {
|
setShowAICall({ commit }, show) {
|
||||||
commit('SET_SHOW_AI_CALL', 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
|
<div
|
||||||
class="minimized-window"
|
class="minimized-window"
|
||||||
v-show="windowState === 'minimized'"
|
v-show="windowState === 'minimized' && showMinimizedWindow"
|
||||||
@click="maximizeWindow"
|
@click="maximizeWindow"
|
||||||
>
|
>
|
||||||
<div class="minimized-content">
|
<div class="minimized-content">
|
||||||
@@ -96,6 +96,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
import messages from './components/messages.vue'
|
import messages from './components/messages.vue'
|
||||||
import sendMessage from './components/sendMessage.vue'
|
import sendMessage from './components/sendMessage.vue'
|
||||||
|
|
||||||
@@ -111,6 +112,13 @@ export default {
|
|||||||
messages,
|
messages,
|
||||||
sendMessage
|
sendMessage
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('app', ['showAICallMinimized']),
|
||||||
|
showMinimizedWindow() {
|
||||||
|
// 只有在Vuex状态为true时才显示最小化窗口
|
||||||
|
return this.showAICallMinimized;
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
AIContent: '',
|
AIContent: '',
|
||||||
|
|||||||
@@ -49,6 +49,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
toUrl(item) {
|
||||||
|
console.log(item);
|
||||||
|
this.$router.push({
|
||||||
|
path: '/case/detail',
|
||||||
|
query: {
|
||||||
|
id: item.caseId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
startTyping(text) {
|
startTyping(text) {
|
||||||
// 清除之前的定时器
|
// 清除之前的定时器
|
||||||
if (this.typingTimer) {
|
if (this.typingTimer) {
|
||||||
@@ -105,7 +114,7 @@ export default {
|
|||||||
<div class="case-refers-list">
|
<div class="case-refers-list">
|
||||||
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
|
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
|
||||||
<div class="case-refers-item-title">
|
<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>
|
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="case-refers-item-author">
|
<div class="case-refers-item-author">
|
||||||
|
|||||||
@@ -91,9 +91,9 @@ export default {
|
|||||||
conversationId: this.conversationId,
|
conversationId: this.conversationId,
|
||||||
query: question
|
query: question
|
||||||
};
|
};
|
||||||
|
// http://192.168.3.178:9091
|
||||||
// 创建POST请求
|
// 创建POST请求
|
||||||
fetch('http://192.168.3.178:9091/xboe/m/boe/case/ai/chat',{
|
fetch('/systemapi/xboe/m/boe/case/ai/chat',{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
|
|||||||
Reference in New Issue
Block a user