|
|
@@ -32,8 +32,15 @@ export default function AssetUploader({ creativeId, assets, assetDefs, onUpdated
|
|
|
warnings: string[];
|
|
|
} | null>(null);
|
|
|
const [error, setError] = useState("");
|
|
|
+ const [imgDims, setImgDims] = useState<Record<string, string>>({});
|
|
|
const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
|
|
|
|
|
|
+ // 读取图片实际尺寸
|
|
|
+ function handleImgLoad(key: string, e: React.SyntheticEvent<HTMLImageElement>) {
|
|
|
+ const img = e.currentTarget;
|
|
|
+ setImgDims((prev) => ({ ...prev, [key]: `${img.naturalWidth}×${img.naturalHeight}` }));
|
|
|
+ }
|
|
|
+
|
|
|
// === ZIP 上传 ===
|
|
|
async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
|
|
|
const file = e.target.files?.[0];
|
|
|
@@ -217,6 +224,7 @@ export default function AssetUploader({ creativeId, assets, assetDefs, onUpdated
|
|
|
className={styles.thumb}
|
|
|
src={`${BASE}/creatives/${creativeId}/assets/${def.key}`}
|
|
|
alt={def.label}
|
|
|
+ onLoad={(e) => handleImgLoad(def.key, e)}
|
|
|
/>
|
|
|
) : (
|
|
|
<span className={asset ? styles.fileOk : styles.fileMissing}>
|
|
|
@@ -226,6 +234,7 @@ export default function AssetUploader({ creativeId, assets, assetDefs, onUpdated
|
|
|
<span className={styles.fileName}>{def.file}</span>
|
|
|
<span className={styles.fileLabel}>
|
|
|
{def.label} {!isRequired && !asset ? "(无)" : !isRequired ? "(选填)" : ""}
|
|
|
+ {imgDims[def.key] && <span className={styles.dimensions}>{imgDims[def.key]}</span>}
|
|
|
</span>
|
|
|
{asset && (
|
|
|
<span className={styles.fileSize}>
|
|
|
@@ -267,12 +276,16 @@ export default function AssetUploader({ creativeId, assets, assetDefs, onUpdated
|
|
|
className={styles.thumb}
|
|
|
src={`${BASE}/creatives/${creativeId}/assets/${def.key}`}
|
|
|
alt={def.label}
|
|
|
+ onLoad={(e) => handleImgLoad(def.key, e)}
|
|
|
/>
|
|
|
)}
|
|
|
<span className={styles.fileName}>{def.file}</span>
|
|
|
<span className={styles.fileLabel}>
|
|
|
{def.label}
|
|
|
- <span className={styles.dimensions}>{def.dimensions}</span>
|
|
|
+ {imgDims[def.key] && <span className={styles.dimensions}>{imgDims[def.key]}</span>}
|
|
|
+ {def.dimensions && (
|
|
|
+ <span className={styles.dimensionsHint}>建议 {def.dimensions}</span>
|
|
|
+ )}
|
|
|
{asset && <span className={styles.replaceHint}> 🔄</span>}
|
|
|
</span>
|
|
|
{asset && (
|