From f02122892ee506d6955eba4aac8ddee53a5194fc Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 30 Mar 2025 11:21:02 +0800
Subject: [PATCH] feat: 整体交互调整
---
src/layout/RSide.vue | 46 ++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 42 insertions(+), 4 deletions(-)
diff --git a/src/layout/RSide.vue b/src/layout/RSide.vue
index ad43f52..c32053b 100644
--- a/src/layout/RSide.vue
+++ b/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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3