前端UI組件設計系統(tǒng)【免費下載鏈接】blueprintA React-based UI toolkit for the web項目地址https://gitcode.com/gh_mirrors/bl/blueprint點擊查看免費下載Blueprint 是 Palantir 開源的一套 React UI 工具集而設計令牌Design Tokens正是其視覺語言體系的單一事實來源。本文基于 packages/core/src/design-tokens/README.md 與 packages/core/src/design-tokens/USAGE.md結合倉庫內真實的構建配置與組件消費代碼系統(tǒng)講解 Blueprint 設計令牌從 JSON 定義、Style Dictionary 編譯到 CSS 自定義屬性--bp-*落地再到 Button 等組件消費的完整鏈路。讀完本文你將掌握令牌目錄結構、DTCG 標準屬性、com.blueprint.derive派生擴展、dark 主題覆蓋機制、漸進增強輸出策略以及如何在自有組件中正確使用 surface / intent / typography 令牌實現(xiàn)跨主題一致渲染。注意當前設計令牌體系在倉庫中被標記為EXPERIMENTAL屬于演進中的下一代BP6/BP7視覺基礎設施隨版本迭代 API 與生成產(chǎn)物可能調整使用時應關注包內 changelog。一、Design Tokens 是什么一套以 CSS 變量為載體的令牌體系Blueprint 設計令牌由 Style Dictionary 驅動生成。其核心思想是以 JSON 文件定義顏色、尺寸、陰影、字體等所有視覺原子值編譯為帶--bp-前綴的 CSS 自定義屬性掛載在:root上組件與業(yè)務代碼統(tǒng)一通過var(--bp-...)消費從而在 light / dark 等不同配色方案之間保持一致的主題化體驗無需在每個組件里重復硬編碼樣式邏輯。使用方式極其簡單——令牌在:root上以 CSS 自定義屬性形式可用.element { color: var(--bp-typography-color-default-rest); background: var(--bp-surface-background-color-default-rest); border-radius: var(--bp-surface-border-radius); padding: calc(var(--bp-surface-spacing) * 2); }從源碼結構看令牌體系由三部分組成詳見 tokens 目錄tokens/base/5 個基礎令牌文件——palette調色板、intent語義意圖色、surface表面結構、typography排版、emphasis焦點/動效tokens/themes/dark/dark 主題覆蓋文件當前僅 dark 一組tokens/next/面向未來版本的占位調色板palette.bp7。二、Token 分類總覽六大命名空間所有令牌通過統(tǒng)一前綴分類一目了然分類前綴說明Palette--bp-palette-*原始色值gray、blue、green 等Intent--bp-intent-*語義色primary、success、warning、dangerSurface--bp-surface-*背景、邊框、陰影、間距、z-indexTypography--bp-typography-*字體族、字號、字重、行高、顏色Iconography--bp-iconography-*圖標尺寸與顏色Emphasis--bp-emphasis-*焦點環(huán)、過渡、緩動曲線其中Iconography命名空間在 tokens/base 現(xiàn)有 5 個文件中的定義相對獨立而 Emphasis 的完整定義可參考 emphasis.tokens.json包含transition-duration100ms、ease[0.4, 1, 0.75, 0.9]與 bounce 曲線、focus-color引用{intent.primary.rest}、focus-width2px、focus-offset2px以及motion-reduced開關0 允許動效1 減少動效。三、Token 結構與 DTCG 規(guī)范令牌遵循 DTCGDesign Tokens Community Group 規(guī)范。每個令牌使用以下標準屬性屬性用途$type數(shù)據(jù)類型color、dimension、shadow、fontFamily、fontWeight、number、duration、cubicBezier$value令牌值——字面量、引用如{palette.blue.3}或復雜對象如 shadow 的多層結構$description人類可讀的說明文字$extensions自定義 Blueprint 元數(shù)據(jù)DTCG 的復雜類型color / shadow / dimension在倉庫中均以結構化對象表達。例如 surface.tokens.json 中的border-width是{ value: 1, unit: px }的 dimension 對象而shadow.0是一個由多個 sRGB 顏色層組成的 shadow 數(shù)組每層含offsetX、offsetY、blur、spread、color。這與 sd.config.ts 中定義的DTCGColor、DTCGDimension、DTCGShadow類型一一對應構建時會由解析器逐一校驗后格式化為 CSS 字符串。四、自定義擴展com.blueprint.derive 與 com.blueprint.role4.1 com.blueprint.derive基于 OKLCH 的顏色派生com.blueprint.derive用于從被引用的$value派生新顏色在 OKLCH 色彩空間上執(zhí)行通道變換{ $value: {intent.default.rest}, $extensions: { com.blueprint.derive: { alpha: 0.25 } } }可用派生屬性如下對應 sd.config.ts 的parseColorDerivation/parseChannelModification解析邏輯屬性類型作用alphanumber 或令牌引用覆蓋最終透明度可以是字面量如0.25也可以是引用如{surface.layer-opacity}構建時解析為數(shù)字lightnessScale/lightnessOffsetnumber對 L 通道做乘法縮放 / 加法偏移chromaScale/chromaOffsetnumber對 C 通道做乘法縮放 / 加法偏移hueOffsetnumber對 H 通道做加法偏移這些屬性在構建期被用于產(chǎn)出雙通道結果一個是靜態(tài) hex 回退值供不支持相對顏色語法的瀏覽器使用一個是相對顏色語法表達式oklch(from ...)。以 surface 邊框為例base 中border-color.default派生自{intent.default.rest}且alpha: 0.12而border-color.strong使用alpha: 0.25見 surface.tokens.json對應了 README 中subtle border / more prominent border的語義分級。從 sd.config.ts 的deriveTransformConfig可以看出底層實現(xiàn)轉換器保留原始 token 引用original.$value將其改寫為var(--bp-...)基變量再按派生配置拼裝oklch(from baseVar calc(l ± n) calc(c * m) calc(h n) / alpha)。同時 computeStaticFallbackForDerivedToken 會先把基令牌解析為 OKLCH借助 culori 庫套用通道修改后格式化為 hex作為supports之外的靜態(tài)回退。4.2 com.blueprint.role特殊構建角色com.blueprint.role為令牌指定特殊構建處理。當前只有一個角色stackable-layer—— 將編譯后的顏色包裝進linear-gradient(color 0 0)使其可以作為background-image圖層進行疊加合成。該角色在 applyRoleForCss 中實現(xiàn)為linear-gradient(${value} 0 0)。動機是CSS 的background-color只能接受單一值而background-image支持多層疊加linear-gradient(color 0 0)制造一個純色漸變從而可以在背景色之上堆疊半透明色層。五、主題覆蓋dark 模式如何工作dark 主題通過tokens/themes/dark/下的文件覆蓋 base 令牌覆蓋方式為重新定義$value和/或$extensions。README 中的經(jīng)典示例是surface.border-color.strong淺色模式基于灰色派生深色模式改為基于白色派生// base/surface.tokens.json strong: { $value: {intent.default.rest}, $extensions: { com.blueprint.derive: { alpha: 0.25 } } } // themes/dark/surface.tokens.json strong: { $value: {palette.white}, $extensions: { com.blueprint.derive: { alpha: 0.3 } } }倉庫中 dark/surface.tokens.json 的實際定義與此一致border-color.default為白色 20% alpha、strong為白色 30% alphacolor-code從淺色的白色 70% 反轉為黑色 30%陰影體系也整體替換為白色 inset 高亮 更深黑色投影shadow-0 至 shadow-4 每級都含inset: true的白色描邊層。5.1 兩個主題的構建配置主題構建計劃定義在 sd.config.ts 的THEMES常量中主題輸入選擇器輸出文件lighttokens/base/**/*.tokens.json:roottokens.cssdarkbaseincludetokens/themes/dark/**/*.tokens.json[data-bp-color-schemedark], .bp6-darktokens-dark.cssdark 配置使用include繼承 base 全部令牌再以sources覆蓋。生成時 dark 主題被掛載到[data-bp-color-schemedark]屬性選擇器同時兼容傳統(tǒng).bp6-dark類名因此只需在根元素上切換該屬性或類名即可整體換膚組件代碼無需任何改動——這正是 USAGE.md 強調的Surface tokens adapt automatically by theme。六、構建流水線從 JSON 到 CSS 變量6.1 構建命令在 packages/core/package.json 中定義pnpm run build:tokens # tsx src/design-tokens/build.ts生成 tokens該命令執(zhí)行tsx src/design-tokens/build.ts構建入口調用 sd.config.ts 的buildAllThemes產(chǎn)物輸出到src/design-tokens/build/tokens.css與tokens-dark.css。此外compile:css腳本會先跑build:tokens再執(zhí)行 sass 編譯確保組件 SCSS 中引用的--bp-*變量在樣式編譯前已生成。6.2 轉換器與命名Style Dictionary 初始化時注冊了一套bp/css轉換組見 initializeStyleDictionary按序執(zhí)行name/bp/kebab命名轉換將令牌路徑拼成bp-前綴的 kebab-case 變量名見 nameTransformConfig如surface.border-radius→--bp-surface-border-radiusdtcg/color/css將 DTCG color 對象格式化為oklch()/rgb()/rgba()CSS 函數(shù)sRGB 通道會round(comp * 255)dtcg/dimension/css、dtcg/duration/css格式化為16px、100ms這類帶單位字符串dtcg/fontFamily/css數(shù)組拼成font-family列表含空格的字體名自動加引號dtcg/fontWeight/css、dtcg/number/css、dtcg/cubicBezier/css數(shù)值直出dtcg/shadow/css支持單層與多層數(shù)組shadow輸出為box-shadow值bp/derive/css必須排在 color 轉換之后用相對顏色語法覆蓋已解析的顏色引用。6.3 漸進增強輸出hex 回退 supports這是整套體系最有特色的部分formatProgressiveEnhancementCss生成產(chǎn)物包含兩個區(qū)塊——先輸出一個所有令牌的 hex 基礎塊再輸出一個supports增強塊用相對顏色語法覆蓋派生類令牌基礎塊全部令牌以靜態(tài) hex 值輸出派生令牌由computeStaticFallbackForDerivedToken預先計算增強塊supports (color: oklch(from var(--any-color) l c h))內把派生令牌重新聲明為oklch(from ...)表達式?；赝酥挡捎脙杀槭占谝槐樘幚韼erive擴展的令牌第二遍處理傳遞引用了派生令牌的令牌借助 fallback 緩存見 makeFallbackMap。supports探測條件常量定義于 SUPPORTS_RELATIVE_COLOR與組件 SCSS 中手動書寫的supports (color: oklch(from var(--any-color) l c h))完全一致可對照 button/_common.scss。七、Intent 令牌語義與交互狀態(tài)的映射Intent 令牌把語義含義映射到顏色上。組件不直接引用原始調色板如--bp-palette-blue-3而是引用--bp-intent-primary-rest這樣每個主題或品牌都可以重映射。五種意圖定義于 intent.tokens.json每種都帶交互狀態(tài)rest、hover、active、disabled外加foreground文字色Token 模式狀態(tài)示例解析--bp-intent-default-*rest、hover、active、disabledrest→palette.gray.1--bp-intent-primary-*同上rest→palette.blue.3--bp-intent-success-*同上rest→palette.green.3--bp-intent-warning-*同上rest→palette.orange.3--bp-intent-danger-*同上rest→palette.red.3實際 JSON 中default 意圖的hover/active分別指向palette.dark-gray.5/palette.dark-gray.4BP6 模式hover 比 rest 更暗primary 則沿 blue 色階下移restblue.3→ hoverblue.2→ activeblue.1foreground 文字色除 warning 為palette.black外均為palette.white。關鍵特性Intent 令牌在 light / dark 主題之間不改變——兩種模式下 primary 都使用同一個藍色。主題相關的微調發(fā)生在 surface 層例如--bp-surface-background-color-primary-rest它從 intent 派生但按主題應用了不同的明度/彩度縮放。八、Surface 令牌結構、空間與背景三層體系Surface 令牌控制組件共享的結構與空間屬性邊框、圓角、陰影、間距、背景定義于 base/surface.tokens.jsondark 覆蓋在 themes/dark/surface.tokens.json。8.1 關鍵結構令牌| Token | 值 | 用途 | | ----- | -- | ---- | |--bp-surface-spacing|4px| 基礎間距單位組件以它做乘法如calc(var(--bp-surface-spacing) * 2) 8px 內邊距 | |--bp-surface-border-width|1px| 所有帶邊框元素統(tǒng)一的邊框寬度 | |--bp-surface-border-radius|4px| 共享圓角 | |--bp-surface-border-color-default|intent.default.rest12% alpha | 默認狀態(tài)的細邊框 | |--bp-surface-border-color-strong|intent.default.rest25% alpha | 描邊類元素更明顯的邊框 | |--bp-surface-shadow-0~--bp-surface-shadow-4| 多層 box-shadow | 五級海拔從平鋪(0)到最大深度(4) | |--bp-surface-z-index-0~--bp-surface-z-index-4|0、10、20、30、40| 層疊等級定義于 z-index 節(jié)點 |以shadow-0為例淺色模式由1px spread 的 rgba(black, 15%) 描邊層 5px blur 的 rgba(black, 2%) 陰影層兩層組成shadow-4則包含 50px blur、-12px spread 的 30% 黑陰影層。dark 模式每級都在首層加入inset: true的 rgba(white, 20%) 白色高亮陰影黑度最高到 85%shadow-4。組件代碼零改動即可獲得主題適配。8.2 背景色surface-background-color模式--bp-surface-background-color-{intent}-{state}是每個意圖與交互狀態(tài)完全解析、開箱即用的背景色。對 default 意圖它們從 intent 顏色經(jīng)明度/彩度縮放派生——default-rest在淺色模式編譯為#ffffff白色盡管它派生自灰色因為令牌應用了lightnessScale: 1.909Token淺色模式深色模式--bp-surface-background-color-default-rest#ffffff以lightnessScale: 0.362派生JSON 中實際為 0.362README 表格標注 0.248 為舊值--bp-surface-background-color-default-hover#f6f7f9light-gray.5更深的灰--bp-surface-background-color-default-active#edeff2light-gray.4更深的灰--bp-surface-background-color-default-disabled#ffffff以縮放系數(shù)派生依據(jù) dark/surface.tokens.jsondark 下default.rest使用lightnessScale: 0.362, chromaScale: 0.308, hueOffset: -1.44hover/active則組合了 scale 與 offset。README 表格中標注的 0.248 等數(shù)值應視為文檔撰寫時點的版本快照以倉庫 JSON 為準。對于非 default意圖primary、success、warning、danger背景色直接從 intent 令牌透傳、無派生——同一個藍色在兩種主題下通用。dark 覆蓋文件只重定義 default 背景色非 default 意圖無需 dark 覆蓋。8.3 圖層色layer-color 與共享透明度旋鈕模式--bp-surface-layer-color-{intent}是每個意圖色的半透明著色由共享透明度令牌控制| Token | 值 | | ----- | -- | |--bp-surface-layer-opacity|0.055% | |--bp-surface-layer-color-default|intent.default.rest5% alpha | |--bp-surface-layer-color-primary|intent.primary.rest5% alpha | |--bp-surface-layer-color-success|intent.success.rest5% alpha | |--bp-surface-layer-color-warning|intent.warning.rest5% alpha | |--bp-surface-layer-color-danger|intent.danger.rest5% alpha |值得注意的實現(xiàn)細節(jié)在支持相對顏色語法的瀏覽器中每個 layer-color 會響應式地引用透明度令牌而非固化 5%--bp-surface-layer-color-primary: oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));這在 JSON 中通過alpha: {surface.layer-opacity}的令牌引用達成見 surface.tokens.json。于是--bp-surface-layer-opacity成為一個共享控制旋鈕——把它從0.05改成0.1所有 layer-color 的濃度同步增強。alpha 引用在 resolveAlphaValue 中被解析為數(shù)值用于計算靜態(tài) hex 回退。8.4 可疊加圖層stackable layer模式--bp-surface-layer-{intent}每個圖層色被包裝進linear-gradient()從而可作為背景圖疊加--bp-surface-layer-primary: linear-gradient(#2d72d20d 0 0);因為background-color只能接受一個值而background-image支持多層堆疊linear-gradient(color 0 0)技巧生成一個純色漸變層可疊在背景色之上// 在默認表面之上疊加一層 primary 著色 background-color: var(--bp-surface-background-color-default-rest); background-image: var(--bp-surface-layer-primary);該包裝由 JSON 中的com.blueprint.role: stackable-layer注解觸發(fā)見 surface.tokens.json構建系統(tǒng)在 applyRoleForCss 中檢測該角色并套上linear-gradient()包裝。九、Typography 與 Emphasis 令牌9.1 Typographytypography.tokens.json 定義了完整排版階梯familydefault為系統(tǒng)字體棧-apple-system、BlinkMacSystemFont、Segoe UI、Roboto、Oxygen、Ubuntu、Cantarell、Open Sans、Helvetica Neue、blueprint-icons-16、sans-serifmono為等寬棧sizebody 從 10pxbody-x-small到 16pxbody-largeheading 從 16pxheading-small到 46pxheading-displaycode 為 12px / 13px / 14pxweightdefault: 400、bold: 600line-heightdefault: 1.28581、large: 1.5colorcolor-default各狀態(tài)從 intent 派生并做明度/彩度微調如rest對{intent.default.rest}應用lightnessOffset: -0.279, chromaOffset: -0.017, hueOffset: -4color-primary/color-success/color-warning/color-danger直接透傳 intent 對應狀態(tài)color-muted直引{intent.default.rest}。9.2 Emphasisemphasis.tokens.json 定義焦點與動效transition-duration100ms、easedefault[0.4, 1, 0.75, 0.9]與 bounce[0.54, 1.12, 0.38, 1.11]兩條 cubicBezier、focus-color引用 primary.rest、focus-width2px、focus-offset2px以及motion-reduced數(shù)值開關。十、實戰(zhàn)示例Button 組件如何消費令牌Button 組件src/components/button/是 surface 與 intent 令牌協(xié)同工作的最佳范例核心文件為 _common.scss共享 mixin。使用中注意該組件 dark 模式下 minimal / outline 按鈕的active、hover狀態(tài)目前由rest令牌派生預期隨調色板更新而調整。10.1 Surface 令牌尺寸與結構// 布局——以間距令牌為乘法基數(shù) height: calc(var(--bp-surface-spacing) * 7.5); // 默認 30px 高 padding: var(--bp-surface-spacing) calc(var(--bp-surface-spacing) * 2); // 4px 8px border-radius: var(--bp-surface-border-radius); // 4px // 盒陰影——兩層inset 邊框 深度投影 box-shadow: inset 0 0 0 var(--bp-surface-border-width) color-mix(in oklch, var(--bp-surface-border-color-strong) 90%, var(--bp-palette-black)), 0 1px 2px color-mix(in oklch, var(--bp-palette-black) 10%, transparent);按鈕的 box-shadow 用兩層以不同方式消費令牌inset 邊框層用--bp-surface-border-width模擬 1px 邊框代碼注釋說明原因CSSborder只能有一個、無法與陰影疊加、會改變元素尺寸、還需要額外 box-sizing因此改用box-shadow。淺色模式下--bp-surface-border-color-strong與--bp-palette-black按 90% 混合把灰色令牌壓向黑色以取得足夠對比dark 模式下則用--bp-surface-border-color-default與transparent按 50% 縮放把令牌自帶的 20% alpha 減半到 10%。深度投影層使用--bp-palette-black的不同透明度rest 10%、hover/active 20%形成跨主題一致的投影。Large 變體只是放大乘法系數(shù)高度calc(var(--bp-surface-spacing) * 10)、水平內邊距calc(var(--bp-surface-spacing) * 4)對照 mixinpt-button-height-default/pt-button-height-smallsmall 高度為* 6。10.2 Intent 令牌每個交互狀態(tài)的顏色對非 default 意圖primary、success、warning、dangerSass map 把每個意圖接到其令牌上$button-intent-states: ( primary: ( var(--bp-intent-primary-rest), // background var(--bp-intent-primary-hover), // background on hover var(--bp-intent-primary-active), // background on active var(--bp-intent-primary-foreground) // text color ), // success、warning、danger 遵循同一模式 );disabled 狀態(tài)引用--bp-intent-default-disabled并降低透明度minimal / outlined 變體則用--bp-surface-border-color-strong做邊框如pt-button-outlined中的border: var(--bp-surface-border-width) solid var(--bp-surface-border-color-strong)。組件 SCSS 中還能看到大量color-mix()的應用例如淺色默認按鈕背景為color-mix(in srgb, var(--bp-intent-default-rest) 5%, var(--bp-palette-white))深色按鈕為color-mix(in srgb, var(--bp-intent-default-rest) 40%, var(--bp-palette-black))。源碼注釋表明對接近中性的灰色優(yōu)先用 srgb 混合以避免 OKLCH 混合帶來的色相偏移對非中性意圖色則可用 oklch 混合。此外 warning 的 rest 色存在一個臨時回退機制--bp6-button-warning-resthex 為#fbb360對應 palette.orange.5用于兼容不支持相對顏色語法的瀏覽器——這正是漸進增強策略在組件層的落地。十一、瀏覽器兼容性與回退策略部分令牌使用 CSS 相對顏色語法oklch(from ...)派生 hover、active 與 alpha 修飾色最低版本要求瀏覽器最低版本Chrome122Safari18Firefox128Edge122較舊瀏覽器會忽略這些屬性值。在 Blueprint 組件內部已提供回退值生成 CSS 的基礎 hex 塊 組件 SCSS 中的手動回退如--bp6-button-warning-rest的:root聲明在 Blueprint 之外你需要自行提供回退值。使用技巧如果目標瀏覽器不支持相對顏色語法直接依賴生成產(chǎn)物中的 hex 基礎聲明即可無需任何額外處理若需要自定義派生色請參考com.blueprint.derive的聲明方式并自行準備supports分支。十二、開發(fā)與擴展指南重新生成令牌在 packages/core 目錄執(zhí)行pnpm run build:tokens產(chǎn)物寫入src/design-tokens/build/新增基礎令牌在tokens/base/相應 JSONpalette / intent / surface / typography / emphasis中按 DTCG 格式添加節(jié)點注意$type與$value結構必須能被 sd.config.ts 的解析器識別新增主題覆蓋在tokens/themes/theme/下建同名 JSON只重定義需要變化的$value/$extensions并在THEMES中登記新主題選擇器、源文件、輸出文件名派生新顏色優(yōu)先使用com.blueprint.derive的六個屬性alpha、lightnessScale、chromaScale、lightnessOffset、chromaOffset、hueOffset而非手寫新色值——派生能自動獲得靜態(tài) hex 回退與oklch(from ...)增強雙輸出疊加半透明色層若需要多層背景合成聲明com.blueprint.role: stackable-layer或直接消費--bp-surface-layer-{intent}。總結Blueprint 設計令牌體系把顏色/尺寸/陰影/字體從組件樣式里抽離成可編程、可派生、可覆蓋的 DTCG 數(shù)據(jù)源通過 Style Dictionary 編譯為--bp-*CSS 變量并以靜態(tài) hex 回退 supports相對顏色增強的雙輸出策略兼顧現(xiàn)代瀏覽器與新老兼容。理解這套體系你既可以在業(yè)務組件中直接消費--bp-surface-*、--bp-intent-*等令牌實現(xiàn)跨主題一致性也可以按同樣模式擴展自己的主題與派生色。相關文件索引README.md、USAGE.md、sd.config.ts、tokens/base、tokens/themes/dark、Button _common.scss、packages/core/package.json。贊分享前端UI組件設計系統(tǒng)【免費下載鏈接】blueprintA React-based UI toolkit for the web項目地址https://gitcode.com/gh_mirrors/bl/blueprint點擊查看免費下載相關推薦Carbon 設計系統(tǒng) DTCG 設計令牌Design Tokens格式全解析目錄結構、Token 規(guī)范與 Style Dictionary 構建驗證Carbon 設計系統(tǒng) DTCG 設計令牌Design Tokens格式全解析目錄結構、Token 規(guī)范與 Style Dictionary 構建驗證 本前端UI組件設計系統(tǒng)Owncast 樣式定義體系詳解基于 Style Dictionary 的設計令牌Design Tokens與 CSS 變量生成流程Owncast 樣式定義體系詳解基于 Style Dictionary 的設計令牌Design Tokens與 CSS 變量生成流程 Owncast 的自音視頻直播后端Eigent Theme Tokens V2: DTCG 驅動的 OKLCH 主題令牌引擎架構與實戰(zhàn)解析Eigent Theme Tokens V2: DTCG 驅動的 OKLCH 主題令牌引擎架構與實戰(zhàn)解析 Eigent 桌面應用的主題系統(tǒng) Theme Toke人工智能AI Agent多智能體大模型本地部署MCP 服務桌面應用工作流自動化上一篇OkGo單元測試框架MockWebServer與Espresso結合下一篇如何將Mac觸控板變成精準電子秤TrackWeight完整使用指南創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考