添加ai助手

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="body">
+	<div class="body" style="position: relative">
 		<div class="container">
 			<div class="leftBar" style="height: 100%">
 				<sidebarL
@@ -122,6 +122,15 @@
 					</div>
 				</div>
 			</div>
+			<!-- <div
+				v-draggable
+				class="draggable-window"
+				:style="{ left: position.x + 'px', top: position.y + 'px' }"
+				v-if="false"
+			>
+				<div class="window-header">
+				</div>
+			</div> -->
 		</div>
 		<userInfoA
 			ref="userInfoA"
@@ -130,6 +139,20 @@
 			:role="roleUser.role"
 			:orgName="roleUser.orgName"
 		/>
+		<!-- <el-drawer v-model="xiaokeDia" width="100%" :direction="rtl" :size="Full_Screen ? '  100%' : '30%'">
+			<template #header="{ close, titleId, titleClass }">
+				<div slot="title" style="display: flex; align-items: center;">
+					<img style="cursor: pointer;width: 24px;margin-left: 15px;" :src="!Full_Screen ? FullScreen : noFullScreen"
+						@click="Full_Screen = !Full_Screen" alt="">
+
+				</div>
+			</template>
+			<div style="height: calc(100% - 32px);">
+				<iframe width="100%" height="100%"
+					src="https://aichat.cocorobo.cn/#/?id=335951a7-65ec-40e9-ae91-2971464ade4e&type=agent" frameborder="0"
+					scrolling="no"></iframe>
+			</div>
+		</el-drawer> -->
 	</div>
 </template>
 
@@ -152,14 +175,71 @@ export default {
 		homepageL,
 		userInfoA,
 	},
+	directives: {
+		// 修改为Vue.directive的现代写法
+		draggable: {
+			bind(el) {
+				let isDragging = false; // 是否正在拖动
+				let offsetX = 0; // 鼠标与元素的水平偏移
+				let offsetY = 0; // 鼠标与元素的垂直偏移
+
+				// 鼠标按下事件
+				const onMouseDown = (event) => {
+					isDragging = true;
+					offsetX = event.clientX - el.offsetLeft;
+					offsetY = event.clientY - el.offsetTop;
+
+					// 阻止选中文本
+					document.body.style.userSelect = "none";
+
+					// 绑定鼠标移动和鼠标释放事件
+					document.addEventListener("mousemove", onMouseMove);
+					document.addEventListener("mouseup", onMouseUp);
+				};
+
+				// 鼠标移动事件
+				const onMouseMove = (event) => {
+					if (isDragging) {
+						// 更新元素的位置
+						el.style.left = `${event.clientX - offsetX}px`;
+						el.style.top = `${event.clientY - offsetY}px`;
+					}
+				};
+
+				// 鼠标释放事件
+				const onMouseUp = () => {
+					isDragging = false;
+
+					// 恢复文本选择
+					document.body.style.userSelect = "";
+
+					// 移除事件监听
+					document.removeEventListener("mousemove", onMouseMove);
+					document.removeEventListener("mouseup", onMouseUp);
+				};
+
+				// 绑定鼠标按下事件到目标元素
+				el.querySelector(".window-header").addEventListener(
+					"mousedown",
+					onMouseDown
+				);
+			},
+		},
+	},
 	data() {
 		return {
+			xiaokeDia: false,
+			position: {
+				x: window.innerWidth - 170, // 屏幕宽度减去元素宽度
+				y: window.innerHeight - 180, // 屏幕高度减去元素高度
+			}, // 初始位置
 			AppJSon: [],
+			imgA: require("../assets/img/drgB.png"),
 			loading: false,
 			// 判断链接时beta还是cloud的
-            betaL: this.$region,
+			betaL: this.$region,
 			clearifa: "",
-			msgNum:0,
+			msgNum: 0,
 			// 荔园集团下的学校
 			mergedList: [
 				"3823a6a5-1b6e-11f0-a66a-005056924926",
@@ -214,6 +294,16 @@ export default {
 		...mapActions({
 			logout: "user/logout",
 		}),
+		openxiaoKe(){
+			this.xiaokeDia = true;
+		},
+		setHovered(val) {
+			if (val) {
+				this.imgA = require("../assets/img/drgA.png");
+			} else {
+				this.imgA = require("../assets/img/drgB.png");
+			}
+		},
 		// 跳转
 		async goMsg(){
 				console.log('去通知页');
@@ -594,4 +684,23 @@ export default {
 	cursor: pointer;
 	height: 25px;
 }
+.draggable-window {
+	position: absolute;
+	cursor: pointer;
+}
+
+.window-header {
+	height: 85px;
+	width: 105px;
+	cursor: pointer;
+	background: url('../assets/img/drgB.png') no-repeat center center;
+	background-size: cover;
+}
+.window-header:hover {
+	height: 85px;
+	width:105px;
+	cursor: pointer;
+	background: url('../assets/img/drgA.png') no-repeat center center;
+	background-size: cover;
+}
 </style>