From 038e4d72d3242b7a6925006a0cb7e858585e2b1f Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Tue, 21 Apr 2026 17:52:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DAPI=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E5=92=8C=E5=8F=82=E6=95=B0=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=A7=A3=E6=9E=90=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将`updateAnchor`方法的请求方式改为PUT，`deleteAnchor`方法改为DELETE并使用params传递数据
- 在路由组件中添加`normalizeRouteComponent`和`resolveRouteComponent`函数，增强动态路由解析能力
- 更新多个组件中的ID处理逻辑，确保ID始终为字符串类型
- 修改样式以统一选择框的宽度
---
 src/api/digitalHuman/creation/index.ts    |  77 ++++++
 src/views/digitalHuman/creation/index.vue | 278 ++++++++++++++++++++++
 2 files changed, 355 insertions(+)
 create mode 100644 src/api/digitalHuman/creation/index.ts
 create mode 100644 src/views/digitalHuman/creation/index.vue

diff --git a/src/api/digitalHuman/creation/index.ts b/src/api/digitalHuman/creation/index.ts
new file mode 100644
index 0000000..151d13a
--- /dev/null
+++ b/src/api/digitalHuman/creation/index.ts
@@ -0,0 +1,77 @@
+import request from '/@/utils/request';
+
+export interface CreationListParams {
+	pageNum: number;
+	pageSize: number;
+	keyword?: string;
+}
+
+export interface CreationTitleItem {
+	title: string;
+	htmlFileUrl: string;
+	jsonFileUrl: string[];
+}
+
+export interface CreationThemeItem {
+	theme: string;
+	titles: CreationTitleItem[];
+}
+
+export interface CreationTreeItem {
+	createdDate: string;
+	themes: CreationThemeItem[];
+}
+
+export interface CreationListData {
+	list: unknown[] | null;
+	total: number;
+	Tree: CreationTreeItem[];
+	imgAddressPrefix: string;
+}
+
+export interface CreationListResponse {
+	code: number;
+	message: string;
+	data: CreationListData;
+}
+
+export interface CreationSubmitParams {
+	mode: string;
+	content_type: string;
+	theme: string;
+	title: string;
+	description?: string;
+	style: string;
+	count: number;
+	image_per_post: number;
+	image_ratio: string;
+}
+
+export interface DownloadToFileParams {
+	fileURL: string;
+	localPath: string;
+}
+
+export function getCreationList(params: CreationListParams) {
+	return request({
+		url: '/black-deacon/creation/info/list',
+		method: 'get',
+		params,
+	}) as Promise<CreationListResponse>;
+}
+
+export function createCreation(data: CreationSubmitParams) {
+	return request({
+		url: '/black-deacon/creation/info/creation',
+		method: 'post',
+		data,
+	});
+}
+
+export function downloadToFile(data: DownloadToFileParams) {
+	return request({
+		url: '/oss/file/downloadToFile',
+		method: 'post',
+		data,
+	});
+}
diff --git a/src/views/digitalHuman/creation/index.vue b/src/views/digitalHuman/creation/index.vue
new file mode 100644
index 0000000..47969cf
--- /dev/null
+++ b/src/views/digitalHuman/creation/index.vue
@@ -0,0 +1,278 @@
+<template>
+	<div class="creation-page">
+		<div class="panel left" v-loading="treeLoading">
+			<div class="title">作品目录</div>
+			<div class="tree-wrap">
+				<el-empty v-if="treeNodes.length === 0 && !treeLoading" description="暂无作品数据" />
+				<el-tree
+					v-else
+					:data="treeNodes"
+					node-key="id"
+					:props="treeProps"
+					default-expand-all
+					:highlight-current="true"
+					:expand-on-click-node="false"
+					@node-click="handleNodeClick"
+				>
+					<template #default="{ data }">
+						<div class="tree-node">
+							<div class="tree-node-main">
+								<el-icon v-if="data.nodeType === 'date'"><ele-Calendar /></el-icon>
+								<el-icon v-else-if="data.nodeType === 'theme'"><ele-CollectionTag /></el-icon>
+								<el-icon v-else-if="data.nodeType === 'title'"><ele-FolderOpened /></el-icon>
+								<el-icon v-else-if="data.nodeType === 'html'"><ele-Document /></el-icon>
+								<el-icon v-else><ele-Picture /></el-icon>
+								<span class="ellipsis">{{ data.label }}</span>
+							</div>
+							<el-button v-if="data.nodeType === 'html' || data.nodeType === 'image'" type="primary" link class="tree-download" @click.stop="downloadNode(data)">
+								<el-icon><ele-Download /></el-icon>
+							</el-button>
+						</div>
+					</template>
+				</el-tree>
+			</div>
+		</div>
+
+		<div class="panel center">
+			<div class="title">内容创建参数配置</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>
+					<el-form-item label="2. 内容类型" prop="content_type" class="span-1">
+						<el-select v-model="formData.content_type">
+							<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>
+					<el-form-item label="4. 标题（具体标题）" prop="title" class="span-1">
+						<el-input v-model="formData.title" placeholder="例如：通勤穿搭技巧、5个显高穿搭法则" />
+					</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>
+					<el-form-item label="6. 生成条数" prop="count" class="span-1">
+						<el-input-number v-model="formData.count" :min="1" :max="20" controls-position="right" class="w100" />
+					</el-form-item>
+
+					<el-form-item label="7. 配图数量" prop="image_per_post" class="span-1">
+						<el-input-number v-model="formData.image_per_post" :min="1" :max="20" controls-position="right" class="w100" />
+					</el-form-item>
+					<el-form-item label="8. 图片比例" prop="image_ratio" class="span-1">
+						<el-select v-model="formData.image_ratio">
+							<el-option v-for="item in imageRatioOptions" :key="item" :label="item" :value="item" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="9. 描述" prop="description" class="span-2 description-item">
+						<el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入内容补充描述、重点要求或限制条件" />
+					</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">
+			<div class="title preview-title">预览区域</div>
+			<div class="preview-main">
+				<el-empty v-if="!selectedPreview" description="请选择预览节点" />
+				<iframe v-else-if="selectedPreview.nodeType === 'html'" :src="selectedPreview.url" class="iframe" frameborder="0"></iframe>
+				<div v-else class="img-wrap">
+					<el-image :src="selectedPreview.url" :preview-src-list="[selectedPreview.url]" fit="contain" preview-teleported class="img" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, ref } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { createCreation, downloadToFile, getCreationList, type CreationListParams, type CreationSubmitParams, type CreationTreeItem } from '/@/api/digitalHuman/creation';
+
+type NodeType = 'date' | 'theme' | 'title' | 'html' | 'image';
+interface TreeNode {
+	id: string;
+	label: string;
+	nodeType: NodeType;
+	children?: TreeNode[];
+	createdDate?: string;
+	theme?: string;
+	creationTitle?: string;
+	fileUrl?: string;
+}
+interface PreviewState {
+	url: string;
+	nodeType: 'html' | 'image';
+}
+
+const formRef = ref<FormInstance>();
+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 apiBaseUrl = (import.meta.env.VITE_API_URL || '').replace(/\/$/, '');
+const treeProps = { children: 'children', label: 'label' };
+const queryParams = reactive<CreationListParams>({ keyword: '', pageNum: 1, pageSize: 10 });
+const formData = reactive<CreationSubmitParams>({ mode: '混合模式（文案 + 图片）', content_type: '穿搭分享', theme: '', title: '', description: '', style: '生活分享 — 亲切自然，像朋友聊天', count: 3, image_per_post: 1, image_ratio: '3:4 — 小红书' });
+const modeOptions = ['混合模式（文案 + 图片）', '纯文案模式', '纯图片模式'];
+const contentTypeOptions = ['穿搭分享', '好物推荐', '美妆护肤', '探店分享', '旅行日常', '美食分享'];
+const styleOptions = ['生活分享 — 亲切自然，像朋友聊天', '专业测评 — 深度分析，数据支撑', '种草推荐 — 强调亮点，感染力强', '干货教学 — 条理清晰，步骤明确'];
+const imageRatioOptions = ['3:4 — 小红书', '1:1 — 方图', '16:9 — 横版'];
+const rules: FormRules = {
+	mode: [{ required: true, message: '请选择创作模式', trigger: 'change' }],
+	content_type: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
+	theme: [{ required: true, message: '请输入主题', trigger: 'blur' }],
+	title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+	style: [{ required: true, message: '请选择内容风格', trigger: 'change' }],
+	count: [{ required: true, message: '请输入生成条数', trigger: 'change' }],
+	image_per_post: [{ required: true, message: '请输入配图数量', trigger: 'change' }],
+	image_ratio: [{ required: true, message: '请选择图片比例', trigger: 'change' }],
+};
+
+const joinUrl = (base: string, path: string) => {
+	const cleanBase = base.replace(/\/$/, '');
+	const cleanPath = path.startsWith('/') ? path : `/${path}`;
+	return `${cleanBase}${cleanPath}`;
+};
+
+const buildAssetUrl = (path?: string) => {
+	if (!path) return '';
+	if (/^https?:\/\//i.test(path)) return path;
+	const prefix = imgAddressPrefix.value || '';
+	if (/^https?:\/\//i.test(prefix)) return joinUrl(prefix, path);
+	if (prefix) return joinUrl(joinUrl(apiBaseUrl, prefix), path);
+	return joinUrl(apiBaseUrl, path);
+};
+
+const buildTreeNodes = (tree: CreationTreeItem[]) => tree.map((dateGroup, dIndex) => ({
+	id: `date-${dIndex}`,
+	label: dateGroup.createdDate,
+	nodeType: 'date' as const,
+	children: (dateGroup.themes || []).map((themeGroup, tIndex) => ({
+		id: `theme-${dIndex}-${tIndex}`,
+		label: themeGroup.theme,
+		nodeType: 'theme' as const,
+		children: (themeGroup.titles || []).map((titleItem, i) => ({
+			id: `title-${dIndex}-${tIndex}-${i}`,
+			label: titleItem.title || `作品${i + 1}`,
+			nodeType: 'title' as const,
+			createdDate: dateGroup.createdDate,
+			theme: themeGroup.theme,
+			creationTitle: titleItem.title || `作品${i + 1}`,
+			children: [
+				...(titleItem.htmlFileUrl ? [{ id: `html-${dIndex}-${tIndex}-${i}`, label: 'HTML', nodeType: 'html' as const, createdDate: dateGroup.createdDate, theme: themeGroup.theme, creationTitle: titleItem.title || `作品${i + 1}`, fileUrl: titleItem.htmlFileUrl }] : []),
+				...(titleItem.jsonFileUrl || []).map((img, imgIndex) => ({ id: `img-${dIndex}-${tIndex}-${i}-${imgIndex}`, label: `图片 ${imgIndex + 1}`, nodeType: 'image' as const, createdDate: dateGroup.createdDate, theme: themeGroup.theme, creationTitle: titleItem.title || `作品${i + 1}`, fileUrl: img })),
+			],
+		})),
+	})),
+}));
+
+const handleNodeClick = (data: TreeNode) => {
+	if (data.nodeType === 'title') {
+		formData.theme = data.theme || formData.theme;
+		formData.title = data.creationTitle || data.label || formData.title;
+		return;
+	}
+	if (data.nodeType !== 'html' && data.nodeType !== 'image') return;
+	const url = buildAssetUrl(data.fileUrl);
+	if (!url) return ElMessage.warning('当前节点没有可预览地址');
+	selectedPreview.value = { url, nodeType: data.nodeType };
+	formData.theme = data.theme || formData.theme;
+	formData.title = data.creationTitle || formData.title;
+};
+
+const downloadNode = async (data: TreeNode) => {
+	if (data.nodeType !== 'html' && data.nodeType !== 'image') return;
+	if (!data.fileUrl) return ElMessage.warning('当前节点没有可下载地址');
+	try {
+		await downloadToFile({
+			fileURL: data.fileUrl,
+			localPath: 'C:/Users/AI/Desktop',
+		});
+		ElMessage.success('已提交下载到本地');
+	} catch {
+		ElMessage.error('下载失败');
+	}
+};
+
+const getList = async () => {
+	treeLoading.value = true;
+	try {
+		const res = await getCreationList({ ...queryParams, keyword: queryParams.keyword || undefined });
+		imgAddressPrefix.value = res.data?.imgAddressPrefix || '';
+		treeNodes.value = buildTreeNodes(res.data?.Tree || []);
+		await nextTick();
+		const firstLeaf = treeNodes.value[0]?.children?.[0]?.children?.[0]?.children?.[0];
+		if (firstLeaf) handleNodeClick(firstLeaf);
+	} catch {
+		treeNodes.value = [];
+		imgAddressPrefix.value = '';
+		selectedPreview.value = null;
+		ElMessage.error('获取作品创作列表失败');
+	} finally {
+		treeLoading.value = false;
+	}
+};
+
+const handleSubmit = async () => {
+	if (!formRef.value) return;
+	try {
+		await formRef.value.validate();
+		submitLoading.value = true;
+		await createCreation({
+			...formData,
+			count: Number(formData.count),
+			image_per_post: Number(formData.image_per_post),
+			description: formData.description?.trim() || undefined,
+		});
+		ElMessage.success('创作任务已提交');
+		await getList();
+	} catch {
+		ElMessage.error('提交创作任务失败');
+	} finally {
+		submitLoading.value = false;
+	}
+};
+
+onMounted(getList);
+</script>
+
+<style scoped lang="scss">
+.creation-page { height: calc(100vh - 100px); display: grid; grid-template-columns: 292px minmax(470px, 1fr) minmax(500px, 1.02fr); gap: 14px; padding: 14px; background: #f6f8fb; box-sizing: border-box; }
+.panel { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.05); overflow: hidden; display: flex; flex-direction: column; }
+.title { font-size: 18px; font-weight: 700; color: #303133; margin-bottom: 12px; }
+.preview-title { margin-bottom: 0; }
+.tree-wrap, .center, .preview-main { overflow: auto; }
+.tree-node { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
+.tree-node-main { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
+.tree-download { flex-shrink: 0; padding: 2px; }
+.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.compact-form { flex: 1; display: flex; flex-direction: column; }
+.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
+.span-1 { grid-column: span 1; }
+.span-2 { grid-column: span 2; }
+.description-item { margin-bottom: 8px; }
+.w100 { width: 100%; }
+.submit-btn { width: 100%; height: 40px; margin-top: auto; border-radius: 8px; }
+.preview-main { flex: 1; min-height: 0; background: #f8fafc; border: 1px solid #edf1f7; border-radius: 10px; padding: 10px; }
+.iframe { width: 100%; height: 100%; min-height: 520px; border: 1px solid #ebeef5; border-radius: 8px; background: #fff; }
+.img-wrap { height: 100%; min-height: 520px; border: 1px solid #ebeef5; border-radius: 8px; padding: 10px; display: flex; align-items: center; justify-content: center; background: #fff; }
+.img { width: 100%; height: 100%; min-height: 480px; }
+:deep(.el-form-item) { margin-bottom: 12px; }
+:deep(.el-form-item__label) { padding-bottom: 4px; font-size: 13px; color: #606266; }
+:deep(.el-input__wrapper), :deep(.el-select__wrapper), :deep(.el-textarea__inner), :deep(.el-input-number) { border-radius: 8px; }
+:deep(.el-select), :deep(.el-input), :deep(.el-input-number), :deep(.el-textarea) { width: 100%; }
+@media (max-width: 1800px) { .creation-page { grid-template-columns: 280px minmax(430px, 1fr) minmax(460px, 0.98fr); } }
+</style>