im-uniapp/pages/conversation/chating/components/ChatingFooter/index.vue

<template>
  <view>
    <view>
      <view class="chat_footer">

        <view class="footer_action_area">
          <image v-if="inputBox"
              @click.prevent="updateInput"
              src="@/static/images/chating_footer_recording.png"
              alt=""
              srcset=""
          />

		  <image v-if="!inputBox"
              @click.prevent="updateInput"
              src="@/static/images/chating_footer_audio_recording.png"
              alt=""
              srcset=""
          />
        </view>

        <view class="input_content" v-if="inputBox">
          <CustomEditor class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
                        @blur="editorBlur" @input="editorInput"/>
        </view>

        <view class="input_content"
              v-if="!inputBox"
              style="position:relative;"
        >
          <!-- 录音提示区域 -->
          <view v-if="isRecording"
                style="position:absolute;left:50%;top:-120rpx;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;">
            <view :style="{
              background: willCancel ? 'rgba(255,80,80,0.95)' : 'rgba(0,0,0,0.85)',
              color: '#fff',
              borderRadius: '12rpx',
              padding: '18rpx 32rpx',
              fontSize: '28rpx',
              minWidth: '260rpx',
              textAlign: 'center',
              marginBottom: '10rpx',
            }">
              <text v-if="willCancel">松开手指，取消发送</text>
              <text v-else>正在讲话，已录制 {{recordingTime}} 秒，松开发送</text>
            </view>
          </view>
          <!-- 蒙版 -->
          <view v-if="isRecording" style="position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.08);z-index:5;border-radius:16rpx;"></view>
          <button
            class="record_btn"
            @touchstart="startRecord"
            @touchend="stopRecord"
            @touchcancel="cancelRecord"
            @touchmove="moveRecord"
            style="width:100%;height:100%;background:transparent;border:none;outline:none;display:flex;align-items:center;justify-content:center;z-index:20;position:relative;"
          >
            <text v-if="!isRecording">按住说话</text>
            <text v-else :style="willCancel ? 'color:#ff5050;' : 'color:#4a9cfc;'">{{ willCancel ? '松开手指，取消发送' : '正在说话，松开发送' }}</text>
          </button>
        </view>

        <view class="footer_action_area">
          <image
            class="emoji_action"
            v-if="inputBox && !showEmojiPicker"
            @click.prevent="toggleEmojiPicker"
            src="@/static/images/chating_footer_emoji.png"
            alt=""
            srcset=""
          />
          <image
            class="emoji_action"
            v-if="inputBox && showEmojiPicker"
            @click.prevent="closeEmojiAndFocusInput"
            src="@/static/images/chating_footer_audio_recording.png"
            alt=""
            srcset=""
          />
          <image
              v-show="!hasContent"
              @click.prevent="updateActionBar"
              src="@/static/images/chating_footer_add.png"
              alt=""
              srcset=""
          />
          <image v-show="hasContent" @touchend.prevent="sendTextMessage" src="@/static/images/send_btn.png"
                 alt="" srcset=""/>
        </view>
      </view>
      <chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
                          v-show="actionBarVisible"/>
      <u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
                      :closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
                      @close="showActionSheet = false">
      </u-action-sheet>
            <!-- Emoji 选择面板 -->
      <view v-if="showEmojiPicker">
        <view class="emoji-mask" @touchstart="showEmojiPicker = false" style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:998;"></view>
        <view class="emoji-picker" style="position:relative;z-index:999;">
          <EmojiPicker @select="onEmojiSelect" />
        </view>
      </view>
      
      <!-- 文件选择弹窗 -->
      <view v-if="showFileSelectModal" class="file-select-mask" @touchstart="showFileSelectModal = false">
        <view class="file-select-container" @touchstart.stop>
          <view class="file-select-header">
            <text class="file-select-title">选择文件</text>
            <text class="file-select-close" @click="showFileSelectModal = false">×</text>
          </view>
          <view class="file-select-tabs">
            <view 
              class="tab-item" 
              :class="{ active: currentFileTab === 'chat' }"
              @click="currentFileTab = 'chat'"
            >
              聊天文件
            </view>
            <view 
              class="tab-item" 
              :class="{ active: currentFileTab === 'system' }"
              @click="currentFileTab = 'system'"
            >
              系统文件
            </view>
          </view>
          <view class="file-select-content">
            <view v-if="currentFileTab === 'chat'" class="chat-files">
              <view v-if="chatFiles.length === 0" class="empty-state">
                <text class="empty-text">暂无聊天文件</text>
              </view>
              <view v-else class="file-list">
                <view 
                  v-for="file in chatFiles" 
                  :key="file.clientMsgID"
                  class="file-item"
                  @click="selectChatFile(file)"
                >
                  <image :src="getFileIcon(file)" class="file-icon" mode="aspectFit" />
                  <view class="file-info">
                    <text class="file-name">{{ getFileName(file) }}</text>
                    <text class="file-size">{{ getFileSize(file) }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view v-else-if="currentFileTab === 'system'" class="system-files">
                             <view class="file-options">
                 <view class="option-item" @click="chooseSystemFile('document')">
                   <image src="/static/images/file_message/file_pdf.png" class="option-icon" mode="aspectFit" />
                   <text class="option-text">文档</text>
                 </view>
                 <view class="option-item" @click="chooseSystemFile('image')">
                   <image src="/static/images/file_message/file_image.png" class="option-icon" mode="aspectFit" />
                   <text class="option-text">图片</text>
                 </view>
                 <view class="option-item" @click="chooseSystemFile('video')">
                   <image src="/static/images/file_message/file_unknown.png" class="option-icon" mode="aspectFit" />
                   <text class="option-text">视频</text>
                 </view>
                 <view class="option-item" @click="chooseSystemFile('audio')">
                   <image src="/static/images/file_message/file_unknown.png" class="option-icon" mode="aspectFit" />
                   <text class="option-text">音频</text>
                 </view>
               </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapGetters,
  mapActions
} from "vuex";
import {
  getPurePath,
  html2Text
} from "@/util/common";
import {
  offlinePushInfo
} from "@/util/imCommon";
import {
  ChatingFooterActionTypes,
  UpdateMessageTypes,
} from "@/constant";
import IMSDK, {
  IMMethods,
  MessageStatus,
  MessageType,
} from "openim-uniapp-polyfill";
import UParse from "@/components/gaoyia-parse/parse.vue";
import CustomEditor from "./CustomEditor.vue";
import ChatingActionBar from "./ChatingActionBar.vue";
import EmojiPicker from '@/components/EmojiPicker/index.vue';

const needClearTypes = [MessageType.TextMessage];

const albumChoose = [{
  name: "图片",
  type: ChatingFooterActionTypes.Album,
  idx: 0,
},
  {
    name: "拍照",
    type: ChatingFooterActionTypes.Camera,
    idx: 1,
  },
];

export default {
  components: {
    CustomEditor,
    ChatingActionBar,
    UParse,
    EmojiPicker,
  },
  props: {
    footerOutsideFlag: Number,
  },
  data() {
    return {
      inputBox: true,
      customEditorCtx: null,
      inputHtml: "",
      actionBarVisible: false,
      isInputFocus: false,
      actionSheetMenu: [],
      showActionSheet: false,
      isRecording: false,
      willCancel: false,
      recordingTime: 0,
      recordingTimer: null,
      showEmojiPicker: false,
      showFileSelectModal: false,
      currentFileTab: 'chat',
      chatFiles: [],
      recorderManager: null,
      recordFilePath: '',
      recordFileDuration: 0,
    };
  },
  computed: {
    ...mapGetters([
      "storeCurrentConversation",
      "storeCurrentGroup",
      "storeBlackList",
    ]),
    hasContent() {
      return html2Text(this.inputHtml) !== "";
    },
  },
  watch: {
    footerOutsideFlag(newVal) {
      this.onClickActionBarOutside();
    },
    showFileSelectModal(newVal) {
      if (newVal) {
        // 当弹窗显示时，获取聊天文件列表
        this.getChatFiles();
      }
    },
  },
  mounted() {
    this.setKeyboardListener();
    // 只在浏览器环境下添加事件监听
    if (typeof document !== 'undefined') {
      document.addEventListener('plusready', function() {
        // plus 相关代码
      });
    }
  },
  beforeDestroy() {
    this.disposeKeyboardListener();
  },
  methods: {
    updateInput() {
      this.inputBox = !this.inputBox;
      this.showEmojiPicker = false;
    },
    startRecord(e) {
      this.isRecording = true;
      this.willCancel = false;
      this.recordingTime = 0;
      if (this.recordingTimer) clearInterval(this.recordingTimer);
      this.recordingTimer = setInterval(() => {
        this.recordingTime++;
      }, 1000);
      // 录音开始
      if (!this.recorderManager) {
        this.recorderManager = uni.getRecorderManager();
        this.recorderManager.onStop(this.onRecordStop);
      }
      this.recordFilePath = '';
      this.recordFileDuration = 0;
      this.recorderManager.start({ format: 'mp3' });
    },
    stopRecord(e) {
      if (this.recordingTimer) clearInterval(this.recordingTimer);
      this.recordingTimer = null;
      this.isRecording = false;
      if (this.recorderManager) {
        this.recorderManager.stop();
      }
      this._startY = null;
    },
    cancelRecord(e) {
      if (this.recordingTimer) clearInterval(this.recordingTimer);
      this.recordingTimer = null;
      this.isRecording = false;
      this.willCancel = false;
      this.recordingTime = 0;
      if (this.recorderManager) {
        this.recorderManager.stop();
      }
      this._startY = null;
    },
    moveRecord(e) {
      // 判断手指是否上滑，通常通过e.touches[0].clientY与起始Y比较
      if (!this.isRecording) return;
      const touch = e.touches[0];
      if (!this._startY && touch) {
        this._startY = touch.clientY;
      }
      if (touch && this._startY) {
        // 上滑距离大于40px则判定为取消
        this.willCancel = (this._startY - touch.clientY) > 40;
      }
    },

    ...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
    async createTextMessage() {
      let message = "";
      const text = html2Text(this.inputHtml);
      message = await IMSDK.asyncApi(
          IMMethods.CreateTextMessage,
          IMSDK.uuid(),
          text
      );
      return message;
    },
    async sendTextMessage() {
      if (!this.hasContent) return;
      const message = await this.createTextMessage();
      this.sendMessage(message);
    },
    sendMessage(message) {
      this.pushNewMessage(message);
      if (needClearTypes.includes(message.contentType)) {
        this.customEditorCtx.clear();
      }
      this.$emit("scrollToBottom");
      IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
        recvID: this.storeCurrentConversation.userID,
        groupID: this.storeCurrentConversation.groupID,
        message,
        offlinePushInfo,
      })
          .then(({
                   data
                 }) => {
            this.updateOneMessage({
              message: data,
              isSuccess: true,
            });
          })
          .catch(({
                    data,
                    errCode,
                    errMsg
                  }) => {
            this.updateOneMessage({
              message: data,
              type: UpdateMessageTypes.KeyWords,
              keyWords: [{
                key: "status",
                value: MessageStatus.Failed,
              },
                {
                  key: "errCode",
                  value: errCode,
                },
              ],
            });
          });
    },

    // action
    onClickActionBarOutside() {
      if (this.actionBarVisible) {
        this.actionBarVisible = false;
      }
    },
    updateActionBar() {
      this.actionBarVisible = !this.actionBarVisible;
      this.showEmojiPicker = false;
    },
    editorReady(e) {
      this.customEditorCtx = e.context;
      this.customEditorCtx.clear();
    },
    editorFocus() {
      this.isInputFocus = true;
      this.showEmojiPicker = false;
      this.$emit("scrollToBottom");
    },
    editorBlur() {
      this.isInputFocus = false;
    },
    editorInput(e) {
      this.inputHtml = e.detail.html;
    },
    prepareMediaMessage(type) {
      if (type === ChatingFooterActionTypes.Album) {
        this.actionSheetMenu = [...albumChoose];
        this.showActionSheet = true;
      } else if (type === ChatingFooterActionTypes.File) {
        this.chooseFileAndSend();
      }
    },
    async chooseFileAndSend() {
      // 显示文件选择弹窗，类似微信的文件选择
      this.showFileSelectModal = true;
    },
    
    // 获取聊天文件列表
    getChatFiles() {
      // 从store中获取当前会话的消息列表，筛选出文件消息
      const messages = this.$store.getters.storeHistoryMessageList || [];
      this.chatFiles = messages.filter(msg => {
        return msg.contentType === 105; // 文件消息类型
      }).slice(-20); // 只显示最近20个文件
    },
    
    // 选择聊天文件
    selectChatFile(file) {
      // 直接转发这个文件消息
      this.forwardFileMessage(file);
      this.showFileSelectModal = false;
    },
    
    // 转发文件消息
    async forwardFileMessage(file) {
      try {
        const uuid = IMSDK.uuid();
        const fileElem = file.fileElem;
        
        // 创建新的文件消息
        const message = await IMSDK.asyncApi('createFileMessageByURL', IMSDK.uuid(), {
          filePath: fileElem.filePath || '',
          fileName: fileElem.fileName,
          uuid: uuid,
          sourceUrl: fileElem.sourceUrl,
          fileSize: fileElem.fileSize,
          fileType: fileElem.fileType,
        });
        
        // 发送消息
        this.sendMessage(message);
      } catch (e) {
        console.log('转发文件失败:', e);
        uni.showToast({
          title: '转发文件失败',
          icon: 'none'
        });
      }
    },
    
    // 获取文件图标
    getFileIcon(file) {
      const fileName = file.fileElem?.fileName?.toLowerCase() || '';
      if (fileName.endsWith('.pdf')) {
        return '/static/images/file_message/file_pdf.png';
      } else if (fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
        return '/static/images/file_message/file_word.png';
      } else if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) {
        return '/static/images/file_message/file_excel.png';
      } else if (fileName.endsWith('.ppt') || fileName.endsWith('.pptx')) {
        return '/static/images/file_message/file_ppt.png';
      } else if (fileName.endsWith('.zip') || fileName.endsWith('.rar') || fileName.endsWith('.7z')) {
        return '/static/images/file_message/file_zip.png';
      } else if (fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png') || fileName.endsWith('.gif')) {
        return '/static/images/file_message/file_image.png';
      } else {
        return '/static/images/file_message/file_unknown.png';
      }
    },
    
    // 获取文件名
    getFileName(file) {
      return file.fileElem?.fileName || '未知文件';
    },
    
    // 获取文件大小
    getFileSize(file) {
      const size = file.fileElem?.fileSize;
      if (!size) return '';
      if (size < 1024) {
        return size + ' B';
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(1) + ' KB';
      } else {
        return (size / (1024 * 1024)).toFixed(1) + ' MB';
      }
    },
    
    // 选择系统文件
    chooseSystemFile(type) {
      switch (type) {
        case 'document':
          // 选择文档
          uni.chooseMessageFile({
            count: 1,
            type: 'file',
            success: async (res) => {
              const file = res.tempFiles[0];
              await this.processFileAndSend(file);
            },
            fail: () => {
              uni.showToast({
                title: '请从聊天记录中选择文档',
                icon: 'none'
              });
            }
          });
          break;
        case 'image':
          // 选择图片
          uni.chooseImage({
            count: 1,
            sourceType: ['album'],
            success: async (res) => {
              const file = {
                name: 'image.jpg',
                size: 0,
                path: res.tempFilePaths[0],
                type: 'image'
              };
              await this.processFileAndSend(file);
            }
          });
          break;
        case 'video':
          // 选择视频
          uni.chooseVideo({
            sourceType: ['album'],
            success: async (res) => {
              const file = {
                name: 'video.mp4',
                size: res.size || 0,
                path: res.tempFilePath,
                type: 'video'
              };
              await this.processFileAndSend(file);
            }
          });
          break;
        case 'audio':
          // 选择音频
          uni.chooseMessageFile({
            count: 1,
            type: 'file',
            success: async (res) => {
              const file = res.tempFiles[0];
              await this.processFileAndSend(file);
            },
            fail: () => {
              uni.showToast({
                title: '请从聊天记录中选择音频文件',
                icon: 'none'
              });
            }
          });
          break;
      }
      this.showFileSelectModal = false;
    },
    

    

    
    async processFileAndSend(file) {
      try {
        // 处理文件名
        let fileName = file.name;
        if (!fileName) {
          const pathParts = file.path.split('/');
          fileName = pathParts[pathParts.length - 1] || 'unknown';
        }
        
        // 处理文件类型
        let fileType = file.type;
        if (!fileType) {
          const nameIdx = fileName.lastIndexOf(".") + 1;
          fileType = fileName.slice(nameIdx) || 'unknown';
        }
        
        const uuid = IMSDK.uuid();
        
        // 如果是图片类型，直接创建图片消息
        if (fileType.toLowerCase().includes('image') || fileType.toLowerCase().includes('jpg') || fileType.toLowerCase().includes('jpeg') || fileType.toLowerCase().includes('png') || fileType.toLowerCase().includes('gif')) {
          // 创建图片消息
          const message = await IMSDK.asyncApi(
            IMMethods.CreateImageMessageFromFullPath,
            IMSDK.uuid(),
            file.path
          );
          this.sendMessage(message);
          return;
        }
        
        // 先保存到本地
        uni.saveFile({
          tempFilePath: file.path,
          success: (saveRes) => {
            let savedFilePath = saveRes.savedFilePath;
            // 用 plus.io 转换为原生绝对路径
            if (typeof plus !== 'undefined') {
              plus.io.resolveLocalFileSystemURL(savedFilePath, (entry) => {
                IMSDK.asyncApi(IMMethods.UploadFile, uuid, {
                  name: fileName,
                  contentType: fileType,
                  uuid: uuid,
                  filepath: entry.fullPath
                })
                .then(({ data }) => {
                  let sourceUrl = data.url;
                  IMSDK.asyncApi('createFileMessageByURL', IMSDK.uuid(), {
                    filePath: entry.fullPath,
                    fileName: fileName,
                    uuid: uuid,
                    sourceUrl: sourceUrl,
                    fileSize: file.size || 0,
                    fileType: fileType,
                  })
                  .then((message) => {
                    IMSDK.asyncApi('sendMessageNotOss', IMSDK.uuid(), {
                      recvID: this.storeCurrentConversation.userID,
                      groupID: this.storeCurrentConversation.groupID,
                      message: message,
                      offlinePushInfo: {
                        title: '你有新消息',
                        desc: '新消息',
                        ex: '',
                        iOSPushSound: '+1',
                        iOSBadgeCount: true,
                      }
                    })
                    .then(({ data }) => {
                      // 1. 本地新增消息
                      this.pushNewMessage(message);
                      // 2. 更新消息状态
                      this.updateOneMessage({
                        message: data,
                        isSuccess: true,
                      });
                      this.$emit("scrollToBottom");
                    })
                    .catch(({ errCode, errMsg }) => {
                      // 发送失败时也要更新消息状态为失败
                      this.updateOneMessage({
                        message: message,
                        type: UpdateMessageTypes.KeyWords,
                        keyWords: [
                          { key: "status", value: MessageStatus.Failed },
                          { key: "errCode", value: errCode },
                        ],
                      });
                    });
                  })
                  .catch(() => {
                    // 忽略错误提示
                  });
                })
                .catch(() => {
                  // 忽略错误提示
                });
              }, () => {
                // 忽略路径转换失败
              });
            }
          },
          fail: () => {
            // 忽略保存失败
          }
        });
      } catch (e) {
        console.log('处理文件失败:', e);
      }
    },

    // from comp
    batchCreateImageMesage(paths) {
      paths.forEach(async (path) => {
        const message = await IMSDK.asyncApi(
            IMMethods.CreateImageMessageFromFullPath,
            IMSDK.uuid(),
            getPurePath(path)
        );
        this.sendMessage(message);
      });
    },
    selectClick({
                  idx
                }) {
      if (idx === 0) {
        this.chooseOrShotImage(["album"]).then((paths) =>
            this.batchCreateImageMesage(paths)
        );
      } else {
        this.chooseOrShotImage(["camera"]).then((paths) =>
            this.batchCreateImageMesage(paths)
        );
      }
    },
    chooseOrShotImage(sourceType) {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: 9,
          sizeType: ["compressed"],
          sourceType,
          success: function ({
                               tempFilePaths
                             }) {
            resolve(tempFilePaths);
          },
          fail: function (err) {
            reject(err);
          },
        });
      });
    },

    // keyboard
    keyboardChangeHander({
                           height
                         }) {
      if (height > 0) {
        if (this.actionBarVisible) {
          this.actionBarVisible = false;
        }
      }
    },
    setKeyboardListener() {
      uni.onKeyboardHeightChange(this.keyboardChangeHander);
    },
    disposeKeyboardListener() {
      uni.offKeyboardHeightChange(this.keyboardChangeHander);
    },
    toggleEmojiPicker() {
      this.showEmojiPicker = !this.showEmojiPicker;
      if (!this.showEmojiPicker && this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
        // 关闭emoji面板时再focus
        this.$refs.customEditor.editorCtx.focus();
      }
    },
    closeEmojiAndFocusInput() {
      this.showEmojiPicker = false;
      // 只在这里主动focus
      if (this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
        this.$refs.customEditor.editorCtx.focus();
      }
    },
    onEmojiSelect(emoji) {
      this.inputHtml += emoji;
      if (this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
        this.$refs.customEditor.editorCtx.setContents({
          html: this.inputHtml
        });
      }
      // 不做任何focus/blur
    },
    async onRecordStop(res) {
      let tempFilePath = res.tempFilePath;
      let fileName = tempFilePath.split('/').pop();
      let fileType = fileName.split('.').pop();
      let uuid = IMSDK.uuid();
      let duration = this.recordingTime;
      if (!duration || isNaN(duration) || duration < 1) {
        this.recordingTime = 0;
        return;
      }
      // 先保存到本地
      uni.saveFile({
        tempFilePath,
        success: (saveRes) => {
          let savedFilePath = saveRes.savedFilePath;
          // 用 plus.io 转换为原生绝对路径
          if (typeof plus !== 'undefined') {
            plus.io.resolveLocalFileSystemURL(savedFilePath, (entry) => {
              IMSDK.asyncApi('uploadFile', uuid, {
                name: fileName,
                contentType: fileType,
                uuid: uuid,
                filepath: entry.fullPath
              })
              .then(({ data }) => {
                let sourceUrl = data.url;
                IMSDK.asyncApi('createSoundMessageByURL', IMSDK.uuid(), {
                  uuid: uuid,
                  soundPath: entry.fullPath,
                  sourceUrl: sourceUrl,
                  dataSize: res.fileSize || 0,
                  duration: duration,
                  soundType: fileType
                })
                .then((message) => {
                  IMSDK.asyncApi('sendMessageNotOss', IMSDK.uuid(), {
                    recvID: this.storeCurrentConversation.userID,
                    groupID: this.storeCurrentConversation.groupID,
                    message: message,
                    offlinePushInfo: {
                      title: '你有新消息',
                      desc: '新消息',
                      ex: '',
                      iOSPushSound: '+1',
                      iOSBadgeCount: true,
                    }
                  })
                  .then(({ data }) => {
                    // 1. 本地新增消息
                    this.pushNewMessage(message);
                    // 2. 更新消息状态
                    this.updateOneMessage({
                      message: data,
                      isSuccess: true,
                    });
                    this.$emit("scrollToBottom");
                  })
                  .catch(({ errCode, errMsg }) => {
                    // 发送失败时也要更新消息状态为失败
                    this.updateOneMessage({
                      message: message,
                      type: UpdateMessageTypes.KeyWords,
                      keyWords: [
                        { key: "status", value: MessageStatus.Failed },
                        { key: "errCode", value: errCode },
                      ],
                    });
                  });
                })
                .catch(() => {
                  // 忽略错误提示
                });
              })
              .catch(() => {
                // 忽略错误提示
              });
            }, () => {
              // 忽略路径转换失败
            });
          }
        },
        fail: () => {
          // 忽略保存失败
        }
      });
      this.recordingTime = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.custom_editor {
  img {
    vertical-align: sub;
  }
}

.forbidden_footer {
  width: 100%;
  height: 112rpx;
  color: #8e9ab0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #f0f2f6;
}

.chat_footer {
  display: flex;
  align-items: center;
  // background-color: #e9f4ff;
  background: #f0f2f6;
  // height: 50px;
  max-height: 120px;
  padding: 24rpx 20rpx;

  .input_content {
    flex: 1;
    min-height: 30px;
    max-height: 120px;
    margin: 0 24rpx;
    border-radius: 16rpx;
    position: relative;

    .record_btn {
      // background-color: #3c9cff;
      background: #fff;
      color: black;
      height: 30px;
      font-size: 24rpx;
    }
  }

  .quote_message {
    @include vCenterBox();
    justify-content: space-between;
    margin-top: 12rpx;
    padding: 8rpx;
    // padding-top: 20rpx;
    border-radius: 6rpx;
    background-color: #fff;
    color: #666;

    .content {
      /deep/ uni-view {
        @include ellipsisWithLine(2);
      }
    }
  }

  .footer_action_area {
    display: flex;
    align-items: center;

    .emoji_action {
      margin-right: 24rpx;
    }

    image {
      width: 26px;
      height: 26px;
    }
  }

  .send_btn {
    height: 30px;
    line-height: 30px;
    background-color: #4a9cfc;
    padding: 0 8px;
    border-radius: 4px;
    color: #fff;
  }
}

.emoji-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 998;
}
.emoji-picker {
  position: relative;
  z-index: 999;
}

.file-select-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.file-select-container {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.file-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.file-select-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.file-select-close {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 4px;
}

.file-select-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}

.tab-item.active {
  color: #4a9cfc;
  border-bottom-color: #4a9cfc;
  background: rgba(74, 156, 252, 0.05);
}

.file-select-content {
  max-height: 400px;
  overflow-y: auto;
}

.chat-files {
  padding: 16px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-item:hover {
  background: #e9ecef;
}

.file-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #999;
}

.system-files {
  padding: 24px;
}

.file-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.option-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

.option-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}


</style>