crm/web/src/views/template/chat/index.vue

<template>
  <div class="chat" :style="{ height: containerMinHeight }">
    <ElRow>
      <ElCol :span="12">
        <div class="grid-content ep-bg-purple" />
      </ElCol>
      <ElCol :span="12">
        <div class="grid-content ep-bg-purple-light" />
      </ElCol>
    </ElRow>
    <div class="person-list">
      <div class="person-item-header">
        <div class="user-info">
          <ElAvatar :size="50" :src="selectedPerson?.avatar" />
          <div class="user-details">
            <div class="name">{{ selectedPerson?.name }}</div>
            <div class="email">{{ selectedPerson?.email }}</div>
          </div>
        </div>
        <div class="search-box">
          <ElInput v-model="searchQuery" placeholder="搜索联系人" prefix-icon="Search" clearable />
        </div>
        <ElDropdown trigger="click" placement="bottom-start">
          <span class="sort-btn">
            排序方式
            <ElIcon class="el-icon--right">
              <arrow-down />
            </ElIcon>
          </span>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>按时间排序</ElDropdownItem>
              <ElDropdownItem>按名称排序</ElDropdownItem>
              <ElDropdownItem>全部标为已读</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <ElScrollbar>
        <div
          v-for="item in personList"
          :key="item.id"
          class="person-item"
          :class="{ active: selectedPerson?.id === item.id }"
          @click="selectPerson(item)"
        >
          <div class="avatar-wrapper">
            <ElAvatar :size="40" :src="item.avatar">
              {{ item.name.charAt(0) }}
            </ElAvatar>
            <div class="status-dot" :class="{ online: item.online }"></div>
          </div>
          <div class="person-info">
            <div class="info-top">
              <span class="person-name">{{ item.name }}</span>
              <span class="last-time">{{ item.lastTime }}</span>
            </div>
            <div class="info-bottom">
              <span class="email">{{ item.email }}</span>
            </div>
          </div>
        </div>
      </ElScrollbar>
    </div>
    <div class="chat-modal">
      <div class="header">
        <div class="header-left">
          <span class="name">Art Bot</span>
          <div class="status">
            <div class="dot" :class="{ online: isOnline, offline: !isOnline }"></div>
            <span class="status-text">{{ isOnline ? '在线' : '离线' }}</span>
          </div>
        </div>
        <div class="header-right">
          <div class="btn">
            <i class="iconfont-sys">&#xe776;</i>
          </div>
          <div class="btn">
            <i class="iconfont-sys">&#xe778;</i>
          </div>
          <div class="btn">
            <i class="iconfont-sys">&#xe6df;</i>
          </div>
        </div>
      </div>
      <div class="chat-container">
        <!-- 聊天消息区域 -->
        <div class="chat-messages" ref="messageContainer">
          <template v-for="(message, index) in messages" :key="index">
            <div :class="['message-item', message.isMe ? 'message-right' : 'message-left']">
              <ElAvatar :size="32" :src="message.avatar" class="message-avatar" />
              <div class="message-content">
                <div class="message-info">
                  <span class="sender-name">{{ message.sender }}</span>
                  <span class="message-time">{{ message.time }}</span>
                </div>
                <div class="message-text">{{ message.content }}</div>
              </div>
            </div>
          </template>
        </div>

        <!-- 聊天输入区域 -->
        <div class="chat-input">
          <ElInput
            v-model="messageText"
            type="textarea"
            :rows="3"
            placeholder="输入消息"
            resize="none"
            @keyup.enter.prevent="sendMessage"
          >
            <template #append>
              <div class="input-actions">
                <ElButton :icon="Paperclip" circle plain />
                <ElButton :icon="Picture" circle plain />
                <ElButton type="primary" @click="sendMessage" v-ripple>发送</ElButton>
              </div>
            </template>
          </ElInput>
          <div class="chat-input-actions">
            <div class="left">
              <i class="iconfont-sys">&#xe634;</i>
              <i class="iconfont-sys">&#xe809;</i>
            </div>
            <ElButton type="primary" @click="sendMessage" v-ripple>发送</ElButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { Picture, Paperclip } from '@element-plus/icons-vue'
  import { mittBus } from '@/utils/sys'
  import meAvatar from '@/assets/img/avatar/avatar5.webp'
  import aiAvatar from '@/assets/img/avatar/avatar10.webp'
  import avatar2 from '@/assets/img/avatar/avatar2.webp'
  import avatar3 from '@/assets/img/avatar/avatar3.webp'
  import avatar4 from '@/assets/img/avatar/avatar4.webp'
  import avatar5 from '@/assets/img/avatar/avatar5.webp'
  import avatar6 from '@/assets/img/avatar/avatar6.webp'
  import avatar7 from '@/assets/img/avatar/avatar7.webp'
  import avatar8 from '@/assets/img/avatar/avatar8.webp'
  import avatar9 from '@/assets/img/avatar/avatar9.webp'
  import avatar10 from '@/assets/img/avatar/avatar10.webp'
  import { useCommon } from '@/composables/useCommon'

  const { containerMinHeight } = useCommon()

  const searchQuery = ref('')

  // 抽屉显示状态
  const isDrawerVisible = ref(false)
  // 是否在线
  const isOnline = ref(true)

  interface Person {
    id: number
    name: string
    email: string
    avatar: string
    online?: boolean
    lastTime: string
    unread?: number
  }

  const selectedPerson = ref<Person | null>(null)

  const personList = ref<Person[]>([
    {
      id: 1,
      name: '梅洛迪·梅西',
      email: 'melody@altbox.com',
      avatar: meAvatar,
      online: true,
      lastTime: '20小时前',
      unread: 0
    },
    {
      id: 2,
      name: '马克·史密斯',
      email: 'max@kt.com',
      avatar: avatar2,
      online: true,
      lastTime: '2周前',
      unread: 6
    },
    {
      id: 3,
      name: '肖恩·宾',
      email: 'sean@dellito.com',
      avatar: avatar3,
      online: false,
      lastTime: '5小时前',
      unread: 5
    },
    {
      id: 4,
      name: '爱丽丝·约翰逊',
      email: 'alice@domain.com',
      avatar: avatar4,
      online: true,
      lastTime: '1小时前',
      unread: 2
    },
    {
      id: 5,
      name: '鲍勃·布朗',
      email: 'bob@domain.com',
      avatar: avatar5,
      online: false,
      lastTime: '3天前',
      unread: 1
    },
    {
      id: 6,
      name: '查理·戴维斯',
      email: 'charlie@domain.com',
      avatar: avatar6,
      online: true,
      lastTime: '10分钟前',
      unread: 0
    },
    {
      id: 7,
      name: '戴安娜·普林斯',
      email: 'diana@domain.com',
      avatar: avatar7,
      online: true,
      lastTime: '15分钟前',
      unread: 3
    },
    {
      id: 8,
      name: '伊桑·亨特',
      email: 'ethan@domain.com',
      avatar: avatar8,
      online: true,
      lastTime: '5分钟前',
      unread: 0
    },
    {
      id: 9,
      name: '杰西卡·琼斯',
      email: 'jessica@domain.com',
      avatar: avatar9,
      online: false,
      lastTime: '1天前',
      unread: 4
    },
    {
      id: 10,
      name: '彼得·帕克',
      email: 'peter@domain.com',
      avatar: avatar10,
      online: true,
      lastTime: '2小时前',
      unread: 1
    },
    {
      id: 11,
      name: '克拉克·肯特',
      email: 'clark@domain.com',
      avatar: avatar3,
      online: true,
      lastTime: '30分钟前',
      unread: 2
    },
    {
      id: 12,
      name: '布鲁斯·韦恩',
      email: 'bruce@domain.com',
      avatar: avatar5,
      online: false,
      lastTime: '3天前',
      unread: 0
    },
    {
      id: 13,
      name: '韦德·威尔逊',
      email: 'wade@domain.com',
      avatar: avatar6,
      online: true,
      lastTime: '10分钟前',
      unread: 5
    }
  ])

  const selectPerson = (person: Person) => {
    selectedPerson.value = person
  }

  // 消息相关数据
  const messageText = ref('')
  const messages = ref([
    {
      id: 1,
      sender: 'Art Bot',
      content: '你好！我是你的AI助手，有什么我可以帮你的吗？',
      time: '10:00',
      isMe: false,
      avatar: aiAvatar
    },
    {
      id: 2,
      sender: 'Ricky',
      content: '我想了解一下系统的使用方法。',
      time: '10:01',
      isMe: true,
      avatar: meAvatar
    },
    {
      id: 3,
      sender: 'Art Bot',
      content: '好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...',
      time: '10:02',
      isMe: false,
      avatar: aiAvatar
    },
    {
      id: 4,
      sender: 'Ricky',
      content: '听起来很不错，能具体讲讲数据分析部分吗？',
      time: '10:05',
      isMe: true,
      avatar: meAvatar
    },
    {
      id: 5,
      sender: 'Art Bot',
      content: '当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...',
      time: '10:06',
      isMe: false,
      avatar: aiAvatar
    },
    {
      id: 6,
      sender: 'Ricky',
      content: '太好了，那我如何开始使用呢？',
      time: '10:08',
      isMe: true,
      avatar: meAvatar
    },
    {
      id: 7,
      sender: 'Art Bot',
      content: '您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。',
      time: '10:09',
      isMe: false,
      avatar: aiAvatar
    },
    {
      id: 8,
      sender: 'Ricky',
      content: '明白了，谢谢你的帮助！',
      time: '10:10',
      isMe: true,
      avatar: meAvatar
    },
    {
      id: 9,
      sender: 'Art Bot',
      content: '不客气，有任何问题随时联系我。',
      time: '10:11',
      isMe: false,
      avatar: aiAvatar
    }
  ])

  const messageId = ref(10) // 用于生成唯一的消息ID

  const userAvatar = ref(meAvatar) // 使用导入的头像

  // 发送消息
  const sendMessage = () => {
    const text = messageText.value.trim()
    if (!text) return

    messages.value.push({
      id: messageId.value++,
      sender: 'Ricky',
      content: text,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      isMe: true,
      avatar: userAvatar.value
    })

    messageText.value = ''
    scrollToBottom()
  }

  // 滚动到底部
  const messageContainer = ref<HTMLElement | null>(null)
  const scrollToBottom = () => {
    setTimeout(() => {
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight
      }
    }, 100)
  }

  const openChat = () => {
    isDrawerVisible.value = true
  }

  onMounted(() => {
    scrollToBottom()
    mittBus.on('openChat', openChat)

    selectedPerson.value = personList.value[0]
  })
</script>

<style lang="scss">
  .chat-modal {
    .el-overlay {
      background-color: rgb(0 0 0 / 20%) !important;
    }
  }
</style>

<style lang="scss" scoped>
  .chat {
    display: flex;
    overflow: hidden;
    background-color: var(--art-main-bg-color);
    border: 1px solid var(--art-border-color);
    border-radius: 10px;

    .person-list {
      box-sizing: border-box;
      width: 360px;
      height: 100%;
      padding: 20px;
      border-right: 1px solid var(--art-border-color);

      .person-item-header {
        padding-bottom: 20px;

        .user-info {
          display: flex;
          gap: 12px;
          align-items: center;

          .user-details {
            .name {
              font-size: 16px;
              font-weight: 500;
              color: var(--art-gray-900);
            }

            .email {
              margin-top: 4px;
              font-size: 13px;
              color: var(--art-gray-500);
            }
          }
        }

        .search-box {
          margin-top: 12px;
        }

        .sort-btn {
          margin-top: 20px;
          cursor: pointer;
        }
      }

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

        &:hover,
        &.active {
          background-color: var(--el-fill-color-light);
        }

        .avatar-wrapper {
          position: relative;
          margin-right: 12px;

          .status-dot {
            position: absolute;
            right: 1px;
            bottom: 1px;
            width: 9px;
            height: 9px;
            background-color: var(--el-color-error);
            border-radius: 50%;

            &.online {
              background-color: var(--el-color-success);
            }
          }
        }

        .person-info {
          flex: 1;
          min-width: 0;

          .info-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;

            .person-name {
              font-size: 14px;
              font-weight: 500;
              color: var(--el-text-color-primary);
            }

            .last-time {
              font-size: 12px;
              color: var(--el-text-color-secondary);
            }
          }

          .info-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .email {
              overflow: hidden;
              font-size: 12px;
              color: var(--el-text-color-secondary);
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .unread-badge {
              :deep(.el-badge__content) {
                border: none;
              }
            }
          }
        }
      }
    }

    .chat-modal {
      box-sizing: border-box;
      flex: 1;
      height: 100%;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 16px 0;
      margin-bottom: 20px;

      .header-left {
        .name {
          font-size: 16px;
          font-weight: 500;
        }

        .status {
          display: flex;
          gap: 4px;
          align-items: center;
          margin-top: 6px;

          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;

            &.online {
              background-color: var(--el-color-success);
            }

            &.offline {
              background-color: var(--el-color-danger);
            }
          }

          .status-text {
            font-size: 12px;
            color: var(--art-gray-600);
          }
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
        align-items: center;

        .btn {
          width: 42px;
          height: 42px;
          line-height: 42px;
          text-align: center;
          cursor: pointer;
          border-radius: 50%;
          transition: background-color 0.2s ease;

          &:hover {
            background-color: var(--art-gray-200);
          }

          i {
            font-size: 20px;
            color: var(--art-text-gray-700);
          }
        }
      }
    }

    .chat-container {
      display: flex;
      flex-direction: column;
      height: calc(100% - 85px);

      .chat-messages {
        flex: 1;
        padding: 30px 16px;
        overflow-y: auto;
        border-top: 1px solid var(--el-border-color-lighter);

        &::-webkit-scrollbar {
          width: 5px !important;
        }

        .message-item {
          display: flex;
          flex-direction: row;
          gap: 8px;
          align-items: flex-start;
          width: 100%;
          margin-bottom: 30px;

          .message-text {
            font-size: 14px;
            color: var(--art-gray-900);
            border-radius: 6px;
          }

          &.message-left {
            justify-content: flex-start;

            .message-content {
              align-items: flex-start;

              .message-info {
                flex-direction: row;
              }

              .message-text {
                background-color: var(--art-gray-200);
              }
            }
          }

          &.message-right {
            flex-direction: row-reverse;

            .message-content {
              align-items: flex-end;

              .message-info {
                flex-direction: row-reverse;
              }

              .message-text {
                background-color: #e9f3ff;
                background-color: rgb(var(--art-bg-secondary));
              }
            }
          }

          .message-avatar {
            flex-shrink: 0;
          }

          .message-content {
            display: flex;
            flex-direction: column;
            max-width: 70%;

            .message-info {
              display: flex;
              gap: 8px;
              margin-bottom: 4px;
              font-size: 12px;

              .message-time {
                color: var(--el-text-color-secondary);
              }

              .sender-name {
                font-weight: 500;
              }
            }

            .message-text {
              padding: 10px 14px;
              line-height: 1.4;
            }
          }
        }
      }

      .chat-input {
        padding: 16px; // 增加填充以提升输入区域的布局

        .input-actions {
          display: flex;
          gap: 8px;
          padding: 8px 0;
        }

        .chat-input-actions {
          display: flex;
          align-items: center; // 修正为单数
          justify-content: space-between;
          margin-top: 12px;

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

            i {
              margin-right: 20px;
              font-size: 16px;
              color: var(--art-gray-500);
              cursor: pointer;
            }
          }

          // 确保发送按钮与输入框对齐
          el-button {
            min-width: 80px;
          }
        }
      }
    }
  }

  @media only screen and (max-width: $device-ipad-pro) {
    .chat {
      flex-direction: column;

      .person-list {
        width: 100%;
        height: 170px;
        border-right: none;

        .person-item-header {
          display: none;
        }
      }

      .chat-modal {
        height: calc(70% - 30px);
      }
    }
  }
</style>