red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update content creation task workflow

Browse Source
This commit is contained in:
吴思建
2026-04-27 17:01:53 +08:00
parent d516886fc9
commit f137ae591e
1 changed files with 421 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
src/views/digitalHuman/creation/index.vue
View File

@@ -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),