v0.10.22: 落地页 scaffold 校对(smart-gateways 15 节中 10 节对齐)

- EAEL info-box:默认标题外距 8/16(设置覆盖)、title-section 外距改由页面 custom_css p
  控制(修复首页 H4 回归)、图片 display:block、icon-on-top/left 类名
- image widget:支持 space(%) 宽度(92/99/80% 三类图与原站全等)
- 列宽度:Landing 内嵌 section 外层列 populated auto(620→610)与四列行中间列
  calc(100%-8px)(310/302/302/310 实测)
- button widget:selected_icon 图标(star/fire-alt)→ content-wrapper flex + 1em 图标盒
- HTML 块:.ele-choose-prtocol/.ele-choose-platform ul 去 UA 外距
- 实测 smart-gateways 10/15 节与原站误差 ≤8px;首页 626ce49/9f202ea 回归修复
- 待办已记入 docs:8e90920 EAEL tabs、391a1ee Toggle DOM、a36c301 内嵌模板 27143
- bun test 11 pass;版本 0.10.22
This commit is contained in:
bigcode
2026-11-02 13:19:54 +08:00
parent ddeeca3293
commit 07774c715f
4 changed files with 70 additions and 4 deletions
+25 -3
View File
@@ -863,7 +863,8 @@ function ImageWidget({ settings }: { settings: Record<string, unknown> }) {
const linkProps = link ? { href: link, ...(isExternal ? { target: "_blank" as const } : {}) } : undefined;
// 图片宽度设置(Elementor 生成 `.elementor-element-X img{width:57%}`;页脚 logo 57%、
// Google 徽章 300px):作用于 img 本身,a 为 inline-block 时按固有宽度收缩(与原站一致)
const imgWidth = sizeCss(settings.width);
// 图片宽度:Elementor width 设置优先;本主题另有 space(%) 控制图片宽度(实测 63dd8a2=92%)
const imgWidth = sizeCss(settings.width) || sizeCss(settings.space);
const img = <img className={animCls || undefined} src={url} alt={s(img0.alt)} loading="lazy" style={imgWidth ? { width: imgWidth } : undefined} />;
const cls = ("el-image " + (animCls || "")).trim();
return (
@@ -1132,13 +1133,26 @@ function ButtonWidget({ el, settings }: { el: ElElement; settings: Record<string
if (fwt !== undefined && fwt !== null && fwt !== "") style.fontWeight = Number(fwt) || fwt as number;
const hoverBg = s(settings.button_background_hover_color);
const hoverColor = s(settings.hover_color);
// 图标按钮(原站 Landing 的 New/HOT 徽章):Elementor DOM = content-wrapper(flex gap 5)
// > button-icon(1em) + button-text,图标 14px 使按钮宽 +19px
const icon = s((settings.selected_icon as { value?: string } | undefined)?.value);
const content = icon ? (
<span className="elementor-button-content-wrapper">
<span className="elementor-button-icon">
<i className={icon} aria-hidden="true" />
</span>
<span className="elementor-button-text">{text}</span>
</span>
) : (
text
);
return (
<div style={{ textAlign: (s(settings.align) as CSSProperties["textAlign"]) || "left" }}>
{hoverBg || hoverColor ? (
<style>{`[data-el="${el.id}"] .el-btn:hover{${hoverBg ? `background:${hoverBg};` : ""}${hoverColor ? `color:${hoverColor};` : ""}}`}</style>
) : null}
<a className="el-btn" href={link || "#"} style={style} target={(settings.link as { target?: string } | undefined)?.target === "_blank" ? "_blank" : undefined} rel="noreferrer">
{text}
{content}
</a>
</div>
);
@@ -1277,12 +1291,20 @@ function EaelInfoBoxWidget({ settings }: { settings: Record<string, unknown> })
const tag = s(settings.eael_infobox_title_tag);
const Tag = (["h1", "h2", "h3", "h4", "h5", "h6", "div"].includes(tag) ? tag : "div") as "div";
const left = s(settings.eael_infobox_img_type) === "img-on-left" || s(settings.eael_infobox_img_type) === "icon-on-left";
const cls = "eael-infobox" + (left ? " icon-on-left" : "");
// 原站 EAEL DOM:.eael-infobox.icon-on-top / .icon-on-left(配图上方/左侧布局)
const cls = "eael-infobox " + (left ? "icon-on-left" : "icon-on-top");
// 标题排版/颜色(H14 实测 fs 1.25rem/700/#0D152E;内容排版 hover 键原站未生效,不采用)
const titleStyle: CSSProperties = {
...typographyCss(settings, "eael_infobox_title_typography"),
...(s(settings.eael_infobox_title_color) ? { color: s(settings.eael_infobox_title_color) as string } : {}),
};
// 标题外距(EAEL:设置非空时覆盖默认 8px 0 16px;570df98 显式 0 0 0 0,02956ef 走默认)
const tmRaw = settings.eael_infobox_title_margin as Record<string, unknown> | undefined;
const tmSet = !!tmRaw && ["top", "right", "bottom", "left"].some((k) => tmRaw[k] !== "" && tmRaw[k] != null);
if (tmSet) {
const tm = paddingCss(tmRaw);
if (tm) titleStyle.margin = tm;
}
return (
<div className={cls}>
{img?.url ? (