feat(ai-call):优化AI对话组件初始化逻辑

- 添加组件准备就绪状态标识
- 确保组件挂载完成后再执行自动滚动
-重置对话时正确处理组件状态
- 避免未初始化完成时的滚动操作

src/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="app">
+  <div id="app" style="width: 100vw">
     <keep-alive :include="['case']">
       <router-view />
       12312
     </keep-alive>
     <!-- 添加AI Call组件 -->
-    <AICall 
-      :dialogVisible="showAICall" 
+    <AICall
+      :dialogVisible="showAICall"
       @close="onCloseAICall"
       @restore="onRestoreAICall"
     />
@@ -16,7 +16,7 @@
 <script>
   import { mapGetters, mapState } from 'vuex';
   import AICall from '@/views/portal/case/AICall.vue';
-  
+
   export default{
     name:  'App',
     components: {
@@ -31,12 +31,12 @@
         // 通过Vuex关闭AI Call组件
         this.$store.dispatch('app/setShowAICall', false);
       },
-      
+
       onRestoreAICall() {
         // 通过Vuex显示AI Call组件
         this.$store.dispatch('app/setShowAICall', true);
       },
-      
+
       // 检查当前路由是否应该显示AI弹窗
       checkRouteForAICall() {
         const currentRoute = this.$route.name;
@@ -59,7 +59,7 @@
       // if(this.userInfo && this.userInfo.name!=''){
       //   this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
       // }
-      
+
       // 初始化检查路由
       this.checkRouteForAICall();
     },
@@ -87,4 +87,4 @@
     border: 1px solid #e7e7e7 !important;
     box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3);
 }
-</style>
+</style>

src/views/portal/case/AICall.vue

@@ -2,9 +2,9 @@
   <div>
     <!-- 最大化状态的弹窗 -->
     <el-dialog
+      v-show=" windowState === 'maximized'"
       v-if="dialogVisible"
       :visible="true"
-      width="800px"
       :close-on-click-modal="false"
       :show-close="true"
       @close="onClose"
@@ -13,12 +13,14 @@
       :append-to-body="true"
       :fullscreen="false"
       top="10vh"
-      v-show="windowState === 'maximized'"
+      v-resizeable
+      v-draggable
     >
       <!-- 标题 -->
       <div slot="title" class="dialog-title">
         <span>案例专家</span>
         <el-button
+          style="color:#96999f"
           type="text"
           class="window-control-btn"
           @click="minimizeWindow"
@@ -75,13 +77,24 @@
     >
       <div class="minimized-content">
         <span class="window-title">案例专家</span>
-        <el-button
-          type="text"
-          class="window-control-btn"
-          @click.stop="onMinimizedWindowClick"
-        >
-          <i class="el-icon-full-screen"></i>
-        </el-button>
+        <div style="display: flex;align-items: center">
+          <el-button
+            type="text"
+            class="window-control-btn"
+            @click.stop="onMinimizedWindowClick"
+          >
+            <img :src="openImg" alt="" style="width: 17px">
+          </el-button>
+
+          <el-button
+            style="margin-left: 1px;color:#96999f"
+            type="text"
+            class="window-control-btn"
+            @click.stop="closeMinimizedWindow"
+          >
+            <i class="el-icon-close"></i>
+          </el-button>
+        </div>
       </div>
       <div class="minimized-message">
         <div v-if="messageList.length <= 1 && messageList[0].isBot">
@@ -99,7 +112,7 @@
 import { mapState } from 'vuex'
 import messages from './components/messages.vue'
 import sendMessage from './components/sendMessage.vue'
-
+import openImg from './components/open.png'
 export default {
   name: 'CaseExpertDialog',
   props: {
@@ -112,6 +125,341 @@ export default {
     messages,
     sendMessage
   },
+  directives: {
+    draggable: {
+      bind(el, binding, vnode) {
+        vnode.context.$nextTick(() => {
+          const dialogEl = el.querySelector('.el-dialog');
+          if (!dialogEl) return;
+
+          const headerEl = dialogEl.querySelector('.dialog-title');
+          if (!headerEl) return;
+
+          // 检查是否有保存的位置状态
+          const savedPosition = sessionStorage.getItem('aiCallDialogPosition');
+          if (savedPosition) {
+            const { left, top } = JSON.parse(savedPosition);
+            dialogEl.style.left = left + 'px';
+            dialogEl.style.top = top + 'px';
+          } else {
+            // 设置初始样式
+            dialogEl.style.position = 'fixed';
+            dialogEl.style.top = '100px';
+            dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px';
+          }
+          dialogEl.style.margin = '0';
+
+          let isDragging = false;
+          let startX = 0;
+          let startY = 0;
+          let startLeft = 0;
+          let startTop = 0;
+
+          const startDrag = (event) => {
+            // 只有在标题栏上按下鼠标才开始拖动
+            if (event.target.closest('.resize-handle')) {
+              return; // 如果点击的是resize-handle，则不触发拖动
+            }
+
+            isDragging = true;
+            startX = event.clientX;
+            startY = event.clientY;
+            startLeft = parseInt(dialogEl.style.left) || dialogEl.offsetLeft;
+            startTop = parseInt(dialogEl.style.top) || dialogEl.offsetTop;
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            // 添加全局事件监听
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', stopDrag);
+          };
+
+          const handleMouseMove = (event) => {
+            if (!isDragging) return;
+
+            const deltaX = event.clientX - startX;
+            const deltaY = event.clientY - startY;
+
+            dialogEl.style.left = (startLeft + deltaX) + 'px';
+            dialogEl.style.top = (startTop + deltaY) + 'px';
+          };
+
+          const stopDrag = () => {
+            isDragging = false;
+
+            // 保存当前位置到 sessionStorage
+            const currentPosition = {
+              left: parseInt(dialogEl.style.left),
+              top: parseInt(dialogEl.style.top)
+            };
+            sessionStorage.setItem('aiCallDialogPosition', JSON.stringify(currentPosition));
+
+            // 移除全局事件监听
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', stopDrag);
+          };
+
+          // 为标题栏绑定拖动事件
+          headerEl.addEventListener('mousedown', startDrag);
+        });
+      }
+    },
+
+    resizeable: {
+      bind(el, binding, vnode) {
+        // 确保元素已插入DOM
+        vnode.context.$nextTick(() => {
+          const dialogEl = el.querySelector('.el-dialog');
+          if (!dialogEl) return;
+
+          // 检查是否有保存的尺寸状态
+          const savedSize = sessionStorage.getItem('aiCallDialogSize');
+          if (savedSize) {
+            const { width, height, left, top } = JSON.parse(savedSize);
+            dialogEl.style.width = width + 'px';
+            dialogEl.style.height = height + 'px';
+            dialogEl.style.left = left + 'px';
+            dialogEl.style.top = top + 'px';
+          } else {
+            // 设置初始样式
+            dialogEl.style.position = 'fixed';
+            dialogEl.style.top = '100px';
+            dialogEl.style.left = (window.innerWidth - dialogEl.offsetWidth) / 2 + 'px';
+          }
+
+          // 创建拖拽手柄
+          const createHandle = (direction) => {
+            const handle = document.createElement('div');
+            handle.className = `resize-handle ${direction}`;
+            handle.style.position = 'absolute';
+            handle.style.zIndex = '10';
+
+            switch (direction) {
+              case 'left':
+              case 'right':
+                handle.style.width = '6px';
+                handle.style.height = '100%';
+                handle.style.top = '0';
+                handle.style.cursor = 'ew-resize';
+                break;
+              case 'top':
+              case 'bottom':
+                handle.style.width = '100%';
+                handle.style.height = '6px';
+                handle.style.left = '0';
+                handle.style.cursor = 'ns-resize';
+                break;
+              case 'top-left':
+              case 'top-right':
+              case 'bottom-left':
+              case 'bottom-right':
+                handle.style.width = '10px';
+                handle.style.height = '10px';
+                handle.style.zIndex = '20';
+                break;
+            }
+
+            switch (direction) {
+              case 'left':
+                handle.style.left = '0';
+                break;
+              case 'right':
+                handle.style.right = '0';
+                break;
+              case 'top':
+                handle.style.top = '0';
+                break;
+              case 'bottom':
+                handle.style.bottom = '0';
+                break;
+              case 'top-left':
+                handle.style.top = '0';
+                handle.style.left = '0';
+                handle.style.cursor = 'nw-resize';
+                break;
+              case 'top-right':
+                handle.style.top = '0';
+                handle.style.right = '0';
+                handle.style.cursor = 'ne-resize';
+                break;
+              case 'bottom-left':
+                handle.style.bottom = '0';
+                handle.style.left = '0';
+                handle.style.cursor = 'sw-resize';
+                break;
+              case 'bottom-right':
+                handle.style.bottom = '0';
+                handle.style.right = '0';
+                handle.style.cursor = 'se-resize';
+                break;
+            }
+
+
+            // 防止拖拽手柄的事件冒泡到标题栏
+            handle.addEventListener('mousedown', (e) => {
+              e.stopPropagation();
+
+            });
+
+            dialogEl.appendChild(handle);
+            return handle;
+          };
+
+          // 创建8个拖拽手柄
+          const handles = {
+            left: createHandle('left'),
+            right: createHandle('right'),
+            top: createHandle('top'),
+            bottom: createHandle('bottom'),
+            topLeft: createHandle('top-left'),
+            topRight: createHandle('top-right'),
+            bottomLeft: createHandle('bottom-left'),
+            bottomRight: createHandle('bottom-right')
+          };
+
+          // 添加拖拽事件处理
+          let isResizing = false;
+          let resizeDirection = '';
+          let startX = 0;
+          let startY = 0;
+          let startWidth = 0;
+          let startHeight = 0;
+          let startLeft = 0;
+          let startTop = 0;
+
+          const startResize = (direction, event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            isResizing = true;
+            resizeDirection = direction;
+
+            startX = event.clientX;
+            startY = event.clientY;
+            startWidth = dialogEl.offsetWidth;
+            startHeight = dialogEl.offsetHeight;
+
+            // 统一使用计算后的样式值
+            startLeft = parseInt(dialogEl.style.left) || 0;
+            startTop = parseInt(dialogEl.style.top) || 0;
+
+            // 添加全局事件监听
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', stopResize);
+          };
+
+          const handleMouseMove = (event) => {
+            if (!isResizing) return;
+
+            const deltaX = event.clientX - startX;
+            const deltaY = event.clientY - startY;
+
+            let newWidth, newHeight, newLeft, newTop;
+
+            switch (resizeDirection) {
+              case 'right':
+                newWidth = Math.max(400, startWidth + deltaX);
+                dialogEl.style.width = newWidth + 'px';
+                break;
+              case 'left':
+                newWidth = Math.max(400, startWidth - deltaX);
+                newLeft = startLeft + startWidth - newWidth;
+                dialogEl.style.width = newWidth + 'px';
+                dialogEl.style.left = newLeft + 'px';
+                break;
+              case 'bottom':
+                newHeight = Math.max(600, startHeight + deltaY);
+                dialogEl.style.height = newHeight + 'px';
+                break;
+              case 'top':
+                // 当窗口高度达到最小值时，不再调整高度和位置
+                if (startHeight - deltaY >= 600) {
+                  newHeight = startHeight - deltaY;
+                  newTop = startTop + deltaY;
+                  dialogEl.style.height = newHeight + 'px';
+                  dialogEl.style.top = newTop + 'px';
+                }
+                break;
+              case 'bottom-right':
+                newWidth = Math.max(400, startWidth + deltaX);
+                newHeight = Math.max(600, startHeight + deltaY);
+                dialogEl.style.width = newWidth + 'px';
+                dialogEl.style.height = newHeight + 'px';
+                break;
+              case 'bottom-left':
+                newWidth = Math.max(400, startWidth - deltaX);
+                newHeight = Math.max(600, startHeight + deltaY);
+                newLeft = startLeft + startWidth - newWidth;
+                dialogEl.style.width = newWidth + 'px';
+                dialogEl.style.left = newLeft + 'px';
+                dialogEl.style.height = newHeight + 'px';
+                break;
+              case 'top-right':
+                // 当窗口高度达到最小值时，不再调整高度和位置
+                if (startHeight - deltaY >= 600) {
+                  newHeight = startHeight - deltaY;
+                  newTop = startTop + deltaY;
+                  newWidth = Math.max(400, startWidth + deltaX);
+                  dialogEl.style.height = newHeight + 'px';
+                  dialogEl.style.top = newTop + 'px';
+                  dialogEl.style.width = newWidth + 'px';
+                }
+                break;
+              case 'top-left':
+                // 当窗口高度达到最小值时，不再调整高度和位置
+                if (startHeight - deltaY >= 600) {
+                  newHeight = startHeight - deltaY;
+                  newTop = startTop + deltaY;
+                  newWidth = Math.max(400, startWidth - deltaX);
+                  newLeft = startLeft + startWidth - newWidth;
+                  dialogEl.style.height = newHeight + 'px';
+                  dialogEl.style.top = newTop + 'px';
+                  dialogEl.style.width = newWidth + 'px';
+                  dialogEl.style.left = newLeft + 'px';
+                }
+                break;
+            }
+
+            let doc = document.querySelector('.welcome-message')
+            let sendBox = document.querySelector('.input-area-wrapper');
+            // sendBox 的高度
+            if (doc && sendBox) {
+              doc.style.height = `calc(${dialogEl.style.height} - ${sendBox.offsetHeight}px - 120px)`;
+            }
+          };
+
+          const stopResize = () => {
+            isResizing = false;
+            resizeDirection = '';
+
+            // 保存当前尺寸和位置到 sessionStorage
+            const currentSize = {
+              width: parseInt(dialogEl.style.width),
+              height: parseInt(dialogEl.style.height),
+              left: parseInt(dialogEl.style.left),
+              top: parseInt(dialogEl.style.top)
+            };
+            sessionStorage.setItem('aiCallDialogSize', JSON.stringify(currentSize));
+
+            // 移除全局事件监听
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', stopResize);
+          };
+
+          // 为每个手柄绑定事件
+          handles.left.addEventListener('mousedown', (e) => startResize('left', e));
+          handles.right.addEventListener('mousedown', (e) => startResize('right', e));
+          handles.top.addEventListener('mousedown', (e) => startResize('top', e));
+          handles.bottom.addEventListener('mousedown', (e) => startResize('bottom', e));
+          handles.topLeft.addEventListener('mousedown', (e) => startResize('top-left', e));
+          handles.topRight.addEventListener('mousedown', (e) => startResize('top-right', e));
+          handles.bottomLeft.addEventListener('mousedown', (e) => startResize('bottom-left', e));
+          handles.bottomRight.addEventListener('mousedown', (e) => startResize('bottom-right', e));
+        });
+      }
+    }
+  },
   computed: {
     ...mapState('app', ['showAICallMinimized']),
     showMinimizedWindow() {
@@ -121,6 +469,7 @@ export default {
   },
   data() {
     return {
+      openImg,
       AIContent: '',
       isLoading: false,
       windowState: 'maximized', // 'maximized' 或 'minimized'
@@ -128,43 +477,103 @@ export default {
         {
           typing:true,
           isBot: true, // 是否为机器人
-          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          text: `<p><b>您好！我是京东方案例智能问答助手，随时为您服务。</b></p>
           <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
           <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
           <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
         }
       ],
       suggestions:[],
-      isAutoScroll: true // 是否自动滚动
+      isAutoScroll: true, // 是否自动滚动
+      // 添加一个标志位，用于标识组件是否已经初始化完成
+      isComponentReady: false
     }
   },
+  mounted() {
+    // 组件挂载完成后，标记为已准备就绪
+    this.$nextTick(() => {
+      this.isComponentReady = true;
+    });
+  },
   watch: {
-    dialogVisible(newVal) {
-      console.log(newVal);
-      // 移除之前的逻辑，因为现在通过事件机制处理状态恢复
+    dialogVisible: {
+      handler(newVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            // 获取对话框元素
+            const dialogEl = document.querySelector('.case-expert-dialog .el-dialog');
+            if (dialogEl) {
+              // 检查是否有保存的尺寸状态
+              const savedSize = sessionStorage.getItem('aiCallDialogSize');
+              if (savedSize) {
+                const { width, height, left, top } = JSON.parse(savedSize);
+                dialogEl.style.width = width + 'px';
+                dialogEl.style.height = height + 'px';
+                dialogEl.style.left = left + 'px';
+                dialogEl.style.top = top + 'px';
+              }
+
+              // 检查是否有保存的位置状态
+              const savedPosition = sessionStorage.getItem('aiCallDialogPosition');
+              if (savedPosition) {
+                const { left, top } = JSON.parse(savedPosition);
+                dialogEl.style.left = left + 'px';
+                dialogEl.style.top = top + 'px';
+              }
+            }
+
+            let doc = document.querySelector('.welcome-message')
+            let sendBox = document.querySelector('.input-area-wrapper');
+            // 只有在没有保存的尺寸状态时才使用默认值
+            if (doc && sendBox) {
+              const savedSize = sessionStorage.getItem('aiCallDialogSize');
+              if (!savedSize) {
+                doc.style.height = `calc(600px - ${sendBox.offsetHeight}px - 120px)`;
+              } else {
+                const { height } = JSON.parse(savedSize);
+                doc.style.height = `calc(${height}px - ${sendBox.offsetHeight}px - 120px)`;
+              }
+            }
+          });
+        }
+      },
+      immediate: true
     },
     messageList: {
       handler() {
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
+        // 只有在组件准备就绪后才执行滚动操作
+        if (this.isComponentReady) {
+          this.$nextTick(() => {
+            this.scrollToBottom();
+          });
+        }
       },
       deep: true
     }
   },
   methods: {
+// / 关闭最小化窗口
+closeMinimizedWindow() {
+  this.$store.commit('app/SET_SHOW_AI_CALL_MINIMIZED', false);
+  this.$store.commit('app/SET_SHOW_AI_CALL', false);
+  this.windowState = 'maximized';
+},
     getMinWidow(vis){
       // this.showAICallMinimized = vis
       this.windowState = 'minimized';
     },
     onClose() {
       console.log('关闭弹窗')
+      // 清除保存的状态
+      sessionStorage.removeItem('aiCallDialogSize');
+      sessionStorage.removeItem('aiCallDialogPosition');
       this.$emit('close')
       // 可以在这里执行其他逻辑
     },
 
     minimizeWindow() {
       this.windowState = 'minimized';
+      this.$store.commit('app/SET_SHOW_AI_CALL_MINIMIZED', true);
     },
 
     maximizeWindow() {
@@ -207,10 +616,13 @@ export default {
       },500)
     },
     startNewConversation() {
+      // 重置对话时，先标记组件为未准备就绪状态
+      this.isComponentReady = false;
+
       this.messageList = [
         {
           isBot: true,
-          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          text: `<p><b>您好！我是京东方案例智能问答助手，随时为您服务。</b></p>
           <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
           <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
           <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
@@ -218,6 +630,11 @@ export default {
       ];
       this.AIContent = '';
       this.isLoading = false;
+
+      // 在下一个 tick 中重新标记为准备就绪
+      this.$nextTick(() => {
+        this.isComponentReady = true;
+      });
     },
 
     // 处理滚动事件
@@ -258,11 +675,14 @@ export default {
     background-size: cover;
     border-radius: 8px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     //background-color: rgba(255, 255, 255, 0.8);
   }
   ::v-deep .el-dialog__body{
     padding: 10px;
+    flex:1;
     //font-size: 12px;
     *{
       font-size:unset ;
@@ -279,6 +699,7 @@ export default {
     font-weight: 600;
     color: #333;
     padding-right: 20px;
+    cursor: move; /* 添加拖动样式 */
 
     .icon {
       width: 24px;
@@ -310,7 +731,8 @@ export default {
     padding: 20px;
     background-color: transparent;
     border-radius: 8px;
-    height: 550px;
+    min-height: 500px;
+    height:100%;
     position: relative;
     //margin-bottom: 20px;
     display: flex;
@@ -321,7 +743,8 @@ export default {
       flex-direction: column;
       align-items: flex-start;
       margin-bottom: 10px;
-      flex:1;
+      height: 400px;
+      //flex:1;
       overflow-y: auto;
 
       .avatar {

src/views/portal/case/Detail.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="case-list-content">
     <div style="margin-bottom:30px" class="case-banner">
-      <portal-header current="case" textColor="#fff" :goSearch="2"></portal-header>
+      <portal-header current="case" textColor="#fff" :goSearch="2">
+
+      </portal-header>
     </div>
     <div class="">
       <div class="xcontent2">

src/views/portal/case/components/sendMessage.vue

@@ -2,10 +2,13 @@
   <div class="input-area">
     <el-input
       v-model="inputContent"
+      type="textarea"
       class="input-placeholder"
       placeholder="有问题，尽管问"
       @keyup.enter.native="handleSend"
       :disabled="disabled"
+      :autosize="{ minRows: 2, maxRows: 4}"
+      resize="none"
     ></el-input>
     <div class="action-buttons">
       <el-button type="primary" size="small" class="start-btn" @click="handleNewConversation">