wechat-ui/src/views/wechat/wechat_main/components/split_wrapper.vue

<template>
  <div ref="splitContainer" class="split-container">
    <div class="panel top-panel">
      <div class="room-container-header">
        <div class="room-container-header-title">
          {{ ' 测试群聊 (29)' }}
        </div>
        <div class="room-container-header-operate">
          <span class="item-margin">
            <div class="room-operate">
              {{ '房主' }}
              <Badge dot status="success" class="badge-right-bottom"></Badge>
            </div>
          </span>
          <span class="item-margin">
            <FileSearchOutlined style="font-size: 20px; color: #666667" />
          </span>
          <span class="item-margin">
            <Switch
              v-model:checked="state.aiChecked"
              checked-children="AI"
              un-checked-children="人工"
            />
          </span>
          <span class="item-margin" style="margin-right: 30px">
            <EllipsisOutlined style="font-size: 20px; color: #333" />
          </span>
        </div>
      </div>
      <!-- 聊天对话区域 -->
      <div class="room-container-body">
        <div v-show="false" class="chat-roomings-tip-box">
          <span style="color: #307ef2;font-size14px;">当前用户正在被人工接待...</span>
          <Button class="chat-roomings-tip-btn" size="small">自动回复</Button>
        </div>
        <div v-show="false" class="room-container-body-messages">
          <div class="room-container__loading">
            加载中...
            <LoadingOutlined />
          </div>
        </div>
      </div>
    </div>
    <div class="panel bottom-panel">
      <div class="chat-roomings__message">
        <div class="send-message">
          <div class="editor">
            <div class="header">
              <div class="left-part">
                <div class="img-emo"></div>
                <div class="img-file"></div>
                <div class="img-link"></div>
                <div class="img-text"></div>
                <!-- <SmileOutlined />
                <FolderOutlined />
                <LayoutOutlined /> -->
              </div>
              <div class="right-part"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import Split from 'split.js';
  import { Popover, Switch, Badge, Button } from 'ant-design-vue';
  import { EllipsisOutlined, FileSearchOutlined, LoadingOutlined ,SmileOutlined,FolderOutlined,LayoutOutlined} from '@ant-design/icons-vue';

  const splitContainer = ref(null);
  const state = reactive({
    aiChecked: true,
  });

  onMounted(() => {
    Split([splitContainer.value.children[0], splitContainer.value.children[1]], {
      sizes: [55, 45], // 初始高度百分比
      minSize: [window.innerHeight * 0.42, window.innerHeight * 0.29], // 每个面板的最小高度
      gutterSize: 10, // 分割条的大小
      cursor: 'row-resize', // 改变鼠标光标以适应垂直分割
      direction: 'vertical', // 设置方向为垂直
      gutter: (index, direction) => {
        const gutter = document.createElement('div');
        gutter.className = `gutter gutter-${direction}`;
        return gutter;
      },
    });
  });
</script>

<style scoped lang="less">
  .split-container {
    display: flex;
    flex-direction: column; /* 改为纵向排列 */
    height: 100vh;
  }

  .panel {
    overflow: auto;
    background-color: #fcfcfc;
    // padding: 16px;
  }

  .top-panel {
    // border-bottom: 1px solid #d9d9d9;
  }

  .bottom-panel {
    // border-top: 1px solid #d9d9d9;
  }

  ::v-deep .gutter {
    background-color: transparent; /* 分隔条的背景色 */
    position: relative; /* 使用绝对定位调整内部实线 */
    z-index: 1; /* 确保分隔条在顶层 */
  }

  ::v-deep .gutter-vertical {
    background: transparent !important; /* 设置背景透明 */
    border: none !important; /* 移除边框 */
    height: 10px; /* 保持可拖拽区域的高度 */
    width: 100%; /* 宽度为100% */
  }

  ::v-deep .gutter-vertical::before {
    content: '';
    position: absolute;
    top: 4.5px; /* 使实线居中 */
    left: 0;
    right: 0;
    height: 1px; /* 实线的高度 */
    background-color: #e4e9f3; /* 实线的颜色 */
    z-index: 2; /* 确保实线在分隔条的上层 */
  }
  .room-container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    flex-basis: 51px;
    min-height: 51px;
  }
  .room-container-header-title {
    font-weight: 600;
    font-size: 14px;
  }
  .room-container-header-operate {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  ::v-deep .ant-switch {
    height: 24px;
  }
  .item-margin {
    margin-left: 15px;
  }
  .room-operate {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #307ef2;
    color: #fff;
    position: relative;
    font-size: 12px;
  }
  .badge-right-bottom {
    position: absolute; /* 绝对定位 */
    bottom: -5px; /* 定位到底部 */
    right: -5px; /* 定位到右侧 */
  }
  ::v-deep .ant-badge.ant-badge-status .ant-badge-status-dot {
    width: 7px;
    height: 7px;
  }
  .room-container-body {
    position: relative;
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;
    width: 100%;
    // background: pink;
    height: calc(100% - 53px);
  }
  .chat-roomings-tip-box {
    line-height: 36px;
    background: #f1f5fb;
    box-shadow: 0 2px 6px 0 rgba(4, 29, 85, 0.14);
    text-align: center;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .chat-roomings-tip-btn {
    margin-left: 8px;
    background: #e0e9fb;
    // padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-color: #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 400;
  }
  .room-container-body-messages {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    overflow-y: auto;
    flex-grow: 1;
  }
  .room-container__loading {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #c5c5c5;
    margin-bottom: 16px;
  }

  .chat-roomings__message {
    position: relative;
    height: 100%;
    background: #fff;
  }
  .send-message {
    height: 100%;
    background: #fcfcfc;
  }
  .editor{
    position: static;
  }
  .header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 16px 6px 0;
    background: #fcfcfc;
    margin-top: 15px;
  }
  .left-part{
    display: flex;
  }
  .img-emo{
    width: 18px;
    height: 18px;
    background-size: contain;
    margin: 0 10px;
    background-image: url('@/assets/images/icon-emoji.png');
  }
</style>