申请 API 访问权限
Micro Frontend

样式工具

通过调整设计 token 和布局选项，为微前端应用品牌样式。每个参数都有说明，预览会实时更新，生成的 mount() 调用可直接粘贴使用。

预设
从截图获取建议

上传、拖放或粘贴 PNG、JPEG 或 WebP 图片（最大 5 MB）。缩小且已清除元数据的版本会发送给 AI 处理商以分析视觉角色，随后在本地验证对比度。ADITUS 会将原始图片和派生样式集保留 6 个月用于质量控制。

将图片拖放到此处
也可以聚焦此区域并从剪贴板粘贴。

--aditus-accent

主要品牌色：用于按钮、活动状态和强调元素。

--aditus-accent-strong

强调色在悬停或按下状态下的色调。

--aditus-accent-contrast

强调色背景上的文本和图标颜色。

--aditus-accent-soft

用于柔和填充和悬停状态的浅强调色。

--aditus-surface

面板、卡片和输入框背景。

--aditus-surface-2

用于嵌套填充的轻微凸起表面。

--aditus-border

细边框颜色。

--aditus-border-strong

输入框和控件使用的较明显边框。

--aditus-text

主要正文颜色。

--aditus-muted

弱化或次要文本颜色。

--aditus-heading

标题颜色，比正文颜色更亮。

--aditus-overlay-surface

商品详情模态框的不透明背景。当 Surface 为半透明（玻璃主题）时，请设置不透明颜色，确保浮动对话框不会透视且文本清晰可读。

--aditus-overlay-backdrop

详情模态框后的遮罩。深色主题请使用深色遮罩（例如 rgba(0,0,0,0.6)），避免由文本颜色推导出的默认值过浅。

--aditus-success

成功状态颜色：用于已完成步骤和完成标记。

--aditus-success-soft

较浅的成功状态色。

--aditus-danger

错误状态颜色。

--aditus-danger-soft

较浅的错误状态色。

--aditus-radius

面板和卡片的圆角半径。

--aditus-radius-sm

输入框和小型标签的圆角半径。

--aditus-radius-button

按钮的圆角半径。

--aditus-gap

一个阶段内堆叠区块之间的间距。

--aditus-shadow

凸起面板和卡片的 box-shadow。

--aditus-font

整个微前端使用的字体系列栈。

--aditus-font-size

用于缩放全部排版的单个 CSS 长度（例如 16px 或 1rem）。正文、元数据、控件和标题会保持比例并同步缩放。默认值：15px。

将活动步骤显示为垂直列表或卡片网格。每个活动仅显示自身信息和一个选择按钮。

将商品步骤显示为垂直列表或价格层级卡片网格（通过 articleContent 配置）。

商品在列表布局的展开分组中的排列方式：紧凑堆叠或响应式多列网格。

用户在列表布局中选择商品的方式：每行一个选择按钮，或每行一个带小计的数量步进器，并通过底部按钮一次性添加全部选择。

在列表布局中显示每个商品的图标，即真实商店在每张票券左侧呈现的小型着色 SVG。

显示页眉图片：在流程上方以全宽页眉呈现所选活动的大型品牌横幅。选择活动后显示。

作为 Accept-Language 请求头发送的 culture，用于控制 API 返回的本地化内容（例如 de-DE、en-GB）。

步骤变化时，将组件平滑滚动到可视区域（首次挂载时不会执行）。如果宿主管理滚动，请关闭此选项。

Answer-option columns for RadioButtonList/CheckBoxList survey questions (1-4). Narrow viewports collapse back to a single column.

注入内置的中性默认主题。提供完整自定义皮肤时请关闭。

实时预览
预览背景仅用于辅助调整样式，不属于微前端 token。微前端背景透明，并继承页面背景。
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
  // sessionToken,  // required to activate the shop — minted by your backend, see "Micro Frontend"
  eventTheme: false,  // render your tokens, not the event organizer's branding
});

仅输出已修改的 token；省略的 token 将继续使用内置默认值。