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

<script setup>
	import {
		Top,
		Paperclip,
		CircleCloseFilled,
		Plus,
		UserFilled
	} from '@element-plus/icons-vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		ref,
		watch,
		computed,
		onMounted
	} from 'vue'
	import {
		useUserStore
	} from '@/store'
	import Login from '@/components/Login.vue'
	const userStore = useUserStore()
	const message = ref('');
	const typeList = ref([{
		id: 1,
		name: '网站'
	}, {
		id: 2,
		name: '移动端'
	}]);
	const typeValue = ref(1);
	const generateTypeList = {
		1: [{
			id: 1,
			name: '企业官网'
		}, {
			id: 2,
			name: '电商网站'
		}, {
			id: 3,
			name: '服务网站'
		}],
		2: [{
			id: 1,
			name: '企业介绍'
		}, {
			id: 2,
			name: '物业服务'
		}]
	}
	const generateValue = ref(1);
	const generateList = computed(() => {
		generateValue.value = 1;
		return generateTypeList[typeValue.value];
	});
	const loading = ref(false);
	const websiteURL = ref('');
	const commandFunction = (command) => {
		if (command === 'url') openUrl();
	}
	const openUrl = () => {
		ElMessageBox.prompt('请输入参考网站网址', 'WorkArk.AI提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			inputPattern: /./,
			inputErrorMessage: '请输入网址',
			inputValue: websiteURL.value
		}).then(({
			value
		}) => {
			websiteURL.value = value;
		}).catch(() => {});
	}
	const imageList = ref([{
		id: 1,
		url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	}])
	const removeImage = (index) => {
		ElMessageBox.confirm('是否删除该图片?', 'WorkArk.AI提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			imageList.value.splice(index, 1);
		}).catch(() => {});
	}
	const loginVisible = ref(false);
	const callback = () => {
		loginVisible.value = false;
		init();
	}
	const user = ref({});
	const init = () => {
		user.value = userStore.userData;
		console.log(JSON.stringify(user.value));
	}
	onMounted(() => {
		init();
	})
</script>

<template>
	<div class="home-container">
		<div class="home-nav">
			<div class="home-nav-left">
				<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" @click="loginVisible = true" v-if="!user.userId">
					<el-avatar :size="36" :icon="UserFilled"></el-avatar>
					<span class="name">登录/注册</span>
				</div>
				<div class="item no-token" v-else>
					<el-avatar :size="36" :src="user.portrait"></el-avatar>
					<span class="name">{{user.userName}}</span>
				</div>
			</div>
		</div>
		<div class="home-form">
			<div class="form-title">
				<h1 class="big-title"><span>Build By </span><span class="primary">WorkArk.AI</span></h1>
				<p class="small-title">通过与AI聊天创建应用程序和网站</p>
			</div>
			<div class="form-box">
				<el-input type="textarea" v-model="message" placeholder="生成一个信息科技企业官网" resize="none" :rows="5"
					:autosize="{ minRows: 3, maxRows: 7 }">
				</el-input>
				<div class="form-submit">
					<div class="form-operation">
						<el-dropdown @command="commandFunction">
							<el-button size="default" :icon="Paperclip" circle></el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command="url">参考网站</el-dropdown-item>
									<el-dropdown-item command="image">上传图片</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						<el-button style="margin-left: 10px;" size="default" :icon="Plus" circle></el-button>
					</div>
					<el-button type="primary" size="large" :icon="Top" circle :loading="loading"></el-button>
				</div>
				<div class="operation-file" v-if="websiteURL || imageList.length > 0">
					<div class="operation-url" v-if="websiteURL">
						<el-tag type="info" closable effect="plain" round @close="websiteURL = ''">
							{{websiteURL}}
						</el-tag>
					</div>
					<div class="operation-image" v-if="imageList.length > 0">
						<div class="image-item" v-for="(image,index) in imageList" :key="image.id">
							<el-image style="width: 60px; height: 60px" :src="image.url" fit="cover" />
							<el-icon class="image-icon" @click="removeImage(index)">
								<CircleCloseFilled />
							</el-icon>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="loginVisible" title="登录" width="440px">
			<login v-if="loginVisible" @callback="callback"></login>
		</el-dialog>
	</div>
</template>
<style lang="scss">
	.home-container {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(135deg, #8ab1ff, #8834ef, #ff8a66);
		display: flex;
		flex-direction: column;

		.home-nav {
			background: rgba(255, 255, 255, 0.1);
			height: 70px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			padding: 0 24px;
			justify-content: space-between;

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

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

			.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;
					}
				}
			}

		}

		.home-form {
			padding: 24px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 0;
		}

		.form-title {

			.big-title {
				text-align: center;

				span {
					font-size: 72px;
					font-weight: bold;
				}

				.primary {
					color: rgba(255, 255, 255, 0.4);
				}
			}

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

			.small-title {
				text-align: center;
				font-size: 24px;
				opacity: 0.8;
				margin-top: 20px;
			}

		}

		.form-box {
			border: 1px solid #e2e8f0;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 30px;
			width: 100%;
			max-width: 800px;
			margin-top: 60px;
			padding: 16px 16px 6px 16px;

			.el-textarea__inner {
				border: none;
				background: transparent;
				box-shadow: none;

				&:hover {
					box-shadow: none;
				}
			}

			.form-submit {
				margin-top: 10px;
				display: flex;
				align-items: center;

				.form-operation {
					flex: 1;
					width: 0;
					overflow: hidden;
					display: flex;
				}

				.iconfont-item {
					width: 30px;
					height: 30px;
					border: 1px solid var(--el-border-color);
					background: #fff;
					border-radius: 30px;
					margin-right: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					font-size: 16px;
					color: #606266;
					box-sizing: border-box;

				}

				.el-select__wrapper {
					border-radius: 24px;
				}
			}

			.operation-file {
				padding: 10px 0;
			}

			.operation-image {
				display: flex;
			}

			.image-item {
				position: relative;
			}

			.image-icon {
				position: absolute;
				right: -6px;
				top: -6px;
				background: #fff;
				border-radius: 6px;
				cursor: pointer;
				color: var(--el-color-error);
			}
		}
	}
</style>