/* ========================================================================== Documentation tables — site-wide visual upgrade - selector `.prose table` 限定 mintlify 文档主区（与 prose 同级别 specificity） - !important 用于覆盖 .prose :where() 默认 padding / border 等 - light / dark 双套（用 html.dark 前缀，与 Tailwind dark: 同步） - 不影响组件（它们不渲染） - 溢出策略：表格始终满宽（width:100%），长文本在单元格内自动换行；通过 th/td 的 min-width 抬高表格最小内容宽——列多到换行也放不下时，由 Mintlify 自带的滚动容器（table 外层 role=region overflow-x:scroll）接管横向滚动，避免单元格被挤压至逐字竖排；禁止用 width:max-content（会让窄表不满宽、长文表整体变宽转滚动而不换行） ========================================================================== */ .prose table, main table { border-collapse: separate !important; border-spacing: 0; width: 100%; margin: 1.25rem 0; font-size: 14px; line-height: 1.6; border: 1px solid rgb(229, 231, 235); /* gray-200 light */ border-radius: 8px; overflow: hidden; /* clip rounded corners */ } /* 列宽下限：防止多列表把单元格挤压至逐字竖排；列多超出容器时表格最小宽变大，由外层 Mintlify 滚动容器横向滚动 */ .prose table th, main table th { min-width: 5em; } html.dark .prose table, html.dark main table { border-color: rgb(55, 65, 81); /* gray-700 dark */ } /* Header — tinted background + bold + dividers */ .prose table thead, main table thead { background-color: rgb(249, 250, 251); /* gray-50 light */ } html.dark .prose table thead, html.dark main table thead { background-color: rgba(31, 41, 55, 0.6); /* gray-800 @ 60% dark */ } /* 表头单元格——选择器不依赖 thead：语雀迁移的合并单元格表为原生

（React 不会自动补 thead/tbody），tbody/thead 后代选择器匹配不到 */ .prose table th, main table th { padding: 12px 16px !important; font-weight: 600 !important; text-align: left !important; color: rgb(17, 24, 39) !important; /* gray-900 light */ border-bottom: 1px solid rgb(229, 231, 235) !important; } html.dark .prose table th, html.dark main table th { color: rgb(243, 244, 246) !important; /* gray-100 dark */ border-bottom-color: rgb(55, 65, 81) !important; } /* 无 thead 的原生 HTML 表格：首行充当表头，补表头底色 */ .prose table:not(:has(thead)) > tr:first-child, main table:not(:has(thead)) > tr:first-child { background-color: rgb(249, 250, 251); } html.dark .prose table:not(:has(thead)) > tr:first-child, html.dark main table:not(:has(thead)) > tr:first-child { background-color: rgba(31, 41, 55, 0.6); } /* Body cells — horizontal dividers only, symmetric padding（不依赖 tbody，兼容原生

） */ .prose table td, main table td { padding: 10px 16px !important; vertical-align: top; border-bottom: 1px solid rgb(243, 244, 246) !important; } html.dark .prose table td, html.dark main table td { border-bottom-color: rgba(55, 65, 81, 0.4) !important; } /* First column — restore inline-start padding (prose forces it to 0) + emphasis */ .prose table td:first-child, main table td:first-child { padding-inline-start: 16px !important; font-weight: 500; color: rgb(31, 41, 55); /* gray-800 light */ } html.dark .prose table td:first-child, html.dark main table td:first-child { color: rgb(229, 231, 235); /* gray-200 dark */ } /* Last row — no bottom border (let outer rounded border be the boundary) */ .prose table tbody tr:last-child td, main table tbody tr:last-child td, .prose table > tr:last-child td, main table > tr:last-child td { border-bottom: 0 !important; } /* Subtle zebra stripes for long parameter tables */ .prose table tbody tr:nth-child(even), main table tbody tr:nth-child(even), .prose table:not(:has(thead)) > tr:nth-child(even), main table:not(:has(thead)) > tr:nth-child(even) { background-color: rgba(249, 250, 251, 0.5); } html.dark .prose table tbody tr:nth-child(even), html.dark main table tbody tr:nth-child(even), html.dark .prose table:not(:has(thead)) > tr:nth-child(even), html.dark main table:not(:has(thead)) > tr:nth-child(even) { background-color: rgba(31, 41, 55, 0.25); } /* Row hover — brand-color tint (#0066ff @ 5%) */ .prose table tbody tr:hover, main table tbody tr:hover, .prose table > tr:hover, main table > tr:hover { background-color: rgba(0, 102, 255, 0.05); } html.dark .prose table tbody tr:hover, html.dark main table tbody tr:hover, html.dark .prose table > tr:hover, html.dark main table > tr:hover { background-color: rgba(0, 102, 255, 0.1); } /* Inline code inside cells — slightly tighter */ .prose table code, main table code { font-size: 0.875em; padding: 1px 6px; border-radius: 4px; } /* ========================================================================== Documentation images — portrait-friendly display - 竖图（手机截图）不再屏霸：max-height 80vh 让其按比例收窄并居中 - 横图保留原满宽行为（被 max-width 约束后高度天然小于 80vh） - inline 小图标本就远小于 80vh，不受影响 - mobile 视口（< 640px）解除限高，回归原生满宽 ========================================================================== */ .prose img, main article img { max-height: 80vh; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; margin-left: auto; margin-right: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } html.dark .prose img, html.dark main article img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } @media (max-width: 640px) { .prose img, main article img { max-height: none; border-radius: 6px; } } /* 行内小图标（转换管线对 ≤100px 的句内图标输出 class="inline-icon"）：跟随文本流展示，取消块级居中/阴影/圆角大图样式，高度锁到行高量级 */ .prose img.inline-icon, main article img.inline-icon { display: inline-block; width: auto; height: auto; max-height: 1.5em; margin: 0 3px; vertical-align: text-bottom; border-radius: 3px; box-shadow: none; } /* ========================================================================== 品牌 tab 图标 —— 让 SVG 跟随主题色与选中态 - Mintlify 把 docs.json 里「本地 SVG 路径」的 tab 图标渲染成，于是 SVG 内的 fill="currentColor" 退化为黑色：dark 主题下不可见、选中态也不变亮。 - ⚠️ 线上 Mintlify 会把 src 改写成绝对 S3 URL （https://mintlify.s3...amazonaws.com//logo/icons/im.svg），本地 mint dev 却是相对路径 /logo/icons/im.svg。故选择器必须用 substring 匹配 [src*=...]，绝不能用前缀 [src^=] 或精确 [src=] —— 否则本地生效、线上全部落空（图标消失）。 - 解决（跨浏览器稳，含 Safari）：docs.json 引用的 .svg 本身是「透明占位」，在任何浏览器都渲染成空 → 不会有黑色位图透出（不依赖 content:""）；再用 background-color:currentColor + mask(-glyph.svg 实心形状) 上色，图标颜色即精确等于 tab 文字色 —— light/dark × 选中/未选中/hover 全自动跟随。 - 仅命中 /logo/icons/ 下的品牌图标；首页卡片是内联同时带 `truncate`（自身 class）+ `line-clamp-1` （父按钮 `[&>span]:line-clamp-1` 变体）双重截断，flex 只分给它 ~94px，全名需 ~97px → 尾部被切成 "Pusat Bantu..."。 - 解除截断即可：父 flex 容器（.flex-1，~432px）余量充足，放开后按钮按内容自然增宽 ~3px，无布局风险；单行保留（white-space:nowrap）。 - 作用域用 Mint 稳定语义属性 data-component-part="products-selector-trigger"，只命中产品切换器本身，绝不影响侧栏 / 其它 .truncate。 ========================================================================== */ [data-component-part="products-selector-trigger"] > span { max-width: none !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; display: block !important; white-space: nowrap !important; } /* ========================================================================== navbar 顶栏 & tab 行拥挤治理（子产品持续增多 + 长本地化名） - 低于 1024px（lg）Mintlify 切换汉堡菜单，本段只作用于桌面行。 - tab 行溢出由 nav-overflow.js 的「更多 ▾」菜单接管（放不下的 tab 收进下拉）；本段只负责：① 产品切换器箭头不被裁 ② tab 不换行/不收缩（供 JS 精确测宽） ③ 顶栏三栏配平（操作栏收缩到内容宽，把富余空间让给品牌栏，修 logo 被挤小 + 「下载」左侧大片留白）④「更多 ▾」按钮与下拉面板样式。 ========================================================================== */ /* ① 产品切换器：自带 overflow-hidden，拥挤时会裁掉箭头（chevron）。放开裁剪即可；不锁 flex-shrink（锁死会反过来挤压同栏 logo）——留白由下方③的顶栏配平供给。 */ [data-component-part="products-selector-trigger"] { overflow: visible !important; } /* ② tab 项：label 是裸文本节点、默认可收缩 + white-space:normal，拥挤时会折两行。 nowrap 禁止换行、flex-shrink:0 保持自然宽——既避免折行，也让 JS 测得稳定真实宽度。 */ .nav-tabs-item { white-space: nowrap !important; flex-shrink: 0 !important; } /* ②-bis 防「先展开再收缩」闪现（FOUC）：Mintlify 把本站根目录 nav-overflow.js 延迟注入，实测 tab 行 ~29ms 就绘制、脚本 ~376ms 才建「更多」→ 中间 ~350ms 会先看到溢出的整行 tab。故默认先给 tab 行「单行裁切」：nowrap 不折行 + overflow:hidden 把放不下的 tab 直接裁在行右缘（不出现横向滚动条、不换行），视觉上就是「刚好一行」。脚本完成首次收纳后给打 dt-nav-ready，恢复 overflow:visible，让「更多」下拉面板能溢出显示。脚本若始终没跑，也只是右缘少显示一两个 tab，无破碎布局。 */ .nav-tabs { flex-wrap: nowrap; overflow: hidden; } html.dt-nav-ready .nav-tabs { overflow: visible; } /* ③ 顶栏三栏配平：Mintlify 顶栏是三等分 flex-1（品牌 | 搜索 | 操作），操作栏 justify-end 右对齐 → 「下载」左侧空出一大片；同时品牌栏被压得 logo 变小、产品名将被截断。让操作栏改为收缩到内容宽（不再 grow），富余空间回流给品牌/搜索栏， logo 与产品名恢复自然尺寸，留白也消失。选择器命中唯一的 flex-1+justify-end 操作栏。 */ #navbar div.flex-1.justify-end { flex-grow: 0 !important; } /* ④ 「更多 ▾」溢出按钮 —— 复用 .nav-tabs-item 的字号/高度/hover，追加下拉箭头与激活态。注意：Mintlify tab 的 `flex items-center gap-2` 是独立 Tailwind 原子类，克隆按钮没带，必须自己声明 flex 行布局；否则全局 `svg{display:block}` 会把箭头挤到标签下一行。 */ .dt-more-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%; cursor: pointer; background: none; border: 0; padding: 0; white-space: nowrap; /* 标签 + 箭头恒单行 */ flex-shrink: 0; } .dt-more-tab .dt-more-caret { width: 12px; height: 12px; transition: transform 0.2s ease; } /* 面板展开时箭头联动翻转向上（hover / 键盘 focus / 点击展开三种触发都覆盖）；面板是按钮的后代，鼠标移到面板上时 .dt-more-tab:hover 仍为真 → 箭头保持翻转，移开按钮+面板后随过渡平滑恢复向下。 */ .dt-more-tab:hover .dt-more-caret, .dt-more-tab:focus-within .dt-more-caret, .dt-more-tab[aria-expanded="true"] .dt-more-caret { transform: rotate(180deg); } /* 当前页所属 tab 被收进「更多」时，高亮按钮（对齐 Mintlify 选中态品牌色） */ .dt-more-tab.dt-more-active { color: var(--primary, #0066ff) !important; } html.dark .dt-more-tab.dt-more-active { color: var(--primary-light, #4d94ff) !important; } /* 下拉面板：卡片式，hover/focus 展开；对齐 Mintlify 弹层观感（圆角 + 阴影 + 描边）。背景必须用「实心」颜色：Mintlify 的 --background-light 是空格分隔 RGB 通道（如 255 255 255），直接当颜色用会解析为 transparent → 面板透明、正文文字透出（既显得「太淡」又像被压在标题下）。故这里硬编码不透明色，并用较重的阴影 + 描边把面板从渐变背景中抬起。 */ .dt-more-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 208px; padding: 6px; display: none; flex-direction: column; gap: 2px; background: #ffffff; border: 1px solid rgba(23, 26, 29, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(23, 26, 29, 0.16), 0 2px 8px rgba(23, 26, 29, 0.08); } html.dark .dt-more-panel { background: #1b1e24; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } /* 透明「悬停桥」——填平按钮底与面板顶之间的 6px 间隙： ::before 属于 .dt-more-panel，鼠标从按钮下移经过间隙时仍命中 .dt-more-panel:hover，面板不会因跨越空隙而收起（修「鼠标 hover 不上去/无法选中」）。 */ .dt-more-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .dt-more-tab:hover .dt-more-panel, .dt-more-tab:focus-within .dt-more-panel, .dt-more-panel:hover, .dt-more-tab[aria-expanded="true"] .dt-more-panel { display: flex; } /* 面板项：图标 + 文字，横向排布；hover 底色 + 选中品牌色 */ .dt-more-panel .dt-more-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700, #374151); white-space: nowrap; text-decoration: none; } html.dark .dt-more-panel .dt-more-item { color: rgba(255, 255, 255, 0.75); } .dt-more-panel .dt-more-item:hover { background: rgba(0, 102, 255, 0.08); } .dt-more-panel .dt-more-item.dt-more-item-active { color: var(--primary, #0066ff); background: rgba(0, 102, 255, 0.1); } .dt-more-panel .dt-more-item img { width: 18px; height: 18px; flex: none; } img[src*="/logo/icons/dev.svg"] { -webkit-mask-image: url(/logo/icons/dev-glyph.svg); mask-image: url(/logo/icons/dev-glyph.svg); } img[src*="/logo/icons/oa.svg"] { -webkit-mask-image: url(/logo/icons/oa-glyph.svg); mask-image: url(/logo/icons/oa-glyph.svg); } /* ============================================================ Embed / share mode — 无框架分享视图（?embed / ?share） embed-mode.js 在 URL 带 ?embed（或 ?share）时给打 dt-embed，隐藏整个 chrome，让单篇文档可作为干净的独立页分享给客户。 #navbar / #sidebar / #table-of-contents / footer 均为稳定 id。 ============================================================ */ html.dt-embed #navbar, html.dt-embed #sidebar, html.dt-embed #table-of-contents, html.dt-embed footer { display: none !important; } /* navbar 隐藏后，把它预留的顶部空间换成一个舒适的留白（而非贴顶） */ html.dt-embed :where(div):has(> #content-area) { padding-top: 2.5rem !important; }

​何时使用

​组件示例

​组件属性

何时使用

组件示例

组件属性