wangle/MetaSkill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

le-wechat-article v1.5.1：版式基线落地——①开篇轻量化：四张封面卡（暖橙/摸鱼绿/摸鱼票据/橄榄）瘦身为导语条，去大字主标题/头图/公司落款（公众号后台已承担），补齐「导语与外标题错层」文案策略；②侧边距：微信 App 自带边距为主边距，HTML 每侧合计 ≤16px（容器/模块 ≤6px、卡片 10~14px、嵌套 ≤12px），全 7 主题合计 156 处收紧，正文列宽占屏 69~76%→80%+；③字号阶梯整体 +1（≥12px 全升 414 处：正文 15→16px、moyu 系 14→15px，≤11px 装饰微标不动）；ENGINE 新增「版式基线」三铁律（v1.5.1）+ theme-generator 生成钩子，未来新主题强制合规；新增暖橙主题 theme-warm-orange（36 组件，含预览资产）并入主题库，SKILL.md 主题计数 6→7；topic-facts 补「超级 AI 妈妈」客户事实卡

Browse Source
This commit is contained in:
leroy
2026-11-07 15:45:11 +08:00
parent 08c615d9fd
commit f7b7740829
15 changed files with 1664 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/le-wechat-article/references/themes/ENGINE.md
+6
View File
@@ -17,6 +17,12 @@
- 代码/命令/Prompt → common-components 1a/1b 代码块（**必须**，塞普通段落会丢缩进）；行内 code → 1c
- 图片 → 2a（只有 `![说明](url)` 真有说明文字才加说明行，不编造）；**融合**：本地 `imgs/*.png` 路径原样保留，草稿箱同步时由 publish_draft.py 替换为微信域名
## 版式基线（融合 v1.5.1，全主题强制）
1. **开篇轻量铁律**：开篇组件只做「栏目标签 + 一句话导语/金句」的轻量形态——**不放大字主标题、不放头图照片、不放公司落款**。公众号后台已承担标题、封面图、账号名三样，正文开篇再出现就是信息重复。原头图并入正文首个图位；导语文案与外标题两层错开，禁止复述其核心关键词。
2. **侧边距上限**：微信 App 自带 ~20px 页面边距是唯一主边距，HTML 各层合计每侧 ≤16px——容器/模块侧边 ≤6px；卡片侧边 10~14px；卡内嵌强调块 ≤12px。正文列宽占屏宽 ≥80%（文字距屏边约 30~34px 含 App 边距）。多层嵌套时从外到内逐层递减，宁可卡片贴边也不要正文列变窄。
3. **字号阶梯**：正文 16px 起步（密集型主题最低 15px）；辅文/摘要/目录行 15px 起步；标签/图注 13~14px；≤11px 仅限装饰性微标（大写 letter-spacing 标签、水印编号、票据撕票行），不得用于正文与辅文。
## 智能处理（装配时必须做）
1. **章节自动编号**：按正文章节标题顺序编 01/02/03…（「融合」本工坊文章的章节是 `###`，按 `###` 计数——见 style-rules 标题层级，不用 `##`）；末章为结语/总结时用主题库指定的结语编号变体（如 `∞`）。
skills/le-wechat-article/references/themes/common-components.md
+17 -17
View File
@@ -20,12 +20,12 @@
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FF5F56;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FFBD2E;margin-right:7px;font-size:0;line-height:0;overflow:hidden;">.</span>
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#27C93F;font-size:0;line-height:0;overflow:hidden;">.</span>
<span style="margin-left:12px;font-size:12px;color:#64748B;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">python</span></span>
<span style="margin-left:12px;font-size:13px;color:#64748B;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">python</span></span>
</section>
<section style="padding:11px 14px;">
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">def make_skill(name):</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">　　return f"已生成 {name}"</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#E2E8F0;"><span leaf="">print(make_skill("gzh-design"))</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf="">def make_skill(name):</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf="">　　return f"已生成 {name}"</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#E2E8F0;"><span leaf="">print(make_skill("gzh-design"))</span></p>
</section>
</section>
```
@@ -37,10 +37,10 @@
```html
<section style="margin:0 0 20px;border-radius:8px;overflow:hidden;background:#F6F8FA;border:1px solid #E5E7EB;border-left:3px solid #DC2626;">
<section style="padding:7px 14px;border-bottom:1px solid #E5E7EB;">
<span style="font-size:12px;color:#9CA3AF;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">bash</span></span>
<span style="font-size:13px;color:#9CA3AF;font-family:Consolas,Monaco,monospace;letter-spacing:1px;"><span leaf="">bash</span></span>
</section>
<section style="padding:11px 14px;">
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#24292F;"><span leaf="">npx skills add gzh-design</span></p>
<p style="margin:0;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;line-height:1.6;color:#24292F;"><span leaf="">npx skills add gzh-design</span></p>
</section>
</section>
```
@@ -50,7 +50,7 @@
### 1c. 行内代码（正文中的 `code` 短片段）
```html
<span style="background:#F1F5F9;color:#DC2626;padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">SKILL.md</span></span>
<span style="background:#F1F5F9;color:#DC2626;padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:15px;"><span leaf="">SKILL.md</span></span>
```
（文字色 `#DC2626` 换主题主色；底色保持中性浅灰。）
@@ -69,7 +69,7 @@
<span leaf=""><img src="图片URL" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
</section>
</section>
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
<span leaf="">— 图片说明文字</span>
</p>
```
@@ -88,7 +88,7 @@
</section>
<p style="text-align:center;margin:0 0 24px;">
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;margin-right:6px;"><span leaf="">GIF 动图</span></span>
<span style="font-size:12px;color:#9CA3AF;"><span leaf="">动图说明文字</span></span>
<span style="font-size:13px;color:#9CA3AF;"><span leaf="">动图说明文字</span></span>
</p>
```
@@ -102,9 +102,9 @@
```html
<section style="margin:0 0 24px;padding:30px 20px;border:1.5px dashed #DAD7D2;border-radius:14px;background:#FAFAF8;text-align:center;">
<p style="margin:0 0 10px;font-size:26px;line-height:1;"><span leaf="">🎬</span></p>
<p style="margin:0;font-size:14px;font-weight:700;color:#9CA3AF;letter-spacing:1px;"><span leaf="">待补素材</span></p>
<p style="margin:8px 0 0;font-size:13px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入：创建 skill 的录屏演示</span></p>
<p style="margin:0 0 10px;font-size:27px;line-height:1;"><span leaf="">🎬</span></p>
<p style="margin:0;font-size:15px;font-weight:700;color:#9CA3AF;letter-spacing:1px;"><span leaf="">待补素材</span></p>
<p style="margin:8px 0 0;font-size:14px;color:#B8B5B0;line-height:1.7;"><span leaf="">此处插入：创建 skill 的录屏演示</span></p>
</section>
```
@@ -129,7 +129,7 @@
### 3a. 左竖条小标题（最推荐，干净）
```html
<p style="margin:28px 0 14px;font-size:16px;font-weight:800;color:#1C1917;line-height:1.5;border-left:4px solid #DC2626;padding-left:12px;">
<p style="margin:28px 0 14px;font-size:17px;font-weight:800;color:#1C1917;line-height:1.5;border-left:4px solid #DC2626;padding-left:12px;">
<span leaf="">小标题文字</span>
</p>
```
@@ -138,14 +138,14 @@
```html
<p style="margin:28px 0 14px;">
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:14px;font-weight:700;padding:5px 16px;border-radius:6px;"><span leaf="">小标题文字</span></span>
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:15px;font-weight:700;padding:5px 16px;border-radius:6px;"><span leaf="">小标题文字</span></span>
</p>
```
### 3c. 序号药丸 + 标题（清单/步骤）
```html
<p style="margin:24px 0 12px;font-size:15px;font-weight:800;color:#1C1917;line-height:1.6;">
<p style="margin:24px 0 12px;font-size:16px;font-weight:800;color:#1C1917;line-height:1.6;">
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;border-radius:5px;padding:1px 9px;margin-right:8px;font-weight:900;"><span leaf="">01</span></span>
<span leaf="">要点标题</span>
</p>
@@ -155,7 +155,7 @@
```html
<section style="margin:0 0 24px;background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:16px 20px;">
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
<p style="font-size:17px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
<span leaf="">「这里是核心观点或关键金句」</span>
</p>
</section>
@@ -168,7 +168,7 @@
<p style="margin:0 0 6px;">
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:11px;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:1px;"><span leaf="">提示</span></span>
</p>
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;">
<span leaf="">提示或旁注的正文内容</span>
</p>
</section>
skills/le-wechat-article/references/themes/theme-generator.md
+1 -1
View File
@@ -207,7 +207,7 @@
也就是说，需要覆盖文章排版常见场景，但"覆盖全面"不等于"固定骨架"；你必须根据主题结构模型决定哪些类别更重、哪些类别更轻、哪些类别需要细分出更多变体。
至少包含以下大类 Block：
- 头图 / Hero / 封面
- 头图 / Hero / 封面（开篇组件必须是 ENGINE「版式基线」的轻量导语条形态：栏目标签 + 一句话导语，无大字主标题/头图/落款；正文字号 ≥15px、卡片侧边 padding ≤14px、容器/模块侧边 ≤6px（HTML 每侧合计 ≤16px））
- 章节标题 / 小节标题 / 标签标题
- 正文段落 / 强调段落 / 行内代码段落
- 引用块 / 提示卡 / 警示卡 / 成功卡 / 信息卡
skills/le-wechat-article/references/themes/theme-graphite-minimal.md
+73 -73
View File
@@ -30,11 +30,11 @@
极浅灰底： #FAFAFA（引用块 / 目录卡 / 提示块，正文底保持纯白）
纯白底： #FFFFFF
强调色（暖橙）： #F97316（全篇 ≤3 处，仅用于锚点点睛）
正文字号： 15px（不可改）
正文字号： 16px（不可改）
行高： 1.8
字间距： 0.3px
最大宽度： 677px
内容区边距： 0 10px（左右各 10px）
内容区边距： 0 4px（模块边距，卡片侧边 10~12px）
章节间距： 56px（后续章节 margin-top）
```
@@ -63,16 +63,16 @@
> - 纯白底 + 上下各 1px 石墨极细线框定 + 大号金句，无色块、无阴影、无圆角，完全依靠细线与留白产生质感
```html
<section style="margin:10px 10px 40px;padding:32px 24px 24px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;background:#FFFFFF;">
<section style="margin:10px 4px 40px;padding:28px 14px 20px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;background:#FFFFFF;">
<p style="font-size:11px;color:#A1A1AA;letter-spacing:2px;margin:0 0 18px;font-weight:400;">
<span leaf="">QUOTE</span>
</p>
<p style="font-size:18px;font-weight:700;color:#27272A;margin:0 0 8px;line-height:1.7;letter-spacing:0.5px;">
<p style="font-size:19px;font-weight:700;color:#27272A;margin:0 0 8px;line-height:1.7;letter-spacing:0.5px;">
<span leaf="">{{金句前段}}</span>
<span style="border-bottom:2px solid #52525B;"><span leaf="">{{石墨下划线关键词}}</span></span>
<span leaf="">{{金句收尾}}</span>
</p>
<p style="text-align:right;font-size:12px;color:#A1A1AA;margin:16px 0 0;letter-spacing:1px;">
<p style="text-align:right;font-size:13px;color:#A1A1AA;margin:16px 0 0;letter-spacing:1px;">
<span leaf="">—— {{作者名，未知则删整行}}</span>
</p>
</section>
@@ -87,22 +87,22 @@
> 3 个及以上章节时生成。上方极细线 + 极浅灰底，石墨灰编号 + 深炭标题，纯灰阶无橙色，大留白。展示**精选 3 个核心看点**，不是全量章节列表。
```html
<section style="padding:0 10px 40px;">
<section style="padding:0 8px 40px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 16px;letter-spacing:2px;">
<span leaf="">本文看点</span>
</p>
<section style="display:flex;justify-content:space-between;">
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;margin-right:8px;">
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">01</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点一}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点一}}</span></p>
</section>
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;margin-right:8px;">
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;margin-right:8px;">
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">02</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点二}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点二}}</span></p>
</section>
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 12px 16px;">
<section style="flex:1;background:#FAFAFA;border-top:1px solid #E4E4E7;padding:18px 10px 16px;">
<p style="font-size:11px;color:#A1A1AA;font-weight:500;margin:0 0 8px;letter-spacing:1px;"><span leaf="">03</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点三}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.5;"><span leaf="">{{看点三}}</span></p>
</section>
</section>
</section>
@@ -115,7 +115,7 @@
> 无渐变、无颜色变化，单纯 1px 横向石墨极细线，两侧超大留白，呼吸感即来自此。
```html
<section style="padding:0 10px;">
<section style="padding:0 8px;">
<section style="height:1px;background:#E4E4E7;margin:0;">
<span leaf=""><br></span>
</section>
@@ -129,16 +129,16 @@
> 核心特征：极大号石墨灰水印数字（作为背景层视觉锚）+ 英文小标签 + 深炭标题 + 底部 1px 细线。编号大字非常"现代极简"。第一章 `margin-top:16px`，后续章节 `margin-top:56px`。
```html
<section style="margin-top:56px;margin-bottom:32px;padding:0 10px;">
<section style="margin-top:56px;margin-bottom:32px;padding:0 8px;">
<section style="position:relative;padding-bottom:20px;border-bottom:1px solid #E4E4E7;">
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
<p style="font-size:49px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
<span leaf="">01</span>
</p>
<section style="margin-top:-8px;">
<p style="font-size:10px;color:#A1A1AA;font-weight:500;letter-spacing:3px;margin:0 0 6px;text-transform:uppercase;">
<span leaf="">{{ENGLISH TAG}}</span>
</p>
<h3 style="font-size:20px;font-weight:800;color:#27272A;margin:0;letter-spacing:0.5px;line-height:1.4;">
<h3 style="font-size:21px;font-weight:800;color:#27272A;margin:0;letter-spacing:0.5px;line-height:1.4;">
<span leaf="">{{中文章节标题}}</span>
</h3>
</section>
@@ -152,7 +152,7 @@
**结语章节变体**（编号用 `∞` 替代数字，契合极简的无限循环意象，英文标签用 `THE END` / `EPILOGUE`）：
```html
<p style="font-size:48px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
<p style="font-size:49px;font-weight:900;color:#E4E4E7;margin:0;line-height:1;letter-spacing:-2px;">
<span leaf="">∞</span>
</p>
```
@@ -168,7 +168,7 @@
**基础段落**：
```html
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
<p style="margin-bottom:22px;font-size:16px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
<span leaf="">{{正文内容}}</span>
</p>
```
@@ -176,7 +176,7 @@
**带关键词下划线标记的段落**（推荐默认）：
```html
<p style="margin-bottom:22px;font-size:15px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
<p style="margin-bottom:22px;font-size:16px;line-height:1.8;text-align:justify;color:#52525B;letter-spacing:0.3px;">
<span leaf="">{{前半句}}</span>
<span style="border-bottom:2px solid #52525B;font-weight:600;color:#27272A;"><span leaf="">{{需要强调的关键短语}}</span></span>
<span leaf="">{{后半句}}</span>
@@ -192,7 +192,7 @@
> `###` 子标题用石墨左竖条 + 深炭标题，**不套用组件 5 的水印编号章节样式**（水印编号只给 `##`）。竖条 3px 石墨灰，贴合极简气质。
```html
<p style="font-size:15px;font-weight:800;color:#27272A;margin:28px 0 14px;padding-left:12px;border-left:3px solid #52525B;line-height:1.4;">
<p style="font-size:16px;font-weight:800;color:#27272A;margin:28px 0 14px;padding-left:12px;border-left:3px solid #52525B;line-height:1.4;">
<span leaf="">{{子标题}}</span>
</p>
```
@@ -222,7 +222,7 @@
### 7b. 极浅灰底深炭字标签（核心概念，每篇 2~4 个）
```html
<span style="background:#F4F4F5;color:#27272A;padding:2px 7px;border-radius:3px;font-weight:700;font-size:14px;"><span leaf="">关键词标签</span></span>
<span style="background:#F4F4F5;color:#27272A;padding:2px 7px;border-radius:3px;font-weight:700;font-size:15px;"><span leaf="">关键词标签</span></span>
```
### 7c. 极浅灰背景高亮（次要关键词）
@@ -252,7 +252,7 @@
### 7g. 行内代码
```html
<span style="background:#F4F4F5;color:#27272A;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:14px;"><span leaf="">code</span></span>
<span style="background:#F4F4F5;color:#27272A;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Consolas,Monaco,monospace;font-size:15px;"><span leaf="">code</span></span>
```
---
@@ -264,8 +264,8 @@
> 左侧 3px 石墨灰竖条 + 大留白 + 深炭字，无底色，靠竖条与缩进建立层级，呼吸感极强。
```html
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 10px 28px;">
<p style="font-size:16px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
<section style="border-left:3px solid #52525B;padding:16px 0 16px 24px;margin:0 4px 28px;">
<p style="font-size:17px;font-weight:700;color:#27272A;margin:0;line-height:1.7;letter-spacing:0.5px;">
<span leaf="">「{{核心观点或关键金句}}」</span>
</p>
</section>
@@ -276,11 +276,11 @@
> 极浅灰底 + 1px 细线边框，用于展示 Prompt、引用内容、示例等较长内容。
```html
<section style="background:#FAFAFA;border:1px solid #E4E4E7;padding:20px 22px;margin:0 10px 28px;">
<section style="background:#FAFAFA;border:1px solid #E4E4E7;padding:20px 14px;margin:0 4px 28px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:2px;font-weight:500;">
<span leaf="">REFERENCE</span>
</p>
<p style="font-size:15px;color:#3F3F46;margin:0;line-height:1.8;text-align:justify;">
<p style="font-size:16px;color:#3F3F46;margin:0;line-height:1.8;text-align:justify;">
{{引用内容，可含 7d 石墨下划线等内联样式}}
</p>
</section>
@@ -291,8 +291,8 @@
> 极细辅助灰竖条 + 小号文字，用于轻量旁注、作者旁白，不抢主文视觉。
```html
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 10px 24px;">
<p style="font-size:13px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
<section style="border-left:2px solid #E4E4E7;padding:12px 0 12px 20px;margin:0 4px 24px;">
<p style="font-size:14px;color:#A1A1AA;margin:0;line-height:1.8;text-align:justify;">
<span leaf="">{{轻量旁注内容}}</span>
</p>
</section>
@@ -303,7 +303,7 @@
> 上下 1px 细线 + 居中深炭字，用于章节之间的过渡金句。
```html
<p style="font-size:15px;margin:0 10px 24px;text-align:center;color:#27272A;font-weight:700;letter-spacing:1px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;padding:14px 10px;">
<p style="font-size:16px;margin:0 4px 24px;text-align:center;color:#27272A;font-weight:700;letter-spacing:1px;border-top:1px solid #E4E4E7;border-bottom:1px solid #E4E4E7;padding:14px 10px;">
<span leaf="">{{居中金句}}</span>
</p>
```
@@ -317,8 +317,8 @@
> 石墨竖条 + 深炭文字，无背景色，极简提醒。
```html
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 10px 24px;">
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
<section style="border-left:3px solid #27272A;padding:14px 0 14px 22px;margin:0 4px 24px;">
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
<span leaf="">{{重要提示或核心结论}}</span>
</p>
</section>
@@ -329,8 +329,8 @@
> 橙色竖条 + 深炭文字，无背景色，是橙色在正文中最自然的出现方式。
```html
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 10px 24px;">
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
<section style="border-left:3px solid #F97316;padding:14px 0 14px 22px;margin:0 4px 24px;">
<p style="font-size:15px;font-weight:700;color:#27272A;margin:0;line-height:1.8;">
<span leaf="">{{最需要引起注意的内容}}</span>
</p>
</section>
@@ -341,11 +341,11 @@
> 极浅灰底 + 顶部深炭细线 + 多行内容，适合提示内容较多时。
```html
<section style="background:#FAFAFA;border-top:2px solid #27272A;padding:18px 22px;margin:0 10px 24px;">
<section style="background:#FAFAFA;border-top:2px solid #27272A;padding:18px 14px;margin:0 4px 24px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 10px;letter-spacing:2px;font-weight:500;">
<span leaf="">NOTE</span>
</p>
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;">
<span leaf="">{{较多的提示内容}}</span>
</p>
</section>
@@ -363,9 +363,9 @@
<section style="margin-bottom:22px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">STEP 01</span></span>
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{步骤标题}}</span></span>
<span style="font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{步骤标题}}</span></span>
</section>
<p style="font-size:15px;margin:0 0 16px;color:#52525B;line-height:1.8;text-align:justify;">
<p style="font-size:16px;margin:0 0 16px;color:#52525B;line-height:1.8;text-align:justify;">
{{步骤内容}}
</p>
</section>
@@ -379,7 +379,7 @@
<section style="margin-bottom:22px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#27272A;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.5px;"><span leaf="">SKILL 1</span></span>
<span style="font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{名称}}</span></span>
<span style="font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{名称}}</span></span>
</section>
</section>
```
@@ -389,8 +389,8 @@
### 10c. tool-card（工具 / 条目说明卡，极简线框版）
```html
<section style="border:1px solid #E4E4E7;padding:16px 20px;margin:0 10px 24px;">
<p style="font-size:14px;color:#52525B;margin:0;line-height:1.8;">
<section style="border:1px solid #E4E4E7;padding:16px 14px;margin:0 4px 24px;">
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;">
{{条目说明内容}}
</p>
</section>
@@ -405,16 +405,16 @@
```html
<section style="margin-bottom:24px;">
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
<p style="font-size:15px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#27272A;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
<p style="font-size:16px;color:#52525B;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
</section>
```
@@ -424,9 +424,9 @@
```html
<section style="margin-bottom:14px;">
<p style="margin:0 0 6px;">
<span style="display:inline-block;font-size:14px;font-weight:700;color:#27272A;background:#F4F4F5;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#52525B;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
<span style="display:inline-block;font-size:15px;font-weight:700;color:#27272A;background:#F4F4F5;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#52525B;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
</p>
<p style="font-size:14px;color:#71717A;margin:0;line-height:1.7;text-align:justify;">
<p style="font-size:15px;color:#71717A;margin:0;line-height:1.7;text-align:justify;">
<span leaf="">{{要点说明}}</span>
</p>
</section>
@@ -441,8 +441,8 @@
<section style="width:2px;background:#E4E4E7;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
</section>
<section style="flex:1;padding-bottom:12px;">
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#27272A;"><span leaf="">{{节点标题}}</span></p>
<p style="font-size:15px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
<p style="margin:0 0 6px;font-size:16px;font-weight:800;color:#27272A;"><span leaf="">{{节点标题}}</span></p>
<p style="font-size:16px;margin:0;color:#52525B;line-height:1.8;text-align:justify;">{{节点内容}}</p>
</section>
</section>
```
@@ -456,13 +456,13 @@
### 两列数据卡（极简线框版）
```html
<section style="display:flex;margin:0 10px 28px;">
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;margin-right:8px;text-align:center;">
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
<section style="display:flex;margin:0 4px 28px;">
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;margin-right:8px;text-align:center;">
<p style="font-size:33px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
</section>
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 16px;text-align:center;">
<p style="font-size:32px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
<section style="flex:1;border:1px solid #E4E4E7;padding:22px 12px;text-align:center;">
<p style="font-size:33px;font-weight:900;color:#27272A;margin:0 0 6px;line-height:1;letter-spacing:-1px;"><span leaf="">{{数字}}</span></p>
<p style="font-size:11px;color:#A1A1AA;margin:0;letter-spacing:1px;"><span leaf="">{{说明}}</span></p>
</section>
</section>
@@ -471,21 +471,21 @@
### 三列要点卡（顶部细线版）
```html
<section style="display:flex;margin:0 10px 28px;">
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
<section style="display:flex;margin:0 4px 28px;">
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;margin-right:8px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">01</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
</section>
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;margin-right:8px;">
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;margin-right:8px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">02</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
</section>
<section style="flex:1;border-top:2px solid #27272A;padding:18px 12px 16px;">
<section style="flex:1;border-top:2px solid #27272A;padding:18px 10px 16px;">
<p style="font-size:11px;color:#A1A1AA;margin:0 0 8px;letter-spacing:1px;font-weight:500;"><span leaf="">03</span></p>
<p style="font-size:13px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:12px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
<p style="font-size:14px;font-weight:700;color:#27272A;margin:0 0 6px;line-height:1.4;"><span leaf="">{{要点标题}}</span></p>
<p style="font-size:13px;color:#71717A;margin:0;line-height:1.6;"><span leaf="">{{要点说明}}</span></p>
</section>
</section>
```
@@ -493,8 +493,8 @@
### 表格（真实数据表用）
```html
<section style="margin:0 10px 24px;overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<section style="margin:0 4px 24px;overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:15px;">
<thead>
<tr>
<th style="background:#27272A;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
@@ -544,7 +544,7 @@
> 极简线框图片容器，无圆角、无阴影，1px 细线边框延续几何极简语言。
```html
<section style="border:1px solid #E4E4E7;padding:4px;margin:0 10px 12px;">
<section style="border:1px solid #E4E4E7;padding:4px;margin:0 4px 12px;">
<section style="margin:0;overflow:hidden;">
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
</section>
@@ -554,7 +554,7 @@
带说明文字时，图片容器 `margin-bottom` 改 `8px`，其后加：
```html
<p style="font-size:12px;color:#A1A1AA;text-align:center;margin:0 10px 28px;letter-spacing:0.5px;">
<p style="font-size:13px;color:#A1A1AA;text-align:center;margin:0 4px 28px;letter-spacing:0.5px;">
<span leaf="">— {{图片说明}}</span>
</p>
```
@@ -568,7 +568,7 @@ GIF 动图角标改极简描边胶囊：边框与字色用石墨主色 `#52525B`
> 纯几何，1px 细线 + 居中 "END" 字样，石墨灰，简洁收尾。
```html
<section style="padding:0 10px;">
<section style="padding:0 8px;">
<section style="text-align:center;margin:0 0 36px;">
<section style="display:flex;align-items:center;justify-content:center;">
<span style="height:1px;width:48px;background:#E4E4E7;margin-right:16px;"><span leaf=""><br></span></span>
@@ -586,12 +586,12 @@ GIF 动图角标改极简描边胶囊：边框与字色用石墨主色 `#52525B`
> 固定签名文案以正文段落形式呈现；有个人名片 / 引导图素材才放图，无素材整块删。
```html
<section style="padding:0 10px 24px;">
<section style="padding:0 8px 24px;">
<section style="border-top:1px solid #E4E4E7;padding-top:28px;">
<p style="margin-bottom:16px;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
<p style="margin-bottom:16px;font-size:16px;line-height:1.8;color:#52525B;text-align:justify;">
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
</p>
<p style="margin-bottom:0;font-size:15px;line-height:1.8;color:#52525B;text-align:justify;">
<p style="margin-bottom:0;font-size:16px;line-height:1.8;color:#52525B;text-align:justify;">
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
<strong style="color:#27272A;"><span leaf="">点赞、在看、转发</span></strong>
<span leaf="">三连，我们下篇见。</span>
skills/le-wechat-article/references/themes/theme-index.md
+1
View File
@@ -14,6 +14,7 @@
| 留白禅意风 | `#4A5D52` 墨绿 | 禅意冥想、极简生活、深度随笔、艺术留白（呼吸感最强） | `references/theme-zen-whitespace.md` | `border-bottom:1.5px solid #B5C8BC;font-weight:500;` |
| 摸鱼票据风 | `#059669` emerald | 测评、工具对比、创意评测（票据/门票视觉隐喻，星级评分+编号+硬阴影卡片） | `references/theme-moyu-ticket.md` | `border-bottom:2px solid #A7F3D0;font-weight:600;` |
| 橄榄手记 | `#1e1f23` 墨黑（配橙 `#ed7b2f`） | 内刊手记、深度评测、案例复盘、系统性说明文档（编辑部内刊质感，分节形式多样，信息密度偏高） | `references/theme-olive-journal.md` | `border-bottom:2px solid #ed7b2f;font-weight:600;` |
| 暖橙风 | `#EE7A2D` 暖橙 | 品牌发布、产品介绍、心理陪伴、生活方式（圆角暖卡、浅杏衬底、呼吸留白） | `references/theme-warm-orange.md` | `border-bottom:2px solid #F9C9A3;font-weight:600;` |
## 选择建议
skills/le-wechat-article/references/themes/theme-moyu-green.md
+86 -146
View File
@@ -12,7 +12,7 @@
> - 所有"装饰性空元素"（圆点、渐变分割线、装饰短横、时间线竖线）**必须在内部放 `<span leaf=""><br></span>` 占位**，否则微信会剥掉样式
> - **不要把 `font-size`/`border-bottom` 打在 `<strong>` 上**，也不要在同一个 `<p>` 里混多个不同 `font-size`——微信编辑器会自动"纠正"导致样式被重写。正确做法：拆成多个 `<p>`，每个 `<p>` 只有一个字号；高亮样式统一挂在外层 `<span>` 上
> - 不用 `position:absolute` 做划线/高亮，删除线用 `text-decoration:line-through`
> - 结构化区域（如封面右侧图片槽位）没有内容时**整块删掉**，不留空 section
> - 结构化区域（如作者头像、图片说明）没有内容时**整块删掉**，不留空 section
---
@@ -39,12 +39,12 @@
浅边框： #E5E7EB
浅灰背景： #F3F4F6
极浅灰： #F9FAFB
正文字号： 14px（不可改）
正文字号： 15px（不可改）
正文行高： 1.9
全局行高： 1.75
字间距： 0.5px
最大宽度： 677px
内容区边距： 0 20px（模块左右各 20px）
内容区边距： 0 12px（卡片通栏为主，卡片侧边 12px，封面卡外边距 8px）
```
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
@@ -63,93 +63,35 @@
---
## 组件 2 封面 cover-breaking（杂志快讯封面）
## 组件 2 封面 cover-breaking（快讯导语条）
> **文案策略（先读，比代码重要）**：
> - 封面标题和公众号外标题是**两层标题**，必须视角错开——外标题卖"为什么点开"，封面卖"里面讲什么"
> - 已知外标题时，主标题**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
> - 产品名/功能名只允许出现在**底部品牌条**或**副标题关键词条**，不出现在大字主标题
> - 公众号后台已承担标题、封面图、账号名，开篇不再重复——本组件**不放大字主标题、不放头图**；开篇导语和外标题是**两层**，视角错开——外标题卖"为什么点开"，导语卖"里面讲什么、读完得到什么"
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；未知外标题时从五个视角（**数字反差 / 角色革命 / 案例串 / 方法论 / 情绪钩子**）自选一个直出，不停下来问
> - 认知翻转签名保留：划线旧认知在上，导语一句话给出新认知
> - 产品名/功能名只允许出现在**底部品牌条**
> - 仅当用户要求"帮我定封面方向"时才列 3-5 个方向让用户选
**有右侧图片版**：
```html
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
<section style="padding:32px 28px 28px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
<section style="padding:20px 12px 18px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
</section>
<section style="display:flex;align-items:center;gap:20px;">
<section style="flex:1;min-width:0;">
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
<span leaf="">{{划线旧认知}}</span>
</p>
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
<span leaf="">{{主标题行1}}</span>
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
</p>
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
<span leaf="">{{主标题行2}}</span>
</p>
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
<span leaf=""><br></span>
</section>
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
<span leaf="">{{副标题关键词}}</span>
</p>
</section>
<section style="flex-shrink:0;width:110px;height:110px;border-radius:16px;overflow:hidden;border:1px solid rgba(5,150,105,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.06);">
<!-- 封面右侧图片，保留原图代码 -->
</section>
</section>
</section>
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
<span leaf="">{{底部左侧文字}}</span>
<p style="font-size:16px;color:#D1D5DB;margin:0 0 10px;text-decoration:line-through;letter-spacing:0.5px;">
<span leaf="">{{划线旧认知}}</span>
</p>
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
<span leaf=""><br></span></section>
<p style="font-size:14px;color:#6B7280;margin:0;line-height:1.8;letter-spacing:0.5px;">
<span leaf="">{{开篇导语}}</span>
</p>
<section style="display:flex;gap:4px;">
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签1}}</span></span>
<span style="background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:8px;color:#fff;font-weight:600;"><span leaf="">{{标签2}}</span></span>
</section>
</section>
</section>
```
**无右侧图片版**（文章没有封面头像图时用这个，标题区满宽）：
```html
<section style="margin:0 0 32px;background:#fff;border:1.5px solid rgba(5,150,105,0.15);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);width:100%;">
<section style="padding:32px 28px 28px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:28px;">
<span style="width:6px;height:6px;background:#059669;border-radius:50%;"><span leaf=""><br></span></span>
<span style="font-size:11px;font-weight:700;letter-spacing:3px;color:#059669;"><span leaf="">{{顶部标签}}</span></span>
<section style="flex:1;height:1px;overflow:hidden;background:linear-gradient(to right,rgba(5,150,105,0.12),transparent);"><span leaf=""><br></span></section>
<span style="font-size:10px;color:#D1D5DB;font-weight:600;"><span leaf="">{{日期}}</span></span>
</section>
<section>
<p style="font-size:15px;color:#D1D5DB;margin:0 0 6px;text-decoration:line-through;letter-spacing:0.5px;">
<span leaf="">{{划线旧认知}}</span>
</p>
<p style="font-size:24px;font-weight:900;color:#111827;margin:0;line-height:1.05;letter-spacing:-2px;">
<span leaf="">{{主标题行1}}</span>
<span style="color:#059669;"><span leaf="">{{绿色高亮词}}</span></span>
</p>
<p style="font-size:24px;font-weight:900;color:#059669;margin:0 0 16px;line-height:1.05;letter-spacing:-2px;">
<span leaf="">{{主标题行2}}</span>
</p>
<section style="width:48px;height:3px;background:linear-gradient(to right,#059669,#34D399);border-radius:2px;margin-bottom:12px;">
<span leaf=""><br></span>
</section>
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.7;letter-spacing:0.5px;">
<span leaf="">{{副标题关键词}}</span>
</p>
</section>
</section>
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;">
<p style="font-size:12px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
<section style="background:linear-gradient(135deg,#059669,#10B981);padding:12px 12px;display:flex;align-items:center;justify-content:space-between;">
<p style="font-size:13px;color:rgba(255,255,255,0.9);margin:0;font-weight:600;letter-spacing:0.5px;">
<span leaf="">{{底部左侧文字}}</span>
</p>
<section style="display:flex;gap:4px;">
@@ -164,10 +106,8 @@
- `{{顶部标签}}` → 如 `TUTORIAL · 品牌实战`、`AI VIDEO · 实战案例`、`BREAKING`（建议 10-15 字符以内）
- `{{日期}}` → 如 `2026.07`
- `{{划线旧认知}}` → 被颠覆的旧观念（例：`MV要专业团队？`）
- `{{主标题行1}}` → 标题前半段（黑色）；`{{绿色高亮词}}` → 标题中的绿色强调词；`{{主标题行2}}` → 标题第二行（全绿色）
- `{{副标题关键词}}` → 简短关键词，用 `·` 分隔
- `{{开篇导语}}` → 一句话给出新认知/本篇看点，与外标题错开视角
- `{{底部左侧文字}}` → 产品/品牌名；`{{标签1/2}}` → 底部小标签
---
## 组件 3 目录 toc-scroll（横向滚动目录）
@@ -175,7 +115,7 @@
2 个及以上章节时生成。第一个卡片绿色高亮，最后一个固定为"写在最后"（PART ///）。
```html
<section style="margin:0 20px 32px;">
<section style="margin:0 8px 32px;">
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
<p style="font-size:10px;color:#9CA3AF;margin:0;text-transform:uppercase;letter-spacing:2px;font-weight:600;">
<span leaf="">📦 {{N}} Parts + Conclusion</span>
@@ -190,7 +130,7 @@
<p style="font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:1px;margin:0 0 5px;">
<span leaf="">PART 01</span>
</p>
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
<span leaf="">{{章节名}}</span>
</p>
<p style="font-size:10px;color:rgba(255,255,255,0.7);margin:0;">
@@ -202,7 +142,7 @@
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
<span leaf="">PART 02</span>
</p>
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
<span leaf="">{{章节名}}</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;">
@@ -214,7 +154,7 @@
<p style="font-size:9px;font-weight:700;color:#9CA3AF;letter-spacing:1px;margin:0 0 5px;">
<span leaf="">PART ///</span>
</p>
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
<span leaf="">写在最后</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;">
@@ -232,10 +172,10 @@
第一个章节用 `margin-top:16px`，后续章节用 `margin-top:48px`。最后一章编号用 `///`，PART 改为 `LAST`。
```html
<section style="margin-top:48px;margin-bottom:32px;padding:0 20px;">
<section style="margin-top:48px;margin-bottom:32px;padding:0 12px;">
<section style="display:flex;align-items:center;gap:16px;margin-bottom:24px;">
<section style="text-align:center;flex-shrink:0;">
<p style="margin:0;font-size:28px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
<p style="margin:0;font-size:29px;font-weight:900;color:#059669;line-height:1;letter-spacing:-2px;">
<span leaf="">{{01}}</span>
</p>
<p style="margin:0;font-size:8px;font-weight:700;color:#D1D5DB;letter-spacing:2px;">
@@ -244,7 +184,7 @@
</section>
<span style="width:1px;height:36px;background:#E5E7EB;flex-shrink:0;"><span leaf=""><br></span></span>
<section>
<p style="margin:0 0 1px;font-size:17px;font-weight:900;color:#111827;letter-spacing:0.3px;">
<p style="margin:0 0 1px;font-size:18px;font-weight:900;color:#111827;letter-spacing:0.3px;">
<span leaf="">{{中文标题}}</span>
</p>
<p style="margin:0;font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1.5px;">
@@ -263,7 +203,7 @@
## 组件 5 正文段落 paragraph
```html
<p style="margin-bottom:16px;font-size:14px;line-height:1.9;text-align:justify;">
<p style="margin-bottom:16px;font-size:15px;line-height:1.9;text-align:justify;">
<span leaf="">{{正文内容}}</span>
</p>
```
@@ -313,19 +253,19 @@
### 6g. 代码标签（行内代码）
```html
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">code</span></span>
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
```
### 6h. 获取方式标签（黄色背景）
```html
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:700;"><span leaf="">「关键词」</span></span>
<span style="background:#FDE68A;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:700;"><span leaf="">「关键词」</span></span>
```
### 6i. 删除线灰色（旧的/被淘汰的概念）
```html
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:13px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
<span style="background:#F3F4F6;color:#6B7280;padding:2px 6px;border-radius:4px;font-size:14px;text-decoration:line-through;font-weight:600;"><span leaf="">旧词</span></span>
```
**使用原则**：
@@ -346,11 +286,11 @@
<section style="margin-bottom:24px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">STEP 01</span></span>
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
<span leaf="">{{步骤标题}}</span>
</h4>
</section>
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.9;text-align:justify;">
{{步骤内容}}
</p>
</section>
@@ -362,7 +302,7 @@
<section style="margin-bottom:28px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#E5E7EB;color:#6B7280;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">CASE 01</span></span>
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
<span leaf="">{{案例标题}}</span>
</h4>
</section>
@@ -376,7 +316,7 @@
<section style="margin-bottom:28px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">SKILL 1</span></span>
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
<span leaf="">{{名称}}</span>
</h4>
</section>
@@ -392,18 +332,18 @@
### 8a. prompt-block（PROMPT 展示块）
```html
<p style="font-size:13px;color:#374151;margin:0 0 16px;line-height:1.8;">
<p style="font-size:14px;color:#374151;margin:0 0 16px;line-height:1.8;">
<span style="display:inline-block;background:#059669;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">PROMPT</span></span>
<span style="font-size:12px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
<span style="font-size:13px;color:#9CA3AF;font-weight:700;"><span leaf="">{{提示词内容}}</span></span>
</p>
```
### 8b. cmd-block（CMD 单行命令块）
```html
<p style="font-size:13px;color:#374151;margin:0 0 24px;line-height:1.8;">
<p style="font-size:14px;color:#374151;margin:0 0 24px;line-height:1.8;">
<span style="display:inline-block;background:#111827;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:3px;margin-right:6px;vertical-align:middle;letter-spacing:0.5px;"><span leaf="">CMD</span></span>
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{命令内容}}</span></span>
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{命令内容}}</span></span>
</p>
```
@@ -420,8 +360,8 @@
所有引用、补充说明的**默认组件**（虚线框是本主题的风格特征，仅此组件与 9b 保留 dashed）：
```html
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 16px;margin-bottom:24px;text-align:justify;">
<p style="font-size:13px;color:#374151;margin:0;line-height:1.6;">
<section style="background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:8px;padding:12px 12px;margin-bottom:24px;text-align:justify;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.6;">
{{引用内容，可嵌入绿色加粗等内联样式}}
</p>
</section>
@@ -434,9 +374,9 @@
单行版（只有主金句）：
```html
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
<p style="margin:0;line-height:1.6;">
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
</p>
</section>
```
@@ -444,12 +384,12 @@
带前缀引导语版（两段式）：
```html
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
<p style="font-size:12px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
<span leaf="">{{引导语}}</span>
</p>
<p style="margin:0;line-height:1.6;">
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{亮点内容}}</span></span>
</p>
</section>
```
@@ -457,11 +397,11 @@
带下方补充说明版：
```html
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 16px;margin-bottom:24px;text-align:center;">
<section style="background:#FFF;border:1px dashed #BBF7D0;border-radius:8px;padding:14px 12px;margin-bottom:24px;text-align:center;">
<p style="margin:0 0 6px;line-height:1.6;">
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮内容}}</span></span>
</p>
<p style="font-size:13px;color:#9CA3AF;margin:0;line-height:1.5;">
<p style="font-size:14px;color:#9CA3AF;margin:0;line-height:1.5;">
<span leaf="">{{补充说明}}</span>
</p>
</section>
@@ -470,7 +410,7 @@
### 9c. subtitle-highlight（小节黄色下划线标题）
```html
<p style="font-size:15px;font-weight:900;color:#111827;margin-bottom:16px;">
<p style="font-size:16px;font-weight:900;color:#111827;margin-bottom:16px;">
<span style="background:linear-gradient(180deg,transparent 65%,#FDE68A 65%);padding:0 4px;"><span leaf="">{{小节标题}}</span></span>
</p>
```
@@ -480,7 +420,7 @@
### 9d. center-divider（居中金句分隔）
```html
<p style="font-size:14px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
<p style="font-size:15px;margin-bottom:20px;text-align:center;color:#059669;font-weight:700;letter-spacing:1px;border-top:1px solid #F3F4F6;border-bottom:1px solid #F3F4F6;padding:12px 0;">
<span leaf="">{{居中金句}}</span>
</p>
```
@@ -493,10 +433,10 @@
```html
<section style="padding:6px 0 4px;margin-bottom:16px;">
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<span style="color:rgb(255,76,0);"><span leaf="">！踩坑提示 🕳</span></span>
</p>
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
<span style="color:rgb(136,136,136);font-weight:bold;"><span leaf="">{{提示内容}}</span></span>
</p>
</section>
@@ -508,10 +448,10 @@
```html
<section style="padding:6px 0 4px;margin-bottom:16px;">
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<span style="color:#059669;"><span leaf="">✦ {{提示标题}}</span></span>
</p>
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
{{提示内容}}
</p>
</section>
@@ -520,8 +460,8 @@
### 10c. yellow-warning（黄色警告框）
```html
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 16px;margin-bottom:20px;">
<p style="font-size:13px;color:#92400E;margin:0;font-weight:700;">
<section style="background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:12px 12px;margin-bottom:20px;">
<p style="font-size:14px;color:#92400E;margin:0;font-weight:700;">
<span leaf="">{{警告内容}}</span>
</p>
</section>
@@ -530,8 +470,8 @@
### 10d. green-info（绿色信息框）
```html
<section style="background:#F0FDF4;padding:12px 16px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
<p style="font-size:13px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
<section style="background:#F0FDF4;padding:12px 12px;border-radius:8px;border:1px solid #BBF7D0;margin-bottom:20px;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;text-align:justify;">
{{信息内容}}
</p>
</section>
@@ -548,7 +488,7 @@
```html
<section style="margin-bottom:14px;">
<p style="margin:0 0 6px;">
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{列表项文字}}</span></span>
</p>
</section>
```
@@ -558,9 +498,9 @@
```html
<section style="margin-bottom:14px;">
<p style="margin:0 0 6px;">
<span style="display:inline-block;font-size:13px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
<span style="display:inline-block;font-size:14px;font-weight:700;color:#059669;background:rgba(5,150,105,0.08);padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#059669;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{标题}}</span></span>
</p>
<p style="font-size:13px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
<p style="font-size:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
<span leaf="">{{描述内容}}</span>
</p>
</section>
@@ -572,29 +512,29 @@
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:24px;">
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
<span leaf="">{{步骤1标题}}</span>
</p>
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
<span leaf="">{{步骤1描述}}</span>
</p>
</section>
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
<span leaf="">→</span>
</section>
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
<span leaf="">{{步骤2标题}}</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
<span leaf="">{{步骤2描述}}</span>
</p>
</section>
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:14px;padding:0 4px;">
<section style="display:flex;align-items:center;color:#D1D5DB;font-size:15px;padding:0 4px;">
<span leaf="">→</span>
</section>
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #A7F3D0;border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#059669;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#059669;margin:0 0 3px;">
<span leaf="">{{步骤3标题}}</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
@@ -602,7 +542,7 @@
</p>
</section>
</section>
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:12px 0 0;letter-spacing:0.5px;">
<span leaf="">{{底部说明文字}}</span>
</p>
</section>
@@ -616,7 +556,7 @@
<section style="background:#F9FAFB;padding:16px;border-radius:12px;border:1px solid #F3F4F6;margin-bottom:28px;">
<section style="display:flex;align-items:stretch;justify-content:center;gap:6px;">
<section style="flex:1;text-align:center;padding:10px 8px;background:linear-gradient(135deg,#059669,#10B981);border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;">
<span leaf="">{{卡片1标题}}</span>
</p>
<p style="font-size:10px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;">
@@ -624,7 +564,7 @@
</p>
</section>
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
<span leaf="">{{卡片2标题}}</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
@@ -632,7 +572,7 @@
</p>
</section>
<section style="flex:1;text-align:center;padding:10px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;">
<p style="font-size:13px;font-weight:800;color:#111827;margin:0 0 3px;">
<p style="font-size:14px;font-weight:800;color:#111827;margin:0 0 3px;">
<span leaf="">{{卡片3标题}}</span>
</p>
<p style="font-size:10px;color:#9CA3AF;margin:0;line-height:1.5;">
@@ -658,14 +598,14 @@
<section style="flex:1;padding-bottom:12px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
<span style="display:inline-block;background:#111827;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;"><span leaf="">{{CASE 01}}</span></span>
<h4 style="font-size:15px;font-weight:800;color:#111827;margin:0;">
<h4 style="font-size:16px;font-weight:800;color:#111827;margin:0;">
<span leaf="">{{标题}}</span>
</h4>
</section>
<p style="font-size:11px;font-weight:600;color:#9CA3AF;letter-spacing:1px;margin:0 0 12px;">
<span leaf="">{{英文副标题}}</span>
</p>
<p style="font-size:14px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
<p style="font-size:15px;margin:0 0 16px;color:#4B5563;line-height:1.7;text-align:justify;">
{{内容}}
</p>
</section>
@@ -679,8 +619,8 @@
基本版：
```html
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
<p style="font-size:13px;color:#374151;margin:0;line-height:1.8;">
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
{{说明内容}}
</p>
</section>
@@ -689,12 +629,12 @@
居中高亮版（同 oneliner-card 规则：拆多个 `<p>`，不要 `<strong>` 带 font-size/border-bottom）：
```html
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
<p style="font-size:13px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
<section style="background:#fff;border-radius:12px;padding:16px 12px;box-shadow:0 4px 16px rgba(5,150,105,0.12);margin-bottom:24px;text-align:center;">
<p style="font-size:14px;color:#9CA3AF;margin:0 0 6px;line-height:1.5;">
<span leaf="">{{小字}}</span>
</p>
<p style="margin:0;line-height:1.6;">
<span style="font-size:15px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
<span style="font-size:16px;color:#059669;font-weight:bold;border-bottom:3px solid #FDE68A;padding-bottom:2px;"><span leaf="">{{高亮大字}}</span></span>
</p>
</section>
```
@@ -705,7 +645,7 @@
```html
<section style="margin-bottom:24px;overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:13px;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<thead>
<tr>
<th style="background:#059669;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题1}}</span></th>
@@ -737,19 +677,19 @@
<section style="margin-bottom:24px;">
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
<span leaf="">{{列表项内容}}</span>
</p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
<span leaf="">{{列表项内容}}</span>
</p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#059669;color:#fff;font-size:11px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
<p style="font-size:14px;color:#374151;margin:0;line-height:1.9;flex:1;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.9;flex:1;">
<span leaf="">{{列表项内容}}</span>
</p>
</section>
@@ -793,8 +733,8 @@
固定文案照写；SVG 图标微信支持，原样保留。
```html
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:32px 20px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
<p style="font-size:13px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
<section style="background:radial-gradient(circle at center,#F9FAFB 0%,#FFFFFF 100%);border:1px solid #E5E7EB;border-radius:16px;padding:28px 12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin:0 0 24px;">
<p style="font-size:14px;font-weight:bold;color:#111827;margin-bottom:20px;line-height:1.6;">
<span leaf="">既然看到这里了，如果觉得有用，随手点个赞、在看、转发三连吧。</span>
</p>
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
@@ -842,7 +782,7 @@
```html
<section style="max-width:677px;margin:0 auto;background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;color:#374151;line-height:1.75;letter-spacing:0.5px;overflow-x:hidden;">
<!-- 1. 封面（组件2 cover-breaking，有图/无图二选一） -->
<!-- 1. 开篇导语条（组件2 cover-breaking）——划线旧认知 + 一句话导语 -->
<!-- 2. 目录（组件3 toc-scroll，2+ 章节时生成，紧跟封面之下） -->
@@ -905,7 +845,7 @@
| Markdown 元素 | 对应组件 | 说明 |
|---|---|---|
| `# 标题` | 不使用 | 公众号文章标题在平台设置；封面主标题从中提炼（视角错开） |
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句（视角错开，不复述关键词） |
| 文章开头 `> 引言` | 组件 9b oneliner-card 或并入封面副标题 | 开头金句 |
| `## 章节标题` | 组件 4 chapter-title | PART 01/02/03…，末章 /// + LAST |
| `### 子标题` | 组件 9c subtitle-highlight | 黄色下划线小节标题 |
skills/le-wechat-article/references/themes/theme-moyu-ticket.md
+44 -44
View File
@@ -10,7 +10,7 @@
>
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
> - 所有"装饰性空元素"（撕票虚线、头像占位框）**没有真实内容时整块删掉**，不留空 section
> - 正文字号固定 `14px`、行高 `1.9`——这是本主题的排版铁律，不与其它主题共用字号
> - 正文字号固定 `15px`、行高 `1.9`——这是本主题的排版铁律，不与其它主题共用字号
> - 不要把 `font-size`/`border-bottom` 打在 `<strong>` 上，高亮样式统一挂在外层 `<span>` 上
> - `writing-mode:vertical-rl`（票据侧边竖排字）在个别老旧客户端可能渲染异常，如遇异常可退化为横排小字，不影响其余结构
@@ -30,12 +30,12 @@
代码背景： #F3F4F6
代码字色： #1F2937
品牌紫色（AI 品牌专用，如 Claude/Obsidian/Gemini）：#7C3AED
正文字号： 14px（本主题铁律，不可改）
正文字号： 15px（本主题铁律，不可改）
正文行高： 1.9
全局行高： 1.75
字间距： 0.5px
最大宽度： 677px
内容区边距： 0 20px（正文区块左右各 20px）
内容区边距： 0 10px（正文区块左右各 10px）
章节间距： margin-bottom: 32px
```
@@ -57,12 +57,13 @@
## 组件 2 票据封面 ticket-cover
**用途**：文章开头，适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字，营造"一张门票/凭证"的仪式感。
**用途**：文章开头，适合测评/对比/创意类文章。星级评分 + 编号 + 竖排小字，营造"一张门票/凭证"的仪式感。开篇轻量形态：不放大字主标题、不放头图，导语职能由副标题 + 简介段落承担。
> **文案策略（先读，比代码重要）**：公众号后台已承担标题、封面图、账号名，开篇不再重复。副标题与简介段落合起来是开篇导语，和外标题**两层错开**——外标题卖"为什么点开"，导语卖"里面讲什么"；已知外标题时**禁止原样复述**其核心关键词。
**可替换字段**：
- `{{头部标签}}` → 如 `AI DESIGN TOOLS`
- `{{大标题}}` → 如 `STITCH vs PENCIL`
- `{{副标题}}` → 如 `两款免费 AI 设计工具深度对比`
- `{{副标题}}` → 开篇导语上半句，如 `两款免费 AI 设计工具深度对比`
- `{{作者名}}` / `{{作者身份}}`
- `{{简介段落}}` → 支持内嵌组件 6 的行内强调样式
- `{{#标签1/2/3}}`
@@ -72,24 +73,23 @@
```html
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;margin-bottom:32px;">
<section style="background:#059669;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;">
<section style="background:#059669;padding:12px 12px;display:flex;justify-content:space-between;align-items:center;">
<section style="color:#fffef8;font-size:11px;letter-spacing:4px;font-weight:600;"><span leaf="">{{头部标签}}</span></section>
<section style="color:#fffef8;font-size:11px;letter-spacing:2px;"><span leaf="">★★★★★</span></section>
</section>
<section style="display:flex;">
<section style="flex:1;padding:24px 20px;border-right:2px dashed #A7F3D0;">
<section style="font-size:24px;font-weight:900;color:#1a1a1a;letter-spacing:0.5px;margin-bottom:4px;text-shadow:0.5px 0 0 #1a1a1a;"><span leaf="">{{大标题}}</span></section>
<section style="font-size:14px;color:#666;letter-spacing:1px;margin-bottom:20px;"><span leaf="">{{副标题}}</span></section>
<section style="flex:1;padding:18px 12px;border-right:2px dashed #A7F3D0;">
<section style="font-size:15px;color:#1a1a1a;letter-spacing:1px;margin-bottom:20px;font-weight:700;"><span leaf="">{{副标题}}</span></section>
<section style="border-top:1px dashed #A7F3D0;margin-bottom:16px;"><span leaf=""><br></span></section>
<section style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
<!-- 有作者头像图时插入 <img> 到下面这个圆框里；无头像时整块删除该 section -->
<section style="width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #059669;flex-shrink:0;"><span leaf=""><br></span></section>
<section>
<section style="font-size:15px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
<section style="font-size:12px;color:#888;"><span leaf="">{{作者身份}}</span></section>
<section style="font-size:16px;color:#1a1a1a;font-weight:700;"><span leaf="">{{作者名}}</span></section>
<section style="font-size:13px;color:#888;"><span leaf="">{{作者身份}}</span></section>
</section>
</section>
<section style="font-size:13px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
<section style="font-size:14px;color:#555;line-height:1.8;padding:12px;background:#F0FDF4;border:1px solid #A7F3D0;">
<span leaf="">{{简介段落}}</span>
</section>
<section style="display:flex;gap:8px;margin-top:16px;">
@@ -101,12 +101,12 @@
<section style="width:48px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#F0FDF4;">
<section style="text-align:center;">
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">NO.</span></section>
<section style="font-size:18px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
<section style="font-size:19px;font-weight:900;color:#059669;"><span leaf="">{{编号}}</span></section>
</section>
<section style="writing-mode:vertical-rl;font-size:9px;color:#888;letter-spacing:2px;"><span leaf="">{{竖排文字}}</span></section>
<section style="text-align:center;">
<section style="font-size:7px;color:#999;letter-spacing:1px;"><span leaf="">GRADE</span></section>
<section style="font-size:14px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
<section style="font-size:15px;font-weight:900;color:#059669;"><span leaf="">{{等级}}</span></section>
</section>
</section>
</section>
@@ -115,7 +115,7 @@
<section style="padding:0 8px;font-size:10px;color:#A7F3D0;"><span leaf="">✂</span></section>
<section style="flex:1;border-top:2px dashed #A7F3D0;"><span leaf=""><br></span></section>
</section>
<section style="padding:10px 20px;display:flex;justify-content:space-between;align-items:center;">
<section style="padding:10px 12px;display:flex;justify-content:space-between;align-items:center;">
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">VALID FOR ONE READ</span></section>
<section style="font-size:10px;color:#999;letter-spacing:1px;"><span leaf="">ADMIT ONE 🎫</span></section>
</section>
@@ -131,11 +131,11 @@
**可替换字段**：`{{编号}}` `{{标题}}` `{{副标题}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid #1a1a1a;">
<section style="background:#059669;color:#fff;font-size:12px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
<section style="font-size:18px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
<section style="font-size:12px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
<section style="background:#059669;color:#fff;font-size:13px;font-weight:800;padding:6px 12px;letter-spacing:2px;"><span leaf="">{{编号}}</span></section>
<section style="font-size:19px;font-weight:800;color:#1a1a1a;letter-spacing:1px;"><span leaf="">{{标题}}</span></section>
<section style="font-size:13px;color:#888;"><span leaf="">/ {{副标题}}</span></section>
</section>
<!-- 本章节正文内容放在这里 -->
@@ -152,10 +152,10 @@
**可替换字段**：`{{小节标题}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
<section style="width:4px;height:16px;background:#059669;"><span leaf=""><br></span></section>
<section style="font-size:15px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
<section style="font-size:16px;font-weight:700;color:#1a1a1a;"><span leaf="">{{小节标题}}</span></section>
</section>
</section>
```
@@ -169,8 +169,8 @@
**可替换字段**：`{{正文内容}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<p style="font-size:14px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
<section style="margin-bottom:32px;padding:0 10px;">
<p style="font-size:15px;color:#555;line-height:1.9;margin-bottom:16px;text-align:justify;">
<span leaf="">{{正文内容}}</span>
</p>
</section>
@@ -203,7 +203,7 @@
### 6d. 代码标签 —— 技术名词/模型名/命令
```html
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:13px;font-weight:600;"><span leaf="">{{文字}}</span></span>
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">{{文字}}</span></span>
```
### 6e. 品牌紫色 —— Claude / Obsidian / Gemini 等 AI 品牌名专用
@@ -223,8 +223,8 @@
**可替换字段**：`{{case编号}}` `{{案例名称}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<p style="font-size:13px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
<section style="margin-bottom:32px;padding:0 10px;">
<p style="font-size:14px;color:#1a1a1a;font-weight:600;margin-bottom:0;">
<span leaf="">case{{case编号}}: {{案例名称}}</span>
</p>
</section>
@@ -237,7 +237,7 @@
**用途**：包裹图片，票据纸感边框（米黄底 + 细灰边）。**规则**：`<img>` 标签及其 `src`/`data-src` 原封不动复制，只套外层容器。
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="background:#fffef8;border:1px solid #eee;padding:6px;margin-bottom:0;">
<figure style="margin:0;">
<span leaf=""><img src="{{图片URL}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
@@ -255,9 +255,9 @@
**可替换字段**：`{{前缀}}` `{{结论内容}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 16px;margin-bottom:0;">
<p style="font-size:14px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="background:#F0FDF4;border-left:4px solid #059669;padding:14px 12px;margin-bottom:0;">
<p style="font-size:15px;color:#1a1a1a;font-weight:600;line-height:1.7;margin:0;">
<span leaf="">{{前缀}}</span>
<span style="color:#059669;"><span leaf="">{{结论内容}}</span></span>
</p>
@@ -274,11 +274,11 @@
**可替换字段**：`{{序号}}` `{{小标题}}` `{{描述}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="background:#fffef8;border:1px solid #eee;margin-bottom:12px;">
<section style="display:flex;align-items:stretch;">
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;"><span leaf="">{{序号}}</span></section>
<section style="flex:1;padding:12px 16px;font-size:13px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
<section style="width:36px;background:#059669;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;"><span leaf="">{{序号}}</span></section>
<section style="flex:1;padding:12px 12px;font-size:14px;color:#555;line-height:1.7;border-left:1px dashed #A7F3D0;">
<span style="font-weight:600;color:#1a1a1a;"><span leaf="">{{小标题}}</span></span>
<span leaf="">：{{描述}}</span>
</section>
@@ -298,21 +298,21 @@
**可替换字段**：`{{金句前半}}` `{{大数字}}`（可选）`{{金句后半}}` `{{补充说明}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:20px;margin-bottom:0;">
<p style="font-size:15px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
<p style="font-size:16px;color:#1a1a1a;font-weight:700;line-height:1.8;margin:0 0 12px;text-align:center;">
<span leaf="">{{金句前半}}</span>
<span style="color:#059669;font-size:24px;"><span leaf="">{{大数字}}</span></span>
<span style="color:#059669;font-size:25px;"><span leaf="">{{大数字}}</span></span>
<span leaf="">{{金句后半}}</span>
</p>
<p style="font-size:14px;color:#555;line-height:1.8;margin:0;text-align:justify;">
<p style="font-size:15px;color:#555;line-height:1.8;margin:0;text-align:justify;">
<span leaf="">{{补充说明}}</span>
</p>
</section>
</section>
```
无大数字时去掉中间那个 `font-size:24px` 的 `<span>`，整句金句合并放第一行 `<p>` 即可。
无大数字时去掉中间那个 `font-size:25px` 的 `<span>`，整句金句合并放第一行 `<p>` 即可。
---
@@ -323,7 +323,7 @@
**可替换字段**：`{{#标签}}`
```html
<section style="margin-bottom:32px;padding:0 20px;">
<section style="margin-bottom:32px;padding:0 10px;">
<section style="display:flex;gap:8px;flex-wrap:wrap;">
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签1}}</span></section>
<section style="font-size:10px;color:#059669;border:1px solid #059669;padding:4px 10px;"><span leaf="">{{#标签2}}</span></section>
@@ -344,8 +344,8 @@
```html
<section style="padding:0 0 32px;">
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:24px 20px;text-align:center;">
<p style="font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
<section style="background:#fffef8;border:2px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:22px 14px;text-align:center;">
<p style="font-size:14px;font-weight:700;color:#1a1a1a;margin:0 0 20px;line-height:1.6;">
<span leaf="">{{互动文案}}</span>
</p>
<section style="display:flex;justify-content:center;gap:24px;margin-bottom:16px;">
@@ -384,7 +384,7 @@
**用途**：文章最末尾收尾，放在外层容器（组件 1）内最后，footer-cta 之后。
```html
<p style="text-align:center;color:#D1D5DB;font-size:14px;margin:24px 0 0 0;">
<p style="text-align:center;color:#D1D5DB;font-size:15px;margin:24px 0 0 0;">
<span leaf="">/</span>
</p>
```
@@ -477,7 +477,7 @@
| Markdown 元素 | 对应组件 | 说明 |
|---|---|---|
| `# 标题` | 不使用 | 公众号文章标题在平台设置；票据封面大标题从中提炼 |
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（副标题+简介段落）从中提炼，视角错开 |
| 文章开头 `> 引言` | 并入封面简介段落 | 票据封面无独立引言卡组件 |
| `## 章节标题` | 组件 3 chapter-title | 编号 01/02/03… |
| `### 子标题` | 组件 4 subtitle | 左竖条小标题 |
skills/le-wechat-article/references/themes/theme-olive-journal.md
+84 -102
View File
@@ -30,26 +30,26 @@
标签浅底： #e5e7e0
强调橙（关键词下划线/前导词/CTA）： #ed7b2f
陶土棕装饰（进行中/次强调）： #d4c9b8（配边框 #b17816）
正文字号： 14px
正文字号： 15px
正文行高： 1.9
全局行高： 1.75
最大宽度： 677px
容器内边距： 8px
区块间距： margin-top: 24px（首块头图卡除外）
圆角： 6px（统一小圆角，不用大圆角）
阴影： 整体几乎无阴影，靠边框 + 色块分层，仅头图卡的插画占位区可有极轻装饰
阴影： 整体几乎无阴影，靠边框 + 色块分层
```
字体栈：`'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
**正文关键词下划线**（对应 theme-index"正文下划线 CSS"列）：`border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;`——直接复用本主题头图卡"强调词"与重点观点卡里已经出现的橙色下划线语言，保持主题内一致。
**正文关键词下划线**（对应 theme-index"正文下划线 CSS"列）：`border-bottom:2px solid #ed7b2f;font-weight:600;color:#23251d;`——直接复用本主题重点观点卡里已经出现的橙色下划线语言，保持主题内一致。
---
## 组件 1 全局容器
```html
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
<section style="max-width:677px;margin:0 auto;padding:4px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
<!-- 所有组件放在这里，第一个子元素是组件 2 头图卡，其余组件均自带 margin-top:24px -->
@@ -58,47 +58,31 @@
---
## 组件 2 头图卡 hero-card
## 组件 2 头图卡 hero-card（内刊导语条）
**用途**：文章开篇头图区，内刊风格：顶部标签+日期条，主标题+强调词，侧边配一枚手绘风占位插画，底部深色摘要条收尾。整篇文章唯一一处、放在最前面，不设 `margin-top`。
**用途**：文章开篇区，内刊风格：顶部标签+日期条，一句话开篇导语，底部深色摘要条收尾。整篇文章唯一一处、放在最前面，不设 `margin-top`。开篇轻量形态：不放大字主标题、不放头图（公众号后台已承担标题与封面图）；原头图并入正文首个图位。
**可替换字段**：`{{内刊标签}}` `{{日期}}` `{{旧标题占位}}`（可选，删除线小字，无需要时整行删除）`{{主标题}}` `{{强调词}}` `{{副标题说明}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
> **文案策略（先读，比代码重要）**：开篇导语和外标题**两层错开**——外标题卖"为什么点开"，导语卖"里面讲什么、读完得到什么"；已知外标题时**禁止原样复述**其核心关键词，从文章第一段或核心论点提炼一句。
**可替换字段**：`{{内刊标签}}` `{{日期}}` `{{开篇导语}}` `{{底部摘要}}` `{{标签1}}` `{{标签2}}`
```html
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;">
<section style="padding:28px 24px 22px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:22px;">
<section style="padding:20px 12px 18px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:18px;">
<span style="width:8px;height:8px;background:#1e1f23;border-radius:50%;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<span style="font-size:10px;font-weight:700;letter-spacing:3px;color:#65675e;"><span leaf="">{{内刊标签}}</span></span>
<span style="flex:1;height:1px;background:#bfc1b7;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<span style="font-size:10px;color:#9ea096;font-weight:500;font-variant-numeric:tabular-nums;"><span leaf="">{{日期}}</span></span>
</section>
<section style="display:flex;align-items:stretch;gap:18px;">
<section style="flex:1;min-width:0;">
<p style="font-size:14px;color:#9ea096;margin:0 0 8px;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧标题占位}}</span></p>
<p style="font-size:24px;font-weight:800;color:#23251d;margin:0 0 10px;line-height:1.15;letter-spacing:-0.75px;">
<span leaf="">{{主标题}}</span><span style="color:#4d4f46;"><span leaf="">&nbsp;·&nbsp;</span></span><span style="border-bottom:3px solid #e5e7e0;"><span leaf="">{{强调词}}</span></span>
</p>
<section style="display:flex;align-items:center;gap:4px;margin-bottom:12px;">
<span style="width:22px;height:3px;background:#1e1f23;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<span style="width:8px;height:3px;background:#bfc1b7;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
</section>
<p style="font-size:13px;color:#65675e;margin:0;line-height:1.7;"><span leaf="">{{副标题说明}}</span></p>
</section>
<section style="flex-shrink:0;width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eeefe9;border:1px dashed #bfc1b7;border-radius:6px;padding:8px;">
<svg width="72" height="72" viewBox="0 0 64 64" aria-hidden="true" style="display:block;">
<ellipse cx="32" cy="36" rx="22" ry="18" fill="none" stroke="#4d4f46" stroke-width="2"></ellipse>
<circle cx="26" cy="30" r="3" fill="#4d4f46"></circle>
<circle cx="38" cy="30" r="3" fill="#4d4f46"></circle>
<path d="M28 40 Q32 44 36 40" fill="none" stroke="#4d4f46" stroke-width="1.5"></path>
<path d="M12 34 L8 28 M52 34 L56 28" stroke="#bfc1b7" stroke-width="2" stroke-linecap="round"></path>
</svg>
<span style="font-size:8px;font-weight:700;color:#9ea096;letter-spacing:1px;margin-top:4px;"><span leaf="">DOODLE</span></span>
</section>
<section style="display:flex;align-items:center;gap:4px;margin-bottom:12px;">
<span style="width:22px;height:3px;background:#1e1f23;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<span style="width:8px;height:3px;background:#bfc1b7;border-radius:2px;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
</section>
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;"><span leaf="">{{开篇导语}}</span></p>
</section>
<section style="background:#1e1f23;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
<p style="font-size:12px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
<section style="background:#1e1f23;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
<p style="font-size:13px;color:rgba(255,255,255,0.92);margin:0;font-weight:600;"><span leaf="">{{底部摘要}}</span></p>
<section style="display:flex;gap:6px;flex-wrap:wrap;">
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签1}}</span></span>
<span style="background:#e5e7e0;color:#23251d;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:700;border:1px solid #bfc1b7;"><span leaf="">{{标签2}}</span></span>
@@ -107,8 +91,6 @@
</section>
```
（`{{旧标题占位}}` 那一行没有真实"旧标题"内容时整行 `<p>` 删除，不留占位删除线空行。）
---
## 组件 3 章节标题 section-title
@@ -122,12 +104,12 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:center;gap:14px;">
<section style="text-align:center;flex-shrink:0;">
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">{{编号}}</span></p>
<p style="margin:0;font-size:25px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">{{编号}}</span></p>
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">PART</span></p>
</section>
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<section>
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{标题}}</span></p>
<p style="margin:0 0 1px;font-size:18px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{标题}}</span></p>
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{副标题}}</span></p>
</section>
</section>
@@ -145,7 +127,7 @@
```html
<section style="margin-top:24px;">
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;padding:12px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;padding:12px 10px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;">
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#23251d;"><span leaf="">{{刊头标签}}</span></p>
<section style="display:flex;gap:8px;flex-wrap:wrap;">
<span style="font-size:10px;color:#65675e;font-weight:700;"><span leaf="">{{版本号}}</span></span>
@@ -166,7 +148,7 @@
```html
<section style="margin-top:24px;">
<section style="background:#1e1f23;border:1px solid #23251d;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
<section style="padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:4px;color:#ffffff;"><span leaf="">{{刊头标签}}</span></p>
<p style="margin:0;font-size:10px;color:rgba(255,255,255,0.68);"><span leaf="">{{说明文字}}</span></p>
</section>
@@ -184,7 +166,7 @@
```html
<section style="margin-top:24px;">
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:14px 16px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;">
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:14px 10px;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:10px;">
<section style="display:flex;align-items:center;gap:10px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1e1f23;color:#fff;font-size:11px;font-weight:800;"><span leaf="">{{期号}}</span></span>
<section>
@@ -210,7 +192,7 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:center;gap:10px;">
<span style="background:#1e1f23;color:#fff;padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700;"><span leaf="">{{步骤序号}}</span></span>
<span style="font-size:14px;font-weight:600;color:#4d4f46;"><span leaf="">{{步骤标题}}</span></span>
<span style="font-size:15px;font-weight:600;color:#4d4f46;"><span leaf="">{{步骤标题}}</span></span>
</section>
</section>
</section>
@@ -227,7 +209,7 @@
```html
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<h3 style="font-size:18px;font-weight:700;color:#23251d;margin:0;padding:0 2px;display:block;width:fit-content;box-shadow:inset 0 -0.5em 0 rgba(245,78,0,0.18);"><span leaf="">{{标题文字}}</span></h3>
<h3 style="font-size:19px;font-weight:700;color:#23251d;margin:0;padding:0 2px;display:block;width:fit-content;box-shadow:inset 0 -0.5em 0 rgba(245,78,0,0.18);"><span leaf="">{{标题文字}}</span></h3>
</section>
</section>
```
@@ -245,7 +227,7 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid #bfc1b7;padding-bottom:10px;">
<span style="font-size:10px;font-weight:800;letter-spacing:3px;color:#ed7b2f;text-transform:uppercase;"><span leaf="">{{Kicker标签}}</span></span>
<span style="font-size:18px;font-weight:800;color:#23251d;line-height:1.2;"><span leaf="">{{标题}}</span></span>
<span style="font-size:19px;font-weight:800;color:#23251d;line-height:1.2;"><span leaf="">{{标题}}</span></span>
<span style="margin-left:auto;font-size:10px;color:#9ea096;font-variant-numeric:tabular-nums;"><span leaf="">{{进度}}</span></span>
</section>
</section>
@@ -263,7 +245,7 @@
```html
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
<p style="margin:0;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;">
<span leaf="">{{正文内容}}</span>
</p>
</section>
@@ -293,7 +275,7 @@
**d. 行内代码标签** —— 技术名词/字段名/命令
```html
<span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span>
<span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:14px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span>
```
**e. 删除线旧词** —— 与"新旧对照段落"（组件 12）配套，单独用时表示"已废弃/被替代的说法"
@@ -313,8 +295,8 @@
```html
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0;font-size:14px;color:#4d4f46;line-height:1.9;">
<span leaf="">{{正文前半}}&nbsp;</span><span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:13px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf="">&nbsp;{{正文后半}}</span>
<p style="margin:0;font-size:15px;color:#4d4f46;line-height:1.9;">
<span leaf="">{{正文前半}}&nbsp;</span><span style="background:#eeefe9;color:#23251d;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:14px;border:1px solid #b6b7af;"><span leaf="">{{代码}}</span></span><span leaf="">&nbsp;{{正文后半}}</span>
</p>
</section>
</section>
@@ -331,8 +313,8 @@
```html
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;">
<span style="font-size:14px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
<p style="margin:0;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;">
<span style="font-size:15px;color:#9ea096;letter-spacing:0.3px;text-decoration:line-through;"><span leaf="">{{旧表述}}</span></span>
<span style="margin-left:6px;font-weight:700;color:#23251d;"><span leaf="">{{新表述}}</span></span>
<span style="margin-left:6px;background:#e5e7e0;padding:1px 5px;border-radius:4px;font-weight:600;color:#23251d;border:1px solid #bfc1b7;"><span leaf="">{{差异点}}</span></span>
</p>
@@ -352,7 +334,7 @@
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<ul style="margin:0;padding-left:22px;line-height:1.8;list-style-position:outside;">
<li style="margin-bottom:8px;font-size:15px;color:#4d4f46;list-style-type:disc;">
<li style="margin-bottom:8px;font-size:16px;color:#4d4f46;list-style-type:disc;">
<section><span leaf="">{{列表项}}</span></section>
</li>
</ul>
@@ -371,12 +353,12 @@
```html
<section style="margin-top:24px;">
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="padding:10px 16px;background:#1e1f23;display:flex;align-items:center;justify-content:space-between;gap:10px;">
<section style="padding:10px 10px;background:#1e1f23;display:flex;align-items:center;justify-content:space-between;gap:10px;">
<p style="margin:0;font-size:10px;font-weight:800;letter-spacing:2px;color:#ffffff;"><span leaf="">{{批注标签}}</span></p>
<span style="font-size:10px;color:rgba(255,255,255,0.65);"><span leaf="">{{批注小字}}</span></span>
</section>
<section style="padding:16px 18px 18px;background:#eeefe9;">
<p style="margin:0;font-size:14px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
<section style="padding:16px 12px 18px;background:#eeefe9;">
<p style="margin:0;font-size:15px;line-height:1.9;color:#4d4f46;text-align:justify;"><span leaf="">{{编者按正文}}</span></p>
</section>
</section>
</section>
@@ -393,8 +375,8 @@
```html
<section style="margin-top:24px;">
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="background:#fdfdf8;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;">
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
<section style="background:#fdfdf8;border-radius:6px;padding:16px 12px;border:1px solid #bfc1b7;">
<p style="font-size:15px;color:#4d4f46;margin:0;line-height:1.8;text-align:justify;">
<strong style="color:#23251d;border-bottom:3px solid #ed7b2f;"><span leaf="">{{重点观点}}</span></strong><span leaf="">&nbsp;{{补充说明}}</span>
</p>
</section>
@@ -464,7 +446,7 @@
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;display:block;">
<span leaf=""><img src="{{图片URL}}" alt="图片" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
</section>
<figcaption style="font-size:13px;line-height:1.7;color:#65675e;text-align:center;margin-top:10px;"><span leaf="">{{图片说明}}</span></figcaption>
<figcaption style="font-size:14px;line-height:1.7;color:#65675e;text-align:center;margin-top:10px;"><span leaf="">{{图片说明}}</span></figcaption>
</figure>
</section>
```
@@ -482,9 +464,9 @@
```html
<section style="margin-top:24px;">
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0 0 12px;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{图表标签}}</span></p>
<p style="margin:0 0 12px;font-size:13px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{图表标签}}</span></p>
<section style="min-height:140px;border-radius:6px;background:#eeefe9;display:flex;align-items:center;justify-content:center;border:1px dashed #bfc1b7;">
<span style="font-size:14px;color:#4d4f46;"><span leaf="">{{占位说明}}</span></span>
<span style="font-size:15px;color:#4d4f46;"><span leaf="">{{占位说明}}</span></span>
</section>
</section>
</section>
@@ -503,12 +485,12 @@
<section style="background:#eeefe9;padding:16px;border-radius:6px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:stretch;justify-content:center;gap:8px;">
<section style="flex:1;text-align:center;padding:10px 8px;background:#1e1f23;border-radius:6px;border:1px solid #23251d;">
<p style="font-size:13px;font-weight:800;color:#fff;margin:0 0 3px;"><span leaf="">{{左侧标题}}</span></p>
<p style="font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;"><span leaf="">{{左侧标题}}</span></p>
<p style="font-size:10px;color:rgba(255,255,255,0.75);margin:0;line-height:1.5;"><span leaf="">{{左侧说明}}</span></p>
</section>
<section style="display:flex;align-items:center;color:#bfc1b7;font-size:14px;padding:0 4px;"><span leaf="">vs</span></section>
<section style="display:flex;align-items:center;color:#bfc1b7;font-size:15px;padding:0 4px;"><span leaf="">vs</span></section>
<section style="flex:1;text-align:center;padding:10px 8px;background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;">
<p style="font-size:13px;font-weight:800;color:#23251d;margin:0 0 3px;"><span leaf="">{{右侧标题}}</span></p>
<p style="font-size:14px;font-weight:800;color:#23251d;margin:0 0 3px;"><span leaf="">{{右侧标题}}</span></p>
<p style="font-size:10px;color:#65675e;margin:0;line-height:1.5;"><span leaf="">{{右侧说明}}</span></p>
</section>
</section>
@@ -528,19 +510,19 @@
<section style="margin-top:24px;">
<section style="border-radius:6px;overflow:hidden;border:1px solid #bfc1b7;background:#fdfdf8;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;background:#eeefe9;border-bottom:1px solid #bfc1b7;">
<section style="width:35%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;"><span leaf="">{{维度列名}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案A名}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:12px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</span></section>
<section style="width:35%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;"><span leaf="">{{维度列名}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案A名}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;font-weight:800;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{方案B名}}</span></section>
</section>
<section style="display:flex;border-bottom:1px solid #bfc1b7;">
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
<section style="width:35%;padding:10px 12px;font-size:14px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
</section>
<section style="display:flex;">
<section style="width:35%;padding:10px 12px;font-size:13px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:13px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
<section style="width:35%;padding:10px 12px;font-size:14px;color:#4d4f46;"><span leaf="">{{行标题}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{A值}}</span></section>
<section style="width:32.5%;padding:10px 12px;font-size:14px;color:#23251d;border-left:1px solid #bfc1b7;"><span leaf="">{{B值}}</span></section>
</section>
</section>
</section>
@@ -558,9 +540,9 @@
```html
<section style="margin-top:24px;">
<section style="background:#eeefe9;border-radius:6px;padding:22px 18px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="background:#eeefe9;border-radius:6px;padding:20px 12px;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="font-size:10px;color:#65675e;margin:0 0 4px;text-transform:uppercase;letter-spacing:2px;font-weight:600;"><span leaf="">{{FLOW标签}}</span></p>
<p style="font-size:13px;color:#23251d;font-weight:600;margin:0 0 8px;"><span leaf="">{{流程说明}}</span></p>
<p style="font-size:14px;color:#23251d;font-weight:600;margin:0 0 8px;"><span leaf="">{{流程说明}}</span></p>
<svg viewBox="0 0 400 82" style="width:100%;height:auto;" role="img" aria-label="流程示意">
<rect x="2" y="14" width="58" height="48" rx="4" fill="#fdfdf8" stroke="#4d4f46" stroke-width="1.5"></rect>
<text x="31" y="34" font-size="9" fill="#23251d" text-anchor="middle" font-weight="700" font-family="IBM Plex Sans,sans-serif"><tspan leaf="">节点一</tspan></text>
@@ -601,11 +583,11 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="margin-bottom:14px;">
<p style="margin:0 0 6px;">
<span style="display:inline-block;font-size:13px;font-weight:700;color:#23251d;background:#e5e7e0;padding:3px 10px;border-radius:999px;border:1px solid #bfc1b7;">
<span style="display:inline-block;font-size:14px;font-weight:700;color:#23251d;background:#e5e7e0;padding:3px 10px;border-radius:999px;border:1px solid #bfc1b7;">
<span style="display:inline-block;width:6px;height:6px;background:#ed7b2f;border-radius:50%;margin-right:5px;vertical-align:middle;overflow:hidden;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span><span leaf="">&nbsp;{{条目标题}}&nbsp;</span>
</span>
</p>
<p style="font-size:13px;color:#4d4f46;margin:0;line-height:1.7;text-align:justify;"><span leaf="">{{条目说明}}</span></p>
<p style="font-size:14px;color:#4d4f46;margin:0;line-height:1.7;text-align:justify;"><span leaf="">{{条目说明}}</span></p>
</section>
</section>
</section>
@@ -624,10 +606,10 @@
<section style="background:#fdfdf8;border:1px solid #bfc1b7;padding:18px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0 0 12px;font-size:10px;line-height:1.6;color:#9ea096;letter-spacing:3px;font-weight:800;"><span leaf="">{{FAQ标签}}</span></p>
<section style="padding:10px 0;border-top:1px solid #bfc1b7;">
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">01 / {{问题}}</span></p>
<p style="margin:0;font-size:16px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">01 / {{问题}}</span></p>
</section>
<section style="padding:10px 0;border-top:1px solid #bfc1b7;border-bottom:1px solid #bfc1b7;">
<p style="margin:0;font-size:15px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">02 / {{问题}}</span></p>
<p style="margin:0;font-size:16px;line-height:1.8;color:#23251d;font-weight:800;"><span leaf="">02 / {{问题}}</span></p>
</section>
</section>
</section>
@@ -654,14 +636,14 @@
<section style="flex:1;padding-bottom:12px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
<span style="display:inline-block;background:#1e1f23;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;"><span leaf="">CASE</span></span>
<h4 style="font-size:15px;font-weight:800;color:#23251d;margin:0;"><span leaf="">{{案例标题}}</span></h4>
<h4 style="font-size:16px;font-weight:800;color:#23251d;margin:0;"><span leaf="">{{案例标题}}</span></h4>
</section>
<p style="font-size:11px;font-weight:600;color:#65675e;letter-spacing:1px;margin:0 0 12px;"><span leaf="">{{行业规模}}</span></p>
<p style="font-size:14px;margin:0 0 14px;color:#4d4f46;line-height:1.7;text-align:justify;"><span leaf="">{{案例描述}}</span></p>
<p style="font-size:15px;margin:0 0 14px;color:#4d4f46;line-height:1.7;text-align:justify;"><span leaf="">{{案例描述}}</span></p>
<section style="text-align:center;margin-bottom:4px;">
<span leaf=""><img src="{{图片URL}}" alt="案例配图" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:6px;border:1px solid #bfc1b7;"></span>
</section>
<p style="font-size:14px;margin:12px 0 0;color:#4d4f46;line-height:1.7;text-align:justify;"><strong style="color:#23251d;"><span leaf="">{{结果总结}}</span></strong></p>
<p style="font-size:15px;margin:12px 0 0;color:#4d4f46;line-height:1.7;text-align:justify;"><strong style="color:#23251d;"><span leaf="">{{结果总结}}</span></strong></p>
</section>
</section>
</section>
@@ -682,7 +664,7 @@
<section style="margin-top:24px;">
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;">
<p style="margin:0;font-size:12px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{标签}}</span></p>
<p style="margin:0;font-size:13px;color:#65675e;font-weight:700;letter-spacing:1px;"><span leaf="">{{标签}}</span></p>
<span style="font-size:11px;color:#9ea096;"><span leaf="">{{分组说明}}</span></span>
</section>
<section style="display:flex;flex-wrap:wrap;gap:10px;">
@@ -706,8 +688,8 @@
```html
<section style="margin-top:24px;">
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:22px 16px;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="font-size:13px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
<section style="background:#fdfdf8;border:1px solid #bfc1b7;border-radius:6px;padding:20px 12px;text-align:center;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="font-size:14px;font-weight:700;color:#23251d;line-height:1.6;margin:0 0 14px;"><span leaf="">{{文末互动引导}}</span></p>
<section style="display:flex;justify-content:center;gap:18px;margin-bottom:14px;flex-wrap:wrap;">
<section style="text-align:center;color:#4d4f46;">
<section style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:#eeefe9;border-radius:6px;border:1px solid #bfc1b7;">
@@ -746,10 +728,10 @@
<section style="padding:18px;border-radius:6px;background:#fdfdf8;border:1px solid #bfc1b7;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<p style="margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:2px;color:#65675e;"><span leaf="">{{标签}}</span></p>
<section style="display:flex;flex-wrap:wrap;gap:8px;">
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#e5e7e0;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#eeefe9;border:1px solid #bfc1b7;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#d4c9b8;border:1px solid #b17816;font-size:12px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·进行中}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1f23;border:1px solid #23251d;font-size:12px;font-weight:700;color:#ffffff;"><span leaf="">{{阶段名·终态}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#e5e7e0;border:1px solid #bfc1b7;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#eeefe9;border:1px solid #bfc1b7;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·默认}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#d4c9b8;border:1px solid #b17816;font-size:13px;font-weight:700;color:#23251d;"><span leaf="">{{阶段名·进行中}}</span></span>
<span style="display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1f23;border:1px solid #23251d;font-size:13px;font-weight:700;color:#ffffff;"><span leaf="">{{阶段名·终态}}</span></span>
</section>
</section>
</section>
@@ -766,13 +748,13 @@
```html
<section style="margin-top:24px;">
<section style="border-radius:6px;overflow:hidden;border:1px solid #23251d;background:#1e1f23;font-family:'IBM Plex Sans',-apple-system,sans-serif;display:flex;align-items:stretch;">
<section style="flex:1;padding:18px 18px 20px;border-right:1px solid rgba(255,255,255,0.08);">
<section style="flex:1;padding:18px 12px 20px;border-right:1px solid rgba(255,255,255,0.08);">
<p style="margin:0 0 8px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.55);font-weight:700;"><span leaf="">{{SUMMARY标签}}</span></p>
<p style="margin:0;font-size:15px;line-height:1.9;color:rgba(255,255,255,0.92);"><span leaf="">{{左侧结论}}</span></p>
<p style="margin:0;font-size:16px;line-height:1.9;color:rgba(255,255,255,0.92);"><span leaf="">{{左侧结论}}</span></p>
</section>
<section style="width:34%;min-width:120px;padding:18px;background:#23251d;display:flex;flex-direction:column;justify-content:center;gap:10px;">
<span style="display:inline-block;padding:4px 8px;background:#eeefe9;color:#23251d;border-radius:4px;font-size:10px;font-weight:800;align-self:flex-start;"><span leaf="">{{NEXT标签}}</span></span>
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(255,255,255,0.76);"><span leaf="">{{右侧说明}}</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:rgba(255,255,255,0.76);"><span leaf="">{{右侧说明}}</span></p>
</section>
</section>
</section>
@@ -788,10 +770,10 @@
```html
<section style="margin-top:24px;">
<section style="background:#1e1f23;border:1px solid #23251d;padding:8px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="border:1px solid rgba(255,255,255,0.16);border-radius:4px;padding:20px 22px;">
<section style="background:#1e1f23;border:1px solid #23251d;padding:4px;box-sizing:border-box;border-radius:6px;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="border:1px solid rgba(255,255,255,0.16);border-radius:4px;padding:20px 14px;">
<p style="margin:0 0 8px;font-size:10px;line-height:1.6;color:#a3a3a3;letter-spacing:4px;font-weight:800;"><span leaf="">{{CLOSING标签}}</span></p>
<p style="margin:0;font-size:16px;line-height:1.9;color:#fafafa;font-weight:700;"><span leaf="">{{结尾金句}}</span></p>
<p style="margin:0;font-size:17px;line-height:1.9;color:#fafafa;font-weight:700;"><span leaf="">{{结尾金句}}</span></p>
</section>
</section>
</section>
@@ -810,8 +792,8 @@
```html
<section style="margin-top:24px;">
<section style="background:#eeefe9;border:1px solid #bfc1b7;border-radius:6px;overflow:hidden;font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
<p style="margin:0;font-size:13px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
<section style="padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
<p style="margin:0;font-size:14px;line-height:1.7;color:#23251d;font-weight:700;"><span leaf="">{{摘要文字}}</span></p>
<span style="font-size:10px;color:#65675e;font-weight:800;letter-spacing:2px;"><span leaf="">{{标签}}</span></span>
</section>
</section>
@@ -831,7 +813,7 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<span style="display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#eeefe9;border:1px solid #bfc1b7;border-radius:999px;">
<span style="width:22px;height:22px;border-radius:50%;background:#1e1f23;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;"><span leaf="">{{头像字}}</span></span>
<span style="font-size:12px;color:#23251d;font-weight:700;"><span leaf="">{{签名文字}}</span></span>
<span style="font-size:13px;color:#23251d;font-weight:700;"><span leaf="">{{签名文字}}</span></span>
</span>
</section>
</section>
@@ -850,19 +832,19 @@
<section style="font-family:'IBM Plex Sans',-apple-system,sans-serif;">
<section style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
<section style="text-align:center;flex-shrink:0;">
<p style="margin:0;font-size:24px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">///</span></p>
<p style="margin:0;font-size:25px;font-weight:800;color:#23251d;line-height:1;letter-spacing:-2px;"><span leaf="">///</span></p>
<p style="margin:0;font-size:8px;font-weight:700;color:#9ea096;letter-spacing:2px;"><span leaf="">END</span></p>
</section>
<span style="width:1px;height:36px;background:#bfc1b7;flex-shrink:0;display:inline-block;overflow:hidden;vertical-align:middle;font-size:0;line-height:0;"><span leaf="">&nbsp;</span></span>
<section>
<p style="margin:0 0 1px;font-size:17px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{结尾标题}}</span></p>
<p style="margin:0 0 1px;font-size:18px;font-weight:800;color:#23251d;letter-spacing:0.2px;"><span leaf="">{{结尾标题}}</span></p>
<p style="margin:0;font-size:11px;font-weight:600;color:#65675e;letter-spacing:1.2px;"><span leaf="">{{结尾说明}}</span></p>
</section>
</section>
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落1}}</span></p>
<p style="margin:0 0 14px;font-size:14px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落2}}</span></p>
<section style="background:#eeefe9;border-radius:6px;padding:16px 18px;border:1px solid #bfc1b7;text-align:center;">
<p style="font-size:15px;color:#23251d;margin:0;line-height:1.6;"><strong style="border-bottom:3px solid #ed7b2f;"><span leaf="">{{最后总结}}</span></strong></p>
<p style="margin:0 0 14px;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落1}}</span></p>
<p style="margin:0 0 14px;font-size:15px;line-height:1.9;text-align:justify;color:#4d4f46;"><span leaf="">{{收尾段落2}}</span></p>
<section style="background:#eeefe9;border-radius:6px;padding:16px 12px;border:1px solid #bfc1b7;text-align:center;">
<p style="font-size:16px;color:#23251d;margin:0;line-height:1.6;"><strong style="border-bottom:3px solid #ed7b2f;"><span leaf="">{{最后总结}}</span></strong></p>
</section>
</section>
</section>
@@ -879,7 +861,7 @@
## 完整文章模板骨架
```html
<section style="max-width:677px;margin:0 auto;padding:8px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
<section style="max-width:677px;margin:0 auto;padding:4px;box-sizing:border-box;background:#fdfdf8;color:#4d4f46;font-family:'IBM Plex Sans',-apple-system,system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;line-height:1.75;">
<!-- 1. 头图卡（组件2 hero-card，唯一一处，不设 margin-top） -->
skills/le-wechat-article/references/themes/theme-red-white.md
+68 -68
View File
@@ -30,11 +30,11 @@
辅助文字色： #9CA3AF（中灰）
分割线色： #E5E7EB
灰竖条： #D6D3D1（灰底引用左竖条）
正文字号： 15px（不可改）
正文字号： 16px（不可改）
行高： 1.8
字间距： 0.5px
最大宽度： 677px
内容区边距： 0 10px（左右各 10px）
内容区边距： 0 4px（左右各 4px，卡片侧边 10~14px）
```
字体栈：`-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif`
@@ -62,17 +62,17 @@
> - 红底白字标签仅在本卡片内使用（视觉焦点），正文中的关键词标签一律用浅红底深红字（组件 7b）
```html
<section style="margin:10px 10px 32px;background:#ffffff;border-radius:12px;box-shadow:0 4px 24px -4px rgba(220,38,38,0.15);padding:28px 24px 22px;overflow:hidden;">
<p style="font-size:42px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
<section style="margin:10px 4px 32px;background:#ffffff;border-radius:12px;box-shadow:0 4px 24px -4px rgba(220,38,38,0.15);padding:24px 14px 18px;overflow:hidden;">
<p style="font-size:43px;color:#DC2626;font-weight:900;margin:0;line-height:0.6;">
<span leaf="">"</span>
</p>
<p style="font-size:16px;font-weight:800;color:#1C1917;margin:12px 0 8px;line-height:1.75;padding-left:4px;">
<p style="font-size:17px;font-weight:800;color:#1C1917;margin:12px 0 8px;line-height:1.75;padding-left:4px;">
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
<span leaf="">{{金句中段}}</span>
<span style="background:#DC2626;color:#FFFFFF;padding:2px 8px;border-radius:4px;"><span leaf="">{{高亮关键词}}</span></span>
<span leaf="">{{金句收尾}}</span>
</p>
<p style="text-align:right;font-size:12px;color:#9CA3AF;margin:8px 0 0;letter-spacing:1px;">
<p style="text-align:right;font-size:13px;color:#9CA3AF;margin:8px 0 0;letter-spacing:1px;">
<span leaf="">—— {{作者名，未知则删整行}}</span>
</p>
</section>
@@ -85,22 +85,22 @@
> 3 个及以上章节时生成。红底白字编号 + 深色标题；展示**精选 3 个核心看点**，不是全量章节列表。
```html
<section style="padding:0 10px 32px;">
<p style="font-size:14px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
<section style="padding:0 8px 32px;">
<p style="font-size:15px;color:#9CA3AF;margin:0 0 14px;letter-spacing:1px;">
<span leaf="">📌 本文看点</span>
</p>
<section style="display:flex;justify-content:space-between;">
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">01</span></p>
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点一}}</span></p>
</section>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">02</span></p>
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点二}}</span></p>
</section>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 12px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:12px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
<p style="font-size:13px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
<p style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:13px;font-weight:800;padding:2px 10px;border-radius:4px;margin:0 0 8px;"><span leaf="">03</span></p>
<p style="font-size:14px;font-weight:700;color:#1C1917;margin:0;"><span leaf="">{{看点三}}</span></p>
</section>
</section>
</section>
@@ -111,7 +111,7 @@
## 组件 4 章节分割线（红色渐变）
```html
<section style="padding:0 10px;">
<section style="padding:0 8px;">
<section style="height:1px;background:linear-gradient(to right,transparent,#FCA5A5,#DC2626,#FCA5A5,transparent);margin:0;">
<span leaf=""><br></span>
</section>
@@ -125,15 +125,15 @@
> 红色实底编号标签 + 英文小标签 + 中文大标题，底部红色实线。第一章 `margin-top:16px`，后续章节 `margin-top:48px`。
```html
<section style="margin-top:48px;margin-bottom:28px;padding:0 10px;">
<section style="margin-top:48px;margin-bottom:28px;padding:0 8px;">
<section style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid #DC2626;">
<section style="display:flex;align-items:center;">
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">01</span></span>
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:19px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">01</span></span>
<section>
<p style="font-size:10px;color:#DC2626;font-weight:700;letter-spacing:3px;margin:0 0 2px;text-transform:uppercase;">
<span leaf="">{{ENGLISH TAG}}</span>
</p>
<h3 style="font-size:18px;font-weight:800;color:#1C1917;margin:0;letter-spacing:0.5px;">
<h3 style="font-size:19px;font-weight:800;color:#1C1917;margin:0;letter-spacing:0.5px;">
<span leaf="">{{中文章节标题}}</span>
</h3>
</section>
@@ -148,7 +148,7 @@
**结语章节变体**（编号用 `∞` 替代数字，英文标签用 `THE END` / `EPILOGUE`）：
```html
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:18px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">∞</span></span>
<span style="display:inline-block;background:#DC2626;color:#FFFFFF;font-size:19px;font-weight:900;padding:4px 14px;border-radius:6px;margin-right:14px;line-height:1.3;"><span leaf="">∞</span></span>
```
---
@@ -160,7 +160,7 @@
**基础段落**：
```html
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
<span leaf="">{{正文内容}}</span>
</p>
```
@@ -168,7 +168,7 @@
**带关键词下划线标记的段落**（推荐默认）：
```html
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
<span leaf="">{{前半句}}</span>
<span style="border-bottom:2px solid #FECACA;font-weight:600;"><span leaf="">{{需要强调的关键短语}}</span></span>
<span leaf="">{{后半句}}</span>
@@ -184,7 +184,7 @@
> `###` 子标题用红色左竖条 + 深色标题，**不套用组件 5 的编号章节样式**（编号章节只给 `##`）。
```html
<p style="font-size:15px;font-weight:800;color:#1C1917;margin:28px 0 14px;padding-left:10px;border-left:3px solid #DC2626;line-height:1.4;">
<p style="font-size:16px;font-weight:800;color:#1C1917;margin:28px 0 14px;padding-left:10px;border-left:3px solid #DC2626;line-height:1.4;">
<span leaf="">{{子标题}}</span>
</p>
```
@@ -238,7 +238,7 @@
### 7f. 行内代码
```html
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:14px;font-weight:600;"><span leaf="">code</span></span>
<span style="background:#F3F4F6;color:#1F2937;padding:2px 6px;border-radius:4px;font-size:15px;font-weight:600;"><span leaf="">code</span></span>
```
---
@@ -248,8 +248,8 @@
### 8a. 粉底左竖条金句引用（视觉焦点最强，核心金句）
```html
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 22px;margin-bottom:24px;">
<p style="font-size:16px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
<section style="background:#FEF2F2;border-radius:0 10px 10px 0;border-left:4px solid #DC2626;padding:18px 14px;margin-bottom:24px;">
<p style="font-size:17px;font-weight:800;color:#991B1B;margin:0;line-height:1.8;">
<span leaf="">「{{核心观点或关键金句}}」</span>
</p>
</section>
@@ -258,8 +258,8 @@
### 8b. 浅红背景引用块（Prompt / 引用内容）
```html
<section style="background:#FEF2F2;border-radius:10px;padding:18px 20px;margin-bottom:24px;border:1px solid #FECACA;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
<section style="background:#FEF2F2;border-radius:10px;padding:18px 14px;margin-bottom:24px;border:1px solid #FECACA;">
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
{{引用内容，可含 7d 下划线等内联样式}}
</p>
</section>
@@ -268,8 +268,8 @@
### 8c. 灰色左竖条引用（轻量旁注、个人吐槽）
```html
<section style="border-left:4px solid #D6D3D1;padding:14px 20px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
<section style="border-left:4px solid #D6D3D1;padding:14px 14px;margin-bottom:24px;background:#FAFAFA;border-radius:0 8px 8px 0;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;text-align:justify;">
<span leaf="">{{轻量旁注内容}}</span>
</p>
</section>
@@ -278,7 +278,7 @@
### 8d. 居中金句分隔（章节间的过渡金句）
```html
<p style="font-size:15px;margin:0 0 24px;text-align:center;color:#DC2626;font-weight:700;letter-spacing:1px;border-top:1px solid #FEE2E2;border-bottom:1px solid #FEE2E2;padding:14px 10px;">
<p style="font-size:16px;margin:0 0 24px;text-align:center;color:#DC2626;font-weight:700;letter-spacing:1px;border-top:1px solid #FEE2E2;border-bottom:1px solid #FEE2E2;padding:14px 10px;">
<span leaf="">{{居中金句}}</span>
</p>
```
@@ -290,8 +290,8 @@
### 9a. 红色提示条（重要提醒、核心结论）
```html
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 20px;margin-bottom:24px;">
<p style="font-size:14px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
<section style="background:#FEF2F2;border-left:4px solid #DC2626;border-radius:0 8px 8px 0;padding:14px 14px;margin-bottom:24px;">
<p style="font-size:15px;font-weight:700;color:#991B1B;margin:0;line-height:1.8;">
<span leaf="">💡 {{重要提示或核心结论}}</span>
</p>
</section>
@@ -301,10 +301,10 @@
```html
<section style="padding:6px 0 4px;margin-bottom:16px;">
<p style="margin-bottom:6px;font-size:12px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<p style="margin-bottom:6px;font-size:13px;font-weight:700;color:#9CA3AF;letter-spacing:1px;">
<span style="color:#DC2626;"><span leaf="">！踩坑提示 🕳</span></span>
</p>
<p style="font-size:14px;color:#374151;margin:0;line-height:1.7;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.7;">
<span leaf="">{{提示内容}}</span>
</p>
</section>
@@ -322,9 +322,9 @@
<section style="margin-bottom:22px;">
<section style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<span style="display:inline-block;background:#DC2626;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;"><span leaf="">STEP 01</span></span>
<span style="font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{步骤标题}}</span></span>
<span style="font-size:16px;font-weight:800;color:#1C1917;"><span leaf="">{{步骤标题}}</span></span>
</section>
<p style="font-size:15px;margin:0 0 16px;color:#374151;line-height:1.8;text-align:justify;">
<p style="font-size:16px;margin:0 0 16px;color:#374151;line-height:1.8;text-align:justify;">
{{步骤内容}}
</p>
</section>
@@ -335,8 +335,8 @@
### 10b. tool-card（工具/条目说明卡）
```html
<section style="background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 4px 16px rgba(220,38,38,0.10);margin-bottom:24px;">
<p style="font-size:14px;color:#374151;margin:0;line-height:1.8;">
<section style="background:#fff;border-radius:12px;padding:16px 14px;box-shadow:0 4px 16px rgba(220,38,38,0.10);margin-bottom:24px;">
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;">
{{条目说明内容}}
</p>
</section>
@@ -351,16 +351,16 @@
```html
<section style="margin-bottom:24px;">
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">1</span></span>
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">2</span></span>
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
<section style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
<p style="font-size:15px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
<span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#DC2626;color:#fff;font-size:13px;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px;"><span leaf="">3</span></span>
<p style="font-size:16px;color:#374151;margin:0;line-height:1.8;flex:1;"><span leaf="">{{列表项内容}}</span></p>
</section>
</section>
```
@@ -370,9 +370,9 @@
```html
<section style="margin-bottom:14px;">
<p style="margin:0 0 6px;">
<span style="display:inline-block;font-size:14px;font-weight:700;color:#991B1B;background:#FEE2E2;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#DC2626;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
<span style="display:inline-block;font-size:15px;font-weight:700;color:#991B1B;background:#FEE2E2;padding:3px 10px;border-radius:999px;"><span style="display:inline-block;width:6px;height:6px;background:#DC2626;border-radius:50%;margin-right:5px;vertical-align:middle;"><span leaf=""><br></span></span><span leaf="">{{要点标题}}</span></span>
</p>
<p style="font-size:14px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
<p style="font-size:15px;color:#4B5563;margin:0;line-height:1.7;text-align:justify;">
<span leaf="">{{要点说明}}</span>
</p>
</section>
@@ -387,8 +387,8 @@
<section style="width:2px;background:#FEE2E2;flex:1;margin-top:4px;min-height:44px;"><span leaf=""><br></span></section>
</section>
<section style="flex:1;padding-bottom:12px;">
<p style="margin:0 0 6px;font-size:15px;font-weight:800;color:#1C1917;"><span leaf="">{{节点标题}}</span></p>
<p style="font-size:15px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
<p style="margin:0 0 6px;font-size:16px;font-weight:800;color:#1C1917;"><span leaf="">{{节点标题}}</span></p>
<p style="font-size:16px;margin:0;color:#374151;line-height:1.8;text-align:justify;">{{节点内容}}</p>
</section>
</section>
```
@@ -403,13 +403,13 @@
```html
<section style="display:flex;margin-bottom:24px;padding:0;">
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 12px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:29px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
</section>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 16px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:28px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:12px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:18px 12px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:29px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:13px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
</section>
</section>
```
@@ -419,15 +419,15 @@
```html
<section style="display:flex;margin-bottom:24px;padding:0;">
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
</section>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;margin-right:8px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
</section>
<section style="flex:1;background:#FEF2F2;border-radius:10px;padding:16px 10px;text-align:center;border:1px solid #FEE2E2;">
<p style="font-size:24px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:25px;font-weight:900;color:#DC2626;margin:0 0 4px;line-height:1;"><span leaf="">{{数字}}</span></p>
<p style="font-size:11px;color:#9CA3AF;margin:0;"><span leaf="">{{说明}}</span></p>
</section>
</section>
@@ -437,7 +437,7 @@
```html
<section style="margin-bottom:24px;overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<table style="width:100%;border-collapse:collapse;font-size:15px;">
<thead>
<tr>
<th style="background:#DC2626;color:#fff;font-weight:700;padding:8px 12px;text-align:left;"><span leaf="">{{列标题}}</span></th>
@@ -465,13 +465,13 @@
浅红底深红字（默认）：
```html
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:12px;font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
<span style="display:inline-block;background:#FEE2E2;color:#991B1B;font-size:13px;font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
```
红色描边（轻量）：
```html
<span style="display:inline-block;border:1px solid #DC2626;color:#DC2626;font-size:12px;font-weight:600;padding:1px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
<span style="display:inline-block;border:1px solid #DC2626;color:#DC2626;font-size:13px;font-weight:600;padding:1px 10px;border-radius:4px;margin-right:6px;"><span leaf="">标签名</span></span>
```
---
@@ -489,7 +489,7 @@
带说明文字时，图片 `margin-bottom` 改 `8px`，其后加：
```html
<p style="font-size:12px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
<p style="font-size:13px;color:#9CA3AF;text-align:center;margin:0 0 24px;">
<span leaf="">— {{图片说明}}</span>
</p>
```
@@ -501,7 +501,7 @@
## 组件 15 END 结尾分割线
```html
<section style="padding:0 10px;">
<section style="padding:0 8px;">
<section style="text-align:center;margin:0 0 32px;">
<section style="display:flex;align-items:center;justify-content:center;">
<span style="height:2px;width:60px;background:linear-gradient(to right,transparent,#DC2626);margin-right:12px;"><span leaf=""><br></span></span>
@@ -519,14 +519,14 @@
> 固定签名文案以正文段落形式呈现；有个人名片/引导图素材才放图，无素材整块删。
```html
<section style="padding:0 10px;">
<section style="padding:0 8px;">
<section style="text-align:center;margin-bottom:10px;border-radius:12px;overflow:hidden;">
<span leaf=""><img src="{{个人名片或引导图URL，无则删本 section}}" style="max-width:100%;height:auto;display:block;margin:0 auto;"></span>
</section>
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
</p>
<p style="margin-bottom:20px;font-size:15px;line-height:1.8;text-align:justify;">
<p style="margin-bottom:20px;font-size:16px;line-height:1.8;text-align:justify;">
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
<strong style="color:#DC2626;"><span leaf="">点赞、在看、转发</span></strong>
<span leaf="">三连，我们下篇见。</span>
skills/le-wechat-article/references/themes/theme-warm-orange.md
+639
View File
@@ -0,0 +1,639 @@
# 公众号排版组件库 —— 暖橙风
> **使用说明**：本组件库为「暖橙风」主题（主题 ID：`theme-warm-orange`，由 `assets/theme-previews/theme-warm-orange.html` 区块库转换而来），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
>
> **设计风格**：温暖疗愈系排版。暖橙主色 + 浅杏衬底 + 大圆角白卡 + 轻柔和阴影，圆点装饰与点状虚线贯穿全文，像冬日午后的一杯热橙茶。适合品牌发布、产品介绍、心理陪伴、生活方式类文章。
>
> **公众号平台限制须知**：
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute/sticky`、`@media`/`@keyframes`、`display:grid`、CSS 变量
> - ❌ 禁用 `form`/`button`/`svg`/`iframe`/`video` 等标签；按钮一律用带样式的 `<span>` 模拟
> - ✅ 支持内联 `style`、`<section>`/`<p>`/`<span>`/`<figure>`/`<figcaption>`/`<img>`/`<hr>`/`<code>`/`<strong>` 等基础标签
>
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
> - 所有文字节点必须包 `<span leaf="">文字</span>`；装饰性空元素（圆点、胶带短条）内部必须放 `<span leaf=""><br></span>`，否则微信粘贴会剥掉样式
> - 所有字号 ≤24px（封面主标题、CTA 大字也不例外）
> - 组件不依赖任何 class/id，全部视觉写在元素自身 `style` 里
> - `<table>` 仅用于真实数据表格（字段表/对照表），不做布局骨架
---
## 一、设计变量速查表
```
主题名： 暖橙风（theme-warm-orange）
主色调： #EE7A2D（暖橙——按钮、圆点、编号、CTA 底色）
强调色： #C2541A（深橙棕——标签文字、小注、署名、引导语）
装饰色： #F9E3CE（浅杏——衬底、胶囊标签、点状分隔线）
背景色： #FDFBF7（暖白微杏——页面底色）
正文色： #3D3229（暖深棕——正文、标题）
标题色： #3D3229（同正文，靠字重区分层级）
正文关键词下划线：#F9C9A3（杏橙，权威值 border-bottom:2px solid #F9C9A3）
点状分隔线： 2px dotted #F9E3CE（章内）/ 2px dotted #EE7A2D（章间）
轻柔和阴影： 0 6px 18px rgba(238,122,45,0.10)（白卡标配）
0 4px 12px rgba(238,122,45,0.25)（按钮）
0 10px 24px rgba(238,122,45,0.28)（主 CTA）
圆角体系： 大圆角 14~24px（卡片）；999px（胶囊/圆徽章/按钮）
渐变衬底： linear-gradient(180deg,#F9E3CE,#FDFBF7)（陪伴/邀约卡专用）
正文字号： 16px（行高 2，两端对齐）
小字/标签： 13~14px
标题字号： 18~21px（开篇不放大字主标题，见组件 2 导语条）
设计技巧 TAG： 暖色卡片化、圆角呼吸感、柔和点缀、浅衬底分层
风格特征 TAG： 温暖、亲和、疗愈、积极
适用场景 TAG： 品牌发布、产品介绍、心理陪伴、生活方式
字体偏好： pingfang
```
字体栈：`'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif`
---
## 二、组件完整 HTML
按组件族分组，编号全文唯一。共 36 个编号组件（其中 34 个由预览区块转换 + 全局容器 + 行内样式组）。
### 组件 1 全局容器
```html
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
<!-- 所有组件放在这里 -->
</section>
```
### 组件族 A：封面与开篇（hero）
#### 组件 2 暖阳导语条（开篇轻量形态）
> **文案策略（先读，比代码重要）**：
> - 公众号后台已承担标题、封面图、账号名三样，开篇不再重复——本组件**不放大字主标题、不放头图、不放公司落款**；原头图并入正文首个图位（圆角大图卡 19）
> - 导语和外标题是**两层**，视角错开——外标题卖「为什么点开」，导语卖「这篇讲什么、读完得到什么」
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；从文章第一段或核心论点提炼一句
```html
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">栏目标签占位</span></span>
<p style="margin:12px 0 0;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">开篇导语占位：一句话说清本篇讲什么、读者能带走什么，与外标题错开视角。</span></p>
</section>
```
#### 组件 3 品牌叙事开篇卡
```html
<section style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="display:inline-block;font-size:14px;font-weight:bold;color:#C2541A;vertical-align:middle;"><span leaf="">开篇导语占位</span></span>
<p style="margin:12px 0 14px;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">叙事导语占位：这里放两三行品牌故事或情绪铺垫文字，语速放慢、句子放短，让读者先安静下来，再进入正文的说明部分。</span></p>
<span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">按钮文案占位</span></span>
</section>
```
### 组件族 B：目录与导航（navigation）
#### 组件 4 圆点目录卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">目录标题占位</span></p>
<p style="margin:0 0 12px;font-size:13px;color:#C2541A;"><span leaf="">目录说明占位：本篇包含的小节导航</span></p>
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">01</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位一</span></span></p>
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">02</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位二</span></span></p>
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">03</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位三</span></span></p>
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">04</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位四</span></span></p>
</section>
```
#### 组件 5 标签索引带
```html
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 12px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">索引说明占位：本篇关键词索引</span></p>
<p style="margin:0 0 10px;font-size:14px;line-height:2.2;">
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;"><span leaf="">标签占位一</span></span>
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位二</span></span>
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位三</span></span>
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位四</span></span>
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位五</span></span>
</p>
</section>
```
### 组件族 C：标题与分隔（title）
#### 组件 6 圆点章节标题
```html
<section style="margin:0;padding:6px 2px;">
<p style="margin:0 0 8px;font-size:21px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EE7A2D;margin-right:12px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位：正文从这里开始</span></span></p>
<p style="margin:0;padding-bottom:10px;border-bottom:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节引导语占位：一句话说明本章内容</span></p>
</section>
```
#### 组件 7 暖章编号标题
```html
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 6px;">
<span style="display:inline-block;margin-right:12px;font-size:25px;font-weight:bold;color:#EE7A2D;vertical-align:middle;"><span leaf="">01</span></span>
<span style="display:inline-block;font-size:20px;font-weight:bold;color:#3D3229;vertical-align:middle;"><span leaf="">章节标题占位一</span></span>
</p>
<p style="margin:0;padding-top:8px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节摘要占位：编号章节的一句摘要</span></p>
</section>
```
#### 组件 8 暖点分隔线
```html
<hr style="border:none;border-top:2px dotted #EE7A2D;margin:10px 30px;">
```
### 组件族 D：正文段落（paragraph）
#### 组件 9 呼吸正文段落
```html
<section style="margin:0;padding:4px 6px;">
<p style="margin:0 0 16px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：这里是放松呼吸的正文区域，行距放宽、句子放短。占位文字用来展示段落节奏与留白比例，两到三行为一组，读起来不赶时间。</span></p>
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：第二段承接第一段的话题继续展开，保持同样的字重与行高，让整页像一杯慢慢降温的热茶，信息清晰但没有压迫感。</span></p>
</section>
```
#### 组件 10 暖点引导段落
```html
<section style="margin:0;padding:4px 6px;">
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;margin-right:6px;"><span leaf="">引导短语占位</span></span><span leaf="">正文占位：开头用一枚浅杏色的高亮短语轻轻拉住视线，后面的文字自然展开，用来说明这一段的重点句式与节奏。</span></p>
</section>
```
#### 组件 11 浅杏底纹强调段
```html
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">重点段落占位：需要读者慢下来多看一眼的内容放在这里。浅杏衬底加左侧暖橙竖线，强调而不喊叫，适合放核心观点或安抚性的说明。</span></p>
</section>
```
#### 组件 12 行内暖色样式（4 种 + 使用原则）
### 12a. 杏橙下划线（正文关键词默认标记，theme-index 权威值）
```html
<span style="border-bottom:2px solid #F9C9A3;font-weight:600;"><span leaf="">下划线标记的关键词</span></span>
```
### 12b. 暖橙加粗（核心概念、品牌名、关键结论）
```html
<strong style="color:#EE7A2D;"><span leaf="">暖橙加粗强调</span></strong>
```
### 12c. 浅杏底标签（段内锚点短语，每段 ≤1 处）
```html
<span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;"><span leaf="">关键词标签</span></span>
```
### 12d. 行内代码（配置项、命令）
```html
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;"><span leaf="">配置项占位</span></code>
```
**使用原则**：
1. 正文关键词逐段标记用 12a 下划线（每段 1~3 处，词组 4~15 字）
2. 12b 暖橙加粗只给核心概念/品牌名，全文 ≤5 处
3. 12c 浅杏底标签是段落锚点，每段最多 1 处
4. 一段文字内不同时使用超过 2 种行内样式
### 组件族 E：引用与提示（quote / notice）
#### 组件 13 热茶引语卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 8px;font-size:25px;line-height:1;color:#EE7A2D;font-weight:bold;"><span leaf="">“</span></p>
<p style="margin:0 0 14px;font-size:17px;line-height:1.9;color:#3D3229;"><span leaf="">引用内容占位：一段值得慢慢读的话放在这里，像热茶冒着的一缕气，轻轻落在页面中间。</span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
<p style="margin:0;font-size:14px;color:#C2541A;text-align:right;"><span leaf="">—— 引用署名占位</span></p>
</section>
```
#### 组件 14 暖心提示卡（信息提示）
```html
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #F9E3CE;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.08);">
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">提示标签占位</span></span></p>
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提示说明占位：温和的信息提示放在这里，例如阅读建议、氛围说明或背景补充，语气保持轻柔。</span></p>
</section>
```
#### 组件 15 温和提醒卡（注意提醒）
```html
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:18px;">
<p style="margin:0 0 6px;font-size:15px;font-weight:bold;color:#C2541A;"><span leaf="">注意标签占位</span></p>
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提醒说明占位：需要读者留意但不必紧张的内容，用虚线暖框表达，提醒而不吓人。</span></p>
</section>
```
#### 组件 16 陪伴留声卡（心理陪伴语）
```html
<section style="margin:0;padding:18px 14px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:22px;">
<p style="margin:0 0 8px;font-size:14px;color:#C2541A;"><span leaf="">陪伴小语占位 ♡</span></p>
<p style="margin:0 0 12px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">陪伴语句占位：写给此刻正在阅读的人的一句话，承认情绪、给出陪伴，不做评判。</span></p>
<p style="margin:0;font-size:13px;color:#C2541A;text-align:right;"><span leaf="">落款占位 · 留声说明占位</span></p>
</section>
```
### 组件族 F：列表（list）
#### 组件 17 圆点清单卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">清单标题占位</span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位一：短句说明</span></span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位二：短句说明</span></span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位三：短句说明</span></span></p>
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位四：短句说明</span></span></p>
</section>
```
#### 组件 18 心愿任务清单
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">任务清单标题占位</span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位一（已完成占位）</span></span></p>
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位二（已完成占位）</span></span></p>
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:15px;border-radius:50%;border:2px solid #EE7A2D;background:#FDFBF7;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位三（待完成占位）</span></span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">完成度说明占位：示例数字 2 / 3</span></p>
</section>
```
### 组件族 G：媒体（media）
#### 组件 19 圆角大图卡
```html
<figure style="margin:0;padding:14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<img src="https://placehold.orence.net/640x400/EE7A2D/FDFBF7?text=Photo+Placeholder" alt="正文配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
<figcaption style="margin:12px 6px 2px;padding-top:10px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;text-align:center;"><span leaf="">图片说明占位：图注文字放这里</span></figcaption>
</figure>
```
#### 组件 20 拍立得图文卡（生活方式向）
```html
<figure style="margin:0;padding:16px;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 20px rgba(238,122,45,0.12);">
<span style="display:block;width:72px;height:14px;margin:0 auto 12px;border-radius:999px;background:#F9E3CE;"><span leaf=""><br></span></span>
<img src="https://placehold.orence.net/520x340/C2541A/F9E3CE?text=Life+Moment" alt="生活方式配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
<figcaption style="margin:12px 4px 0;">
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span leaf="">图注标题占位</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">图注说明占位：写一句和图片心情一致的话。</span></p>
</figcaption>
</figure>
```
### 组件族 H：代码（code）
#### 组件 21 浅杏代码块
```html
<section style="margin:0;background:#F9E3CE;border-radius:18px;overflow:hidden;">
<p style="margin:0;padding:10px 18px;font-size:13px;color:#C2541A;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">代码说明占位 · 代码块标题占位</span></span></p>
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border-radius:0 0 18px 18px;">
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;"><span style="color:#C2541A;"><span leaf="">// 说明注释占位</span></span><br><span leaf="">const warmConfig = {</span><br><span leaf=">&nbsp;&nbsp;fieldA: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位一"</span></span><span leaf="">,</span><br><span leaf=">&nbsp;&nbsp;fieldB: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位二"</span></span><br><span leaf="">};</span></code>
</section>
</section>
```
### 组件族 I：数据（data）
#### 组件 22 轻盈指标条
```html
<section style="margin:0;padding:4px;">
<section style="margin:0 0 10px;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">82%</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位一 · 指标说明占位</span></span></p>
</section>
<section style="margin:0 0 10px;padding:12px 12px;background:#FFFFFF;border-radius:14px;box-shadow:0 4px 12px rgba(238,122,45,0.10);">
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">1200+</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位二 · 指标说明占位</span></span></p>
</section>
<section style="margin:0;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">4.8</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位三 · 指标说明占位</span></span></p>
</section>
</section>
```
#### 组件 23 字段数据表（真实表格语义专用）
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 6px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">表格标题占位</span></p>
<p style="margin:0 0 14px;font-size:13px;color:#C2541A;"><span leaf="">表格说明占位：字段与示例数据的对照</span></p>
<table style="width:100%;border-collapse:collapse;font-size:14px;color:#3D3229;">
<tr>
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位一</span></td>
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位二</span></td>
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位三</span></td>
</tr>
<tr>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 01</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 02</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 03</span></td>
</tr>
<tr>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 04</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 05</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 06</span></td>
</tr>
<tr>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 07</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 08</span></td>
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 09</span></td>
</tr>
</table>
</section>
```
### 组件族 J：对比（compare）
#### 组件 24 前后对照卡
```html
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照标题占位</span></p>
<section style="margin:0 0 10px;padding:14px 12px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;">
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整前占位</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述原来的状态或做法。</span></p>
</section>
<p style="margin:0 0 10px;text-align:center;font-size:17px;color:#EE7A2D;font-weight:bold;"><span leaf="">↓</span></p>
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整后占位</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述变化之后的状态或感受。</span></p>
</section>
</section>
```
#### 组件 25 轻重对照清单
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照清单标题占位</span></p>
<section style="margin:0 0 14px;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">优势组标签占位</span></p>
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位一</span></p>
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位二</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位三</span></p>
</section>
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:14px;">
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">留意组标签占位</span></p>
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位一</span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位二</span></p>
</section>
</section>
```
### 组件族 K：流程（process）
#### 组件 26 三步流程圆点卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">流程标题占位</span></p>
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">1</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位一</span></span></p>
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第一步先做这件事。</span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">2</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位二</span></span></p>
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第二步接着做这件事。</span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">3</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位三</span></span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第三步收尾并确认。</span></p>
</section>
```
#### 组件 27 暖色时间线
```html
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">时间线标题占位</span></p>
<section style="margin:0;padding:2px 0 2px 16px;border-left:2px dotted #EE7A2D;">
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位一</span></span></p>
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段发生了什么。</span></p>
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位二</span></span></p>
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段的心情或变化。</span></p>
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位三</span></span></p>
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：时间线在这里收束。</span></p>
</section>
</section>
```
### 组件族 L：问答（faq）
#### 组件 28 问答呼吸卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">常见问答标题占位</span></p>
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位一</span></span></p>
<section style="margin:0 0 18px;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：用平稳的语气回答第一个问题。</span></p>
</section>
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位二</span></span></p>
<section style="margin:0;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：第二个问题的回答同样保持柔和。</span></p>
</section>
</section>
```
### 组件族 M：资源（resource）
#### 组件 29 延伸阅读暖卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">延伸阅读标题占位</span></p>
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位一</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位二</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
<p style="margin:0;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位三</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
</section>
```
#### 组件 30 资料引导条
```html
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:22px;">
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:34px;height:34px;line-height:34px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:16px;font-weight:bold;text-align:center;margin-right:12px;vertical-align:middle;"><span leaf="">↓</span></span><span style="vertical-align:middle;"><span leaf="">资料说明占位：配套资料与获取方式说明。</span></span></p>
<p style="margin:0;"><span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:15px;font-weight:bold;"><span leaf="">获取方式占位</span></span></p>
</section>
```
### 组件族 N：作者（author）
#### 组件 31 作者暖名卡
```html
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
<img src="https://placehold.orence.net/140x140/F9E3CE/EE7A2D?text=Avatar" alt="作者头像占位" style="max-width:100%;height:auto;display:block;margin:0 auto;width:84px;border-radius:50%;border:3px solid #F9E3CE;">
<p style="margin:12px 0 2px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">作者名占位</span></p>
<p style="margin:0 0 10px;font-size:13px;color:#C2541A;"><span leaf="">作者身份占位 · 领域占位</span></p>
<p style="margin:0 0 14px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">作者简介占位：一句话介绍作者的兴趣与写作方向。</span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 14px;">
<span style="display:inline-block;padding:8px 28px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">关注按钮占位</span></span>
</section>
```
#### 组件 32 联系方式卡
```html
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">联系标题占位</span></p>
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位一：联系信息占位一</span></span></p>
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位二：联系信息占位二</span></span></p>
<p style="margin:0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位三：联系信息占位三</span></span></p>
</section>
```
### 组件族 O：行动号召（cta）
#### 组件 33 暖橙主行动卡
```html
<section style="margin:0;padding:24px 14px;background:#EE7A2D;border-radius:24px;box-shadow:0 10px 24px rgba(238,122,45,0.28);text-align:center;">
<p style="margin:0 0 8px;font-size:23px;line-height:1.5;font-weight:bold;color:#FFFFFF;"><span leaf="">行动主标题占位</span></p>
<p style="margin:0 0 18px;font-size:14px;line-height:1.8;color:#FDFBF7;"><span leaf="">行动说明占位：一句话说清楚下一步做什么，语气积极。</span></p>
<span style="display:inline-block;padding:11px 34px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:16px;font-weight:bold;box-shadow:0 4px 12px rgba(61,50,41,0.15);"><span leaf="">按钮文案占位</span></span>
<p style="margin:12px 0 0;font-size:13px;color:#F9E3CE;"><span leaf="">行动备注占位：补充说明一行</span></p>
</section>
```
### 组件族 P：结尾（ending）
#### 组件 34 温暖收束卡（结语总结）
```html
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
<p style="margin:0 0 6px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">结语标签占位</span></span></p>
<p style="margin:0 0 14px;font-size:20px;font-weight:bold;color:#3D3229;"><span leaf="">收束标题占位</span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位一</span></span></p>
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位二</span></span></p>
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位三</span></span></p>
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 12px;">
<p style="margin:0;font-size:14px;line-height:1.8;color:#C2541A;"><span leaf="">结语文字占位：一句收尾的温暖话，像把杯子轻轻放回桌上。</span></p>
</section>
```
#### 组件 35 互动留言区
```html
<section style="margin:0;padding:20px 14px;background:#F9E3CE;border-radius:22px;text-align:center;">
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">互动问题占位</span></p>
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">互动引导占位：把问题抛给读者，邀请他们在留言区聊聊。</span></p>
<p style="margin:0 0 14px;">
<span style="display:inline-block;padding:7px 22px;margin:0 6px 8px 0;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位一</span></span>
<span style="display:inline-block;padding:7px 22px;margin:0 0 8px 6px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位二</span></span>
</p>
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">留言引导占位：点赞占位 · 在看占位 · 分享占位</span></p>
</section>
```
#### 组件 36 再会祝福尾签（全文最后一块）
```html
<section style="margin:0;padding:22px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
<p style="margin:0 0 8px;font-size:13px;color:#EE7A2D;letter-spacing:6px;"><span leaf="">· · ·</span></p>
<p style="margin:0 0 6px;font-size:17px;line-height:1.8;font-weight:bold;color:#3D3229;"><span leaf="">祝福语占位：愿你今天也被温柔对待</span></p>
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">结尾落款占位 · 下期预告占位</span></p>
</section>
```
---
## 三、完整文章模板骨架
```html
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
<!-- 1. 开篇：暖阳导语条（组件 2）——全文第一块；标签 + 一句话导语，不放大字主标题/头图/落款 -->
<!-- 2. 目录：圆点目录卡（组件 4）——【位置铁律】必须紧跟导语条之下、开篇叙事之前，读者先拿到全文地图；章节多时可加 标签索引带（组件 5）做关键词导航 -->
<!-- 3. 开篇叙事：品牌叙事开篇卡（组件 3）——情绪铺垫 + 行动按钮；生活叙事类可改用 热茶引语卡（组件 13）开场 -->
<!-- 4. 第一章：暖章编号标题（组件 7，重点章）或 圆点章节标题（组件 6，轻量章） -->
<!-- 章内装配：呼吸正文段落 9（每段标 1~3 处行内下划线 12a）+ 浅杏底纹强调段 11 -->
<!-- 按内容插入：引用 13 / 提示 14~16 / 清单 17~18 / 媒体 19~20 / 代码 21 / 数据 22~23 / 对比 24~25 / 流程 26~27 / FAQ 28 -->
<!-- 5. 第 2~N 章：编号递增；章与章之间用 暖点分隔线（组件 8）轻分隔，保持呼吸感 -->
<!-- 6. 资源位（可选）：延伸阅读暖卡 29 / 资料引导条 30——放结语之前 -->
<!-- 7. 结语：温暖收束卡（组件 34）——收束要点 + 温暖收尾 -->
<!-- 8. 行动号召：暖橙主行动卡（组件 33）——品牌发布/产品介绍必放；生活叙事可省 -->
<!-- 9. 互动：互动留言区（组件 35）——抛出互动问题 -->
<!-- 10. 作者：作者暖名卡（组件 31），需要时补 联系方式卡（组件 32） -->
<!-- 11. 尾签：再会祝福尾签（组件 36）——全文最后一块，轻轻收笔 -->
</section>
```
**骨架顺序铁律**：圆点目录卡（组件 4）**必须紧跟暖阳导语条之下**，在开篇叙事和任何正文之前；暖橙主题整体是「情绪开篇优先、章节弱分隔、结尾三层收束（收束卡 → 互动 → 祝福尾签）」的低压迫节奏，章节之间靠留白与暖点分隔线过渡，不堆重色块。
---
## 四、文章类型 → 组件组合配方表
| 文章类型 | 核心组件组合 | 点缀组件 |
|---|---|---|
| 新闻简报 | 导语条 2 + 目录 4 + 圆点清单卡 17 + 轻盈指标条 22 + 前后对照卡 24 + 温暖收束卡 34 | 标签索引带 5、暖点分隔线 8 |
| 产品测评 | 导语条 2 + 目录 4 + 拍立得图文卡 20 + 轻重对照清单 25 + 字段数据表 23 + 问答呼吸卡 28 | 轻盈指标条 22、前后对照卡 24、暖橙主行动卡 33 |
| 实践复盘 | 导语条 2 + 目录 4 + 品牌叙事开篇卡 3 + 暖色时间线 27 + 前后对照卡 24 + 心愿任务清单 18 + 温暖收束卡 34 | 陪伴留声卡 16、浅杏底纹强调段 11 |
| 技术教程 | 导语条 2 + 目录 4 + 暖章编号标题 7 + 三步流程圆点卡 26 + 浅杏代码块 21 + 行内代码 12d + 资料引导条 30 | 暖心提示卡 14、温和提醒卡 15、延伸阅读暖卡 29 |
| 生活叙事 | 导语条 2 + 品牌叙事开篇卡 3 + 拍立得图文卡 20 + 热茶引语卡 13 + 呼吸正文段落 9 + 互动留言区 35 + 再会祝福尾签 36 | 圆点清单卡 17、陪伴留声卡 16 |
所有类型共用固定结构：全局容器 1 + 导语条 2 + 目录 4（紧跟封面）+ 章节标题 6/7 + 结尾三件套 34/35/36 中至少收束卡 34 与尾签 36。一篇文章点缀组件种类 ≤3，保持暖而不闹。
---
## 五、Markdown → 暖橙风排版 映射规则表
| Markdown 元素 | 对应组件 | 说明 |
|---|---|---|
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句，视角与外标题错开，不复述关键词 |
| 文章开头 `> 引言` | 品牌叙事开篇卡 3（叙事向）/ 热茶引语卡 13（金句向） | 情绪铺垫 |
| `## 章节标题` | 暖章编号标题 7（重点章）/ 圆点章节标题 6（轻量章） | 编号 01/02/03 递增 |
| `### 小节标题` | 圆点章节标题 6 复用 | 引导语一行点明小节 |
| 普通段落 | 呼吸正文段落 9 | 每段主动标 1~3 处下划线（12a） |
| 段首引导短语 | 暖点引导段落 10 | 浅杏高亮短语开头 |
| 核心观点段 | 浅杏底纹强调段 11 | 浅杏衬底 + 暖橙左竖线 |
| `**加粗文字**` | 行内 12b 暖橙加粗 | 核心概念/品牌名，全文 ≤5 处 |
| `==高亮文字==` | 行内 12c 浅杏底标签 | 每段 ≤1 处 |
| `<u>下划线</u>` / `++文字++` | 行内 12a 杏橙下划线 | `border-bottom:2px solid #F9C9A3`，正文关键词默认标记 |
| `> 引用段落`（金句） | 热茶引语卡 13 | 大引号 + 点线 + 署名 |
| 提示/注意/陪伴语 | 暖心提示卡 14 / 温和提醒卡 15 / 陪伴留声卡 16 | 信息/注意/心理陪伴三档 |
| `- 无序列表` | 圆点清单卡 17 | 暖橙圆点 |
| `1. 2. 3. 有序列表` | 三步流程圆点卡 26（步骤型） | 圆徽章编号 |
| 任务/打卡清单 | 心愿任务清单 18 | ✓ 已完成 / 空心待完成 |
| ` ``` 多行代码块 ``` ` | 浅杏代码块 21 | 每行 `<br>` 分隔，行文字包 leaf，缩进用 `&nbsp;` |
| 行内 `` `code` `` | 行内 12d 行内代码 | 浅杏底圆角 |
| Markdown 表格 | 字段数据表 23 | 仅真实表格语义；表头浅杏底 |
| 数据/指标 | 轻盈指标条 22 | 大数字 + 名称 + 说明 |
| 前后变化对比 | 前后对照卡 24 | 调整前 → 调整后 |
| 优劣/留意对比 | 轻重对照清单 25 | 优势组 ✓ / 留意组 — |
| 流程（3 步） | 三步流程圆点卡 26 | 点线分隔步骤 |
| 递进/时间脉络 | 暖色时间线 27 | 暖橙点状竖线 |
| FAQ 问答 | 问答呼吸卡 28 | 「问」徽章 + 浅杏答案块 |
| `![](图片)` | 圆角大图卡 19 / 拍立得图文卡 20（生活感） | 原图代码保留，占位图按语义配 alt |
| 延伸阅读 | 延伸阅读暖卡 29 | 暖点 + 分类小注 |
| 资料/获取方式 | 资料引导条 30 | ↓ 圆徽章 + 白底按钮 |
| `---` 分隔线 | 暖点分隔线 8 | 章间暖橙点线 |
| 文末 | 温暖收束卡 34 + 暖橙主行动卡 33 + 互动留言区 35 + 再会祝福尾签 36 | 按骨架顺序装配，尾签必放最后 |
skills/le-wechat-article/references/themes/theme-zen-whitespace.md
+42 -42
View File
@@ -31,12 +31,12 @@
标签底色： #EEF3F0（极浅墨绿底，胶囊标签用）
标签文字色： #3D5046（深墨绿，胶囊标签文字）
正文字号： 15px
正文字号： 16px
行高： 1.9
字间距： 0.3px
段落间距： 26px+
章节上下留白： 64px+
内容区边距： 0 16px（左右各 16px，比红白系更宽）
内容区边距： 0 10px（左右各 10px，留白气质靠行距与上下间距保持）
标题字体： 'Noto Serif SC', Georgia, 'Times New Roman', serif（衬线）
正文字体： -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
@@ -61,11 +61,11 @@
> 纯白底，上下各一条 1px 细线（`#E8E8E8`），衬线字体大字金句居中，右下署名。无边框、无阴影、无色块——完全靠留白和细线传递气质。
```html
<section style="margin: 32px 16px 48px;padding: 40px 24px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 19px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
<section style="margin: 32px 10px 48px;padding: 28px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:20px;font-weight: 600;color: #2B2B2B;margin: 0 0 28px;line-height: 1.85;letter-spacing: 0.8px;">
<span leaf="">这里放开篇金句，衬线字体自带书卷气，</span><span leaf="">留白让文字自己呼吸。</span>
</p>
<p style="font-size: 12px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
<p style="font-size:13px;color: #A3A3A3;margin: 0;letter-spacing: 1.5px;">
<span leaf="">—— 作者名（按文章作者/主题而定）</span>
</p>
</section>
@@ -80,7 +80,7 @@
> 无色块目录，用细线分隔，数字编号低调呈现。三列等宽，纯文字 + 细线底边。
```html
<section style="padding: 0 16px 48px;">
<section style="padding: 0 10px 48px;">
<p style="font-size: 11px;color: #A3A3A3;margin: 0 0 20px;letter-spacing: 2px;text-transform: uppercase;">
<span leaf="">本文脉络</span>
</p>
@@ -88,15 +88,15 @@
<section style="display: flex;">
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">01</span></p>
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</span></p>
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第一个要点</span></p>
</section>
<section style="flex: 1;padding: 18px 12px 18px 0;border-bottom: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8;margin-right: 16px;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">02</span></p>
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</span></p>
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第二个要点</span></p>
</section>
<section style="flex: 1;padding: 18px 0 18px 0;border-bottom: 1px solid #E8E8E8;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;margin: 0 0 6px;letter-spacing: 1px;"><span leaf="">03</span></p>
<p style="font-size: 13px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</span></p>
<p style="font-size:14px;color: #2B2B2B;margin: 0;font-weight: 500;line-height: 1.5;"><span leaf="">第三个要点</span></p>
</section>
</section>
</section>
@@ -110,7 +110,7 @@
> 极细线 + 超大上下 margin，靠留白分层，不依赖视觉装饰。
```html
<section style="padding: 0 16px;">
<section style="padding: 0 10px;">
<section style="height: 1px;background: #E8E8E8;margin: 64px 0 0;">
<span leaf=""><br></span>
</section>
@@ -124,11 +124,11 @@
> 英文小标签（极小号，墨绿，大字间距）+ 衬线中文大标题 + 标题下方一条短细线（40px 宽，墨绿）。编号低调嵌入英文标签前。无色块，无粗边框。
```html
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 16px;">
<section style="margin-top: 64px;margin-bottom: 32px;padding: 0 10px;">
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 4px;margin: 0 0 10px;text-transform: uppercase;">
<span leaf="">01 · CHAPTER ONE</span>
</p>
<h3 style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 22px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
<h3 style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:23px;font-weight: 700;color: #2B2B2B;margin: 0 0 16px;letter-spacing: 0.5px;line-height: 1.4;">
<span leaf="">中文章节大标题</span>
</h3>
<section style="width: 40px;height: 2px;background: #4A5D52;">
@@ -157,7 +157,7 @@
**基础段落**：
```html
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
<span leaf="">正文内容，15px 字号，1.9 倍行高，两端对齐。段落间距 26px+，字里行间充满呼吸感。</span>
</p>
```
@@ -165,7 +165,7 @@
**带关键词下划线标记的段落**（推荐默认使用）：
```html
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
<span leaf="">正文内容的前半部分，引出核心概念，</span>
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">这是需要强调的关键语句</span></span>
<span leaf="">，后半部分继续阐述。</span>
@@ -209,7 +209,7 @@
> 极浅墨绿底 + 深墨绿字，低调不刺眼。用于核心概念（每篇 2~4 个）。
```html
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size: 14px;"><span leaf="">关键词标签</span></span>
<span style="background: #EEF3F0;color: #3D5046;padding: 2px 6px;border-radius: 2px;font-weight: 600;font-size:15px;"><span leaf="">关键词标签</span></span>
```
### 7c. 留空（本风格不设此变体，保持克制）
@@ -227,7 +227,7 @@
**在段落中的实际效果**：
```html
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 16px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;padding: 0 10px;">
<span leaf="">这个时代的竞争，拼的不是速度，而是</span>
<span style="border-bottom: 1.5px solid #B5C8BC;font-weight: 500;"><span leaf="">深度思考的能力</span></span>
<span leaf="">。真正的高手，往往在别人仰望风口时，已经悄悄</span>
@@ -253,8 +253,8 @@
> 纯白底，上下各一条 1px 细线，衬线字体居中，大留白。这是禅意风最具特色的引用形式——不用色块，靠留白和字体传递力量。
```html
<section style="margin: 40px 16px;padding: 36px 20px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 17px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
<section style="margin: 40px 10px;padding: 32px 14px;border-top: 1px solid #E8E8E8;border-bottom: 1px solid #E8E8E8;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:18px;font-weight: 600;color: #2B2B2B;margin: 0;line-height: 1.9;letter-spacing: 0.8px;">
<span leaf="">「这里是核心金句，衬线字体 + 大留白 + 细线框定。」</span>
</p>
</section>
@@ -265,8 +265,8 @@
> 极细左竖条（`#4A5D52`，2px），无底色，大 padding，适合旁注和补充说明。
```html
<section style="border-left: 2px solid #4A5D52;padding: 10px 20px 10px 20px;margin: 0 16px 30px;background: #FFFFFF;">
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
<section style="border-left: 2px solid #4A5D52;padding: 10px 14px 10px 14px;margin: 0 10px 30px;background: #FFFFFF;">
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;text-align: justify;">
<span leaf="">旁注或补充说明内容，左侧细竖线划定边界，无色块，保持呼吸感。</span>
</p>
</section>
@@ -277,8 +277,8 @@
> 仅左侧 1px 浅灰线，字号稍小，颜色略淡，用于最轻量的旁注或个人感想。
```html
<section style="border-left: 1px solid #E8E8E8;padding: 8px 16px;margin: 0 16px 28px;">
<p style="font-size: 13px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
<section style="border-left: 1px solid #E8E8E8;padding: 8px 10px;margin: 0 10px 28px;">
<p style="font-size:14px;color: #A3A3A3;margin: 0;line-height: 1.9;text-align: justify;font-style: italic;">
<span leaf="">极轻量旁注，颜色浅、字号小，几乎不打扰主文节奏。</span>
</p>
</section>
@@ -291,11 +291,11 @@
> 用墨绿左竖条 + 「提示」小标签区分，无色块底色。保持留白气质，不用醒目色块警示。
```html
<section style="margin: 0 16px 32px;padding: 18px 20px;border-left: 2px solid #4A5D52;">
<section style="margin: 0 10px 32px;padding: 18px 14px;border-left: 2px solid #4A5D52;">
<p style="font-size: 10px;color: #4A5D52;font-weight: 600;letter-spacing: 2px;margin: 0 0 8px;text-transform: uppercase;">
<span leaf="">NOTE</span>
</p>
<p style="font-size: 14px;color: #525252;margin: 0;line-height: 1.9;">
<p style="font-size:15px;color: #525252;margin: 0;line-height: 1.9;">
<span leaf="">这里是重要提示或核心结论，用小标签「NOTE」区分，不用色块。</span>
</p>
</section>
@@ -306,7 +306,7 @@
## 组件 10 图片容器
```html
<section style="margin: 0 16px 10px;border: 1px solid #E8E8E8;">
<section style="margin: 0 10px 10px;border: 1px solid #E8E8E8;">
<section style="margin: 0;overflow: hidden;">
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
</section>
@@ -316,12 +316,12 @@
图片 + 说明文字配合（说明文字用辅助色，居中，大留白）：
```html
<section style="margin: 0 16px 8px;border: 1px solid #E8E8E8;">
<section style="margin: 0 10px 8px;border: 1px solid #E8E8E8;">
<section style="margin: 0;overflow: hidden;">
<span leaf=""><img src="图片URL" style="max-width: 100%;display: block;"></span>
</section>
</section>
<p style="font-size: 12px;color: #A3A3A3;text-align: center;margin: 8px 16px 32px;letter-spacing: 0.5px;">
<p style="font-size:13px;color: #A3A3A3;text-align: center;margin: 8px 10px 32px;letter-spacing: 0.5px;">
<span leaf="">— 图片说明文字</span>
</p>
```
@@ -331,7 +331,7 @@
## 组件 11 加粗结论段落
```html
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
<span leaf="">加粗的结论性短句，字色加深到近黑，靠字重而非色彩传达重量。</span>
</p>
```
@@ -339,7 +339,7 @@
结合荧光笔的变体：
```html
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 16px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;font-weight: 600;color: #2B2B2B;padding: 0 10px;">
<span style="background: linear-gradient(180deg, transparent 60%, #D6E4DC 60%);"><span leaf="">荧光笔标记的结论句，极浅墨绿底，克制温柔。</span></span>
</p>
```
@@ -351,13 +351,13 @@
### 两列版（用细线边框替代色块）
```html
<section style="display: flex;margin: 0 16px 32px;">
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;margin-right: 12px;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
<section style="display: flex;margin: 0 10px 32px;">
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;margin-right: 12px;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">14亿</span></p>
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">覆盖用户</span></p>
</section>
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 24px 16px;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size: 32px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
<section style="flex: 1;border: 1px solid #E8E8E8;padding: 22px 12px;text-align: center;">
<p style="font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif;font-size:33px;font-weight: 700;color: #2B2B2B;margin: 0 0 8px;line-height: 1;"><span leaf="">3步</span></p>
<p style="font-size: 11px;color: #A3A3A3;margin: 0;letter-spacing: 1px;"><span leaf="">快速接入</span></p>
</section>
</section>
@@ -366,18 +366,18 @@
### 要点列表版（竖排，细线分隔）
```html
<section style="margin: 0 16px 32px;border-top: 1px solid #E8E8E8;">
<section style="margin: 0 10px 32px;border-top: 1px solid #E8E8E8;">
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">01</span></p>
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</span></p>
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点一：简明扼要的核心内容</span></p>
</section>
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">02</span></p>
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</span></p>
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点二：简明扼要的核心内容</span></p>
</section>
<section style="display: flex;align-items: baseline;padding: 16px 0;border-bottom: 1px solid #E8E8E8;">
<p style="font-size: 11px;color: #4A5D52;font-weight: 600;letter-spacing: 1px;margin: 0;min-width: 28px;"><span leaf="">03</span></p>
<p style="font-size: 14px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
<p style="font-size:15px;color: #2B2B2B;margin: 0;line-height: 1.7;padding-left: 12px;"><span leaf="">要点三：简明扼要的核心内容</span></p>
</section>
</section>
```
@@ -405,7 +405,7 @@
> 居中极细线 + 「END」字样，低调收尾。墨绿细线 + 小号字母，不用渐变装饰。
```html
<section style="padding: 0 16px;">
<section style="padding: 0 10px;">
<section style="text-align: center;margin: 48px 0 40px;">
<section style="display: flex;align-items: center;justify-content: center;">
<span style="height: 1px;width: 48px;background: #E8E8E8;margin-right: 16px;"></span>
@@ -421,11 +421,11 @@
## 组件 15 尾部作者签名区
```html
<section style="padding: 0 16px 40px;">
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;">
<section style="padding: 0 10px 40px;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
<span leaf="">我是 {{作者名}}，{{一句话简介，如：热衷于分享 AI 观察与干货}}。</span>
</p>
<p style="margin-bottom: 26px;font-size: 15px;line-height: 1.9;text-align: justify;color: #525252;">
<p style="margin-bottom: 26px;font-size:16px;line-height: 1.9;text-align: justify;color: #525252;">
<span leaf="">如果你觉得今天这篇有收获，欢迎</span>
<strong style="color: #4A5D52;"><span leaf="">点赞、在看、转发</span></strong>
<span leaf="">三连，我们下篇见。</span>
skills/le-wechat-article/references/topic-facts.md
+1 -1
View File
@@ -12,7 +12,7 @@
（每个常写的项目一条：名称、一句话定位、关键链接、当前版本/状态）
- （待填写，如：MetaSkill —— Leroy 的 Agent Skill 工坊项目，…)
- 超级 AI 妈妈 —— 厚德明心（北京）科技有限公司面向妈妈群体的 AI 心理陪伴 App（客户产品，2026-10-23 首篇发布稿）。发布口径：公测预约中；核心卖点「妈妈说一句话，AI 自动生成对应功能」；积极心理学理论底座；功能面含多模态情绪识别（生理数据+文本语音表情）、专业量表对话化评估（筛查辅助定位）、疗愈方案（冥想呼吸引导）、妈妈端+专业端双端。公司背景锚点（公开可查）：2003 年成立、国内最早从事积极心理服务的公司之一、2007 年将哈佛「积极心理学（幸福课）」引入中国、创始人倪子君（2026-10-23 客户口径：清华大学心理学博士、清华大学国际工商管理硕士、清华大学幸福科技实验室（H-lab）产业发展委员会副主任，早年央视《心理访谈》编导；公开资料另见清华幸福科学研究中心副主任等表述）、与清华彭凯平教授合作 AI 心理谈心机器人（媒体报道首年营收千万）、2025-05 发布《养育健康成功的孩子，从做一个幸福妈妈开始》报告。
## 工具链与环境