修改

src/views/chat/index.vue

@@ -3,7 +3,46 @@
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
         <div class="w_1200">
-          <el-col :span="24" class="one" @click="toChat">聊天记录</el-col>
+          <el-container>
+            <el-aside width="400px" class="aside">
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="one_1">
+                  <el-col :span="4" class="left">
+                    <el-image class="image" :src="kf" fit="fill" />
+                  </el-col>
+                  <el-col :span="20" class="right">
+                    {{ user.nick_name || '游客' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="one_2">
+                  <a-input placeholder="查找联系人">
+                    <template #prefix><SearchOutlined /></template>
+                  </a-input>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="two">
+                <el-col
+                  :span="24"
+                  class="list"
+                  v-for="(item, index) in chatList"
+                  :key="index"
+                  @click="toView(item)"
+                >
+                  <div class="line" v-if="item._id == _id"></div>
+                  <el-col :span="4" class="left">
+                    <el-image class="image" :src="item.url" fit="fill" />
+                  </el-col>
+                  <el-col :span="20" class="right">
+                    <el-col :span="24" class="right_1">{{ item.name }}</el-col>
+                    <el-col :span="24" class="right_2">{{ item.content }}</el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-aside>
+            <el-main style="background: #eee">
+              <Chat></Chat>
+            </el-main>
+          </el-container>
         </div>
       </el-col>
     </el-row>
@@ -31,6 +70,8 @@
 // 基础
 import { get } from 'lodash-es'
 const $checkRes = inject('$checkRes')
+import Chat from './parts/chat.vue'
+import { SearchOutlined } from '@ant-design/icons-vue'
 // 接口
 import { DemandStore } from '@/store/api/platform/demand'
 import { DictDataStore } from '@/store/api/system/dictData'
@@ -47,6 +88,23 @@ const route = useRoute()
 const loading = ref(false)
 // 是否弹框客服
 const dialog = ref(false)
+const _id = ref('')
+const chatList = ref([
+  { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '3', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '4', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '5', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '6', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '7', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '8', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '9', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '10', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
+])
+const list = ref([
+  { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
+  { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
+])
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -62,12 +120,99 @@ const search = async () => {
   }
 }
 const searchOther = async () => {}
-const toChat = async () => {
-  dialog.value = true
+const toView = async (item) => {
+  _id.value = item._id
 }
+// provide
+provide('_id', _id)
+provide('list', list)
 </script>
 <style scoped lang="scss">
 .main {
+  margin: 10px 0;
+  .aside {
+    border-radius: 5px 0 0 5px;
+    background: #33353a;
+    .one {
+      .one_1 {
+        display: flex;
+        align-items: center;
+        background: #292b2e;
+        padding: 10px;
+
+        .left {
+          image {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+          }
+        }
+        .right {
+          margin: 0 0 0 10px;
+          white-space: nowrap;
+          color: #fff;
+          font-size: 16px;
+        }
+      }
+      .one_2 {
+        padding: 10px;
+        border-bottom: 1px solid #404247;
+        background-color: rgba(0, 0, 0, 0);
+        :deep(.ant-input-affix-wrapper) {
+          background-color: transparent;
+          color: #ccc !important;
+        }
+        :deep(.ant-input) {
+          height: 32px;
+          position: relative;
+          background-color: rgba(0, 0, 0, 0);
+          caret-color: #fff;
+          font-size: 14px;
+          padding: 6px 0;
+          border: none;
+          outline: none;
+          &::placeholder {
+            color: #ccc !important;
+          }
+        }
+      }
+    }
+    .two {
+      overflow-y: auto;
+      height: 57vh;
+      .list {
+        position: relative;
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid #2c2e31;
+        .right {
+          font-size: 14px;
+          margin: 5px 0 0 10px;
+          .right_1 {
+            color: #fff;
+            padding: 0 0 10px 0;
+          }
+          .right_2 {
+            color: #999;
+          }
+        }
+        .line {
+          position: absolute;
+          background: #ff8f2c;
+          width: 2px;
+          left: 0;
+          top: 0;
+          height: 85px;
+        }
+      }
+      .list:hover {
+        background-color: #3a3c42;
+      }
+    }
+    .two::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }
 :deep(.el-dialog__body) {
   padding: 0 !important;

src/views/chat/parts/chat.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one" v-if="_id"> 聊天记录</el-col>
+        <el-col :span="24" class="two" v-else>
+          <p>您还未选中或发起聊天，快去跟好友聊一聊吧</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const _id = inject('_id')
+const list = inject('list')
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    height: 72vh;
+    width: 100%;
+    border-radius: 0 5px 5px 0;
+    color: #a3a7ae;
+  }
+  .two {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70vh;
+    width: 100%;
+    border-radius: 0 5px 5px 0;
+    color: #a3a7ae;
+    font-size: 16px;
+  }
+}
+</style>