画布增加的新功能

2026-01-02 11:24:11 +08:00
parent 1ae365b1f3
commit f8e4ab8cdb
59 changed files with 4401 additions and 1213 deletions
--- a/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/PalletPanel/index.vue
@@ -0,0 +1,199 @@
+<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>