@umacloud/knowledge 1.0.1

package/miniprogram/01-standards/ai-common-mistakes.md

@@ -0,0 +1,61 @@
+---
+id: miniprogram-uniapp-ai-mistakes
+title: 小程序 / uniapp · AI 高频错误避坑卡（错 -> 对）
+domain: miniprogram
+category: 01-standards
+difficulty: intermediate
+tags: [小程序, miniprogram, 微信, uniapp, uni-app, 踩坑, AI高频错误, setData, 合法域名, 条件编译, rpx, 生命周期, 商业级]
+quality_score: 95
+last_updated: 2026-06-20
+---
+
+# 小程序 / uniapp · AI 高频错误避坑卡
+
+> AI 写小程序/uniapp 最容易把 **web 那套** 直接搬过来，但小程序是**双线程、无 DOM、域名白名单、体积受限**的环境。下面是实测高频错误的「错 -> 对」清单，写代码前逐条自检。配套参考见 `miniprogram-standard.md` 与 `cross-platform/01-standards/cross-platform-frameworks.md`。
+
+## 一、微信小程序（原生）
+
+1. **用 web API**：`document` / `window` / `localStorage` / `fetch` / `cookie`
+   -> 小程序逻辑层无 DOM/BOM。存储用 `wx.setStorageSync`/`wx.getStorageSync`，请求用 `wx.request`，没有 fetch/axios（axios 需适配器）。
+2. **`wx.request` 直接打域名**：真机报「不在以下 request 合法域名列表中」
+   -> 域名必须在小程序管理后台「开发设置 -> 服务器域名」白名单，且只能 **https**。开发期可勾「不校验合法域名」，上线必须配。
+3. **直接改 `this.data`**：`this.data.x = v` 视图不刷新
+   -> 必须 `this.setData({ x: v })`。`setData` 是逻辑层->视图层唯一通道且**跨线程序列化**：别在循环/高频里调用，别一次塞大对象，局部更新用路径 `this.setData({ 'list[0].done': true })`。
+4. **px + HTML/CSS 任意选择器**
+   -> WXML/WXSS：尺寸用 **`rpx`**（`750rpx` = 屏宽）；选择器受限（**无 `*` 通配、后代选择器有限、不支持级联**），组件样式默认隔离。
+5. **套 React/Vue 生命周期**：`componentDidMount` / `created`
+   -> Page 用 `onLoad`(带参) / `onShow` / `onReady`；Component 用 `attached` / `ready`；页面通信用 `onLoad` 的 query + 全局 `getApp()`/`eventChannel`。
+6. **tabBar 页用 `wx.navigateTo`**：跳不过去
+   -> tabBar 页只能 `wx.switchTab`；普通页 `wx.navigateTo`（保留栈，**最多 10 层**），重定向 `wx.redirectTo`，返回 `wx.navigateBack`。
+7. **`wx.getUserInfo` 拿头像昵称**：已废弃/拿不到
+   -> 用 `wx.getUserProfile`（**必须用户点击事件里触发**，不能进页面自动调）。登录用 `wx.login` 拿 `code`，**后端**用 code 换 openid/session_key，别在前端解。
+8. **直接 `npm install` 引包就用**
+   -> 需「工具 -> 构建 npm」生成 `miniprogram_npm`；主包 **<= 2MB**，超了用**分包**（`subPackages`）+ 分包预下载。
+9. **支付/手机号等能力不看资质**
+   -> `wx.requestPayment`、手机号快速验证等需对应**类目/资质**，且支付需后端下单签名，AI 常漏后端这步。
+
+## 二、uniapp（跨端：H5 + 各家小程序 + App）
+
+1. **写平台专属/web 代码不做条件编译**：一处改动多端炸
+   -> 平台差异用**条件编译**隔离：`#ifdef MP-WEIXIN … #endif`、`#ifdef H5`、`#ifdef APP-PLUS`、`#ifndef H5`。
+2. **用 `wx.*` / `window` / `document`**：换端即失效
+   -> 跨端统一用 **`uni.*`**（`uni.request` / `uni.navigateTo` / `uni.setStorageSync`）。DOM/BOM 在小程序与 App 端不存在。
+3. **用 vue-router / `<router-link>`**
+   -> 路由在 **`pages.json`** 声明（含 `tabBar`）；跳转 `uni.navigateTo` / `uni.switchTab`，不是 vue-router。
+4. **复杂 template 表达式 / 渲染函数**
+   -> 小程序端模板编译受限：逻辑放 `computed`/`methods`，少在模板里写复杂表达式；慎用 `render()`/JSX。
+5. **appid、平台 key 硬编码进代码**
+   -> 各平台配置进 **`manifest.json`**（每端独立 appid / SDK key）。
+6. **`mounted` 里拿节点尺寸**：小程序端拿不到
+   -> 用 `uni.createSelectorQuery().in(this)`；`mounted` 在小程序端时机不可靠，DOM 思路在此不成立。
+7. **直接用浏览器专属库**（依赖 `document` 的图表/富文本）
+   -> 选支持多端的库或按端条件编译；`rpx` 做自适应单位。
+
+## 三、写完自检（小程序/uniapp 通用）
+- [ ] 没有用 `document`/`window`/`fetch`/`localStorage`（改 `wx.*`/`uni.*`）
+- [ ] 所有请求域名已规划进合法域名白名单、全 https
+- [ ] 状态更新走 `setData`/响应式，无直接赋值；无高频/大对象 setData
+- [ ] 尺寸用 `rpx`；选择器在小程序约束内
+- [ ] tabBar 用 switchTab；导航不超 10 层
+- [ ] 登录走 `wx.login` + 后端换 openid；敏感能力看资质、签名在后端
+- [ ] uniapp 平台差异已条件编译；路由在 pages.json；平台配置在 manifest.json

package/miniprogram/01-standards/miniprogram-custom-navbar-capsule.md

@@ -0,0 +1,77 @@
+---
+id: miniprogram-custom-navbar-capsule
+title: 小程序自定义导航栏 · 顶部适配与右上角胶囊（设计规范 · 必读）
+domain: miniprogram
+category: 01-standards
+difficulty: intermediate
+tags: [小程序, miniprogram, 微信, uniapp, 自定义导航栏, navigationStyle, custom, 胶囊, 顶部适配, 状态栏, statusBarHeight, getMenuButtonBoundingClientRect, 安全区, 商业级]
+quality_score: 96
+last_updated: 2026-06-20
+---
+
+# 小程序自定义导航栏 · 顶部适配与右上角胶囊
+
+> **AI 写小程序自定义导航栏最高频的错误**：用了 `navigationStyle: "custom"` 自己画顶栏，却**没做顶部适配**——内容顶到状态栏下面、标题被状态栏盖住，或者把按钮放到了**右上角胶囊（微信常驻的那个药丸形按钮，含「更多」和「关闭」）底下点不到**。胶囊不可隐藏、位置随机型而变，必须**动态测量、给它让位**。本规范给出正确做法。
+
+## 1. 什么时候要自己适配
+- 页面或全局配置 `navigationStyle: "custom"` 后，**整个顶部区域归你画**，微信只保留**右上角胶囊**。
+- 此时必须自己处理:**状态栏高度** + **导航栏高度** + **与胶囊垂直对齐** + **右侧给胶囊留空**。
+- 不用 custom（默认导航栏）时不需要这套——但商业小程序为了品牌/沉浸式 banner 常用 custom。
+
+## 2. 两个必测量值（绝不能写死）
+不同机型(iOS/Android)、不同微信版本，状态栏高度和胶囊位置**都不一样**，必须运行时取:
+
+```js
+// 状态栏高度
+const { statusBarHeight, safeArea } = wx.getWindowInfo(); // 新 API；旧版用 wx.getSystemInfoSync()
+// 右上角胶囊的位置与尺寸（相对屏幕左上角，单位 px）
+const cap = wx.getMenuButtonBoundingClientRect();
+// cap = { top, right, bottom, left, width, height }
+```
+
+## 3. 正确的高度与对齐公式
+导航栏内容应与胶囊**垂直居中对齐**，整条导航栏高度按胶囊推算:
+
+```js
+// 胶囊上边距状态栏的间隙（上下对称），推出导航栏内容区高度
+const gap = cap.top - statusBarHeight;            // 胶囊到状态栏的间距
+const navBarHeight = cap.height + gap * 2;        // 导航栏内容区高度（与胶囊上下等距）
+const navTotalHeight = statusBarHeight + navBarHeight; // 顶栏总高（含状态栏）
+
+this.setData({
+  statusBarHeight,      // 顶部用它做 padding-top，避开状态栏
+  navBarHeight,         // 导航栏内容区高度
+  navTotalHeight,       // 占位高度，给页面内容做 margin-top
+  capsuleRight: cap.right, // 右侧需要让出的宽度参考
+});
+```
+
+WXSS（用 px，因为测量值是 px，别混 rpx）:
+```css
+.custom-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
+.custom-nav .status-bar { height: {{statusBarHeight}}px; }      /* 状态栏占位 */
+.custom-nav .bar { height: {{navBarHeight}}px; display: flex; align-items: center; }
+/* 标题/返回键放左侧；右侧到胶囊之间留空，绝不在胶囊下放可点元素 */
+.page-body { margin-top: {{navTotalHeight}}px; }                /* 内容避开固定顶栏 */
+```
+
+## 4. 硬性规则（自检）
+- [ ] 顶栏内容**从状态栏下方**开始（`padding-top: statusBarHeight`），标题不被状态栏盖。
+- [ ] 导航栏高度/标题位置**与胶囊垂直居中对齐**（用公式，别写死 44px / 88rpx）。
+- [ ] **右上角胶囊区域不放任何可点控件**；自定义按钮放左侧或胶囊左边，给胶囊让出宽度。
+- [ ] 顶栏 `position: fixed`，页面内容 `margin-top: navTotalHeight` 避免被遮。
+- [ ] 测量值是 **px**，导航栏这块用 px，不要和 rpx 混算。
+- [ ] 底部同样做**安全区**适配:`safeArea` / `env(safe-area-inset-bottom)`（iPhone 底部小黑条）。
+- [ ] 返回逻辑自理:custom 后没有系统返回键，首页判断 `getCurrentPages().length` 决定显示返回箭头还是首页图标。
+
+## 5. uniapp 写法
+- 取值:`uni.getMenuButtonBoundingClientRect()` + `uni.getWindowInfo()`（或 `uni.getSystemInfoSync()`），公式同上。
+- uniapp 提供 CSS 变量 `--status-bar-height` 可直接用:`padding-top: var(--status-bar-height);`。
+- 平台差异用条件编译:H5/App 没有胶囊，`#ifdef MP-WEIXIN` 才做胶囊对齐。
+- 也可在 `pages.json` 单页设 `"navigationStyle": "custom"`。
+
+## 6. 常见错法（别这么写）
+- 写死 `navBarHeight = 44`（只在部分 iPhone 对，安卓/异形屏全错）。
+- 用 `rpx` 套测量出来的 px 值（量纲错）。
+- 自定义胶囊样按钮盖在真胶囊上（点不到/重叠）。
+- 忘了页面内容 `margin-top`，首屏内容被固定顶栏吃掉一截。

package/miniprogram/01-standards/miniprogram-design.md

@@ -0,0 +1,61 @@
+---
+id: miniprogram-design
+title: 微信小程序设计规范（官方设计指南 + WeUI）
+domain: miniprogram
+category: 01-standards
+difficulty: intermediate
+tags: [小程序, 微信, 设计规范, 设计指南, weui, 交互, 视觉, 导航, 友好高效一致, 知情权, 商业级]
+quality_score: 93
+last_updated: 2026-06-19
+---
+
+# 微信小程序设计规范（官方设计指南 + WeUI）
+
+> 微信官方有明确的小程序设计指南。遵循它做出**友好、高效、一致**、符合微信生态习惯的体验；用 WeUI 对齐官方视觉。
+
+## 1. 核心理念（官方设计指南）
+
+- 建立在**充分尊重用户知情权与操作权**的基础上：清楚告知在做什么、要什么权限、用户可控可退。
+- 在微信生态内追求**友好、高效、一致**的体验——符合用户在微信里的既有习惯，降低学习成本。
+- **即用即走**：聚焦核心任务，轻量、快、不强留；首屏直达价值。
+
+## 2. 视觉与组件（用 WeUI）
+
+- 用微信官方 **WeUI**（官方设计团队为小程序量身设计的组件库 / weui-wxss + WeUI 扩展组件 / Vant Weapp 等）保证视觉与微信原生一致。
+- 遵循微信视觉规范：克制配色、标准间距、清晰层级；主色不滥用；不要做得"很不微信"。
+- 图标用图标库（不用 emoji 当功能图标）；尺寸用 **rpx** 适配不同屏宽。
+
+## 3. 导航与布局
+
+- 顶层用 **TabBar**（底部，2–5 个）；页面内层级用导航栏返回。
+- 遵循微信导航与手势习惯（右滑返回）；不要自造反直觉导航。
+- 关键操作位置符合习惯；表单/列表/卡片遵循 WeUI 规范。
+
+## 4. 交互与体验
+
+- 每个操作有反馈（loading / toast / 按钮态）；**加载/空/错误三态**都要做。
+- 首屏骨架屏/loading；下拉刷新、触底加载；秒开（缓存 + 数据预取）。
+- 授权时机合理：在用户理解为什么需要时才申请（如点"获取位置"才请求），尊重拒绝并降级。
+
+## 5. 合规（设计层面）
+
+- 隐私协议、用户授权弹窗符合微信与法规要求；明确数据用途。
+- 遵守微信**审核与运营规范**（类目资质、内容、诱导分享限制等），避免设计出违规交互。
+
+## 6. 反模式（出现即不合格 / "不像微信"）
+
+- 不用 WeUI/微信视觉，做成 web 或他端风格，体验割裂。
+- 自造反直觉导航/手势；TabBar 超 5 个或层级混乱。
+- 不做三态/反馈/骨架屏；不尊重知情权，进来就索权/强留。
+- emoji 当图标；不用 rpx 适配导致小屏错位。
+
+## 7. 最低交付 checklist
+
+- [ ] 尊重知情权/操作权；友好高效一致、即用即走、首屏直达。
+- [ ] 用 WeUI/微信视觉规范；克制配色 + 清晰层级 + rpx 适配；图标库无 emoji。
+- [ ] TabBar(≤5)+导航返回符合微信习惯。
+- [ ] 三态 + 反馈 + 骨架屏 + 秒开；授权合理时机 + 降级。
+- [ ] 隐私协议/授权合规 + 遵守审核运营规范。
+
+---
+**参考（官方）**：微信小程序设计指南 (developers.weixin.qq.com/miniprogram/design/)、WeUI 组件库、rpx 适配、微信审核规范。

package/miniprogram/01-standards/miniprogram-standard.md

@@ -0,0 +1,81 @@
+---
+id: miniprogram-standard
+title: 小程序开发标准（微信/支付宝/uni-app · 商业级）
+domain: miniprogram
+category: 01-standards
+difficulty: intermediate
+tags: [小程序, miniprogram, 微信, 支付宝, 双线程, setData, 分包, 性能, 生命周期, 组件, uni-app, taro, 审核, 商业级]
+quality_score: 94
+last_updated: 2026-06-19
+---
+
+# 小程序开发标准（微信/支付宝/抖音/uni-app · 商业级）
+
+> 小程序是国内重要的商业触点（即用即走、依附超级 App 流量）。它的**双线程架构**与体积/性能约束决定了写法和 web 很不一样。本标准给出商业级小程序规范。
+
+## 1. 双线程架构（理解它才能写好）
+
+- 小程序分**逻辑层(JS 引擎)** 与 **视图层(WebView/渲染)**，两层通过 Native 桥**异步通信**（`evaluateJavascript`）。
+- **`setData` 是逻辑层→视图层的唯一数据通道，也是性能瓶颈**：每次 setData 都跨线程序列化传输。优化 setData 是小程序性能的核心。
+- 视图层不能直接操作 DOM/拿不到 JS 对象；交互事件从视图层异步回传逻辑层。
+
+## 2. setData 性能（最关键）
+
+- **只传变化的最小数据**：用数据路径 `this.setData({{'list[2].name': v}})`，不要整对象 setData。
+- **合并/节流 setData**：避免在循环/高频事件(scroll/input)里频繁调用；合并成一次。
+- **与渲染无关的数据不要放 `data`**（放普通变量/`this`），data 越大 setData 越慢。
+- 避免一次 setData 传超大数组/长列表全量；长列表用分页 + 虚拟列表(recycle-view)。
+
+## 3. 包体积与分包
+
+- 主包有体积上限（微信主包 2MB，整体含分包 ≤ 20MB），**必须分包**：
+  - 主包只放 启动页/TabBar 页/公共组件；其余功能拆 **分包**。
+  - **分包预下载**（`preloadRule`）提升进入分包页的速度。
+  - **独立分包**用于可脱离主包独立运行的活动页。
+- 资源：图片用 CDN、压缩、懒加载；避免大图打进包。
+
+## 4. 工程结构与组件化
+
+- 按 feature/页面组织；公共逻辑抽工具/`behavior`(微信)/mixin；UI 抽**自定义组件**复用。
+- 数据请求统一封装（request 拦截、鉴权、错误处理、loading），不在页面里散落 `wx.request`。
+- 状态跨页共享用全局 store(如 mobx-miniprogram / 全局对象 / 本地缓存)，别滥用全局。
+- 用 TypeScript + 规范的目录；用官方/成熟 UI 库(WeUI/Vant Weapp)对齐设计规范。
+
+## 5. 生命周期与体验
+
+- 正确用页面/组件/App 生命周期（`onLoad/onShow/onReady/onHide/onUnload`；组件 `attached/detached`）；onLoad 取参数、onShow 刷新。
+- 首屏：骨架屏/loading；下拉刷新、触底加载、空态/错误态都要做。
+- 分包加载、跳转有反馈；合理使用缓存(`Storage`)做秒开。
+
+## 6. 平台能力与合规
+
+- 登录用平台标准流程（微信 `wx.login` → code 换 openid/session，**在后端换**，不在前端暴露 secret）；用户信息/手机号按最新合规接口获取（需用户授权）。
+- 支付用平台支付(微信支付/支付宝)，金额/订单后端为准 + 幂等（见支付标准）。
+- 权限/隐私：调用敏感接口(定位/相机/通讯录)需 scope 授权 + 用途说明 + 隐私协议；遵守平台**审核规范**（类目资质、内容合规），否则审核拒绝。
+- 域名必须 HTTPS 且在后台配置白名单（request/上传/下载/socket 合法域名）。
+
+## 7. uni-app / Taro 跨端（一套多端）
+
+- 要同时覆盖 多家小程序 + App + H5，用 **uni-app / Taro** 一套代码多端编译，省重复开发。
+- 跨端注意：差量更新、条件编译处理平台差异、不要用某端独有 API 不做兼容、样式用 rpx 适配。
+- uni-app 底层自动差量数据更新，仍要遵守"少 setData/data 精简"的原则。
+
+## 8. 反模式（出现即不合格）
+
+- 整对象/超大数据 setData；高频事件里频繁 setData；渲染无关数据塞 data。
+- 不分包导致主包超限/启动慢；大图打进包。
+- 页面里散落 `wx.request` 无统一封装；前端暴露 appsecret。
+- 不处理空态/错误/弱网；登录/支付不走后端校验、无幂等。
+- 调敏感接口不授权说明、不配合规域名白名单、忽略审核规范。
+
+## 9. 最低交付 checklist
+
+- [ ] setData 只传最小变化、路径更新、合并节流；渲染无关数据不入 data；长列表分页/虚拟。
+- [ ] 分包(主包仅必要) + 预下载 + 图片 CDN/压缩/懒加载，主包<上限。
+- [ ] 统一请求封装 + 自定义组件复用 + 合理全局状态 + TS + UI 库对齐设计。
+- [ ] 生命周期正确 + 首屏骨架/loading + 三态 + 缓存秒开。
+- [ ] 登录/支付后端校验+幂等；敏感接口授权说明+隐私协议+合规域名+过审核。
+- [ ] 多端用 uni-app/Taro 条件编译 + rpx 适配。
+
+---
+**参考**：微信小程序官方性能优化/分包文档、setData 最佳实践、uni-app/Taro 跨端、平台审核规范、WeUI/Vant Weapp 设计。

package/mobile/01-standards/android-material-design.md

@@ -0,0 +1,70 @@
+---
+id: android-material-design
+title: Android 设计规范（Material Design 3 · 官方）
+domain: mobile
+category: 01-standards
+difficulty: intermediate
+tags: [android, 设计规范, material-design, material3, m3, 色彩角色, type-scale, elevation, motion, dynamic-color, 自适应, 商业级]
+quality_score: 95
+last_updated: 2026-06-19
+---
+
+# Android 设计规范（Material Design 3 · 官方）
+
+> 纯 Claude/Codex 写 Android UI 常不遵循 Material、像套了个 iOS 或 web 壳。本标准是 Google 官方 **Material Design 3 (M3)** 的落地要点——做出**像 Android 原生**的界面。
+
+## 1. 色彩系统（M3 Color Roles）
+
+- 用 M3 的**语义色角色**而非硬编码 hex：`primary`(主要按钮/激活态)、`secondary`(次要)、`tertiary`(对比强调)，及其 `on-*`(其上文字)、`surface`/`background`/`error` 等。
+- 从一个**种子色(seed)** 生成完整 tonal palette；支持 **Dynamic Color**（Material You：跟随用户壁纸取色，Android 12+）。
+- 必须支持深色主题（M3 的 dark scheme），文字/容器对比达标。
+
+## 2. 排版（Type Scale）
+
+- 用 M3 **type scale**：`Display / Headline / Title / Body / Label`，各有 Large/Medium/Small；用角色而非写死字号。
+- 默认字体 Roboto（中文思源黑体/系统中文），清晰层级。
+
+## 3. 形状与高度（Shape & Elevation）
+
+- 用 M3 **shape scale**（圆角等级：none/xs/s/m/l/xl，对应不同组件）。
+- **Elevation**：用 z 轴高度 + tonal surface（M3 用表面色调变化表达层级，弱化阴影）传达层次；同类组件高度一致。
+
+## 4. 动效（Motion）
+
+- 用 M3 动效（标准缓动曲线、容器变换 container transform、共享轴 shared axis）引导用户、表达层级关系，**有意义不炫技**；尊重 reduce motion。
+
+## 5. 组件（用 M3 组件库）
+
+- 用 Material Components（Jetpack Compose Material3 / Views MDC）：`Button`(filled/tonal/outlined/text/elevated)、`TopAppBar`、`NavigationBar`(底部)/`NavigationRail`/`NavigationDrawer`、`FAB`、`Card`、`TextField`(outlined/filled)、`Chip`、`Snackbar`、`BottomSheet`、`Dialog` 等。
+- 图标用 **Material Symbols**，不要用 emoji 当功能图标。
+- **FAB** 用于页面主操作（Android 特有，别照搬到 iOS）。
+
+## 6. 导航范式（Android 特有）
+
+- 顶层切换用 **Navigation Bar**(底部，3–5 项) / 大屏用 Navigation Rail / Drawer。
+- **顶部 App Bar** 承载标题与操作；**系统返回**（手势/返回键）必须正确处理（与 iOS 左上返回不同）。
+- 大屏/平板/折叠屏用**自适应布局**（窗口尺寸类 compact/medium/expanded，列表-详情等 canonical layouts）。
+
+## 7. 布局与适配
+
+- 8dp 栅格基线；触控目标 **≥48×48dp**。
+- 边到边(edge-to-edge) + 处理系统栏 insets；适配深色、字体缩放、不同密度(dpi)。
+- 自适应不同屏幕尺寸/折叠态，不写死宽度。
+
+## 8. 反模式（出现即不合格 / "不像 Android"）
+
+- 不用 M3 色角色/type scale，硬编码颜色字号；不支持深色/Dynamic Color。
+- 套 iOS 范式（顶部 tab、iOS 返回）忽略系统返回；把 FAB 乱用或缺主操作入口。
+- 不适配大屏/折叠屏；忽略系统栏 insets；触控目标过小。
+- emoji 当图标；自绘非 Material 控件且无无障碍。
+
+## 9. 最低交付 checklist
+
+- [ ] M3 色角色(seed→palette)+Dynamic Color+深色；type scale；shape/elevation 体系。
+- [ ] 用 Material3 组件 + Material Symbols 图标(无 emoji)；FAB 用于主操作。
+- [ ] 底部 Navigation Bar/Rail/Drawer + 顶部 App Bar + 正确系统返回。
+- [ ] 8dp 栅格 + ≥48dp 触控 + edge-to-edge insets + 自适应大屏/折叠屏/密度/字体缩放。
+- [ ] M3 有意义动效 + 三态 + 无障碍(TalkBack/对比度/reduce motion)。
+
+---
+**参考（官方）**：Material Design 3 (m3.material.io)、Material 3 in Compose、Dynamic Color/Material You、Material Symbols、自适应布局(window size classes)。