Forráskód Böngészése

feat: 素材展示实际尺寸+品牌素材附建议尺寸

guoziyun 3 hete
szülő
commit
5ef7a6286e

+ 6 - 0
platform/client/src/components/AssetUploader.module.css

@@ -186,6 +186,12 @@
   margin-left: 2px;
 }
 
+.dimensionsHint {
+  font-size: 10px;
+  color: #999;
+  margin-left: 4px;
+}
+
 .thumb {
   width: 36px;
   height: 36px;

+ 14 - 1
platform/client/src/components/AssetUploader.tsx

@@ -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 && (