v0.10.13: H13 The Difference Maker(供应商主张条)完成

- IconListWidget 重写为 Elementor 忠实 DOM:ul.elementor-icon-list-items(-inline-items
  flex wrap + 负边距对冲)、li>a>span.elementor-icon-list-text、text_color 落 span、
  is_external→target=_blank;基础 CSS(widget-icon-list.min.css 语义)
- 列背景全量:sectionBgStyle 支持 background_size(initial→100% auto,楼体图 bf3d0ba
  post-18 生成规则取证),ColumnNode 并入 position/repeat/size
- H13 scoped:icon-list 悬停主色(globals text_color_hover);描边盒由 custom_css 注入
- 审计取证:text-editor _margin -1rem 的 BFC 折叠(widget h 15.4)双端一致;
  orig 侧 H12 面板渐进展开致整页 y 漂移,改用节内相对坐标对比
- 相对几何逐项全等,截图目视一致;11 测试全过
This commit is contained in:
bigcode
2026-11-01 22:39:12 +08:00
parent 1c190d00ca
commit c1741772cd
5 changed files with 60 additions and 12 deletions
+39 -10
View File
@@ -206,6 +206,10 @@ function sectionBgStyle(settings: Record<string, unknown>): CSSProperties {
style.backgroundPosition = posRaw ? mapBgPosition(posRaw) : "center center";
const rep = s(settings.background_repeat);
if (rep) style.backgroundRepeat = rep;
// 尺寸:initial → 100% auto(H13 楼体大图 bf3d0ba 生成规则实测;
// cover/contain/auto 原样输出)
const sizeRaw = s(settings.background_size);
if (sizeRaw) style.backgroundSize = sizeRaw === "initial" ? "100% auto" : sizeRaw;
}
} else if (bgType === "gradient") {
const c1 = s(settings.background_color) || s(settings.color_a) || "#ffffff";
@@ -414,7 +418,8 @@ function ColumnNode({ el, gapPad }: { el: ElElement; gapPad?: string }) {
}
inner.padding = paddingCss(settings.padding) || gapPad || "10px";
const bg = sectionBgStyle(settings);
Object.assign(inner, { backgroundColor: bg.backgroundColor, backgroundImage: bg.backgroundImage });
// 背景对象整体并入(颜色/图片/位置/平铺/尺寸,H13 楼体图 bottom left + 100% auto 实测)
Object.assign(inner, bg);
const radius = paddingCss(settings.border_radius);
if (radius) inner.borderRadius = radius;
if (s(settings.border_border) === "solid") {
@@ -1160,19 +1165,43 @@ function ReviewsWidget({ settings }: { settings: Record<string, unknown> }) {
);
}
/** # 组件 icon-list widget:仅渲染文字列表,emoji 图标跳过 */
/** # 组件 icon-list widget:忠实 Elementor DOM(widget-icon-list.min.css 语义)
* view=inline 时 ul.elementor-icon-list-items.elementor-inline-items(flex wrap,
* ul 负边距 -8px 与 li 8px 侧边距对冲,实测 H13 链接条);否则竖排 ul。
* li.elementor-icon-list-item(flex 居中) > [a(target=_blank) >] span.elementor-icon-list-text;
* 文字色 text_color 落 span(实测 #0D152E,a 本身继承 kit 主色不影响文字),
* 悬停色 text_color_hover(globals)由 H13 页面级生成规则注入;custom_css(.ele-supplier-dif
* 描边盒) 经 collectCustomCss 注入。
*/
function IconListWidget({ settings }: { settings: Record<string, unknown> }) {
const list = Array.isArray(settings.icon_list) ? (settings.icon_list as { text?: string; selected_icon?: { value?: string } }[]) : [];
const items = list.map((it) => s(it.text)).filter(Boolean);
const list = Array.isArray(settings.icon_list)
? (settings.icon_list as { text?: string; _id?: string; link?: { url?: string; is_external?: string }; selected_icon?: { value?: string } }[])
: [];
const items = list.filter((it) => s(it.text));
if (!items.length) return null;
const inline = s(settings.view) === "inline";
const color = s(settings.text_color) || undefined;
return (
<ul className="mb-[18px]" style={{ listStyle: "none", padding: 0, margin: "0 0 18px" }}>
{items.map((t, i) => {
// 文本本身以 emoji 开头时保留原样输出(内容照原样,只是不做图标渲染处理)
<ul className={"elementor-icon-list-items" + (inline ? " elementor-inline-items" : "")}>
{items.map((it, i) => {
const link = it.link?.url;
const external = it.link?.is_external === "on";
const text = (
<span
className="elementor-icon-list-text"
style={color ? { color } : undefined}
dangerouslySetInnerHTML={{ __html: s(it.text) }}
/>
);
return (
<li key={i} style={{ marginBottom: 6, paddingLeft: 16, position: "relative" }}>
<span style={{ position: "absolute", left: 0, color: "var(--brand)" }}>•</span>
{t}
<li key={it._id || i} className={"elementor-icon-list-item" + (inline ? " elementor-inline-item" : "")}>
{link ? (
<a href={link} target={external ? "_blank" : undefined} rel={external ? "noopener" : undefined}>
{text}
</a>
) : (
text
)}
</li>
);
})}