/* ============================================================ WUJI × Mintlify — 组件库皮肤 ------------------------------------------------------------ 全部数值取自线上站的实测计算样式（pr-461 预览站，1440 视口），不是估的。抽取脚本：Playwright 读 getComputedStyle。规则： 1. 只用 Mintlify 标准组件，不自绘 React。 2. 只通过官方钩子上妆：元素类 .card / .tile / .columns / .badge 稳定数据属性 [data-component-part="..."] ID 选择器 #navbar / #sidebar / #page-title / #content-area 组件 className prop（定位变体的唯一手段） 3. 不咬 Mintlify 的内部包裹层（.w-full、.mt-8），那些不在契约里。 4. Mintlify 不提供 --primary / --foreground 变量，只有 .bg-primary / .text-primary 工具类。色彩令牌全部自己定义。目录：0 令牌 · 1 Card · 2 Columns · 3 Tile · 4 Badge 5 CodeGroup · 6 正文组件 · 7 站点外壳 · 8 响应式 ============================================================ */ /* ============ 0. 设计令牌（逐值对齐线上 --wj-*）============ */ :root { --wj-brand: #207fff; --wj-brand-600: #1a66cc; --wj-brand-text: #1a66cc; --wj-brand-tint: color-mix(in srgb, var(--wj-brand) 12%, transparent); --wj-foreground: #1d1d1f; --wj-muted: #6e6e73; --wj-faint: #696970; --wj-success: #21c45d; --wj-page: #ffffff; --wj-paper: #ffffff; --wj-elev: #f5f5f7; --wj-elev-hi: #eeeef0; --wj-band: #efeff1; --wj-fill: rgba(0, 0, 0, 0.043); --wj-fill-hi: rgba(0, 0, 0, 0.075); --wj-border: rgba(0, 0, 0, 0.12); --wj-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.68), 0 3px 8px rgba(0, 0, 0, 0.08); --wj-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.1); /* 线上是 22 / 14，别用 Mintlify 默认的 16 */ --wj-r: 22px; --wj-r-sm: 14px; /* 内外圆角对应：内框圆角 = 外圆角 - 内缩。磁贴画框内缩 12px，图片圆角 = 22 - 12 = 10px */ --wj-inset: 12px; --wj-r-in: calc(var(--wj-r) - var(--wj-inset)); --wj-gap: 16px; --wj-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --wj-mono: GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace; } /* 隐藏 Mintlify 自动添加的页脚品牌标识，保留项目自定义页脚链接。 */ footer#footer a[href*="utm_campaign=poweredBy"] { display: none !important; } .dark { --wj-brand-text: #4d9bff; --wj-brand-tint: color-mix(in srgb, var(--wj-brand) 22%, transparent); --wj-foreground: #f5f5f7; --wj-muted: #a1a1a6; --wj-faint: #86868b; --wj-success: #4ade80; --wj-page: #000000; --wj-paper: #1a1a1c; --wj-elev: #1d1d1f; --wj-elev-hi: #2c2c2e; --wj-band: #000000; --wj-fill: rgba(255, 255, 255, 0.15); --wj-fill-hi: rgba(255, 255, 255, 0.22); --wj-border: rgba(255, 255, 255, 0.17); --wj-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5); } /* ============ 1. Card ============ 线上对应 .qs-task（快速开始，22px 圆角 / 24px×26px 内边距 / 224px 行高）变体（className prop）： .wj-pill 胶囊入口，对齐线上 .hero-chip .wj-photo 摄影图 cover .wj-media 图片铺满做底、文案压在上面（对齐 .wn-deck-card / .qs-hero） .wj-quiet 透明底，只借排版（hero 左栏） .wj-soon 即将上线 */ .card { display: flex; flex-direction: column; height: 100%; margin-block: 0; /* Mintlify 默认同时有 border 与 ring，两个都要清，否则暗色下留灰圈 */ border: 0; outline: 0; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-radius: var(--wj-r); background: var(--wj-elev); transition: transform 200ms var(--wj-ease), background 200ms var(--wj-ease), box-shadow 200ms var(--wj-ease); } .card:hover { transform: translateY(-3px); background: var(--wj-elev-hi); box-shadow: var(--wj-shadow); } /* 竖排卡：线上 .qs-task = padding 24px 26px，最小高 224px */ .card [data-component-part="card-content-container"]:not(.items-center) { display: flex; flex: 1; flex-direction: column; padding: 24px 26px; } /* 横排卡（horizontal）容器自带 .items-center，保持 row 方向 */ .card [data-component-part="card-content-container"].items-center { flex: 1; padding: 18px 22px; } .card [data-component-part="card-title"] { font-size: 1.3125rem; /* 21px，实测 .doc-card h4 / .qs-task 标题 */ font-weight: 600; line-height: 1.5; letter-spacing: -0.016em; color: var(--wj-foreground); } /* Keep product names such as "Hand 2" together when a card title wraps. */ .wj-nowrap { white-space: nowrap; } /* 实测 .qs-task 描述 14px / .doc-card p 15px */ .card [data-component-part="card-content"] { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--wj-muted); } .card [data-component-part="card-cta"] { margin-top: auto; padding-top: 1rem; font-size: 0.8125rem; /* 13px */ color: var(--wj-faint); } .card:hover [data-component-part="card-cta"] { color: var(--wj-brand-text); } .card [data-component-part="card-icon"] { color: var(--wj-brand); } /* 图片卡：线稿 GIF 用 contain 不裁切 */ .card [data-component-part="card-image"] { height: 10.5rem; padding: 1rem 1.25rem; background: var(--wj-paper); object-fit: contain; border: 0; border-radius: 0; } /* 1a. 胶囊入口 —— 线上 .hero-chip：36px 高 / 8px 14px / 13.5px 500 / fill 底 */ .card.wj-pill { height: auto; border-radius: 999px; background: var(--wj-fill); overflow: visible; /* 999px 圆角配 overflow:hidden 会裁掉贴边文字 */ } .card.wj-pill:hover { background: var(--wj-fill-hi); box-shadow: none; transform: none; } .card.wj-pill [data-component-part="card-content-container"] { gap: 7px; padding: 8px 14px; } .card.wj-pill [data-component-part="card-title"] { font-size: 0.84375rem; /* 13.5px */ font-weight: 500; line-height: 1.5; letter-spacing: 0; white-space: nowrap; } .card.wj-pill [data-component-part="card-icon"] { flex: none; width: 0.85rem; height: 0.85rem; } .card.wj-pill.wj-pill-cta [data-component-part="card-title"] { color: var(--wj-brand-text); } /* 1b. 摄影图 */ .card.wj-photo [data-component-part="card-image"] { height: 13rem; padding: 0; object-fit: cover; } /* 1c. 媒体卡 —— 线上 .wn-deck-card：22px 圆角，h3 34px/600，cat 12px 等宽 */ .card.wj-media { position: relative; min-height: 410px; background: #111; } .card.wj-media:hover { background: #111; } .card.wj-media [data-component-part="card-image"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; object-fit: cover; background: transparent; } .card.wj-media [data-component-part="card-content-container"] { position: relative; z-index: 1; justify-content: flex-end; padding: 34px 38px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.72) 100%); } .card.wj-media [data-component-part="card-title"] { font-size: 2.125rem; /* 34px */ line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; color: #fff; } .card.wj-media [data-component-part="card-content"] { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } .card.wj-media [data-component-part="card-cta"] { font-family: var(--wj-mono); font-size: 0.75rem; font-weight: 650; color: rgba(255, 255, 255, 0.9); } /* 1d. 静默卡 —— hero 左栏：56px 标题 / 16px 正文 */ .card.wj-quiet { background: transparent; justify-content: flex-start; } .card.wj-quiet:hover { transform: none; background: transparent; box-shadow: none; } .card.wj-quiet [data-component-part="card-content-container"] { padding-inline: 0; } .card.wj-quiet [data-component-part="card-title"] { font-size: 3.5rem; /* 56px */ line-height: 1.06; letter-spacing: -0.04em; font-weight: 600; } .card.wj-quiet [data-component-part="card-content"] { margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--wj-foreground); } .card.wj-quiet [data-component-part="card-cta"] { margin-top: 1.5rem; padding-top: 0; font-size: 0.875rem; color: var(--wj-brand-text); } /* 1e. 即将上线 */ .card.wj-soon { opacity: 0.6; pointer-events: none; } /* ============ 2. Columns ============ */ .columns { gap: var(--wj-gap); align-items: stretch; } .columns > * { margin-block: 0; } /* ============ 3. Tile ============ 产品卡用 Tile 不用 Card，唯一理由：children 能放两张图，配 block dark:hidden / hidden dark:block 做明暗双版线稿。 Card 的 img 只收单个 src，暗色下会露白底。线上 .doc-card：346×398，圆角 14px，底色 elev。 */ .tile { position: relative; height: 100%; overflow: hidden; border: 0; border-radius: var(--wj-r-sm); transition: transform 200ms var(--wj-ease), box-shadow 200ms var(--wj-ease); /* 卡内分区（图区画框 / 文案区）的底色。用变量而不是直接写颜色：选中态只要改这个变量就能让两块一起透出卡身底色，不必和第 30 节的 .tile.wj-product.wj-3x2 比选择器优先级。 */ --wj-tile-fill: var(--wj-elev); } .tile:hover { transform: translateY(-3px); box-shadow: var(--wj-shadow); } /* 官方点阵底纹不要 */ .tile [data-component-part="tile-background-light"], .tile [data-component-part="tile-background-dark"] { display: none; } .tile [data-component-part="tile-children-container"] { padding: 0; border-radius: 0; background: var(--wj-tile-fill); } .tile [data-component-part="tile-children-inner-container"] { padding: 0; } .tile [data-component-part="tile-children-inner-container"] img { width: 100%; height: 100%; max-width: none; max-height: none; transition: transform 340ms var(--wj-ease); } .tile [data-component-part="tile-text-container"] { align-items: flex-start; text-align: left; } /* 3a. 产品磁贴 */ .tile.wj-product { background: var(--wj-elev); } .tile.wj-product [data-component-part="tile-children-container"] { /* 实测 .dc-img = 346×238，padding 12px，底色与卡身同为 elev，图片自身另有 10px 圆角（不是容器的） */ height: 238px; background: var(--wj-tile-fill); border-radius: var(--wj-r-sm) var(--wj-r-sm) 0 0; } .tile.wj-product [data-component-part="tile-children-inner-container"] { padding: 12px; } .tile.wj-product [data-component-part="tile-children-inner-container"] img { object-fit: contain; border-radius: 10px; } .tile.wj-product:hover [data-component-part="tile-children-inner-container"] img { transform: none; } .tile.wj-product [data-component-part="tile-text-container"] { flex: 1; gap: 0.45rem; justify-content: flex-start; padding: 19px 22px 22px; background: var(--wj-tile-fill); border-radius: 0 0 var(--wj-r-sm) var(--wj-r-sm); } .tile.wj-product [data-component-part="tile-title"] { font-size: 1.3125rem; /* 21px，实测 .doc-card h4 */ font-weight: 600; letter-spacing: -0.016em; color: var(--wj-foreground); } .tile.wj-product [data-component-part="tile-description"] { font-size: 0.9375rem; line-height: 1.47; color: var(--wj-muted); white-space: normal; overflow: visible; text-overflow: clip; } .tile.wj-archived { opacity: 0.72; } /* 3b. 视频磁贴 */ .tile.wj-video { border-radius: var(--wj-r); } .tile.wj-video [data-component-part="tile-children-container"] { height: 232px; } .tile.wj-video [data-component-part="tile-children-inner-container"] img { object-fit: cover; } .tile.wj-video:hover [data-component-part="tile-children-inner-container"] img { transform: scale(1.045); } .tile.wj-video [data-component-part="tile-text-container"] { position: absolute; inset: auto 0 0 0; z-index: 1; gap: 0.25rem; padding: 3rem 1.4rem 1.25rem; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%); } .tile.wj-video [data-component-part="tile-title"] { font-size: 1.125rem; font-weight: 620; letter-spacing: -0.014em; color: #fff; } .tile.wj-video [data-component-part="tile-description"] { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); } /* ============ 4. Badge ============ 产品胶囊、版本、归档标统一走 Badge。线上是 12px 等宽。 */ .badge { font-family: var(--wj-mono); font-size: 0.75rem; letter-spacing: 0; } /* ============ 5. CodeGroup ============ 线上 .hero-code：16px 圆角，底色 elev。 */ #content-area pre { border-radius: var(--wj-r-sm); } .wj-term { position: relative; border: 0; border-radius: 16px; overflow: hidden; background: var(--wj-elev); box-shadow: var(--wj-shadow-lg); } .wj-term::before { content: ""; display: block; height: 2.5rem; /* background 简写里颜色只能写在最后一层，混写整条声明会被丢弃 */ background-color: transparent; background-image: radial-gradient(circle at 20px 50%, #ff5f57 5.5px, transparent 6px), radial-gradient(circle at 40px 50%, #febc2e 5.5px, transparent 6px), radial-gradient(circle at 60px 50%, #28c840 5.5px, transparent 6px); background-repeat: no-repeat; } .wj-term::after { content: "terminal"; position: absolute; top: 0; left: 82px; height: 2.5rem; display: flex; align-items: center; font-family: var(--wj-mono); font-size: 0.8125rem; color: var(--wj-muted); pointer-events: none; } .wj-term pre { min-height: 24rem; border-radius: 0; } /* ============ 6. 正文组件 ============ 线上 284 篇文档实际只用到 Callout(535) / Update(218) / Steps(56) 三族。 */ callout { border: 0; border-left: 3px solid var(--wj-brand); border-radius: var(--wj-r-sm); } accordion, frame { border: 0; border-radius: var(--wj-r-sm); background: var(--wj-elev); } /* ============ 7. 站点外壳 ============ */ /* 内页大标题 —— #page-title 本身就是 h1，写 #page-title h1 匹配不到。线上 .hero-title-line = 56px / 600 / lh 1.06 / ls -0.04em */ h1#page-title { font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; } /* 首页：hero 是左文右终端的两栏，标题得进左栏，所以把 Mintlify 自带的整块页头收起来，交给 .wj-quiet 卡片当 hero。作用域用官方的 html[data-current-path]，只影响首页，不波及内页。 */ html[data-current-path="/"] #header, html[data-current-path="/en"] #header { display: none; } /* 区块标题 —— 线上 .wn-head h2 = 32px / 600 / ls -0.022em。卡片标题也渲染成

，而 #content-area h2 是 ID 选择器（1,0,1），会压过 .card [data-component-part="card-title"]（0,2,0），把卡片标题一起放大。所以必须用 > 限定为 .mdx-content 的直接子级。 / #content-area > .mdx-content > h2 { margin-top: 3.5rem; font-size: 2rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.022em; } / 组头（硬件 / 软件）—— 线上 .doc-group-head / #content-area > .mdx-content > h3 { margin-top: 2rem; font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.014em; color: var(--wj-foreground); } #navbar { border-bottom: 0; } / 当前页高亮：Mintlify 用的是 aria-current="page"，不是 data-active / #sidebar a[aria-current="page"], #sidebar a[data-active="true"] { color: var(--wj-brand-text) !important; font-weight: 600; } / ============ 8. 响应式 ============ / @media (max-width: 1024px) { .card.wj-quiet [data-component-part="card-title"] { font-size: 2.5rem; } .card.wj-media { min-height: 20rem; } .wj-term pre { min-height: 16rem; } } @media (max-width: 640px) { .card.wj-quiet [data-component-part="card-title"] { font-size: 2rem; } .card.wj-media { min-height: 16rem; } .card.wj-media [data-component-part="card-content-container"] { padding: 1.5rem; } .card.wj-media [data-component-part="card-title"] { font-size: 1.5rem; } #content-area > .mdx-content > h2 { font-size: 1.625rem; } } / 产品磁贴标题里的行内 code 当产品胶囊用。 Tile 的 title 支持行内 Markdown，所以 `Hand 2` 会渲染成真正的，不需要伪元素造假，也不用额外的 Badge 行。 / .tile.wj-product [data-component-part="tile-title"] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .tile.wj-product [data-component-part="tile-title"] code { padding: 3px 9px; border: 0; border-radius: 999px; background: var(--wj-fill); font-family: var(--wj-mono); font-size: 11px; font-weight: 400; color: var(--wj-muted); } / ---- 侧边栏一致性 ---- 1. 不要展开箭头：导航做成扁平分组后仍可能留下折叠图标，统一藏掉。 2. 左栏不出现「On this page」：目录只走右侧 TOC / wide 模式下不出现。 / #sidebar [data-component-part="sidebar-group-chevron"], #sidebar svg.chevron, #sidebar-content #table-of-contents, #sidebar #toc, #sidebar [id="table-of-contents"] { display: none !important; } /* ============ 9. 侧边栏：文档树形态 ============ 线上是 300px 宽、#f5f5f7 底的产品文档树。Mintlify 的侧栏能表达产品 → 分组 → 子分组 → 页，H2/H3 只在右侧 TOC，这是框架边界。下面把它按树的观感上妆：缩进引导线 + 紧凑行高 + 选中行胶囊。 / #sidebar { font-size: 0.875rem; } #sidebar-content { padding-right: 0.75rem; } / 每一行的共同底子；三档排版在第 67 节按层级分别定义 / #sidebar a { position: relative; transition: background 140ms var(--wj-ease), color 140ms var(--wj-ease); } / 悬停/选中底色画在 ::after 上，见文件末「行胶囊避让竖线」 / / 缩进引导线：给每个分组的页列表画一条竖线，读起来就是树 / #sidebar ul, #sidebar [data-component-part="scroll-area-content"] > div > div > div { position: relative; } / ---- 快速开始 bento：实测 4 列 × 258px，行高 224px，大图卡跨 2×2 ---- / .columns .card { min-height: 224px; } .card.wj-bento-hero { grid-column: span 2; grid-row: span 2; min-height: 464px; } .card.wj-bento-hero [data-component-part="card-title"] { font-size: 2.25rem; } @media (max-width: 640px) { .card.wj-bento-hero { grid-column: auto; grid-row: auto; min-height: 16rem; } } / ---- 图标：WUJI 自己的 SVG 是 stroke 线稿，按线宽显示 ---- / .card [data-component-part="card-icon"], #sidebar img[src="/assets/icons/"] { width: 1.25rem; height: 1.25rem; } /* ============ 10. 卡片比例与圆角统一 ============ 线上实测尺寸（1440 视口，内容区 1080）： .doc-card 346×398 r=14 图区 346×238（占 59.8%） .qs-task 258×224 r=22 .wn-deck-card 780×410 r=22 .hero-code 480×500 r=16 Mintlify 的内容区更窄，所以不锁死像素，改用 aspect-ratio 锁比例；圆角按用户要求全站统一到 22px，不保留线上 14/16 的例外。 / :root { --wj-r: 22px; --wj-r-sm: 22px; } .card, .tile, .wj-term { border-radius: var(--wj-r); } / 产品磁贴 346:398 ≈ 0.87，图区占 59.8% / .tile.wj-product { aspect-ratio: 346 / 398; display: flex; flex-direction: column; } .tile.wj-product [data-component-part="tile-children-container"] { flex: 0 0 59.8%; height: auto; border-radius: var(--wj-r) var(--wj-r) 0 0; } .tile.wj-product [data-component-part="tile-text-container"] { flex: 1 1 auto; border-radius: 0 0 var(--wj-r) var(--wj-r); } / 视频磁贴同比例，图区铺满 / .tile.wj-video { aspect-ratio: 346 / 398; border-radius: var(--wj-r); } .tile.wj-video [data-component-part="tile-children-container"] { height: 100%; } / 快速开始任务卡 258:224 ≈ 1.15 / .columns .card { min-height: 0; aspect-ratio: 258 / 224; } / 大图卡 780:410 ≈ 1.90（bento 里跨 2×2 时按两倍行高算） / .card.wj-media { aspect-ratio: 780 / 410; min-height: 0; } .card.wj-bento-hero { aspect-ratio: 258 / 224; } / 静默卡与胶囊不参与比例约束 / .card.wj-quiet, .card.wj-pill { aspect-ratio: auto; min-height: 0; } / 终端跟随统一圆角 / .wj-term::before { border-radius: var(--wj-r) var(--wj-r) 0 0; } / ============ 11. 间距节奏（实测值）============ 线上 1440 视口测得：内容列 1140，左右 padding 30px → 实际内容宽 1080 hero padding 44px 30px 12px，两栏 gap 56px 区块与区块之间 52px 区块标题 h2 高 48px，到内容 30px 组头（硬件/软件）高 34px，到卡片 15px 卡片栅格 gap 16px / / 区块标题：上 52 / 下 30，行高锁 48px / #content-area > .mdx-content > h2 { margin-top: 52px; margin-bottom: 30px; font-size: 2rem; / 32px / line-height: 48px; font-weight: 600; letter-spacing: -0.022em; } / 组头：上 30 / 下 15，行高锁 34px / #content-area > .mdx-content > h3 { margin-top: 30px; margin-bottom: 15px; font-size: 1.0625rem; line-height: 34px; font-weight: 620; letter-spacing: -0.014em; color: var(--wj-foreground); } / 相邻的两组卡片（如最新动态大卡 + 下面一排）之间也走 16px / #content-area > .mdx-content > .mdx-content + .mdx-content, .columns + .columns { margin-top: 16px; } / 栅格间距 / .columns { gap: 16px; } / hero 两栏 gap 56px —— Columns 默认 16px，只给 hero 那组放大。 Columns 不吃 className，所以按「首页第一个 columns」定位。 / html[data-current-path="/"] #content-area .columns:first-of-type { gap: 56px; } / hero 上下留白：线上 44px / 12px / html[data-current-path="/"] #content-area > .mdx-content > :first-child { margin-top: 44px; } / ============ 12. 阅读宽度 ============ Mintlify 没有 docs.json 层面的正文宽度设置项（settings-appearance 里没有），但外层的最大宽度上限是可以放开的。原则：只解除「最大宽度上限」，侧栏宽度、内容区的内外边距、栏间 gap 全部保持 Mintlify 默认——那些是框架自己的布局机制，动了会贴边。 / / 外壳上限 1472 → 1600，让宽屏多用一点。定位用官方 ID content-container 的父层。 / div:has(> #content-container) { max-width: 1600px !important; } / 顶栏的限宽容器（#navbar 的直接子级 .max-w-8xl）也要同步到 1600，否则视口宽于 1472 时 logo 与侧栏「概览」错开 (1600-1472)/2 = 64px。 / #navbar > .max-w-8xl { max-width: 1600px !important; } / ============ 13. Hero 修正 ============ 线上：两栏 544px + 480px（比例 1.133）、gap 56、垂直居中；终端 480×500；胶囊 125×36（内容宽，不拉满）。 / / 两栏按线上比例，而不是 Columns 默认的等分 / html[data-current-path="/"] #content-area .columns:first-of-type { grid-template-columns: 1.133fr 1fr !important; align-items: center; gap: 56px; } / 终端贴合内容高度，别用大 min-height 撑出空白 / .wj-term pre { min-height: 0; max-height: 27rem; } .wj-term { align-self: flex-start; } / 胶囊：内容宽 + 36px 高 + 图标与文字同轴 / .card.wj-pill { width: fit-content; justify-self: start; min-height: 36px; } .card.wj-pill [data-component-part="card-content-container"] { align-items: center; padding: 7px 14px; } .card.wj-pill [data-component-part="card-icon"] { align-self: center; margin: 0; flex: none; width: 14px; height: 14px; } .card.wj-pill [data-component-part="card-title"] { display: block; line-height: 20px; } / 删除：曾用 :nth-of-type(2) 定位首页胶囊行，胶囊移进 hero 左栏后这条会误命中「最新动态」那组 Columns，把两卡拉成各自满宽。教训：Columns 一律用 :has() 配自己的变体类定位，别用位置选择器。 / / 静默卡不拉满高度，贴着内容 / .card.wj-quiet { align-self: flex-start; height: auto; } / ============ 14. 定位修正 ============ Columns 不吃 className，之前用 :first-of-type 定位 hero 没命中（.mdx-content 下同类兄弟很多）。改用 :has() 按自己的变体类锚定。 / / hero 两栏：544 : 480 ≈ 1.133，垂直居中，gap 56 / / Columns 的 grid-cols 带 Tailwind 的 !important，同权重覆盖不掉，要改栏宽比例只能整体换成 flex。线上 hero 是 544 : 480 ≈ 1.133 : 1。 / #content-area .columns:has(> .card.wj-quiet) { display: flex !important; align-items: flex-start; / 左栏顶边与终端顶边对齐 / gap: 56px; } #content-area .columns:has(> .card.wj-quiet) > :first-child { flex: 1.133 1 0; min-width: 0; } #content-area .columns:has(> .card.wj-quiet) > :last-child { flex: 1 1 0; min-width: 0; } / 胶囊行：flex 左对齐，10px 间距，不占满栅格 / #content-area .columns:has(> .card.wj-pill) { display: flex !important; flex-wrap: wrap; gap: 10px; } / 胶囊锁 36px 高，图标与文字同轴 / .card.wj-pill { height: 36px; min-height: 36px; } .card.wj-pill [data-component-part="card-title"] { align-self: center; margin: 0; line-height: 1; } / 比例锁改成「最小高度」托底：aspect-ratio 会在窄列里把文字裁掉 / .columns .card { aspect-ratio: auto; min-height: 224px; } .card.wj-pill { aspect-ratio: auto; min-height: 36px; } .card.wj-quiet { aspect-ratio: auto; min-height: 0; } .card.wj-media { aspect-ratio: auto; min-height: 340px; } .card.wj-bento-hero { aspect-ratio: auto; min-height: 464px; } .tile.wj-product { aspect-ratio: auto; min-height: 0; } .tile.wj-product [data-component-part="tile-children-container"] { flex: 0 0 auto; height: 238px; } .tile.wj-video { aspect-ratio: auto; min-height: 0; } / ============ 15. 首页用满右侧 ============ 线上首页是「侧栏 + 内容列占满剩余宽度」，右侧没有 TOC 栏。 Mintlify 在 mode:"wide" 下仍给 main#content-container 留了 max-width: 864px，解除这一条即可；其余（侧栏宽度、内容区 padding / 负 margin）不动，否则内容会直接贴到窗口边缘。 / html[data-current-path="/"] #content-container, html[data-current-path="/en"] #content-container { max-width: none !important; } / 首页不需要右侧 TOC 栏 / html[data-current-path="/"] #content-side-layout, html[data-current-path="/en"] #content-side-layout { display: none; } / 胶囊里不要外链角标（mailto 会自动加一个，和文字打架）。只藏「直接挂在内容容器下的裸 svg」，别误伤 card-icon 里的箭头。 / .card.wj-pill [data-component-part="card-content-container"] > svg { display: none; } .card.wj-pill [data-component-part="card-icon"] { display: block; } .card.wj-pill [data-component-part="card-icon"] svg { display: block; } / ============ 16. Hero 的搜索行与 chips ============ 线上这两行在 hero 左栏内（544 / 1080 ≈ 53%）。 Columns 不能嵌套，所以放在 hero 下方，用宽度约束回到左栏的视觉位置。 / / 首页的搜索条与胶囊已嵌进 hero 左栏的 Card children，不再需要宽度约束；这条如果留着会因为「hero 里含 .wj-pill」而误命中整个 hero 两栏。 / / 搜索条：线上 .docp-search / hero 搜索框 —— 40px 高，11px 圆角，fill 底 / .card.wj-search { height: auto; min-height: 0; margin-top: 26px; border-radius: 14px; background: var(--wj-fill); cursor: text; } .card.wj-search:hover { transform: none; box-shadow: none; background: var(--wj-fill-hi); } .card.wj-search [data-component-part="card-content-container"] { gap: 10px; padding: 14px 18px; } .card.wj-search [data-component-part="card-title"] { font-size: 1rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--wj-faint); } .card.wj-search [data-component-part="card-icon"] { width: 18px; height: 18px; color: var(--wj-faint); } / ⌘K 角标靠右 / .card.wj-search [data-component-part="card-cta"] { margin: 0 0 0 auto; padding: 3px 8px; border-radius: 7px; background: var(--wj-paper); font-family: var(--wj-mono); font-size: 12px; color: var(--wj-faint); } / chips 行贴着搜索条 / / 发布记录顶部的产品筛选行：胶囊左对齐，不占满栅格 / html[data-current-path="/release-notes"] #content-area .columns:has(> .card.wj-pill) { display: flex !important; flex-wrap: wrap; gap: 10px; } / ============ 17. 发布记录的产品筛选卡 ============ 筛选卡就是「比例变体」组件本身：Tile + wj-product + wj-3x2。图区按 3:2 走、内缩 12px 露出卡片底色当画框、图自身带 10px 圆角。为什么不能用 Card 的 img prop：card-image 就是那张。 padding 把位图推进去了，但 border-radius 裁的是 border box，圆角只落在 img 的背景色上，位图四角仍是直角——看着就是「一层圆角矩形底色裹着一张直角图」。比例变体把图区拆成容器 + 内缩容器 + img 三层，圆角加在 img 上才真的裁到位图。筛选卡在比例变体之上只加三件事：可点、右上角状态点、选中配色。不带 href 所以渲染成非链接容器，点击不跳转；选中态与过滤行为由 filters.js 接管（Mintlify 官方的自定义脚本机制）。 / .tile.wj-filter { position: relative; cursor: pointer; user-select: none; transition: background 180ms var(--wj-ease), opacity 180ms var(--wj-ease), transform 180ms var(--wj-ease), box-shadow 180ms var(--wj-ease); } / 右上角状态点：未选中是空心细圈，选中是实心蓝点 / .tile.wj-filter::after { content: ""; position: absolute; top: 20px; right: 20px; z-index: 2; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid rgba(0, 0, 0, 0.26); background: transparent; transition: background 160ms var(--wj-ease), border-color 160ms var(--wj-ease); } .dark .tile.wj-filter::after { border-color: rgba(255, 255, 255, 0.34); } .tile.wj-filter.is-on::after, .dark .tile.wj-filter.is-on::after { border-color: var(--wj-brand); background: var(--wj-brand); } / 选中态：卡身刷品牌浅底，图区画框与文案区让位（--wj-tile-fill 置空），底色一次性透上来。两块各刷一遍 brand-tint 会因为它是半透明色而在交界处叠出一道深浅缝。 / .tile.wj-filter.is-on { background: var(--wj-brand-tint); --wj-tile-fill: transparent; } .tile.wj-filter.is-on [data-component-part="tile-title"] { color: var(--wj-brand-text); } / 未选中态（有别的卡被选中时）退到后面 / .tile.wj-filter.is-off { opacity: 0.45; } .tile.wj-filter.is-off:hover { opacity: 0.7; } / ============ 18. 右侧 TOC 的层级 ============ 月份与日期条目在 DOM 里都是 data-depth=0，框架没给层级。用锚点 href 的差异区分：日期锚点一定含产品名（-wuji-），月份不含。 / / 只在发布记录页做「月份 / 日期」两级区分。坑：`:not(:has(...))` 会把 :has 参数的优先级算进来（(1,2,3)），比后面写的 [data-active] 高亮规则（(1,2,1)）还高，全站生效就会压掉滚动高亮。 / html[data-current-path$="release-notes"] #content-side-layout li.toc-item > a[href="-wuji-"] { padding-left: 18px; font-size: 0.8125rem; color: var(--wj-muted); } html[data-current-path$="release-notes"] #content-side-layout li.toc-item:not(:has(> a[href="-wuji-"])) > a { margin-top: 10px; font-size: 0.875rem; font-weight: 650; color: var(--wj-foreground); } / 2026-10-12 是合并记录，目录项沿用产品发布记录的小字样式。 / html[data-current-path$="release-notes"] #content-side-layout li.toc-item:has(> a[href^="#2026-10-12"]) > a { margin-top: 0; padding-left: 18px; font-size: 0.8125rem; font-weight: 400; color: var(--wj-muted); } / ============ 19. Hero 左栏（搜索与胶囊已嵌入 Card children）============ Columns 不能嵌套，但 Card 的 children 可以放任意 MDX，所以把搜索条与胶囊放进 hero 左栏的 Card 里，排版才跟线上一致。 / .card.wj-quiet .card.wj-search { display: block; width: 100%; margin: 26px 0 0; } .card.wj-quiet .card.wj-pill { display: inline-flex; width: auto; margin: 0 10px 10px 0; vertical-align: middle; } / 胶囊与搜索条的间距交给搜索条的下外边距。坑：写成 `.wj-search + .wj-pill { margin-top }` 只会命中第一个胶囊，在 flex 行里就变成它比其余低几像素。 / / 外链角标只在胶囊里藏（mailto 会自动加一个，和文字打架） / .card.wj-pill a > svg, .card.wj-pill [data-component-part="card-content-container"] > svg, .card.wj-pill [data-component-part="card-content"] svg { display: none; } .card.wj-pill [data-component-part="card-icon"], .card.wj-pill [data-component-part="card-icon"] svg { display: block; } / hero 两栏顶对齐，避免左栏被拉长产生大空档 / #content-area .columns:has(> .card.wj-quiet) { align-items: flex-start; } / ============ 20. 嵌套卡片的层叠隔离 ============ .wj-quiet 的 56px 标题规则会串到它 children 里的搜索条与胶囊上，用更高优先级把子卡的排版拿回来（选择器多一个类，(0,3,0) > (0,2,0)）。 / .card.wj-quiet .card.wj-search [data-component-part="card-title"] { font-size: 1rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--wj-faint); } .card.wj-quiet .card.wj-pill [data-component-part="card-title"] { font-size: 0.84375rem; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--wj-foreground); white-space: nowrap; } .card.wj-quiet .card.wj-pill.wj-pill-cta [data-component-part="card-title"] { color: var(--wj-brand-text); } / 子卡不继承父卡的内容排版 / .card.wj-quiet .card [data-component-part="card-content"] { margin-top: 0; font-size: 0.875rem; color: var(--wj-muted); } / 父卡自己的正文（lede）保持 16px / .card.wj-quiet > [data-component-part="card-content-container"] [data-component-part="card-content"] { font-size: 1rem; line-height: 1.5; color: var(--wj-foreground); } / ============ 21. 去掉图片上的阴影遮罩 ============ 用户要求：所有图片上不要蒙版。视频封面改成「图在上、文案在下」，和产品磁贴同一套形态，不再用渐变压字。 / .tile.wj-video [data-component-part="tile-text-container"] { position: static; background: none; padding: 19px 22px 22px; } .tile.wj-video [data-component-part="tile-title"] { color: var(--wj-foreground); } .tile.wj-video [data-component-part="tile-description"] { color: var(--wj-muted); } / 媒体卡（最新动态 / 快速开始大图）同样去掉渐变蒙版 / .card.wj-media [data-component-part="card-content-container"] { background: none; } / 去掉蒙版后白字看不清，改为图片下方的实底文案区 / .card.wj-media { aspect-ratio: auto; min-height: 0; background: var(--wj-elev); } .card.wj-media:hover { background: var(--wj-elev-hi); } .card.wj-media [data-component-part="card-image"] { position: static; width: 100%; height: 15rem; object-fit: cover; } .card.wj-media [data-component-part="card-content-container"] { position: static; justify-content: flex-start; padding: 19px 22px 22px; } .card.wj-media [data-component-part="card-title"] { font-size: 1.625rem; color: var(--wj-foreground); } .card.wj-media [data-component-part="card-content"] { color: var(--wj-muted); } .card.wj-media [data-component-part="card-cta"] { color: var(--wj-faint); } / 视频封面用 cover 铺满图区 / .tile.wj-product [data-component-part="tile-children-inner-container"] img[src="/assets/videos/"] { object-fit: cover; border-radius: 10px; } /* ============ 22. 侧栏里的 WUJI 产品图标 ============ docs.json 的 icon 指向项目内 svg 时，Mintlify 用加载， svg 里的 stroke="currentColor" 会解析成黑色、不跟随主题。线稿是单色，暗色下反相即可得到浅色描边。 / .card [data-component-part="card-icon"] img[src="/assets/icons/"] { width: 16px; height: 16px; opacity: 0.75; } .dark .card [data-component-part="card-icon"] img[src="/assets/icons/"] { filter: invert(1); opacity: 0.8; } / ============ 23. Hero 标题显式断行 ============ Card 的 title prop 放不进，线上是两行（「欢迎来到」/「Wuji 开发者文档」）。改用 children 里的 span + ，标题样式挂在自己的类上。 / .card.wj-quiet .wj-hero-title { display: block; font-size: 3.5rem; / 56px，实测线上 .hero-title-line / line-height: 1.18; letter-spacing: -0.04em; font-weight: 600; color: var(--wj-foreground); } .card.wj-quiet .wj-hero-lede { display: block; margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--wj-muted); } / ============ 24. 胶囊箭头 ============ 线上是细灰小箭头 + 与文字留空隙；之前又大又蓝还贴着字。 / .card.wj-pill [data-component-part="card-icon"], .card.wj-quiet .card.wj-pill [data-component-part="card-icon"] { width: 13px; height: 13px; flex: none; color: var(--wj-faint); opacity: 0.85; } .card.wj-pill [data-component-part="card-content-container"] { gap: 9px; } .card.wj-pill:hover [data-component-part="card-icon"] { color: var(--wj-brand-text); opacity: 1; } / ============ 25. 叠加式磁贴 wj-overlay ============ 线上首页视频区：图片铺满，文案压在图上，深色墨、无渐变遮罩（配图左侧留了浅色区专门给文字）。 .wj-overlay-wide 用于通栏那张（图 2400×904，比例 2.655）。 / .tile.wj-overlay { position: relative; aspect-ratio: 2000 / 1126; / 16:9 的两张 / border-radius: var(--wj-r); overflow: hidden; background: var(--wj-elev); } .tile.wj-overlay-wide { aspect-ratio: 2400 / 904; grid-column: 1 / -1; } .tile.wj-overlay [data-component-part="tile-children-container"] { position: absolute; inset: 0; height: 100%; background: none; } .tile.wj-overlay [data-component-part="tile-children-inner-container"] { padding: 0; } .tile.wj-overlay [data-component-part="tile-children-inner-container"] img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } / 文案压在左下角，深色墨，不加任何蒙版 / .tile.wj-overlay [data-component-part="tile-text-container"] { position: absolute; inset: auto auto 0 0; z-index: 1; gap: 0.35rem; width: min(46%, 30rem); padding: 0 0 clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px); background: none; text-align: left; } .tile.wj-overlay [data-component-part="tile-title"] { font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; color: #1d1d1f; / 配图浅色区，恒深墨 / white-space: normal; } .tile.wj-overlay [data-component-part="tile-description"] { font-size: 0.9375rem; line-height: 1.45; color: #6e6e73; white-space: normal; overflow: visible; text-overflow: clip; } .tile.wj-overlay:hover [data-component-part="tile-children-inner-container"] img { transform: none; } / ============ 26. 媒体卡回到叠加式（深墨、无遮罩）============ / .card.wj-media { position: relative; aspect-ratio: 1400 / 538; min-height: 0; background: var(--wj-elev); overflow: hidden; } .card.wj-media:hover { background: var(--wj-elev); } .card.wj-media [data-component-part="card-image"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; object-fit: cover; } .card.wj-media [data-component-part="card-content-container"] { position: absolute; inset: auto auto 0 0; z-index: 1; justify-content: flex-end; width: min(52%, 30rem); padding: 0 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); background: none; } .card.wj-media [data-component-part="card-title"] { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.16; letter-spacing: -0.02em; font-weight: 600; color: var(--wj-foreground); } .card.wj-media [data-component-part="card-content"] { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.45; color: var(--wj-muted); } .card.wj-media [data-component-part="card-cta"] { margin-top: 0.8rem; padding-top: 0; font-family: var(--wj-mono); font-size: 0.75rem; color: var(--wj-faint); } / 图标放大、压在文案上方 / .card.wj-media [data-component-part="card-icon"] { width: 26px; height: 26px; margin-bottom: 0.5rem; color: var(--wj-brand); } / 快速开始的大图卡：比例按 quick-start-v2.webp（1200×817） / .card.wj-bento-hero { aspect-ratio: 1200 / 817; min-height: 0; grid-column: span 2; grid-row: span 2; } / ============ 27. 叠加式的墨色变体 ============ 墨色跟配图走，不靠遮罩：默认（浅色配图）= 深墨 .wj-ink-light（深色配图）= 浅墨线上 .wn-deck-card 是 780×410（比例 1.9），不是配图原始的 2.6，按 1.9 留出文字空间，图用 cover 裁切。 / .card.wj-media { aspect-ratio: 780 / 410; } .card.wj-media.wj-ink-light [data-component-part="card-title"] { color: #fff; } .card.wj-media.wj-ink-light [data-component-part="card-content"] { color: rgba(255,255,255,0.88); } .card.wj-media.wj-ink-light [data-component-part="card-cta"] { color: rgba(255,255,255,0.8); } .card.wj-media.wj-ink-light [data-component-part="card-icon"] { color: #fff; } .tile.wj-overlay.wj-ink-light [data-component-part="tile-title"] { color: #fff; } .tile.wj-overlay.wj-ink-light [data-component-part="tile-description"] { color: rgba(255,255,255,0.84); } / 文案容器改为从底部向上排，内容再多也不会溢到图外 / .card.wj-media [data-component-part="card-content-container"] { inset: auto auto 0 0; display: flex; flex-direction: column; justify-content: flex-end; max-height: 100%; overflow: hidden; } / ============ 28. 横排卡不要被最小高度撑开 ============ .columns .card{min-height:224px} 是给竖排任务卡的，最新动态那排横排小卡会被撑得很空。 / .columns .card:has([data-component-part="card-content-container"].items-center) { min-height: 0; } / 快速开始的竖排任务卡：内容多时允许长高，别裁字 / .columns .card [data-component-part="card-content-container"]:not(.items-center) { overflow: visible; } / ============ 29. 最新动态下方的产品小卡 wj-stat ============ 去掉 horizontal 后图标自然排在标题上方；图标放大到 28px。 / .card.wj-stat { min-height: 0; } .card.wj-stat [data-component-part="card-content-container"] { padding: 18px 20px 20px; } .card.wj-stat [data-component-part="card-icon"] { width: 28px; height: 28px; margin-bottom: 0.75rem; color: var(--wj-brand); } .card.wj-stat img[src="/assets/icons/"] { width: 28px; height: 28px; opacity: 0.9; } .card.wj-stat [data-component-part="card-title"] { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em; } .card.wj-stat [data-component-part="card-cta"] { margin-top: 0.6rem; padding-top: 0; font-family: var(--wj-mono); font-size: 0.75rem; color: var(--wj-faint); } /* ============ 30. 磁贴按配图比例 ============ 卡片宽高比跟着配图走，不再用固定 238px 图区高。 .wj-16x9 film-.webp / 归档截图（1280×720、1200×675 等） .wj-3x2 cover-vid-（720×480、3966×2644） .wj-art 线稿 GIF，contain 不裁切 / .tile.wj-product.wj-16x9 [data-component-part="tile-children-container"] { height: auto; aspect-ratio: 16 / 9; background: var(--wj-tile-fill); } .tile.wj-product.wj-3x2 [data-component-part="tile-children-container"] { height: auto; aspect-ratio: 3 / 2; background: var(--wj-tile-fill); } .tile.wj-product.wj-4x3 [data-component-part="tile-children-container"] { height: auto; aspect-ratio: 4 / 3; background: var(--wj-tile-fill); } .tile.wj-product.wj-art [data-component-part="tile-children-container"] { height: auto; aspect-ratio: 3 / 2; } / 图片一律内缩，四周露出卡片底色当画框，图自身带 10px 圆角 —— 这是 WUJI 产品卡的标志性做法，出血会和首页不一致。 / .tile.wj-product.wj-16x9 [data-component-part="tile-children-inner-container"], .tile.wj-product.wj-3x2 [data-component-part="tile-children-inner-container"] { padding: 12px; } .tile.wj-product.wj-16x9 [data-component-part="tile-children-inner-container"] img, .tile.wj-product.wj-3x2 [data-component-part="tile-children-inner-container"] img, .tile.wj-product.wj-4x3 [data-component-part="tile-children-inner-container"] img { object-fit: cover; border-radius: 10px; } .tile.wj-product.wj-art [data-component-part="tile-children-inner-container"] { padding: 12px; } .tile.wj-product.wj-art [data-component-part="tile-children-inner-container"] img { object-fit: contain; border-radius: 10px; } / 画框四边要一样宽。 img 写的是 width:100%/height:100%，但父级高度来自 aspect-ratio， height:100% 解不出百分比就退回配图的固有比例——于是图比内框高 8px，上边 12px、下边只剩 4px，还把内框撑出图区。把内框改成绝对定位贴满图区，媒体再拉满，四边就都是 12px。 / .tile.wj-product.wj-16x9 [data-component-part="tile-children-container"], .tile.wj-product.wj-3x2 [data-component-part="tile-children-container"], .tile.wj-product.wj-4x3 [data-component-part="tile-children-container"], .tile.wj-product.wj-art [data-component-part="tile-children-container"] { position: relative; } .tile.wj-product.wj-16x9 [data-component-part="tile-children-inner-container"], .tile.wj-product.wj-3x2 [data-component-part="tile-children-inner-container"], .tile.wj-product.wj-4x3 [data-component-part="tile-children-inner-container"], .tile.wj-product.wj-art [data-component-part="tile-children-inner-container"] { position: absolute; inset: 0; padding: 12px; } / 媒体区认 img / video / iframe 三种元素，几何与圆角一视同仁。 Mintlify 官方支持在 MDX 里直接写

​Key Updates

​Key Updates

​Key Updates

Key Updates

Key Updates

Key Updates