mdm-client 1.0.0

package/src/components/other/chatArea.vue

@@ -0,0 +1,727 @@
+<template>
+  <div class="chat">
+    <div class="chat-head">
+      <div class="chat-head-left">
+        <div class="logo"></div>
+        <div class="title">聊天</div>
+      </div>
+      <div class="close" @click="closeChatArea"></div>
+    </div>
+    <div class="chat-content" id="chat-content">
+      <div
+        :class="[
+          'message-item',
+          item.origin === localIdentity ? 'message-item-local' : 'message-item-other',
+        ]"
+        v-for="(item, index) of messageList"
+        :key="'m' + index"
+      >
+        <template v-if="item.origin === localIdentity">
+          <div class="message-item-content">
+            <div class="message-item-content-top">
+              <span>{{ item.timestamp }}</span>
+              <span class="name">{{ item.fromName }}</span>
+            </div>
+            <div class="message-item-content-value">
+              <template v-if="typeof item.content === 'string'">
+                <span v-if="item.contentType == 1">{{ item.content }}</span>
+                <el-image v-else class="message-image" :src="item.content" :preview-src-list="item.srcList" alt="" />
+              </template>
+              <template v-else>
+                <div v-html="renderContentWithImages(item.content)"></div>
+              </template>
+            </div>
+          </div>
+          <div class="message-item-avatar-wrapper">
+            <img class="message-item-avatar" src="../../assets/image/common/default_avatar.png" alt="" />
+          </div>
+        </template>
+        <template v-else>
+          <div class="message-item-avatar-wrapper">
+            <img class="message-item-avatar" src="../../assets/image/common/default_avatar.png" alt="" />
+          </div>
+          <div class="message-item-content">
+            <div class="message-item-content-top">
+              <span class="name">{{ item.fromName }}</span>
+              <span>{{ item.timestamp }}</span>
+            </div>
+            <div class="message-item-content-value">
+              <template v-if="typeof item.content === 'string'">
+                <span v-if="item.contentType == 1">{{ item.content }}</span>
+                <el-image v-else class="message-image" :src="item.content" :preview-src-list="item.srcList" alt="" />
+              </template>
+              <template v-else>
+                <div v-html="renderContentWithImages(item.content)"></div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="chat-foot">
+      <div class="message-input-container">
+        <div class="tool-wrapper">
+          <div class="tool-item emoji" tabindex="0" aria-label="选择表情" @click="showEmojiPanel" @keydown.enter="handleToolKeyDown"></div>
+          <el-upload
+            ref="uploadRef"
+            :headers="uploadHeaders"
+            :action="fileUploadUrl"
+            :multiple="false"
+            :show-file-list="false"
+            :on-success="handleFileUploaded"
+            :before-upload="handleBeforeUpload"
+          >
+            <div class="tool-item image" tabindex="0" aria-label="上传图片" @keydown.enter="handleToolKeyDown"></div>
+          </el-upload>
+        </div>
+        <div class="message-input-content" ref="messageInputRef" contenteditable="true" @keydown.enter.prevent="handleEnterPress" @paste="handlePaste" @click="saveCurrentRange" @blur="saveCurrentRange" placeholder="按Enter发送消息"></div>
+        <div class="send-wrapper" v-throttle-click:500="sendMessage" @keydown.enter="handleToolKeyDown">
+          <div class="btn">
+            <div class="btn-icon send" tabindex="0" aria-label="发送消息"></div>
+             <span>发送</span>
+          </div>
+        </div>
+      </div>
+      <el-popover
+        :value="emojiPanelVisible"
+        placement="top"
+        width="200"
+        trigger="manual"
+        popper-class="custom-popover"
+        @hide="emojiPanelVisible = false"
+      >
+        <div class="emotion-list">
+          <a
+            href="javascript:void(0);"
+            @click="insertEmojiToMessage(item)"
+            v-for="(item, index) in faceList"
+            :key="index"
+            class="emotion-item"
+            >{{ item }}</a>
+        </div>
+        <div slot="reference" class="emoji-panel-anchor"></div>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "@/utils/index";
+import emojiData from "@/assets/json/emoji.json";
+
+export default {
+  name: "ChatArea",
+  props: {
+    localIdentity: {
+      type: String
+    },
+    messageList: {
+      type: Array
+    },
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+    token: {
+      type: String,
+      default: "",
+    }
+  },
+  data() {
+    return {
+      faceList: [],
+      emojiPanelVisible: false,
+      savedRange: null,
+      showMessage: new ShowMessage()
+    };
+  },
+  computed: {
+    fileUploadUrl() {
+      return this.baseUrl + "/api/v1/common/uploadFile";
+    },
+    uploadHeaders() {
+      return {
+        satoken: this.token || ""
+      };
+    },
+    messageNum() {
+      return this.messageList.length;
+    }
+  },
+  watch: {
+    messageNum() {
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    }
+  },
+  mounted() {
+    emojiData.forEach((emo) => {
+      this.faceList.push(emo.char);
+    });
+    
+    // 给contenteditable添加placeholder效果
+    if (this.$refs.messageInputRef) {
+      this.$refs.messageInputRef.addEventListener('focus', () => {
+        if (this.$refs.messageInputRef.innerHTML === '') {
+          this.$refs.messageInputRef.removeAttribute('placeholder-active');
+        }
+      });
+      
+      this.$refs.messageInputRef.addEventListener('blur', () => {
+        if (this.$refs.messageInputRef.innerHTML === '') {
+          this.$refs.messageInputRef.setAttribute('placeholder-active', true);
+        }
+      });
+      
+      // 初始显示placeholder
+      if (this.$refs.messageInputRef.innerHTML === '') {
+        this.$refs.messageInputRef.setAttribute('placeholder-active', true);
+      }
+    }
+  },
+  methods: {
+    clearInputContent() {
+      if (this.$refs.messageInputRef) {
+        this.$refs.messageInputRef.innerHTML = "";
+      }
+    },
+    
+    scrollToBottom() {
+      let chatContainer = document.getElementById("chat-content");
+      if (!chatContainer) {
+        console.error("不存在消息队列容器");
+        return;
+      }
+      chatContainer.scrollTop = chatContainer.scrollHeight + 180;
+    },
+    
+    closeChatArea() {
+      this.$emit("close");
+    },
+    
+    getMessageContent() {
+      if (!this.$refs.messageInputRef) return "";
+      return this.$refs.messageInputRef.innerHTML;
+    },
+    
+    sendMessage() {
+      const messageContent = this.getMessageContent();
+      
+      if (!messageContent || messageContent.trim() === "") {
+        this.showMessage.message("error", "不能发送空白消息");
+        return;
+      }
+      
+      // 处理消息内容，可以是纯文本或包含图片的HTML
+      let finalContent = messageContent;
+      
+      // 发送消息
+      this.$emit("messageSend", {
+        content: finalContent,
+        contentType: this.isImage(finalContent) ? 2 : 1
+      });
+      
+      // 清空输入框
+      this.clearInputContent();
+    },
+    
+    handleEnterPress(e) {
+      if (!e.shiftKey) {
+        e.preventDefault();
+        this.sendMessage();
+      }
+    },
+    
+    isImage(url) {
+      if (typeof url !== 'string') return false;
+      return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url);
+    },
+    
+    renderContentWithImages(content) {
+      // 如果内容已经是HTML格式，则直接返回
+      return content;
+    },
+    
+    // 保存当前光标位置
+    saveCurrentRange() {
+      const selection = window.getSelection();
+      if (selection.rangeCount > 0) {
+        this.savedRange = selection.getRangeAt(0);
+      }
+    },
+    
+    // 恢复保存的光标位置
+    restoreSelection() {
+      if (this.savedRange) {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(this.savedRange);
+      } else if (this.$refs.messageInputRef) {
+        // 如果没有保存的范围，将光标放到内容的最后
+        this.$refs.messageInputRef.focus();
+        const range = document.createRange();
+        range.selectNodeContents(this.$refs.messageInputRef);
+        range.collapse(false); // 折叠到末尾
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+        this.savedRange = range;
+      }
+    },
+    
+    showEmojiPanel() {
+      // 切换表情面板
+      this.emojiPanelVisible = !this.emojiPanelVisible;
+    },
+    
+    insertEmojiToMessage(emoji) {
+      // 恢复光标位置
+      this.restoreSelection();
+      
+      if (!this.$refs.messageInputRef) return;
+      
+      // 获取当前选区
+      const selection = window.getSelection();
+      const range = selection.getRangeAt(0);
+      
+      // 创建包含表情的文本节点
+      const textNode = document.createTextNode(emoji);
+      
+      // 在选中位置插入表情
+      range.deleteContents();
+      range.insertNode(textNode);
+      
+      // 将光标移到插入表情后的位置
+      range.setStartAfter(textNode);
+      range.setEndAfter(textNode);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // 更新保存的范围
+      this.savedRange = range;
+      
+      // 聚焦输入框
+      this.$refs.messageInputRef.focus();
+      
+      // 关闭表情面板
+      this.emojiPanelVisible = false;
+    },
+    
+    handleFileUploaded(response) {
+      console.log('fileUploaded', response);
+      if(response.code == 200) {
+        const url = `${this.baseUrl}/api/v1/common/reviewFile/${response.data.fileID}?satoken=${this.token || ""}`;
+        this.$emit("messageSend", {
+          content: url,
+          contentType: 2
+        })
+        console.log('imageUrl', url);
+        
+      } else {
+        this.showMessage.message("error", "上传失败");
+      }
+    },
+    
+    insertImageToMessage(imageUrl) {
+      // 恢复光标位置
+      this.restoreSelection();
+      
+      if (!this.$refs.messageInputRef) return;
+      
+      // 获取选中区域
+      const selection = window.getSelection();
+      const range = selection.getRangeAt(0);
+      
+      // 创建图片元素
+      const imgElement = document.createElement('img');
+      imgElement.src = imageUrl;
+      imgElement.className = 'content-image';
+      
+      // 在选中位置插入图片
+      range.deleteContents();
+      range.insertNode(imgElement);
+      
+      // 将光标移到插入图片后的位置
+      range.setStartAfter(imgElement);
+      range.setEndAfter(imgElement);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // 更新保存的范围
+      this.savedRange = range;
+      
+      // 聚焦输入框
+      this.$refs.messageInputRef.focus();
+    },
+    
+    handleBeforeUpload(file) {
+      if (!this.isImage(file.name)) {
+        this.showMessage.message("error", "请上传图片");
+        return false;
+      } else if (file.size > 20 * 1024 * 1024) {
+        this.showMessage.message("error", "文件大小不得超过20M");
+        return false;
+      } else {
+        return true;
+      }
+    },
+    
+    handlePaste(e) {
+      const clipboardData = e.clipboardData;
+      if (!clipboardData) return;
+      
+      const items = clipboardData.items;
+      let hasImage = false;
+      
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.indexOf('image') !== -1) {
+          hasImage = true;
+          
+          // 处理图片粘贴
+          const blob = items[i].getAsFile();
+          const formData = new FormData();
+          formData.append('file', blob);
+          
+          // 上传图片
+          fetch(this.fileUploadUrl, {
+            method: 'POST',
+            body: formData
+          })
+          .then(response => response.json())
+          .then(result => {
+            if (result.url) {
+              const url = this.baseUrl + result.url.substring(result.url.indexOf("/equipmentphoto"));
+              this.insertImageToMessage(url);
+            }
+          })
+          .catch(error => {
+            console.error('上传粘贴的图片失败：', error);
+          });
+          
+          e.preventDefault();
+          break;
+        }
+      }
+      
+      // 如果没有图片，则默认行为（粘贴文本）
+      if (!hasImage) {
+        // 允许默认粘贴行为
+      }
+    },
+    
+    handleToolKeyDown(e) {
+      if (e.key === 'Enter') {
+        e.currentTarget.click();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.chat {
+  width: 347px;
+  height: 100%;
+  padding: 20px;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border: 1px solid var(--dialog-border-color);
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  
+  &-head {
+    width: 100%;
+    height: 42px;
+    border-bottom: 1px solid var(--dialog-border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 5px;
+    
+    &-left {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      
+      .logo {
+        width: 24px;
+        height: 24px;
+        background: var(--meeting-chat-logo) no-repeat center / 100% 100%;
+        margin-right: 12px;
+      }
+      
+      .title {
+        font-weight: 400;
+        font-size: 18px;
+        font-family: var(--title-font);
+        color: var(--theme-font-color);
+        white-space: nowrap;
+      }
+    }
+    
+    .close {
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+    }
+  }
+  
+  &-content {
+    padding-top: 20px;
+    width: 100%;
+    flex: 1;
+    max-height: 100%;
+    overflow-y: auto;
+    
+    &::-webkit-scrollbar {
+      width: 2px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+    
+    &::-webkit-scrollbar-track {
+      box-shadow: none !important;
+      background: transparent !important;
+      border-radius: 5px;
+    }
+    
+    .message-item {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 20px;
+      &-avatar-wrapper {
+        padding-top: 10px;
+      }
+      &-avatar {
+        width: 32px;
+        height: 32px;
+      }
+      
+      &-content {
+        width: calc(100% - 80px);
+        display: flex;
+        flex-direction: column;
+        
+        &-top {
+          display: flex;
+          flex-wrap: nowrap;
+          align-items: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: var(--meeting-chat-font-color);
+          margin-bottom: 1px;
+          
+          span {
+            white-space: nowrap;
+            line-height: 20px;
+          }
+          
+          .name {
+            max-width: 126px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+          }
+        }
+        
+        &-value {
+          border-radius: 6px;
+          padding: 4px 10px;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 23px;
+          color: var(--theme-font-color);
+          word-break: break-all;
+          max-width: 100%;
+          
+          .message-image, :deep(.content-image) {
+            max-width: 100%;
+            margin: 4px 0;
+            border-radius: 4px;
+          }
+        }
+      }
+      
+      &-local {
+        justify-content: flex-end;
+        .message-item-avatar {
+          margin-left: 10px;
+        }
+        
+        .message-item-content {
+          align-items: flex-end;
+          
+          &-top {
+            justify-content: flex-end;
+            .name {
+              margin-left: 12px;
+            }
+          }
+          
+          &-value {
+            color: var(--theme-font-color);
+            background: var(--meeting-chat-local-bg);
+          }
+        }
+      }
+      
+      &-other {
+        justify-content: flex-start;
+        
+        .message-item-avatar {
+          margin-right: 10px;
+        }
+        
+        .message-item-content {
+          align-items: flex-start;
+          &-top {
+            justify-content: flex-start;
+            .name {
+              margin-right: 12px;
+            }
+          }
+          &-value {
+            background: var(--meeting-chat-remote-bg);
+            color: var(--theme-font-color);
+          }
+        }
+      }
+    }
+  }
+  
+  &-foot {
+    width: 100%;
+    margin-top: 12px;
+    position: relative;
+    
+    .message-input-container {
+      background: var(--meeting-chat-input-bg);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--dialog-border-color);
+      padding: 10px;
+      
+      .tool-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 12px;
+      }
+      
+      .message-input-content {
+        min-height: 48px;
+        max-height: 96px;
+        overflow-y: auto;
+        color: var(--theme-font-color);
+        font-size: 14px;
+        line-height: 24px;
+        outline: none;
+        word-break: break-all;
+        
+        &:empty:before {
+          content: attr(placeholder);
+          color: var(--meeting-chat-font-color);
+          font-weight: 400;
+        }
+        
+        &[placeholder-active="true"]:empty:before {
+          content: attr(placeholder);
+          color: var(--meeting-chat-font-color);
+          font-weight: 400;
+        }
+        
+        .content-image {
+          max-width: 100px;
+          max-height: 100px;
+          vertical-align: middle;
+          margin: 2px;
+        }
+      }
+      
+      .send-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--theme-font-color);
+        font-family: var(--main-font);
+        .btn {
+          width: 74px;
+          height: 28px;
+          @include button;
+          @include btnPrimary;
+          border-radius: 14px !important;
+          &-icon {
+            margin-right: 6px !important;
+          }
+          .send {
+            background: url("../../assets/image/screenBlue/send-logo.png") no-repeat center / 100% 100%;
+          }
+        }
+      }
+      
+      .tool-item {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        transition: opacity 0.2s;
+        
+        &:hover {
+          opacity: 0.8;
+        }
+        
+        &.emoji {
+          background: var(--meeting-chat-emoji-icon) no-repeat center / 100% 100%;
+        }
+        
+        &.image {
+          background: var(--meeting-chat-image-icon) no-repeat center / 100% 100%;
+        }
+        
+      }
+    }
+    
+    .emoji-panel-anchor {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      top: 10px;
+      left: 20px;
+      opacity: 0;
+    }
+    
+    .emotion-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 10px;
+      
+      .emotion-item {
+        width: 20px;
+        font-size: 18px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+  }
+}
+
+:deep(.el-upload) {
+  display: block;
+}
+
+:deep(.custom-popover) {
+  background-color: #252e3d;
+  border: 1px solid var(--dialog-border-color);
+}
+</style>
+