mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 21:36:42 +08:00
feat(app): 添加AI Call组件控制功能- 在app模块中新增showAICall状态用于控制AI Call组件显示
- 添加对应的mutation和action来修改showAICall状态 - 在App.vue中引入并条件渲染AICall组件 - 新增AICaseConsult组件用于触发AI Call显示 - 在Detail.vue页面中集成AICaseConsult组件-修复sendMessage.vue中conversationId的sessionStorage存储问题 - 调整AICall.vue组件的窗口显示逻辑
This commit is contained in:
23
src/App.vue
23
src/App.vue
@@ -2,16 +2,34 @@
|
|||||||
<div id="app">
|
<div id="app">
|
||||||
<keep-alive :include="['case']">
|
<keep-alive :include="['case']">
|
||||||
<router-view />
|
<router-view />
|
||||||
|
12312
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
|
<!-- 添加AI Call组件 -->
|
||||||
|
<AICall
|
||||||
|
:dialogVisible="showAICall"
|
||||||
|
@close="onCloseAICall"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters, mapState } from 'vuex';
|
||||||
|
import AICall from '@/views/portal/case/AICall.vue';
|
||||||
|
|
||||||
export default{
|
export default{
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
AICall
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['userInfo'])
|
...mapGetters(['userInfo']),
|
||||||
|
...mapState('app', ['showAICall'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onCloseAICall() {
|
||||||
|
// 通过Vuex关闭AI Call组件
|
||||||
|
this.$store.dispatch('app/setShowAICall', false);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
//从状态值中取,因为登录处理,所以移动watch中
|
//从状态值中取,因为登录处理,所以移动watch中
|
||||||
@@ -39,4 +57,3 @@
|
|||||||
box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3);
|
box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,9 @@ const state = {
|
|||||||
withoutAnimation: false
|
withoutAnimation: false
|
||||||
},
|
},
|
||||||
device: 'desktop',//默认是桌面,以后会有android,ios,minapp
|
device: 'desktop',//默认是桌面,以后会有android,ios,minapp
|
||||||
size: Cookies.get('size') || 'medium' //字段大小
|
size: Cookies.get('size') || 'medium', //字段大小
|
||||||
|
// 添加AI Call组件显示控制状态
|
||||||
|
showAICall: false
|
||||||
}
|
}
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
@@ -34,6 +36,10 @@ const mutations = {
|
|||||||
SET_SIZE: (state, size) => {
|
SET_SIZE: (state, size) => {
|
||||||
state.size = size
|
state.size = size
|
||||||
Cookies.set('size', size)
|
Cookies.set('size', size)
|
||||||
|
},
|
||||||
|
// 添加控制AI Call组件显示的mutation
|
||||||
|
SET_SHOW_AI_CALL: (state, show) => {
|
||||||
|
state.showAICall = show
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -49,6 +55,10 @@ const actions = {
|
|||||||
},
|
},
|
||||||
setSize({ commit }, size) {
|
setSize({ commit }, size) {
|
||||||
commit('SET_SIZE', size)
|
commit('SET_SIZE', size)
|
||||||
|
},
|
||||||
|
// 添加控制AI Call组件显示的action
|
||||||
|
setShowAICall({ commit }, show) {
|
||||||
|
commit('SET_SHOW_AI_CALL', show)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -69,7 +69,6 @@
|
|||||||
|
|
||||||
<!-- 最小化状态的弹窗 -->
|
<!-- 最小化状态的弹窗 -->
|
||||||
<div
|
<div
|
||||||
v-if="dialogVisible"
|
|
||||||
class="minimized-window"
|
class="minimized-window"
|
||||||
v-show="windowState === 'minimized'"
|
v-show="windowState === 'minimized'"
|
||||||
@click="maximizeWindow"
|
@click="maximizeWindow"
|
||||||
@@ -133,6 +132,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dialogVisible(newVal) {
|
dialogVisible(newVal) {
|
||||||
|
console.log(newVal);
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
// 每次打开时默认最大化
|
// 每次打开时默认最大化
|
||||||
this.windowState = 'maximized';
|
this.windowState = 'maximized';
|
||||||
|
|||||||
@@ -109,6 +109,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="xcontent2-minor" :style="{ display: zoomShow ? '' : 'none' }">
|
<div class="xcontent2-minor" :style="{ display: zoomShow ? '' : 'none' }">
|
||||||
|
<AICaseConsult />
|
||||||
<div id="fixd-box">
|
<div id="fixd-box">
|
||||||
<router-link class="the_charts" to="/case/charts">
|
<router-link class="the_charts" to="/case/charts">
|
||||||
<div class="text">排行榜</div>
|
<div class="text">排行榜</div>
|
||||||
@@ -237,9 +238,10 @@ import { formatDate } from "@/utils/datetime.js"
|
|||||||
import { cutFullName } from "@/utils/tools.js";
|
import { cutFullName } from "@/utils/tools.js";
|
||||||
import apiPlace from "@/api/phase2/place.js"
|
import apiPlace from "@/api/phase2/place.js"
|
||||||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||||||
|
import AICaseConsult from "@/views/portal/case/components/AICaseConsult.vue";
|
||||||
export default {
|
export default {
|
||||||
name: 'atticle',
|
name: 'atticle',
|
||||||
components: { portalHeader, portalFloatTools, portalFooter, interactBar, author, comments, pdfPreview },
|
components: {AICaseConsult, portalHeader, portalFloatTools, portalFooter, interactBar, author, comments, pdfPreview },
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['userInfo'])
|
...mapGetters(['userInfo'])
|
||||||
},
|
},
|
||||||
|
|||||||
63
src/views/portal/case/components/AICaseConsult.vue
Normal file
63
src/views/portal/case/components/AICaseConsult.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="AI-case" style="position: relative; margin-bottom: 10px;" v-if="showAiCase" @click.stop="getAICase()">
|
||||||
|
<img src="../../../../../public/images/case-logo.png" alt="">
|
||||||
|
<span @click="getAICase()" style="position: absolute; bottom: 65px;left: 15px;z-index: 1;width: 40%;height: 30px;"></span>
|
||||||
|
</div>
|
||||||
|
<!-- 移除直接使用的AICall组件 -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { showCaseAiEntrance } from '@/api/boe/aiChat.js'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AICaseConsult',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showAiCase: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 从Vuex中获取showAICall状态(虽然当前组件不使用,但保持连接)
|
||||||
|
...mapState('app', ['showAICall'])
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getShowAiCase()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 是否展示入口
|
||||||
|
getShowAiCase() {
|
||||||
|
showCaseAiEntrance().then(res => {
|
||||||
|
this.showAiCase = res.result
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 案例立即咨询
|
||||||
|
getAICase() {
|
||||||
|
// 通过Vuex控制AICall组件显示
|
||||||
|
this.$store.dispatch('app/setShowAICall', true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.AI-case {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 160px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 105px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -230,6 +230,7 @@ export default {
|
|||||||
// 从响应中获取并保存conversationId
|
// 从响应中获取并保存conversationId
|
||||||
if (jsonData.conversationId) {
|
if (jsonData.conversationId) {
|
||||||
this.conversationId = jsonData.conversationId;
|
this.conversationId = jsonData.conversationId;
|
||||||
|
sessionStorage.setItem('conversationId', jsonData.conversationId);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user