From f137ae591e1c0ab48693017c1ed0297b0cb448f2 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Mon, 27 Apr 2026 17:01:53 +0800
Subject: [PATCH] feat: update content creation task workflow

---
 src/views/digitalHuman/creation/index.vue | 469 +++++++++++++++++++---
 1 file changed, 421 insertions(+), 48 deletions(-)

diff --git a/src/views/digitalHuman/creation/index.vue b/src/views/digitalHuman/creation/index.vue
index 53cfd81..a4691e1 100644
--- a/src/views/digitalHuman/creation/index.vue
+++ b/src/views/digitalHuman/creation/index.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
 	<div class="creation-page" :class="{ 'is-submitting': submitLoading }">
 		<div v-if="submitLoading" class="creation-loading-mask">
 			<div class="creation-loading-card">
@@ -50,40 +50,88 @@
 			</div>
 		</div>
 		<div class="panel center">
-			<div class="title">内容创建参数配置</div>
+			<div class="form-header">
+				<div class="title">内容创建参数配置</div>
+				<el-badge :value="taskBadgeCount" :hidden="taskBadgeCount === 0" class="task-badge">
+					<el-button circle class="task-trigger" @click="taskDialogVisible = true">
+						<el-icon><ele-Bell /></el-icon>
+					</el-button>
+				</el-badge>
+			</div>
 			<el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="compact-form">
 				<div class="form-grid">
-					<el-form-item label="1. 创作模式" prop="mode" class="span-1"
-						><el-select v-model="formData.mode"><el-option v-for="item in modeOptions" :key="item" :label="item" :value="item" /></el-select
+					<el-form-item prop="mode" class="span-1"
+						><el-select v-model="formData.mode" placeholder="创作模式"
+							><el-option v-for="item in modeOptions" :key="item" :label="item" :value="item" /></el-select
 					></el-form-item>
-					<el-form-item label="2. 内容类型" prop="content_type" class="span-1"
-						><el-select v-model="formData.content_type"
+					<el-form-item prop="content_type" class="span-1"
+						><el-select v-model="formData.content_type" placeholder="内容类型" filterable allow-create default-first-option
 							><el-option v-for="item in contentTypeOptions" :key="item" :label="item" :value="item" /></el-select
 					></el-form-item>
-					<el-form-item label="3. 主题（系列名）" prop="theme" class="span-1"
-						><el-input v-model="formData.theme" placeholder="例如：春季通勤穿搭、小个子显高技巧"
+					<el-form-item prop="theme" class="span-1"
+						><el-input v-model="formData.theme" placeholder="主题（系列名），例如：春季通勤穿搭"
 					/></el-form-item>
-					<el-form-item label="4. 标题（具体标题）" prop="title" class="span-1"
-						><el-input v-model="formData.title" placeholder="例如：通勤穿搭技巧、5个显高穿搭法则"
+					<el-form-item prop="title" class="span-1"
+						><el-input v-model="formData.title" placeholder="标题（具体标题），例如：通勤穿搭技巧"
 					/></el-form-item>
-					<el-form-item label="5. 内容风格" prop="style" class="span-1"
-						><el-select v-model="formData.style"><el-option v-for="item in styleOptions" :key="item" :label="item" :value="item" /></el-select
+					<el-form-item prop="style" class="span-1"
+						><el-select v-model="formData.style" placeholder="内容风格" filterable allow-create default-first-option
+							><el-option v-for="item in styleOptions" :key="item" :label="item" :value="item" /></el-select
 					></el-form-item>
-					<el-form-item label="6. 生成条数" prop="count" class="span-1"
-						><el-input-number v-model="formData.count" :min="1" :max="3" controls-position="right" class="w100"
-					/></el-form-item>
-					<el-form-item v-if="showImageConfig" label="7. 每条配图数量" prop="image_per_post" class="span-1"
-						><el-input-number v-model="formData.image_per_post" :min="1" :max="3" controls-position="right" class="w100"
-					/></el-form-item>
-					<el-form-item v-if="showImageConfig" label="8. 图片比例" prop="image_ratio" class="span-1"
-						><el-select v-model="formData.image_ratio"
+					<el-form-item prop="count" class="span-1">
+						<div class="number-field">
+							<span class="number-label">生成条数</span>
+							<el-input-number v-model="formData.count" :min="1" :max="5" controls-position="right" class="w100" />
+						</div>
+					</el-form-item>
+					<el-form-item v-if="showImageConfig" prop="image_per_post" class="span-1">
+						<div class="number-field">
+							<span class="number-label">每条配图数量</span>
+							<el-input-number v-model="formData.image_per_post" :min="1" :max="3" controls-position="right" class="w100" />
+						</div>
+					</el-form-item>
+					<el-form-item v-if="showImageConfig" prop="image_ratio" class="span-1"
+						><el-select v-model="formData.image_ratio" placeholder="图片比例"
 							><el-option v-for="item in imageRatioOptions" :key="item" :label="item" :value="item" /></el-select
 					></el-form-item>
-					<el-form-item :label="showImageConfig ? '9. 描述' : '7. 描述'" prop="description" class="span-2 description-item"
-						><el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入内容补充描述、重点要求或限制条件"
-					/></el-form-item>
+					<el-form-item prop="description" class="span-2 description-item">
+						<div class="chat-input-box">
+							<el-input
+								v-model="formData.description"
+								type="textarea"
+								:autosize="{ minRows: 3, maxRows: 8 }"
+								resize="none"
+								placeholder=" 说点什么"
+								class="chat-textarea"
+							/>
+							<div v-if="descriptionFiles.length" class="chat-file-list">
+								<el-tag v-for="file in descriptionFiles" :key="file.uid" closable type="info" effect="plain" @close="removeDescriptionFile(file.uid)">
+									{{ file.name }}
+								</el-tag>
+							</div>
+							<div class="chat-toolbar">
+								<div class="chat-actions">
+									<el-upload
+										v-model:file-list="descriptionFiles"
+										class="chat-upload"
+										multiple
+										:auto-upload="false"
+										:show-file-list="false"
+										accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
+									>
+										<el-button text class="toolbar-btn">
+											<el-icon><ele-Paperclip /></el-icon>
+											<span>上传图片/文件</span>
+										</el-button>
+									</el-upload>
+								</div>
+								<el-button circle type="primary" class="chat-send-btn" :loading="submitLoading" @click="handleSubmit">
+									<el-icon><ele-Top /></el-icon>
+								</el-button>
+							</div>
+						</div>
+					</el-form-item>
 				</div>
-				<el-button type="primary" class="submit-btn" :loading="submitLoading" @click="handleSubmit">告诉我你的选择，我马上开始创作！</el-button>
 			</el-form>
 		</div>
 		<div class="panel right" v-loading="previewLoading">
@@ -96,12 +144,31 @@
 				</div>
 			</div>
 		</div>
+		<el-dialog v-model="taskDialogVisible" title="创作任务" width="680px" append-to-body class="task-dialog">
+			<div class="task-list">
+				<el-empty v-if="creationTasks.length === 0" description="暂无创作任务" />
+				<div v-for="task in creationTasks" :key="task.id" class="task-item">
+					<div class="task-item-header">
+						<div class="task-name">{{ task.title }}</div>
+						<el-tag :type="getTaskTagType(task.status)" effect="light">{{ getTaskStatusText(task.status) }}</el-tag>
+					</div>
+					<div class="task-summary">{{ task.summary }}</div>
+					<div class="task-time">
+						创建：{{ task.createdAt }}<span v-if="task.updatedAt"> ｜ 更新：{{ task.updatedAt }}</span>
+					</div>
+					<div v-if="task.error" class="task-error">{{ task.error }}</div>
+					<div class="task-actions-row">
+						<el-button v-if="task.status === 'failed'" type="primary" link :loading="submitLoading" @click="retryTask(task)">重新执行</el-button>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue';
-import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { ElMessage, type FormInstance, type FormRules, type UploadUserFile } from 'element-plus';
 import {
 	createCreation,
 	downloadToFile,
@@ -110,6 +177,7 @@ import {
 	type CreationSubmitParams,
 	type CreationTreeItem,
 } from '/@/api/digitalHuman/creation';
+import { uploadFile } from '/@/api/knowledge/document';
 
 type NodeType = 'date' | 'contentType' | 'theme' | 'title' | 'html' | 'image';
 interface TreeNode {
@@ -128,12 +196,77 @@ interface PreviewState {
 	nodeType: 'html' | 'image';
 }
 const formRef = ref<FormInstance>();
+type CreationTaskStatus = 'running' | 'success' | 'failed';
+interface CreationTask {
+	id: number;
+	title: string;
+	summary: string;
+	status: CreationTaskStatus;
+	createdAt: string;
+	updatedAt?: string;
+	error?: string;
+	params: CreationSubmitParams;
+}
 const treeLoading = ref(false);
 const submitLoading = ref(false);
 const previewLoading = ref(false);
 const imgAddressPrefix = ref('');
 const treeNodes = ref<TreeNode[]>([]);
 const selectedPreview = ref<PreviewState | null>(null);
+const descriptionFiles = ref<UploadUserFile[]>([]);
+const taskDialogVisible = ref(false);
+const mockCreationParams: CreationSubmitParams = {
+	mode: '混合模式（文案 + 图片）',
+	content_type: '穿搭分享',
+	theme: '春季通勤穿搭',
+	title: '通勤穿搭技巧',
+	description: '模拟任务描述',
+	style: '生活分享 — 亲切自然，像朋友聊天',
+	count: 1,
+	image_per_post: 1,
+	image_ratio: '3:4 — 小红书',
+};
+const creationTasks = ref<CreationTask[]>([
+	{
+		id: 3,
+		title: '小个子显高穿搭法则',
+		summary: '穿搭分享 / 小个子显高技巧 / 5个显高穿搭法则',
+		status: 'running',
+		createdAt: '2026-04-27 10:20:18',
+		updatedAt: '2026-04-27 10:21:03',
+		params: { ...mockCreationParams, theme: '小个子显高技巧', title: '5个显高穿搭法则' },
+	},
+	{
+		id: 2,
+		title: '春季通勤穿搭技巧',
+		summary: '穿搭分享 / 春季通勤穿搭 / 通勤穿搭技巧',
+		status: 'success',
+		createdAt: '2026-04-27 09:45:12',
+		updatedAt: '2026-04-27 09:48:36',
+		params: { ...mockCreationParams },
+	},
+	{
+		id: 1,
+		title: '周末约会氛围感穿搭',
+		summary: '穿搭分享 / 约会穿搭 / 周末约会氛围感穿搭',
+		status: 'failed',
+		createdAt: '2026-04-27 09:12:05',
+		updatedAt: '2026-04-27 09:13:21',
+		error: '素材上传失败，请重新执行任务',
+		params: { ...mockCreationParams, theme: '约会穿搭', title: '周末约会氛围感穿搭' },
+	},
+	{
+		id: 2,
+		title: '氛围感穿搭',
+		summary: '穿搭分享 / 约会穿搭 / 氛围感穿搭',
+		status: 'failed',
+		createdAt: '2026-04-27 09:12:05',
+		updatedAt: '2026-04-27 09:13:21',
+		error: '素材上传失败，请重新执行任务',
+		params: { ...mockCreationParams, theme: '约会穿搭', title: '周末约会氛围感穿搭' },
+	},
+]);
+const taskIdSeed = ref(3);
 const apiBaseUrl = (import.meta.env.VITE_API_URL || '').replace(/\/$/, '');
 const treeProps = { children: 'children', label: 'label' };
 const queryParams = reactive<CreationListParams>({ keyword: '', pageNum: 1, pageSize: 10 });
@@ -158,6 +291,16 @@ const styleOptions = [
 	'干货教学 — 条理清晰，步骤明确',
 ];
 const imageRatioOptions = ['3:4 — 小红书', '1:1 — 方图', '16:9 — 横版'];
+const taskBadgeCount = computed(() => creationTasks.value.filter((task) => task.status !== 'success').length);
+const formatTaskTime = () => {
+	const date = new Date();
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+};
+const getTaskStatusText = (status: CreationTaskStatus) => ({ running: '执行中', success: '已完成', failed: '失败' })[status];
+const getTaskTagType = (status: CreationTaskStatus) =>
+	({ running: 'warning', success: 'success', failed: 'danger' })[status] as 'warning' | 'success' | 'danger';
+const buildTaskSummary = (params: CreationSubmitParams) =>
+	`${params.content_type} / ${params.theme || '未填写主题'} / ${params.title || '未填写标题'}`;
 watch(
 	() => formData.mode,
 	() => {
@@ -317,24 +460,79 @@ const getList = async () => {
 		treeLoading.value = false;
 	}
 };
+const removeDescriptionFile = (uid?: number) => {
+	descriptionFiles.value = descriptionFiles.value.filter((file) => file.uid !== uid);
+};
+const extractUploadUrl = (res: unknown) => {
+	const data = (res as { data?: Record<string, string> })?.data;
+	const root = res as Record<string, string>;
+	return data?.url || data?.fileUrl || data?.filePath || data?.path || root?.url || root?.fileUrl || root?.filePath || root?.path || '';
+};
+const buildDescription = async () => {
+	const description = formData.description?.trim() || '';
+	const rawFiles = descriptionFiles.value.map((item) => item.raw).filter(Boolean) as File[];
+	if (rawFiles.length === 0) return description || undefined;
+	const uploadedFiles = await Promise.all(
+		rawFiles.map(async (file) => {
+			const res = await uploadFile(file);
+			return {
+				name: file.name,
+				url: extractUploadUrl(res),
+			};
+		})
+	);
+	const attachmentText = uploadedFiles.map((file, index) => `${index + 1}. ${file.name}${file.url ? `：${file.url}` : ''}`).join('\n');
+	return [description, `参考附件：\n${attachmentText}`].filter(Boolean).join('\n\n');
+};
+const runCreationTask = async (task: CreationTask) => {
+	try {
+		submitLoading.value = true;
+		selectedPreview.value = null;
+		task.status = 'running';
+		task.error = undefined;
+		task.updatedAt = formatTaskTime();
+		await createCreation(task.params);
+		task.status = 'success';
+		task.updatedAt = formatTaskTime();
+		ElMessage.success('创作任务已提交');
+		await getList();
+	} catch (error) {
+		task.status = 'failed';
+		task.updatedAt = formatTaskTime();
+		task.error = error instanceof Error ? error.message : '任务执行失败，请稍后重试';
+		ElMessage.error('提交创作任务失败');
+	} finally {
+		submitLoading.value = false;
+	}
+};
+const retryTask = async (task: CreationTask) => {
+	if (submitLoading.value) return;
+	await runCreationTask(task);
+};
 const handleSubmit = async () => {
 	if (!formRef.value || submitLoading.value) return;
 	try {
 		await formRef.value.validate();
-		submitLoading.value = true;
-		selectedPreview.value = null;
-		await createCreation({
+		const description = await buildDescription();
+		const params: CreationSubmitParams = {
 			...formData,
 			count: Number(formData.count),
 			image_per_post: Number(formData.image_per_post),
-			description: formData.description?.trim() || undefined,
-		});
-		ElMessage.success('创作任务已提交');
-		await getList();
+			description,
+		};
+		const task: CreationTask = {
+			id: ++taskIdSeed.value,
+			title: params.title || `创作任务 ${taskIdSeed.value}`,
+			summary: buildTaskSummary(params),
+			status: 'running',
+			createdAt: formatTaskTime(),
+			params,
+		};
+		creationTasks.value.unshift(task);
+		taskDialogVisible.value = true;
+		await runCreationTask(task);
 	} catch {
 		ElMessage.error('提交创作任务失败');
-	} finally {
-		submitLoading.value = false;
 	}
 };
 onMounted(getList);
@@ -453,9 +651,80 @@ onMounted(getList);
 	color: #303133;
 	margin-bottom: 12px;
 }
-.preview-title {
+.form-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	margin-bottom: 12px;
+}
+.form-header .title {
 	margin-bottom: 0;
 }
+.task-trigger {
+	width: 34px;
+	height: 34px;
+	border-color: #e6ebf3;
+	background: #f8fafc;
+}
+.task-trigger:hover {
+	color: var(--el-color-primary);
+	border-color: var(--el-color-primary-light-5);
+	background: var(--el-color-primary-light-9);
+}
+.task-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	max-height: 520px;
+	overflow: auto;
+	padding-right: 4px;
+}
+.task-item {
+	padding: 14px;
+	border: 1px solid #edf1f7;
+	border-radius: 12px;
+	background: #fbfcfe;
+}
+.task-item-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	margin-bottom: 8px;
+}
+.task-name {
+	font-size: 15px;
+	font-weight: 700;
+	color: #1f2d3d;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.task-summary,
+.task-time {
+	font-size: 12px;
+	line-height: 1.6;
+	color: #7b8794;
+}
+.task-error {
+	margin-top: 8px;
+	padding: 8px 10px;
+	border-radius: 8px;
+	background: #fff2f0;
+	color: #f56c6c;
+	font-size: 12px;
+	line-height: 1.6;
+}
+.task-actions-row {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 8px;
+}
+.preview-title {
+	margin-bottom: 2px;
+}
 .tree-wrap,
 .center,
 .preview-main {
@@ -492,7 +761,7 @@ onMounted(getList);
 .form-grid {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 0 12px;
+	gap: 24px 12px;
 }
 .span-1 {
 	grid-column: span 1;
@@ -501,17 +770,91 @@ onMounted(getList);
 	grid-column: span 2;
 }
 .description-item {
-	margin-bottom: 8px;
+	margin-top: 2px;
+	margin-bottom: 2px;
+}
+.number-field {
+	position: relative;
+	width: 100%;
+}
+.number-label {
+	position: absolute;
+	left: 12px;
+	top: 50%;
+	z-index: 2;
+	transform: translateY(-50%);
+	font-size: 13px;
+	color: #909399;
+	pointer-events: none;
+}
+.number-field :deep(.el-input-number .el-input__inner) {
+	padding-left: 92px;
+	text-align: left;
+}
+.chat-input-box {
+	width: 100%;
+	padding: 14px 14px 10px;
+	border-radius: 22px;
+	background: #fff;
+	border: 1px solid #e9edf3;
+	box-shadow: 0 10px 24px rgba(31, 45, 61, 0.08);
+	box-sizing: border-box;
+	transition:
+		border-color 0.2s ease,
+		box-shadow 0.2s ease;
+}
+.chat-input-box:focus-within {
+	border-color: var(--el-color-primary-light-5);
+	box-shadow: 0 12px 28px rgba(64, 158, 255, 0.14);
+}
+.chat-textarea {
+	font-size: 14px;
+}
+.chat-file-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	padding: 8px 4px 2px;
+}
+.chat-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding-top: 8px;
+}
+.chat-actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+.chat-upload {
+	display: inline-flex;
+}
+.toolbar-btn {
+	height: 30px;
+	padding: 0 10px;
+	border-radius: 15px;
+	color: #303133;
+	background: #f5f7fa;
+}
+.toolbar-btn:hover {
+	color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+}
+.toolbar-btn :deep(.el-icon) {
+	margin-right: 4px;
+}
+.chat-send-btn {
+	width: 34px;
+	height: 34px;
+	font-size: 16px;
+	flex-shrink: 0;
 }
 .w100 {
 	width: 100%;
 }
-.submit-btn {
-	width: 100%;
-	height: 40px;
-	margin-top: auto;
-	border-radius: 8px;
-}
 .preview-main {
 	flex: 1;
 	min-height: 0;
@@ -544,19 +887,49 @@ onMounted(getList);
 	height: 100%;
 	min-height: 480px;
 }
+:deep(.chat-input-box .el-textarea__inner) {
+	padding: 0 2px;
+	border: none;
+	box-shadow: none;
+	background: transparent;
+	line-height: 1.6;
+}
+:deep(.chat-input-box .el-textarea__inner::placeholder) {
+	color: #a8abb2;
+}
 :deep(.el-form-item) {
-	margin-bottom: 12px;
+	margin-bottom: 2px;
+}
+:deep(.el-form-item__error) {
+	padding-top: 4px;
+	line-height: 16px;
+	white-space: nowrap;
 }
 :deep(.el-form-item__label) {
-	padding-bottom: 4px;
-	font-size: 13px;
-	color: #606266;
+	display: none;
 }
 :deep(.el-input__wrapper),
 :deep(.el-select__wrapper),
 :deep(.el-textarea__inner),
 :deep(.el-input-number) {
-	border-radius: 8px;
+	border-radius: 12px;
+	box-shadow: 0 0 0 1px #e8edf5 inset;
+	background: #fbfcfe;
+}
+:deep(.el-input__wrapper:hover),
+:deep(.el-select__wrapper:hover),
+:deep(.el-textarea__inner:hover),
+:deep(.el-input-number:hover) {
+	box-shadow: 0 0 0 1px #d6e2f2 inset;
+}
+:deep(.el-input__wrapper.is-focus),
+:deep(.el-select__wrapper.is-focused),
+:deep(.el-textarea__inner:focus) {
+	box-shadow: 0 0 0 1px var(--el-color-primary-light-5) inset;
+}
+:deep(.el-input__wrapper),
+:deep(.el-select__wrapper) {
+	min-height: 40px;
 }
 :deep(.el-select),
 :deep(.el-input),