feat: 整体交互调整

罗广辉

2025-03-30 f02122892ee506d6955eba4aac8ddee53a5194fc

 src/layout/RSide.vue

@@ -1,6 +1,23 @@
<template>
  <div class="ai-chat">
    <img class="chat" src="@/assets/images/chat.png" alt="">

    <el-popover
      placement="bottom"
      :visible="visible"
      :width="200"
      trigger="click"
    >
      <template #reference>
        <div class="chat" id="chatID" v-drag:chatID  @mousedown="handleMouseDown"
             @mouseup="handleMouseUp"/>
      </template>
      <div>
        快和我对话吧
        <el-input/>
      </div>
    </el-popover>


    <img class="chat-bottom" src="@/assets/images/chat-bottom.png" alt="">
  </div>
  <div class="r-side">
@@ -14,10 +31,25 @@
</template>

<script setup>
import vDrag from '@/directive/drag'
let logIndex = ref(3);
const enterHover = (value) => {
  logIndex.value = value;
}
const visible = ref(false);
let pressStart = 0;

const handleMouseDown = () => {
  pressStart = Date.now(); // 记录按下时间
};

const handleMouseUp = () => {
  const pressDuration = Date.now() - pressStart; // 计算按下时长
  if (pressDuration < 150) {
    // 如果按下时间小于200ms，认为是点击
    visible.value = !visible.value;
  }
};
</script>

<style scoped lang="scss">
@@ -31,10 +63,16 @@
    height: 68px;
    display: block;
  };


  .chat {
    position: relative;
    bottom: -50px;
    position: fixed;
    bottom: 330px;
    height: 124px;
    width: 100px;
    user-select: none;
    z-index: 999;
    background: url('@/assets/images/chat.png') no-repeat center / 100% 100%;
  }
}
.r-side {
@@ -79,4 +117,4 @@
  bottom: 122px;
}

</style>
</style>