skills/ppt-station-skill/reference/layout-three-columns.md

Layout: three_columns — 三栏内容

幻灯片尺寸: 13.333 × 7.5 英寸 | 边距: 0.6 英寸 | 内容宽: 12.133 英寸

---

用途

三个方案对比、三大优势、三个阶段、三类风险、三维度分析框架。

---

ASCII 线框图

变体 A：标准三栏（图标+标题+正文）

┌─────────────────────────────────────────────────────────────┐
│  [标题]                                     y=0.25          │
│  ▬▬ (accent 装饰线)                         y=0.90          │
│                                                              │
│  ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐    │
│  │    [图标]    │ │ │    [图标]    │ │ │    [图标]    │    │
│  │   稳健增值   │ │ │   风险控制   │ │ │   流动管理   │    │
│  │              │ │ │              │ │ │              │    │
│  │  正文内容..  │ │ │  正文内容..  │ │ │  正文内容..  │    │
│  │  正文继续..  │ │ │  正文继续..  │ │ │  正文继续..  │    │
│  └──────────────┘   └──────────────┘   └──────────────┘    │
└─────────────────────────────────────────────────────────────┘

变体 B：三栏卡片（加 card_bg 背景，各栏独立卡片）

│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐ │
│  │ [顶部色带]     │  │ [顶部色带]     │  │ [顶部色带]     │ │
│  │   [图标]       │  │   [图标]       │  │   [图标]       │ │
│  │   [标题]       │  │   [标题]       │  │   [标题]       │ │
│  │   [要点列表]   │  │   [要点列表]   │  │   [要点列表]   │ │
│  └────────────────┘  └────────────────┘  └────────────────┘ │

变体 C：三阶段时间线（横向，强调顺序）

│  [起点]   →   第一阶段  →  第二阶段  →  第三阶段   [终点]  │
│            ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│            │  图标/编号  │ │  图标/编号  │ │  图标/编号  │    │
│            │   标题      │ │   标题      │ │   标题      │    │
│            │   正文...   │ │   正文...   │ │   正文...   │    │
│            └────────────┘ └────────────┘ └────────────┘    │

---

精确坐标标注

尺寸计算（三等分）

col_gap = 0.30                                  # 列间距
col_w = (12.133 - 2 * col_gap) / 3 = 3.844"    # 每列宽（精确）

col_x[0] = 0.60
col_x[1] = 0.60 + 3.844 + 0.30 = 4.744
col_x[2] = 0.60 + 2 * (3.844 + 0.30) = 8.888

col_y = 1.20   # 内容区起始 y
col_h = 5.90   # 内容区高度（到 y=7.10）

变体 A（标准三栏，无卡片背景）

元素（每列，以 col_x[i] 为基准）	x	y	w	h	字号	颜色	对齐
图标区（文字/Unicode 图标）	col_x	1.20	3.844	0.90	36pt	primary	中
顶部 accent 横线（图标下方）	col_x	2.15	1.50	0.04	—	accent	—
列标题	col_x	2.30	3.844	0.55	subtitle_size	text_dark	中
列正文	col_x	2.95	3.844	3.80	body_size	text_dark	左
列间竖分隔线	col_x+3.844+0.15	1.20	0.01	5.90	—	border	—

accent 横线居左对齐于列，宽 1.50"（不满列宽，营造"半线"装饰感）

变体 B（卡片三栏）

元素（每列）	x	y	w	h	颜色	备注
卡片背景（圆角矩形）	col_x	1.20	3.844	5.90	card_bg	border 边框
顶部色带	col_x	1.20	3.844	0.08	见下方颜色规则	每列不同色
图标	col_x+0.10	1.40	3.644	0.80	36pt	primary / text_light
标题	col_x+0.15	2.30	3.544	0.55	subtitle_size	text_dark
分隔线	col_x+0.30	2.90	3.244	0.02	border	—
正文/要点	col_x+0.20	3.10	3.444	3.70	body_size	text_dark

三栏顶部色带颜色（建议）:

• 第1栏: primary
• 第2栏: secondary
• 第3栏: accent
• 或全部使用 primary（统一风格）

要点列表行（每行）:

bullet_y = 3.10 + j * 0.55  (j=0,1,2,3...)
add_text("●", x=col_x+0.20, y=bullet_y, w=0.25, h=0.40, color=accent)
add_text(text, x=col_x+0.50, y=bullet_y, w=3.00, h=0.40, color=text_dark)

变体 C（三阶段，加箭头）

顶部箭头连接线:
  x=0.60, y=2.20, w=12.133, h=0.04, fill=secondary  # 底层横线

各箭头（向右三角形，用文字 "→" 代替）:
  x=col_x[0]+3.844+0.05, y=2.00, w=0.20, h=0.40, color=accent

编号圆圈（替代图标时）:
  x=col_x+1.722, y=1.20, r=0.35  # 水平居中，fill=primary
  text: "01"/"02"/"03", color=text_light, 14pt, bold

---

固定元素（所有变体通用）

元素	x	y	w	h	字号	颜色
页面标题	0.60	0.25	12.133	0.60	title_size-2	text_dark
装饰线	0.60	0.90	2.00	0.04	—	accent

---

数据接口

data = {
    "title": str,                        # 页面标题
    "subtitle": str,                     # 可选
    "variant": "open" | "card" | "phase",  # 布局变体，默认 "open"
    "columns": [
        {
            "icon": str,                 # Unicode 图标字符（如 "📈" "🛡" "💧"）
                                         # 或自定义文字（如 "01", "A"）
            "title": str,               # 栏标题（8字以内）
            "body": str,                # 正文段落（可含换行 \n）
            "bullets": list[str],       # 可选，要点列表（替代 body）
            "color": str,               # 可选，顶部色带颜色变量名
            "footnote": str,            # 可选，栏底部小注
        },
        ...  # 必须恰好 3 项
    ],
    "show_dividers": bool,              # 是否显示列间竖分隔线，默认 True（open变体）
    "accent_line_per_col": bool,        # 每列图标下是否加 accent 短线，默认 True
}

---

实现伪代码

def layout_three_columns(slide, data, theme):
    m = theme["margin"]
    sw = 13.333
    cw = sw - 2 * m

    set_slide_bg(slide, theme["bg_light"])
    add_text(slide, data["title"],
             x=m, y=0.25, w=cw, h=0.60,
             font_size=theme["title_size"]-2, color=theme["text_dark"],
             bold=True, font_name=theme["header_font"])
    add_rect(slide, m, 0.90, 2.0, 0.04, fill=theme["accent"])

    col_gap = 0.30
    col_w = (cw - 2 * col_gap) / 3
    col_xs = [m, m + col_w + col_gap, m + 2 * (col_w + col_gap)]
    col_y = 1.20
    col_h = 5.90
    variant = data.get("variant", "open")

    for i, col in enumerate(data["columns"]):
        cx = col_xs[i]

        if variant == "card":
            add_rounded_rect(slide, cx, col_y, col_w, col_h,
                             fill=theme["card_bg"], border=theme["border"], radius=0.10)
            col_colors = ["primary", "secondary", "accent"]
            top_color = theme.get(col.get("color", col_colors[i]), theme["primary"])
            add_rect(slide, cx, col_y, col_w, 0.08, fill=top_color)

        # 图标
        add_text(slide, col["icon"],
                 x=cx, y=col_y+0.20, w=col_w, h=0.80,
                 font_size=36, color=theme["primary"],
                 align="center", font_name=theme["body_font"])

        # 图标下 accent 线
        if data.get("accent_line_per_col", True):
            line_x = cx + (col_w - 1.50) / 2
            add_rect(slide, line_x, col_y+1.05, 1.50, 0.04, fill=theme["accent"])

        # 标题
        add_text(slide, col["title"],
                 x=cx+0.10, y=col_y+1.20, w=col_w-0.20, h=0.55,
                 font_size=theme["subtitle_size"], color=theme["text_dark"],
                 bold=True, align="center", font_name=theme["header_font"])

        # 正文或要点
        body_y = col_y + 1.85
        if col.get("bullets"):
            for j, bullet in enumerate(col["bullets"]):
                add_text(slide, f"● {bullet}",
                         x=cx+0.15, y=body_y+j*0.55, w=col_w-0.30, h=0.50,
                         font_size=theme["body_size"], color=theme["text_dark"],
                         font_name=theme["body_font"])
        else:
            add_text(slide, col.get("body", ""),
                     x=cx+0.15, y=body_y, w=col_w-0.30, h=3.70,
                     font_size=theme["body_size"], color=theme["text_dark"],
                     font_name=theme["body_font"])

        # 列间竖线（open 变体）
        if variant == "open" and i < 2 and data.get("show_dividers", True):
            add_rect(slide, cx+col_w+0.15, col_y, 0.01, col_h, fill=theme["border"])

---

设计要点

1. 三等分 精确计算：col_w = (12.133 - 0.60) / 3 = 3.844 英寸
2. 图标 建议用 Unicode Emoji（如 📈 🛡 💧）或文字数字（"01"）；字号 36pt
3. accent 短横线 位于图标与标题之间，宽 1.50"（不满列宽），每列居中对齐
4. 卡片变体 三栏顶部色带颜色建议不同（视觉区分），或统一用 primary
5. 正文 左对齐（更易读），不居中；标题居中

---

测试数据示例

data = {
    "title": "养老投资三大核心策略",
    "variant": "card",
    "columns": [
        {
            "icon": "📈",
            "title": "稳健增值",
            "color": "primary",
            "bullets": [
                "长期年化收益目标 8-10%",
                "权益+债券均衡配置",
                "专注α收益挖掘",
                "低换手率运营",
            ],
        },
        {
            "icon": "🛡",
            "title": "风险控制",
            "color": "secondary",
            "bullets": [
                "最大回撤控制在 8% 以内",
                "多资产类别分散",
                "季度压力测试",
                "动态再平衡机制",
            ],
        },
        {
            "icon": "💧",
            "title": "流动管理",
            "color": "accent",
            "bullets": [
                "保持 15% 以上流动资产",
                "匹配养老金支付节奏",
                "避免集中赎回风险",
                "T+1 快速响应机制",
            ],
        },
    ],
}