realty/virgo.wzfrontend/aiChat/src/views/AIChat.vue

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref
	} from 'vue'
	import AIFlowChat from '@/components/AIFlowChat.vue';
	import {
		useUserStore
	} from '@/store'
	import {
		useRouter
	} from 'vue-router';

	import {
		Notification,
		Position
	} from '@element-plus/icons-vue'
	const router = ref(useRouter())
	const user = ref(useUserStore().userData);
	const websiteUrl = ref('');
	const loading = ref(false);
	const iframeDom = ref(null);
	const isEdit = ref(false);
	const aiFlowChatRef = ref(null);
	const updateURL = (url) => {
		if (websiteUrl.value === url) return;
		websiteUrl.value = url;
		loading.value = true;
	}
	const linTo = () => {
		window.open(websiteUrl.value)
	}
	const edit = () => {
		const iframe = iframeDom.value;
		if (iframe.contentWindow) {
			if (isEdit.value) {
				removeEdit();
			} else {
				iframe.contentWindow.postMessage({
					designMode: false,
					enabled: true,
					type: "devtools_enable",
					__v0_remote__: 1
				}, '*')
			}
			isEdit.value = !isEdit.value;
		}
	}
	const removeEdit = () => {
		const iframe = iframeDom.value;
		if (iframe.contentWindow) {
			iframe.contentWindow.postMessage({
				designMode: false,
				enabled: false,
				type: "devtools_enable",
				__v0_remote__: 1
			}, '*')
			isEdit.value = false;
		}
	}
	const handleFunc = e => {
		if (e.data && e.data.type === 'app_navigation_state') return;
		if (e.data.type) {
			let type = e.data.type;
			if (type === 'frame_onload') {
				loading.value = false;
				removeEdit();
			}
			if (type === 'devtools_selected_state' && e.data.key) {
				aiFlowChatRef.value.selectItem(e.data);
			}
		}
	}
	onMounted(() => {
		window.addEventListener('message', handleFunc);
	})
	onUnmounted(() => {
		window.removeEventListener('message', handleFunc);
	})
</script>
<template>
	<div class="ai-website">
		<header class="ai-website-header">
			<div class="home-nav-left" @click="router.push('/')">
				<img class="img"
					src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
					alt="logo.png" />
				<span class="title">WorkArk.AI</span>
			</div>
			<div class="home-nav-right">
				<div class="item no-token">
					<el-avatar :size="26" :src="user.portrait"></el-avatar>
				</div>
			</div>
		</header>
		<div class="ai-website-content">
			<div class="website-form ai-website-box">
				<div class="website-form-title">AI聊天</div>
				<div class="hui-flex-box">
					<AIFlowChat ref="aiFlowChatRef" @updateURL="updateURL" @removeEdit="removeEdit"></AIFlowChat>
				</div>
			</div>
			<div class="website-show ai-website-box">
				<div class="website-form-title">
					<div>网页展示</div>
					<div class="title-icon-box" v-if="websiteUrl">
						<el-icon :class="isEdit?'active':''" @click="edit">
							<Position />
						</el-icon>
						<el-icon @click="linTo">
							<Notification />
						</el-icon>
					</div>
				</div>
				<div class="hui-flex-box">
					<div class="no-empty" v-if="!websiteUrl">
						<el-empty description="请先预览网站"></el-empty>
					</div>
					<div class="html-box" v-else v-loading="loading">
						<iframe ref="iframeDom" :src="websiteUrl" width="100%" height="100%" frameborder="0"
							@load="onloadIframe" :key="websiteUrl">
						</iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss">
	.ai-website {
		width: 100%;
		height: 100%;
		display: flex;
		background: #fcfbf8;
		flex-direction: column;

		.ai-website-header {
			height: 44px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;

			.home-nav-left {
				display: flex;
				align-items: center;
				cursor: pointer;
			}

			.title {
				font-weight: 600;
				color: #000;
				font-size: 18px;
				margin-left: 10px;
			}

			.img {
				width: 32px;
				height: 32px;
			}

			.home-nav-right {
				.item {
					display: flex;
					align-items: center;
				}

				.no-token {
					cursor: pointer;
				}

				.name {
					margin-left: 10px;
				}

				.el-avatar {
					background: var(--el-color-primary);

					img {
						background: #fff;
					}
				}
			}
		}

		.ai-website-content {
			display: flex;
			width: 100%;
			height: 0;
			flex: 1;
			padding: 0 10px 10px 10px;
		}

		.ai-website-box {
			background: #fff;
			border: 1px solid var(--el-border-color);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
		}

		.html-box {
			width: 100%;
			overflow: hidden;
			height: 100%;
		}

		.iframe-class {
			width: 100%;
			height: 100%;
			border: none;
			overflow: hidden;
		}

		.website-form-title {
			height: 44px;
			line-height: 44px;
			border-bottom: 1px solid var(--el-border-color);
			padding: 0 10px;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-icon-box {
				font-size: 18px;
				color: #6c6d70;
				display: flex;
				align-items: center;
				cursor: pointer;

				.el-icon {
					margin-left: 10px;

					&.active {
						color: var(--el-color-primary);
					}

					&:hover {
						color: var(--el-color-primary);
					}
				}
			}
		}

		.website-form {
			width: 600px;
			border-right: 1px solid var(--el-border-color);
			margin-right: 10px;
		}

		.no-empty {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.website-show {
			flex: 1;
			width: 0;
		}

		.hui-flex-box {
			height: 0;
			flex: 1;
		}

		.website-form-content {
			padding: 10px;

			.el-form {
				display: block;

				.el-form-item {
					width: 100%;
					padding: 0 !important;
					margin-bottom: 15px;
				}
			}
		}
	}
</style>