@shopbb/helium 0.8.0 → 0.9.0

package/dist/page-schema/types.js

@@ -0,0 +1,129 @@
+/**
+ * Page Schema — 装修页面的结构化数据模型
+ *
+ * 一个 Page 是若干 Section 的有序数组。每个 Section 是 (type, data) 的结构化值，
+ * 不是任意 React 代码。这样 agent / 编辑器 / 渲染器都能精准操作。
+ *
+ * 设计原则：
+ *   1. 强 schema：每个 type 的 data 字段固定，agent 不能"乱发挥"
+ *   2. stable id：每个 section 有唯一 id，编辑器选中、agent 引用都靠它
+ *   3. 可演进：新加 section type 只需扩 SectionType 联合 + 实现对应 React 组件
+ *   4. 反规范化：data 是平铺字段而不是嵌套结构，方便 agent 修改单个属性
+ */
+// ============================================================
+// Helper：生成 section ID
+// ============================================================
+export function newSectionId(type) {
+    const rand = Math.random().toString(36).slice(2, 8);
+    return `sec_${type.replace('-', '_')}_${rand}`;
+}
+// ============================================================
+// 默认 data —— 商家新增某 type 的 section 时用作初始值
+// ============================================================
+export const DEFAULT_DATA = {
+    hero: {
+        headline: '欢迎来到我们的店铺',
+        subheadline: '精选商品 全场包邮',
+        height: 'medium',
+        text_align: 'center',
+        background_color: '#0f172a',
+        text_color: '#ffffff',
+        cta_label: '立刻购买',
+        cta_link: '/products',
+    },
+    'product-grid': {
+        title: '精选商品',
+        selection_mode: 'newest',
+        limit: 6,
+        columns: 3,
+    },
+    banner: {
+        text: '满 200 减 20，限时优惠',
+        background_color: '#f97316',
+        text_color: '#ffffff',
+    },
+    'rich-text': {
+        body: '在这里写一段品牌故事或说明文字。',
+        format: 'markdown',
+        max_width: 'normal',
+    },
+    image: {
+        url: 'https://placehold.co/1200x400',
+        alt: '广告图',
+        width: 'full',
+    },
+    spacer: {
+        height: 40,
+    },
+};
+/** 创建一个新 section（带默认 data） */
+export function createSection(type) {
+    return {
+        id: newSectionId(type),
+        type,
+        data: { ...DEFAULT_DATA[type] },
+        visible: true,
+    };
+}
+/** 创建一个空白 page */
+export function createEmptyPage(slug) {
+    return {
+        slug,
+        sections: [],
+        schema_version: 1,
+    };
+}
+// ============================================================
+// 校验
+// ============================================================
+const REQUIRED_FIELDS = {
+    hero: ['headline'],
+    'product-grid': ['selection_mode'],
+    banner: ['text'],
+    'rich-text': ['body'],
+    image: ['url'],
+    spacer: ['height'],
+};
+/** 校验一个 section 数据完整性。返回错误列表，空数组表示合法 */
+export function validateSection(section) {
+    const errs = [];
+    if (!section.id)
+        errs.push('id_required');
+    if (!section.type)
+        errs.push('type_required');
+    const required = REQUIRED_FIELDS[section.type];
+    if (!required) {
+        errs.push(`unknown_section_type:${section.type}`);
+        return errs;
+    }
+    const data = section.data;
+    for (const f of required) {
+        if (data[f] == null || data[f] === '') {
+            errs.push(`missing_field:${section.type}.${f}`);
+        }
+    }
+    return errs;
+}
+/** 校验整个 page */
+export function validatePage(page) {
+    const errs = [];
+    if (!page.slug)
+        errs.push('slug_required');
+    if (page.schema_version !== 1)
+        errs.push(`unknown_schema_version:${page.schema_version}`);
+    if (!Array.isArray(page.sections)) {
+        errs.push('sections_must_be_array');
+        return errs;
+    }
+    const seenIds = new Set();
+    for (let i = 0; i < page.sections.length; i++) {
+        const s = page.sections[i];
+        if (seenIds.has(s.id))
+            errs.push(`duplicate_section_id:${s.id}`);
+        seenIds.add(s.id);
+        const secErrs = validateSection(s);
+        errs.push(...secErrs.map((e) => `section[${i}]:${e}`));
+    }
+    return errs;
+}
+//# sourceMappingURL=types.js.map

package/dist/page-schema/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/page-schema/types.ts"],"names":[],"mappings":"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"}

package/dist/react.d.ts

@@ -98,6 +98,8 @@ export declare function createReactRenderer(opts: ReactRendererOptions): (reques
 /**
  * 把 head + react stream + tail 拼成一个 ReadableStream<Uint8Array>
  */
+export { PageRenderer, HeroSection, ProductGridSection, BannerSection, RichTextSection, ImageSection, SpacerSection, createSection, createEmptyPage, validateSection, validatePage, DEFAULT_DATA, newSectionId, } from './page-schema';
+export type { Page, PageGlobalStyle, AnySection, SectionType, HeroData, ProductGridData, BannerData, RichTextData, ImageData, SpacerData, PageRendererProps, } from './page-schema';
 export { TrackingProvider, useTracking, AnalyticsQueue, } from './analytics';
 export type { TrackingProviderProps, AnalyticsEvent, AnalyticsConfig, EventType as AnalyticsEventType, TrackFn, PageViewProps, ProductViewProps, AddToCartProps, CheckoutStartProps, } from './analytics';
 //# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,6EAMA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD;AAMD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,GAAG,EAAE,CAAC,KAAK,EAAE;QACX,GAAG,EAAE,aAAa,CAAC;QACnB,GAAG,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,KAAK,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEvD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;CAC5E;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,oBAAoB,IAE1D,SAAS,OAAO,EAChB,KAAK,GAAG,EACR,kBAAkB,gBAAgB,KACjC,OAAO,CAAC,QAAQ,CAAC,CAkHrB;AAYD;;GAEG;AAUH,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,SAAS,IAAI,kBAAkB,EAC/B,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,6EAMA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD;AAMD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,GAAG,EAAE,CAAC,KAAK,EAAE;QACX,GAAG,EAAE,aAAa,CAAC;QACnB,GAAG,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,KAAK,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEvD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;CAC5E;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,oBAAoB,IAE1D,SAAS,OAAO,EAChB,KAAK,GAAG,EACR,kBAAkB,gBAAgB,KACjC,OAAO,CAAC,QAAQ,CAAC,CAkHrB;AAYD;;GAEG;AAKH,OAAO,EACL,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,IAAI,EACJ,eAAe,EACf,UAAU,EACV,WAAW,EACX,QAAQ,EACR,eAAe,EACf,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAWvB,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,SAAS,IAAI,kBAAkB,EAC/B,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC"}

package/dist/react.js

@@ -149,6 +149,11 @@ function escapeHtml(s) {
  * 把 head + react stream + tail 拼成一个 ReadableStream<Uint8Array>
  */
 // ============================================================
+// Page Schema re-export
+// ============================================================
+// 结构化页面渲染。Admin 编辑器与 storefront 共用同一份组件。
+export { PageRenderer, HeroSection, ProductGridSection, BannerSection, RichTextSection, ImageSection, SpacerSection, createSection, createEmptyPage, validateSection, validatePage, DEFAULT_DATA, newSectionId, } from './page-schema';
+// ============================================================
 // Tracking SDK re-export
 // ============================================================
 // 把 5 个核心事件（page_view / product_view / add_to_cart / checkout_start / checkout_paid）

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbb/helium",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "shopbb storefront framework — components, React SSR, GraphQL client, cart handler, cache for Cloudflare Workers",
   "license": "MIT",
   "type": "module",

package/src/page-schema/PageRenderer.tsx

@@ -0,0 +1,147 @@
+/**
+ * <PageRenderer> — 按 Page Schema 渲染一整页
+ *
+ * 同一份组件在 production storefront 与 admin 编辑器画布共用。
+ *
+ * 商品网格的 selection_mode 自动模式（newest / top-selling / collection）
+ * 由父组件预先拉数据通过 productsBySection prop 注入，组件本身不发请求。
+ * 这让 renderer 保持纯组件、可在 SSR / CSR / 编辑器画布任何环境用。
+ */
+
+import * as React from 'react';
+import type { AnySection, Page } from './types';
+import { HeroSection } from './sections/Hero';
+import { ProductGridSection } from './sections/ProductGrid';
+import { BannerSection } from './sections/Banner';
+import { RichTextSection } from './sections/RichText';
+import { ImageSection } from './sections/Image';
+import { SpacerSection } from './sections/Spacer';
+
+export interface PageRendererProps {
+  page: Page;
+  /**
+   * 按 section.id 提供该 section 用到的商品数据（仅 product-grid 用到）。
+   * Page renderer 不发请求，请父组件按 schema 计算后传入。
+   */
+  productsBySection?: Record<string, any[]>;
+  /**
+   * 编辑器模式下传入 onSectionClick / selectedSectionId，渲染时会给每个 section
+   * 加 hover / 选中外框，便于点选定位。
+   */
+  editorMode?: {
+    selectedSectionId?: string | null;
+    onSectionClick?: (sectionId: string) => void;
+  };
+}
+
+export function PageRenderer({
+  page,
+  productsBySection,
+  editorMode,
+}: PageRendererProps): React.ReactElement {
+  const globalStyle: React.CSSProperties = {
+    backgroundColor: page.global_style?.background_color,
+    color: '#0f172a',
+    fontFamily:
+      page.global_style?.font_family === 'serif'
+        ? 'Georgia, "Times New Roman", serif'
+        : page.global_style?.font_family === 'sans-serif'
+          ? '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+          : 'inherit',
+  };
+
+  return (
+    <div style={globalStyle} data-page-slug={page.slug}>
+      {page.sections
+        .filter((s) => s.visible !== false)
+        .map((section) => (
+          <SectionFrame
+            key={section.id}
+            section={section}
+            productsBySection={productsBySection}
+            editorMode={editorMode}
+          />
+        ))}
+    </div>
+  );
+}
+
+interface SectionFrameProps {
+  section: AnySection;
+  productsBySection?: Record<string, any[]>;
+  editorMode?: PageRendererProps['editorMode'];
+}
+
+function SectionFrame({ section, productsBySection, editorMode }: SectionFrameProps): React.ReactElement {
+  const isSelected = editorMode?.selectedSectionId === section.id;
+  const isEditor = !!editorMode;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!isEditor) return;
+    // 阻止内部 a 链接跳转，让商家专注于选中
+    e.preventDefault();
+    e.stopPropagation();
+    editorMode?.onSectionClick?.(section.id);
+  };
+
+  const editorStyle: React.CSSProperties = isEditor
+    ? {
+        position: 'relative',
+        cursor: 'pointer',
+        outline: isSelected ? '2px solid #f97316' : '2px solid transparent',
+        outlineOffset: '-2px',
+        transition: 'outline-color 120ms ease',
+      }
+    : {};
+
+  const onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!isEditor || isSelected) return;
+    (e.currentTarget as HTMLDivElement).style.outlineColor = '#fed7aa';
+  };
+  const onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!isEditor || isSelected) return;
+    (e.currentTarget as HTMLDivElement).style.outlineColor = 'transparent';
+  };
+
+  return (
+    <div
+      data-section-id={section.id}
+      data-section-type={section.type}
+      style={editorStyle}
+      onClick={handleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {renderSection(section, productsBySection)}
+    </div>
+  );
+}
+
+function renderSection(section: AnySection, productsBySection?: Record<string, any[]>) {
+  switch (section.type) {
+    case 'hero':
+      return <HeroSection data={section.data} />;
+    case 'product-grid':
+      return (
+        <ProductGridSection
+          data={section.data}
+          products={productsBySection?.[section.id]}
+        />
+      );
+    case 'banner':
+      return <BannerSection data={section.data} />;
+    case 'rich-text':
+      return <RichTextSection data={section.data} />;
+    case 'image':
+      return <ImageSection data={section.data} />;
+    case 'spacer':
+      return <SpacerSection data={section.data} />;
+    default:
+      // exhaustive check
+      return (
+        <div style={{ padding: 16, background: '#fef2f2', color: '#b91c1c' }}>
+          未知 section 类型：{(section as any).type}
+        </div>
+      );
+  }
+}

package/src/page-schema/index.ts

@@ -0,0 +1,48 @@
+/**
+ * @shopbb/helium 的 Page Schema 模块
+ *
+ * 公开 API：
+ *   - types：Page / Section / 各 section 的 data 类型
+ *   - <PageRenderer>：按 schema 渲染一整页
+ *   - 6 个 section 组件（也可以单独引用）
+ *   - 工具：createSection / createEmptyPage / validatePage / DEFAULT_DATA
+ */
+
+export type {
+  Page,
+  PageGlobalStyle,
+  Section,
+  AnySection,
+  SectionType,
+  HeroData,
+  HeroSection as HeroSectionType,
+  ProductGridData,
+  ProductGridSection as ProductGridSectionType,
+  BannerData,
+  BannerSection as BannerSectionType,
+  RichTextData,
+  RichTextSection as RichTextSectionType,
+  ImageData,
+  ImageSection as ImageSectionType,
+  SpacerData,
+  SpacerSection as SpacerSectionType,
+} from './types';
+
+export {
+  newSectionId,
+  createSection,
+  createEmptyPage,
+  validateSection,
+  validatePage,
+  DEFAULT_DATA,
+} from './types';
+
+export { PageRenderer } from './PageRenderer';
+export type { PageRendererProps } from './PageRenderer';
+
+export { HeroSection } from './sections/Hero';
+export { ProductGridSection } from './sections/ProductGrid';
+export { BannerSection } from './sections/Banner';
+export { RichTextSection } from './sections/RichText';
+export { ImageSection } from './sections/Image';
+export { SpacerSection } from './sections/Spacer';

package/src/page-schema/sections/Banner.tsx

@@ -0,0 +1,63 @@
+/**
+ * <BannerSection> — 顶部细条状横幅
+ */
+
+import * as React from 'react';
+import type { BannerData } from '../types';
+
+export interface BannerSectionProps {
+  data: BannerData;
+}
+
+export function BannerSection({ data }: BannerSectionProps): React.ReactElement | null {
+  const [dismissed, setDismissed] = React.useState(false);
+  if (dismissed) return null;
+
+  const style: React.CSSProperties = {
+    padding: '12px 32px',
+    background: data.background_color ?? '#f97316',
+    color: data.text_color ?? '#ffffff',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 14,
+    fontSize: 14,
+    fontWeight: 500,
+  };
+
+  return (
+    <div style={style}>
+      <span>{data.text}</span>
+      {data.link && (
+        <a
+          href={data.link}
+          style={{
+            color: 'inherit',
+            textDecoration: 'underline',
+            fontWeight: 600,
+          }}
+        >
+          {data.link_label ?? '查看详情'}
+        </a>
+      )}
+      {data.dismissible && (
+        <button
+          type="button"
+          aria-label="关闭"
+          onClick={() => setDismissed(true)}
+          style={{
+            marginLeft: 'auto',
+            background: 'transparent',
+            border: 'none',
+            color: 'inherit',
+            cursor: 'pointer',
+            fontSize: 18,
+            opacity: 0.8,
+          }}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}

package/src/page-schema/sections/Hero.tsx

@@ -0,0 +1,92 @@
+/**
+ * <HeroSection> — 渲染 hero 区块
+ *
+ * 这是按 Page Schema 设计的纯渲染组件：
+ *   - props 直接接收 HeroData
+ *   - 不读取 schema，不操作 schema，只渲染
+ *   - 编辑器与 production storefront 共用同一份组件
+ */
+
+import * as React from 'react';
+import type { HeroData } from '../types';
+
+export interface HeroSectionProps {
+  data: HeroData;
+}
+
+const HEIGHT_MAP: Record<NonNullable<HeroData['height']>, string> = {
+  small: '240px',
+  medium: '380px',
+  large: '540px',
+  full: '85vh',
+};
+
+export function HeroSection({ data }: HeroSectionProps): React.ReactElement {
+  const height = HEIGHT_MAP[data.height ?? 'medium'];
+  const align = data.text_align ?? 'center';
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    minHeight: height,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start',
+    padding: '64px 32px',
+    background: data.background_image
+      ? `linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(${data.background_image}) center/cover`
+      : data.background_color ?? '#0f172a',
+    color: data.text_color ?? '#ffffff',
+    textAlign: align,
+  };
+
+  return (
+    <section style={style}>
+      <h1 style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', fontWeight: 800, margin: 0, maxWidth: '24ch' }}>
+        {data.headline}
+      </h1>
+      {data.subheadline && (
+        <p style={{ fontSize: 'clamp(1rem, 2vw, 1.25rem)', marginTop: 16, maxWidth: '40ch', opacity: 0.9 }}>
+          {data.subheadline}
+        </p>
+      )}
+      {(data.cta_label || data.secondary_cta_label) && (
+        <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: align }}>
+          {data.cta_label && (
+            <a
+              href={data.cta_link ?? '#'}
+              style={{
+                padding: '12px 28px',
+                background: data.text_color === '#ffffff' ? '#fff' : '#0f172a',
+                color: data.text_color === '#ffffff' ? '#0f172a' : '#ffffff',
+                borderRadius: 8,
+                fontWeight: 600,
+                textDecoration: 'none',
+                fontSize: 15,
+              }}
+            >
+              {data.cta_label}
+            </a>
+          )}
+          {data.secondary_cta_label && (
+            <a
+              href={data.secondary_cta_link ?? '#'}
+              style={{
+                padding: '12px 28px',
+                background: 'transparent',
+                color: 'inherit',
+                border: '1px solid currentColor',
+                borderRadius: 8,
+                fontWeight: 600,
+                textDecoration: 'none',
+                fontSize: 15,
+              }}
+            >
+              {data.secondary_cta_label}
+            </a>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/page-schema/sections/Image.tsx

@@ -0,0 +1,42 @@
+/**
+ * <ImageSection> — 单张图片，可加链接
+ */
+
+import * as React from 'react';
+import type { ImageData } from '../types';
+
+export interface ImageSectionProps {
+  data: ImageData;
+}
+
+const WIDTH_MAP: Record<NonNullable<ImageData['width']>, string> = {
+  full: '100%',
+  normal: '1200px',
+  narrow: '760px',
+};
+
+export function ImageSection({ data }: ImageSectionProps): React.ReactElement {
+  const maxWidth = WIDTH_MAP[data.width ?? 'normal'];
+
+  const img = (
+    <img
+      src={data.url}
+      alt={data.alt ?? ''}
+      style={{ display: 'block', width: '100%', height: 'auto' }}
+    />
+  );
+
+  return (
+    <section style={{ padding: data.width === 'full' ? 0 : '32px', textAlign: 'center' }}>
+      <div style={{ maxWidth, margin: '0 auto' }}>
+        {data.link ? (
+          <a href={data.link} style={{ display: 'block' }}>
+            {img}
+          </a>
+        ) : (
+          img
+        )}
+      </div>
+    </section>
+  );
+}