From be411ec72d581bdf82825c0055bb4209a37ccf35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Wed, 24 Sep 2025 09:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(portal-case):=20=E6=96=B0=E5=A2=9EAI?=
 =?UTF-8?q?=E6=99=BA=E8=83=BD=E9=97=AE=E7=AD=94=E5=AF=B9=E8=AF=9D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=96=B0=E5=A2=9E=E6=B6=88=E6=81=AF=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=92=8C=E5=8F=91=E9=80=81=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AE=9E=E7=8E=B0=E6=9C=BA=E5=99=A8?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=8E=E7=94=A8=E6=88=B7=E7=9A=84=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E3=80=82=20=E6=94=AF=E6=8C=81=E6=89=93?=
 =?UTF-8?q?=E5=AD=97=E6=9C=BA=E6=95=88=E6=9E=9C=E5=B1=95=E7=A4=BAAI?=
 =?UTF-8?q?=E5=9B=9E=E5=A4=8D=E5=86=85=E5=AE=B9=EF=BC=8C=E5=B9=B6=E5=8F=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=80=9D=E8=80=83=E8=BF=87=E7=A8=8B=E4=B8=8E?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=A1=88=E4=BE=8B=E6=8E=A8=E8=8D=90=E3=80=82?=
 =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E5=AF=B9=E8=AF=9D=E6=A1=86=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E6=A0=B7=E5=BC=8F=E5=8F=8A=E8=87=AA=E5=8A=A8=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82=20=E6=8F=90=E4=BE=9B?=
 =?UTF-8?q?=E5=BC=80=E5=90=AF=E6=96=B0=E5=AF=B9=E8=AF=9D=E5=92=8C=E6=8E=A8?=
 =?UTF-8?q?=E8=8D=90=E9=97=AE=E9=A2=98=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=E4=BA=A4=E4=BA=92=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/portal/case/AICall.vue              | 269 ++++++++----
 src/views/portal/case/Index.vue               |   5 +-
 src/views/portal/case/components/messages.vue | 201 +++++++++
 .../portal/case/components/sendMessage.vue    | 398 ++++++++++++++++++
 src/views/portal/case/components/u762.svg     |  12 +
 5 files changed, 810 insertions(+), 75 deletions(-)
 create mode 100644 src/views/portal/case/components/messages.vue
 create mode 100644 src/views/portal/case/components/sendMessage.vue
 create mode 100644 src/views/portal/case/components/u762.svg

diff --git a/src/views/portal/case/AICall.vue b/src/views/portal/case/AICall.vue
index d57f709e..8a864967 100644
--- a/src/views/portal/case/AICall.vue
+++ b/src/views/portal/case/AICall.vue
@@ -15,30 +15,41 @@
 
     <!-- 内容区域 -->
     <div class="content-wrapper">
-      <div class="welcome-message">
-        <div class="avatar">
-          <!-- <img src="@/assets/images/bot-avatar.png" alt="AI助手" /> -->
+      <div
+        class="welcome-message"
+        ref="messageContainer"
+        @scroll="handleScroll"
+      >
+        <div class="message-text" v-for="(item, index) in messageList" :key="index">
+          <messages :messageData="item" :suggestions="suggestions"></messages>
+
         </div>
-        <div class="message-text">
-          <p>您好！我是京东方案侧智能问答助手，随时为您服务。</p>
-          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
-          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
-          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>
+        <div class="message-suggestions" v-if="messageList[messageList.length-1].textCompleted">
+          <div class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
+            <a @click="sendSuggestions"> {{ item }} →</a>
+          </div>
+        </div>
+        <div v-if="isLoading" class="loading-message">
+          <div class="loading-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
         </div>
       </div>
 
       <!-- 输入框区域 -->
-      <div class="input-area">
-        <el-input v-model="AIContent" class="input-placeholder" placeholder="有问题，尽管问"></el-input>
-        <div class="action-buttons">
-          <el-button type="primary" size="small" class="start-btn">
-            + 开启新对话
-          </el-button>
-          <el-button type="text" class="send-btn">
-            <i class="el-icon-s-promotion"></i>
-          </el-button>
-        </div>
-      </div>
+      <send-message
+        v-model="AIContent"
+        :message-list="messageList"
+        :suggestions="suggestions"
+        @loading="handleLoading"
+        @update-message="updateMessage"
+        @update-suggestions="updateSuggestions"
+        @new-conversation="startNewConversation"
+        :disabled="isLoading"
+        class="input-area-wrapper"
+      />
     </div>
 
     <!-- 关闭按钮在右上角，由 el-dialog 自动处理 -->
@@ -46,6 +57,9 @@
 </template>
 
 <script>
+import messages from './components/messages.vue'
+import sendMessage from './components/sendMessage.vue'
+
 export default {
   name: 'CaseExpertDialog',
   props: {
@@ -54,10 +68,36 @@ export default {
       default: false
     }
   },
+  components: {
+    messages,
+    sendMessage
+  },
   data() {
     return {
-    AIContent:'',
-      // dialogVisible: true // 控制弹窗显示，实际项目中可通过父组件控制
+      AIContent: '',
+      isLoading: false,
+      messageList: [
+        {
+          typing:true,
+          isBot: true, // 是否为机器人
+          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
+          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
+          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
+        }
+      ],
+      suggestions:[],
+      isAutoScroll: true // 是否自动滚动
+    }
+  },
+  watch: {
+    messageList: {
+      handler() {
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      },
+      deep: true
     }
   },
   methods: {
@@ -65,6 +105,55 @@ export default {
       console.log('关闭弹窗')
       this.$emit('close')
       // 可以在这里执行其他逻辑
+    },
+
+    // 处理加载状态
+    handleLoading(status) {
+      this.isLoading = status;
+    },
+
+    // 更新消息
+    updateMessage(message) {
+      // 由于Vue的响应式系统，message对象的更改会自动更新视图
+      // 这里不需要额外的操作
+    },
+    updateSuggestions(arr){
+      this.suggestions = arr
+    },
+    // 处理建议
+    sendSuggestions(){
+      this.suggestions = []
+    },
+    startNewConversation() {
+      this.messageList = [
+        {
+          isBot: true,
+          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
+          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
+          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
+        }
+      ];
+      this.AIContent = '';
+      this.isLoading = false;
+    },
+
+    // 处理滚动事件
+    handleScroll(event) {
+      const element = event.target;
+      // 判断是否滚动到底部
+      const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 1;
+
+      // 如果滚动到底部，则开启自动滚动
+      // 如果离开底部，则关闭自动滚动
+      this.isAutoScroll = isAtBottom;
+    },
+
+    // 滚动到底部
+    scrollToBottom() {
+      if (this.isAutoScroll && this.$refs.messageContainer) {
+        this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
+      }
     }
   }
 }
@@ -72,7 +161,22 @@ export default {
 
 <style scoped lang="scss">
 .case-expert-dialog {
+  ::v-deep .el-dialog{
+    background: url("./components/u762.svg") no-repeat ;
+    background-size: cover;
+
+    //background-color: rgba(255, 255, 255, 0.8);
+  }
+  ::v-deep .el-dialog__body{
+    padding: 10px;
+    //font-size: 12px;
+    *{
+      font-size:unset ;
+    }
+  }
+
   .dialog-title {
+    background: transparent;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -86,18 +190,37 @@ export default {
     }
   }
 
+
+  .message-suggestions{
+    display: flex;
+    flex-direction: column;
+    .suggestion-item{
+      cursor: pointer;
+      float: right;
+      padding: 5px 15px;
+      box-sizing: border-box;
+      background-color: rgba(228, 231, 237, 1);
+      border-radius: 5px;
+      margin-bottom: 5px;
+    }
+  }
   .content-wrapper {
     padding: 20px;
-    background-color: #f9f9f9;
+    background-color: transparent;
     border-radius: 8px;
-    // height:400px;
-    // position:relative;
-    // margin-bottom: 20px;
+    height: 550px;
+    position: relative;
+    //margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
 
     .welcome-message {
       display: flex;
+      flex-direction: column;
       align-items: flex-start;
-      margin-bottom: 30px;
+      margin-bottom: 10px;
+      flex:1;
+      overflow-y: auto;
 
       .avatar {
         margin-right: 12px;
@@ -115,70 +238,70 @@ export default {
       }
 
       .message-text {
+        width: 100%;
+        //margin-bottom: 15px;
+
         p {
-          // margin: 4px 0;
-          // line-height: 1.6;
           color: #333;
-          font-size: 12px;
-        }
-      }
-    }
-
-    .input-area {
-      background-color: white;
-      border: 1px solid #ebeef5;
-      border-radius: 8px;
-      padding: 5px 16px 10px 16px;
-      display: flex;
-      flex-direction: column;
-      // position:absolute;
-      // bottom:10px;
-      // width:93%;
-
-
-      .input-placeholder {
-        color: #999;
-        font-size: 12px;
-        margin: 0;
-        border: none;
-        ::v-deep .el-input__inner {
-          border: none;
-          padding:0;
+          //font-size: 14px;
+          line-height: 1.6;
+          margin: 8px 0;
         }
       }
 
-      .action-buttons {
+      .loading-message {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        width: 100%;
+        margin-bottom: 15px;
 
-        .start-btn {
-          padding: 6px 10px;
-          font-size: 12px;
-          border-radius: 4px;
-          color: #409eff;
-          background-color: #f5f7fa;
-          border: 1px solid #dcdfe6;
-        }
-
-        .send-btn {
+        .avatar {
           width: 32px;
           height: 32px;
           border-radius: 50%;
-          background-color: #409eff;
-          color: white;
+          background-color: #007aff;
+          margin-right: 12px;
+        }
+
+        .loading-dots {
           display: flex;
           align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: background-color 0.2s;
 
-          &:hover {
-            background-color: #3a83ff;
+          span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #999;
+            margin-right: 5px;
+            animation: loading 1.4s infinite ease-in-out both;
+
+            &:nth-child(1) {
+              animation-delay: -0.32s;
+            }
+
+            &:nth-child(2) {
+              animation-delay: -0.16s;
+            }
           }
         }
       }
     }
+
+    .input-area-wrapper {
+      //position: absolute;
+      //bottom: 10px;
+      //width: calc(100% - 40px);
+    }
+
+    @keyframes loading {
+      0%, 80%, 100% {
+        transform: scale(0);
+      }
+      40% {
+        transform: scale(1);
+      }
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/portal/case/Index.vue b/src/views/portal/case/Index.vue
index 42d2f824..a93c9d71 100644
--- a/src/views/portal/case/Index.vue
+++ b/src/views/portal/case/Index.vue
@@ -310,9 +310,9 @@
       <div class="xcontent2-minor">
 
         <div id="fixd-box">
-          <div class="AI-case">
+          <div class="AI-case" style="position: relative">
             <img src="../../../../public/images/case-logo.png" alt="">
-            <span @click="getAICase"></span>
+            <span @click="getAICase" style="position: absolute; top: 65px;left: 15px;z-index: 1;width: 40%;height: 30px;"></span>
           </div>
           <router-link class="the_charts" to="/case/charts">
             <div class="text">排行榜</div>
@@ -514,6 +514,7 @@ export default {
   },
   data() {
     return {
+      showAICall:false,
       timeoutId: null,
       isTimeData: false,
       articlePageList: [],
diff --git a/src/views/portal/case/components/messages.vue b/src/views/portal/case/components/messages.vue
new file mode 100644
index 00000000..0bec7d95
--- /dev/null
+++ b/src/views/portal/case/components/messages.vue
@@ -0,0 +1,201 @@
+<!--消息渲染-->
+<script>
+export default {
+  name: "message",
+  props: {
+    messageData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    suggestions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      displayText: '',
+      typingTimer: null,
+      typingSpeed: 30 // 打字机速度（毫秒/字符）
+    }
+  },
+  watch: {
+    'messageData.text': {
+      handler(newVal) {
+        if (newVal && this.messageData.isBot && !this.messageData.typing) {
+          // this.startTyping(newVal)
+          this.displayText = newVal || ''
+        } else {
+          this.displayText = newVal || ''
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    startTyping(text) {
+      // 清除之前的定时器
+      if (this.typingTimer) {
+        clearInterval(this.typingTimer)
+        this.typingTimer = null
+      }
+
+      // 初始化
+      // this.displayText = ''
+      let index = 0
+
+      // 开始打字机效果
+      this.typingTimer = setInterval(() => {
+        if (index < text.length) {
+          this.displayText += text.charAt(index)
+          index++
+        } else {
+          // 打字完成，清除定时器
+          clearInterval(this.typingTimer)
+          this.typingTimer = null
+        }
+      }, this.typingSpeed)
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.typingTimer) {
+      clearInterval(this.typingTimer)
+      this.typingTimer = null
+    }
+  }
+}
+
+</script>
+
+<template>
+ <div class="messages">
+   <!--          机器人消息-->
+   <div v-if="messageData.isBot" class="bot-message">
+     <div class="bot-think" v-if="messageData.thinkText" v-html="messageData.thinkText"></div>
+     <div v-html="displayText"></div>
+
+     <div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted">
+       <div class="case-refers">
+         <div class="case-refers-title">
+           <span>相关案例</span>
+         </div>
+         <div class="case-refers-list">
+           <div class="case-refers-item" v-for="item in messageData.caseRefers">
+             <div class="case-refers-item-title">
+               <a :href="'#case-' + item.caseId">{{ item.title }}</a>
+             </div>
+             <div class="case-refers-item-author">
+               <span>{{ item.authorName }}</span>
+             </div>
+             <div class="case-refers-item-keywords">
+               <span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
+
+   <!--          非机器人消息-->
+   <div v-else class="user-message">
+     <div class="message-text">
+       <div v-html="messageData.text"></div>
+     </div>
+   </div>
+
+
+<!--   推荐问题-->
+
+<!--   <div v-if="suggestions && suggestions.length > 0">-->
+<!--     <div class="suggestions">-->
+<!--       <div class="suggestions-title">-->
+<!--         <span>推荐问题</span>-->
+<!--       </div>-->
+<!--       <div class="suggestions-list">-->
+<!--         <div class="suggestions-item" v-for="item in suggestions">-->
+<!--           <div class="suggestions-item-title">-->
+<!--             {{item}}-->
+<!--           </div>-->
+<!--         </div>-->
+<!--       </div>-->
+<!--     </div>-->
+<!--   </div>-->
+ </div>
+</template>
+
+<style scoped lang="scss">
+.messages {
+  width: 100%;
+
+  .bot-message {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+
+    .bot-think {
+      color: #909399;
+      padding-bottom: 5px;
+      position: relative;
+      padding-left: 10px;
+
+      &:before {
+        content: ' ';
+        border-left: 0.5px solid #909399;
+        position: absolute;
+        height: 100%;
+        left: 0;
+        top: -3px;
+        transform: scaleX(0.5);
+        margin-right: 5px;
+      }
+    }
+
+    .case-refers {
+      margin-top: 10px;
+
+      .case-refers-title {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      .case-refers-list {
+        display: flex;
+        flex-direction: column;
+
+
+        .case-refers-item {
+          //margin-right: 10px;
+          margin-bottom: 5px;
+          border: 1px solid rgba(144, 147, 153, 0.44);
+          padding: 5px;
+          border-radius: 5px;
+
+          .case-refers-item-title {
+            font-size: 14px;
+            margin-bottom: 5px;
+          }
+
+          .case-refers-item-author,
+          .case-refers-item-keywords {
+            font-size: 12px;
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+
+  .user-message {
+    float: right;
+    padding: 5px 15px;
+    box-sizing: border-box;
+    background-color: rgba(228, 231, 237, 1);
+    border-radius: 5px;
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/src/views/portal/case/components/sendMessage.vue b/src/views/portal/case/components/sendMessage.vue
new file mode 100644
index 00000000..7ad9731f
--- /dev/null
+++ b/src/views/portal/case/components/sendMessage.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="input-area">
+    <el-input
+      v-model="inputContent"
+      class="input-placeholder"
+      placeholder="有问题，尽管问"
+      @keyup.enter.native="handleSend"
+      :disabled="disabled"
+    ></el-input>
+    <div class="action-buttons">
+      <el-button type="primary" size="small" class="start-btn" @click="handleNewConversation">
+        + 开启新对话
+      </el-button>
+      <el-button type="text" class="send-btn" @click="handleSend" :disabled="disabled">
+        <i class="el-icon-s-promotion"></i>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { aiChat } from '@/api/boe/aiChat.js'
+
+export default {
+  name: 'SendMessage',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    messageList: {
+      type: Array,
+      default: () => []
+    },
+    suggestions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      inputContent: this.value,
+      conversationId: '' // 会话ID
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.inputContent = newVal
+    }
+  },
+  methods: {
+    handleSend() {
+      if (!this.inputContent.trim() || this.disabled) return
+
+      // 添加用户消息到列表
+      const userMessage = {
+        isBot: false,
+        text: this.inputContent
+      };
+      this.messageList.push(userMessage);
+
+      // 显示加载状态
+      this.$emit('loading', true);
+
+      // 调用AI聊天接口 (暂时注释掉SSE，使用模拟数据)
+      this.callAIChat(this.inputContent);
+
+      // 清空输入框
+      this.inputContent = ''
+    },
+
+    // 调用AI聊天接口
+    callAIChat(question) {
+      // 创建新的AI消息对象
+      const aiMessage = {
+        isBot: true,
+        text: '',
+        thinkText: '',
+        caseRefers: [], // 添加caseRefers字段
+        textCompleted: false // 添加文字处理完成状态，默认为false
+      };
+      this.messageList.push(aiMessage);
+
+      // 模拟SSE流式响应
+      this.simulateSSE(question, aiMessage);
+    },
+
+    // 模拟SSE流式响应
+    simulateSSE(question, aiMessage) {
+      // 模拟AI思考过程，包含think标签内容
+      const fullResponse =
+          "<think>" +
+          "让我思考一下如何更好地回答用户的问题。首先需要分析问题的关键点，然后查找相关的知识库内容。\n" +
+          "用户询问的是关于" + question + "的问题，我需要提供准确且有用的信息。\n" +
+          "</think>" +
+        "正在分析问题：" + question + "\n" +
+        "检索相关案例...\n" +
+        "匹配最佳解决方案...\n" +
+
+        "您好，我已经收到您的问题：\"" + question + "\"。\n" +
+        "正在分析相关内容...\n" +
+        "根据我的知识库，我为您提供以下解答：\n" +
+        "首先，我们需要了解问题的背景和关键点。\n" +
+        "在这个案例中，我们可以采用以下步骤来解决：\n" +
+        "1. 确认问题的具体表现和影响范围\n" +
+        "2. 分析可能的原因和影响因素\n" +
+        "3. 制定针对性的解决方案\n" +
+        "4. 实施并验证解决方案的有效性\n" +
+        "如果您还有其他相关问题，欢迎继续提问！";
+
+      let index = 0;
+      let inThinkTag = false;
+      let thinkContent = '';
+      let mainContent = '';
+
+
+      this.suggestions = [1,2,3]
+
+      this.$emit('update-suggestions', [1,2,3]);
+      // 模拟打字机效果
+      const typeNextCharacter = () => {
+        if (index < fullResponse.length) {
+          const char = fullResponse.charAt(index);
+
+          // 处理<think>标签
+          if (fullResponse.substring(index, index + 7) === '<think>') {
+            inThinkTag = true;
+            index += 7; // 跳过<think>标签
+            setTimeout(typeNextCharacter, 10);
+            return;
+          }
+
+          // 处理</think>标签
+          if (fullResponse.substring(index, index + 8) === '</think>') {
+            inThinkTag = false;
+            aiMessage.thinkText = thinkContent;
+            index += 8; // 跳过</think>标签
+            // 更新父组件的messageList
+            this.$emit('update-message', aiMessage);
+            setTimeout(typeNextCharacter, 10);
+            return;
+          }
+
+          // 根据当前状态添加字符
+          if (inThinkTag) {
+            thinkContent += char;
+            aiMessage.thinkText = thinkContent;
+          } else {
+            mainContent += char;
+            aiMessage.text = mainContent;
+          }
+
+          index++;
+          setTimeout(typeNextCharacter, 30);
+          // 实时更新父组件的messageList
+          this.$emit('update-message', aiMessage);
+        } else {
+          // 设置文字处理完成状态为true
+          aiMessage.textCompleted = true;
+
+          // 模拟status 0的caseRefers数据
+          // 在消息完成后添加引用案例
+          setTimeout(() => {
+            aiMessage.caseRefers = [
+              {
+                caseId: "case_001",
+                title: "案例1标题",
+                authorName: "张三",
+                keywords: ["关键词1", "关键词2"],
+                content: "这是案例1的内容摘要..."
+              },
+              {
+                caseId: "case_002",
+                title: "案例2标题",
+                authorName: "李四",
+                keywords: ["关键词3", "关键词4"],
+                content: "这是案例2的内容摘要..."
+              }
+            ];
+            this.$emit('update-message', aiMessage);
+          }, 500);
+
+          // 所有内容完成
+          this.$emit('loading', false);
+        }
+      };
+
+      // 开始打字机效果
+      setTimeout(typeNextCharacter, 100);
+
+    },
+
+    /*
+    // 真实的SSE实现（暂时注释掉）
+    callAIChat(question) {
+      // 创建新的AI消息对象
+      const aiMessage = {
+        isBot: true,
+        text: '',
+        thinkText: '',
+        caseRefers: [], // 添加caseRefers字段
+        textCompleted: false // 添加文字处理完成状态，默认为false
+      };
+      this.messageList.push(aiMessage);
+
+      // 构造请求参数
+      const requestData = {
+        conversationId: this.conversationId,
+        query: question
+      };
+
+      // 使用fetch API处理SSE
+      const url = process.env.VUE_APP_BOE_BASE_API + '/xboe/m/boe/case/ai/chat';
+      const token = this.$store.getters.token;
+
+      // 创建POST请求
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          [this.$ajax.tokenName]: token
+        },
+        body: JSON.stringify(requestData)
+      }).then(response => {
+        // 处理流式响应
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let buffer = '';
+        let accumulatedContent = ''; // 累积的内容用于打字机效果
+        let accumulatedThinkContent = ''; // 累积的思考内容
+        let inThinkSection = false; // 是否在思考部分
+
+        // 读取流数据
+        const read = () => {
+          reader.read().then(({ done, value }) => {
+            if (done) {
+              // 当流结束时，设置文字处理完成状态为true
+              aiMessage.textCompleted = true;
+              this.$emit('update-message', aiMessage);
+              this.$emit('loading', false);
+              return;
+            }
+
+            // 解码数据
+            buffer += decoder.decode(value, { stream: true });
+
+            // 按行分割数据
+            const lines = buffer.split('\n');
+            buffer = lines.pop(); // 保留不完整的行
+
+            for (const line of lines) {
+              if (line.startsWith('data: ')) {
+                try {
+                  const jsonData = JSON.parse(line.substring(6));
+
+                  // 根据status处理不同类型的数据
+                  switch (jsonData.data.status) {
+                    case 0: // 引用文件
+                      // 处理引用文件信息
+                      if (jsonData.data.fileRefer && jsonData.data.fileRefer.caseRefers) {
+                        aiMessage.caseRefers = jsonData.data.fileRefer.caseRefers;
+                        // 更新父组件的messageList
+                        this.$emit('update-message', aiMessage);
+                      }
+                      break;
+
+                    case 1: // 流式对话内容
+                      // 处理&lt;think&gt;标签内容
+                      const content = jsonData.data.content;
+                      if (content.startsWith('<think>')) {
+                        inThinkSection = true;
+                        accumulatedThinkContent = content.replace('&lt;think&gt;', '');
+                        aiMessage.thinkText = accumulatedThinkContent;
+                      } else if (content.startsWith('&lt;/think&gt;')) {
+                        inThinkSection = false;
+                        accumulatedThinkContent += content.replace('</think>', '');
+                        aiMessage.thinkText = accumulatedThinkContent;
+                      } else if (inThinkSection) {
+                        accumulatedThinkContent += content;
+                        aiMessage.thinkText = accumulatedThinkContent;
+                      } else {
+                        // 累积内容并更新显示
+                        accumulatedContent += content;
+                        aiMessage.text = accumulatedContent;
+                      }
+                      // 更新父组件的messageList
+                      this.$emit('update-message', aiMessage);
+                      break;
+
+                    case 2: // 回答完成
+                      // 设置文字处理完成状态为true
+                      aiMessage.textCompleted = true;
+                      // 更新父组件的messageList
+                      this.$emit('update-message', aiMessage);
+                      break;
+
+                    case 3: // 返回建议
+                      // 这里可以处理建议问题
+                      console.log('建议问题:', jsonData.data.suggestions);
+                      this.$emit('update-suggestions', []);
+                      break;
+
+                    case 4: // 交互完成
+                      this.$emit('loading', false);
+                      break;
+                  }
+                } catch (error) {
+                  console.error('解析SSE数据错误:', error);
+                }
+              }
+            }
+
+            // 继续读取
+            read();
+          }).catch(error => {
+            console.error('SSE连接错误:', error);
+            // 出错时也设置文字处理完成状态
+            aiMessage.textCompleted = true;
+            this.$emit('loading', false);
+            aiMessage.text = '抱歉，网络连接出现问题，请稍后重试。';
+            // 更新父组件的messageList
+            this.$emit('update-message', aiMessage);
+          });
+        };
+
+        // 开始读取数据
+        read();
+      }).catch(error => {
+        console.error('请求失败:', error);
+        // 出错时也设置文字处理完成状态
+        aiMessage.textCompleted = true;
+        this.$emit('loading', false);
+        aiMessage.text = '抱歉，网络连接出现问题，请稍后重试。';
+        // 更新父组件的messageList
+        this.$emit('update-message', aiMessage);
+      });
+    },
+    */
+    handleNewConversation() {
+      this.$emit('new-conversation')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input-area {
+  background-color: white;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 5px 16px 10px 16px;
+  display: flex;
+  flex-direction: column;
+
+  .input-placeholder {
+    color: #999;
+    font-size: 14px;
+    margin: 0;
+    border: none;
+
+    ::v-deep .el-input__inner {
+      border: none;
+      padding: 0;
+      height: 30px;
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+
+    .start-btn {
+      padding: 6px 10px;
+      font-size: 12px;
+      border-radius: 4px;
+      color: #409eff;
+      background-color: #f5f7fa;
+      border: 1px solid #dcdfe6;
+    }
+
+    .send-btn {
+      font-size: 18px;
+      color: #409eff;
+      padding: 6px;
+
+      &[disabled] {
+        color: #c0c4cc;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/portal/case/components/u762.svg b/src/views/portal/case/components/u762.svg
new file mode 100644
index 00000000..61d75d58
--- /dev/null
+++ b/src/views/portal/case/components/u762.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="750px" height="850px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cx="362.789473684209" cy="413.96491228069874" r="1153.015055438179" gradientTransform="matrix(0.023310357358899587 0.999728276703125 -0.9997282767031253 0.02331035735889959 768.1851497765263 41.62434690904212 )" gradientUnits="userSpaceOnUse" id="RadialGradient4">
+      <stop id="Stop5" stop-color="#ffffff" offset="0" />
+      <stop id="Stop6" stop-color="#d4def7" offset="1" />
+    </radialGradient>
+  </defs>
+  <g>
+    <path d="M 0 5.000000000000001  A 5 5 0 0 1 4.999999999999999 0 L 745 0  A 5 5 0 0 1 750 5 L 750 845  A 5 5 0 0 1 745 850 L 5 850  A 5 5 0 0 1 0 845 L 0 5  Z " fill-rule="nonzero" fill="url(#RadialGradient4)" stroke="none" />
+  </g>
+</svg>