feat: SVG icon macro library replaces bare text arrows in trade-pro

Task 9 (new design, not a cms port): _professional_components.html gains
an icon(name, size, cls) macro — 10 inline line-style glyphs (arrow-right,
arrow-left, chevron-down, check, phone, mail, location, download, search,
quote), 24x24 viewBox, stroke=currentColor, stroke-width 1.5, round
caps/joins, decorative aria-hidden + focusable=false, default size
var(--sf-tp-icon-size-md, 20px), unknown names fall back to arrow-right.
Every glyph is a single <path> so the d attribute needs no |safe.

All bare text arrows (->, <-, ↗, ▾, ⌕) in the macro library, pro.html,
site.html and pages/* are replaced with macro calls (site.html keeps a
self-contained copy of the arrow glyph because its rendering envs cannot
import the macro library); the filters macro search box gains an inline
search icon; footer links gain small arrows. theme.css adds .sf-tp-icon
alignment, in-button icon spacing, and search-box icon positioning.

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-10-23 08:35:52 +08:00
parent afecc10aad
commit 22b614118b
13 changed files with 127 additions and 24 deletions
+41
View File
@@ -585,6 +585,47 @@ body.sf-theme-trade-pro {
margin: 0;
}
/* ── 图标(Task 9 SVG 宏库:内联线条图标的对齐与间距)── */
/* 基线对齐:inline 上下文垂直居中,flex 上下文不被压缩换行 */
.sf-tp-icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* 按钮内紧跟文字的图标留出呼吸空间(flex gap 之外的显式间距,
兼容图标包在 <span> 里或直接暴露两种写法) */
.sf-tp-btn svg {
margin-inline-start: var(--sf-tp-space-1);
}
/* 非按钮内联上下文:图标贴着文字时补一点间距 */
.pro-mega a .sf-tp-icon,
.pro-contact-email .sf-tp-icon,
.pro-footer-links a .sf-tp-icon {
margin-inline-start: var(--sf-tp-space-1);
}
/* filters 宏搜索框:放大镜占位在输入框内左侧(不抢焦点) */
.sf-theme-trade-pro .pro-filter-search-box {
position: relative;
display: block;
margin: 0; /* 抵消 pro-base 的 label>span 说明文字样式 */
}
.sf-theme-trade-pro .pro-filter-search-box .sf-tp-icon {
position: absolute;
inset-inline-start: var(--sf-tp-space-3);
inset-block-end: var(--sf-tp-space-3);
pointer-events: none;
color: var(--sf-tp-color-text-muted);
}
.sf-theme-trade-pro .pro-filter-search-box input {
padding-inline-start: calc(var(--sf-tp-icon-size-md, 20px) + var(--sf-tp-space-6));
}
/* ── Phase 2 桥接:骨架期 .pro-* 强调样式改由 cms 令牌驱动(Task 10 布局移植后由组件样式接管)── */
.pro-utility {