+
+
+ {collections.map((collection) =>
+
+
{collection.label}
+
+
+
+ {!collection.ids.length &&
尚未添加
}
+ {collection.ids.map((id) => {
+ const asset = assets.find((item) => item.id === id)
+ return
+ {asset?.mimeType.startsWith('image/') ?
})
:
{asset?.name || '产品素材'}}
+
{asset?.name || '素材'}
+
+
+ })}
+
+ )}
+
+
+
+ 高级选项
+ {([{ key: 'analysis', label: '资料分析' }, { key: 'copy', label: '卖点文案' }, { key: 'image', label: '图片生成' }] as const).map((stage) => )}
+
+
+ )
+}
diff --git a/components/detail-generator/DetailScreenEditor.tsx b/components/detail-generator/DetailScreenEditor.tsx
new file mode 100644
index 0000000..f70d158
--- /dev/null
+++ b/components/detail-generator/DetailScreenEditor.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import { Download, RotateCcw, Save, Upload } from 'lucide-react'
+import type { DetailExportFormat, DetailScreen } from '@/lib/detail-generator/types'
+import DetailCanvas from './DetailCanvas'
+import { assetUrl } from './client'
+import { detailButtonClass, detailFieldClass, detailPrimaryClass } from './DetailProductForm'
+
+export default function DetailScreenEditor({ screens, busy, dirty, complete, configured, onChange, onUnsavedEdit, onPendingTextChange, onSave, onReplaceImage, onRegenerate, onExport }: {
+ screens: DetailScreen[]
+ busy: boolean
+ dirty: boolean
+ complete: boolean
+ configured: boolean
+ onChange: (screen: DetailScreen) => void
+ onUnsavedEdit: () => void
+ onPendingTextChange: (screenId: string, layerId: string, text: string) => void
+ onSave: (screen: DetailScreen) => void
+ onReplaceImage: (screen: DetailScreen, file: File) => void
+ onRegenerate: (screenId: string) => void
+ onExport: (format: DetailExportFormat) => void
+}) {
+ const [selectedId, setSelectedId] = useState('')
+ const [format, setFormat] = useState