From d44be20fd9423bfd2e0205bc7befff62b8932907 Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Sun, 1 Sep 2024 23:51:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=95=8C=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=88=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=8F=AF=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DragLine.vue  | 117 ++++++++++++++++++++++++++++
 src/views/message/MessageLayout.vue |  50 +++++++++++-
 2 files changed, 165 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/DragLine.vue

diff --git a/src/components/common/DragLine.vue b/src/components/common/DragLine.vue
new file mode 100644
index 0000000..7c04915
--- /dev/null
+++ b/src/components/common/DragLine.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+const props = defineProps({
+  direction: { type: String },
+  min: { type: Number },
+  max: { type: Number },
+  originSize: { type: Number }
+})
+const emit = defineEmits(['dragUpdate'])
+
+const dragData = ref({ status: false, pageX: 0, pageY: 0, width: 0, height: 0 })
+const dragRef = ref()
+
+const onMouseUp = () => {
+  dragData.value.status = false
+}
+
+const onMouseDown = (e) => {
+  dragData.value = {
+    status: true,
+    pageX: e.pageX,
+    pageY: e.pageY,
+    width: ['left', 'right'].includes(props.direction) ? props.originSize : 0,
+    height: ['left', 'right'].includes(props.direction) ? 0 : props.originSize
+  }
+}
+
+const onMouseMove = (e) => {
+  if (!dragData.value.status) return
+
+  let width,
+    height = 0
+  switch (props.direction) {
+    case 'left':
+      width = dragData.value.width + dragData.value.pageX - e.pageX
+      break
+    case 'right':
+      width = dragData.value.width + e.pageX - dragData.value.pageX
+      break
+    case 'up':
+      height = dragData.value.height + dragRef.value.pageY - e.pageY
+      break
+    case 'down':
+      height = dragData.value.height + e.pageY - dragRef.value.pageY
+      break
+  }
+
+  if (width < props.min) width = props.min
+  if (width > props.max) width = props.max
+  if (height < props.min) height = props.min
+  if (height > props.max) height = props.max
+
+  emit('dragUpdate', { width: width, height: height })
+}
+
+onMounted(() => {
+  dragRef.value.addEventListener('mousedown', onMouseDown)
+  document.addEventListener('mouseup', onMouseUp)
+  document.addEventListener('mousemove', onMouseMove)
+})
+
+onUnmounted(() => {
+  dragRef.value.removeEventListener('mousedown', onMouseDown)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener('mousemove', onMouseMove)
+})
+</script>
+
+<template>
+  <div
+    class="drag-line"
+    :class="['drag-line-' + props.direction, { drag_resizing: dragData.status }]"
+    ref="dragRef"
+  ></div>
+</template>
+
+<style lang="scss">
+.drag-line {
+  position: absolute;
+  cursor: col-resize;
+
+  &:hover,
+  &.drag_resizing {
+    background-color: #409eff;
+  }
+
+  &.drag-line-up {
+    top: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    cursor: row-resize;
+  }
+
+  &.drag-line-down {
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    cursor: row-resize;
+  }
+
+  &.drag-line-left {
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+
+  &.drag-line-right {
+    right: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 0c35d87..93c1f2b 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -1,3 +1,49 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import DragLine from '@/components/common/DragLine.vue'
 
-<template>消息</template>
+const asideRef = ref()
+const asideWidth = ref(250)
+const widthMin = 150
+const widthMax = 500
+
+const onDragUpdate = ({ width }) => {
+  console.log('width is ', width)
+  asideWidth.value = width
+}
+</script>
+
+<template>
+  <el-container class="msg-container-hole">
+    <el-aside class="msg-aside bdr-r" ref="asideRef" :style="{ width: asideWidth + 'px' }">
+      <div>
+        <div>搜索</div>
+        <div>会话列表</div>
+      </div>
+
+      <DragLine
+        direction="right"
+        :min="widthMin"
+        :max="widthMax"
+        :origin-size="asideWidth"
+        @drag-update="onDragUpdate"
+      ></DragLine>
+    </el-aside>
+
+    <el-main>
+      <div>聊天主体</div>
+    </el-main>
+  </el-container>
+</template>
+
+<style lang="scss">
+.msg-container-hole {
+  height: 100%;
+  user-select: none;
+
+  .msg-aside {
+    height: 100%;
+    position: relative;
+  }
+}
+</style>