+ {value.map(v => (
+
+ {v.join(' / ')}
+
+
+ ))}
+
+ );
+
+ // 递归渲染所有层级
+ const renderTree = (nodes: CascaderNode[], prefix: string[] = [], level = 0) => (
+ -
+ {nodes.map(node => {
+ const path = [...prefix, node.title];
+ if (node.children && node.children.length > 0) {
+ return (
+
-
+ + 📂 + {node.title} ++ {renderTree(node.children, path, level + 1)} +
+ );
+ } else {
+ return (
+
- + + + ); + } + })} +
+
+
+ );
+
+ return (
+ {renderTree(options)}
+
+ = ({ imageUrl, onRemove, scenesOptions = [], scenes = [], onScenesChange, fileName }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ClothingCard;
diff --git a/src/pages/ChangeBgPage/index.tsx b/src/pages/ChangeBgPage/index.tsx
new file mode 100644
index 0000000..3c6434c
--- /dev/null
+++ b/src/pages/ChangeBgPage/index.tsx
@@ -0,0 +1,188 @@
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { api } from '@/lib/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import ClothingCard from './components/ClothingCard';
+import type { Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post } from '@/api';
+
+// 五级联动的 tag schema
+const tagSchema = z.object({
+ scenes: z.array(z.array(z.string())).optional(),
+});
+
+const formSchema = z.object({
+ clothing_images: z.array(z.instanceof(File)).min(1, '请上传至少一张服装图片').max(5, '最多上传5个商品'),
+ tags: z.array(tagSchema),
+ changeBg: z.boolean().optional(),
+});
+
+interface TagForm {
+ scenes?: string[][];
+}
+
+interface FormValues {
+ clothing_images: File[];
+ tags: TagForm[];
+ changeBg?: boolean;
+}
+
+const defaultValues: FormValues = {
+ clothing_images: [],
+ tags: [],
+ changeBg: false,
+};
+
+const TryOnPage: React.FC = () => {
+ const [scenesOptions, setScenesOptions] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [result, setResult] = useState(null);
+ const fileInputRef = useRef(null);
+ const [imagePreviews, setImagePreviews] = useState([]);
+
+ // 表单
+ const form = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues,
+ });
+
+ // 拉取标签数据
+ useEffect(() => {
+ api.Service.fetchStyleAvailableTagsApiTagStyleTagListGet().then(data => setScenesOptions(data.data || []));
+ }, []);
+
+ const tags = form.watch('tags');
+
+ // 图片上传和标签组同步（append 新卡片）
+ const handleImageChange = (e: React.ChangeEvent) => {
+ const files = Array.from(e.target.files || []);
+ if (!files.length) return;
+ const oldFiles = form.getValues('clothing_images');
+ if (oldFiles.length + files.length > 5) {
+ alert('最多只能上传5个商品');
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ return;
+ }
+ // 追加到已有图片和标签
+ const oldTags = form.getValues('tags');
+ const newFiles = [...oldFiles, ...files];
+ const newTags = [...oldTags, ...files.map(() => ({ scenes: [] as string[][] }))];
+ form.setValue('clothing_images', newFiles);
+ setImagePreviews(newFiles.map(file => URL.createObjectURL(file)));
+ form.setValue('tags', newTags);
+ // 清空 input 以便连续选择同一图片
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ };
+
+ // 删除图片及对应标签组
+ const handleRemoveImage = (idx: number) => {
+ const files = form.getValues('clothing_images');
+ const tags = form.getValues('tags');
+ const newFiles = files.filter((_, i) => i !== idx);
+ const newTags = tags.filter((_, i) => i !== idx);
+ form.setValue('clothing_images', newFiles);
+ setImagePreviews(newFiles.map(file => URL.createObjectURL(file)));
+ form.setValue('tags', newTags);
+ };
+
+ // 场景多选
+ const handleScenesChange = (idx: number, scenes: string[][]) => {
+ const newTags = [...form.getValues('tags')];
+ newTags[idx] = { ...newTags[idx], scenes };
+ form.setValue('tags', newTags);
+ };
+
+ // 递归查找 prompt
+ function findPromptByPath(tree: any[], path: string[]): string {
+ let node: any = null;
+ let nodes: any[] = tree;
+ for (const t of path) {
+ node = nodes.find((n: any) => n.title === t);
+ if (!node) return '';
+ nodes = node.children || [];
+ }
+ return node && node.prompt ? node.prompt : '';
+ }
+
+ // 提交
+ const onSubmit = async (values: FormValues) => {
+ setLoading(true);
+ setResult(null);
+ const results: any[] = [];
+ console.log(values);
+ try {
+ for (let i = 0; i < values.clothing_images.length; i++) {
+ const tag = values.tags[i];
+ const scenesArr: string[][] = tag.scenes || [];
+ for (const path of scenesArr) {
+ const scene = {
+ title: path.join('/'),
+ prompt: findPromptByPath(scenesOptions, path),
+ };
+ const formData: Body_local_cloud_async_change_bg_api_v2_cloud_batch_change_bg_post = {
+ clothing_images: [values.clothing_images[i]],
+ scenes_list: JSON.stringify([{ title: scene.title, prompt: scene.prompt }]),
+ };
+ // eslint-disable-next-line no-await-in-loop
+ const res = await api.DefaultService.localCloudAsyncChangeBgApiV2CloudBatchChangeBgPost({ formData });
+ results.push(res);
+ }
+ }
+ setResult(results);
+ } catch (e: any) {
+ setResult({ error: e?.message || '请求失败' });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const clothing_images = form.watch('clothing_images');
+
+ return (
+ = ({ options, value, onChange }) => {
- const [open, setOpen] = useState(false);
- const [activePath, setActivePath] = useState([]);
-
- // 当前级的 options
- const getCurrentOptions = () => {
- let nodes = options;
- for (const t of activePath) {
- const node = nodes.find(n => n.title === t);
- if (!node || !node.children) return [];
- nodes = node.children;
- }
- return nodes;
- };
-
- // 判断某路径是否已选
- const isSelected = (path: string[]) => value.some(v => v.join('/') === path.join('/'));
-
- // 选中叶子节点
- const handleSelect = (path: string[]) => {
- if (!isSelected(path)) {
- onChange([...value, path]);
- } else {
- onChange(value.filter(v => v.join('/') !== path.join('/')));
- }
- };
-
- // 删除 tag
- const handleRemove = (path: string[]) => {
- onChange(value.filter(v => v.join('/') !== path.join('/')));
- };
-
- // 渲染 tag
- const renderTags = () => (
-
+ {renderTags()}
+
+
+ {open && renderCascader()}
+ {open && setOpen(false)} />}
+
+ );
+};
+
+export default CascaderMultiSelect;
diff --git a/src/pages/ChangeBgPage/components/ClothingCard.tsx b/src/pages/ChangeBgPage/components/ClothingCard.tsx
new file mode 100644
index 0000000..686cab1
--- /dev/null
+++ b/src/pages/ChangeBgPage/components/ClothingCard.tsx
@@ -0,0 +1,52 @@
+import CascaderMultiSelect from '@/components/block/CascaderMultiSelect';
+import { Button } from '@/components/ui/button';
+import { Card, CardAction, CardContent, CardHeader } from '@/components/ui/card';
+import { X } from 'lucide-react';
+import React from 'react';
+
+interface ClothingCardProps {
+ imageUrl: string;
+ onRemove: () => void;
+ scenesOptions?: any[];
+ scenes?: string[][];
+ onScenesChange?: (scenes: string[][]) => void;
+ fileName?: string;
+}
+
+const ClothingCard: React.FC
+ 
+ {fileName &&
+ {fileName}
}
+
+ {/* 场景级联多选 */}
+
+
+
+
+
+ {})} />
+
+
+
+ );
+};
+
+export default TryOnPage;
diff --git a/src/pages/TryOnPage/components/CascaderMultiSelect.tsx b/src/pages/TryOnPage/components/CascaderMultiSelect.tsx
deleted file mode 100644
index 4e0beb3..0000000
--- a/src/pages/TryOnPage/components/CascaderMultiSelect.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useState } from 'react';
-
-interface CascaderNode {
- title: string;
- children?: CascaderNode[];
- prompt?: string;
-}
-
-interface CascaderMultiSelectProps {
- options: CascaderNode[];
- value: string[][]; // 每个已选项为路径数组，如 ['户外', '公园', '公园1']
- onChange: (value: string[][]) => void;
-}
-
-const getLeafPaths = (tree: CascaderNode[], prefix: string[] = []): string[][] => {
- let result: string[][] = [];
- for (const node of tree) {
- const path = [...prefix, node.title];
- if (node.children && node.children.length > 0) {
- result = result.concat(getLeafPaths(node.children, path));
- } else {
- result.push(path);
- }
- }
- return result;
-};
-
-const CascaderMultiSelect: React.FC换装体验
+ + + {/* 结果展示 */} + {result && ( +
+
+ )}
+ 结果
+{JSON.stringify(result, null, 2)}
+
- {value.map(v => (
-
- {v.join(' / ')}
-
-
- ))}
-
- );
-
- // 渲染级联下拉
- const renderCascader = () => {
- const currentOptions = getCurrentOptions();
- return (
-
- {activePath.length > 0 && (
-
- );
- };
-
- return (
-
- {activePath.map((t, i) => (
- setActivePath(activePath.slice(0, i + 1))}>
- {t}
-
- ))}
-
- )}
- -
- {currentOptions.map(opt => (
-
- - {opt.children && opt.children.length > 0 ? ( - <> - setActivePath([...activePath, opt.title])}> - {opt.title} - - - ) : ( - - )} - - ))} -
- = ({
size='icon'
variant='destructive'
onClick={onRemove}
- className='absolute -top-3 -right-2 w-6 h-6 p-0 rounded-full shadow transition-colors transition-opacity opacity-0 group-hover:opacity-100'
+ className='absolute -top-3 -right-2 w-6 h-6 p-0 rounded-full shadow transition-colors opacity-0 group-hover:opacity-100'
title='删除'
>
- handleRowSelect(item)} />
+ handleRowSelect({ id: item.id, img_url: item.img_url || '', task_id: item.task_id || '' })}
+ />
{item.img_url ? (
@@ -217,7 +224,7 @@ const TryOnTasksPage: React.FC = () => {
{item.task_id}
{item.img_status || '-'}
{item.video_status || '-'}
- {item.create_time || '-'}
+ {dayjs.utc(item.create_time).local().format('YYYY-MM-DD HH:mm:ss') || '-'}
))
) : (
diff --git a/src/pages/TryOnVideoTaskPage/index.tsx b/src/pages/TryOnVideoTaskPage/index.tsx
index 95a2125..6e09300 100644
--- a/src/pages/TryOnVideoTaskPage/index.tsx
+++ b/src/pages/TryOnVideoTaskPage/index.tsx
@@ -6,6 +6,10 @@ import { api } from '@/lib/api';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'sonner';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
interface LocalVideoTask {
id: string;
@@ -225,7 +229,7 @@ const TryOnVideoTaskPage: React.FC = () => {
{task.id}
{task.job_id}
{task.prompt}
- {task.create_time ? new Date(task.create_time).toLocaleString() : '-'}
+ {dayjs.utc(task.create_time).local().format('YYYY-MM-DD HH:mm:ss') || '-'}
);
})}
- {renderTags()}
-
-
- {open && renderCascader()}
- {open && setOpen(false)} />}
-
- );
-};
-
-export default CascaderMultiSelect;
diff --git a/src/pages/TryOnPage/components/ClothingCard.tsx b/src/pages/TryOnPage/components/ClothingCard.tsx
index 2a412f8..104e41b 100644
--- a/src/pages/TryOnPage/components/ClothingCard.tsx
+++ b/src/pages/TryOnPage/components/ClothingCard.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import CascaderMultiSelect from '@/components/block/CascaderMultiSelect';
import { Button } from '@/components/ui/button';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
-import { Card, CardHeader, CardAction, CardContent } from '@/components/ui/card';
+import { Card, CardAction, CardContent, CardHeader } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { X } from 'lucide-react';
-import CascaderMultiSelect from './CascaderMultiSelect';
+import React from 'react';
interface Tag {
sex: string;
@@ -59,7 +59,7 @@ const ClothingCard: React.FC