构建响应式在线客服聊天系统的前端实践 Vue3+ElementUI + CSS3

唯一Chat

发布于 2025-08-09 09:46:20

20500

代码可运行

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

运行总次数：0

代码可运行

在当今数字化时代，客服系统已成为企业与客户沟通的重要桥梁。一个优秀的在线客服系统不仅需要功能完善，还需要在各种设备上都能提供良好的用户体验。本文将介绍如何构建一个响应式的客服聊天界面，确保在桌面端和移动端都能完美呈现。

设计理念与架构

我们的客服聊天系统基于Vue.js框架开发，采用了Element UI组件库来加速开发过程。系统设计遵循以下核心原则：

响应式设计：确保在不同屏幕尺寸下都能良好显示
简洁直观：用户界面清晰明了，操作简单
实时交互：模拟真实聊天体验
品牌一致性：与企业的视觉风格保持一致

响应式布局实现

容器与整体结构

<div class="chat-body">
  <div class="chat-center">
    <!-- 聊天头部 -->
    <div class="chat-header">...</div>
    
    <!-- 消息区域 -->
    <div class="chat-messages">...</div>
    
    <!-- 输入区域 -->
    <div class="chat-input">...</div>
  </div>
</div>

我们采用了两层嵌套的容器结构，外层chat-body负责整体背景和居中布局，内层chat-center包含实际的聊天界面内容。

媒体查询与自适应

/* 电脑端 */
@media screen and (min-width: 900px) {
  .chat-body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccc;
    background: url(/static/images/chatBg.png) 0 0 no-repeat;
    background-size: cover;
  }
  .chat-center {
      width: 600px;
      height: 94vh;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      border-radius: 0.5rem;
  }
  .chat-header{
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

在桌面端（屏幕宽度≥900px），我们：

使用Flex布局将聊天窗口居中
设置固定宽度600px和94vh的高度
添加圆角和阴影效果增强视觉层次
应用背景图片提升美观度

对于移动端（屏幕宽度<900px），我们：

让聊天窗口占据整个视口高度（100vh）
宽度自动适应屏幕
移除圆角效果以最大化利用屏幕空间

聊天界面组件详解

1. 头部区域

<div class="chat-header">
  <el-avatar class="chat-header__avatar" :size="38" :src="getAvatarUrl(agent.avatar)"></el-avatar>
  <div>
    <div>{{agent.name}}</div>
    <div class="chat-header__intro" v-show="agent.desc!=''">{{agent.desc}}</div>
  </div>
</div>

头部区域显示客服头像、名称和简介，采用渐变背景增强视觉吸引力。头像使用Element UI的Avatar组件，简介部分在内容为空时自动隐藏。

2. 消息区域

<div class="chat-messages">
  <!-- 收到的消息 -->
  <div class="message message--received">
    <el-avatar class="message__avatar" :size="38" :src="getAvatarUrl(agent.avatar)"></el-avatar>
    <div class="message__content">
      你好！最近怎么样？
      <div class="message__time">10:30</div>
    </div>
  </div>
  
  <!-- 发送的消息 -->
  <div class="message message--sent">
    <div class="message__content">
      我很好，谢谢关心！你呢？
      <div class="message__time">10:32</div>
    </div>
  </div>
</div>

消息区域的关键特点：

区分接收和发送的消息样式
接收消息显示客服头像
每条消息包含时间戳
使用flex布局自动调整消息方向
限制消息内容最大宽度为70%防止过宽

3. 输入区域

<div class="chat-input">
  <div class="chat-input__container">
    <div class="chat-input__wrapper">
      <textarea class="chat-input__field" placeholder="输入消息..." rows="1"></textarea>
      <button class="chat-input__button" disabled>
        <svg class="chat-input__icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>
</div>

输入区域设计要点：

自适应高度的文本输入框
发送按钮在内容为空时禁用
使用SVG图标确保清晰度
聚焦状态有视觉反馈
圆角设计保持界面一致性

响应式细节处理

1. 消息气泡

.message__content {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
}

.message--received .message__content {
    background-color: #e5e5ea;
    color: black;
    border-top-left-radius: 0;
}

.message--sent .message__content {
    background-color: #3875ea;
    color: white;
    border-top-right-radius: 0;
}

消息气泡的关键响应式特性：

最大宽度限制防止在小屏幕上过宽
自动换行处理长文本
接收和发送消息使用不同颜色区分
圆角处理增强对话感

2. 时间戳

.message__time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-align: right;
}

时间戳设计考虑：

小字号不占用过多空间
浅色减少视觉干扰
右对齐保持整洁

3. 输入框自适应

.chat-input__field {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 16px;
    line-height: 1.5;
    max-height: 200px;
    min-height: 24px;
    padding: 8px 0;
    background-color: transparent;
    overflow-y: auto;
    transition: height 0.2s;
}

输入框的响应式特性：