workspace/code/link56/link56-frontend-new/test.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>私聊界面示例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        height: 100vh;
        display: flex;
      }

      /* 左侧聊天列表 */
      .chat-list {
        width: 280px;
        background-color: #fff;
        border-right: 1px solid #ddd;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }

      .chat-list .user-card {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
        border-bottom: 1px solid #f0f0f0;
      }

      .chat-list .user-card:hover,
      .chat-list .user-card.active {
        background-color: #f0f8ff;
      }

      .chat-list .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
        object-fit: cover;
        border: 2px solid #4caf50;
        /* 默认在线状态绿色 */
      }

      .chat-list .user-info {
        flex: 1;
      }

      .chat-list .user-name {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
      }

      .chat-list .user-position {
        margin: 2px 0 0 0;
        font-size: 12px;
        color: #666;
      }

      .chat-list .status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #4caf50;
      }

      .chat-list .offline {
        background-color: #ccc;
      }

      /* 右侧聊天详情 */
      .chat-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #f9f9f9;
      }

      .chat-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
      }

      .chat-header .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid #4caf50;
      }

      .chat-header .info {
        flex: 1;
      }

      .chat-header .info .name {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
      }

      .chat-header .info .position {
        font-size: 12px;
        color: #666;
        margin: 2px 0;
      }

      .chat-header .info .company-info {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
      }

      .chat-header .info .company-logo {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        border-radius: 2px;
        object-fit: cover;
      }

      .messages {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
      }

      .message {
        margin-bottom: 12px;
        max-width: 70%;
        padding: 8px 12px;
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .message.self {
        background-color: #dcf8c6;
        margin-left: auto;
      }

      .message.other {
        background-color: #fff;
        margin-right: auto;
      }

      .chat-input {
        padding: 12px 16px;
        border-top: 1px solid #ddd;
        background-color: #fff;
        display: flex;
        gap: 8px;
      }

      .chat-input input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 20px;
        outline: none;
      }

      .chat-input button {
        padding: 8px 16px;
        border: none;
        background-color: #4caf50;
        color: #fff;
        border-radius: 20px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <!-- 左侧聊天列表 -->
    <div class="chat-list">
      <div class="user-card active">
        <img class="avatar" src="https://i.pravatar.cc/40?img=1" alt="头像" />
        <div class="user-info">
          <p class="user-name">张三</p>
          <p class="user-position">前端工程师</p>
        </div>
        <div class="status"></div>
      </div>

      <div class="user-card">
        <img class="avatar" src="https://i.pravatar.cc/40?img=2" alt="头像" />
        <div class="user-info">
          <p class="user-name">李四</p>
          <p class="user-position">产品经理</p>
        </div>
        <div class="status offline"></div>
      </div>

      <div class="user-card">
        <img class="avatar" src="https://i.pravatar.cc/40?img=3" alt="头像" />
        <div class="user-info">
          <p class="user-name">王五</p>
          <p class="user-position">设计师</p>
        </div>
        <div class="status"></div>
      </div>
    </div>

    <!-- 右侧聊天详情 -->
    <div class="chat-detail">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <img class="avatar" src="https://i.pravatar.cc/50?img=1" alt="头像" />
        <div class="info">
          <p class="name">张三</p>
          <p class="position">前端工程师</p>
          <div class="company-info">
            <img class="company-logo" src="https://via.placeholder.com/16" alt="公司logo" />
            <span>ABC科技公司</span>
          </div>
        </div>
      </div>

      <!-- 消息区域 -->
      <div class="messages">
        <div class="message other">你好！这是张三的消息。</div>
        <div class="message self">你好，我是自己发的消息。</div>
        <div class="message other">我们下午开会吗？</div>
        <div class="message self">好的，下午三点。</div>
      </div>

      <!-- 输入框 -->
      <div class="chat-input">
        <input type="text" placeholder="输入消息..." />
        <button>发送</button>
      </div>
    </div>
  </body>
</html>