aida_front/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue

<template>
	<!-- 颜色选择器模板 -->
	<div v-show="showPanel" class="pallet-overlay" @click.self="close">
		<div class="pallet-modal">
			<!-- <div class="modal-header">
				<h3></h3>
				<button class="close-btn" @click="close">&times;</button>
			</div> -->

			<div class="modal-content">
				<pallet
					v-if="showPanel"
					:selectColor="selectColor"
					@selectUplpadColor="selectUplpadColor"
				/>
			</div>

			<div class="modal-footer">
				<div class="image-count" @click="close">
					{{ $t("Canvas.close") }}
				</div>
				<div class="image-submit gallery_btn" @click="confirm">
					{{ $t("Canvas.confirm") }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		ref,
		watch,
		computed,
		defineProps,
		onDeactivated,
		reactive,
		onMounted,
		defineExpose,
		nextTick,
		onUnmounted,
	} from "vue";
	import pallet from "./pallet.vue";

	import { useI18n } from "vue-i18n";

	// Props
	const props = defineProps([]);
	const { t } = useI18n();
	var resolveFn: (value: any) => void;
	const showPanel = ref(false);
	const open = (obj = {}) => {
		selectColor.value = JSON.parse(JSON.stringify(obj));
		showPanel.value = true;
		return new Promise((resolve) => (resolveFn = resolve));
	};
	const close = () => {
		showPanel.value = false;
	};
	//提交选中的T图片
	const confirm = () => {
		close();
		resolveFn && resolveFn(JSON.parse(JSON.stringify(selectColor.value)));
	};
	const selectColor = ref({});
	const selectUplpadColor = (item: any) => {
		selectColor.value = JSON.parse(JSON.stringify(item));
	};
	defineExpose({
		open,
		close,
	});
</script>

<style scoped lang="less">
	/* 弹窗遮罩层 */
	.pallet-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* 弹窗主体 */
	.pallet-modal {
		background-color: #fff;
		border-radius: 12px;
		max-width: 90%;
		max-height: 95%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
		animation: modalSlideUp 0.3s ease;
		overflow-y: auto;
	}

	@keyframes modalSlideUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 弹窗头部 */
	.modal-header {
		padding: 16px 20px;
		background-color: rgba(255, 255, 255, 0.8);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;

		h3 {
			margin: 0;
			font-size: 18px;
			color: #333;
			font-weight: 600;
		}
	}

	.close-btn {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: #666;
		padding: 0;
		line-height: 1;
		opacity: 0.7;
		transition: all 0.2s;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			opacity: 1;
			color: #333;
			transform: scale(1.1);
		}
	}

	/* 弹窗内容 */
	.modal-content {
		width: 35rem;
		// max-width: 240px;
		margin: 10px 20px;
		background-color: #fff;
		-webkit-overflow-scrolling: touch;
		display: flex;
	}

	/* 弹窗底部 */
	.modal-footer {
		padding: 10px 20px;
		background-color: rgba(255, 255, 255, 0.8);
		// border-top: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
		> .image-submit {
			font-size: 1.2rem;
			line-height: 3.5rem;
		}
	}

	.image-count {
		font-size: 14px;
		color: #666;
		font-weight: 500;
		cursor: pointer;
	}
</style>