修改bug

src/assets/styles/my-common.scss

@@ -63,13 +63,17 @@
       border-bottom: 1px solid #c1cce3;
     }
 
+    .el-textarea {
+      --el-input-bg-color: #f5f7f9 !important;
+      --el-input-border-radius: 16px 2px 2px 16px;
+    }
+
     .right-footer {
       display: flex;
       align-items: center;
 
       :deep .el-input__wrapper {
-        background: #f5f7f9 !important;
-        border-radius: 16px;
+        border-radius: 16px !important;
       }
 
       .w-50 {
@@ -213,23 +217,28 @@
   // align-items: flex-end;
   align-items: center;
 }
-.file-msg{
+
+.file-msg {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.clip-path{
+
+.clip-path {
   margin: 8px 15px 8px 15px;
 }
-.clip-path-right{
+
+.clip-path-right {
 
   padding-right: 13px;
 }
+
 //转发下载图片的大小
-.zhuanfa{
+.zhuanfa {
   width: 22px;
   height: 22px;
 }
-.forwd{
-margin:0 16px;
+
+.forwd {
+  margin: 0 16px;
 }

src/components/IdentifyFont/IdentifyFont.vue

@@ -1,373 +1,374 @@
 <template>
-<!-- TODO 从我的文件过来默认进入第二形态loading,传参实现 -->
-  <!-- <el-dialog v-model="isOpen" title="文字识别" width="55%"> -->
-  <div class="container">
-    <div v-if="thisStep === 'start'" class="up_box">
-      <div class="left_box">
-        <div class="upimg_box">
-          <!-- TODO 拖拽设置不生效问题 ,但是测试那里可以实现拖拽，离大谱-->
-          <el-upload
-            v-if="!showImg"
-            class="avatar-uploader"
-            :drag="true"
-            action="http://192.168.1.28:8080/api/upload"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeUp"
-          >
-            <img src="@/assets/images/add.png" class="avatar" />
-            <span>将图片拖入框内/点击按钮上传图片</span>
-          </el-upload>
-          <div v-else class="img_show">
-            <img :src="toRaw(showImg)" class="avatar" />
+  <!-- TODO 从我的文件过来默认进入第二形态loading,传参实现 -->
+    <!-- <el-dialog v-model="isOpen" title="文字识别" width="55%"> -->
+    <div class="container">
+      <div v-if="thisStep === 'start'" class="up_box">
+        <div class="left_box">
+          <div class="upimg_box">
+            <!-- TODO 拖拽设置不生效问题 ,但是测试那里可以实现拖拽，离大谱-->
+            <el-upload
+              v-if="!showImg"
+              class="avatar-uploader"
+              :drag="true"
+              action="http://192.168.1.28:8080/api/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeUp"
+            >
+              <img src="@/assets/images/add.png" class="avatar" />
+              <span>将图片拖入框内/点击按钮上传图片</span>
+            </el-upload>
+            <div v-else class="img_show">
+              <img :src="toRaw(showImg)" class="avatar" />
+            </div>
+          </div>
+          <div class="sunmit_btn">
+            <el-upload
+              class="avatar-uploader"
+              action="http://192.168.1.28:8080/api/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeUp"
+            >
+              <span>选择本地图片</span>
+            </el-upload>
           </div>
         </div>
-        <div class="sunmit_btn">
-          <el-upload
-            class="avatar-uploader"
-            action="http://192.168.1.28:8080/api/upload"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeUp"
-          >
-            <span>选择本地图片</span>
-          </el-upload>
+        <div class="right_box">
+          <div class="upimg_box">
+            <el-upload
+              disabled
+              class="avatar-uploader"
+              action="http://192.168.1.28:8080/api/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+            >
+              <img src="@/assets/images/add.png" class="avatar" />
+              <span>点击按钮上传图片</span>
+            </el-upload>
+          </div>
+          <div class="sunmit_btn" @click="addlibraryImg">添加文库图片</div>
         </div>
       </div>
-      <div class="right_box">
-        <div class="upimg_box">
-          <el-upload
-            disabled
-            class="avatar-uploader"
-            action="http://192.168.1.28:8080/api/upload"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-          >
-            <img src="@/assets/images/add.png" class="avatar" />
-            <span>点击按钮上传图片</span>
-          </el-upload>
+      <div v-if="thisStep === 'loading'" class="load-box">
+        <div class="light_box">
+          <img :src="toRaw(showImg)" class="avatar" />
+          <div class="light"></div>
         </div>
-        <div class="sunmit_btn" @click="addlibraryImg">添加文库图片</div>
-      </div>
-    </div>
-    <div v-if="thisStep === 'loading'" class="load-box">
-      <div class="light_box">
-        <img :src="toRaw(showImg)" class="avatar" />
-        <div class="light"></div>
       </div>
-    </div>
-    <div v-if="thisStep === 'end'" class="end_box">
-      <div class="left_box">
-        <div class="upimg_box">
-          <div class="img_show">
-            <img :src="toRaw(showImg)" class="avatar" />
+      <div v-if="thisStep === 'end'" class="end_box">
+        <div class="left_box">
+          <div class="upimg_box">
+            <div class="img_show">
+              <img :src="toRaw(showImg)" class="avatar" />
+            </div>
+          </div>
+          <div class="sunmit_btn">
+            <!-- <el-upload
+                  class="avatar-uploader"
+                  action="http://192.168.1.28:8080/api/upload"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :before-upload="beforeUp"
+                > -->
+            <span @click="reClick">重新选择</span>
+            <!-- </el-upload> -->
           </div>
         </div>
-        <div class="sunmit_btn">
-          <!-- <el-upload
-                class="avatar-uploader"
-                action="http://192.168.1.28:8080/api/upload"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :before-upload="beforeUp"
-              > -->
-          <span @click="reClick">重新选择</span>
-          <!-- </el-upload> -->
-        </div>
-      </div>
-      <div class="right_box">
-        <div class="upimg_box">
-          <el-scrollbar>
-            <div class="text_box">
-              {{ textData }}
-            </div>
-          </el-scrollbar>
+        <div class="right_box">
+          <div class="upimg_box">
+            <el-scrollbar>
+              <div class="text_box">
+                {{ textData }}
+              </div>
+            </el-scrollbar>
+          </div>
+          <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
         </div>
-        <div class="sunmit_btn copy-qb" @click="copyQbUrl()">全部复制</div>
       </div>
     </div>
-  </div>
-  <!-- </el-dialog> -->
-  <PicTree
-    :openFile="openFile"
-    @close="openFile = false"
-    :fileUserTreeData="treeData"
-    @fileChangeMsg="fileChangeMsg"
-  ></PicTree>
-</template>
-
-<script setup>
-import { onMounted, ref, toRaw, watch } from "vue";
-import { ElMessage } from "element-plus";
-import Clipboard from "clipboard";
-import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
-import { picTree } from "@/api/search/search.js";
-import { ocrRemark, preview } from "@/api/common/common.js";
-const textData = ref(""); //解析出来的文字
-const showImg = ref(); //上传的图片
-const isOpen = ref(props.openFile);
-const thisStep = ref("start"); //解析进度 start,loading,end,
-const openFile = ref(false); //控制tree显示
-const treeData = ref(); //树节点数据
-
-const props = defineProps({
-  openFile: {
-    type: Boolean,
-    default: false,
-  },
-});
-watch(
-  () => props.openFile,
-  (newValue) => {
-    // console.log(111);
-    isOpen.value = newValue;
-  }
-);
-const handleAvatarSuccess = (msg, file) => {
-  // console.log("re", msg);
-  const flieData = toRaw(file);
-  // console.log("file", flieData);
-  // showImg.value = URL.createObjectURL(flieData.raw);
-  if (msg.code === 200) {
-    textData.value = msg.msg;
+    <!-- </el-dialog> -->
+    <PicTree
+      :openFile="openFile"
+      @close="openFile = false"
+      :fileUserTreeData="treeData"
+      @fileChangeMsg="fileChangeMsg"
+    ></PicTree>
+  </template>
+  
+  <script setup>
+  import { onMounted, ref, toRaw, watch } from "vue";
+  import { ElMessage } from "element-plus";
+  import Clipboard from "clipboard";
+  import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
+  import { picTree } from "@/api/search/search.js";
+  import { ocrRemark, preview } from "@/api/common/common.js";
+  const textData = ref(""); //解析出来的文字
+  const showImg = ref(); //上传的图片
+  const isOpen = ref(props.openFile);
+  const thisStep = ref("start"); //解析进度 start,loading,end,
+  const openFile = ref(false); //控制tree显示
+  const treeData = ref(); //树节点数据
+  
+  const props = defineProps({
+    openFile: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  watch(
+    () => props.openFile,
+    (newValue) => {
+      // console.log(111);
+      isOpen.value = newValue;
+    }
+  );
+  const handleAvatarSuccess = (msg, file) => {
+    // console.log("re", msg);
+    const flieData = toRaw(file);
+    // console.log("file", flieData);
+    // showImg.value = URL.createObjectURL(flieData.raw);
+    if (msg.code === 200) {
+      textData.value = msg.msg;
+      thisStep.value = "end";
+    } else {
+      thisStep.value = "start";
+      textData.value = null;
+      showImg.value = null;
+      ElMessage({ message: "识别失败", type: "error" });
+    }
+    console.log("textData", textData.value);
+  };
+  //文件上传前的钩子
+  const beforeUp = (raw) => {
+    // console.log('raw',raw);
+    showImg.value = URL.createObjectURL(raw);
+    thisStep.value = "loading";
+  };
+  // 复制功能调用的方法
+  const copyQbUrl = () => {
+    let clipboard = new Clipboard(".copy-qb", {
+      text: () => {
+        return textData.value;
+      },
+    });
+    clipboard.on("success", () => {
+      // console.log('success');
+      ElMessage({ message: "复制成功", type: "success" });
+      clipboard.destroy();
+    });
+    clipboard.on("error", () => {
+      // console.log('err');
+      clipboard.destroy();
+    });
+  };
+  // 选取文库图片
+  const addlibraryImg = async () => {
+    const res = await picTree();
+    console.log("res", res);
+    treeData.value = res;
+    openFile.value = true;
+  };
+  //确定选中图片
+  const fileChangeMsg = async (val) => {
+    console.log("val", toRaw(val));
+    const data = toRaw(val);
+    const imgRes = await preview(data.remark);
+    thisStep.value = "loading";
+    showImg.value = URL.createObjectURL(imgRes);
+    const res = await ocrRemark(data.remark);
     thisStep.value = "end";
-  } else {
+    textData.value = res.msg;
+    // console.log("res", res);
+    // console.log("imgRes", imgRes);
+  };
+  const reClick = () => {
     thisStep.value = "start";
     textData.value = null;
     showImg.value = null;
-    ElMessage({ message: "识别失败", type: "error" });
-  }
-  console.log("textData", textData.value);
-};
-//文件上传前的钩子
-const beforeUp = (raw) => {
-  // console.log('raw',raw);
-  showImg.value = URL.createObjectURL(raw);
-  thisStep.value = "loading";
-};
-// 复制功能调用的方法
-const copyQbUrl = () => {
-  let clipboard = new Clipboard(".copy-qb", {
-    text: () => {
-      return textData.value;
-    },
-  });
-  clipboard.on("success", () => {
-    // console.log('success');
-    ElMessage({ message: "复制成功", type: "success" });
-    clipboard.destroy();
-  });
-  clipboard.on("error", () => {
-    // console.log('err');
-    clipboard.destroy();
-  });
-};
-// 选取文库图片
-const addlibraryImg = async () => {
-  const res = await picTree();
-  console.log("res", res);
-  treeData.value = res;
-  openFile.value = true;
-};
-//确定选中图片
-const fileChangeMsg = async (val) => {
-  console.log("val", toRaw(val));
-  const data = toRaw(val);
-  const imgRes = await preview(data.remark);
-  thisStep.value = "loading";
-  showImg.value = URL.createObjectURL(imgRes);
-  const res = await ocrRemark(data.remark);
-  thisStep.value = "end";
-  textData.value = res.msg;
-  // console.log("res", res);
-  // console.log("imgRes", imgRes);
-};
-const reClick = () => {
-  thisStep.value = "start";
-  textData.value = null;
-  showImg.value = null;
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .up_box {
-    display: flex;
-    justify-content: center;
-  }
-  .left_box {
-    width: 300px;
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .container {
+    height: 100%;
+    background-color: #fff;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    margin-right: 48px;
-    .img_show {
-      width: 100%;
-      height: 100%;
+    justify-content: center;
+  
+    .up_box {
       display: flex;
-      align-items: center;
       justify-content: center;
-      img {
+    }
+    .left_box {
+      width: 300px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 48px;
+      .img_show {
         width: 100%;
-        // max-height: 100%;
-        // object-fit:cover; // 保持原比例缩小
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 100%;
+          // max-height: 100%;
+          // object-fit:cover; // 保持原比例缩小
+        }
+      }
+      .upimg_box {
+        width: 100%;
+        height: 300px;
+        border: 1px solid #c1cce3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .sunmit_btn {
+        margin-top: 24px;
+        width: 120px;
+        height: 32px;
+        background: #2e6bc8;
+        border-radius: 4px 4px 4px 4px;
+        color: #fff;
+        font-size: 14px;
+        line-height: 32px;
+        font-weight: 400;
+        text-align: center;
       }
     }
-    .upimg_box {
-      width: 100%;
-      height: 300px;
-      border: 1px solid #c1cce3;
+    .right_box {
+      width: 300px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .upimg_box {
+        width: 100%;
+        height: 300px;
+        border: 1px solid #c1cce3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .sunmit_btn {
+        margin-top: 24px;
+        width: 120px;
+        height: 32px;
+        background: #2e6bc8;
+        border-radius: 4px 4px 4px 4px;
+        color: #fff;
+        font-size: 14px;
+        line-height: 32px;
+        font-weight: 400;
+        text-align: center;
+      }
+      .text_box {
+        font-size: 14px;
+        font-weight: 500;
+        color: #000000;
+        line-height: 22px;
+      }
+    }
+    .load-box {
       display: flex;
       align-items: center;
       justify-content: center;
+      .light_box {
+        width: 320px;
+        height: 320px;
+        background-image: url("@/assets/images/light.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 100%;
+          // height: 100%;
+        }
+        .light {
+          width: 100%;
+          height: 1px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 255, 255, 0.7);
+          box-shadow: 0px 2px 10px 5px rgba(0, 255, 255, 0.3);
+          animation: move 2s infinite linear;
+        }
+        @keyframes move {
+          from {
+            top: 0px;
+          }
+  
+          /*网格移动到显示区域的外面*/
+          to {
+            top: 100%;
+          }
+        }
+      }
     }
-    .sunmit_btn {
-      margin-top: 24px;
-      width: 120px;
-      height: 32px;
-      background: #2e6bc8;
-      border-radius: 4px 4px 4px 4px;
-      color: #fff;
-      font-size: 14px;
-      line-height: 32px;
-      font-weight: 400;
-      text-align: center;
+    .end_box {
+      display: flex;
+      justify-content: center;
     }
   }
-  .right_box {
-    width: 300px;
+  :deep(.el-dialog__header) {
+    background-color: #eceff7;
+    margin-right: 0px;
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+  }
+  ::v-deep .avatar-uploader .el-upload {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    .upimg_box {
-      width: 100%;
-      height: 300px;
-      border: 1px solid #c1cce3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    img {
+      width: 40px;
+      height: 40px;
+      margin-bottom: 16px;
     }
-    .sunmit_btn {
-      margin-top: 24px;
-      width: 120px;
-      height: 32px;
-      background: #2e6bc8;
-      border-radius: 4px 4px 4px 4px;
-      color: #fff;
-      font-size: 14px;
-      line-height: 32px;
+    span {
+      font-size: 12px;
       font-weight: 400;
-      text-align: center;
+      color: #06286c;
     }
-    .text_box {
+  }
+  ::v-deep .sunmit_btn .avatar-uploader .el-upload {
+    span {
       font-size: 14px;
-      font-weight: 500;
-      color: #000000;
-      line-height: 22px;
+      font-weight: 400;
+      color: #fff;
     }
   }
-  .load-box {
+  ::v-deep .avatar-uploader .el-upload .el-upload-dragger {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    .light_box {
-      width: 320px;
-      height: 320px;
-      background-image: url("@/assets/images/light.png");
-      background-repeat: no-repeat;
-      background-size: contain;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      img {
-        width: 100%;
-        // height: 100%;
-      }
-      .light {
-        width: 100%;
-        height: 1px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 255, 255, 0.7);
-        box-shadow: 0px 2px 10px 5px rgba(0, 255, 255, 0.3);
-        animation: move 2s infinite linear;
-      }
-      @keyframes move {
-        from {
-          top: 0px;
-        }
-
-        /*网格移动到显示区域的外面*/
-        to {
-          top: 100%;
-        }
-      }
-    }
-  }
-  .end_box {
-    display: flex;
-    justify-content: center;
-  }
-}
-:deep(.el-dialog__header) {
-  background-color: #eceff7;
-  margin-right: 0px;
-}
-.avatar-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
-::v-deep .avatar-uploader .el-upload {
-  display: flex;
-  flex-direction: column;
-  img {
-    width: 40px;
-    height: 40px;
-    margin-bottom: 16px;
+    border: none;
   }
-  span {
-    font-size: 12px;
-    font-weight: 400;
-    color: #06286c;
+  
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
   }
-}
-::v-deep .sunmit_btn .avatar-uploader .el-upload {
-  span {
-    font-size: 14px;
-    font-weight: 400;
-    color: #fff;
+  
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
   }
-}
-::v-deep .avatar-uploader .el-upload .el-upload-dragger {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border: none;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
-
-.el-icon.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
-}
-</style>
+  </style>
+  

src/store/modules/websocket.js

@@ -66,7 +66,7 @@ const useWebsoctStore = defineStore('websoct', {
     },
     
     // 重新连接
-    reconnect(url) {
+   reconnect(url) {
       if (lockReconnect) return ElMessage({ message: "WebSocket重连失败,请尝试刷新界面", type: "error" });
       lockReconnect = true;
       setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多

src/views/liveChat/index.vue

@@ -137,6 +137,11 @@ const clickPerson = (index, item) => {
   searchData.value.map((i) => {
        if(i.fromId==websoctStore.messOne?.fromId){i.showCircel=false}
     });
+    const chatContainer = document.querySelector(".right-container");
+  // 计算滚动的目标位置
+  const targetScrollTop = chatContainer.scrollHeight;
+  // 设置滚动位置
+  chatContainer.scrollTop = targetScrollTop;
   msgRecordEvent(sendCont.data.toId);
 };
 //删除聊天
@@ -497,7 +502,7 @@ onMounted(() => {
             </div>
           </el-main>
           <!-- 底部 -->
-          <el-footer height="72px" class="right-footer">
+          <el-footer height="112px" class="right-footer">
             <!-- 发送文件 -->
             <img
               :src="sendFile"
@@ -513,6 +518,8 @@ onMounted(() => {
             <el-input
               v-model="messageText"
               class="w-50 m-2"
+              type="textarea"
+              :autosize="{ minRows: 3, maxRows:5 }"
               clearable
               size="small"
               placeholder="请输入聊天内容"
@@ -550,4 +557,7 @@ onMounted(() => {
   background: #fa5151;
   border-radius: 4px;
 }
+:deep(.el-textarea__inner) {
+  resize: none;
+}
 </style>