m2pool_web_frontend/mining-pool/src/components/ChatWidget.vue

<template>
  <div class="chat-widget">
    <!-- 聊天图标 -->
    <div
      class="chat-icon"
      @click="toggleChat"
      :class="{ active: isChatOpen }"
      aria-label="打开客服聊天"
      tabindex="0"
      @keydown.enter="toggleChat"
      @keydown.space="toggleChat"
    >
      <i class="el-icon-chat-dot-round"></i>
      <span v-if="unreadMessages > 0" class="unread-badge">{{
        unreadMessages
      }}</span>
    </div>

    <!-- 聊天对话框 -->
    <transition name="chat-slide">
      <div v-show="isChatOpen" class="chat-dialog">
        <div class="chat-header">
          <div class="chat-title">{{ $t("chat.title") || "在线客服" }}</div>
          <div class="chat-actions">
            <i class="el-icon-minus" @click="minimizeChat"></i>
            <i class="el-icon-close" @click="closeChat"></i>
          </div>
        </div>
        <div class="chat-body" ref="chatBody">
          <!-- 连接状态提示 -->
          <div
            v-if="connectionStatus === 'connecting'"
            class="chat-status connecting"
          >
            <i class="el-icon-loading"></i>
            <p>正在连接客服系统...</p>
          </div>
          <div
            v-else-if="connectionStatus === 'error'"
            class="chat-status error"
          >
            <i class="el-icon-warning"></i>
            <p>连接失败，请稍后重试</p>
            <button @click="connectWebSocket" class="retry-button">
              重试连接
            </button>
          </div>

          <!-- 消息列表 -->
          <template v-else>
            <!-- 历史消息加载提示 -->
            <div
              v-if="hasMoreHistory && messages.length > 0"
              class="history-indicator"
              @click="loadMoreHistory"
            >
              <i class="el-icon-arrow-up"></i>
              <span>{{
                isLoadingHistory ? "加载中..." : "加载更多历史消息"
              }}</span>
            </div>

            <!-- 没有消息时的欢迎提示 -->
            <div v-if="messages.length === 0" class="chat-empty">
              {{
                $t("chat.welcome") || "欢迎使用在线客服，请问有什么可以帮您？"
              }}
            </div>

            <!-- 消息项 -->
            <div
              v-for="(msg, index) in messages"
              :key="index"
              class="chat-message"
              :class="{
                'chat-message-user': msg.type === 'user',
                'chat-message-system': msg.type === 'system',
                'chat-message-loading': msg.isLoading,
                'chat-message-hint': msg.isSystemHint,
                'chat-message-history': msg.isHistory,
              }"
            >
              <!-- 系统提示消息，如加载中、无更多消息等 -->
              <div v-if="msg.isLoading || msg.isSystemHint" class="system-hint">
                <i v-if="msg.isLoading" class="el-icon-loading"></i>
                <span>{{ msg.text }}</span>
              </div>

              <!-- 普通消息 -->
              <template v-else>
                <div class="message-avatar">
                  <i v-if="msg.type === 'system'" class="el-icon-service"></i>
                  <i v-else class="el-icon-user"></i>
                </div>
                <div class="message-content">
                  <!-- 文本消息 -->
                  <div v-if="!msg.isImage" class="message-text">
                    {{ msg.text }}
                  </div>

                  <!-- 图片消息 -->
                  <div v-else class="message-image">
                    <img
                      :src="msg.imageUrl"
                      @click="previewImage(msg.imageUrl)"
                      alt="聊天图片"
                    />
                  </div>

                  <div class="message-footer">
                    <span class="message-time">{{ formatTime(msg.time) }}</span>
                    <!-- 添加已读状态显示 -->
                    <span v-if="msg.type === 'user'" class="message-read-status">
                        {{ msg.isRead ? '已读' : '未读' }}
                    </span>
                    </div>
                </div>
              </template>
            </div>
          </template>
        </div>

        <div class="chat-footer">
          <div class="chat-toolbar">
            <label
              for="imageUpload"
              class="image-upload-label"
              :class="{ disabled: connectionStatus !== 'connected' }"
            >
              <i class="el-icon-picture-outline"></i>
            </label>
            <input
              type="file"
              id="imageUpload"
              ref="imageUpload"
              accept="image/*"
              @change="handleImageUpload"
              style="display: none"
              :disabled="connectionStatus !== 'connected'"
            />
          </div>
          <input
            type="text"
            class="chat-input"
            v-model="inputMessage"
            @keyup.enter="sendMessage"
            :placeholder="$t('chat.inputPlaceholder') || '请输入您的问题...'"
            :disabled="connectionStatus !== 'connected'"
          />
          <button
            class="chat-send"
            @click="sendMessage"
            :disabled="connectionStatus !== 'connected' || !inputMessage.trim()"
          >
            {{ $t("chat.send") || "发送" }}
          </button>
        </div>

        <!-- 图片预览 -->
        <div
          v-if="showImagePreview"
          class="image-preview-overlay"
          @click="closeImagePreview"
        >
          <div class="image-preview-container">
            <img :src="previewImageUrl" class="preview-image" />
            <i
              class="el-icon-close preview-close"
              @click="closeImagePreview"
            ></i>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { Client } from "@stomp/stompjs";
import { getUserid, getHistory, getHistory7, getReadMessage } from "../api/customerService";
export default {
  name: "ChatWidget",
  data() {
    return {
      isChatOpen: false,
      inputMessage: "",
      messages: [],
      unreadMessages: 0,
      // 图片预览相关
      showImagePreview: false,
      previewImageUrl: "",
      // WebSocket 相关
      stompClient: null,
      receivingEmail: "",
      connectionStatus: "disconnected", // disconnected, connecting, connected, error
      userType: 0, // 0 游客 1 登录用户 2 客服
      userEmail: "", // 用户标识
      // 自动回复配置
      autoResponses: {
        hello: "您好，有什么可以帮助您的？",
        你好: "您好，有什么可以帮助您的？",
        hi: "您好，有什么可以帮助您的？",
        挖矿: "您可以查看我们的挖矿教程，或者直接创建矿工账户开始挖矿。",
        算力: "您可以在首页查看当前的矿池算力和您的个人算力。",
        收益: "收益根据您的算力贡献按比例分配，详情可以查看收益计算器。",
        帮助: "您可以查看我们的帮助文档，或者提交工单咨询具体问题。",
      },
      isLoadingHistory: false, // 是否正在加载历史消息
      hasMoreHistory: true, // 是否还有更多历史消息
      roomId: "",
    };
  },
  mounted() {
    document.addEventListener("click", this.handleClickOutside);
    // 添加聊天窗口滚动监听
    this.$nextTick(() => {
      if (this.$refs.chatBody) {
        this.$refs.chatBody.addEventListener("scroll", this.handleChatScroll);
      }
    });
    
    // 添加页面可见性变化监听
    document.addEventListener("visibilitychange", this.handleVisibilityChange);
  },
  methods: {
    // 处理页面可见性变化
    handleVisibilityChange() {
      // 当页面变为可见且聊天窗口已打开时，标记消息为已读
      if (!document.hidden && this.isChatOpen && this.roomId) {
        this.markMessagesAsRead();
      }
    },
    
    // 标记消息为已读
    async markMessagesAsRead() {
      try {
        const data = {
            roomId: this.roomId
        };
        
        const response = await getReadMessage(data);
        
        if (response && response.code === 200) {
          console.log('消息已标记为已读');
          // 清除未读消息计数
          this.unreadMessages = 0;
           // 更新所有用户消息的已读状态
      this.messages.forEach(msg => {
        if (msg.type === 'user') {
          msg.isRead = true;
        }
      });
        } else {
          console.warn('标记消息已读失败', response);
        }
      } catch (error) {
        console.error('标记消息已读出错:', error);
      }
    },
    
    // 加载历史消息
    async loadHistoryMessages() {
      if (this.isLoadingHistory || !this.hasMoreHistory || !this.roomId) return;
      
      this.isLoadingHistory = true;
      
      try {
        // 显示加载中提示
        const loadingMsg = {
          type: "system",
          text: "正在加载历史消息...",
          isLoading: true,
          time: new Date(),
        };
        this.messages.unshift(loadingMsg);
        
        // 获取7天内的最新聊天记录，传入 roomId
        const response = await getHistory7({ roomId: this.roomId });
        
        // 移除加载中提示
        this.messages = this.messages.filter((msg) => !msg.isLoading);
        
        if (response && response.code === 200 && response.data && response.data.length > 0) {
          // 处理并添加历史消息
          const historyMessages = this.formatHistoryMessages(response.data);
          
          // 将历史消息添加到消息列表的前面
          this.messages = [...historyMessages, ...this.messages];
          
          // 设置是否还有更多历史消息
          this.hasMoreHistory = historyMessages.length > 0;
        } else {
          // 添加提示信息
          this.messages.unshift({
            type: "system",
            text: "暂无最近的聊天记录",
            isSystemHint: true,
            time: new Date(),
          });
          this.hasMoreHistory = false;
        }
      } catch (error) {
        console.error("加载历史消息失败:", error);
        // 添加错误提示
        this.messages.unshift({
          type: "system",
          text: "加载历史消息失败，请重试",
          isError: true,
          time: new Date(),
        });
      } finally {
        this.isLoadingHistory = false;
      }
    },
    
    // 加载更多历史消息（超过7天的）
    async loadMoreHistory() {
      if (this.isLoadingHistory || !this.roomId) return;
      
      this.isLoadingHistory = true;
      
      try {
        // 显示加载中提示
        const loadingMsg = {
          type: "system",
          text: "正在加载更多历史消息...",
          isLoading: true,
          time: new Date(),
        };
        this.messages.unshift(loadingMsg);
        
        // 获取更早的聊天记录，传入 roomId
        const response = await getHistory({ roomId: this.roomId });
        
        // 移除加载中提示
        this.messages = this.messages.filter((msg) => !msg.isLoading);
        
        if (response && response.code === 200 && response.data && response.data.length > 0) {
          // 处理并添加历史消息
          const historyMessages = this.formatHistoryMessages(response.data);
          
          // 将历史消息添加到消息列表的前面
          this.messages = [...historyMessages, ...this.messages];
          
          // 如果没有数据返回，表示没有更多历史记录
          this.hasMoreHistory = historyMessages.length > 0;
          
          if (historyMessages.length === 0) {
            this.messages.unshift({
              type: "system",
              text: "没有更多历史消息了",
              isSystemHint: true,
              time: new Date(),
            });
          }
        } else {
          this.hasMoreHistory = false;
          this.messages.unshift({
            type: "system",
            text: "没有更多历史消息了",
            isSystemHint: true,
            time: new Date(),
          });
        }
      } catch (error) {
        console.error("加载更多历史消息失败:", error);
        this.messages.unshift({
          type: "system",
          text: "加载更多历史消息失败",
          isError: true,
          time: new Date(),
        });
      } finally {
        this.isLoadingHistory = false;
      }
    },

    // 格式化历史消息数据
    formatHistoryMessages(messagesData) {
  if (!messagesData || !Array.isArray(messagesData)) return [];

  return messagesData
    .map((msg) => {
      const isSelf =
        msg.sendUserType === this.userType &&
        msg.sendUserEmail === this.userEmail;

      return {
        type: isSelf ? "user" : "system",
        text: msg.content || "",
        isImage: msg.type === 1 || msg.type === "image",
        imageUrl:
          msg.type === 1 || msg.type === "image" ? msg.content : null,
        time: msg.timestamp ? new Date(msg.timestamp) : new Date(),
        id: msg.id,
        roomId: msg.roomId,
        sendUserType: msg.sendUserType,
        isHistory: true, // 标记为历史消息
        isRead: msg.isRead || true, // 历史消息默认已读
      };
    })
    .sort((a, b) => a.time - b.time); // 按时间排序
},


    // 修改 fetchUserid 方法，使其返回 Promise
    async fetchUserid() {
      try {
        const res = await getUserid();
        if (res && res.code == 200) {
          console.log('获取用户ID成功:', res);
          this.receivingEmail = res.data.userEmail;
          this.roomId = res.data.id;
          return res.data;
        } else {
          console.warn('获取用户ID未返回有效数据');
          return null;
        }
      } catch (error) {
        console.error('获取用户ID失败:', error);
        throw error;
      }
    },

    // 初始化 WebSocket 连接
    initWebSocket() {
      this.determineUserType();
      this.connectWebSocket();
    },

    // 确定用户类型和邮箱
    determineUserType() {
      try {
        const token = JSON.parse(localStorage.getItem("token") || "{}");
        const userInfo = JSON.parse(
          localStorage.getItem("jurisdiction") || "{}"
        );
        const email = JSON.parse(localStorage.getItem("userEmail") || "{}");
        if (token) {
          if (userInfo.roleKey === "customer_service") {
            // 客服用户
            this.userType = 2;
          } else {
            // 登录用户
            this.userType = 1;
          }
          this.userEmail = email;
        } else {
          //游客
          this.userType = 0;
          this.userEmail = `guest_${Date.now()}_${Math.random()
            .toString(36)
            .substr(2, 9)}`;
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        // 出错时默认为游客
        this.userType = 0;
        this.userEmail = `guest_${Date.now()}_${Math.random()
          .toString(36)
          .substr(2, 9)}`;
      }
    },

    // 连接 WebSocket
    connectWebSocket() {
      this.connectionStatus = "connecting";

      try {
        const wsUrl = `${process.env.VUE_APP_BASE_API}chat/ws`;

        // 创建 STOMP 客户端
        this.stompClient = new Client({
          brokerURL: wsUrl,
          connectHeaders: {
            email: this.userEmail,
            type: this.userType,
          },
          debug: function (str) {
            console.log("STOMP: " + str);
          },
          reconnectDelay: 5000,
          heartbeatIncoming: 4000,
          heartbeatOutgoing: 4000,
        });

        // 连接成功回调
        this.stompClient.onConnect = (frame) => {
          console.log("连接成功: " + frame);
          this.connectionStatus = "connected";

          // 订阅个人消息频道
          this.stompClient.subscribe(
            `${process.env.VUE_APP_BASE_API}user/queue/${this.userEmail}`,
            this.onMessageReceived
          );

          // 根据用户类型显示不同的欢迎消息
          let welcomeMessage = "";
          switch (this.userType) {
            case 0:
              welcomeMessage = "您当前以游客身份访问，请问有什么可以帮您？";
              break;
            case 1:
              welcomeMessage = "欢迎回来，请问有什么可以帮您？";
              break;
            case 2:
              welcomeMessage = "您已以客服身份登录系统";
              break;
          }
          this.addSystemMessage(welcomeMessage);
        };

        // 连接错误回调
        this.stompClient.onStompError = (frame) => {
          console.error("连接错误: " + frame.headers.message);
          this.connectionStatus = "error";
          this.addSystemMessage("连接客服系统失败，请稍后重试。");
        };

        // 启动连接
        this.stompClient.activate();
      } catch (error) {
        console.error("初始化 WebSocket 失败:", error);
        this.connectionStatus = "error";
      }
    },

    // 断开 WebSocket 连接
    disconnectWebSocket() {
      if (this.stompClient && this.stompClient.connected) {
        this.stompClient.deactivate();
        this.connectionStatus = "disconnected";
      }
    },

    // 添加新方法：更新消息已读状态
updateMessageReadStatus(messageIds) {
  if (!Array.isArray(messageIds) || messageIds.length === 0) {
    // 如果没有具体的消息ID，就更新所有用户消息为已读
    this.messages.forEach(msg => {
      if (msg.type === 'user') {
        msg.isRead = true;
      }
    });
  } else {
    // 更新指定ID的消息为已读
    this.messages.forEach(msg => {
      if (msg.id && messageIds.includes(msg.id)) {
        msg.isRead = true;
      }
    });
  }
},

    // 接收消息处理
    onMessageReceived(message) {
  console.log("收到消息:", message.body);
  try {
    const data = JSON.parse(message.body);
    
    // 处理已读回执消息
    if (data.type === 'read_receipt') {
      // 更新对应消息的已读状态
      this.updateMessageReadStatus(data.messageIds || []);
      return;
    }
    
    // 添加客服消息
    this.messages.push({
      type: "system",
      text: data.content,
      isImage: data.type === "image",
      imageUrl: data.type === "image" ? data.content : null,
      time: new Date(),
      roomId: data.roomId || this.roomId,
    });
    
    // 如果聊天窗口已打开，标记为已读
    if (this.isChatOpen && this.roomId) {
      this.markMessagesAsRead();
    } else {
      // 如果聊天窗口没有打开，显示未读消息数
      this.unreadMessages++;
    }
    
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  } catch (error) {
    console.error("解析消息失败:", error);
  }
},

    // 切换聊天窗口
    async toggleChat() {
      this.isChatOpen = !this.isChatOpen;
      
      if (this.isChatOpen) {
        this.unreadMessages = 0;
        
        try {
          // 先获取用户ID，等待完成
          await this.fetchUserid();
          
          // 如果未连接，则连接 WebSocket
          if (this.connectionStatus === "disconnected") {
            this.initWebSocket();
          }
          
          // 获取到 roomId 后才查询历史消息
          if (this.roomId && this.messages.length === 0) {
            this.loadHistoryMessages();
          }
          
          // 新增：标记消息为已读
          if (this.roomId) {
            this.markMessagesAsRead();
          }
          
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        } catch (error) {
          console.error('初始化聊天失败:', error);
        }
      }
    },

    minimizeChat() {
      this.isChatOpen = false;
    },

    closeChat() {
      this.isChatOpen = false;
      this.messages = [];
      this.disconnectWebSocket();
    },

    // 发送消息
    sendMessage() {
  if (!this.inputMessage.trim() || this.connectionStatus !== "connected")
    return;

  const messageText = this.inputMessage.trim();

  // 添加用户消息到界面
  this.messages.push({
    type: "user",
    text: messageText,
    time: new Date(),
    email: this.receivingEmail,
    sendUserType: this.userType,
    roomId: this.roomId,
    isRead: false, // 新发送的消息默认未读
  });

  // 通过 WebSocket 发送消息
  if (this.stompClient && this.stompClient.connected) {
    this.stompClient.publish({
      destination: "/send/message",
      body: JSON.stringify({
        content: messageText,
        type: 0,
        email: this.receivingEmail,
        sendUserType: this.userType,
        roomId: this.roomId,
      }),
    });
  } else {
    this.handleAutoResponse(messageText);
  }

  this.inputMessage = "";

  this.$nextTick(() => {
    this.scrollToBottom();
  });
},

    // 添加系统消息
    addSystemMessage(text) {
      this.messages.push({
        type: "system",
        text: text,
        isImage: false,
        time: new Date(),
      });

      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },

    // 自动回复 (仅在无法连接服务器时使用)
    handleAutoResponse(message) {
      setTimeout(() => {
        let response =
          "抱歉，我暂时无法回答这个问题。请排队等待人工客服或提交工单。";

        // 检查是否匹配自动回复关键词
        for (const [keyword, reply] of Object.entries(this.autoResponses)) {
          if (message.toLowerCase().includes(keyword.toLowerCase())) {
            response = reply;
            break;
          }
        }

        // 添加系统回复
        this.messages.push({
          type: "system",
          text: response,
          isImage: false,
          time: new Date(),
        });

        if (!this.isChatOpen) {
          this.unreadMessages++;
        }

        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }, 1000);
    },
    
    // 滚动到消息列表顶部检测，用于加载更多历史消息
    handleChatScroll() {
      if (!this.$refs.chatBody) return;

      const { scrollTop } = this.$refs.chatBody;
      // 当滚动到顶部时，加载更多历史消息
      if (scrollTop < 50 && this.hasMoreHistory && !this.isLoadingHistory) {
        this.loadMoreHistory();
      }
    },

    scrollToBottom() {
      if (this.$refs.chatBody) {
        this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
      }
    },

    formatTime(date) {
      return date.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
      });
    },

    handleClickOutside(event) {
      if (this.isChatOpen) {
        const chatElement = this.$el.querySelector(".chat-dialog");
        const chatIcon = this.$el.querySelector(".chat-icon");

        if (
          chatElement &&
          !chatElement.contains(event.target) &&
          !chatIcon.contains(event.target)
        ) {
          this.isChatOpen = false;
        }
      }
    },

    // 处理图片上传
    handleImageUpload(event) {
      if (this.connectionStatus !== "connected") return;

      const file = event.target.files[0];
      if (!file) return;

      // 检查是否为图片
      if (!file.type.startsWith("image/")) {
        this.$message({
          message: this.$t("chat.onlyImages") || "只能上传图片文件!",
          type: "warning",
        });
        return;
      }

      // 检查文件大小 (限制为5MB)
      const maxSize = 5 * 1024 * 1024;
      if (file.size > maxSize) {
        this.$message({
          message: this.$t("chat.imageTooLarge") || "图片大小不能超过5MB!",
          type: "warning",
        });
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const imageUrl = e.target.result;

        // 添加用户图片消息到界面
        this.messages.push({
          type: "user", // 修改为 "user" 以符合消息类型格式
          text: "",
          isImage: true,
          imageUrl: imageUrl,
          time: new Date(),
          email: this.receivingEmail, // 接收者邮箱
          sendUserType: this.userType, // 发送者类型
          roomId: this.roomId, // 聊天室ID
          isRead: false, // 新发送的图片消息默认未读
        });

        // 通过 WebSocket 发送图片消息
        if (this.stompClient && this.stompClient.connected) {
          this.stompClient.publish({
            destination: "/send/message",
            body: JSON.stringify({
              content: imageUrl,
              type: "image",
              email: this.receivingEmail,
              sendUserType: this.userType,
              roomId: this.roomId
            }),
          });
        }

        this.$nextTick(() => {
          this.scrollToBottom();
        });
      };

      reader.readAsDataURL(file);
      this.$refs.imageUpload.value = "";
    },

    // 预览图片
    previewImage(imageUrl) {
      this.previewImageUrl = imageUrl;
      this.showImagePreview = true;
    },

    // 关闭图片预览
    closeImagePreview() {
      this.showImagePreview = false;
      this.previewImageUrl = "";
    },
  },

  beforeDestroy() {
    this.disconnectWebSocket();
    document.removeEventListener("click", this.handleClickOutside);
    // 移除滚动监听
    if (this.$refs.chatBody) {
      this.$refs.chatBody.removeEventListener("scroll", this.handleChatScroll);
    }
    // 移除页面可见性变化监听
    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
  },
};
</script>
  
  <style scoped lang="scss">
.chat-widget {
  position: fixed;
  bottom: 40px;
  right: 60px;
  z-index: 1000;
  font-family: Arial, sans-serif;
}

.chat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ac85e0;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;

  i {
    font-size: 28px;
  }

  &:hover {
    transform: scale(1.05);
    background-color: #6e3edb;
  }

  &.active {
    background-color: #6e3edb;
  }
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-dialog {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 350px;
  height: 450px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  background-color: #ac85e0;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-title {
  font-weight: bold;
  font-size: 16px;
}

.chat-actions {
  display: flex;
  gap: 15px;

  i {
    cursor: pointer;
    font-size: 16px;

    &:hover {
      opacity: 0.8;
    }
  }
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #f8f9fa;
}

.chat-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  i {
    font-size: 32px;
    margin-bottom: 16px;
  }

  p {
    margin: 8px 0;
    color: #666;
  }

  &.connecting i {
    color: #ac85e0;
  }

  &.error {
    i {
      color: #e74c3c;
    }

    p {
      color: #e74c3c;
    }
  }

  .retry-button {
    margin-top: 16px;
    padding: 8px 16px;
    background-color: #ac85e0;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;

    &:hover {
      background-color: #6e3edb;
    }
  }
}

.chat-empty {
  color: #777;
  text-align: center;
  margin-top: 30px;
}

.chat-message {
  display: flex;
  margin-bottom: 15px;

  &.chat-message-user {
    flex-direction: row-reverse;

    .message-content {
      background-color: #ac85e0;
      color: white;
      border-radius: 18px 18px 0 18px;
    }

    .message-time {
      text-align: right;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  &.chat-message-system {
    .message-content {
      background-color: white;
      border-radius: 18px 18px 18px 0;
    }
  }
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  margin: 0 10px;

  i {
    font-size: 18px;
    color: #555;
  }
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-text {
  line-height: 1.4;
  font-size: 14px;
  word-break: break-word;
}

.message-image {
  img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.03);
    }
  }
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.chat-footer {
  padding: 10px;
  display: flex;
  border-top: 1px solid #e0e0e0;
  align-items: center;
}

.chat-toolbar {
  margin-right: 8px;
}

.image-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: #666;

  &:hover:not(.disabled) {
    color: #ac85e0;
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  i {
    font-size: 20px;
  }
}

.chat-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 15px;
  outline: none;

  &:focus:not(:disabled) {
    border-color: #ac85e0;
  }

  &:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
  }
}

.chat-send {
  background-color: #ac85e0;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 15px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;

  &:hover:not(:disabled) {
    background-color: #6e3edb;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// 图片预览
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.preview-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 24px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

// 动画效果
.chat-slide-enter-active,
.chat-slide-leave-active {
  transition: all 0.3s ease;
}

.chat-slide-enter,
.chat-slide-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

// 移动端适配
@media (max-width: 768px) {
  .chat-widget {
    bottom: 20px;
    right: 20px;
  }

  .chat-dialog {
    width: 300px;
    height: 400px;
    bottom: 70px;
  }

  .message-image img {
    max-width: 150px;
    max-height: 150px;
  }
}

.system-hint {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.history-indicator {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border-radius: 15px;
  background-color: #f0f0f0;
  width: fit-content;
  margin: 0 auto 10px;
  
  &:hover {
    background-color: #e0e0e0;
    color: #333;
  }
}

.chat-message-history {
  opacity: 0.8;
}

.chat-message-loading,
.chat-message-hint {
  margin: 5px 0;
  justify-content: center;
  
  span {
    color: #999;
    font-size: 12px;
  }
}



.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 11px;
}

.message-time {
  color: #999;
}

.message-read-status {
  color: #999;
  font-size: 10px;
  margin-left: 5px;
}

.chat-message-user .message-read-status {
  color: rgba(255, 255, 255, 0.7);
}
</style>