增加生成动画

src/api/digitalHuman/creation/index.ts

@@ -80,7 +80,7 @@ export function createCreation(data: CreationSubmitParams) {
 
 export function downloadToFile(data: DownloadToFileParams) {
 	return request({
-		url: '/oss/file/downloadToFile',
+		url: '/oss/file/downloadToBrowser',
 		method: 'post',
 		data,
 	});

src/views/digitalHuman/creation/index.vue

@@ -1,5 +1,16 @@
 <template>
-	<div class="creation-page">
+	<div class="creation-page" :class="{ 'is-submitting': submitLoading }">
+		<div v-if="submitLoading" class="creation-loading-mask">
+			<div class="creation-loading-card">
+				<div class="loading-orbit">
+					<span class="loading-ring ring-outer"></span>
+					<span class="loading-ring ring-inner"></span>
+					<span class="loading-core"></span>
+				</div>
+				<div class="loading-title">正在创作中</div>
+				<div class="loading-desc">内容生成较慢，请稍候，创作完成后会自动刷新结果</div>
+			</div>
+		</div>
 		<div class="panel left" v-loading="treeLoading">
 			<div class="title">工作空间</div>
 			<div class="tree-wrap">
@@ -274,10 +285,11 @@ const getList = async () => {
 	}
 };
 const handleSubmit = async () => {
-	if (!formRef.value) return;
+	if (!formRef.value || submitLoading.value) return;
 	try {
 		await formRef.value.validate();
 		submitLoading.value = true;
+		selectedPreview.value = null;
 		await createCreation({
 			...formData,
 			count: Number(formData.count),
@@ -304,6 +316,94 @@ onMounted(getList);
 	padding: 14px;
 	background: #f6f8fb;
 	box-sizing: border-box;
+	position: relative;
+}
+.creation-page.is-submitting {
+	overflow: hidden;
+}
+.creation-loading-mask {
+	position: absolute;
+	inset: 14px;
+	z-index: 20;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(246, 248, 251, 0.78);
+	backdrop-filter: blur(8px);
+	border-radius: 14px;
+}
+.creation-loading-card {
+	width: min(420px, calc(100% - 40px));
+	padding: 36px 28px;
+	border-radius: 20px;
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: 0 18px 48px rgba(64, 102, 255, 0.18);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+.loading-orbit {
+	position: relative;
+	width: 108px;
+	height: 108px;
+	margin-bottom: 20px;
+}
+.loading-ring {
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	border-style: solid;
+	animation: orbit-rotate 1.8s linear infinite;
+}
+.ring-outer {
+	border-width: 4px;
+	border-color: #5b8cff transparent #8fb3ff transparent;
+}
+.ring-inner {
+	inset: 15px;
+	border-width: 4px;
+	border-color: transparent #7c9dff transparent #d2deff;
+	animation-direction: reverse;
+	animation-duration: 1.2s;
+}
+.loading-core {
+	position: absolute;
+	inset: 34px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #5b8cff 0%, #7a5cff 100%);
+	box-shadow: 0 0 0 10px rgba(91, 140, 255, 0.12);
+	animation: core-pulse 1.6s ease-in-out infinite;
+}
+.loading-title {
+	font-size: 22px;
+	font-weight: 700;
+	color: #1f2d3d;
+	margin-bottom: 10px;
+}
+.loading-desc {
+	font-size: 14px;
+	line-height: 1.7;
+	color: #5f6b7a;
+}
+@keyframes orbit-rotate {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes core-pulse {
+	0%,
+	100% {
+		transform: scale(0.92);
+		box-shadow: 0 0 0 10px rgba(91, 140, 255, 0.12);
+	}
+	50% {
+		transform: scale(1);
+		box-shadow: 0 0 0 18px rgba(91, 140, 255, 0.2);
+	}
 }
 .panel {
 	background: #fff;