|
@@ -0,0 +1,117 @@
|
|
|
+<template>
|
|
|
+ <div class="robot-help">
|
|
|
+ <el-popover
|
|
|
+ v-if="aiRobotResult.enable"
|
|
|
+ content="点我开始提问"
|
|
|
+ placement="top"
|
|
|
+ effect="light"
|
|
|
+ popper-class="robot-popover"
|
|
|
+ trigger="manual"
|
|
|
+ v-model="tipsShow"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="reference"
|
|
|
+ class="robot-btn"
|
|
|
+ :style="styles"
|
|
|
+ v-move-ele.prevent.stop="{
|
|
|
+ mouseMove: moveElement,
|
|
|
+ mouseUp: moveElementOver,
|
|
|
+ click: toHelp,
|
|
|
+ }"
|
|
|
+ @mouseenter="mouseenterHandle"
|
|
|
+ @mouseleave="mouseleaveHandle"
|
|
|
+ ></div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import MoveEle from "@/directives/move-ele";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "robot-help",
|
|
|
+ directives: { MoveEle },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ aiRobotResult: this.$ls.get("user", { aiRobotResult: {} }).aiRobotResult,
|
|
|
+ sizePos: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ tipsShow: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.sizePos = this.getCachePosition();
|
|
|
+ this.registResizeEvent();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ styles() {
|
|
|
+ return {
|
|
|
+ left: `${this.sizePos.x}px`,
|
|
|
+ top: `${this.sizePos.y}px`,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener("resize", () => {
|
|
|
+ this.sizePos = this.getCachePosition();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toHelp() {
|
|
|
+ if (!this.aiRobotResult?.url) return;
|
|
|
+ window.open(this.aiRobotResult.url);
|
|
|
+ },
|
|
|
+ mouseenterHandle() {
|
|
|
+ this.tipsShow = true;
|
|
|
+ },
|
|
|
+ mouseleaveHandle() {
|
|
|
+ this.tipsShow = false;
|
|
|
+ },
|
|
|
+ getValidateSize({ x, y }) {
|
|
|
+ return {
|
|
|
+ x: Math.max(Math.min(x, window.innerWidth - 56), 0),
|
|
|
+ y: Math.max(Math.min(y, window.innerHeight - 56), 0),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ moveElement({ left, top }) {
|
|
|
+ this.sizePos.x = left;
|
|
|
+ this.sizePos.y = top;
|
|
|
+ this.tipsShow = false;
|
|
|
+
|
|
|
+ this.sizePos = this.getValidateSize(this.sizePos);
|
|
|
+ },
|
|
|
+ moveElementOver({ left, top }) {
|
|
|
+ this.sizePos.x = left;
|
|
|
+ this.sizePos.y = top;
|
|
|
+ this.sizePos = this.getValidateSize(this.sizePos);
|
|
|
+ this.tipsShow = true;
|
|
|
+
|
|
|
+ this.setCachePosition();
|
|
|
+ },
|
|
|
+ getCachePosition() {
|
|
|
+ const robotPos = this.$ls.get("robotPos", "");
|
|
|
+ if (!robotPos)
|
|
|
+ return { x: window.innerWidth - 92, y: window.innerHeight - 92 };
|
|
|
+
|
|
|
+ return {
|
|
|
+ x: (robotPos.x * window.innerWidth) / robotPos.pw,
|
|
|
+ y: (robotPos.y * window.innerHeight) / robotPos.ph,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ setCachePosition() {
|
|
|
+ this.$ls.set("robotPos", {
|
|
|
+ ...this.sizePos,
|
|
|
+ pw: window.innerWidth,
|
|
|
+ ph: window.innerHeight,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ registResizeEvent() {
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.sizePos = this.getCachePosition();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|