外观与主题

报表的颜色、圆角、字体全部走 CSS 变量（设计令牌）。宿主只换值，不改样式源码——这样报表升级不会把你们改过的样式冲掉。

换法一：写在链接上

&theme=primary:%232c6ecb,bg:%23ffffff

• 写成 名:值，多个用逗号隔开。
• 名字可以省掉 --cr- 前缀：primary 等于 --cr-primary。
• # 在 URL 里要编码成 %23。
• 值里不能有逗号（逗号是分隔符）。所以链接上用 #2c6ecb，不要用 rgb(44,110,203)。

换法二：发消息

值里要带逗号、或者主题要跟着宿主的深浅色切换，用这个：

frame.contentWindow.postMessage({
  source: 'conch-report-host',
  type: 'setTheme',
  tokens: {
    primary: '#2c6ecb',
    bg: 'rgb(248, 249, 251)',
    '--cr-radius': '4px',
  },
}, 'https://report.example.com')

常用的令牌

改前四个就能让报表看起来像你们的系统，其余按需要挑。

令牌	管什么	默认值
primary	主色：按钮、选中态、链接	#2c6ecb
bg	页面底色	#f5f6f8
surface	卡片、组件底色	#ffffff
text	正文字色	#1d2330
primary-hover / primary-active	主色的悬浮态、按下态	深一档、再深一档
primary-soft / primary-border	主色的浅底、浅描边	#eaf1fc / #b9d0f0
surface-sunken / surface-hover	次级底色、悬浮底色	#fafbfc / #f2f4f7
border / border-strong / border-subtle	三档描边	#e3e6ea / #cfd4da / #eceff2
text-secondary / text-muted	次要文字、弱化文字	#4b5563 / #8a919e
success / warning / danger	语义色	绿 / 黄 / 红
trend-up / trend-down	涨跌色（中文语境默认涨绿跌红，要互换就改这两个）	#2f7d55 / #b8453c
chart-1 … chart-8	图表分类色板，按顺序取	低饱和八色
chart-seq-1 … chart-seq-6	连续量色阶（热力图一类）	单色阶
chart-axis / chart-grid / chart-label	坐标轴、网格线、轴标签	浅灰系
font-sans / font-mono	字体族	系统中文字体栈
radius-sm / radius / radius-lg	圆角三档	3px / 6px / 10px
font-size-md / font-size-lg	正文字号	13px / 14px

图表颜色也跟着走

图表用的是同一套令牌，不需要单独配。改 chart-1 到 chart-8 就能让图表配色统一到你们的视觉规范上。

页头要不要

&chrome=0 去掉报表自带的页头（报表名、版本标记、刷新数据、导出）。适合宿主自己已经有标题栏和工具条的场合。

去掉之后这些能力也跟着没了：

• 刷新数据 → 宿主发 { type: 'refresh' } 代替。
• 导出 Excel / Word / PDF → 留着页头，或者由宿主调导出接口。

窄屏与手机

宽度小于等于 760px 时，报表自动从 12 栏栅格换成整列堆叠，顺序按组件在画布上从上到下、从左到右排。宿主侧栏里嵌、手机 web-view 里打开都能看。

组件的高度按它在设计时占的行数留，图表不会被压扁。

打印和存 PDF

报表页头、提示条这些在打印时自动隐藏，打印出来的就是画布本身。让使用者用浏览器打印（或在报表页头的「导出」里选「导出 PDF」，走的也是浏览器打印）。