+
+
+ #{index + 1}
+ {layer.layerName}
+
+ {layer.width} x {layer.height}
+
+
+ {layer.slotType === "text" ? "文字槽位" : "图片槽位"}
+
+ {layer.slotType === "image" && layer.maskUrl ? (
+ 已生成蒙版
+ ) : null}
+
+
{layer.layerPath}
+
+ 坐标:({layer.x}, {layer.y}) · layerId: {layer.layerId}
+
+
+
+
+
+
+ 深度 {layer.depth}
+
+
+
+
+ {layer.slotType === "image" ? (
+
+
+
字体
+
+
+
+
+
字号
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? {
+ ...current,
+ fontSize: Math.max(10, Number(event.target.value) || 10),
+ }
+ : current
+ )
+ }
+ />
+
+
+
+
行高倍率
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? {
+ ...current,
+ lineHeight: Math.max(
+ 1,
+ Number(event.target.value) || 1
+ ),
+ }
+ : current
+ )
+ }
+ />
+
+
+
+
字重
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? {
+ ...current,
+ fontWeight: Math.max(
+ 100,
+ Math.min(900, Number(event.target.value) || 500)
+ ),
+ }
+ : current
+ )
+ }
+ />
+
+
+
+
文字颜色
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? { ...current, textColor: event.target.value }
+ : current
+ )
+ }
+ />
+
+
+
+
对齐
+
+
+
+
+
左右内边距
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? { ...current, paddingX: Math.max(0, Number(event.target.value) || 0) }
+ : current
+ )
+ }
+ />
+
+
+
+
上下内边距
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? { ...current, paddingY: Math.max(0, Number(event.target.value) || 0) }
+ : current
+ )
+ }
+ />
+
+
+
+
最多行数
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? { ...current, maxLines: Math.max(1, Number(event.target.value) || 1) }
+ : current
+ )
+ }
+ />
+
+
+
+
字间距
+
+ updateDraftLayer(layer.id, (current) =>
+ current.slotType === "text"
+ ? { ...current, letterSpacing: Number(event.target.value) || 0 }
+ : current
+ )
+ }
+ />
+
+
+
+