fix: 修复点击开启新会话的时候，界面显示异常的问题

2025-12-18 23:36:53 +08:00 · 2025-07-29 20:20:05 +08:00
parent 05144d9afb
commit 9353af4973
4 changed files with 220 additions and 170 deletions
--- a/src/views/AI-new/components/chat-new.vue
+++ b/src/views/AI-new/components/chat-new.vue
@@ -132,7 +132,8 @@ export default {
      this.$emit('update:isSearching', !this.isSearching)
    },
    startNewConversation() {
-      this.$emit('update:messages', [])
+      this.$emit('initBotMessage')
+      // this.$emit('update:messages', [])
      this.$emit('update:conversationId', '')
      this.$emit('update:productName', '')
    },
--- a/src/views/AI-new/index.vue
+++ b/src/views/AI-new/index.vue
@@ -31,7 +31,7 @@

    <chatMessage ref="chatMessage" :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat"></chatMessage>
+      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat" @initBotMessage="initBotMessage"/>
  </div>
 </template>

@@ -134,6 +134,9 @@ export default {
    },
    cellClick(item) {
      this.$refs.chatMessage.cellClick(item)
+    },
+    initBotMessage() {
+      this.messages = []
    }
  },
  watch: {
--- a/src/views/AI-new/views/productKnowledge/index.vue
+++ b/src/views/AI-new/views/productKnowledge/index.vue
@@ -1,15 +1,26 @@
 <template>
  <div class="chat-page">
    <van-nav-bar title="产品知识助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-    <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
-      :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
-      :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+    <sticky
+      :hotList="hotList"
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>

    <main class="chat-main">
      <div class="chat-content">
        <div class="message-area" ref="messageArea" @scroll="handleScroll">
-          <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching" :think-ok="isThink"
-            @setProductName="setProductName"></messageComponent>
+          <messageComponent
+            :messagesList="messages"
+            :is-deep="isDeep"
+            :is-search="isSearching"
+            :think-ok="isThink"
+            @setProductName="setProductName"
+          ></messageComponent>
          <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
        </div>
      </div>
@@ -19,9 +30,18 @@
      </div>
    </main>

-    <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
-      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="chat"/>
+    <chatMessage
+      :messages.sync="messages"
+      :messageStatus.sync="messageStatus"
+      :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="chat"
+      @initBotMessage="initBotMessage"
+    />
  </div>
 </template>

@@ -41,7 +61,7 @@ export default {
    messageComponent,
    HotProducts,
    chatMessage,
-    sticky,
+    sticky
  },
  data() {
    return {
@@ -54,7 +74,7 @@ export default {
      isSearching: false,
      isDeep: false,
      autoScrollEnabled: true,
-      scrollPosition: 0,
+      scrollPosition: 0
    }
  },
  created() {
@@ -65,16 +85,13 @@ export default {

    if (!compareId) {
      sessionStorage.removeItem('results')
-      this.messages.push({
-        type: 'bot',
-        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`,
-      })
+      this.initBotMessage()
    } else {
      // 可以调用接口展示 名字 或者存在session里

      let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
      console.log(sesstions)
-      let text = sesstions.map((item) => {
+      let text = sesstions.map(item => {
        return item.productName + '<br/>'
      })
      console.log(text)
@@ -82,7 +99,7 @@ export default {

      this.messages.push({
        type: 'user',
-        text: other,
+        text: other
      })
    }
    this.getHotProducts()
@@ -122,6 +139,12 @@ export default {
      this.autoScrollEnabled = isAtBottom
      this.scrollPosition = messageArea.scrollTop
    },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`
+      })
+    }
  },
  watch: {
    messages: {
@@ -129,9 +152,9 @@ export default {
        // console.log(this.messages, 'messages');
        this.$nextTick(() => this.scrollToBottom())
      },
-      deep: true,
-    },
-  },
+      deep: true
+    }
+  }
 }
 </script>

--- a/src/views/AI-new/views/productRecommend/index.vue
+++ b/src/views/AI-new/views/productRecommend/index.vue
@@ -1,29 +1,49 @@
 <template>
-    <div class="chat-page">
-        <van-nav-bar title="产品推荐助手-保障型" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-        <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
-            :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
-            :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+  <div class="chat-page">
+    <van-nav-bar title="产品推荐助手-保障型" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
+    <sticky
+      :hotList="hotList"
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>

-        <main class="chat-main">
-            <div class="chat-content">
-                <div class="message-area" ref="messageArea" @scroll="handleScroll">
-                    <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching"
-                        :think-ok="isThink" @setProductName="setProductName"></messageComponent>
-                    <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
-                </div>
-            </div>
-            <!-- 滚动到顶部按钮 -->
-            <div class="button-container" style="background: #fff">
-                <van-icon name="upgrade" size="2em" @click="scrollToTop" />
-            </div>
-        </main>
+    <main class="chat-main">
+      <div class="chat-content">
+        <div class="message-area" ref="messageArea" @scroll="handleScroll">
+          <messageComponent
+            :messagesList="messages"
+            :is-deep="isDeep"
+            :is-search="isSearching"
+            :think-ok="isThink"
+            @setProductName="setProductName"
+          ></messageComponent>
+          <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
+        </div>
+      </div>
+      <!-- 滚动到顶部按钮 -->
+      <div class="button-container" style="background: #fff">
+        <van-icon name="upgrade" size="2em" @click="scrollToTop" />
+      </div>
+    </main>

-        <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
-            :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-            :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="product_recommend">
-        </chatMessage>
-    </div>
+    <chatMessage
+      :messages.sync="messages"
+      :messageStatus.sync="messageStatus"
+      :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="product_recommend"
+      @initBotMessage="initBotMessage"
+    >
+    </chatMessage>
+  </div>
 </template>

 <script>
@@ -35,108 +55,111 @@ import sticky from '@/views/AI/components/sticky.vue'
 import chatMessage from '@/views/AI-new/components/chat-new.vue'

 export default {
-    components: {
-        SvgIcon,
-        [Icon.name]: Icon,
-        [NavBar.name]: NavBar,
-        messageComponent,
-        HotProducts,
-        chatMessage,
-        sticky,
-    },
-    data() {
-        return {
-            hotList: [],
-            productName: '',
-            conversationId: '',
-            messageStatus: 'stop',
-            isThink: null,
-            messages: [],
-            isSearching: false,
-            isDeep: false,
-            autoScrollEnabled: true,
-            scrollPosition: 0,
-        }
-    },
-    created() {
-        let { compareId, conversationId } = this.$route.query
-        if (conversationId) {
-            this.conversationId = conversationId
-        }
+  components: {
+    SvgIcon,
+    [Icon.name]: Icon,
+    [NavBar.name]: NavBar,
+    messageComponent,
+    HotProducts,
+    chatMessage,
+    sticky
+  },
+  data() {
+    return {
+      hotList: [],
+      productName: '',
+      conversationId: '',
+      messageStatus: 'stop',
+      isThink: null,
+      messages: [],
+      isSearching: false,
+      isDeep: false,
+      autoScrollEnabled: true,
+      scrollPosition: 0
+    }
+  },
+  created() {
+    let { compareId, conversationId } = this.$route.query
+    if (conversationId) {
+      this.conversationId = conversationId
+    }

-        if (!compareId) {
-            sessionStorage.removeItem('results')
-            this.messages.push({
-                type: 'bot',
-                text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
+    if (!compareId) {
+      sessionStorage.removeItem('results')
+      this.initBotMessage()
+    } else {
+      // 可以调用接口展示 名字 或者存在session里
+      let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
+      console.log(sesstions)
+      let text = sesstions.map(item => {
+        return item.productName + '<br/>'
+      })
+      console.log(text)
+      let other = '对比产品 <br/>' + text.join('')
+
+      this.messages.push({
+        type: 'user',
+        text: other
+      })
+    }
+    this.getHotProducts()
+  },
+  methods: {
+    getIsThink(e) {
+      this.isThink = e
+    },
+    getHotProducts(e) {
+      console.log(e)
+      this.hotList = e
+    },
+
+    scrollToTop() {
+      const messageArea = this.$refs.messageArea
+      if (messageArea) {
+        messageArea.scrollTop = 0
+      }
+    },
+    scrollToBottom() {
+      if (!this.autoScrollEnabled) return
+      this.$nextTick(() => {
+        const messageArea = this.$refs.messageArea
+        if (messageArea) {
+          messageArea.scrollTop = messageArea.scrollHeight
+        }
+      })
+    },
+    setProductName(e) {
+      this.productName = e
+    },
+    handleScroll() {
+      const messageArea = this.$refs.messageArea
+      if (!messageArea) return
+      const threshold = 10
+      const isAtBottom = messageArea.scrollHeight - messageArea.clientHeight <= messageArea.scrollTop + threshold
+      this.autoScrollEnabled = isAtBottom
+      this.scrollPosition = messageArea.scrollTop
+    },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
                \n\n• 客户需要哪类保障？（重疾/医疗/意外）
                \n\n• 客户的年龄、性别、有无既往病症
                \n\n• 客户的保障场景（住院医疗/百万医疗/出行意外/综合意外/交通意外）
                \n\n2.如果您需要推荐理财储蓄类产品，您可以告诉我以下信息：
                \n\n• 客户主要目标是什么？（财富升值/子女教育/资产传承/养老保障）
-                \n\n• 客户的年龄、性别、年收入、风险承受能力`,
-            })
-        } else {
-            // 可以调用接口展示 名字 或者存在session里
-            let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
-            console.log(sesstions)
-            let text = sesstions.map((item) => {
-                return item.productName + '<br/>'
-            })
-            console.log(text)
-            let other = '对比产品 <br/>' + text.join('')
-
-            this.messages.push({
-                type: 'user',
-                text: other,
-            })
-        }
-        this.getHotProducts()
-    },
-    methods: {
-        getIsThink(e) {
-            this.isThink = e
-        },
-        getHotProducts(e) {
-            console.log(e)
-            this.hotList = e
-        },
-
-        scrollToTop() {
-            const messageArea = this.$refs.messageArea
-            if (messageArea) {
-                messageArea.scrollTop = 0
-            }
-        },
-        scrollToBottom() {
-            if (!this.autoScrollEnabled) return
-            this.$nextTick(() => {
-                const messageArea = this.$refs.messageArea
-                if (messageArea) {
-                    messageArea.scrollTop = messageArea.scrollHeight
-                }
-            })
-        },
-        setProductName(e) {
-            this.productName = e
-        },
-        handleScroll() {
-            const messageArea = this.$refs.messageArea
-            if (!messageArea) return
-            const threshold = 10
-            const isAtBottom = messageArea.scrollHeight - messageArea.clientHeight <= messageArea.scrollTop + threshold
-            this.autoScrollEnabled = isAtBottom
-            this.scrollPosition = messageArea.scrollTop
-        },
-    },
-    watch: {
-        messages: {
-            handler() {
-                this.$nextTick(() => this.scrollToBottom())
-            },
-            deep: true,
-        },
-    },
+                \n\n• 客户的年龄、性别、年收入、风险承受能力`
+      })
+    }
+  },
+  watch: {
+    messages: {
+      handler() {
+        this.$nextTick(() => this.scrollToBottom())
+      },
+      deep: true
+    }
+  }
 }
 </script>

@@ -146,37 +169,37 @@ $primary-text-color: #f6aa21;
 $primary-trans-color: rgba(135, 162, 208, 0.5);

 .chat-page {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    //-webkit-user-select: none;
-    //-moz-user-select: none;
-    //-ms-user-select: none;
-    //user-select: none;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  //-webkit-user-select: none;
+  //-moz-user-select: none;
+  //-ms-user-select: none;
+  //user-select: none;

-    .chat-main {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px;
-        background: #f7f8fa;
-        position: relative;
+  .chat-main {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background: #f7f8fa;
+    position: relative;

-        .button-container {
-            position: fixed;
-            bottom: 150px;
-            right: 10px;
-            border-radius: 50%;
-        }
-
-        .chat-content {
-            height: 100%;
-
-            .message-area {
-                height: 100%;
-                overflow-y: auto;
-                transition: all 0.2s ease-in-out;
-            }
-        }
+    .button-container {
+      position: fixed;
+      bottom: 150px;
+      right: 10px;
+      border-radius: 50%;
    }
+
+    .chat-content {
+      height: 100%;
+
+      .message-area {
+        height: 100%;
+        overflow-y: auto;
+        transition: all 0.2s ease-in-out;
+      }
+    }
+  }
 }
 </style>