@seaart/footer-embed

SeaArt 网站公共 Footer 渲染包。调用方负责获取和筛选页面组件配置，将目标模块的 elList 作为 footerData 传入；包负责渲染栏目、社媒与应用下载区域，并支持浏览器挂载与 SSR HTML 输出。

安装

pnpm add @seaart/footer-embed

npm 使用

import { mountFooter, type FooterData } from '@seaart/footer-embed';

const footerData: FooterData = [
  {
    title: 'SeaArt AI',
    child: [{ title: '价格', link_route: '/pricing' }],
  },
];

const controller = mountFooter('#seaart-footer', {
  footerData,
  locale: 'zhCN',
  websiteOrigin: 'https://www.seaart.ai',
  onTrack(event) {
    reportFooterClick(event);
  },
});

controller.destroy();

浏览器脚本

<div id="seaart-footer"></div>
<script src="./dist/seaart-footer.global.js"></script>
<script>
  const controller = SeaArtFooter.mount('#seaart-footer', {
    footerData: window.footerData,
    locale: 'zhCN',
    websiteOrigin: 'https://www.seaart.ai',
  });
</script>

全局对象为 SeaArtFooter，其 mount 方法等同于 mountFooter。

挂载参数

mountFooter(target, options) 的 target 可以是 CSS 选择器或 HTMLElement。找不到目标元素时会抛出异常。

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | target | string \| HTMLElement | 是 | - | Footer 的挂载容器。 | | footerData | FooterData | 否 | 内置静态数据 | 页面组件配置中已选定模块的 elList。传入空数组时只渲染社媒与应用下载区域。 | | locale | string | 否 | - | 以 zh 开头时，固定区标题显示“关注我们”“获取应用”；否则显示英文。 | | websiteOrigin | string | 否 | https://www.seaart.ai | 相对链接的站点前缀。 | | className | string | 否 | - | 添加到 Footer 根节点的自定义 class。 | | onTrack | (event) => void | 否 | - | 点击链接、社媒或应用下载入口时触发。 |

footerData 结构

footerData 直接对应 POST /api/v1/square/component/config-v2 目标模块的 elList：

const footerData = [
  {
    title: '视频',
    child: [
      {
        title: 'AI视频生成器',
        key: 'footer_video_generator',
        obj_type: 61,
        link_route: '/ai-video-generator',
        id: 'ai-video-generator',
        obj_id: 'ai-video-generator',
      },
    ],
  },
  {
    title: '帮助',
    childs: [{ title: '指南', link_route: '/guide' }],
  },
];

| 字段 | 类型 | 说明 | | --- | --- | --- | | title | string | 栏目标题。 | | child / childs | FooterConfigLinkItem[] | 栏目链接列表，两个字段均兼容。 | | child[].title | string | 链接展示文字。 | | child[].link_route | string | 链接地址，优先使用。 | | child[].id | string \| number | 未提供 link_route 时的链接回退值。 | | child[].obj_id | string \| number | 未提供 link_route、id 时的链接回退值。 | | child[].key / obj_type | string / string \| number | 接口原始字段，包不使用它们筛选或渲染。 |

HTTP(S) 链接保持不变；相对链接会拼接 websiteOrigin。缺少标题或链接地址的条目不会渲染。

当前主站筛选方式

当前 SeaArt Web 主站在调用包前，从 component/config-v2 响应中完成以下业务筛选：

const targetModule = response.items
  ?.find((item) => item.parent_id === 'home_visitor')
  ?.modules?.find((module) => String(module.content_type) === '42');

const footerData = (targetModule?.elList || [])
  .map((column) => ({
    ...column,
    child: (column.child || column.childs || []).filter((item) => Number(item.obj_type) === 61),
  }))
  .filter((column) => column.child?.length);

home_visitor、content_type = 42、obj_type = 61 是当前主站页面配置约定，不是 SDK 固定逻辑。其他宿主项目应按自身接口配置筛选，再将最终 elList 传给 footerData。

点击事件与控制器

onTrack 接收：

| 字段 | 类型 | 说明 | | --- | --- | --- | | type | 'link' \| 'social' \| 'app' | 点击区域类型。 | | label | string | 链接或应用名称。 | | href | string | 最终跳转地址。 |

mountFooter 返回 FooterEmbedController：

| 方法 | 参数 | 说明 | | --- | --- | --- | | update(options) | footerData、locale、websiteOrigin | 重新渲染 Footer。 | | destroy() | - | 清空挂载容器并移除根 class。 |

社媒、Logo 与 App Store/Google Play 链接为包内静态配置，不在 footerData 中。

SSR

import { getFooterStyle, renderFooterHtml } from '@seaart/footer-embed';

const footerHtml = renderFooterHtml({
  footerData,
  locale: 'zhCN',
  websiteOrigin: 'https://www.seaart.ai',
});
const footerStyle = getFooterStyle();

将 footerHtml 输出到服务端模板，并将 footerStyle 放入 <style> 标签。renderFooterHtml 不访问 window、document，可安全用于 SSR；mountFooter 仅可用于浏览器。

测试与构建

pnpm --filter @seaart/footer-embed typecheck
pnpm --filter @seaart/footer-embed test
pnpm --filter @seaart/footer-embed build

License

UNLICENSED