wallet_app/src/views/im/chat/index.vue

<template>
  <div
    class="container"
    :style="{ height: `calc(100% - ${currentBottomHeight}px)` }"
  >
    <div class="chat-bg"></div>
    <!-- 顶部导航 -->
    <div class="header-chat">
      <svg-icon class="page-icon" name="lf-arrow" @click="goBack" />
      <div class="header-title">{{ wsStore.toUserInfo.nickname }}</div>
      <svg-icon class="page-icon" name="more" @click="goDetail" />
    </div>

    <!-- 群公告 -->
    <div class="groupNotice" v-if="wsStore.toUserInfo.type == 'group'">
      <div class="m-ellipsis">{{ wsStore.toUserInfo.notice }}</div>
      <svg-icon class="item-icon" name="right1" />
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-list" ref="chatListRef">
      <van-loading class="load-box" size="24px" v-if="wsStore.loading">加载中...</van-loading>
      <template v-else>
      <div v-for="(item, index) in imMessages" :key="index">
        <div class="chat-time">
          {{ item.createDate || formatTime(Date.now()) }}
        </div>
        <div class="box" v-if="item.contentType !== MSG_TYPE.NOTICE">
          <div
            class="list-item"
            :class="isSender(item.toUsername, item) ? '' : 'flex-reverse'"
          >
            <!-- 头像 -->
            <van-image
              class="list-img"
              :class="isSender(item.toUsername, item) ? 'mr12' : 'ml12'"
              round
              :src="item.sender?item.sender.avatar:item.avatar"
              @click="goToPage(item)"
            />
            <!-- 内容 -->
            <div class="list-cont">
              <div>{{ item.sender?item.sender.nickname: (item.nickname || item.fromUsername || "匿名用户") }}</div>

              <!-- 文本消息 -->
              <div class="content" v-if="item.contentType === MSG_TYPE.TEXT" @click="onLongPress(item)">
                {{ item.content }}
              </div>

              <!-- 图片消息 -->
              <div
                class="img-message"
                v-else-if="item.contentType === MSG_TYPE.IMAGE"
              >
                <van-image
                  :src="item?.localUrl || IM_PATH + item.url"
                  style="max-width: 120px; border-radius: 8px"
                  @click="previewImage(item)"
                />
              </div>

              <!-- 名片消息 -->
              <div
                class="content card-message"
                v-else-if="item.contentType === 3"
              >
                <div class="card-title">名片</div>
                <div class="card-name">{{ item.content }}</div>
              </div>

              <!-- 录音消息 -->
              <div
                class="audio-message"
                v-else-if="item.contentType === MSG_TYPE.AUDIO"
              >
                <messageAudio
                  :src="item?.localUrl || IM_PATH + item.url"
                  :isSender="isSender(item.toUsername, item)"
                />
              </div>

              <!-- 语音消息 -->
              <div class="content" v-if="item.contentType === Constant.REJECT_AUDIO_ONLINE || item.contentType === Constant.REJECT_VIDEO_ONLINE">[对方拒绝]</div>
              <div class="content" v-if="item.contentType === Constant.CANCELL_AUDIO_ONLINE || item.contentType === Constant.CANCELL_VIDEO_ONLINE">[通话结束]</div>
            </div>
          </div>
        </div>
        <div class="chat-time" v-if="item.contentType === MSG_TYPE.NOTICE">
          {{ item.content }}
        </div>
      </div>
      </template>
    </div>

    <!-- @页面 -->
    <AtUserList ref="atList" @select="onSelectUser" />
    <!-- 撤回弹窗 -->
    <van-action-sheet
      v-model:show="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      @select="onActionSelect"
    />

    <!-- 输入框 -->
    <div class="page-foot">
      <div class="flex-box">
        <!-- 录音/文字切换按钮 -->
        <svg-icon
          type="button"
          class="page-icon"
          :name="voiceMode ? 'keyboard' : 'voice'"
          @click="toggleVoiceMode"
        />

        <!-- 文字输入框 或 按住说话按钮 -->
        <template v-if="!voiceMode">
          <van-field
            rows="1"
            type="textarea"
            :border="false"
            autosize
            class="input"
            v-model="text"
            @focus="onFocus"
            placeholder="输入文本"
            @keypress="handleKeyPress"
            @keyup.enter="sendMessage"
          />
          <!-- :disabled="deletefriend.includes(wsStore.toUserInfo.uuid)" -->
        </template>

        <template v-else>
          <div
            class="hold-talk-btn"
            @touchstart.prevent.stop="handleTouchStart"
            @touchmove.prevent.stop="handleTouchMove"
            @touchend.prevent.stop="handleTouchEnd"
          >
            {{ cancelRecording ? "松开手指，取消发送" : "按住说话" }}
          </div>
        </template>
        <svg-icon
          class="page-icon mr12 emoji-toggle"
          name="emoji"
          @click="toggleAppBox(1)"
        />
        <svg-icon
          class="page-icon tools-toggle"
          name="add2"
          @click="toggleAppBox(2)"
        />
      </div>

      <!-- 录音状态浮层 -->
      <!-- <div v-if="recording" class="recording-toast">
        <div v-if="cancelRecording" class="cancel-msg">松开手指，取消发送</div>
        <div v-else class="send-msg">松开发送，上滑取消</div>
      </div> -->
      <div v-if="recording" class="recording-toast">
        <div class="mic-icon"></div>
        <div v-if="cancelRecording" class="cancel-msg">松开手指，取消发送</div>
        <div v-else class="send-msg">手指上滑，取消发送</div>
      </div>

      <!-- 表情面板 -->
      <div
        class="app-box"
        v-show="showEmoji"
        :style="{ height: `${appBoxHeight}px` }"
        ref="emojiRef"
      >
        <div>
          <span
            v-for="(emoji, index) in emojis"
            :key="index"
            class="emoji-item"
            @click="insertEmoji(emoji)"
          >
            {{ emoji }}
          </span>
        </div>
      </div>

      <!-- 工具栏面板 -->
      <div
        class="app-box"
        v-show="showTools"
        :style="{ height: `${appBoxHeight}px` }"
        ref="toolsRef"
      >
        <div class="tool-btn">
          <van-uploader :after-read="afterRead" :before-read="beforeRead">
            <svg-icon class="tool-icon" name="tp" />
          </van-uploader>
          <div>图片</div>
        </div>
        <!-- <div class="tool-btn">
          <svg-icon class="tool-icon" name="ps" />
          <div>拍摄</div>
        </div> -->
        <div class="tool-btn" v-if="wsStore.toUserInfo.type == 'user'">
          <svg-icon
            class="tool-icon"
            name="yyth"
            @click="startAudioOnline(Constant.DIAL_AUDIO_ONLINE, 'audio')"
          />
          <div>语音通话</div>
        </div>
        <div class="tool-btn" v-if="wsStore.toUserInfo.type == 'user'">
          <svg-icon
            class="tool-icon"
            name="spth"
            @click="startAudioOnline(Constant.DIAL_VIDEO_ONLINE, 'video')"
          />
          <div>视频通话</div>
        </div>
        <!-- <div class="tool-btn">
          <svg-icon class="tool-icon" name="mp" />
          <div>名片</div>
        </div> -->
      </div>
    </div>

  </div>
</template>

<script setup> 
import { useRouter, useRoute } from "vue-router";
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
import { useWalletStore } from "@/stores/modules/walletStore.js";
import { Keyboard } from "@capacitor/keyboard";
import { Capacitor } from "@capacitor/core";
import { MSG_TYPE, MESSAGE_TYPE_USER,MESSAGE_TYPE_GROUP,MESSAGE_REVOKE,MESSAGE_REVOKE_GROUP } from "@/common/constant/msgType";
import messageAudio from "@/views/im/components/messageAudio/index.vue";
import { showToast, showImagePreview } from "vant";
import { useWebRTCStore } from "@/stores/modules/webrtcStore";
import * as Constant from "@/common/constant/Constant";
import { soundVoice } from "@/utils/notifications.js";
import AtUserList from "./components/AtUserList/index.vue";

const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
// 路由 & store
const router = useRouter();
const route = useRoute();
const wsStore = useWebSocketStore();
const walletStore = useWalletStore();
const rtcStore = useWebRTCStore();

// 输入框文本
const text = ref("");

// 状态管理
const keyboardHeight = ref(0);
const showEmoji = ref(false);
const showTools = ref(false);
const appBoxHeight = ref(210);
const chatListRef = ref(null);
const emojiRef = ref(null);
const toolsRef = ref(null);
const deletefriend = ref([])
// 表情数组
const emojis = [
  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣",
  "😊", "😇", "🙂", "🙃", "😉", "😌", "😍","😜","🤪","🫣","🤔","🤤","🥲","😋",
  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣",
];
const atList = ref();

const isSender = (toUsername, item) => {
  if(item?.sender){
    return walletStore.account !== item.sender.uuid;
  }
  return walletStore.account === toUsername;
};

const imMessages = computed(() =>{
  wsStore.funUpdateUnread(wsStore.toUserInfo.uuid);
  return wsStore.messages.filter(item =>{
    if(item.messageType == MESSAGE_TYPE_GROUP && wsStore.toUserInfo.type != 'user') {
      return item 
    }
     if(item.messageType == MESSAGE_TYPE_USER &&   wsStore.toUserInfo.type == 'user') {
      return item
     } 
  })
})


// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (chatListRef.value) {
      const el = chatListRef.value;
      el.scrollTop = el.scrollHeight;
    }
  });
};
watch(
  () => wsStore.indexs,
  (newVal,oldVal) => {
    if (newVal !== oldVal) {
      scrollToBottom();
    }
  }
);
// 平台判断
const isMobile = Capacitor.getPlatform() !== "web";

// 计算当前底部总高度
const currentBottomHeight = computed(() => {
  if (keyboardHeight.value > 0) return keyboardHeight.value;
  if (showEmoji.value || showTools.value) return appBoxHeight.value;
  return 0;
});

// 切换表情/工具面板
const toggleAppBox = async (type) => {
  if(wsStore.chatDelAuth[ wsStore.toUserInfo.uuid]){
    showToast(`${wsStore.toUserInfo.type == 'user' ? '对方已删除' : '您已不在群聊里面'}`);
    return;
  }
  if (isMobile) await Keyboard.hide();
  keyboardHeight.value = 0;
  if (type === 1) {
    showEmoji.value = !showEmoji.value;
    showTools.value = false;
  } else {
    showTools.value = !showTools.value;
    showEmoji.value = false;
  }
  scrollToBottom();
};

// 插入表情
const insertEmoji = (emoji) => {
  text.value += emoji;
};

// 预览图片
const previewImage = (item) => {
  const imageList = wsStore.messages
    .filter((m) => m.contentType === MSG_TYPE.IMAGE)
    .map((m) => m.localUrl || IM_PATH + m.url);

  const index = imageList.findIndex(
    (url) => url === (item.localUrl || IM_PATH + item.url)
  );

  showImagePreview({
    images: imageList,
    startPosition: index,
  });
};

const onFocus = () => {
  // 隐藏所有面板
  showEmoji.value = false;
  showTools.value = false;
  if (isMobile) setupKeyboardListeners();
  scrollToBottom();
};

// 键盘监听
const setupKeyboardListeners = async () => {
  Keyboard.addListener("keyboardWillShow", (info) => {
    keyboardHeight.value = info.keyboardHeight;
  });

  Keyboard.addListener("keyboardWillHide", () => {
    keyboardHeight.value = 0;
  });
};

// 录音相关状态
const voiceMode = ref(false); // false: 文字输入, true: 语音模式
const recording = ref(false);
const cancelRecording = ref(false);
const startY = ref(0);
let mediaRecorder = null;
let audioChunks = [];

// 切换文字/语音输入模式
const toggleVoiceMode = () => {
  if(wsStore.chatDelAuth[ wsStore.toUserInfo.uuid]){
    showToast(`${wsStore.toUserInfo.type == 'user' ? '对方已删除' : '您已不在群聊里面'}`);
    return;
  }
  voiceMode.value = !voiceMode.value;
  // 切换时关闭表情和工具面板，隐藏键盘
  showEmoji.value = false;
  showTools.value = false;
  if (isMobile) Keyboard.hide();
  keyboardHeight.value = 0;
  scrollToBottom();
};

// 录音事件
const handleTouchStart = async (e) => {
  startY.value = e.touches[0].clientY;
  cancelRecording.value = false;
  recording.value = true;
  audioChunks = [];

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream, {
      mimeType: "audio/webm; codecs=opus",
    });
    mediaRecorder.ondataavailable = (ev) => {
      audioChunks.push(ev.data);
    };
    mediaRecorder.start(1000);
    console.log("开始录音");
  } catch (err) {
    console.error("麦克风权限获取失败", err);
    recording.value = false;
  }
};
// 录音
const handleTouchMove = (e) => {
  const currentY = e.touches[0].clientY;
  if (startY.value - currentY > 50) {
    cancelRecording.value = true;
  } else {
    cancelRecording.value = false;
  }
};

// 录音发送
const handleTouchEnd = () => {
  if (!mediaRecorder) return;
  mediaRecorder.stop();
  mediaRecorder.stream.getTracks().forEach((t) => t.stop());
  recording.value = false;

  mediaRecorder.onstop = async () => {
    if (cancelRecording.value) {
      console.log("录音取消");
      return;
    }
    if (audioChunks.length === 0) return;
    const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
    const arrayBuffer = await audioBlob.arrayBuffer();
    const audioData = new Uint8Array(arrayBuffer);

    wsStore.sendMessage({
      // content: "",
      content: JSON.stringify({ 
        content: "",
        msgId: `ms${Date.now()}`, // 消息id
      }), 
      contentType: MSG_TYPE.AUDIO,
      messageType: wsStore.toUserInfo.type == 'user'?MESSAGE_TYPE_USER:MESSAGE_TYPE_GROUP,
      fileSuffix: "wav", // 使用webm后缀更准确
      file: audioData, // 将Uint8Array转为普通数组
    });
    scrollToBottom();
    console.log("语音已发送");
  };
};

// 监听输入 @
const handleKeyPress = (e) => {
  if(wsStore.toUserInfo.type == 'user') return;
  if (e.key === "@") {
    atList.value.open(); // 打开选人弹窗
  }
};

// 选择用户回填输入框
const onSelectUser = (user) => {
  text.value += `${user.nickname} `;
};
// 撤回
const currentMsg = ref('');
const showActionSheet = ref(false)
const actions = [
  { name: "复制", key: "copy" },
  { name: "撤回", key: "revoke" },
];
const onLongPress = (msg) => {
  currentMsg.value = msg;
  showActionSheet.value = true;
};
const onActionSelect = (action) => {
  if (!currentMsg.value) return;

  if (action.key === "copy") {
    navigator.clipboard.writeText(currentMsg.value.content);
    showToast("已复制");
  } else if (action.key === "revoke") {
    const message = {
      content: JSON.stringify({ 
        content: '',
        msgId: currentMsg.value.id + '',
      }), 
      contentType: MSG_TYPE.NOTICE, // 1: 文本消息
      messageType: wsStore.toUserInfo.type == 'user'?MESSAGE_REVOKE:MESSAGE_REVOKE_GROUP,
    };
    wsStore.sendMessage(message);
    currentMsg.value.revoked = true;
  }
  showActionSheet.value = false;
};

// 发送消息
const sendMessage = () => {
  if(wsStore.chatDelAuth[wsStore.toUserInfo.uuid]){
    showToast(`${wsStore.toUserInfo.type == 'user' ? '对方已删除' : '您已不在群聊里面'}`);
    return;
  }
  if (!text.value.trim()) return;
  // content: JSON.stringify({
    // content: text.value,
    //   msgId: Math.random(),
    //   cc: [].join(",")
    // }),
  const message = {
    content: JSON.stringify({ 
      content: text.value,
      msgId: `ms${Date.now()}`, // 消息id
    }), 
    contentType: MSG_TYPE.TEXT, // 1: 文本消息
    messageType: wsStore.toUserInfo.type == 'user'?MESSAGE_TYPE_USER:MESSAGE_TYPE_GROUP,
  };
  wsStore.sendMessage(message);
  text.value = "";
  scrollToBottom();
};

// 发送图片消息
const afterRead = async (file) => { 
  const arrayBuffer = await file.file.arrayBuffer();
  const message = {
    // content: text.value, // 如果有文本内容
    content: JSON.stringify({ 
      content: text.value,
      msgId: `ms${Date.now()}`, // 消息id
    }), 
    contentType: MSG_TYPE.IMAGE, // 音频消息类型
    messageType: wsStore.toUserInfo.type == 'user'?MESSAGE_TYPE_USER:MESSAGE_TYPE_GROUP,
    fileSuffix: file.file.type, // 使用webm后缀更准确
    file: new Uint8Array(arrayBuffer), // 将Uint8Array转为普通数组
  };

  wsStore.sendMessage(message);
  scrollToBottom();
};
// 图片类型
const beforeRead = (file) => {
  const realFile = file.file || file;
  const type = realFile.type;
  const name = realFile.name || "";

  if (type === "image/svg+xml" || name.endsWith(".svg")) {
    showToast("不支持上传 SVG 格式的图片");
    return false;
  }
  return true;
};

//  创建呼叫:开启语音电话: 调试用，正式逻辑读src/views/im/hook/messagesHook.js
// ==== 1. 发起语音通话 ====
const startAudioOnline = async (contentType, streamType) => {
  // 清理被呼叫者信息
  wsStore.toUserInfo.sender = null;
  // 调起通话界面
  rtcStore.streamType = streamType
  rtcStore.imSate.videoCallModal = true;
  // 设置被呼叫对象
  rtcStore.imSate.callAvatar = wsStore.toUserInfo.avatar;
  rtcStore.imSate.callName = wsStore.toUserInfo.nickname;
  // 设置呼叫者/被呼叫者
  rtcStore.isCaller = true;
  // 通知被呼叫者
  wsStore.sendMessage({
    messageType: wsStore.toUserInfo.type == 'user'?MESSAGE_TYPE_USER:MESSAGE_TYPE_GROUP,
    contentType,
    type: Constant.MESSAGE_TRANS_TYPE,
    avatar: walletStore.avatar,
    content: JSON.stringify({
      content: walletStore.username,
      sender: walletStore.account,
    })
  });
  // 播放铃声
  soundVoice.play() 
  // 开启本地视频
  if (streamType === 'video') {
    rtcStore.getUserMedia({ audio: true, video: true })
  }
};

// 时间格式化
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  return `${h}:${m}`;
};

// 页面生命周期
onMounted(async () => {
  wsStore.toUserInfo.uuid = route.query.uuid;
  await wsStore.getMessages({
    uuid: wsStore.toUserInfo.type == 'user'?walletStore.account : route.query.uuid,
    messageType: wsStore.toUserInfo.type == 'user'?1:2, //1:个人  2:群组
    friendUsername: wsStore.toUserInfo.type == 'user'?route.query.uuid : walletStore.account
  });
  scrollToBottom();
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  if (isMobile) Keyboard.removeAllListeners();
});
onBeforeUnmount(() => {
  document.removeEventListener("click", handleClickOutside);
});

// 判断是否点击在元素外
const handleClickOutside = (event) => {
  const emojiEl = emojiRef.value;
  const toolsEl = toolsRef.value;
  const target = event.target;

  if (
    showEmoji.value &&
    emojiEl &&
    !emojiEl.contains(target) &&
    !target.closest(".emoji-toggle")
  ) {
    showEmoji.value = false;
  }

  if (
    showTools.value &&
    toolsEl &&
    !toolsEl.contains(target) &&
    !target.closest(".tools-toggle")
  ) {
    showTools.value = false;
  }
};

// 页面跳转
const goToPage = (item) => {
  if(!(isSender(item.toUsername))) return;
  router.push({
    path: 'personal',
    query:{
      uuid:wsStore.toUserInfo.type == 'user'?wsStore.toUserInfo.uuid:item.uuid,
      type:2
    }
  })
}
const goBack = () => router.push("im");
const goDetail = () =>{
  if(wsStore.chatDelAuth[ wsStore.toUserInfo.uuid]){
    showToast(`${wsStore.toUserInfo.type == 'user' ? '对方已删除' : '您已不在群聊里面'}`);
    return;
  }
  // 单聊的话跳转查看个人信息页面
  if(wsStore.toUserInfo.type == 'user'){
    router.push({
      path: 'personal',
      query:{
        uuid:wsStore.toUserInfo.uuid,
        type:2
      }
    })
    return;
  }
  router.push({
    path: 'detail',
    query:{ status:wsStore.toUserInfo.type == 'user'?1:2 }
  }) // 1:单聊  2：群聊
}
</script>

<style lang="less" scoped>
.load-box{
  text-align: center !important;
  margin-top: 50px !important;
}
.mr12 {
  margin-right: 12px;
}
.ml12 {
  margin-left: 12px;
}
.text-right {
  text-align: right;
}
.page-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.container {
  display: flex;
  flex-direction: column;
  .chat-bg {
    height: 126px;
    background: linear-gradient(90deg, @theme-color1 0%, #40a4fb 100%);
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
  }
  .header-chat {
    padding-top: 56px;
    margin: 0 16px;
    display: flex;
    align-items: center;
    color: @theme-color1;
    .header-title {
      flex: 1;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 19px;
      color: #ffffff;
      text-align: center;
    }
  }
  .chat-list {
    background: #f7f8fa;
    border-radius: 30px 30px 0 0;
    flex: 1;
    overflow: auto;
    margin-top: 20px;
    padding: 0 16px 24px;
    .chat-time {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #8d8d8d;
      text-align: center;
      margin: 20px 0;
    }
    .box {
      .list-item {
        display: flex;
        margin-bottom: 24px;
        .list-img {
          width: 44px;
          height: 44px;
          flex-shrink: 0;
        }
        .list-cont {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #8d8d8d;
          max-width: 70%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .business-card {
            width: 199px;
            height: 93px;
            background: #ffffff;
            border-radius: 10px;
            margin-top: 8px;
            padding: 10px;
            box-sizing: border-box;
            .business-card-cont {
              display: flex;
              align-items: center;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 15px;
              color: #000000;
            }
            .line {
              height: 1px;
              background: #f2f2f2;
              margin: 10px 0 6px;
            }
            .business-card-text {
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 10px;
              color: #8d8d8d;
            }
          }
          .content {
            background: #ffffff; // 对方消息背景白色
            color: #000;
            border-radius: 10px;
            margin-top: 8px;
            padding: 8px 17px;
            word-break: break-word;
            white-space: pre-wrap;
            max-width: 100%;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            font-size: 15px;
          }
          .img-message {
            margin-top: 8px;
          }
        }
      }
      .withdrawal {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
        .withdrawal-text {
          width: 142px;
          height: 29px;
          line-height: 29px;
          box-sizing: border-box;
          background: #f2f2f2;
          border-radius: 4px;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #8d8d8d;
          text-align: center;
        }
      }
      .flex-reverse {
        flex-direction: row-reverse;
      }
      .flex-reverse .list-cont {
        align-items: flex-end;
        .content {
          background: #4d71ff; // 自己的消息是蓝色
          color: #ffffff; // 白字
        }
      }
    }
  }
  .chat-list::-webkit-scrollbar {
    width: 0;
  }
  .page-foot {
    position: relative;
    background-color: #fff;
    .flex-box {
      padding: 8px 16px 20px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .input {
        flex: 1;
        background: #f2f2f2;
        border-radius: 17px;
        border: 1px solid #d8d8d8;
        padding: 6px 16px;
        font-weight: 500;
        font-size: 15px;
        margin: 0 12px;
        overflow-y: auto;
      }
    }
  }
}
.app-box {
  position: fixed;
  bottom: 210px;
  left: 0;
  right: 0;
  background: white;
  transition: transform 0.3s ease;
  transform: translateY(100%);
  display: flex;
  flex-wrap: wrap;
  padding: 10px 16px;
  overflow-y: auto;
  box-sizing: border-box;
  &.visible {
    transform: translateY(0);
  }
  .tool-btn {
    width: calc(100% / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    .tool-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 4px;
    }
  }
  .emoji-item{
    font-size: 20px;
    margin: 0 4px;
  }
}
.app-box::-webkit-scrollbar {
    width: 0;
  }

.page-foot {
  position: relative;
  z-index: 10; /* 确保输入框在上层 */
}


.local-video {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: auto;
  border: 2px solid white;
  border-radius: 8px;
}

.remote-video {
  width: 100%;
  height: 100vh;
  background: black;
  object-fit: cover;
}
/* 按住说话按钮 */
.hold-talk-btn {
  flex: 1;
  text-align: center;
  background: #f5f5f5;
  padding: 6px 16px;
  border-radius: 17px;
  color: #666;
  font-weight: 500;
  font-size: 15px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  margin: 0 12px;
  line-height: 24px;
  border: 1px solid #f5f5f5;
}

/* 录音中的浮层提示 */
.recording-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .mic-icon {
    width: 60px;
    height: 60px;
    background: url("https://img.icons8.com/ios-filled/100/ffffff/microphone.png") no-repeat center center;
    background-size: contain;
    margin-bottom: 16px;
  }

  .send-msg {
    color: #fff;
    font-size: 14px;
  }

  .cancel-msg {
    color: #ff4d4f;
    font-size: 14px;
  }
}
.groupNotice{
  margin-top: 15px;
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  .m-ellipsis{
    white-space: nowrap;   /* 不换行 */
    overflow: hidden;      /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
  }
  .item-icon{
    width: 20px;
    height: 20px;
    color: #969799;
  }
}
.revoked-msg {
  color: #999;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  margin: 5px 0;
}
.burn-tag {
  font-size: 10px;
  color: red;
  margin-left: 6px;
}
</style>