diff --git a/.agents/A11Y-WORKFLOW.md b/.agents/A11Y-WORKFLOW.md
new file mode 100644
index 0000000000..2fcf7af054
--- /dev/null
+++ b/.agents/A11Y-WORKFLOW.md
@@ -0,0 +1,42 @@
+# NutUI-React AI 无障碍开发协同指南 (A11Y Workflow)
+
+本指南旨在教开发者如何利用 `.agents/skills-a11y.md` 指令库，驱动 AI 助手自动完成组件的无障碍（A11y）适配。
+
+## 1. 核心原理
+
+AI 助手在加载 `.agents/skills-a11y.md` 后，会自动获得以下“常识”：
+
+- **双端规范**：Web 端用 `aria-xxx` (kebab-case)，Taro 端用 `ariaXxx` (CamelCase)。
+- **状态绑定**：自动将 `checked/disabled/loading` 映射至 ARIA 属性。
+- **视觉去噪**：自动为装饰性图标添加 `aria-hidden` / `ariaHidden`。
+
+## 2. 如何下达指令 (Best Practices)
+
+### 场景 A：新组件开发
+
+**指令建议**：
+
+> “请帮我开发一个新的 `Slider` 组件，并根据 `.agents/skills-a11y.md` 同步实现 Web 和 Taro 的无障碍支持。”
+
+### 场景 B：现有组件重构
+
+**指令建议**：
+
+> “请对比 `.agents/skills-a11y.md` 中的校验清单，审计 `src/packages/xxx/xxx.tsx` 的无障碍实现，并给出重构代码。”
+
+### 场景 C：批量 A11y 检查
+
+**指令建议**：
+
+> “检查当前组件是否在 Taro 环境下正确使用了驼峰式的 `ariaLabel` 而非 `aria-label`。”
+
+## 3. 常见避坑指南
+
+- **Taro 属性丢失**：如果发现 `ariaLabel` 没生效，检查是否在 `View` 标签上透传了 `...rest`。
+- **重复 Label**：如果组件已经通过 `children` 渲染了文字，不必再在 `ariaLabel` 中重复，除非是为了给读屏器提供更清晰的上下文。
+- **图标隐藏**：不要忘记给所有的辅助性 Icon 加上 `ariaHidden` / `aria-hidden="true"`，否则读屏器会尝试读取图标的 Unicode 字符。
+
+## 4. 验证方式
+
+- **Web 端**：使用 Chrome DevTools 的 `Accessibility` 面板查看 `Accessibility Tree`。
+- **Taro 端**：在真机读屏模式（iOS VoiceOver / Android TalkBack）下测试。
diff --git a/.agents/skills-a11y.md b/.agents/skills-a11y.md
new file mode 100644
index 0000000000..a6b2697954
--- /dev/null
+++ b/.agents/skills-a11y.md
@@ -0,0 +1,139 @@
+# Agent Skill: NutUI-React Accessibility (A11y) Adaptation
+
+本技能库指导 AI 助手如何根据 NutUI-React 的多端架构（Web & Taro）进行精准的无障碍适配。
+
+## 1. 环境感知与属性规范 (Context & Convention)
+
+AI 必须根据当前编辑的文件后缀切换属性命名风格：
+
+| 平台 | 文件后缀 | 属性格式 | 示例 |
+| --- | --- | --- | --- |
+| **Web H5** | `*.tsx` | **Kebab-case** | `aria-label`, `aria-disabled` |
+| **Taro** | `*.taro.tsx` | **CamelCase** | `ariaLabel`, `ariaDisabled` |
+
+---
+
+## 2. 核心适配规则 (Core Rules)
+
+### 2.1 状态映射逻辑
+
+自动将组件的逻辑状态映射到无障碍状态：
+
+- **选中状态**:
+  - Web: `aria-checked={checked}`
+  - Taro: `ariaChecked={checked}`
+- **禁用状态**:
+  - Web: `aria-disabled={disabled || loading}`
+  - Taro: `ariaDisabled={disabled || loading}`
+- **忙碌/加载状态**:
+  - Web: `aria-busy={loading}`
+  - Taro: `ariaBusy={loading}`
+
+### 2.2 角色显式声明 (Roles)
+
+交互式容器或承载特定功能的组件必须声明 `role` (Web) 或 `ariaRole` (Taro)：
+
+- **Button**: `role="button"` / `ariaRole="button"`
+- **Dialog/Popup**: `role="dialog"` / `ariaRole="dialog"` + `aria-modal="true"` / `ariaModal={true}`
+- **TabItem**: `role="tab"` / `ariaRole="tab"`
+
+### 2.3 视觉隐藏处理
+
+- **装饰性元素**: Icon、装饰线等对视障用户无意义的元素必须隐藏。
+  - Web: `aria-hidden="true"`
+  - Taro: `ariaHidden` (Boolean 属性)
+
+### 2.4 图标治理决策树 (Icon Strategy)
+
+治理图标时，必须识别其在上下文中的角色：
+
+1. **装饰性 (Icon + Text)**:
+   - **场景**：图标旁边有力所能及的文字说明。
+   - **规则**：彻底隐藏图标，避免信息重复。
+   - **实现**：`<Icon aria-hidden="true" />`。
+2. **交互式 (Standalone Icon as Button)**:
+   - **场景**：图标是唯一的点击入口（如关闭按钮、搜索提交）。
+   - **规则**：**容器承载语义，内部图标隐藏**。
+   - **实现**：
+     ```tsx
+     <span role="button" aria-label="搜索" tabIndex={0}>
+       <Search aria-hidden="true" />
+     </span>
+     ```
+3. **语义化 (Standalone Icon as Status)**:
+   - **场景**：图标独立表示某种状态（如“成功/失败”徽标）。
+   - **规则**：图标直接承载语义，**严禁使用 aria-hidden**。
+   - **实现**：`<Icon aria-label="已完成" />`。
+
+---
+
+## 3. 实现范式 (Implementation Patterns)
+
+### 3.1 Web H5 示例 (`button.tsx`)
+
+```tsx
+<button
+  className={classes}
+  aria-disabled={disabled || loading}
+  aria-busy={loading}
+  aria-label={props['aria-label'] || props.ariaLabel}
+>
+  <div className="nut-button-wrap" aria-hidden="true">
+    {icon}
+    <span>{children}</span>
+  </div>
+</button>
+```
+
+### 3.2 Taro 示例 (`button.taro.tsx`)
+
+```tsx
+<View
+  className={classes}
+  ariaRole="button"
+  ariaDisabled={disabled || loading}
+  ariaBusy={loading}
+  ariaLabel={props.ariaLabel}
+>
+  <View className="nut-button-wrap">
+    <View ariaHidden>{icon}</View>
+    <View>{children}</View>
+  </View>
+</View>
+```
+
+---
+
+## 4. 键盘与焦点管理 (Keyboard & Focus)
+
+- **Tab 键支持**: 确保通过原生标签或 `tabIndex={0}` 使元素可聚焦。
+- **Esc 交互**: 弹出层必须支持 Esc 键触发 `onClose`。
+- **焦点捕获**: 复杂弹出层（Modal/Drawer）应引导用户使用 `FocusTrap` 逻辑或在文档中提示焦点管理。
+
+## 5. 校验清单 (A11y Reviewer)
+
+AI 在生成的代码中必须自检：
+
+1. [ ] 所有的图片/图标是否有 `alt` 或 `aria-hidden`？
+2. [ ] 无文字的按钮是否强制要求了 `aria-label`/`ariaLabel`？
+3. [ ] 状态（Disabled/Busy）是否双向绑定到 ARIA？
+4. [ ] 弹出层是否设置了 `role="dialog"` 和 `modal` 标记？
+
+## 6. 自动化治理工具 (Automation Tools)
+
+项目提供了一个统一的自动化修复脚本 `scripts/a11y-governance.mjs`，该脚本集成了属性映射、图标隐藏与语法修复功能。
+
+### 脚本功能：
+
+- **图标安全隐藏**: 自动为 Web/Taro 端的图标添加隐藏属性，具备组件识别过滤机制（自动避开 SearchBar 等）。
+- **多端属性对齐**: 自动将 `.taro.tsx` 文件中的 `aria-*` 转换为驼峰式规范。
+- **语法自动修复**: 修复 JSX 中的语法瑕疵，并保护箭头函数不受损。
+
+### 使用建议：
+
+- 在开展新批次治理前运行：
+  ```bash
+  /usr/local/bin/node scripts/a11y-governance.mjs
+  ```
+- AI 在生成代码时，应参考该脚本的逻辑，确保装饰性图标默认隐藏，交互式图标通过容器承载语义。
+- AI 在生成新组件代码时，应参考该脚本的逻辑，确保图标默认携带隐藏属性，除非该图标具有独立的交互功能。
diff --git a/.agents/skills/performance_audit/SKILL.md b/.agents/skills/performance_audit/SKILL.md
new file mode 100644
index 0000000000..8cd893b15d
--- /dev/null
+++ b/.agents/skills/performance_audit/SKILL.md
@@ -0,0 +1,27 @@
+# NutUI-React Performance Audit Skill
+
+## Overview
+
+This skill provides a unified workflow for auditing the performance, footprint, and codebase health of the NutUI-React component library.
+
+## Commands
+
+### `npm run performance:audit`
+
+Executes all associated scripts and generates a Markdown report at `scripts/performance/audit-report.md`.
+
+## Included Audits
+
+1.  **Bundle Size Audit**: Calculates individual component file sizes (pre/post-gzip).
+2.  **Tree-shaking Verification**: Validates the correct elimination of unused code during bundling.
+3.  **Render Performance Audit**: Checks for unnecessary re-renders in React components.
+
+## When to Run
+
+- **Before major releases**: To ensure no regression in bundle size.
+- **Reviewing new components**: To verify they align with the library's performance standards.
+- **Refactoring core logic**: To ensure Tree-shaking is not accidentally broken.
+
+## Reporting
+
+The results are output to the terminal in a formatted Markdown table for easy copy-pasting into PR reviews or documentation.
diff --git a/.gitignore b/.gitignore
index ca04c5b700..640118be85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,6 +47,7 @@ pnpm-lock.*.yaml
 # Editor directories and files
 .idea
 .vscode
+.omx
 *.suo
 *.ntvs*
 *.njsproj
diff --git "a/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md" "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md"
new file mode 100644
index 0000000000..0bdb4aedce
--- /dev/null
+++ "b/NutUI-React_\347\273\204\344\273\266\346\240\207\345\207\206\347\231\275\347\232\256\344\271\246.md"
@@ -0,0 +1,396 @@
+## 第一章：序言与战略定位
+
+### 1.1 背景与愿景
+
+#### 背景
+
+多年来，NutUI 组件库秉持着与京东设计一致、符合业内开发规范的原则，一直在演进并推动在站内的应用，截止到目前为止，已覆盖 Vue、React、RN、Flutter、iOS及安卓原生等，在web前端工程师与原生工程师之间，已默默搭起了一套桥梁，这也为后来一码五端奠定了可行性，成为了站内事实的组件标准。
+
+为此，本文主要以 NutUI 这个主体展开白皮书的内容，为大家更好的理解、共建组件库提供方便的文档参考。
+
+#### 愿景
+
+NutUI-React 起步于京东站内庞大、复杂的移动端业务场景，经过多年来的版本迭代与重构，现已发展成为一款专为移动端打造的轻量级、高性能 React 组件库。在当前前端业务日益复杂、展示终端百花齐放的行业背景下，其核心愿景依然坚定：**提供一套具备京东App极致体验、高度可定制且完美支持跨终端（H5、微信小程序、京东小程序及鸿蒙、iOS、安卓系统等）的 UI 级基石解决方案。**
+
+我们希望，在提供各类组件的同时，也能向业务开发者输出一套清晰、具备落地性的“搭建法则”和最佳实践。本白皮书即是这套“法则”的完整提炼。
+
+### 1.2 白皮书制定目的与核心受众
+
+本白皮书针对 NutUI-React 的所有核心维护者、业务线使用者及开源社区的独立贡献者。
+
+- **对齐技术认知与消除摩擦**：确保来自不同背景、不同业务线的开发者，在参与 NutUI-React 维护及基于其开发业务时，拥有统一的设计理念与严格的技术执行标准。
+- **系统性保障交付质量**：通过推行严苛的工程化规范、显式的代码约束和强制的质量卡点（如测试覆盖率红线），确保交付到开发者手中的每一个组件结构，在稳定性和渲染性能上均达到业界一流标准。
+- **繁荣并规范开源生态**：降低贡献者参与框架共建的门槛，为其提供清晰的参与路径，从而构建健康、可持续的高质量开源社区生态。
+
+### 1.3 规范体系边界与约束等级
+
+为了保障本准则在实际工程落地与代码核查中的可执行性，防止出现模棱两可的代码审查（Code Review）分歧，我们定义了清晰的边界与强制力等级。
+
+#### 1.3.1 体系边界
+
+规范主要管控组件的**交互一致性、视觉标准化、代码鲁棒性及多端自适应能力**。而具体的业务逻辑实现、后端数据接口封装及第三方状态管理工具的深度集成，则不属于本规范约束的范畴。
+
+#### 1.3.2 约束词汇等级与执行
+
+本白皮书的工程执行细则引入三级强化约束机制，并对接不同的工程卡点：
+
+- **必须（MUST）—— 底线红线**：
+  - **含义**：若不满足此类准则，则视为存在缺陷，代码无法通过 CI，合并请求（PR）必须打回。
+  - **执行方式**：强拦截。通过 `Eslint`、`Prettier`、`vitest` 阈值等自动化工具强制执行。
+- **建议（SHOULD）—— 最佳实践**：
+  - **含义**：原则上必须遵守。若因特殊终端兼容性（如鸿蒙特定限制）无法遵守，需在 PR 中显式报备并由 Reviewer 确认。
+  - **执行方式**：人工介入。在 Code Review 阶段通过《PR 审查清单》逐一核实。
+- **可选（MAY）—— 优化引导**：
+  - **含义**：非必须实现的特性。鼓励贡献者在保障核心功能之余，进行体验或性能上的极致追求。
+  - **执行方式**：引导与激励。作为优秀代码示例在社区进行推荐。
+
+## 第二章：组件库核心技术演进与架构总结
+
+### 2.1 架构体系演进简史
+
+NutUI 的演进伴随着移动端技术的演进，从移动端到跨端，从 Vue 到 React，成为了业内移动端与跨端组件库的代表。
+
+当前的 React + Taro 的双架构模式，通过抽象的文件系统和目录结构编排设计，既实现了 H5 端基于原生 React Hooks 和 DOM 极速更新机制的极致性能与体验，又借助 Taro 多端框架体系内的 AST 转换与运行时桥接能力，赋予了通用组件“一次编写，多端运行”的降维覆盖能力。
+
+### 2.2 核心特性与技术壁垒盘点
+
+基于组件库的现实演进结果，我们总结了当前 NutUI-React 在市面上建立的五大核心技术壁垒与特性：
+
+1. **高密度且广阔的业务场景覆盖度**：目前已经高度沉淀并发布了超过 70 个高质量底层基础组件。组件类型横跨基础展示（Icon、Button）、表单录入交互（Input、Picker）、灵活的导航控制逻辑（Tabs、Elevator），以及高复杂度的直面业务级线材实现（诸如购物车商品流、时间日历规划器等）。
+2. **极速与克制的运行时性能体验**：全方位支持现代构建打包工具（Webpack、Vite）的深度 Tree-Shaking 按需引用的加载机制。极大地克制组件包依赖，消除冗余代码；同时，核心架构针对 React 18+ 提供的并发特性做了适配，并为服务端渲染（SSR）进行了代码安全前置考量（避免在组件初始化阶段污染 BOM/DOM 对象）。
+3. **多态化与松耦合的主题架构（Themeable System）**：全套采用纯粹的 CSS Variables（CSS自定义属性）介入机制体系，将曾经依赖构建工具如 Sass 变量运算才能完成的主题替换、暗黑模式切换等庞大工程，直接降级转化为纯碎无感的浏览器运行时级赋能。极大地降低了不同业务系统（B端、C端）接入定制系统的主题改造成本，可实现“千人千面”、“一键换肤”。
+4. **严密且可视化的质量防御体系**：全库实现了超过 90% 的单元高测试覆盖率。这不仅是对外宣传上的冰冷数字，更是我们在面临大型 React 升级或者底层组件重构时的安全气囊和信心底牌。
+5. **基于自动化和约定优于配置的分包与文档自生长**：我们利用深度自研和改造的 Node.js 工具链，让庞大的 Markdown 组件说明文档、React 组件 Props 的 TS 类型自动生成、多端代码之间的桥接，实现全链路自动化，极大地释放了核心团队维护说明与样例的人力投入。
+
+## 第三章：设计系统与视觉交互规范(Design System)
+
+所有的底层代码逻辑与工程架构体系，最终都必须也且只服务于终端用户的人机交互体验。NutUI-React 的视觉与交互基准从历史中来，完全源自于 **京东 APP 15.0 系统化视觉设计规范**，并在此基础上为通用性作出了提炼拓展。
+
+### 3.1 Design Tokens (设计令牌与变量系统)
+
+在组件开发中，核心开发者和贡献者必须彻底摒弃传统的物理魔法数字、硬编码十六进制色值或不确定的像素宽带单位。一切后续迭代扩展和开发中，**必须唯一引用系统内建及扩展出的 Design Tokens**。
+
+1. **三级降阶提取体系架构**：
+   在底层的 SCSS 体系中，严格遵循 `Global Tokens` (全局抽象跨越组件的底层变量) -> `Alias Tokens` (别名场景映射) -> `Component Tokens` (组件自身强相关的私有变量) 的三级递推。
+   - 例如：全局品牌色 `--nut-primary-color`，可延伸至按钮内部重命名使用为局部特性 `--nut-button-primary-background-color`。
+2. **语义化色彩的应用绝不妥协**：
+   所有的背景色、边框色、字符色应用必须赋予其内在语境意义。常见的包括 `Primary`（主品牌色彩与主要核心引导交互）、`Success/Warning/Danger`（强有力的系统级状态和警报传递意图）等。绝对禁止在组件样式文件 `*.scss` 中直接撰写如 `#fa2c19`，必须以类似 `color: var(--nutui-color-primary, #fa2c19);` 这种携带兜底机制的标准变量落点存在。
+
+### 3.2 交互与运动学基因原则 (Kinetics & Motion)
+
+移动端设备不同于桌面设备，用户的反馈链短切要求即时响应。组件体验必须是“连贯的”和“丝滑的灵动感”。
+
+1. **交互反馈状态全闭环处理优先**：
+   所有的存在点击或长按触发的交互控件（如 Button 按钮, Cell 列表项组件等）必须包含一套完整的反馈状态视觉闭环处理，显式化处理包括不仅限于 `:active` 伪类（常用于承当移动端特有的按下触探轻反馈）、和业务逻辑锁死的 `disabled` 状态（及其禁用的样式展示）、组件异步操作所致 `loading` （内部转场及防止多次冗长请求等）。
+2. **多终端动效参数高度体系化与归一化**：
+   动效（Motion）的过度持续时间 (Duration) 及其呈现缓动贝塞尔曲线函数 (Timing-function) 应遵循本团队建立的预设时间曲线。
+   - 轻量级的微交互元素状态改变（如元素的 Hover、按钮被按压时的 Active 等）其响应时效长应约束在 `150ms-250ms` 的反应弧内。
+   - 而存在层级关系的重度的全屏视图级覆盖/遮罩弹窗组件切换展开则须具备平稳过渡体系，推荐采用 `300ms` 左右的线性延展或缓出速度曲线。
+     （以上数值均须通过系统预制的 SCSS `transition-duration` 的基准类名及混入系统进行取参调用）。
+
+## 第四章：多端架构演进与代码结构标准
+
+多端同构与按需输出是本组件库最深度的独特性，也是其最大难点和挑战，为此，制定了以下结构性规范，以防止组件底层架构陷入快速腐化陷阱。
+
+### 4.1 Monorepo 管理边界与极度克制的目录结构设计
+
+为了使得用于纯粹面向 Web 的 H5 架构代码，和须被 Taro 开发依赖的小程序业务代码等能够被在一个 npm Package 或模块内实现深度有机结合、同时互相独立复用（彼此绝不包含不可执行逻辑），我们采用了强隔离的**双文件同构同名多产物策略**。
+
+任何单个 NutUI-React 组件的目录结构下，严格限定了最基本要求必须且不仅包含以下核心业务的骨架内容（以 Button 举例）：
+
+- `button.tsx`: 主要面向原生 Web（通常被称为 H5 端）环境的 React Hooks 特性及其虚拟 DOM 渲染树的原生实现。
+- `button.taro.tsx`: 这是必须单独提供、基于 Taro 面向非 Web 编译环境生态圈彻底重构（或部分 API 桥接调整后）的跨端实现代码。在 Taro 组件实现中严格杜绝所有直接或者底层的真实 DOM 的直接抓取和写入操作（`document.querySelector` 完全属大禁），必须采用小程序的抽象标签语义化包装实现（比如使用 `<View>` 代替 HTML 中非语义的 `<div>` 操作）。
+- `button.scss`: 此为需要贯通和统一多端的唯一真实样式源文件。在其中对于特殊设备布局的强要求是：只采用及尽量使用诸如 Flex 或者现代的 Grid 网络等能够保证多终端/跨浏览器表现一致的 CSS 现代盒模型布局模式。
+- `demo.tsx` 及 `demo.taro.tsx`：用于配套的，分别支持官方文档和移动端预览生成的样例调试场景代码，是向外传达用法的第一窗口，必需严格保证正确性。
+- `doc.md` / `doc.en-US.md` / `doc.taro.md`：不同语言和环境的详细 API 文档说明等。
+
+## 第五章：React 核心组件开发范式与规约
+
+面对具有声明式哲学但极易因为乱用特性而发生性能坍塌灾难的 React 系统，我们给出不可触碰和必须遵循的执行范式框架：
+
+### 5.1 Props 规范与向下兼容策略
+
+1. **统一基础属性继承**：
+   定义组件 Props 前，**必须（MUST）**继承全局抽象类型 `BasicComponent`（或 `MiniProgramBasicProps` 等多端公共类型），确保组件基础能力的统一。
+
+2. **强类型声明与规范**：
+
+   - **禁止 `any`**：Props 参数需使用显式联合类型，严禁使用 `any` 逃避类型检查。
+   - **事件命名**：对外事件统一以 `onXXX`（小驼峰）命名。
+   - **精简通信**：事件通信仅传递必要数据，避免携带冗余的组件实例或私有变量。
+   - **Ref 导出**：通过 Ref 抛出的函数须采用动词起首的指令式命名（如 `close()`, `play()`）。
+
+3. **样式透传与覆写 (Overwrite)**：
+   - **必选逃生口**：根节点渲染时，**必须（MUST）**支持透传外部传入的 `className` 与 `style`。
+   - **类名合并**：推荐使用 `classnames` 库合并内部与外部样式，确保开发者能灵活定制外观。
+
+### 5.2 Refs 透传机制
+
+- **强制 `forwardRef`**：所有组件必须使用 `React.forwardRef` 包裹，确保能正常透传 Ref 引用。
+- **保护性暴露**：支持高阶组件集成及指令式操作（如手动唤起弹窗、聚焦等）。
+- **受控 API 暴露**：若需暴露内部方法，应配合 `useImperativeHandle` 仅抛出必要的 API 指令。
+
+示例结构：
+
+```tsx
+export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>((props, ref) => { ... })
+```
+
+### 5.3 Hooks 与数据不可变原则
+
+1. **计算备忘 (useMemo)**：
+   复杂逻辑或昂贵的 UI 计算结果必须使用 `useMemo`，减少父组件更新导致的重复计算卡顿。
+
+2. **函数持久化 (useCallback)**：
+   传递给深层嵌套子组件的回调函数，须使用 `useCallback` 稳定引用，防止子组件无意义的重渲染。
+
+3. **不可变更新 (Immutable)**：
+   严禁直接修改私有状态。必须采用“副本替换”模式（如结构赋值）产生新对象/数组，确保状态可追溯且符合 React 渲染机制。
+
+### 5.4 组件防御与容灾红线
+
+1. **防阻断式崩溃**：
+
+   - 针对入参异常、异步失败、逻辑边界等风险点，必须内置 `try-catch` 或提供兜底 UI。
+   - 组件内部错误不得外溢导致整个前端应用白屏死机。
+
+2. **禁止越权行为**：
+   - **禁止全局拦截**：组件严禁私自内置 `Error Boundary` 接管系统错误。
+   - **禁止私自追踪**：严禁在基础组件内内置埋点、错误上报 SDK 或任何侵入业务方的监控行为。
+
+## 第六章：多端适配与降级策略
+
+多端开发的核心挑战在于应对宿主环境的分裂。本章旨在规范跨端适配逻辑，确保代码在不同环境下的可维护性与健壮性。
+
+### 6.1 平台私有特性处理规范
+
+在针对特定宿主环境（如鸿蒙专属系统交互、特定小程序 API）实施私有特性时，必须遵循“逻辑解耦”原则，防止平台差异代码侵蚀核心业务逻辑。
+
+**核心准则：**
+
+1. **禁止“面条式”硬编码**：严禁在组件主脉络中直接堆砌大量的 `if (env === 'WECHAT') ...` 等环境判断语句。此类写法会导致代码难以维护，并造成工程体量失控。
+2. **抽象适配层 (Adapter)**：将平台相关的底层执行模块或交互逻辑提取到独立的适配层中，通过专用接口或方法进行桥接，实现业务逻辑与底层环境的无害化隔离。
+3. **条件编译自动剪裁**：充分利用构建环境（Webpack/Vite）的条件编译能力（如识别 `__TARO_ENV` 变量），在编译阶段自动剪裁非目标平台的代码模块，确保产物精简且物理隔离。
+
+### 6.2 特性缺失的降级与静默处理 (Fallbacks / Silencing)
+
+当组件的某项特性在目标端缺乏底层支撑时，应遵循以下降级逻辑：
+
+1. **平滑补偿**：优先设计降级表现方案，确保视觉或交互体验的连贯性。
+2. **静默容错**：若物理条件导致特性完全无法实现且无降级方案，应采取“忽略策略”，确保程序逻辑不中断、不崩溃，严禁因非核心特性缺失导致应用白屏。
+
+---
+
+## 第七章：现代前端工程化标准与工作流
+
+在现代化组件库的建设中，**60% 的核心重任在于底层工程架构的统筹与自动化流水线的建立**。只有构建好这套“骨干”，剩下 40% 的具体业务代码产出才能如同精准执行的模块搭建。
+
+希望可以通过 **TS 类型堡垒** 确保逻辑的健壮性，通过 **BEM 规范** 确保样式的稳定性。这种“标准化驱动”的工作流能够将开发者从琐碎的维护中解放出来，专注于组件逻辑的高质量产出。
+
+### 7.1 TypeScript 类型堡垒：全维度静态防御
+
+为彻底杜绝代码隐患，必须构建 100% 覆盖的 TS 防御体系，严禁“降级”开发行为。
+
+- **零容忍 `any` 与 强制断言**：
+  - 严禁为了追求开发速度而滥用 `any`。
+  - 严格限制 `as unknown as Type` 等强制类型扭转操作。
+  - 所有组件接口、方法入参、返回载体必须经过精准的类型标注与推理设计。
+- **公共服务的“防爆墙”设计**：
+  - **封装隔离**：在 `index.ts` 等入口文件中，对对外暴露的 `Props`、`Event` 接口进行统一归口管理。
+  - **自说明文档（JSDoc）**：所有公开接口必须配载详尽的 **JSDoc 注释**，标明使用场景、边界条件与注意事项。
+  - **自动化补给**：利用自研脚本提取代码中的类型与注释信息，实现**线上官方文档的自动化生成**，确保代码即文档。
+
+### 7.2 BEM 命名规范：样式结构的抽象法则
+
+为解决传统 CSS 命名空间缺失、易引发全局样式污染的痛点，组件库强制执行 **BEM (Block Element Modifier)** 方法学。
+
+| 核心概念 | 定义与职责 | 命名示例与规范 |
+| --- | --- | --- |
+| **Block (块)** | 独立的功能实体，组件最外层包裹环境。 | 使用统一前缀，如 `.nut-button`。 |
+| **Element (元素)** | 依赖于 Block 的内部子组成部分，不可脱离块独立存在。 | 使用 **单连字符** 连接：`.nut-button-icon`。 |
+| **Modifier (修饰符)** | 定义 Block 或 Element 的不同状态、版本或外观变体。 | 使用 **单连字符** 连接：`.nut-button-primary`。 |
+
+#### 落地细则：
+
+1.  **Block 独立性**：每个组件必须拥有唯一的标识性前缀（如 `nut-`），确保样式在任何业务环境下具有“隔离防护性”。
+2.  **Element 从属性**：通过 `-` 明确层级关系，严禁出现三级以上的嵌套（如 `.a-b-c` 是错误的），保持结构的扁平化。
+3.  **Modifier 语义化**：修饰符仅用于描述状态（如 `active`、`disabled`）或规格（如 `small`、`large`），不得用于构建基础结构。
+
+---
+
+## 第八章：AI 在组件库架构与研发生态中的演进探索
+
+组件库的未来不仅在于端侧能力的扩展，更在于研发效率与生态的智能化革新。NutUI-React 将通过引入大模型 (LLM) 与 AI Agent，将 AI 深度植入开发、维护及消费全链路，构建智能化组件库新形态。
+
+### 8.1 研发效能增强：自动化文档与测试体系（Doc & Test Agent）
+
+- **现实痛点**：维护 80+ 组件的多语言文档、交互 Demo 以及高覆盖率（90%+）的单测极其耗费精力，是拖慢迭代节奏的主因。
+- **实施路径**：
+  1.  **大模型驱动的 JSDoc 文档自动补偿**：基于 `*.tsx` 严格的 Props 类型系统，利用 AI 解析上下文语义。自动生成中英双语参数描述、边缘情况警告，并结合 CI 流水线在 PR 提交前进行智能化校验与文档补全。
+  2.  **测试用例（Vitest）自生成**：利用 RAG（检索增强生成）技术读取仓库既有测试规范。当检测到新增组件或 Hooks 时，自动产出涵盖常规路径（Happy Path）与非法入参验证的单测基片，开发者仅需微调确认，预计可节省 50% 以上的开发成本。
+
+### 8.2 赋能业务消费方：智能物料与代码助手（Local UI Copilot）
+
+- **现实痛点**：传统“查阅文档 -> 拷贝代码 -> 手动拼装”的链路存在严重断层，业务方接入组件库的学习成本较高。
+- **实施路径**：
+  1.  **专精化 IDE 插件引擎**：将 NutUI-React 源码结构、Design Tokens 限制及 BEM 规范整合为知识库，构建专用的 IDE Copilot。在业务开发中实现高命中的组件导入预测与参数补全。
+  2.  **自然语言驱动的 UI 生成（Text to UI）**：在文档站集成意图理解能力。支持通过自然语言（如：“生成一个带滑动删除的商品购物车单元”）自动调度基础组件（`Swipe`, `Cell`, `InputNumber`）进行逻辑拼装，直接产出符合工程标准的 React 代码块。
+
+### 8.3 防御性治理：智能架构审查与风险预警（AI Reviewer）
+
+- **现实痛点**：核心团队难以 24 小时保持高强度审查，且人工难以完全规避细微的代码规范冲突。
+- **实施路径**：
+  在 GitHub Actions 流程中引入 AI Reviewer，对每个 PR 进行深度扫描与风险拦截：
+  1.  **规范背离拦截**：强力识别并拦截违反 BEM 命名法则、在样式中硬编码（Hardcoding）色值等破坏系统一致性的行为。
+  2.  **跨端架构一致性监测**：针对 Taro 与 H5 的双代码基建，自动比对 API 接口层。若 `button.tsx` 新增逻辑而在 `button.taro.tsx` 中未实现对等匹配或降级补偿，系统将立即报警并打回，将不一致性风险扼杀在合并阶段。
+
+经此，AI 在 NutUI-React 生态中的角色正从**“辅助生成”**转向**“规范管控”**。通过 Doc & Test Agent 释放人力，Copilot 降低门槛，AI Reviewer 守护底线，最终实现从代码编写到生态消费的全链路智能化闭环。
+
+## 第九章：坚如磐石的质量保障体系 (QA)
+
+作为广泛依赖的基础设施，任何微小缺陷都会在业务线中被无限放大。NutUI-React 设定了极其严苛的自动化与流程化质量体系，以确保底层基石的稳固。
+
+### 9.1 测试驱动：坚守 90% 覆盖率的红线
+
+**不可无测试发版**。新增组件或大规模重构必须守住 `90%` 以上的功能分支覆盖率。
+
+- **异常与边界防御**：测试重点不仅在于主流程（Happy Path），更在于防御性场景。包括：非法属性入参的平稳恢复、高并发触发下的防抖/节流处理、以及组件销毁时事件监听的强制卸载。
+- **精准 UI 断言**：利用 Vitest 矩阵，对 DOM 核心节点及交互状态（如 Loading 图标的显隐）进行像素级的状态判定。
+
+### 9.2 严苛的性能预算限额 (Performance Budget) —— 2026 标准版
+
+针对移动端设备的硬件长尾效应，NutUI-React 参照行业顶尖标准，将性能指标从“固定上限”进化为“分级动态限额”。
+
+#### 1. 包体积预算：从“单体体积”到“树摇 (Tree Shaking) 效率”
+
+业内标准（如 Ant Design）极其关注**原子化体积**。我们不应只看总包，更要看业务方引入单一组件时的增量。
+
+| 指标 | 业内对标 (Benchmark) | NutUI 严苛标准 (Limit) |
+| --- | --- | --- |
+| **原子组件增量** | < 5KB (Gzipped) | **≤ 3KB** (如 Button, Icon) |
+| **复合组件增量** | < 30KB (Gzipped) | **≤ 20KB** (如 Picker, Calendar) |
+| **Tree Shaking 损耗** | < 10% | **≤ 5%** (禁止任何副作用 Side Effects) |
+
+- **标准升级**：所有组件必须通过 `size-limit` 监控。若新功能导致 Gzip 体积增量超过 `500B`，必须在 PR 中提交体积膨胀说明。
+
+#### 2. 运行时预算：基于 RAIL 模型的感知阈值
+
+参考 Google 的 RAIL 性能模型，组件的响应必须符合人类直觉的生理极限。
+
+- **交互响应 (Response)**：从用户点击到组件视觉反馈（如波纹效果或状态切换），必须在 **50ms** 内完成，确保极速手感。
+- **动画流畅度 (Animation)**：所有过渡动画（如 Drawer 弹出）必须稳定在 **60fps**。折合每帧渲染时间 **≤ 16.6ms**（高刷屏设备要求 **≤ 8ms**）。
+- **长列表滚动 (Jank-free)**：在百级数据下，滚动时的脚本执行时间（Scripting Time）不得连续超过 **2 帧 (32ms)**，防止掉帧。
+
+#### 3. 渲染效率：虚拟化与时间分片 (Time Slicing)
+
+针对复杂组件，我们引入 React 18+ 的并发特性指标：
+
+- **渲染中断时长**：单个组件的同步渲染（Blocking Render）时长不得超过 **100ms**。超过此阈值的复杂计算必须使用 `useTransition` 或 `useDeferredValue` 降级，避免阻塞主线程。
+- **虚拟化强制令**：对于 List、Table、Tree 等容器类组件，当数据量超过 **50 条**时，必须强制开启（或提供）**虚拟滚动 (Virtual List)** 方案。
+
+#### 4. 内存与稳定性：防患于“泄露”未然
+
+内存预算不仅是总量控制，更是对“增长曲线”的监控。
+
+- **内存增量红线**：连续操作组件（如反复打开/关闭 Modal）10 次后，堆内存（Heap Size）增量应 **< 1MB**。
+- **对象持有检查**：严禁在全局作用域持有组件实例。卸载后，组件关联的 DOM 节点必须被完全垃圾回收（通过 Chrome DevTools 的 Detached Elements 检查）。
+
+#### 5. 自动化性能监控流水线 (Performance CI)
+
+为了让上述标准不沦为纸面文档，我们强制执行以下流程：
+
+1. **Lighthouse CI**：在预览环境下自动跑分，性能（Performance）分值低于 **90** 自动拦截合并。
+2. **Chrome Trace Bot**：利用自动化脚本模拟用户操作，抓取 `long tasks` 指标，若 PR 引入了超过 **50ms** 的 long task，则触发报警。
+
+### 9.3 绝对防御：硬核前端安全红线
+
+作为底层框架，组件库必须为业务方构筑第一道安全屏障：
+
+1.  **注入攻击防护**：涉及外部输入渲染的模块（如富文本 Props），**必须**内置严格的 XSS 转义过滤与 URL 协议白名单检测，阻断恶意脚本渗透。
+2.  **敏感信息脱敏**：严禁在生产环境包中保留 `console.log()` 或带有框架内部特征的调试信息。所有关键路径必须具备异常隔离机制，防止底层调用特性被恶意探测。
+
+### 9.4 拥抱无障碍体验 (Accessibility - A11y)
+
+我们坚持让视障或运动障碍群体也能无障碍地使用 NutUI。
+
+- **语义化注入**：所有组件强制支持 Web ARIA 标准属性。
+- **A11y 落地准则**：
+  - **视觉隔离**：装饰性图标需显式标注 `aria-hidden="true"`，避免读屏器冗余干扰。
+  - **交互补全**：无文本按钮必须具备 `aria-label` 描述词；表单组件须实时联动 `aria-checked` 或 `aria-invalid` 等状态控制标记。
+
+本章所设立的**覆盖率红线、性能预算、安全防御及 A11y 标准**，共同构成了 NutUI-React 的质量围栏。这不仅是对代码负责，更是对千万级业务流量的底线承诺。
+
+## 第十章：版本发布与代码审查规范 (CR)
+
+代码是团队的集体财产，而非个人的艺术画板。NutUI-React 的审查规则旨在防范“破窗效应”，确保每一行合并进主干的代码都符合工程化基准。
+
+### 10.1 严密的语义化版本模型 (SemVer)
+
+所有发布必须严格遵循 `SemVer` 规范，确保版本号单向线性递增，严禁隐性变更。
+
+- **主版本号 (Major - x.0.0)**：仅用于架构级巨变或**不可向后兼容的 Breaking Changes**（如底层框架升级、核心 API 彻底重构）。
+- **次版本号 (Minor - 0.y.0)**：用于**新增功能**。如发布新组件、为主力组件新增向下兼容的 Props 或方法。
+- **修订号 (Patch - 0.0.z)**：仅用于**缺陷修复 (Bugfixes)** 与静默的性能优化，必须保证对业务方的完全透明与兼容。
+
+### 10.2 生命周期管理：回退与废弃准则
+
+- **应急回退 (Rollback)**：若版本更新引发生产级灾难，必须在执行回滚的同时，同步发布**公开回退声明**，并归档事故追踪日志（Post-mortem），指引受影响的业务方平稳降级。
+- **克制的废弃 (Deprecation)**：禁止对陈旧组件进行“暴力砍除”。废弃流程必须分步执行：
+  1.  **标记**：添加 `@deprecated` 标注，在控制台输出升级指引。
+  2.  **陪伴期**：在接下来的一个完整 **Minor** 周期内，继续提供严重的 Bug 修复支持。
+  3.  **清退**：仅在跨 Major 版本时，方可正式移除已废弃的代码。
+
+### 10.3 PR 审查“三关口”核查法则 (The SWAT Checklist)
+
+任何特性分支（PR）在合并前，必须由核心成员（Maintainer）参照以下准则进行强制审查：
+
+#### 第一关：自动化预审 (Pre-Review Auto-Check)
+
+- [ ] **语法与 Lint**：`npm run lint` 无报错，命名符合 BEM 规范，无硬编码颜色/边距。
+- [ ] **类型安全**：`npm run tsc` 无类型错误，Props 继承自 `BasicComponent`，严禁 `any` 侵袭。
+- [ ] **测试覆盖率**：自动化 CI 流水线绿灯，新增/修改代码的功能分支覆盖率必须 > 90%。
+
+#### 第二关：架构与多端一致性 (Core Architecture Review)
+
+- [ ] **多端对齐**：确保 `.tsx` (H5) 与 `.taro.tsx` (Taro) 的功能实现、API 签名及交互体验高度一致。
+- [ ] **环境隔离**：核实 Taro 实现中严禁使用原生 DOM API，且使用了正确的语义化标签（如 `View` 替代 `div`）。
+- [ ] **API 设计**：事件回调以 `on` 起首，属性命名符合语义描述，确保 API 具备良好的向下兼容性。
+- [ ] **物料同步**：中/英/Taro 文档已同步更新，且配套的 Demo 示例代码能准确演示本次变更的特性。
+
+#### 第三关：性能、健壮性与安全 (Performance & Robustness)
+
+- [ ] **渲染效率**：检查昂贵逻辑的 `useMemo` 及回调函数的 `useCallback` 缺失风险，避免无意义的重渲染。
+- [ ] **副作用管理**：所有 `useEffect` 必须具备对应的 `cleanup` 逻辑（如解绑事件、销毁观察者）。
+- [ ] **容灾与安全**：关键路径有错误捕获（Try/Catch）及防御性布局，无 `console.log` 等调试信息遗留，富文本类 Props 经过脱敏转义处理。
+- [ ] **Ref 透传**：底层组件通过 `React.forwardRef` 正确暴露了必要的内部实例或命令式方法。
+
+本章不仅是发布指南，更是 NutUI-React 的**“基本法”**。通过严密的 SemVer 保护外部调用者，通过三道 CR 关口保护内部代码质量，最终实现组件库的长效健康。
+
+## 第十一章：社区共建与未来演进 (Community & Evolution)
+
+NutUI-React 的繁衍脱变离不开开源社区的支持与贡献。构建一套透明、高效的开源协同机制，是确保项目长青的核心方针。
+
+### 11.1 Issue 处理与需求分流机制
+
+为了平衡社区诉求与框架的通用性，所有问题反馈应遵循以下机制：
+
+- **缺陷限时响应**：确认属于核心代码或兼容性设计的 Issue，核心团队将快速打标并分配处理，并在最近的 Patch 版本中发布补丁。
+- **需求研讨机制 (Discussions)**：对于非通用型组件或偏门特性的新增诉求，不再直接进入开发流，而是引导至 `Discussions` 区域进行场景合理性研讨。当需求具备充分的通用性并达成社区共识后，方可转入正式开发规划。
+
+### 11.2 后续长期演进战略蓝图
+
+组件生态的建设是一项长期工程。在夯实前十章所述的基础规范之上，NutUI-React 将在以下深水区持续探索：
+
+- **深度适配鸿蒙原生生态**：超越目前的编译态适配，探索与鸿蒙底层设备特性的深度融合，实现真正的原生性能体验。
+- **全链路响应式与大屏适配**：打通跨端（折叠屏、Pad、桌面端）的布局边界，提供更智能的响应式布局方案。
+- **业务域复合块 (Business UI Blocks) 建设**：由原子组件向高阶业务块进化，提供具备完整业务逻辑内聚的领域级组件模版。
+
+NutUI-React 期待与全球开发者共同打磨这款跨端利刃。标准的演进是一个动态迭代的过程，唯有敬畏规范、拥抱变化，才能确保代码库生命树的基业长青。
+
+---
+
+由于文章系统构建复杂，涉及广阔的工程边界，极具深度。上述白皮书全本（共十一章）现已涵盖组件标准最为基层的建设价值观理念、深度横向跨多端的复杂架构模型策略导向方案、纯粹的且苛刻的代码级防线开发要求的全部底线说明等。也指明了未来我们将面临且拥抱在包括诸如 AI 化提效大潮乃至拥抱原生生态的体系内演进化工程发展目标长久愿景。这是 NutUI-React 稳步行走向前的“基本法”。我们由衷期待并将继续见证更多的开发者以此书作为契机，投身加入到这片开源共荣生态建设，一同推动属于每一个人的 NutUI 体系走向远大前程。
+
+> **状态**：第一版 (最终稿)
+> **编写团队**：NutUI-React 核心自治委员会
+> **维护预期**：本标准具备即时约束力。在通过 PR/Merge 时将严格以此文件规约作为检验核心。
diff --git a/scripts/a11y-governance.mjs b/scripts/a11y-governance.mjs
new file mode 100644
index 0000000000..b870c8817e
--- /dev/null
+++ b/scripts/a11y-governance.mjs
@@ -0,0 +1,154 @@
+import fs from 'fs'
+import path from 'path'
+import { glob } from 'glob'
+
+/**
+ * NutUI-React 无障碍治理统一脚本
+ * 
+ * 功能：
+ * 1. 自动为装饰性图标添加 aria-hidden (Web) / ariaHidden (Taro)。
+ * 2. 自动将 Taro (.taro.tsx) 中的无障碍属性转为驼峰式。
+ * 3. 修复 JSX 语法瑕疵 (如 / /> 转为 />) 并保护箭头函数。
+ * 4. 排除系统级非图标组件 (SearchBar, Tag 等)。
+ */
+
+// 提取文件中从 @nutui/icons-react 引入的组件名
+const getImportedIcons = (content) => {
+  const iconImports = []
+  const importRegex = /import\s+\{([^}]+)\}\s+from\s+['"]@nutui\/icons-react(?:-taro)?['"]/g
+  let match
+  while ((match = importRegex.exec(content)) !== null) {
+    const imports = match[1]
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((s) => s.split(/\s+as\s+/)[0]) // 处理 import { Close as MyClose }
+    iconImports.push(...imports)
+  }
+  return new Set(iconImports)
+}
+
+// 定义功能性图标及其默认标签 (中文字符串)
+const functionalLabels = {
+  Close: '关闭',
+  Plus: '增加',
+  Minus: '减少',
+  Del: '删除',
+  Delete: '删除',
+  Failure: '失败',
+  Error: '错误',
+  Success: '成功',
+  Check: '完成',
+  Left: '上一页',
+  Right: '下一页',
+  ArrowLeft: '上一页',
+  ArrowRight: '下一页',
+  Notice: '通知',
+}
+
+const runGovernance = async () => {
+  const files = await glob('src/packages/**/*.{tsx,taro.tsx}')
+  console.log(`🚀 Starting Intelligent A11y Governance for ${files.length} files...`)
+
+  let processedCount = 0
+
+  files.forEach((file) => {
+    const isTaro = file.endsWith('.taro.tsx')
+    let content = fs.readFileSync(file, 'utf-8')
+    const originalContent = content
+
+    const importedIcons = getImportedIcons(content)
+
+    // 步骤 1：Taro 属性规范化 (仅限 .taro.tsx)
+    if (isTaro) {
+      const mapping = {
+        'aria-label=': 'ariaLabel=',
+        'aria-checked=': 'ariaChecked=',
+        'aria-disabled=': 'ariaDisabled=',
+        'aria-busy=': 'ariaBusy=',
+        'aria-hidden="true"': 'ariaHidden',
+        'aria-hidden ': 'ariaHidden ',
+      }
+      Object.entries(mapping).forEach(([key, val]) => {
+        content = content.replace(new RegExp(key, 'g'), val)
+      })
+    }
+
+    // 步骤 2：图标智能治理
+    const iconPattern = /<([A-Z][a-zA-Z0-9]+)\s+([^>]*?)\/?>/g
+    content = content.replace(iconPattern, (match, tagName, attrs) => {
+      if (importedIcons.has(tagName)) {
+        // 识别交互属性 (onClick, onTouchStart, onXxx)
+        const hasEventHandler = /on[A-Z][a-zA-Z]+[=\s{]/.test(attrs)
+        const label = functionalLabels[tagName]
+        
+        // 如果已经是正确的功能图标治理，且已有 label，或者是不需要的治理，跳过
+        const hasLabel = attrs.includes('aria-label') || attrs.includes('ariaLabel')
+        const hasHidden = attrs.includes('aria-hidden') || attrs.includes('ariaHidden')
+        
+        // 判定：是否有事件，或者该图标在功能性映射表中
+        const isFunctional = hasEventHandler || !!label
+
+        const labelAttrPrefix = isTaro ? 'ariaLabel' : 'aria-label'
+        const hiddenAttr = isTaro ? 'ariaHidden' : 'aria-hidden="true"'
+
+        let cleanAttrs = attrs.replace(/\/\s*$/, '').trim()
+
+        if (isFunctional) {
+          // 如果是功能图标，必须有 label 且不能有 hidden
+          if (hasHidden) {
+            // 纠错：移除 aria-hidden (包括两边的空格)
+            cleanAttrs = cleanAttrs.replace(/\s*(aria-hidden="true"|ariaHidden)\s*/g, ' ').trim()
+          }
+          
+          if (!hasLabel) {
+            const finalLabel = label || '操作'
+            const labelAttr = `${labelAttrPrefix}="${finalLabel}"`
+            if (cleanAttrs === '') {
+              return `<${tagName} ${labelAttr} />`
+            }
+            return `<${tagName} ${labelAttr} ${cleanAttrs} />`
+          }
+          
+          // 如果已经有 label 且之前有 hidden，返回修复后的标签
+          if (hasHidden) {
+             if (cleanAttrs === '') {
+               return `<${tagName} />`
+             }
+             return `<${tagName} ${cleanAttrs} />`
+          }
+          return match
+        } else {
+          // 如果是装饰性图标，必须有 hidden 且最好没 label
+          if (hasHidden || hasLabel) return match // 已经治理过或被标记为功能性
+          
+          if (cleanAttrs === '') {
+            return `<${tagName} ${hiddenAttr} />`
+          }
+          return `<${tagName} ${hiddenAttr} ${cleanAttrs} />`
+        }
+      }
+      return match
+    })
+
+    // 步骤 3：语法清理 & 保护箭头函数
+    // 将 "/ />" 修复为 "/>"，但防止误伤 "=>"
+    content = content.replace(/\/ \/>/g, '/>')
+    
+    // 步骤 4：恢复由于误匹配可能导致的箭头函数损坏 (针对极极端情况)
+    content = content.replace(/= \/>/g, '=>')
+
+    if (content !== originalContent) {
+      fs.writeFileSync(file, content, 'utf-8')
+      console.log(`✅ [FIXED] ${file}`)
+      processedCount++
+    }
+  })
+
+  console.log(`\n✨ Governance complete! Modified ${processedCount} files.`)
+}
+
+runGovernance().catch((err) => {
+  console.error('❌ Error during A11y governance:', err)
+  process.exit(1)
+})
diff --git a/scripts/build-copilot-ctx.mjs b/scripts/build-copilot-ctx.mjs
new file mode 100644
index 0000000000..921cee421f
--- /dev/null
+++ b/scripts/build-copilot-ctx.mjs
@@ -0,0 +1,93 @@
+import fs from 'fs'
+import path from 'path'
+
+const PROPERTIES_PATH = './scripts/properties.json'
+const VARIABLES_PATH = './src/styles/variables.scss'
+const OUTPUT_PATH = './scripts/copilot/instructions.md' // 改为脚本同级的 copilot 文件夹下
+
+async function buildKnowledge() {
+  console.log('🚀 Starting NutUI-React AI Knowledge Building...')
+
+  // 1. Load Properties (Component APIs)
+  if (!fs.existsSync(PROPERTIES_PATH)) {
+    console.error('❌ properties.json not found')
+    return
+  }
+  const properties = JSON.parse(fs.readFileSync(PROPERTIES_PATH, 'utf-8'))
+  
+  // Group by Component
+  const components = {}
+  properties.forEach(item => {
+    const name = item['组件名']
+    if (!components[name]) components[name] = []
+    components[name].push({
+      prop: item['第一列'],
+      desc: item['第二列'],
+      type: item['第三列'],
+      default: item['第四列']
+    })
+  })
+
+  // 2. Load Tokens (Styles)
+  if (!fs.existsSync(VARIABLES_PATH)) {
+    console.error('❌ variables.scss not found')
+    return
+  }
+  const variablesContent = fs.readFileSync(VARIABLES_PATH, 'utf-8')
+  const tokenRegex = /\x24(color|font|spacing|radius)-([\w-]+):\s*var\((--nutui-[\w-]+).*?\)/g
+  const tokens = []
+  let match
+  while ((match = tokenRegex.exec(variablesContent)) !== null) {
+    tokens.push({
+      sass: match[0].split(':')[0],
+      css: match[3],
+    })
+  }
+
+  // 3. Generate Markdown for Copilot
+  let md = `# NutUI-React AI 研发助手指令库 (Single Source of Truth)\n\n`
+  
+  md += `## 1. 核心工程规范 (Core Rules)\n`
+  md += `### 命名规范 (Naming Convention)\n`
+  md += `- **前缀**: 所有组件和业务类名强制使用 \`nut-\` 前缀。\n`
+  md += `- **模式**: \`.nut-{block}-{suffix}\`（NutUI 采用扁平化的单连字符模式，而非标准的双下划线 BEM）。\n`
+  md += `- **示例**:\n`
+  md += `    - 正确: \`<div className="nut-button-wrap"><span className="nut-button-text">...</span></div>\`\n`
+  md += `    - 正确: \`<div className="nut-button-primary">...</div>\`\n`
+  md += `    - 错误: \`<div className="nut-button__text">...</div>\` (不要使用双下划线)\n\n`
+
+  md += `### Design Tokens 使用原则\n`
+  md += `- **严禁硬编码**: 禁止在 SCSS/Inline Style 中使用 Hex/RGB 颜色（如 #FFFFFF）。\n`
+  md += `- **变量映射**: 必须使用 CSS 变量，格式为 \`var(--nutui-[\w-]+)\`。\n`
+  md += `- **常见变量**:\n`
+  tokens.slice(0, 50).forEach(t => {
+    md += `    - \`${t.css}\` (用途: ${t.sass.replace('$color-', '').replace('$spacing-', '')})\n`
+  })
+  md += `\n`
+
+  md += `## 2. 组件 API 智能参考 (Component Dictionary)\n`
+  md += `以下是 NutUI-React 核心组件的参数规范，补全时请参考中文描述：\n\n`
+  
+  Object.keys(components).forEach(name => {
+    md += `### <${name} />\n`
+    md += `| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |\n`
+    md += `| :--- | :--- | :--- | :--- |\n`
+    components[name].forEach(p => {
+      md += `| ${p.prop} | ${p.desc} | \`${p.type}\` | ${p.default} |\n`
+    })
+    md += `\n`
+  })
+
+  md += `\n---\n*Generated by NutUI AI Metadata Tool. DO NOT manual edit.*\n`
+
+  // Ensure directory exists
+  const dir = path.dirname(OUTPUT_PATH)
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+
+  fs.writeFileSync(OUTPUT_PATH, md)
+  console.log(`✅ AI Knowledge Base generated at ${OUTPUT_PATH}`)
+}
+
+buildKnowledge()
diff --git a/scripts/copilot/README.md b/scripts/copilot/README.md
new file mode 100644
index 0000000000..1dd8f6e88e
--- /dev/null
+++ b/scripts/copilot/README.md
@@ -0,0 +1,37 @@
+# NutUI-React AI 研发助手库使用说明
+
+这是一个为 AI 编程助手（如 GitHub Copilot, Cursor）设计的 NutUI-React 专用知识增强包。通过它，AI 能更精准地理解 NutUI 的 **BEM 规范**、**Design Tokens** 以及 **组件 API**。
+
+## 📂 目录结构
+
+- `instructions.md`: 核心指令库。包含全量补全规范与 API 索引。
+- `../build-copilot-ctx.mjs`: 知识库自动提取脚本（建议组件库更新后运行）。
+
+## 🛠 如何使用 (业务方开发同学)
+
+### 方式一：作为项目指令 (推荐)
+
+1. 将 `instructions.md` 拷贝到你的业务项目根目录。
+2. 重命名为 `.github/copilot-instructions.md`。
+3. **效果**：你的 Copilot Chat 和自动补全将自动识别 NutUI 规范。当你说“写一个按钮”时，AI 会自动帮你带上 `nut-button` 前缀。
+
+### 方式二：在 Copilot Chat 中按需挂载
+
+1. 在 VS Code 的 Copilot 聊天框中输入 `#file`。
+2. 选择本目录下的 `instructions.md`。
+3. **效果**：AI 会在本次对话中参考最新的 NutUI 组件参数。
+
+## 🔄 维护与更新 (组件库核心成员)
+
+如果您在 `src/packages` 中新增了组件或修改了 `Props`，请运行以下命令刷新知识库：
+
+```bash
+node scripts/build-copilot-ctx.mjs
+```
+
+脚本会自动同步 `scripts/properties.json` 和 `src/styles/variables.scss` 的最新数据。
+
+## 💡 开发 Tip
+
+- **类名自动生成**：引入该指令后，AI 生成类名时会严格遵循 `.nut-{block}-{suffix}` 格式（如 `.nut-button-text`）。
+- **Token 智能联想**：尝试输入 `color: var(--nut`，AI 会根据本知识库的内容提示正确的 Token 变量。
diff --git a/scripts/copilot/instructions.md b/scripts/copilot/instructions.md
new file mode 100644
index 0000000000..ab8fc19efb
--- /dev/null
+++ b/scripts/copilot/instructions.md
@@ -0,0 +1,1456 @@
+# NutUI-React AI 研发助手指令库 (Single Source of Truth)
+
+## 1. 核心工程规范 (Core Rules)
+
+### 命名规范 (Naming Convention)
+
+- **前缀**: 所有组件和业务类名强制使用 `nut-` 前缀。
+- **模式**: `.nut-{block}-{suffix}`（NutUI 采用扁平化的单连字符模式，而非标准的双下划线 BEM）。
+- **示例**:
+  - 正确: `<div className="nut-button-wrap"><span className="nut-button-text">...</span></div>`
+  - 正确: `<div className="nut-button-primary">...</div>`
+  - 错误: `<div className="nut-button__text">...</div>` (不要使用双下划线)
+
+### Design Tokens 使用原则
+
+- **严禁硬编码**: 禁止在 SCSS/Inline Style 中使用 Hex/RGB 颜色（如 #FFFFFF）。
+- **变量映射**: 必须使用 CSS 变量，格式为 `var(--nutui-[w-]+)`。
+- **常见变量**:
+  - `--nutui-color-primary` (用途: primary)
+  - `--nutui-color-primary-stop-1` (用途: primary-stop-1)
+  - `--nutui-color-primary-stop-2` (用途: primary-stop-2)
+  - `--nutui-color-primary-pressed` (用途: primary-pressed)
+  - `--nutui-color-primary-disabled` (用途: primary-disabled)
+  - `--nutui-color-primary-icon` (用途: primary-icon)
+  - `--nutui-color-default` (用途: default)
+  - `--nutui-color-default-pressed` (用途: default-pressed)
+  - `--nutui-color-default-light` (用途: default-light)
+  - `--nutui-color-default-disabled` (用途: default-disabled)
+  - `--nutui-color-info` (用途: info)
+  - `--nutui-color-info-pressed` (用途: info-pressed)
+  - `--nutui-color-info-disabled` (用途: info-disabled)
+  - `--nutui-color-info-light` (用途: info-light)
+  - `--nutui-color-info` (用途: info-text)
+  - `--nutui-color-success` (用途: success)
+  - `--nutui-color-success-disabled` (用途: success-disabled)
+  - `--nutui-color-success-text` (用途: success-text)
+  - `--nutui-color-warning` (用途: warning)
+  - `--nutui-color-warning-disabled` (用途: warning-disabled)
+  - `--nutui-color-warning-text` (用途: warning-text)
+  - `--nutui-color-danger` (用途: danger)
+  - `--nutui-color-danger-pressed` (用途: danger-pressed)
+  - `--nutui-color-danger-light` (用途: danger-light)
+  - `--nutui-color-danger-text` (用途: danger-text)
+  - `--nutui-color-background` (用途: background)
+  - `--nutui-color-mask` (用途: mask)
+  - `--nutui-color-mask-part` (用途: mask-part)
+  - `--nutui-color-border` (用途: border)
+  - `--nutui-color-border-disabled` (用途: border-disabled)
+  - `--nutui-color-title` (用途: title)
+  - `--nutui-color-text` (用途: text)
+  - `--nutui-color-text-help` (用途: text-help)
+  - `--nutui-color-text-disabled` (用途: text-disabled)
+  - `--nutui-color-text-link` (用途: text-link)
+  - `--nutui-font-size-xxxs` (用途: $font-size-xxxs)
+  - `--nutui-font-size-xxs` (用途: $font-size-xxs)
+  - `--nutui-font-size-xs` (用途: $font-size-xs)
+  - `--nutui-font-size-s` (用途: $font-size-s)
+  - `--nutui-font-size-base` (用途: $font-size-base)
+  - `--nutui-font-size-l` (用途: $font-size-l)
+  - `--nutui-font-size-icon` (用途: $font-size-icon)
+  - `--nutui-font-size-xl` (用途: $font-size-xl)
+  - `--nutui-font-size-xxl` (用途: $font-size-xxl)
+  - `--nutui-font-size-10` (用途: $font-size-xxxl)
+  - `--nutui-font-size-11` (用途: $font-size-xxxxl)
+  - `--nutui-font-weight-light` (用途: $font-weight-light)
+  - `--nutui-font-weight` (用途: $font-weight)
+  - `--nutui-font-weight-medium` (用途: $font-weight-medium)
+  - `--nutui-font-weight-bold` (用途: $font-weight-bold)
+
+## 2. 组件 API 智能参考 (Component Dictionary)
+
+以下是 NutUI-React 核心组件的参数规范，补全时请参考中文描述：
+
+### <Button />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| type | 按钮的样式 | ``default` | `primary` | `info` | `warning` | `danger` | `success`` | default |
+| size | 按钮的尺寸 | ``normal` | `large` | `small`` | normal |
+| shape | 按钮的形状 | ``square` | `round`` | round |
+| color | 按钮颜色，支持传入 linear-gradient 渐变色 | `string` | - |
+| fill | 填充模式 | ``solid` | `ouline` | `none`` | solid |
+| disabled | 是否禁用按钮 | `boolean` | false |
+| block | 是否为块级元素 | `boolean` | false |
+| icon | 按钮图标 | `ReactNode` | - |
+| loading | 按钮loading状态 | `boolean` | false |
+| onClick | 点击按钮时触发 | `onClick: (e: MouseEvent) => void` | false |
+
+### <CellGroup />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 分组标题 | `ReactNode` | - |
+| description | 分组描述 | `ReactNode` | - |
+| divider | 单元格之间是否有分割线 | `boolean` | true |
+
+### <Cell />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 标题 | `ReactNode` | - |
+| description | 描述 | `ReactNode` | - |
+| extra | 右侧描述 | `ReactNode` | - |
+| radius | 圆角半径 | `string` | 6px |
+| align | 纵轴方向上的对齐方式，可选值为：`flex-start`、`center`、`flex-end` | `string` | flex-start |
+| onClick | 点击事件 | `onClick: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void` | false |
+
+### <ConfigProvider />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| locale | 设置多语言包 | `BaseLang` | zhCN |
+| theme | 设置主题 | `Record<string, string>` | - |
+
+### <Icon />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| name | 图标名称或图片链接 | `string` | - |
+| color | 图标颜色 | `string` | - |
+| width | 图标大小，如 `20px` `2em` `2rem` | ``string` | `object`` | - |
+| height | 图标大小，如 `20px` `2em` `2rem` | ``string` | `object`` | - |
+| onClick | 点击图标时触发 | `event: Event` | - |
+
+### <IconFont />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| name | 图标名称或图片链接 | `string` | - |
+| color | 图标颜色 | `string` | - |
+| size | 图标大小，如 `20px` `2em` `2rem` | ``string` | `number`` | - |
+| classPrefix | 类名前缀，用于使用自定义图标 | `string` | nut-iconfont |
+| fontClassName | 自定义 icon 字体基础类名 | `string` | nutui-iconfont |
+| tag | tsx 标签 | `string` | i |
+| onClick | 点击图标时触发 | `event: Event` | - |
+
+### <Image />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| src | 图片链接 | `string` | - |
+| fit | 图片填充模式，等同于原生的 object-fit 属性 | `ImageFit` | fill |
+| position | 图片位置，等同于原生的 object-position 属性 | `ImagePosition` | center |
+| alt | 替代文本 | `string` | - |
+| width | 宽度，默认单位`px` | `string` | - |
+| height | 高度，默认单位`px` | `string` | - |
+| radius | 圆角大小 | ``string` | `number`` | - |
+| error | 是否展示图片加载失败 | ``boolean | ReactNode`` | true |
+| loading | 是否展示加载中图片 | ``boolean | ReactNode`` | true |
+| lazy | 是否为懒加载图片 | `boolean` | false |
+| onClick | 点击图片时触发 | `(e: MouseEvent) => void` | - |
+| onLoad | 图片加载完后触发 | `() => void` | - |
+| onError | 图片加载失败后触发 | `() => void` | - |
+| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | `` |  |
+| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | `` |  |
+| fill | 拉伸图片，使图片填满元素 | `` |  |
+| none | 保持图片原有尺寸 | `` |  |
+| scale-down | 取 none 或 contain 中较小的一个 | `` |  |
+| center | 居中对齐 | `` |  |
+| top | 顶部对齐 | `` |  |
+| right | 右侧对齐 | `` |  |
+| bottom | 底部对齐 | `` |  |
+| left | 左侧对齐 | `` |  |
+
+### <Overlay />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 当前组件是否显示 | `boolean` | false |
+| zIndex | 遮罩层级 | `number` | 2000 |
+| duration | 动画时长，单位秒 | `number` | 0.3 |
+| lockScroll | 背景是否锁定 | `boolean` | true |
+| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | true |
+| onClick | 点击时触发 | `event: Event` | - |
+| afterClose | 完全关闭后触发 | `() => void` | - |
+| afterShow | 完全展示后触发 | `() => void` | - |
+
+### <Divider />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| contentPosition | 内容位置 | ``left` | `center` | `right`` | center |
+| direction | 水平还是垂直类型 | ``horizontal` | `vertical`` | horizontal |
+
+### <Grid />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| columns | 列数 | ``number` | `string`` | 4 |
+| gap | 格子之间的间距，默认单位为`px` | ``number` | `string`` | 0 |
+| center | 是否将格子内容居中显示 | `boolean` | true |
+| square | 是否将格子固定为正方形 | `boolean` | false |
+| reverse | 内容翻转 | `boolean` | false |
+| direction | 格子内容排列的方向 | ``horizontal` | `vertical`` | vertical |
+| onClick | 宫格子项点击事件 | `(index) => void` | - |
+
+### <Grid.Item />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| text | 文字 | ``string` | `ReactNode`` | - |
+| onClick | 点击格子时触发 | `(event: Event) => void` | - |
+
+### <Row />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| type | 布局方式，可选值为flex | `string` | - |
+| gutter | 列元素之间的间距（单位为px） | ``string` | `number`` | 0 |
+| justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | `string` | start |
+| align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | `string` | flex-start |
+| wrap | Flex是否换行，可选值为 nowrap wrap reverse | `string` | nowrap |
+| onClick | Fired when clicked | ``event: MouseEvent, type: 'row' | 'col'`` | - |
+
+### <Col />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | ``string` | `number`` | 24 |
+| offset | 列元素偏移距离 | ``string` | `number`` | 0 |
+| onClick | 点击时触发 | ``event: MouseEvent, type: 'row' | 'col'`` | - |
+
+### <Sticky />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| position | 吸附位置 | ``top` | `bottom`` | top |
+| threshold | 距离，当 position 为 top 时，设置的是 top | `number` | 0 |
+| zIndex | 吸附时的层级 | `number` | 2000 |
+| container | 容器的 ref | `React.RefObject<HTMLElement>` | - |
+| onChange | 吸附状态改变时触发 | `(val: boolean) => void` | - |
+
+### <BackTop />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| target | 获取监听的目标元素 | `string` | - |
+| threshold | 页面垂直滚动多高后出现 | `number` | 200 |
+| zIndex | 设置组件页面层级 | `number` | 10 |
+| duration | 设置动画持续时间，为 0 时表示无动画 | `number` | 1000 |
+| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | - |
+
+### <Elevator />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| height | 电梯区域的高度 | ``number` | `string`` | 200px |
+| floorKey | 索引 key 值 | `string` | title |
+| list | 索引列表 | `Array（item 需包含 id、name 属性, name 支持传入 html 结构）` | [{id: 0, name: ''}] |
+| sticky | 索引是否吸顶 | `boolean` | false |
+| showKeys | 展示右侧导航 | `boolean` | true |
+| spaceHeight | 右侧锚点的上下间距 | `number` | 23 |
+| titleHeight | 左侧索引的高度 | `number` | 35 |
+| onClickItem | 点击内容 | `onClickItem:(key: string, item: { id: number, name: string })=>void` | false |
+| onClickIndex | 点击索引 | `onClickIndex:(key: string)=>void` | false |
+
+### <FixedNav />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否打开 | `boolean` | false |
+| list | 悬浮列表内容数据 | `Array` | [] |
+| activeText | 收起列表按钮文案 | `string` | 收起导航 |
+| inactiveText | 展开列表按钮文案 | `string` | 快速导航 |
+| type | 导航方向 | ``left` | `right`` | right |
+| overlay | 展开时是否显示遮罩 | `boolean` | true |
+| position | fixed 垂直位置 | `object` | {top: 'auto', bottom: 'auto'} |
+| content | 自定义按钮 | `ReactNode` | - |
+| onChange | 展开收起按钮回调 | `value: boolean` | - |
+| onSelect | 选择之后触发 | `item, event: MouseEvent` | - |
+
+### <Navbar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| right | 右侧内容 | `ReactNode` | - |
+| left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | - |
+| back | 返回区域的文字 | `ReactNode` | - |
+| fixed | 是否固定 | `boolean` | false |
+| safeArea | 是否适配安全区 | `boolean` | false |
+| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | false |
+| zIndex | 导航栏层级 | ``number` | `string`` | 10 |
+| onClickBack | 点击返回区域后的回调 | `onClickBack:(event: Event)=>void` | false |
+
+### <SideNavBar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 组件是否显示 | `boolean` | false |
+| title | 整体标题 | `string` | - |
+| width | 遮罩宽度百分比 | `string` | 80% |
+| position | 弹出位置 | ``left` | `right`` | left |
+| indent | 缩进宽度 | `number` | 20 |
+| onClose | 关闭遮罩时触发 | `-` | - |
+
+### <SubSideNavBar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 导航唯一标识 | ``string` | `number`` | - |
+| title | 整体标题 | `string` | - |
+| open | 导航是否默认展开 | `boolean` | true |
+| onClick | 导航点击 | ``data: {title: string, value: string | number, isShow: boolean}`` | - |
+
+### <SideNavBarItem />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 导航唯一标识 | ``string` | `number`` | - |
+| title | 整体标题 | `string` | - |
+| onClick | 导航点击 | ``data: {title: string, value: string | number}`` | - |
+
+### <Tabbar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultValue | 默认选中的标签的索引值 | `number` | 0 |
+| value | 选中的标签的索引值 | `number` | - |
+| fixed | 是否固定在页面底部，为 true 时默认开启 safeArea | `boolean` | false |
+| activeColor | icon激活的颜色 | `string` | #1989fa |
+| inactiveColor | icon未激活的颜色 | `string` | #7d7e80 |
+| safeArea | 是否开启iphone系列全面屏底部安全区适配 | `boolean` | false |
+| onSwitch | 切换页签时触发事件 | `(value) => void` | - |
+
+### <Tabbar.Item />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 标签页的标题 | `ReactNode` | - |
+| icon | 自定义图标 | `ReactNode` | - |
+| value | 徽标中显示的内容，支持数字、字符和自定义内容 | `ReactNode` | - |
+| max | value 为数值时，最大值 | `number` | 99 |
+| dot | 徽标是否为小点 | `boolean` | false |
+| top | 徽标的上下偏移量，支持单位设置，可设置为：5 等 | `number` | 0 |
+| right | 徽标的左右偏移量，支持单位设置，可设置为：5 等 | `number` | 0 |
+
+### <Tabs />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 当前激活 tab 面板的值 | ``number` | `string`` | 0 |
+| defaultValue | 初始化激活 tab 的值 | ``number` | `string`` | 0 |
+| activeColor | 标签选中色 | `string` | #1a1a1a |
+| direction | 使用横纵方向 | ``horizontal` | `vertical`` | horizontal |
+| activeType | 选中底部展示样式 可选值 `line`、`smile` | `string` | line |
+| duration | 切换动画时长,单位 ms 0 代表无动画 | ``number` | `string`` | 300 |
+| title | 自定义导航区域 | `() => JSX.Element[]` | - |
+| align | 标题左对齐 | ``left` | `right`` | - |
+| autoHeight | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tabpane 的高度而发生变化。 | `boolean` | false |
+| tabStyle | 标签栏样式 | `CSSProperties` | {} |
+| onClick | 点击标签时触发 | ``(index: string | number) => void`` | - |
+| onChange | 当前激活的标签改变时触发 | ``(index: string | number) => void`` | - |
+
+### <Tabs.Tabpane />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 标题 | `string` | - |
+| value | 标签 Key , 匹配的标识符, 默认为索引值 | ``string` | `number`` | - |
+| disabled | 是否禁用标签 | `boolean` | false |
+
+### <Address />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否打开地址选择 | `boolean` | - |
+| type | 地址选择类型 exist/custom | `string` | custom |
+| existList | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | `Array` | [] |
+| defaultIcon | 已有地址列表默认图标，type='exist' 时生效 | `ReactNode` | - |
+| selectIcon | 已有地址列表选中图标，type='exist' 时生效 | `ReactNode` | - |
+| closeIcon | 自定义关闭弹框按钮图标 | `ReactNode` | - |
+| backIcon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | `ReactNode` | - |
+| custom | 是否可以切换自定义地址选择，type='exist' 时生效 | ``boolean` | `string`` | true |
+| onExistSelect | 选择已有地址列表时触发 | `(data: AddressList) => void` | - |
+| onSwitch | 点击'选择其他地址'或自定义地址选择左上角返回按钮触发 | `(data: { type: string }) => void` | - |
+
+### <Calendar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否可见 | `boolean` | false |
+| type | 类型，日期选择'single'，区间选择'range' | `string` | single |
+| popup | 是否弹窗状态展示 | `boolean` | true |
+| autoBackfill | 自动回填 | `boolean` | false |
+| title | 显示标题 | `string` | 日期选择 |
+| defaultValue | 默认值，日期选择 string 格式，区间选择 Array 格式 | ``string | Array`` | - |
+| startDate | 开始日期， 如果不限制开始日期传 null | `string` | 今天 |
+| endDate | 结束日期，如果不限制结束日期传 null | `string` | 距离今天 365 天 |
+| showToday | 是否展示今天标记 | `boolean` | true |
+| startText | 范围选择，开始信息文案 | `ReactNode` | 开始 |
+| endText | 范围选择，结束信息文案 | `ReactNode` | 结束 |
+| confirmText | 底部确认按钮文案 | `ReactNode` | 确认 |
+| showTitle | 是否在展示日历标题 | `boolean` | true |
+| showSubTitle | 是否展示日期标题 | `boolean` | true |
+| scrollAnimation | 是否启动滚动动画 | `boolean` | true |
+| renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | ``() => string` | JSX.Element |
+| renderDay | 日期信息 | ``(date: Day) => string` | JSX.Element |
+| renderDayTop | 日期顶部信息 | ``(date: Day) => string` | JSX.Element |
+| renderDayBottom | 日期底部信息 | ``(date: Day) => string` | JSX.Element |
+| onClickDay | 点击/选择后触发 | `(data: string) => {}` |  |
+| onPageChange | 年月子标题到达顶部时触发 | `(param: string) => {}` |  |
+| onConfirm | 选择之后或是点击确认按钮触发 | `(param: string) => {}` |  |
+| onClose | 关闭时触发 | `() => {}` |  |
+| day | `string | number` | `` |  |
+| type | `string` | `` |  |
+| scrollToDate | 滚动到指定日期所在月,如：'2023-06-30' | `string` |  |
+
+### <Cascader />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 选中值，受控 | ``(number | string)[]`` | - |
+| defaultValue | 默认选中值 | ``(number | string)[]`` | - |
+| options | 级联数据 | `Array` | - |
+| popup | 是否弹窗状态展示 | `boolean` | true |
+| visible | 级联显示隐藏状态 | `boolean` | false |
+| activeColor | 选中激活颜色 | `string` | - |
+| activeIcon | 标记选中的Icon | `string` | ReactNode |
+| lazy | 是否开启动态加载 | `boolean` | false |
+| optionKey | 自定义`options`结构中，包含 textKey、valueKey、childrenKey | `object` | - |
+| format | 当options为可转换为树形结构的扁平结构时，配置转换规则 | `object` | - |
+| title | 标题 | `string` | - |
+| closeIconPosition | 取消按钮位置，继承 Popup 组件 | `string` | top-right |
+| closeIcon | 自定义关闭按钮，继承 Popup 组件 | `ReactNode` | close |
+| closeable | 是否显示关闭按钮，继承 Popup 组件 | `boolean` | true |
+| onLoad | 动态加载回调，开启动态加载时生效 | `(node: any, resolve: any) => void` | - |
+| onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | - |
+| onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | - |
+
+### <Checkbox />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| checked | 是否选中 | `boolean` | false |
+| defaultChecked | 初始是否选中 | `boolean` | false |
+| disabled | 是否禁用选择 | `boolean` | false |
+| labelPosition | 文本所在的位置 | ``left` | `right`` | right |
+| icon | 选中前 | `ReactNode` | 'CheckNormal' |
+| activeIcon | ，选中后 | `ReactNode` | 'Checked' |
+| indeterminateIcon | 半选状态 | `ReactNode` | 'CheckDisabled' |
+| label | 复选框的文本内容 | `string` | - |
+| value | 标识值，用于 Group 模式 | ``string` | `number`` | - |
+| onChange | 值变化时触发 | `(value: boolean) => void` | - |
+
+### <Checkbox.Group />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 当前选中项的标识符 | ``string` | `number`` | - |
+| defaultValue | 初始选中项的标识符 | ``string` | `number`` | - |
+| disabled | 是否禁用选择,将用于其下的全部复选框 | `boolean` | false |
+| max | 限制最大可选数 | `number` | - |
+| labelPosition | 文本所在的位置 | ``left` | `right`` | right |
+| direction | 使用横纵方向 可选值 horizontal、vertical | `string` | vertical |
+| options | 配置 options 渲染复选按钮 | `Array<{ label: string value: string disabled?: boolean }>` | - |
+| onChange | 值变化时触发 | `(value: string[]) => void` | - |
+| toggle | 全选/取消 | `传 `true`,表示全选，传 `false`,表示取消全选` |  |
+| reverse | 反选 | `-` |  |
+
+### <DatePicker />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultValue | 初始值 | `Date` | null |
+| value | 受控 | `Date` | null |
+| visible | 是否可见 | `boolean` | false |
+| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | `string` | date |
+| minuteStep | 分钟步进值 | `number` | 1 |
+| showChinese | 每列是否展示中文 | `boolean` | false |
+| title | 设置标题 | `string` | null |
+| startDate | 开始日期 | `Date` | 十年前 |
+| endDate | 结束日期 | `Date` | 十年后 |
+| formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | - |
+| filter | 选项过滤函数 | `(type: string, option: PickerOption) => PickerOption[]` | - |
+| threeDimensional | 是否开启3D效果 | `boolean` | true |
+| onConfirm | 点击确定按钮时触发 | `(options, value) => void` | - |
+| onClose | 关闭时触发 | `(options, value) => void` | - |
+| onChange | 选项改变时触发 | `(options, value, index) => void` | - |
+
+### <Form />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| form | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 | `FormInstance` | - |
+| footer | 表单底部区域，一般放置确认和重置按钮 | `ReactNode` | null |
+| initialValues | 表单初始值 | `any` | - |
+| name | 表单名称 | `any` | - |
+| labelPosition | 表单项 label 的位置 | ``top` | `left` | `right`` | right |
+| starPosition | 必填表单项 label 的红色星标位置 | ``left` | `right`` | left |
+| onFinish | 校验成功后触发 | `(values: any) => void` | - |
+| onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | - |
+
+### <Form.Item />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | false |
+| name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | - |
+| errorMessageAlign | 错误提示文案对齐方式 | ``center` | `right` | `left`` | left |
+| initialValue | 设置子元素默认值 | `any` | - |
+| trigger | 设置收集字段值变更的时机 | `string` | - |
+| valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | `string` | - |
+| getValueFromEvent | 设置如何将 event 的值转换成字段值 | `(...args: any) => any` | - |
+| onClick | 点击事件并收集子组件 Ref | `(event: React.MouseEvent, componentRef: React.MutableRefObject<any>) => void` | - |
+| required | 是否为必选字段 | `boolean` |  |
+| message | 错误提示文案 | `string` |  |
+| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | `number` |  |
+| max | 必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | `number` |  |
+| min | 必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度 | `number` |  |
+| pattern | 正则表达式匹配 | `RegExp` |  |
+| transform | 将字段值转换成目标值后进行校验 | `(value) => any` |  |
+| validator | 自定义校验，接收 Promise 作为返回值 | `(rule, value) => Promise` |  |
+| getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |  |
+| setFieldsValue | 设置表单的值 | `(values) => void` |  |
+| resetFields | 重置表单提示状态 | `() => void` |  |
+| submit | 提交表单进行校验的方法 | `Promise` |  |
+
+### <Input />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultValue | 初始默认值 | `string` | - |
+| value | 初始默认值 | `string` | - |
+| type | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit` | `string` | text |
+| name | 组件名字，用于表单提交获取数据 | `string` | - |
+| placeholder | 输入框为空时占位符 | `string` | - |
+| align | 输入框内容对齐方式，可选值 `left`、`center`、`right` | `string` | left |
+| disabled | 是否禁用 | `boolean` | false |
+| readOnly | 是否只读 | `boolean` | false |
+| autoFocus | 是否自动获得焦点，iOS 系统不支持该属性 | `boolean` | false |
+| maxLength | 限制最长输入字符 | ``string` | `number`` | - |
+| clearable | 展示清除 Icon | `boolean` | false |
+| clearIcon | 清除图标 Icon <a href="#/icon">可参考 Icon </a> | `ReactNode` | MaskClose |
+| confirmType | 键盘右下角按钮的文字，仅在type='text'时生效,可选值 send：发送、search：搜索、next：下一个、go：前往、done：完成 | `string` | done |
+| formatter | 输入内容格式化函数 | `(val: string) => string` | - |
+| formatTrigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | `string` | - |
+| onChange | 输入框内容变化时触发 | `(value: string) => void` | - |
+| onBlur | 失去焦点后触发 | `(value: string) => void` | - |
+| onFocus | 获得焦点后触发 | `(value: string) => void` | - |
+| onClear | 点击清空按钮时触发 | `(value: string) => void` | - |
+| onClick | 点击 input 容器触发 | `(value: MouseEvent<HTMLDivElement>) => void` | - |
+
+### <InputNumber />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| allowEmpty | 是否允许内容为空 | `boolean` | false |
+| defaultValue | 默认值 | ``string` | `number`` | 0 |
+| value | 当前值，受控值 | ``string` | `number`` | - |
+| min | 最小值限制 | ``string` | `number`` | 1 |
+| max | 最大值限制 | ``string` | `number`` | 9999 |
+| step | 步长 | ``string` | `number`` | 1 |
+| digits | 设置保留的小数位 | ``string` | `number`` | 0 |
+| disabled | 禁用所有功能 | `boolean` | false |
+| readOnly | 只读状态禁用输入框操作行为 | `boolean` | false |
+| async | 支持异步修改 | `boolean` | false |
+| formatter | 指定输入框展示值的格式 | ``function(value: number | string): string`` | - |
+| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | - |
+| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | - |
+| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | - |
+| onChange | 值改变时触发 | ``(param: string | number, e: MouseEvent | ChangeEvent<HTMLInputElement>) => void`` | - |
+| onFocus | 输入框获得焦点时触发 | `(e: FocusEvent<HTMLInputElement>) => void` | - |
+| onBlur | 输入框失去焦点时触发 | `(e: ChangeEvent<HTMLInputElement>) => void` | - |
+
+### <Menu />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| activeColor | 选项的选中态图标颜色 | `string` | #F2270C |
+| closeOnOverlayClick | 是否在点击遮罩层后关闭菜单 | `boolean` | true |
+| lockScroll | 背景是否锁定 | `boolean` | true |
+| scrollFixed | 滚动后是否固定，可设置固定位置 | ``boolean` | `string` | `number`` | true |
+| icon | 自定义标题图标 | `React.ReactNode` | - |
+
+### <MenuItem />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 菜单项标题 | `string` | 当前选中项文字 |
+| options | 选项数组 | `array` | - |
+| disabled | 是否禁用菜单 | `boolean` | false |
+| columns | 可以设置一行展示多少列 options | `number` | 1 |
+| icon | 自定义选项图标 | `React.ReactNode` | Check |
+| direction | 菜单展开方向，可选值为up | `string` | down |
+| onChange | 选择 option 之后触发 | `(event: any) => void` | - |
+| toggle | 切换菜单展示状态，传 true 为显示，false 为隐藏，不传参为取反 | `show?: boolean` |  |
+
+### <NumberKeyboard />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否显示键盘 | `boolean` | false |
+| title | 键盘标题 | `ReactNode` | - |
+| type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `string` | default |
+| random | 随机数 | `boolean` | false |
+| custom | 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项 | `string[]` | - |
+| confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | `string` | 完成 |
+| onChange | 点击按键时触发 | `(value: string) => void` | - |
+| onDelete | 点击删除键时触发 | `-` | - |
+| onClose | 点击关闭按钮或非键盘区域时触发 | `-` | - |
+| onConfirm | 点击确定按钮时触发 | `-` | - |
+
+### <Picker />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否可见 | `boolean` | false |
+| title | 设置标题 | `string` | - |
+| options | 列表数据 | `Array` | [] |
+| value | 选中值，受控 | `Array` | [] |
+| defaultValue | 默认选中 | `Array` | [] |
+| threeDimensional | 是否开启3D效果 | `boolean` | true |
+| duration | 快速滑动时惯性滚动的时长，单位 ms | ``string` | `number`` | 1000 |
+| onConfirm | 点击确认按钮时候回调 | `(options, value) => void` | - |
+| onChange | 每一列值变更时调用 | `(options, value) => void` | - |
+| onClose | 关闭时触发 | `(options, value) => void` | - |
+| afterClose | 联动时，关闭时回调 | `(options, value) => void` | - |
+| text | 选项的文字内容 | ``string` | `number`` | - |
+| value | 选项对应的值，且唯一 | ``string` | `number`` | - |
+| children | 用于级联选项 | `Array` | - |
+
+### <Radio />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| checked | 指定当前是否选中 | `boolean` | - |
+| defaultChecked | 初始是否选中 | `boolean` | - |
+| disabled | 是否禁用选择 | `boolean` | false |
+| value | 携带的标识值，用于 Group 模式 | ``string` | `number`` | - |
+| labelPosition | 文本所在的位置 | ``left` | `right`` | right |
+| icon | <a href="#/icon">图标名称</a>，选中前(建议和`activeIcon`一起修改) | `ReactNode` | 'CheckNormal' |
+| activeIcon | <a href="#/icon">图标名称</a>，选中后(建议和`icon`一起修改) | `ReactNode` | 'CheckChecked' |
+| shape | 形状 | ``button` | `round` | `round`` | round |
+| onChange | 选中态变化时触发 | `(checked: boolean) => void` | - |
+
+### <Radio.Group />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 当前选中项的标识符 | ``string` | `number`` | - |
+| labelPosition | 文本所在的位置 | ``left` | `right`` | right |
+| disabled | 是否禁用 | `boolean` | false |
+| direction | 使用横纵方向 | ``horizontal` | `vertical`` | vertical |
+| options | 配置 options 渲染单选按钮 | `Array<{ label: string value: string disabled?: boolean }>` | - |
+| onChange | 值变化时触发 | ``(value: string | number) => void`` | - |
+
+### <Range />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultValue | 默认进度百分比，非受控 | ``number` | `number[]`` | 0 |
+| value | 当前进度百分比，受控 | ``number` | `number[]`` | 0 |
+| range | 是否开启双滑块模式 | `boolean` | false |
+| max | 最大值 | `number` | 100 |
+| min | 最小值 | `number` | 0 |
+| maxDescription | 最大值描述，传 `null` 表示隐藏 | `ReactNode` | - |
+| minDescription | 最小值描述，传 `null` 表示隐藏 | `ReactNode` | - |
+| currentDescription | 当前值描述，传 `null` 表示隐藏 | ``((value) => ReactNode)` | `null`` | - |
+| step | 步长 | `number` | 1 |
+| disabled | 是否禁用滑块 | `boolean` | false |
+| vertical | 是否竖向展示 | `boolean` | false |
+| marks | 刻度标示 | `Object{key: number}` | {} |
+| button | 自定义滑动按钮 | `ReactNode` | - |
+| onChange | 进度实时变化，通常在受控方式中与 value 一起使用 | `(value) => void` | - |
+| onStart | 开始拖动时触发 | `-` | - |
+| onEnd | 结束拖动时触发 | `(value) => void` | - |
+
+### <Rate />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultValue | 非受控的 star 默认值 | `number` | 0 |
+| value | 受控的 star 数值 | `number` | 0 |
+| count | star 总数 | `number` | 5 |
+| min | 最少选中star数量 | `number` | 0 |
+| uncheckedIcon | 使用图标(未选中) | `ReactNode` | star-n |
+| checkedIcon | 使用图标(选中) | `ReactNode` | star-n |
+| allowHalf | 是否半星 | `boolean` | false |
+| readOnly | 是否只读 | `boolean` | false |
+| disabled | 是否禁用 | `boolean` | false |
+| onChange | 当前 star 数修改时触发 | `(value: number) => void` | - |
+
+### <SearchBar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 当前输入的值 | `string` | - |
+| placeholder | 输入框默认暗纹 | `string` | 请输入 |
+| shape | 搜索框形状，可选值为 `round` | `string` | square |
+| disabled | 是否禁用输入框 | `boolean` | false |
+| readOnly | 输入框只读 | `boolean` | false |
+| maxLength | 最大输入长度 | `number` | 9999 |
+| clearable | 是否展示清除按钮 | `boolean` | true |
+| autoFocus | 是否自动聚焦 | `boolean` | false |
+| left | 搜索框左侧区域 | `ReactNode` | - |
+| right | 搜搜框右侧区域 | `ReactNode` | - |
+| leftIn | 输入框内左侧区域 | `ReactNode` | <Search width="12" height="12" /> |
+| rightIn | 输入框内右侧区域 | `ReactNode` | - |
+| onChange | 输入内容时触发 | `(value: string, event: Event) => void` | - |
+| onFocus | 聚焦时触发 | `(value: string, event: Event) => void` | - |
+| onBlur | 失焦时触发 | `(value: string, event: Event) => void` | - |
+| onClear | 点击清空时触发 | `(event: Event) => void` | - |
+| onSearch | 确定搜索时触发 | `(val: string) => void` | - |
+| onClickInput | 点击输入区域时触发 | `(event: Event) => void` | - |
+
+### <ShortPassword />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 密码字符串 | `string` | - |
+| visible | 是否展示短密码框 | `boolean` | false |
+| plain | 是否展示明文 | `boolean` | false |
+| title | 标题 | `ReactNode` | 请输入密码 |
+| description | 密码框描述 | `ReactNode` | 您使用了虚拟资产，请进行验证 |
+| tips | 提示语 | `ReactNode` | 忘记密码 |
+| hideFooter | 是否隐藏底部按钮 | `boolean` | true |
+| length | 密码长度，取值为4~6 | `number` | 6 |
+| error | 错误信息提示 | `ReactNode` | - |
+| autoFocus | 自动聚焦 | `boolean` | false |
+| onChange | 输入密码时触发事件 | `(value) => void` | - |
+| onConfirm | 点击确认时触发事件 | `(value) => void` | - |
+| onCancel | 点击取消时触发事件 | `() => void` | - |
+| onClose | 点击关闭图标和遮罩时触发事件 | `() => void` | - |
+| onTips | 点击忘记密码时触发事件 | `() => void` | - |
+| onComplete | 输入完成的回调 | `(value) => void` | - |
+| onFocus | 输入框聚焦 | `() => void` | - |
+
+### <Signature />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| customClass | 自定义 class | `string` | - |
+| lineWidth | 线条的宽度 | `number` | 3 |
+| strokeStyle | 绘图笔触颜色 | `string` | #000 |
+| type | 图片格式 | `string` | png |
+| unsupported | 不支持 Canvas 情况下的展示文案 | `ReactNode` | 对不起，当前浏览器不支持 Canvas，无法使用本控件！ |
+| onConfirm | 点击确认按钮触发事件回调函数 | `onConfirm: (canvas: HTMLCanvasElement, dataurl: string) => void` | - |
+| onClear | 点击重签按钮触发事件回调函数 | `onClear: () => void` | - |
+| confirm | 确认签字 | `() => void` |  |
+| clear | 清除签字 | `() => void` |  |
+
+### <Switch />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultChecked | 开关状态，非受控 | `boolean` | false |
+| checked | 开关状态，受控 | `boolean` | false |
+| disabled | 禁用状态 | `boolean` | false |
+| activeText | 打开时文字描述 | `string` | - |
+| inactiveText | 关闭时文字描述 | `string` | - |
+| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | - |
+
+### <TextArea />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 输入框内容，受控 | `string` | - |
+| defaultValue | 初始默认值，非受控 | `string` | - |
+| placeholder | 设置占位提示文字 | `string` | 请输入内容 |
+| maxLength | 限制最长输入字符，-1 表示无限制 | `number` | 140 |
+| rows | textarea 的行数 | `number` | 2 |
+| showCount | textarea 是否展示输入字符。须配合`maxLength`使用 | `boolean` | false |
+| autoSize | 高度是否可拉伸 | `boolean` | false |
+| readOnly | 只读属性 | `boolean` | false |
+| disabled | 禁用属性 | `boolean` | false |
+| onChange | 输入内容时触发 | `(value) => void` | - |
+| onFocus | 聚焦时触发 | `(event) => void` | - |
+| onBlur | 失焦时触发 | `(event) => void` | - |
+
+### <Uploader />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| autoUpload | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | `Boolean` | true |
+| name | `input` 标签 `name` 的名称，发到后台的文件参数名 | `string` | file |
+| url | 上传服务器的接口地址 | `string` | - |
+| defaultValue | 默认已经上传的文件列表 | `FileType<React.ReactNode>[]` | [] |
+| value | 已经上传的文件列表 | `FileType<string>[]` | [] |
+| preview | 是否上传成功后展示预览图 | `boolean` | true |
+| previewUrl | 当上传非图片('image')格式的默认图片地址 | `string` | - |
+| deletable | 是否展示删除按钮 | `boolean` | true |
+| method | 上传请求的 http method | `string` | post |
+| previewType | 上传列表的内建样式，支持两种基本样式 picture、list | `string` | picture |
+| capture | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture")，直接调起摄像头 | `string` | false |
+| maxFileSize | 可以设定最大上传文件的大小（字节） | ``number` | `string`` | Number.MAX_VALUE |
+| maxCount | 文件上传数量限制 | ``number` | `string`` | 1 |
+| imageFit | 图片填充模式 | ``contain` | `cover` | `fill` | `none` | `scale-down`` | cover |
+| clearInput | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件 | `boolean` | true |
+| accept | 允许上传的文件类型，[详细说明]("https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B") | `string` | \* |
+| headers | 设置上传的请求头部 | `object` | {} |
+| data | 附加上传的信息 formData | `object` | {} |
+| uploadIcon | 上传区域<a href="#/zh-CN/icon">图标名称</a> | `React.ReactNode` | - |
+| uploadLabel | 上传区域图片下方文字 | `React.ReactNode` | - |
+| xhrState | 接口响应的成功状态（status）值 | `number` | 200 |
+| withCredentials | 支持发送 cookie 凭证信息 | `Boolean` | false |
+| multiple | 是否支持文件多选 | `boolean` | false |
+| disabled | 是否禁用文件上传 | `boolean` | false |
+| timeout | 超时时间，单位为毫秒 | ``number` | `string`` | 1000 \* 30 |
+| beforeUpload | 上传前的函数需要返回一个`Promise`对象 | ``(file: File[]) => Promise<File[] | boolean>`` | - |
+| beforeXhrUpload | 执行 XHR 上传时，自定义方式 | `(xhr: XMLHttpRequest, options: any) => void` | - |
+| beforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | `(file: FileItem, files: FileItem[]) => boolean` | - |
+| onStart | 文件上传开始 | `options` | - |
+| onProgress | 文件上传的进度 | `event, options, percentage` | - |
+| onOversize | 文件大小超过限制时触发 | `files` | - |
+| onSuccess | 上传成功 | `responseText, options` | - |
+| onFailure | 上传失败 | `responseText, options` | - |
+| onChange | 上传文件改变时的状态 | `fileList, event` | - |
+| onDelete | 文件删除之前的状态 | `files, fileList` | - |
+| onFileItemClick | 文件上传成功后点击触发 | `fileItem` | - |
+| status | 文件状态值，可选'ready,uploading,success,error,removed' | `ready` |  |
+| uid | 文件的唯一标识 | `new Date().getTime().toString()` |  |
+| name | 文件名称 | `-` |  |
+| url | 文件路径 | `-` |  |
+| type | 文件类型 | `image/jpeg` |  |
+| formData | 上传所需的data | `new FormData()` |  |
+| submit | 手动上传模式，执行上传操作 | `-` | - |
+| clear | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | `index` | - |
+
+### <ActionSheet />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 遮罩层可见 | `boolean` | false |
+| title | 设置列表面板标题 | `string` | - |
+| description | 设置列表面板副标题/描述 | `string` | - |
+| options | 列表项 | `Array` | [] |
+| optionKey | 列表项的自定义设置 | `{ [key: string]: string }` | - |
+| cancelText | 取消文案 | `string` | 取消 |
+| onSelect | 选择之后触发 | `(item: any, index: number) => void` | - |
+| onCancel | 点击取消文案时触发 | `() => void` | - |
+| name | 列表项的标题key值 | `string` | - |
+| description | 列表项的描述key值 | `string` | - |
+| danger | 高亮颜色 | `string` | $primary-color |
+| disable | 禁用状态 | `string` | $color-text-disabled |
+
+### <Badge />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | - |
+| max | value 为数值时，最大值 | `number` | 99 |
+| dot | 是否为小点 | `boolean` | false |
+| top | 上下偏移量，支持单位设置，可设置为：5 等 | `number` | 0 |
+| right | 左右偏移量，支持单位设置，可设置为：5 等 | `number` | 0 |
+| color | 徽标背景颜色,默认值为当前主题色 | `string` | - |
+
+### <Dialog />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 对话框是否可见 | `boolean` | - |
+| title | 标题 | `ReactNode` | - |
+| content | 对话框的内容，适用于函数式调用 | `ReactNode` | - |
+| footer | 自定义页脚，传入 null 则不显示 | `ReactNode` | - |
+| confirmText | 确认按钮文案 | `ReactNode` | 确定 |
+| cancelText | 取消按钮文案 | `ReactNode` | 取消 |
+| overlay | 是否展示遮罩 | `boolean` | true |
+| hideConfirmButton | 是否隐藏确定按钮 | `boolean` | false |
+| hideCancelButton | 是否隐藏取消按钮 | `boolean` | false |
+| disableConfirmButton | 禁用确定按钮 | `boolean` | false |
+| closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | true |
+| footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | horizontal |
+| lockScroll | 背景是否锁定 | `boolean` | true |
+| beforeCancel | 取消前回调，点击取消时触发 | `() => boolean` | - |
+| beforeClose | 关闭前回调 | `() => boolean` | - |
+| onConfirm | 确定按钮回调 | ``(e?: MouseEvent) => Promise | void`` | - |
+| onCancel | 取消按钮回调 | `() => void` | - |
+| onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | - |
+| onClick | 点击自身回调 | `() => void` | - |
+| onOverlayClick | 点击蒙层触发 | `() => void` | - |
+
+### <Drag />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| attract | 是否开启自动吸边 | `boolean` | false |
+| direction | 拖拽元素的拖拽方向限制 | ``x` | `y` | `all`` | all |
+| boundary | 拖拽元素的拖拽边界 | `Object` | {top: 0, left: 0, right: 0, bottom: 0} |
+
+### <Empty />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| image | 图片,支持传入图片 URL | `ReactNode` | - |
+| imageSize | 图片大小，number 类型单位为 px | ``number` | `string`` | - |
+| description | 图片下方的描述文字 | `ReactNode` | - |
+| status | 默认图片错误类型 | ``empty` | `error` | `network`` | empty |
+
+### <InfiniteLoading />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| hasMore | 是否还有更多数据 | `boolean` | true |
+| threshold | 距离底部多远加载 | `number` | 200 |
+| capture | 是否使用捕获模式 true 捕获 false 冒泡 | `boolean` | false |
+| target | 获取监听的目标元素 | `string` | - |
+| loadMoreText | “没有更多数”据展示文案 | `string` | 哎呀，这里是底部了啦 |
+| pullRefresh | 是否开启下拉刷新 | `boolean` | false |
+| pullingText | 下拉刷新提示文案 | `ReactNode` | 松手刷新 |
+| loadingText | 上拉加载提示文案 | `ReactNode` | 加载中... |
+| onRefresh | 下拉刷新事件回调 | `(param: () => void) => void` | - |
+| onLoadMore | 继续加载的回调函数 | `(param: () => void) => void` | - |
+| onScroll | 实时监听滚动高度 | `(param: number) => void` | - |
+
+### <NoticeBar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| direction | 滚动的方向，可选 horizontal、vertical | `string` | horizontal |
+| content | 提示的信息 | `string` | - |
+| closeable | 是否启用关闭模式 | `boolean` | false |
+| leftIcon | 左边的 icon，closeable 模式下默认为空 | `ReactNode` | - |
+| rightIcon | 右边的 icon，在 closeable 模式下默认为 `<Close />` | `ReactNode` | - |
+| delay | 延时多少秒 | ``string` | `number`` | 1 |
+| scrollable | 是否可以滚动 | `boolean` | true |
+| speed | 滚动速率 (px/s) | `number` | 50 |
+| wrap | 是否开启文本换行 | `boolean` | false |
+| onClick | 外层点击事件回调 | `(event: any) => void` | - |
+| onClose | 关闭通知栏时触发 | `(event: any) => void` | - |
+| onClickItem | 垂直滚动多条数据时，点击当前展示的信息时触发 | `(event: any, value: any) => void` | - |
+| list | 纵向滚动数据列表 | `Array` | [] |
+| speed | 滚动的速度 | `number` | 50 |
+| duration | 停留时间(毫秒) | `number` | 1000 |
+| height | 每一个滚动列的高度(px) | `number` | 40 |
+| closeable | 是否启用右侧关闭图标，可以通过 rightIcon 自定义图标 | `boolean` | false |
+
+### <Notify />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| type | 提示的信息类型（primary，success ，danger，warning） | `string` | danger |
+| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `string` | 3000 |
+| position | 自定义位置 (top, bottom) | `string` | top |
+| onClick | 点击事件回调 | `onClick: () => void` | - |
+| onClose | 关闭事件回调 | `onClose: () => void` | - |
+
+### <Popover />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| list | 选项列表 | `List[]` | [] |
+| visible | 是否展示气泡弹出层 | `boolean` | false |
+| location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `string` | bottom |
+| offset | 出现位置的偏移量 | ``string[] | number[]`` | [0, 12] |
+| showArrow | 是否显示小箭头 | `boolean` | true |
+| closeOnClickAction | 是否在点击选项后关闭 | `boolean` | true |
+| closeOnClickOutside | 是否在点击外部元素后关闭菜单 | `boolean` | true |
+| targetId | 自定义目标元素 id | `string` | - |
+| onClick | 点击切换 popover 展示状态 | `() => void` | () => {} |
+| onSelect | 点击选项时触发 | `(item: List, index: number) => void` | (item, index) => {} |
+| onOpen | 点击菜单时触发 | `() => void` | () => {} |
+| onClose | 关闭菜单时触发 | `() => void` | () => {} |
+| key | 选项 key 值 | `string` | - |
+| name | 选项文字 | `string` | - |
+| icon | 参考 Icon 组件 | `ReactNode` | - |
+| disabled | 是否为禁用状态 | `boolean` | false |
+| className | 为对应选项添加额外的类名 | `string` | - |
+
+### <Popup />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 当前组件是否显示 | `boolean` | false |
+| zIndex | 遮罩层级 | ``string` | `number`` | 2000 |
+| duration | 遮罩动画时长，单位秒 | `number` | 0.3 |
+| overlayClassName | 自定义遮罩类名 | `string` | - |
+| overlayStyle | 自定义遮罩样式 | `CSSProperties` | - |
+| lockScroll | 背景是否锁定 | `boolean` | true |
+| overlay | 是否显示遮罩 | `boolean` | true |
+| closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | true |
+| position | 弹出位置 | ``top` | `bottom` | `left` | `right` | `center`` | center |
+| transition | 动画名 | `string` | - |
+| style | 自定义弹框样式 | `CSSProperties` | - |
+| className | 自定义弹框类名 | `string` | - |
+| closeable | 是否显示关闭按钮 | `boolean` | false |
+| closeIconPosition | 关闭按钮位置 | ``top-left` | `top-right` | `bottom-left` | `bottom-right`` | top-right |
+| closeIcon | 自定义 Icon | `ReactNode` | close |
+| destroyOnClose | 组件不可见时，卸载内容 | `boolean` | false |
+| round | 是否显示圆角 | `boolean` | false |
+| portal | 指定节点挂载 | ``HTMLElement` | `(() => HTMLElement)`` | null |
+| onClick | 点击弹框时触发 | `event: MouseEvent` | - |
+| onClickCloseIcon | 点击关闭图标时触发 | `event: MouseEvent` | - |
+| onOpen | 打开弹框时触发 | `-` | - |
+| onClose | 关闭弹框时触发 | `-` | - |
+| afterShow | 继承于`Overlay`, 遮罩打开动画结束时触发 | `event: HTMLElement` | - |
+| afterClose | 继承于`Overlay`, 遮罩关闭动画结束时触发 | `event: HTMLElement` | - |
+| onClickOverlay | 点击遮罩触发 | `event: MouseEvent` | - |
+
+### <PullToRefresh />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| canReleaseText | 释放的提示文案 | `ReactNode` | 释放立即刷新 |
+| completeText | 完成时的提示文案 | `ReactNode` | 刷新成功 |
+| completeDelay | 完成后延迟消失的时间，单位为 ms | `number` | 500 |
+| disabled | 是否禁用下拉刷新 | `boolean` | false |
+| headHeight | 头部提示内容区的高度，单位为 px | `number` | 40 |
+| pullingText | 下拉的提示文案 | `ReactNode` | 下拉刷新 |
+| refreshingText | 刷新时的提示文案 | `ReactNode` | 加载中…… |
+| renderText | 根据下拉状态，自定义下拉提示文案 | `ReactNode` | - |
+| threshold | 触发刷新需要下拉多少距离，单位为 px | `number` | 60 |
+| onRefresh | 触发刷新时的处理函数 | `() => Promise<any>` | - |
+
+### <Skeleton />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | true |
+| animated | 是否开启骨架屏动画 | `boolean` | false |
+| avatar | 是否显示头像 | `boolean` | false |
+| avatarShape | 头像形状：正方形/圆形 | `string` | round |
+| avatarSize | 头像大小 | `string` | 50px |
+| rows | 设置段落行数 | `string` | 1 |
+| title | 是否显示段落标题 | `boolean` | true |
+
+### <Swipe />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| name | 标识符，可以在事件参数中获取到 | ``number` | `string`` | - |
+| leftAction | 左侧滑动区域的内容 | `ReactNode` | - |
+| rightAction | 右侧滑动区域的内容 | `ReactNode` | - |
+| beforeClose | 关闭前的回调函数，返回滑动区域所在方向 `position` | ``(position: 'left | 'right') => void`` | - |
+| disabled | 是否禁用滑动 | `boolean` | false |
+| onOpen | 打开单元格侧边栏 | ``(name, position): { name: string | number, position: 'left' | 'right' } => void`` | - |
+| onClose | 收起单元格侧边栏 | ``(name, position): { name: string | number, position: 'left' | 'right' } => void`` | - |
+| onActionClick | 点击左侧或者右侧时触发 | ``(event: Event, position: 'left' | 'right') => void`` | - |
+| onTouchStart | onTouchStart | `(event: Event) => void` | - |
+| onTouchMove | onTouchMove | `(event: Event) => void` | - |
+| onTouchEnd | onTouchEnd | `(event: Event) => void` | - |
+| open | 打开单元格侧边栏，`side`参数默认为`right` | ``(side?: 'left' | 'right') => void`` |  |
+| close | 收起单元格侧边栏 | `() => void` |  |
+
+### <Toast />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| content | Toast文本内容 | `React.ReactNode` | - |
+| duration | 展示时长（秒）<br>值为 0 时，toast 不会自动消失 | `number` | 2 |
+| position | toast展示位置 | ``top` | `center` | `bottom`` | center |
+| title | 标题 | `string` | - |
+| icon | 自定义图标 | ``success` | `fail` | `loading` | `warn` | `React.ReactNode`` | - |
+| size | 文案尺寸，三选一 | ``small` | `base` | `large`` | base |
+| contentClassName | 自定义内容区类名 | `string` | - |
+| contentStyle | 自定义内容区样式 | `React.CSSProperties` | - |
+| closeOnOverlayClick | 是否在点击遮罩层后关闭提示 | `boolean` | false |
+| lockScroll | 背景是否锁定 | `boolean` | false |
+| onClose | 关闭时触发的事件 | `() => void` | () => void |
+| clear | 关闭所有显示中的`Toast` | `-` |  |
+| config | `Toast`全局配置 | ``{ duration: number, position: 'top' | 'center' | 'bottom', closeOnOverlayClick: boolean, lockScroll: boolean }`` |  |
+
+### <Animate />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| type | 动画类型，见下方type值说明 | `AnimateType` | shake |
+| action | 触发方式，'initial'--初始化执行; 'click'--点击执行 | ``initial` | `click`` | initial |
+| loop | 是否循环执行。true-循环执行;false-执行一次 | `boolean` | false |
+| onClick | 点击元素时触发 | `event: Event` | - |
+| 1 | shake | `抖动，建议loop为true` |  |
+| 2 | ripple | `不循环则是放大后缩小，循环则是心跳` |  |
+| 3 | breath | `呼吸灯，建议loop为true` |  |
+| 4 | float | `漂浮，建议loop为true` |  |
+| 5 | slide-right | `由右向左划入` |  |
+| 6 | slide-left | `由左向右划入` |  |
+| 7 | slide-top | `由上至下划入` |  |
+| 8 | slide-bottom | `由下至上划入` |  |
+| 9 | jump | `跳跃，建议loop为true` |  |
+| 10 | twinkle | `水波，建议loop为true` |  |
+| 11 | flicker | `擦亮按钮，建议loop为true` |  |
+
+### <AnimatingNumbers />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| length | 设置最大展示长度，数值位数不够，数值前面按位补 0 | `number` | 0 |
+| value | 结束值,必填项 | `string` | number |
+| delay | 等待动画执行时间，单位 ms | `number` | 300 |
+| duration | 动画执行时间，单位 s | `number` | 1 |
+| thousands | 是否有千位分隔符 | `boolean` | false |
+
+### <Audio />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| src | 语音资源链接 | `string` | - |
+| muted | 是否静音 | `boolean` | false |
+| autoPlay | 是否自动播放 | `boolean` | false |
+| loop | 是否循环播放 | `boolean` | false |
+| preload | 是否预加载语音 | ``none` | `metadata` | `auto`` | auto |
+| type | 展示形式，可选值：controls 控制面板 progress 进度条 icon 图标 none 自定义 | `string` | progress |
+| onBack | 语音快退回调，type = progress 时生效 | `(event：HTMLAudioElement) => void` | - |
+| onForward | 语音快进回调，type = progress 时生效 | `(event：HTMLAudioElement) => void` | - |
+| onPause | 暂停回调 | `(event：HTMLAudioElement) => void` | - |
+| onEnd | 语音播放完成，loop = false 时生效 | `(event：HTMLAudioElement) => void` | - |
+| onMute | 静音回调 | `(event：HTMLAudioElement) => void` | - |
+| onCanPlay | 可以播放媒体时触发 | `(event：HTMLAudioElement) => void` | - |
+
+### <Avatar />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| size | 设置头像的大小 | ``large` | `normal` | `small` | `numbers`` | - |
+| shape | 设置头像的形状 | ``round` | `square`` | round |
+| background | 设置 Icon、字符类型头像的背景色 | `string` | #eee |
+| color | 设置 Icon、字符类型头像的颜色 | `string` | #666 |
+| fit | 图片填充模式 | ``contain` | `cover` | `fill` | `none` | `scale-down` | `cover`` | - |
+| src | 设置图片类型头像的地址 | `string` | - |
+| alt | 设置图片类型头像无法显示时的替代文本 | `string` | - |
+| icon | 设置 Icon 类型头像图标 | `ReactNode` | - |
+| onClick | 点击头像触发事件 | `(e: MouseEvent) => void` | - |
+| onError | 图片加载失败的事件 | `() => void` | - |
+
+### <AvatarGroup />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| max | 显示的最大头像个数 | ``string` | `number`` | - |
+| maxContent | 头像数量超出时，会出现一个头像折叠元素。该元素内容可为...、more、+N。 | `string` | - |
+| size | 设置头像的大小，可选值为：large、normal、small，支持直接输入数字 | ``large` | `normal` | `small`` | - |
+| shape | 设置头像的形状 | ``string` | `round`` | - |
+| maxBackground | 设置 Icon、字符类型头像的背景色 | `string` | #eee |
+| maxColor | 设置 Icon、字符类型头像的颜色 | `string` | #666 |
+| gap | 设置头像之间的间距 | `string` | -8 |
+| level | 头像之间的层级关系，可选值为：left、right | ``left` | `right`` | left |
+
+### <CircleProgress />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| percent | 百分比 | ``number` | `string`` | 必传项，无默认值 |
+| strokeWidth | 圆弧的宽度 | ``number` | `string`` | 5 |
+| radius | 半径 | ``number` | `string`` | 50 |
+| color | 圆环进度条颜色，传入对象格式可以定义渐变色 | ``object | string`` | - |
+| background | 圆环轨道颜色 | `string` | #d9d9d9 |
+| strokeLinecap | 圆环进度条端点形状 | ``butt` | `round` | `square` | `inherit`` | round |
+| clockwise | 是否顺时针展示 | `boolean` | true |
+
+### <Collapse />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| defaultActiveName | 默认展开面板的 name，非受控 | ``Array<string>` | `string`` | - |
+| activeName | 当前展开面板的 name，受控 | ``Array<string>` | `string`` | - |
+| accordion | 是否开启手风琴模式 | `boolean` | false |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | ``string` | `number`` | 180 |
+| expandIcon | 自定义展开图标 | `ReactNode` | - |
+
+### <Collapse.Item />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| name | 唯一标识符，必填 | `string` | - |
+| title | 标题栏左侧内容 | `ReactNode` | - |
+| disabled | 标题栏是否禁用 | `boolean` | false |
+| extra | 标题栏副标题 | `ReactNode` | - |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | ``string` | `number`` | 180 |
+| expandIcon | 自定义展开图标 | `ReactNode` | - |
+| onChange | 切换面板时触发 | `(activeName, name, status) => void` | - |
+
+### <CountDown />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| startTime | 开始时间 | `number` | Date.now() |
+| endTime | 结束时间 | `number` | Date.now() |
+| remainingTime | 剩余时间，单位是毫秒 | `number` | 0 |
+| paused | 是否暂停 | `boolean` | false |
+| format | 时间格式 | `string` | HH:mm:ss |
+| millisecond | 是否开启毫秒级渲染 | `boolean` | false |
+| autoStart | 是否自动开始倒计时 | `boolean` | true |
+| time | 倒计时显示时间，单位是毫秒。autoStart 为 false 时生效 | `number` | 0 |
+| destroy | 销毁实例 | `boolean` | false |
+| onEnd | 倒计时结束时回调函数 | `无` | - |
+| onPaused | 暂停倒计时回调函数 | `onPaused: (restTime: number) => void` | - |
+| onRestart | 重新开始倒计时回调函数 | `onRestart: (restTime: number) => void` | - |
+| onUpdate | 自定义展示内容时，实时更新倒计时数据回调函数 | `onUpdate: (restTime: any) => void` | - |
+| DD | 天数 | `` |  |
+| HH | 小时 | `` |  |
+| mm | 分钟 | `` |  |
+| ss | 秒数 | `` |  |
+| S | 毫秒（1位） | `` |  |
+| SS | 毫秒（2位） | `` |  |
+| SSS | 毫秒（3位） | `` |  |
+| start | 开始倒计时 | `() => void` |  |
+| pause | 暂停倒计时 | `() => void` |  |
+| reset | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | `() => void` |  |
+
+### <Ellipsis />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| content | 文本内容 | `string` | - |
+| direction | 省略位置 | ``start` | `end` | `middle`` | end |
+| rows | 展示几行 | `number` | 1 |
+| expandText | 展开操作的文案 | `string` | - |
+| collapseText | 收起操作的文案 | `string` | - |
+| symbol | 省略的符号 | `string` | ... |
+| lineHeight | 容器的行高 | ``string` | `number`` | 20 |
+| onClick | 文本点击时触发 | `() => void` | - |
+| onChange | 点击展开收起时触发 | `(type: string) => void` | - |
+
+### <ImagePreview />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否展示预览图片 | `boolean` | false |
+| videos | 预览的视频数组（视频自动放到图片之前） | `Array<Object>` | [] |
+| images | 预览图片数组 | `{ src: string }[]` | [] |
+| autoPlay | 自动轮播时长，0表示不会自动轮播 | ``number` | `string`` | 3000 |
+| defaultValue | 初始页码 | `number` | 1 |
+| value | 页码，受控 | `number` | 1 |
+| indicator | 分页指示器是否展示 | `boolean` | false |
+| indicatorColor | 分页指示器选中的颜色 | `string` | #fff |
+| closeOnContentClick | 点击图片可以退出预览 | `boolean` | false |
+| onClose | 点击遮罩关闭图片预览时触发 | `() => void` | - |
+
+### <Indicator />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| current | 当前步骤 | `number` | 0 |
+| total | 步骤长度 | `number` | 3 |
+| direction | 展示方向，默认为水平方向 | ``horizontal` | `vertical`` | horizontal |
+
+### <Pagination />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 当前页码，受控值，与 onChange 搭配使用 | `number` | - |
+| defaultValue | 默认页码，非受控 | `number` | 1 |
+| mode | 显示模式 | ``multi` | `simple`` | multi |
+| prev | 自定义上一页按钮内容 | `ReactNode` | 上一页 |
+| next | 自定义下一页按钮内容 | `ReactNode` | 下一页 |
+| total | 总记录数 | `number` | 50 |
+| pageSize | 每页记录数 | `number` | 10 |
+| itemSize | 显示的页码个数 | `number` | 5 |
+| ellipse | 是否显示省略号 | `boolean` | false |
+| itemRender | 用于自定义页码的结构 | `(page: {number, text}) => ReactNode` | - |
+| onChange | 页码改变时触发 | `(value) => void` | - |
+
+### <Price />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| price | 价格数量 | `number` | 0 |
+| symbol | 符号类型 | `string` | &yen; |
+| digits | 小数位位数 | `number` | 2 |
+| thousands | 是否按照千分号形式显示 | `boolean` | false |
+| position | 符号显示在价格前或者后，`before`、`after` | `string` | before |
+| size | 价格尺寸，`large`、`normal`、`small` | `string` | large |
+| line | 是否划线价 | `boolean` | false |
+
+### <Progress />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| percent | 百分比 | `number` | 0 |
+| color | 进度条线条颜色 | `string` | linear-gradient(135deg, #fa2c19 0%, #fa6419 100%) |
+| background | 进度条背景颜色 | `string` | #f3f3f3 |
+| strokeWidth | 进度条宽度 | `string` | - |
+| showText | 是否显示文字内容 | `boolean` | false |
+| animated | 是否展示动画效果 | `boolean` | false |
+| lazy | 每次进入可视区展示进度条动画 | `boolean` | false |
+| delay | 延迟数据加载时长，单位 ms | `number` | 0 |
+
+### <Steps />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| direction | 显示方向 | ``horizontal` | `vertical`` | horizontal |
+| value | 当前所在的步骤 | `number` | 0 |
+| dot | 点状步骤条 | `boolean` | false |
+
+### <Step />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| title | 流程步骤的标题 | `string` | - |
+| description | 流程步骤的描述性文字 | `string` | - |
+| icon | 图标(来自Icon组件的name属性) | `ReactNode` | - |
+| value | 流程步骤的索引 | `number` | 0 |
+| description | 流程步骤的描述性文字的html结构 | `React.ReactNode` | - |
+| onStepClick | 点击步骤的标题或图标时触发 | `(index: number) => void` | - |
+
+### <Swiper />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| width | 轮播卡片的宽度 | ``number` | `string`` | window.innerWidth |
+| height | 轮播卡片的高度 | ``number` | `string`` | 0 |
+| direction | 轮播方向 | ``horizontal` | `vertical`` | horizontal |
+| indicator | 分页指示器是否展示，可传入自定义的 HTML 结构 | `ReactNode` | false |
+| loop | 是否循环轮播 | `boolean` | true |
+| duration | 动画时长（单位是ms） | ``number` | `string`` | 500 |
+| autoPlay | 自动轮播时长，0表示不会自动轮播 | ``number` | `string`` | 0 |
+| defaultValue | 初始化索引值 | ``number` | `string`` | 0 |
+| touchable | 是否可触摸滑动 | `boolean` | true |
+| preventDefault | 滑动过程中是否禁用默认事件 | `boolean` | true |
+| stopPropagation | 滑动过程中是否禁止冒泡 | `boolean` | true |
+| center | 是否居中展示，必须传对应的`width` 和 `height` | `boolean` | false |
+| onChange | 卡片切换后的回调 | `(current: number) => void` | - |
+| prev | 切换到上一页 | `()=>void` |  |
+| next | 切换到下一页 | `()=>void` |  |
+| to | 切换到指定轮播 | `(index: number)=>void` |  |
+| resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | `()=>void` |  |
+
+### <Table />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| bordered | 是否显示边框 | `boolean` | true |
+| columns | 表头数据 | `TableColumnProps[]` | [] |
+| data | 表格数据 | `Object[]` | [] |
+| summary | 是否显示简介 | `ReactNode` | - |
+| striped | 条纹是否明暗交替 | `boolean` | false |
+| showHeader | 是否显示表头 | `boolean` | true |
+| noData | 自定义无数据 | `ReactNode` | - |
+| onSort | 点击排序按钮触发 | `item: TableColumnProps, data: Array<any>` | - |
+| key | 列的唯一标识 | `string` | - |
+| title | 表头标题 | `string` | - |
+| align | 列的对齐方式 | ``left` | `center` | `right`` | left |
+| sorter | 排序，可选值有 true,function, default, 其中 default表示点击之后可能会依赖接口, function可以返回具体的排序函数, default表示采用默认的排序算法 | ``boolean` | `Function` | `string`` | - |
+| render | 自定义渲染列数据，优先级高 | `Function(record)` | - |
+| sorterIcon | 排序 icon | `ReactNode` | <DownArrow /> |
+
+### <Tag />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| type | 标签类型 | ``primary` | `success` | `danger` | `warning`` | default |
+| background | 标签颜色 | `string` | - |
+| color | 文本颜色，优先级高于color属性 | `string` | white |
+| plain | 是否为空心样式 | `boolean` | false |
+| round | 是否为圆角样式 | `boolean` | false |
+| mark | 是否为标记样式 | `boolean` | false |
+| closeable | 是否为可关闭标签 | `boolean` | false |
+| closeIcon | 关闭按钮 | `ReactNode` | null |
+| onClick | 点击事件 | `(e: MouseEvent) => void` | - |
+| onClose | 关闭事件 | `(e?: any) => void` | - |
+
+### <Video />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| source | 视频地址和类型设置 | `object` | {type: {}, src: ''} |
+| options | 控制视频播放属性 | `object` | - |
+| options.autoplay | 是否自动播放 | `boolean` | false |
+| options.poster | 海报设置 | `string` | - |
+| options.loop | 是否循环播放 | `boolean` | false |
+| options.controls | 是否展示操作栏 | `boolean` | true |
+| options.muted | 是否静音 | `boolean` | false |
+| options.playsinline | 是否设置为行内播放元素（解决安卓兼容问题） | `boolean` | false |
+| onPlay | 播放 | `(element: HTMLVideoElement) => void` | - |
+| onPause | 暂停 | `(element: HTMLVideoElement) => void` | - |
+| onPlayEnd | 播放完成回调 | `(element: HTMLVideoElement) => void` | - |
+
+### <VirtualList />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| list | 获取数据 | `Array` | - |
+| containerHeight | 容器高度 | `number` | 获取元素的 offsetWidth 或 offsetHeight，需要 css 给出 |
+| ItemRender | virtual 列表父节点渲染的函数 | `React.FC` | - |
+| itemHeight | item 高度，如果不定高，则为首屏单个最大 height | `number` | 66 |
+| itemEqual | item 高度是否一致 | `boolean` | true |
+| overscan | 除了视窗里面默认的元素, 还需要额外渲染的 item 个数 | `number` | 2 |
+| key | 用于指定 list 数据每一项的唯一 key 的字段名，默认取下标 | `string` | - |
+| direction | `vertical`、`horizontal` | `string` | vertical |
+| onScroll | 滑动到底(右)的事件，可以实现无限滚动 | `() => void` | - |
+
+### <Barrage />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| list | 弹幕列表数据 | `Array<string>` | [] |
+| interval | 可视区域内每个弹幕出现的时间间隔 | `number` | 500 |
+| duration | 每个弹幕的滚动时间 | `number` | 3000 |
+| rows | 弹幕行数，分几行展示 | `number` | 1 |
+| gapY | 弹幕垂直距离 | `number` | 10 |
+| loop | 是否循环播放 | `boolean` | true |
+| add | 添加数据 | `(word: string) => void` |  |
+
+### <Card />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| src | 左侧图片 Url | `string` | - |
+| title | 标题 | `string` | - |
+| price | 商品价格 | `string` | - |
+| vipPrice | 会员价格 | `string` | - |
+| shopDescription | 店铺介绍 | `string` | - |
+| delivery | 配送方式 | `string` | - |
+| shopName | 店铺名称 | `string` | - |
+| description | 自定义商品介绍 | `ReactNode` | - |
+| priceTag | 价格后方自定义内容 | `ReactNode` | - |
+| tag | 店铺介绍自定义 | `ReactNode` | - |
+| extra | 右下角内容自定义 | `ReactNode` | - |
+
+### <TimeSelect />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| visible | 是否显示弹层 | `boolean` | false |
+| title | 弹层标题 | `ReactNode` | 取件时间 |
+| multiple | 是否支持多选 | `boolean` | false |
+| defaultValue | 默认选中的值，非受控 | `DateType[]` | - |
+| options | 数据 | `DateType[]` | - |
+| optionKey | 配置数据中的关键字, `valueKey`, `textKey`, `childrenKey` | `{valueKey: 'value', textKey: 'text', childrenKey: 'children'}` | - |
+| onSelect | 关闭遮罩之后的回调 | `(value: DateType[]) => void` | - |
+| onDateChange | 点击左栏时的回调 | `(date: DateType, value: DateType[]) => void` | - |
+| onTimeChange | 点击右侧选项时的回调 | `(time: TimeType, value: DateType[]) => void` | - |
+| value | 唯一标识符， 必填 | `string` | - |
+| text | 左侧显示的文本， 必填 | `string` | - |
+| children | 对应右侧的选项列表， 必填 | `TimeType[]` | - |
+| value | 唯一标识符， 必填 | `string` | - |
+| text | 右侧显示的选项内容， 必填 | `string` | - |
+
+### <TrendArrow />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| value | 数值，大于0时箭头向上，小于0时箭头向下 | `number` | - |
+| digits | 小数位精度 | `number` | 2 |
+| symbol | 是否显示加减号 | `boolean` | false |
+| zero | 是否显示 0 | `boolean` | false |
+| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | false |
+| syncColor | 文字颜色是否与箭头同步 | `boolean` | true |
+| color | 文字颜色 | `string` | #333333 |
+| riseColor | 向上箭头颜色 | `string` | #fa2c19 |
+| dropColor | 向下箭头颜色 | `string` | #64b578 |
+| riseIcon | 自定义向上箭头icon | `React.ReactNode` | <TriangleUp/> |
+| downIcon | 自定义向下箭头icon | `React.ReactNode` | <TriangleDown/> |
+
+### <WaterMark />
+
+| 属性 (Prop) | 说明 (Description) | 类型 (Type) | 默认值 (Default) |
+| --- | --- | --- | --- |
+| width | 水印的宽度 | `number` | 120 |
+| height | 水印的高度 | `number` | 64 |
+| rotate | 水印绘制时，旋转的角度 | `number` | -22 |
+| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string` | - |
+| imageWidth | 图片宽度 | `number` | 120 |
+| imageHeight | 图片高度 | `number` | 64 |
+| zIndex | 追加的水印元素的 z-index | `number` | 2000 |
+| content | 水印文字内容 | `string` | - |
+| color | 水印文字颜色 | `string` | rgba(0, 0, 0, .15) |
+| fontSize | 文字大小 | ``string` | `number`` | 16 |
+| gapX | 水印之间的水平间距 | `number` | 24 |
+| gapY | 水印之间的垂直间距 | `number` | 48 |
+| fullPage | 是否覆盖整个页面 | `boolean` | true |
+| fontFamily | 水印文字字体 | `string` | - |
+
+---
+
+_Generated by NutUI AI Metadata Tool. DO NOT manual edit._
diff --git a/src/config.json b/src/config.json
index f2ef69a4c9..9fec8db69a 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1392,6 +1392,19 @@
       "name": "特色组件",
       "enName": "business",
       "packages": [
+        {
+          "version": "2.0.0",
+          "name": "QuickEnter",
+          "type": "component",
+          "cName": "快捷入口",
+          "desc": "快捷入口",
+          "sort": 26,
+          "show": true,
+          "taro": true,
+          "v15": -1,
+          "author": "hanyuxinting",
+          "dd": false
+        },
         {
           "version": "2.0.0",
           "name": "AvatarCropper",
diff --git a/src/locales/base.ts b/src/locales/base.ts
index fd25003d21..fad2578f98 100644
--- a/src/locales/base.ts
+++ b/src/locales/base.ts
@@ -142,4 +142,7 @@ export interface BaseLang {
     errorCanvasTips: string
   }
   mask: string
+  quickenter: {
+    title: string
+  }
 }
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index b0d655b24c..ebcb3ca328 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -141,5 +141,8 @@ const enUS: BaseLang = {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },
   mask: 'Mask',
+  quickenter: {
+    title: 'Quick Enter',
+  },
 }
 export default enUS
diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts
index db5efe136c..ed2f8d97ac 100644
--- a/src/locales/id-ID.ts
+++ b/src/locales/id-ID.ts
@@ -142,5 +142,8 @@ const idID: BaseLang = {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },
   mask: 'Masker',
+  quickenter: {
+    title: 'Masuk Cepat',
+  },
 }
 export default idID
diff --git a/src/locales/ja-JP.ts b/src/locales/ja-JP.ts
index 16c4860053..07447651e1 100644
--- a/src/locales/ja-JP.ts
+++ b/src/locales/ja-JP.ts
@@ -143,5 +143,8 @@ const jaJP: BaseLang = {
   },
   mask: 'マスク',
   close: '閉じる',
+  quickenter: {
+    title: 'クイックアクセス',
+  },
 }
 export default jaJP
diff --git a/src/locales/tr-TR.ts b/src/locales/tr-TR.ts
index 8b50a07a8b..dc0bf96010 100644
--- a/src/locales/tr-TR.ts
+++ b/src/locales/tr-TR.ts
@@ -150,5 +150,8 @@ const trTR: BaseLang = {
     errorCanvasTips: 'Geçerli ortam Canvası desteklemiyor',
   },
   mask: 'Maske',
+  quickenter: {
+    title: 'Hızlı Giriş',
+  },
 }
 export default trTR
diff --git a/src/locales/vi-VN.ts b/src/locales/vi-VN.ts
index 6feb584a0d..f3d140713b 100644
--- a/src/locales/vi-VN.ts
+++ b/src/locales/vi-VN.ts
@@ -142,5 +142,8 @@ const viVN: BaseLang = {
     errorCanvasTips: 'Môi trường hiện tại không hỗ trợ Canvas',
   },
   mask: 'Lớp phủ',
+  quickenter: {
+    title: 'Truy cập nhanh',
+  },
 }
 export default viVN
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 22f3b236fb..4cf7110eeb 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -142,5 +142,8 @@ const zhCN: BaseLang = {
     errorCanvasTips: '当前环境不支持Canvas',
   },
   mask: '蒙层',
+  quickenter: {
+    title: '快捷入口',
+  },
 }
 export default zhCN
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 222dabfdbc..c982b1c364 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -142,5 +142,8 @@ const zhCN: BaseLang = {
     errorCanvasTips: '當前環境不支持Canvas',
   },
   mask: '蒙層',
+  quickenter: {
+    title: '快捷入口',
+  },
 }
 export default zhCN
diff --git a/src/locales/zh-UG.ts b/src/locales/zh-UG.ts
index 985aa17502..8bba80e60a 100644
--- a/src/locales/zh-UG.ts
+++ b/src/locales/zh-UG.ts
@@ -140,5 +140,8 @@ const zhUG: BaseLang = {
     errorCanvasTips: 'Canvas نى قوللىمايدۇ',
   },
   mask: 'قاپلىما قەۋەت',
+  quickenter: {
+    title: 'تېز كىرگۈزۈش',
+  },
 }
 export default zhUG
diff --git a/src/packages/animatingnumbers/countup.taro.tsx b/src/packages/animatingnumbers/countup.taro.tsx
index 10339842fa..5358e10e9c 100644
--- a/src/packages/animatingnumbers/countup.taro.tsx
+++ b/src/packages/animatingnumbers/countup.taro.tsx
@@ -56,7 +56,10 @@ export const CountUp: FunctionComponent<Partial<TaroCountUpProps>> = (
 
   const setNumberTransform = useCallback(() => {
     if (countupRef.current && numberArr.length) {
-      createSelectorQuery()
+      const query = createSelectorQuery()
+      const scope = (countupRef.current as any)?._scope
+      const scopedQuery = scope ? query.in(scope) : query
+      scopedQuery
         .selectAll('.nut-countup-listitem')
         .node((numberItems: any) => {
           const transformArrCache: CSSProperties[] = []
@@ -83,7 +86,7 @@ export const CountUp: FunctionComponent<Partial<TaroCountUpProps>> = (
         })
         .exec()
     }
-  }, [numberArr])
+  }, [duration, numberArr])
 
   useEffect(() => {
     if (numberArr.length) {
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
index b0e99c8e7f..0efbdcbe01 100644
--- a/src/packages/badge/badge.taro.tsx
+++ b/src/packages/badge/badge.taro.tsx
@@ -38,6 +38,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
     fill,
     size,
     disabled,
+    ...rest
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-badge'
@@ -95,7 +96,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
   }
 
   return (
-    <View className={classes} style={style} ref={badgeRef}>
+    <View className={classes} style={style} ref={badgeRef} {...rest}>
       {isIcon() && (
         <View
           className={classNames(`${classPrefix}-content`, {
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 7ddc656031..767735f0db 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -2,51 +2,17 @@ import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import {
-  ButtonProps as MiniProgramButtonProps,
   View,
-  Button as TaroButton,
+  // Button as TaroButton,
 } from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
-import { getEnv } from '@tarojs/taro'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
-
-type OmitMiniProgramButtonProps = Omit<
-  MiniProgramButtonProps,
-  'size' | 'type' | 'onClick' | 'style'
->
-
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
-export type ButtonShape = 'square' | 'round'
-export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
-
-export interface ButtonProps
-  extends BasicComponent,
-    OmitMiniProgramButtonProps {
-  color: string
-  shape: ButtonShape
-  type: ButtonType
-  size: ButtonSize
-  fill: ButtonFill
-  block: boolean
-  loading: boolean
-  disabled: boolean
-  icon: React.ReactNode
-  rightIcon: React.ReactNode
-  nativeType: 'submit' | 'reset' // | 'button'
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void
-}
+import { TaroButtonProps } from '@/types'
 
 const prefixCls = 'nut-button'
 
-const defaultProps: Partial<ButtonProps> = {
+const defaultProps: Partial<TaroButtonProps> = {
   ...ComponentDefaults,
   color: '',
   type: 'default',
@@ -60,124 +26,125 @@ const defaultProps: Partial<ButtonProps> = {
   rightIcon: null,
   onClick: (e: MouseEvent<HTMLButtonElement>) => {},
 }
-export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
-  (props, ref) => {
-    const {
-      color,
-      shape,
-      fill,
-      loading,
-      disabled,
-      type,
-      size,
-      block,
-      icon,
-      rightIcon,
-      children,
-      className,
-      style,
-      formType,
-      nativeType,
-      onClick,
-      ...rest
-    } = { ...defaultProps, ...props }
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  Partial<TaroButtonProps>
+>((props, ref) => {
+  const {
+    color,
+    shape,
+    fill,
+    loading,
+    disabled,
+    type,
+    size,
+    block,
+    icon,
+    rightIcon,
+    children,
+    className,
+    style,
+    // formType,
+    nativeType,
+    onClick,
+    ...rest
+  } = { ...defaultProps, ...props }
 
-    const getStyle = useMemo(() => {
-      const style: CSSProperties = {}
-      if (color) {
-        if (props.fill === 'outline' || props.fill === 'dashed') {
-          style.color = color
-          if (!color?.includes('gradient')) {
-            style.borderColor = color
-          }
-        } else {
-          style.color = '#fff'
-          if (harmony()) {
-            style.backgroundColor = color
-          }
-          style.background = color
-          style.borderColor = 'transparent'
+  const getStyle = useMemo(() => {
+    const style: CSSProperties = {}
+    if (color) {
+      if (props.fill === 'outline' || props.fill === 'dashed') {
+        style.color = color
+        if (!color?.includes('gradient')) {
+          style.borderColor = color
+        }
+      } else {
+        style.color = '#fff'
+        if (harmony()) {
+          style.backgroundColor = color
         }
+        style.background = color
+        style.borderColor = 'transparent'
       }
-      return style
-    }, [color, props.fill])
+    }
+    return style
+  }, [color, props.fill])
 
-    const getContStyle = useMemo(() => {
-      const style: CSSProperties = {}
-      if (props.color) {
-        if (props.fill === 'outline' || props.fill === 'dashed') {
-          style.color = color
-        } else {
-          style.color = '#fff'
-          style.background = 'transparent'
-          style.borderColor = 'transparent'
-        }
+  const getContStyle = useMemo(() => {
+    const style: CSSProperties = {}
+    if (props.color) {
+      if (props.fill === 'outline' || props.fill === 'dashed') {
+        style.color = color
+      } else {
+        style.color = '#fff'
+        style.background = 'transparent'
+        style.borderColor = 'transparent'
       }
-      return style
-    }, [color, props.fill, props.color])
+    }
+    return style
+  }, [color, props.fill, props.color])
 
-    const handleClick = useCallback(
-      (e: MouseEvent<HTMLButtonElement>) => {
-        if (!loading && !disabled && onClick) {
-          onClick(e)
-        }
-      },
-      [loading, disabled, onClick]
-    )
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!loading && !disabled && onClick) {
+        onClick(e)
+      }
+    },
+    [loading, disabled, onClick]
+  )
 
-    const buttonClassNames = classNames(
-      prefixCls,
-      `${prefixCls}-${type}`,
-      {
-        [`${prefixCls}-${type}-solid`]: type === 'primary' && !props.fill,
-        [`${prefixCls}-${fill}`]: props.fill,
-        [`${prefixCls}-${type}-${fill}`]: props.fill,
-        [`${prefixCls}-${size}`]: size,
-        [`${prefixCls}-${shape}`]: shape,
-        [`${prefixCls}-${shape}-${size}`]: shape && size,
-        [`${prefixCls}-block`]: block,
-        [`${prefixCls}-disabled`]: disabled || loading,
-        [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
-          disabled || loading,
-        [`${prefixCls}-loading`]: loading,
-        [`${prefixCls}-icononly`]: !children,
-      },
-      className
-    )
+  const buttonClassNames = classNames(
+    prefixCls,
+    `${prefixCls}-${type}`,
+    {
+      [`${prefixCls}-${type}-solid`]: type === 'primary' && !props.fill,
+      [`${prefixCls}-${fill}`]: props.fill,
+      [`${prefixCls}-${type}-${fill}`]: props.fill,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-${shape}-${size}`]: shape && size,
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-disabled`]: disabled || loading,
+      [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
+        disabled || loading,
+      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-icononly`]: !children,
+    },
+    className
+  )
 
-    if (getEnv() === 'WEB') {
-      ;(rest as any).type = formType
-    }
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      // eslint-disable-next-line react/button-has-type
-      <TaroButton
-        {...rest}
-        ref={ref}
-        formType={formType || nativeType}
-        className={buttonClassNames}
-        style={{ ...getStyle, ...style }}
-        onClick={(e) => handleClick(e as any)}
-      >
-        <View className="nut-button-wrap">
-          {loading && <Loading className="nut-icon-loading" />}
-          {!loading && icon}
-          {children && (
-            <View
-              className={`nut-button-children nut-button-${size}-children nut-button-${type}-children ${!(props.fill || disabled || loading) ? '' : `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}`}${icon || loading ? ` nut-button-text` : ''}${
-                rightIcon ? ' nut-button-text-right' : ''
-              }`}
-              style={harmony() ? getContStyle : {}}
-            >
-              {children}
-            </View>
-          )}
-          {rightIcon}
-        </View>
-      </TaroButton>
-    )
-  }
-)
+  // if (getEnv() === 'WEB') {
+  //   ;(rest as any).type = formType
+  // }
+  return (
+    // @ts-ignore
+    // <TaroButton
+    <View
+      {...rest}
+      ref={ref}
+      // formType={formType || nativeType}
+      className={buttonClassNames}
+      style={{ ...getStyle, ...style }}
+      onClick={(e) => handleClick(e as any)}
+    >
+      <View className="nut-button-wrap">
+        {loading && <Loading className="nut-icon-loading" />}
+        {!loading && icon}
+        {children && (
+          <View
+            className={`nut-button-children nut-button-${size}-children nut-button-${type}-children ${!(props.fill || disabled || loading) ? '' : `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}`}${icon || loading ? ` nut-button-text` : ''}${
+              rightIcon ? ' nut-button-text-right' : ''
+            }`}
+            style={harmony() ? getContStyle : {}}
+          >
+            {children}
+          </View>
+        )}
+        {rightIcon}
+      </View>
+    </View>
+    // </TaroButton>
+  )
+})
 
 Button.displayName = 'NutButton'
diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
index 5d819064f1..a1d9982bb3 100644
--- a/src/packages/button/button.tsx
+++ b/src/packages/button/button.tsx
@@ -2,38 +2,12 @@ import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import { Loading } from '@nutui/icons-react'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
-export type ButtonShape = 'square' | 'round'
-export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
-
-export interface ButtonProps extends BasicComponent {
-  color: string
-  shape: ButtonShape
-  type: ButtonType
-  size: ButtonSize
-  fill: ButtonFill
-  block: boolean
-  loading: boolean
-  disabled: boolean
-  icon: React.ReactNode
-  rightIcon: React.ReactNode
-  id: string
-  nativeType: 'submit' | 'reset' | 'button'
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void
-}
+import { ComponentDefaults } from '@/utils/typings'
+import { WebButtonProps } from '@/types'
 
 const prefixCls = 'nut-button'
 
-const defaultProps: Partial<ButtonProps> = {
+const defaultProps: Partial<WebButtonProps> = {
   ...ComponentDefaults,
   color: '',
   type: 'default',
@@ -49,98 +23,99 @@ const defaultProps: Partial<ButtonProps> = {
   onClick: () => {},
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
-  (props, ref) => {
-    const {
-      color,
-      shape,
-      fill,
-      loading,
-      disabled,
-      type,
-      size,
-      block,
-      icon,
-      rightIcon,
-      children,
-      className,
-      style,
-      nativeType,
-      onClick,
-      ...rest
-    } = { ...defaultProps, ...props }
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  Partial<WebButtonProps>
+>((props, ref) => {
+  const {
+    color,
+    shape,
+    fill,
+    loading,
+    disabled,
+    type,
+    size,
+    block,
+    icon,
+    rightIcon,
+    children,
+    className,
+    style,
+    nativeType,
+    onClick,
+    ...rest
+  } = { ...defaultProps, ...props }
 
-    const getStyle = useMemo(() => {
-      const style: CSSProperties = {}
-      if (color) {
-        if (props.fill === 'outline' || props.fill === 'dashed') {
-          style.color = color
-          if (!color?.includes('gradient')) {
-            style.borderColor = color
-          }
-        } else {
-          style.color = '#fff'
-          style.background = color
-          style.borderColor = 'transparent'
+  const getStyle = useMemo(() => {
+    const style: CSSProperties = {}
+    if (color) {
+      if (props.fill === 'outline' || props.fill === 'dashed') {
+        style.color = color
+        if (!color?.includes('gradient')) {
+          style.borderColor = color
         }
+      } else {
+        style.color = '#fff'
+        style.background = color
+        style.borderColor = 'transparent'
       }
-      return style
-    }, [color, props.fill])
+    }
+    return style
+  }, [color, props.fill])
 
-    const handleClick = useCallback(
-      (e: MouseEvent<HTMLButtonElement>) => {
-        if (!loading && !disabled && onClick) {
-          onClick(e)
-        }
-      },
-      [loading, disabled, onClick]
-    )
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!loading && !disabled && onClick) {
+        onClick(e)
+      }
+    },
+    [loading, disabled, onClick]
+  )
 
-    const buttonClassNames = classNames(
-      prefixCls,
-      `${prefixCls}-${type}`,
-      {
-        [`${prefixCls}-${type}-solid`]: type === 'primary' && !props.fill,
-        [`${prefixCls}-${fill}`]: props.fill,
-        [`${prefixCls}-${type}-${fill}`]: props.fill,
-        [`${prefixCls}-${size}`]: size,
-        [`${prefixCls}-${shape}`]: shape,
-        [`${prefixCls}-block`]: block,
-        [`${prefixCls}-disabled`]: disabled || loading,
-        [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
-          disabled || loading,
-        [`${prefixCls}-loading`]: loading,
-        [`${prefixCls}-icononly`]: !children,
-      },
-      className
-    )
+  const buttonClassNames = classNames(
+    prefixCls,
+    `${prefixCls}-${type}`,
+    {
+      [`${prefixCls}-${type}-solid`]: type === 'primary' && !props.fill,
+      [`${prefixCls}-${fill}`]: props.fill,
+      [`${prefixCls}-${type}-${fill}`]: props.fill,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-disabled`]: disabled || loading,
+      [`${prefixCls}-${type}${props.fill ? `-${fill}` : ''}-disabled`]:
+        disabled || loading,
+      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-icononly`]: !children,
+    },
+    className
+  )
 
-    return (
-      <button
-        {...rest}
-        ref={ref}
-        type={nativeType}
-        className={buttonClassNames}
-        style={{ ...getStyle, ...style }}
-        onClick={handleClick}
-      >
-        <div className="nut-button-wrap">
-          {loading && <Loading className="nut-icon-loading" />}
-          {!loading && icon}
-          {children && (
-            <div
-              className={`${props.fill || disabled || loading ? `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}` : ''}${icon || loading ? ' nut-button-text' : ''}${
-                rightIcon ? ' nut-button-text-right' : ''
-              }`}
-            >
-              {children}
-            </div>
-          )}
-          {rightIcon}
-        </div>
-      </button>
-    )
-  }
-)
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={nativeType}
+      className={buttonClassNames}
+      style={{ ...getStyle, ...style }}
+      onClick={handleClick}
+    >
+      <div className="nut-button-wrap">
+        {loading && <Loading className="nut-icon-loading" />}
+        {!loading && icon}
+        {children && (
+          <div
+            className={`${props.fill || disabled || loading ? `nut-button-${type}${props.fill ? `-${fill}` : ''}${disabled || loading ? '-disabled' : ''}` : ''}${icon || loading ? ' nut-button-text' : ''}${
+              rightIcon ? ' nut-button-text-right' : ''
+            }`}
+          >
+            {children}
+          </div>
+        )}
+        {rightIcon}
+      </div>
+    </button>
+  )
+})
 
 Button.displayName = 'NutButton'
diff --git a/src/packages/button/index.taro.ts b/src/packages/button/index.taro.ts
index 2aea8efdde..18ae5016a1 100644
--- a/src/packages/button/index.taro.ts
+++ b/src/packages/button/index.taro.ts
@@ -1,10 +1,3 @@
 import { Button } from './button.taro'
 
-export type {
-  ButtonType,
-  ButtonProps,
-  ButtonSize,
-  ButtonShape,
-  ButtonFill,
-} from './button.taro'
 export default Button
diff --git a/src/packages/button/index.ts b/src/packages/button/index.ts
index 0e0c7e6d78..b0e887e9d1 100644
--- a/src/packages/button/index.ts
+++ b/src/packages/button/index.ts
@@ -1,10 +1,3 @@
 import { Button } from './button'
 
-export type {
-  ButtonType,
-  ButtonProps,
-  ButtonSize,
-  ButtonShape,
-  ButtonFill,
-} from './button'
 export default Button
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index 7a394555d6..3ca26a783f 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -127,9 +127,20 @@
     font-weight: $calendar-day-font-weight;
     margin-bottom: 4px;
 
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-day,
+    &-info-curr {
+      color: $color-title;
+    }
+
     &:nth-child(7n + 0),
     &:nth-child(7n + 1) {
       color: $color-primary;
+
+      .nut-calendar-day-day,
+      .nut-calendar-day-info-curr {
+        color: $color-primary;
+      }
     }
 
     &-info,
@@ -170,7 +181,12 @@
         border-bottom-right-radius: $calendar-day-active-border-radius;
       }
 
-      .nut-calendar-day-info {
+      &.nut-calendar-day-active .nut-calendar-day-info {
+        color: $color-primary-text;
+      }
+
+      &.nut-calendar-day-active .nut-calendar-day-day,
+      &.nut-calendar-day-active .nut-calendar-day-info-curr {
         color: $color-primary-text;
       }
     }
@@ -178,6 +194,11 @@
     &-disabled {
       color: $calendar-disable-color !important;
 
+      &.nut-calendar-day-disabled .nut-calendar-day-day,
+      &.nut-calendar-day-disabled .nut-calendar-day-info-curr {
+        color: $calendar-disable-color;
+      }
+
       .nut-calendar-day-info-curr {
         display: none;
       }
@@ -187,10 +208,20 @@
       background-color: $calendar-choose-background-color;
       color: $calendar-choose-color;
 
+      &.nut-calendar-day-choose .nut-calendar-day-day,
+      &.nut-calendar-day-choose .nut-calendar-day-info-curr {
+        color: $calendar-choose-color;
+      }
+
       &-disabled {
         background-color: $calendar-choose-disable-background-color;
         color: $calendar-disable-color !important;
 
+        &.nut-calendar-day-choose-disabled .nut-calendar-day-day,
+        &.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr {
+          color: $calendar-disable-color;
+        }
+
         .nut-calendar-day-info-curr {
           display: none;
         }
diff --git a/src/packages/calendar/demos/h5/demo10.tsx b/src/packages/calendar/demos/h5/demo10.tsx
index ad172caea6..780b921c4d 100644
--- a/src/packages/calendar/demos/h5/demo10.tsx
+++ b/src/packages/calendar/demos/h5/demo10.tsx
@@ -53,7 +53,7 @@ function getDay(i: number): string {
 }
 
 const Demo10 = () => {
-  const [date, setDate] = useState<string[]>([date2Str(new Date()), getDay(2)])
+  const [date, setDate] = useState<string[]>(['2023-07-10', '2023-07-19'])
 
   const [isVisible, setIsVisible] = useState(false)
 
@@ -73,11 +73,7 @@ const Demo10 = () => {
 
   const goDate = () => {
     if (calendarRef.current) {
-      const d = new Date()
-      d.setMonth(d.getMonth() + 1)
-      calendarRef.current.scrollToDate(
-        `${d.getFullYear()}-${padZero(d.getMonth() + 1)}-01`
-      )
+      calendarRef.current.scrollToDate('2023-04-01')
     }
   }
 
@@ -139,8 +135,8 @@ const Demo10 = () => {
         visible={isVisible}
         defaultValue={date}
         type="range"
-        startDate={`${new Date().getFullYear() - 1}-01-01`}
-        endDate={`${new Date().getFullYear() + 2}-12-31`}
+        startDate="2022-12-22"
+        endDate="2024-12-31"
         renderHeaderButtons={renderHeaderButtons}
         onClose={closeSwitch}
         onConfirm={setChooseValue}
diff --git a/src/packages/calendarcard/__tests__/calendarcard.spec.tsx b/src/packages/calendarcard/__tests__/calendarcard.spec.tsx
index 4009abf86a..6ae2d319e8 100644
--- a/src/packages/calendarcard/__tests__/calendarcard.spec.tsx
+++ b/src/packages/calendarcard/__tests__/calendarcard.spec.tsx
@@ -235,3 +235,18 @@ test('test startDate & endDate', async () => {
   const title4 = container.querySelector('.nut-calendarcard-header-title')
   expect(title4?.innerHTML).toBe('2022年12月')
 })
+
+test('test custom weekdays', async () => {
+  const { container } = render(
+    <CalendarCard
+      defaultValue={new Date('2023-01-25')}
+      weekdays={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
+    />
+  )
+
+  const headers = container.querySelectorAll('.nut-calendarcard-day.header')
+  expect(headers.length).toBe(7)
+  expect(headers[0].innerHTML).toBe('Sun')
+  expect(headers[1].innerHTML).toBe('Mon')
+  expect(headers[6].innerHTML).toBe('Sat')
+})
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index 56042a0b92..b824150001 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -49,6 +49,13 @@
     margin-bottom: 4px;
     text-align: center;
 
+    // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
+    &-top,
+    &-inner,
+    &-bottom {
+      color: $color-title;
+    }
+
     &.header {
       cursor: auto;
     }
@@ -66,6 +73,12 @@
 
     &.weekend {
       color: $calendar-choose-color;
+
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     &.active {
diff --git a/src/packages/calendarcard/calendarcard.taro.tsx b/src/packages/calendarcard/calendarcard.taro.tsx
index e6d75abdf7..f73383dd94 100644
--- a/src/packages/calendarcard/calendarcard.taro.tsx
+++ b/src/packages/calendarcard/calendarcard.taro.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon.taro'
@@ -24,6 +24,7 @@ const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
   firstDayOfWeek: 0,
+  weekdays: [],
 }
 
 const prefixCls = 'nut-calendarcard'
@@ -47,6 +48,7 @@ export const CalendarCard = React.forwardRef<
     renderDay,
     renderDayTop,
     renderDayBottom,
+    weekdays,
     onDayClick,
     onPageChange,
     onChange,
@@ -397,18 +399,20 @@ export const CalendarCard = React.forwardRef<
     )
   }
 
-  const [weekHeader] = useState(() => {
-    const weekdays = locale.calendaritem.weekdays.map((day, index) => {
+  const weekHeader = useMemo(() => {
+    const weekdaysList =
+      weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays
+    const weekdaysData = weekdaysList.map((day, index) => {
       return {
         name: day,
         key: index,
       }
     })
     return [
-      ...weekdays.slice(firstDayOfWeek, 7),
-      ...weekdays.slice(0, firstDayOfWeek),
+      ...weekdaysData.slice(firstDayOfWeek, 7),
+      ...weekdaysData.slice(0, firstDayOfWeek),
     ]
-  })
+  }, [weekdays, firstDayOfWeek, locale.calendaritem.weekdays])
 
   const renderContent = () => {
     return (
diff --git a/src/packages/calendarcard/calendarcard.tsx b/src/packages/calendarcard/calendarcard.tsx
index 2c6a7b500d..32eb74e5cd 100644
--- a/src/packages/calendarcard/calendarcard.tsx
+++ b/src/packages/calendarcard/calendarcard.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import classNames from 'classnames'
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from './icon'
 import { ComponentDefaults } from '@/utils/typings'
@@ -23,6 +23,7 @@ const defaultProps = {
   ...ComponentDefaults,
   type: 'single',
   firstDayOfWeek: 0,
+  weekdays: [],
 }
 
 const prefixCls = 'nut-calendarcard'
@@ -46,6 +47,7 @@ export const CalendarCard = React.forwardRef<
     renderDay,
     renderDayTop,
     renderDayBottom,
+    weekdays,
     onDayClick,
     onPageChange,
     onChange,
@@ -398,18 +400,20 @@ export const CalendarCard = React.forwardRef<
     )
   }
 
-  const [weekHeader] = useState(() => {
-    const weekdays = locale.calendaritem.weekdays.map((day, index) => {
+  const weekHeader = useMemo(() => {
+    const weekdaysList =
+      weekdays.length > 0 ? weekdays : locale.calendaritem.weekdays
+    const weekdaysData = weekdaysList.map((day, index) => {
       return {
         name: day,
         key: index,
       }
     })
     return [
-      ...weekdays.slice(firstDayOfWeek, 7),
-      ...weekdays.slice(0, firstDayOfWeek),
+      ...weekdaysData.slice(firstDayOfWeek, 7),
+      ...weekdaysData.slice(0, firstDayOfWeek),
     ]
-  })
+  }, [weekdays, firstDayOfWeek, locale.calendaritem.weekdays])
 
   const renderContent = () => {
     return (
diff --git a/src/packages/calendarcard/demo.taro.tsx b/src/packages/calendarcard/demo.taro.tsx
index d66f433074..ace887f98a 100644
--- a/src/packages/calendarcard/demo.taro.tsx
+++ b/src/packages/calendarcard/demo.taro.tsx
@@ -16,6 +16,7 @@ import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
 import Demo12 from './demos/taro/demo12'
+import Demo13 from './demos/taro/demo13'
 
 const CalendarDemo = () => {
   const [translated] = useTranslate({
@@ -34,6 +35,7 @@ const CalendarDemo = () => {
       confirm: '确定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定义头',
+      customWeekdays: '自定义周几',
     },
     'zh-TW': {
       single: '選擇單個日期',
@@ -50,6 +52,7 @@ const CalendarDemo = () => {
       confirm: '確定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定義头',
+      customWeekdays: '自定義周几',
     },
     'en-US': {
       single: 'Select a single date',
@@ -66,6 +69,7 @@ const CalendarDemo = () => {
       confirm: 'Confirm',
       ref: 'Use ref',
       title: 'Custom title',
+      customWeekdays: 'Custom weekdays',
     },
   })
 
@@ -97,6 +101,8 @@ const CalendarDemo = () => {
         <Demo11 />
         <View className="h2">{translated.title}</View>
         <Demo12 />
+        <View className="h2">{translated.customWeekdays}</View>
+        <Demo13 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/calendarcard/demo.tsx b/src/packages/calendarcard/demo.tsx
index 1c29def769..65e9b97167 100644
--- a/src/packages/calendarcard/demo.tsx
+++ b/src/packages/calendarcard/demo.tsx
@@ -12,6 +12,7 @@ import Demo9 from './demos/h5/demo9'
 import Demo10 from './demos/h5/demo10'
 import Demo11 from './demos/h5/demo11'
 import Demo12 from './demos/h5/demo12'
+import Demo13 from './demos/h5/demo13'
 
 const CalendarDemo = () => {
   const [translated] = useTranslate({
@@ -30,6 +31,7 @@ const CalendarDemo = () => {
       confirm: '确定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定义头',
+      customWeekdays: '自定义周几',
     },
     'zh-TW': {
       single: '選擇單個日期',
@@ -46,6 +48,7 @@ const CalendarDemo = () => {
       confirm: '確定',
       ref: '使用 Ref 上的方法',
       title: '搭配 Ref 使用自定義头',
+      customWeekdays: '自定義周几',
     },
     'en-US': {
       single: 'Select a single date',
@@ -62,6 +65,7 @@ const CalendarDemo = () => {
       confirm: 'Confirm',
       ref: 'Use ref',
       title: 'Custom title',
+      customWeekdays: 'Custom weekdays',
     },
   })
 
@@ -92,6 +96,8 @@ const CalendarDemo = () => {
         <Demo11 />
         <h2>{translated.title}</h2>
         <Demo12 />
+        <h2>{translated.customWeekdays}</h2>
+        <Demo13 />
       </div>
     </>
   )
diff --git a/src/packages/calendarcard/demos/h5/demo13.tsx b/src/packages/calendarcard/demos/h5/demo13.tsx
new file mode 100644
index 0000000000..d5c1796d5e
--- /dev/null
+++ b/src/packages/calendarcard/demos/h5/demo13.tsx
@@ -0,0 +1,24 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react'
+
+const date = new Date('2025-01-01')
+
+const Demo13 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      weekdays={['周日', '周一', '周二', '周三', '周四', '周五', '周六']}
+      firstDayOfWeek={1}
+    />
+  )
+}
+export default Demo13
diff --git a/src/packages/calendarcard/demos/h5/demo14.tsx b/src/packages/calendarcard/demos/h5/demo14.tsx
new file mode 100644
index 0000000000..8171bad6df
--- /dev/null
+++ b/src/packages/calendarcard/demos/h5/demo14.tsx
@@ -0,0 +1,25 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react'
+
+const date = new Date('2025-01-01')
+
+const Demo14 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      renderDayAriaLabel={(day) => {
+        return `自定义无障碍朗读：${day.year}年${day.month}月${day.date}日`
+      }}
+    />
+  )
+}
+export default Demo14
diff --git a/src/packages/calendarcard/demos/taro/demo13.tsx b/src/packages/calendarcard/demos/taro/demo13.tsx
new file mode 100644
index 0000000000..2a9d0bb009
--- /dev/null
+++ b/src/packages/calendarcard/demos/taro/demo13.tsx
@@ -0,0 +1,24 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+
+const date = new Date('2025-01-01')
+
+const Demo13 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      weekdays={['周日', '周一', '周二', '周三', '周四', '周五', '周六']}
+      firstDayOfWeek={1}
+    />
+  )
+}
+export default Demo13
diff --git a/src/packages/calendarcard/demos/taro/demo14.tsx b/src/packages/calendarcard/demos/taro/demo14.tsx
new file mode 100644
index 0000000000..da072ca6bb
--- /dev/null
+++ b/src/packages/calendarcard/demos/taro/demo14.tsx
@@ -0,0 +1,25 @@
+import React, { useRef, useState } from 'react'
+import { CalendarCard, CalendarCardRef } from '@nutui/nutui-react-taro'
+
+const date = new Date('2025-01-01')
+
+const Demo14 = () => {
+  const [dateStr, setDate] = useState(date.getMonth())
+  const onPageChange = (val: any) => {
+    console.log('onPageChange', val)
+    setDate(val.month)
+  }
+  const CalendarCardRef = useRef<CalendarCardRef>(null)
+
+  return (
+    <CalendarCard
+      ref={CalendarCardRef}
+      defaultValue={date}
+      onPageChange={onPageChange}
+      renderDayAriaLabel={(day) => {
+        return `自定义无障碍朗读：${day.year}年${day.month}月${day.date}日`
+      }}
+    />
+  )
+}
+export default Demo14
diff --git a/src/packages/calendarcard/icon.taro.tsx b/src/packages/calendarcard/icon.taro.tsx
index 1223f86495..9ac1e4e3e3 100644
--- a/src/packages/calendarcard/icon.taro.tsx
+++ b/src/packages/calendarcard/icon.taro.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Image, View } from '@tarojs/components'
+import { Image } from '@tarojs/components'
 
 let left =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg=='
@@ -30,15 +30,10 @@ if (process.env.TARO_ENV === 'jdharmony_cpp') {
 
 const Icon: FC<IconProps> = ({ url }) => {
   const style = {
-    background: `url('${url}') no-repeat center`,
-    backgroundSize: '100% 100%',
     width: 18,
     height: 18,
   }
-  if (process.env.TARO_ENV === 'jdharmony_cpp') {
-    return <Image src={url} style={style} />
-  }
-  return <View style={style} />
+  return <Image src={url} style={style} mode="aspectFit" />
 }
 
 export const ArrowLeft: FC = () => <Icon url={left} />
diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index e374ad4486..3abbf27a8a 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -861,6 +861,18 @@ export type NutCSSVariables =
   | 'nutuiResultpageDescriptionColor'
   | 'nutuiResultpageDescriptionLineHeight'
   | 'nutuiResultpageActionsMarginTop'
+  | 'nutuiQuickenterBgColor'
+  | 'nutuiQuickenterMaxHeight'
+  | 'nutuiQuickenterTitleFontSize'
+  | 'nutuiQuickenterTitleColor'
+  | 'nutuiQuickenterItemTitleFontSize'
+  | 'nutuiQuickenterItemTitleColor'
+  | 'nutuiQuickenterItemIconBgColor'
+  | 'nutuiQuickenterItemIconColor'
+  | 'nutuiQuickenterCloseIconSize'
+  | 'nutuiQuickenterCloseIconColor'
+  | 'nutuiQuickenterBoxShadow'
+  | 'nutuiQuickenterBackdropFilter'
   | 'nutuiSafeAreaMultiple'
   | 'nutuiBlack3'
   | 'nutuiBlack1'
diff --git a/src/packages/dialog/demos/h5/demo1.tsx b/src/packages/dialog/demos/h5/demo1.tsx
index efd4178d66..870163f134 100644
--- a/src/packages/dialog/demos/h5/demo1.tsx
+++ b/src/packages/dialog/demos/h5/demo1.tsx
@@ -11,8 +11,6 @@ const Demo1 = () => {
             className: 'dialog-func',
             title: '基础弹框',
             content: '支持函数调用和组件调用两种方式。',
-            confirmBadge: 'ges',
-            cancelBadge: 'ddddd',
           })
         }}
       />
diff --git a/src/packages/dialog/demos/h5/demo6.tsx b/src/packages/dialog/demos/h5/demo6.tsx
index ead4d1c0f7..3597cd9de6 100644
--- a/src/packages/dialog/demos/h5/demo6.tsx
+++ b/src/packages/dialog/demos/h5/demo6.tsx
@@ -47,10 +47,6 @@ const Demo6 = () => {
         cancelText="决策2"
         onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}
-        onClose={() => {
-          setVisible2(false)
-          console.log('关闭底部icon 3')
-        }}
         closeIcon
       >
         支持函数调用和组件调用两种方式。
diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md
index 1a774ba2e8..6f64c24fec 100644
--- a/src/packages/dialog/doc.en-US.md
+++ b/src/packages/dialog/doc.en-US.md
@@ -91,8 +91,6 @@ import { Dialog } from '@nutui/nutui-react'
 | footer | Customize the notes, but it will not be displayed in NULL | `ReactNode` | `-` |
 | confirmText | Confirm the button copywriting | `ReactNode` | `Sure` |
 | cancelText | Cancellation of buttons | `ReactNode` | `Cancel` |
-| confirmBadge | Badge of confirm button | `ReactNode` | `-` |
-| cancelBadge | Badge of cancel button | `ReactNode` | `-` |
 | overlay | Whether to show a overlay | `boolean` | `true` |
 | hideConfirmButton | Whether to hide the OK button | `boolean` | `false` |
 | hideCancelButton | Whether to hide the cancel button | `boolean` | `false` |
diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md
index fedf203063..b7ee771f2a 100644
--- a/src/packages/dialog/doc.md
+++ b/src/packages/dialog/doc.md
@@ -91,8 +91,6 @@ import { Dialog } from '@nutui/nutui-react'
 | footer | 自定义页脚，传入 null 则不显示 | `ReactNode` | `-` |
 | confirmText | 确认按钮文案 | `ReactNode` | `确定` |
 | cancelText | 取消按钮文案 | `ReactNode` | `取消` |
-| confirmBadge | 确认按钮徽标 | `ReactNode` | `-` |
-| cancelBadge | 取消按钮徽标 | `ReactNode` | `-` |
 | overlay | 是否展示遮罩 | `boolean` | `true` |
 | hideConfirmButton | 是否隐藏确定按钮 | `boolean` | `false` |
 | hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md
index 8402f8f33a..27239d489c 100644
--- a/src/packages/dialog/doc.taro.md
+++ b/src/packages/dialog/doc.taro.md
@@ -91,8 +91,6 @@ import { Dialog } from '@nutui/nutui-react-taro'
 | footer | 自定义页脚，传入 null 则不显示 | `ReactNode` | `-` |
 | confirmText | 确认按钮文案 | `ReactNode` | `确定` |
 | cancelText | 取消按钮文案 | `ReactNode` | `取消` |
-| confirmBadge | 确认按钮徽标 | `ReactNode` | `-` |
-| cancelBadge | 取消按钮徽标 | `ReactNode` | `-` |
 | overlay | 是否展示遮罩 | `boolean` | `true` |
 | hideConfirmButton | 是否隐藏确定按钮 | `boolean` | `false` |
 | hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md
index 7d40a2abe4..fd757a216b 100644
--- a/src/packages/dialog/doc.zh-TW.md
+++ b/src/packages/dialog/doc.zh-TW.md
@@ -91,8 +91,6 @@ import { Dialog } from '@nutui/nutui-react'
 | footer | 自定義頁腳，傳入 null 則不顯示 | `ReactNode` | `-` |
 | confirmText | 確認按鈕文案 | `ReactNode` | `確定` |
 | cancelText | 取消按鈕文案 | `ReactNode` | `取消` |
-| confirmBadge | 確認按鈕徽標 | `ReactNode` | `-` |
-| cancelBadge | 取消按鈕徽標 | `ReactNode` | `-` |
 | overlay | 是否展示遮罩 | `boolean` | `true` |
 | hideConfirmButton | 是否隱藏確定按鈕 | `boolean` | `false` |
 | hideCancelButton | 是否隱藏取消按鈕 | `boolean` | `false` |
diff --git a/src/packages/divider/divider.taro.tsx b/src/packages/divider/divider.taro.tsx
index 8a2040b06d..09a59e71ac 100644
--- a/src/packages/divider/divider.taro.tsx
+++ b/src/packages/divider/divider.taro.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { useRtl } from '../configprovider/configprovider.taro'
+import { useRtl } from '@/packages/configprovider/index.taro'
 
 export type DividerContentPosition = 'left' | 'center' | 'right'
 export type DividerDirection = 'horizontal' | 'vertical'
diff --git a/src/packages/divider/divider.tsx b/src/packages/divider/divider.tsx
index 7da876807c..a2d12345c6 100644
--- a/src/packages/divider/divider.tsx
+++ b/src/packages/divider/divider.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { useRtl } from '../configprovider'
+import { useRtl } from '@/packages/configprovider'
 
 export type DividerContentPosition = 'left' | 'center' | 'right'
 export type DividerDirection = 'horizontal' | 'vertical'
diff --git a/src/packages/ellipsis/ellipsis.taro.tsx b/src/packages/ellipsis/ellipsis.taro.tsx
index 85ecaa6b1a..19d960a427 100644
--- a/src/packages/ellipsis/ellipsis.taro.tsx
+++ b/src/packages/ellipsis/ellipsis.taro.tsx
@@ -7,7 +7,7 @@ import {
   getRectInMultiPlatformWithoutCache,
 } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
-import { useRtl } from '../configprovider/index.taro'
+import { useRtl } from '@/packages/configprovider/index.taro'
 import { TaroEllipsisProps } from '@/types'
 
 type EllipsisValue = {
diff --git a/src/packages/ellipsis/ellipsis.tsx b/src/packages/ellipsis/ellipsis.tsx
index 7629e646a2..5a682d623a 100644
--- a/src/packages/ellipsis/ellipsis.tsx
+++ b/src/packages/ellipsis/ellipsis.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent, useState, useRef } from 'react'
 import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { useIsomorphicLayoutEffect } from '@/hooks/use-isomprphic-layout-effect'
-import { useRtl } from '../configprovider'
+import { useRtl } from '@/packages/configprovider'
 import { WebEllipsisProps } from '@/types'
 
 type EllipsisValue = {
diff --git a/src/packages/empty/empty.taro.tsx b/src/packages/empty/empty.taro.tsx
index 05be245d28..9d3795625d 100644
--- a/src/packages/empty/empty.taro.tsx
+++ b/src/packages/empty/empty.taro.tsx
@@ -2,18 +2,14 @@ import React, { FunctionComponent, useEffect, useState, ReactNode } from 'react'
 import classNames from 'classnames'
 import { View, Image } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import {
-  Button,
-  ButtonFill,
-  ButtonSize,
-  ButtonType,
-} from '@/packages/button/button.taro'
+import { UIFill, UISize, UIType } from '@/types/base/atoms'
+import { Button } from '@/packages/button/button.taro'
 
 export interface EmptyAction {
   text: React.ReactNode
-  type?: ButtonType
-  size?: ButtonSize
-  fill?: ButtonFill
+  type?: UIType
+  size?: UISize
+  fill?: UIFill
   disabled?: boolean
   onClick?: () => () => void
 }
diff --git a/src/packages/empty/empty.tsx b/src/packages/empty/empty.tsx
index 5a6680396c..7ed09f1134 100644
--- a/src/packages/empty/empty.tsx
+++ b/src/packages/empty/empty.tsx
@@ -2,13 +2,14 @@ import React, { FunctionComponent, useEffect, useState, ReactNode } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
-import Button, { ButtonFill, ButtonSize, ButtonType } from '../button'
+import Button from '../button'
+import { UIType, UISize, UIFill } from '@/types/base/atoms'
 
 export interface EmptyAction {
   text: React.ReactNode
-  type?: ButtonType
-  size?: ButtonSize
-  fill?: ButtonFill
+  type?: UIType
+  size?: UISize
+  fill?: UIFill
   disabled?: boolean
   onClick?: () => () => void
 }
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 95cc3872fd..285e36b715 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -172,10 +172,10 @@
   padding-left: 0;
   padding-right: 12px;
 
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
+  // .required {
+  //   left: auto;
+  //   right: 0.1em;
+  // }
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-label,
diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index af39db4ac8..1a8ada7528 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -198,7 +198,7 @@ export const InputNumber: FunctionComponent<
         className={classNames(`${classPrefix}-input`, {
           [`${classPrefix}-input-disabled`]: disabled,
         })}
-        type={type}
+        type={formatter ? 'text' : type}
         ref={inputRef}
         inputMode={type === 'digit' ? 'decimal' : 'numeric'}
         disabled={disabled}
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 82790d79e8..5dd321c581 100644
--- a/src/packages/lottie/lottiemp.taro.tsx
+++ b/src/packages/lottie/lottiemp.taro.tsx
@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
-import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useRef } from 'react'
+import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -20,10 +20,15 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     speed = 1,
     dpr = true,
   } = props
-
+  const setSpeed = () => {
+    if (animation.current) {
+      animation.current.setSpeed(Math.abs(speed))
+      animation.current.setDirection(speed > 0 ? 1 : -1)
+    }
+  }
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useLayoutEffect(() => {
+  useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -57,14 +62,9 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            if (onComplete) {
+            onComplete &&
               animation.current.addEventListener('complete', onComplete)
-            }
-
-            if (animation.current) {
-              animation.current.setSpeed(Math.abs(speed))
-              animation.current.setDirection(speed > 0 ? 1 : -1)
-            }
+            setSpeed()
             inited.current = true
           } catch (error) {
             console.error(error)
@@ -72,8 +72,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
         }
       )
       .exec()
-  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
-
+  })
   useUnload(() => {
     onComplete &&
       animation.current &&
diff --git a/src/packages/overlay/overlay.taro.tsx b/src/packages/overlay/overlay.taro.tsx
index 328835b230..e5e729bb80 100644
--- a/src/packages/overlay/overlay.taro.tsx
+++ b/src/packages/overlay/overlay.taro.tsx
@@ -1,10 +1,10 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { useLockScrollTaro } from '@/hooks/taro/use-lock-scoll'
 import { TaroOverlayProps } from '@/types'
+import ConfigurableCSSTransition from '@/utils/taro/ConfigurableCSSTransition'
 
 export const defaultOverlayProps: TaroOverlayProps = {
   ...ComponentDefaults,
@@ -70,17 +70,17 @@ export const Overlay: FunctionComponent<
   )
 
   return (
-    <CSSTransition
+    <ConfigurableCSSTransition
       nodeRef={nodeRef}
       classNames={`${classPrefix}-slide`}
       unmountOnExit
-      timeout={duration}
+      timeout={Number(duration)}
       in={innerVisible}
       onEntered={afterShow}
       onExited={afterClose}
     >
       {renderOverlay()}
-    </CSSTransition>
+    </ConfigurableCSSTransition>
   )
 }
 
diff --git a/src/packages/popup/doc.en-US.md b/src/packages/popup/doc.en-US.md
index c567e20f10..1963ad56ce 100644
--- a/src/packages/popup/doc.en-US.md
+++ b/src/packages/popup/doc.en-US.md
@@ -68,14 +68,6 @@ import { Popup } from '@nutui/nutui-react'
 
 :::
 
-### Header and Footer
-
-:::demo
-
-<CodeBlock src='h5/demo9.tsx'></CodeBlock>
-
-:::
-
 ## Popup
 
 ### Props
@@ -126,7 +118,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-popup-border-radius | popup's border radius | `24px` |
 | \--nutui-popup-icon-size | popup's title icon size | `18px` |
-| \--nutui-popup-title-padding | popup's title padding | `16px` |
+| \--nutui-popup-title-padding | popup's title padding | `11px` |
 | \--nutui-popup-title-font-size | popup's title font size | `18px` |
 | \--nutui-popup-description-font-size | popup's subtitle/description font size | `10px` |
 | \--nutui-popup-title-height | popup's title height | `50px` |
diff --git a/src/packages/popup/doc.md b/src/packages/popup/doc.md
index 07467e4c12..dbb4016f1a 100644
--- a/src/packages/popup/doc.md
+++ b/src/packages/popup/doc.md
@@ -68,14 +68,6 @@ import { Popup } from '@nutui/nutui-react'
 
 :::
 
-### 顶部占位
-
-:::demo
-
-<CodeBlock src='h5/demo9.tsx'></CodeBlock>
-
-:::
-
 ## Popup
 
 ### Props
@@ -126,7 +118,7 @@ import { Popup } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-popup-border-radius | 弹框的圆角值 | `24px` |
 | \--nutui-popup-icon-size | 弹框关闭按钮的大小 | `18px` |
-| \--nutui-popup-title-padding | 标题栏的padding值 | `16px` |
+| \--nutui-popup-title-padding | 标题栏的padding值 | `11px` |
 | \--nutui-popup-title-font-size | 标题栏的字号 | `18px` |
 | \--nutui-popup-description-font-size | 子标题栏的字号 | `10px` |
 | \--nutui-popup-title-height | 标题栏的高度 | `50px` |
diff --git a/src/packages/popup/doc.zh-TW.md b/src/packages/popup/doc.zh-TW.md
index d256d17a1b..273f10482d 100644
--- a/src/packages/popup/doc.zh-TW.md
+++ b/src/packages/popup/doc.zh-TW.md
@@ -68,14 +68,6 @@ import { Popup } from '@nutui/nutui-react'
 
 :::
 
-### 頂部佔位
-
-:::demo
-
-<CodeBlock src='h5/demo9.tsx'></CodeBlock>
-
-:::
-
 ## Popup
 
 ### Props
@@ -98,9 +90,8 @@ import { Popup } from '@nutui/nutui-react'
 | resizable | 上下滑動調整高度，目前只支援從底部彈出 | `boolean` | `false` |
 | minHeight | 設定最小高度 | `string` | `26%` |
 | closeAriaLabel | 關閉圖標的 `aria-label` | `string` | `-` |
-| left | 標題左側部分 | `ReactNode` | `-` |
-| title | 標題中間部分 | `ReactNode` | `-` |
-| top | 頂部佔位 | `ReactNode` | `-` |
+| left | 标题左侧部分 | `ReactNode` | `-` |
+| title | 标题中间部分 | `ReactNode` | `-` |
 | description | 子標題/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否顯示圓角 | `boolean` | `false` |
@@ -126,7 +117,7 @@ import { Popup } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-popup-border-radius | 彈框的圓角值 | `24px` |
 | \--nutui-popup-icon-size | 彈框關閉按鈕的大小 | `18px` |
-| \--nutui-popup-title-padding | 標題欄的padding值 | `16px` |
+| \--nutui-popup-title-padding | 標題欄的padding值 | `11px` |
 | \--nutui-popup-title-font-size | 標題欄的字號 | `18px` |
 | \--nutui-popup-subtitle-font-size | 子標題欄的字號 | `10px` |
 | \--nutui-popup-title-height | 標題欄的高度 | `50px` |
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 14d1a492e8..abcf55c7fe 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -28,7 +28,6 @@
       color: $color-title;
       font-weight: $font-weight-bold;
       font-size: $popup-title-font-size;
-      line-height: $popup-title-font-size;
     }
 
     &-description {
@@ -81,6 +80,8 @@
   &-center {
     top: 50%;
     left: 50%;
+    right: auto;
+    bottom: auto;
     min-height: 10%;
     max-width: 295px;
     transform: translate(-50%, -50%);
@@ -93,6 +94,8 @@
   &-bottom {
     bottom: 0;
     left: 0;
+    right: auto;
+    top: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -107,6 +110,8 @@
   &-right {
     top: 0;
     right: 0;
+    left: auto;
+    bottom: auto;
     width: 100px;
     height: 100%;
 
@@ -118,6 +123,8 @@
   &-left {
     top: 0;
     left: 0;
+    right: auto;
+    bottom: auto;
     width: 100px;
     height: 100%;
 
@@ -129,6 +136,8 @@
   &-top {
     top: 0;
     left: 0;
+    right: auto;
+    bottom: auto;
     width: 100%;
 
     &.nut-popup-round {
@@ -212,6 +221,9 @@
     }
 
     @keyframes popup-slide-top-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, -100%, 0);
       }
@@ -242,6 +254,9 @@
     }
 
     @keyframes popup-slide-right-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(100%, 0, 0);
       }
@@ -272,6 +287,9 @@
     }
 
     @keyframes slide-bottom-exit {
+      from {
+        transform: translate3d(0, 0%, 0);
+      }
       to {
         transform: translate3d(0, 100%, 0);
       }
@@ -302,6 +320,9 @@
     }
 
     @keyframes popup-slide-left-exit {
+      from {
+        transform: translate3d(0%, 0, 0);
+      }
       to {
         transform: translate3d(-100%, 0, 0);
       }
diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx
index 3763ad0a49..44f3c2474d 100644
--- a/src/packages/price/price.tsx
+++ b/src/packages/price/price.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index'
 import { WebPriceProps, PriceColorEnum } from '@/types'
+import { shouldRenderPriceAsRaw } from '@/utils/should-render-price-raw'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -36,10 +37,17 @@ export const Price: FunctionComponent<Partial<WebPriceProps>> = (props) => {
   const classPrefix = 'nut-price'
 
   const rtl = useRtl()
+  const isRenderPriceRaw = useMemo(
+    () =>
+      typeof originalPrice === 'string' &&
+      shouldRenderPriceAsRaw(originalPrice),
+    [originalPrice]
+  )
 
   const price = useMemo(() => {
+    if (isRenderPriceRaw) return ''
     return originalPrice.toString().replace(/[^\d.]/g, '')
-  }, [originalPrice])
+  }, [originalPrice, isRenderPriceRaw])
 
   const isCustomPriceColor = useMemo(() => {
     const specificPriceColor = Object.values(PriceColorEnum)
@@ -112,45 +120,54 @@ export const Price: FunctionComponent<Partial<WebPriceProps>> = (props) => {
     )
   }
 
-  return (
-    <div
-      className={`${classPrefix} ${classPrefix}-${isCustomPriceColor ? 'custom' : color} ${className}`}
-      style={style}
-      {...rest}
-    >
-      {symbol && position === 'before' ? renderSymbol() : null}
-      <div
-        className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${
-          line ? `${classPrefix}-line` : ''
-        }`}
-        style={priceColorStyle}
-      >
-        {formatThousands(price)}
-      </div>
-      {digits !== 0 ? (
-        <>
-          {checkPoint(price) || digits ? (
+  const renderRawContent = () => <>{originalPrice}</>
+  const renderInner = () => {
+    return (
+      <>
+        {symbol && position === 'before' ? renderSymbol() : null}
+        <div
+          className={`${classPrefix}-integer ${classPrefix}-integer-${size} ${
+            line ? `${classPrefix}-line` : ''
+          }`}
+          style={priceColorStyle}
+        >
+          {formatThousands(price)}
+        </div>
+        {digits !== 0 ? (
+          <>
+            {checkPoint(price) || digits ? (
+              <div
+                className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${
+                  line ? `${classPrefix}-line` : ''
+                }`}
+                style={priceColorStyle}
+              >
+                .
+              </div>
+            ) : null}
             <div
               className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${
                 line ? `${classPrefix}-line` : ''
               }`}
               style={priceColorStyle}
             >
-              .
+              {formatDecimal(price)}
             </div>
-          ) : null}
-          <div
-            className={`${classPrefix}-decimal ${classPrefix}-decimal-${size} ${
-              line ? `${classPrefix}-line` : ''
-            }`}
-            style={priceColorStyle}
-          >
-            {formatDecimal(price)}
-          </div>
-        </>
-      ) : null}
+          </>
+        ) : null}
 
-      {symbol && position === 'after' ? renderSymbol() : null}
+        {symbol && position === 'after' ? renderSymbol() : null}
+      </>
+    )
+  }
+
+  return (
+    <div
+      className={`${classPrefix} ${classPrefix}-${isCustomPriceColor ? 'custom' : color} ${className}`}
+      style={style}
+      {...rest}
+    >
+      {isRenderPriceRaw ? renderRawContent() : renderInner()}
     </div>
   )
 }
diff --git a/src/packages/progress/__tests__/progress.spec.tsx b/src/packages/progress/__tests__/progress.spec.tsx
index b455f02565..73d8faa486 100644
--- a/src/packages/progress/__tests__/progress.spec.tsx
+++ b/src/packages/progress/__tests__/progress.spec.tsx
@@ -66,11 +66,3 @@ test('should handle animation mode and duration', () => {
     expect(onActiveEndMock).toHaveBeenCalled()
   }, 600)
 })
-
-test('should render with aria-label', () => {
-  const { container } = render(
-    <Progress percent={50} ariaLabel="当前进度50%" />
-  )
-  const progressDiv = container.querySelector('.nut-progress')
-  expect(progressDiv?.getAttribute('aria-label')).toBe('当前进度50%')
-})
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index 2b48bd8492..f2cd6df679 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -4,7 +4,7 @@ import Taro, { PageInstance } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import { pxTransform } from '@/utils/taro/px-transform'
 import { ComponentDefaults } from '@/utils/typings'
-import { useRtl } from '../configprovider/index.taro'
+import { useRtl } from '@/packages/configprovider/index.taro'
 import { useUuid } from '@/hooks/use-uuid'
 import { harmony, web } from '@/utils/taro/platform'
 import { TaroProgressProps } from '@/types'
@@ -43,7 +43,6 @@ export const Progress: FunctionComponent<
     active,
     activeMode,
     duration,
-    ariaLabel,
     onActiveEnd,
     ...rest
   } = {
@@ -222,7 +221,6 @@ export const Progress: FunctionComponent<
       id={selector}
       className={classNames(classPrefix, className)}
       style={style}
-      aria-label={ariaLabel}
       {...(rest as any)}
     >
       <View className={`${classPrefix}-outer`} style={stylesOuter}>
diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx
index 9c7e7ae506..1190440ed9 100644
--- a/src/packages/progress/progress.tsx
+++ b/src/packages/progress/progress.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
-import { useRtl } from '../configprovider'
+import { useRtl } from '@/packages/configprovider'
 import { WebProgressProps } from '@/types'
 
 const defaultProps = {
@@ -33,7 +33,6 @@ export const Progress: FunctionComponent<
     fontSize,
     activeMode,
     duration,
-    ariaLabel,
     onActiveEnd,
     ...rest
   } = {
@@ -135,7 +134,6 @@ export const Progress: FunctionComponent<
       ref={progressRef}
       className={classNames(classPrefix, className)}
       style={style}
-      aria-label={ariaLabel}
       {...rest}
     >
       <div className={`${classPrefix}-outer`} style={stylesOuter}>
diff --git a/src/packages/quickenter/__tests__/quickenter.spec.tsx b/src/packages/quickenter/__tests__/quickenter.spec.tsx
new file mode 100644
index 0000000000..b0d4b0aaa5
--- /dev/null
+++ b/src/packages/quickenter/__tests__/quickenter.spec.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import QuickEnter from '../index'
+
+describe('QuickEnter', () => {
+  it('should render correctly when visible is true', () => {
+    const { getByText } = render(<QuickEnter visible title="My QuickEnter" />)
+    expect(getByText('My QuickEnter')).toBeInTheDocument()
+  })
+
+  it('should render options and handle click events', () => {
+    const onChange = vi.fn()
+    const options = [
+      { title: 'Option 1', icon: 'Icon 1' },
+      { title: 'Option 2', icon: 'Icon 2' },
+    ]
+    const { getByText } = render(
+      <QuickEnter visible options={options} onChange={onChange} />
+    )
+
+    expect(getByText('Option 1')).toBeInTheDocument()
+    expect(getByText('Option 2')).toBeInTheDocument()
+
+    fireEvent.click(getByText('Option 1'))
+    expect(onChange).toHaveBeenCalledWith(options[0], 0)
+  })
+
+  it('should trigger onClose when close button is clicked', () => {
+    const onClose = vi.fn()
+    const { container } = render(<QuickEnter visible onClose={onClose} />)
+    const closeBtn = container.querySelector('.nut-quickenter-close-btn')
+    expect(closeBtn).toBeTruthy()
+    fireEvent.click(closeBtn!)
+    expect(onClose).toHaveBeenCalled()
+  })
+})
diff --git a/src/packages/quickenter/demo.taro.tsx b/src/packages/quickenter/demo.taro.tsx
new file mode 100644
index 0000000000..f9e746f50d
--- /dev/null
+++ b/src/packages/quickenter/demo.taro.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
+import { useTranslate } from '@/sites/assets/locale/taro'
+import Header from '@/sites/components/header'
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+
+const QuickEnterDemo = () => {
+  const [translated] = useTranslate({
+    'zh-CN': {
+      basic: '基础用法',
+      scrollable: '可滚动',
+      customClose: '自定义关闭图标',
+    },
+    'zh-TW': {
+      basic: '基础用法',
+      scrollable: '可滚动',
+      customClose: '自定义关闭图标',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      scrollable: 'Scrollable',
+      customClose: 'Custom Close Icon',
+    },
+  })
+
+  return (
+    <>
+      <Header />
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
+        <Demo1 />
+        <View className="h2">{translated.scrollable}</View>
+        <Demo2 />
+        <View className="h2">{translated.customClose}</View>
+        <Demo3 />
+      </ScrollView>
+    </>
+  )
+}
+
+export default QuickEnterDemo
diff --git a/src/packages/quickenter/demo.tsx b/src/packages/quickenter/demo.tsx
new file mode 100644
index 0000000000..3d2b9220a3
--- /dev/null
+++ b/src/packages/quickenter/demo.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { useTranslate } from '@/sites/assets/locale'
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+
+const QuickEnterDemo = () => {
+  const [translated] = useTranslate({
+    'zh-CN': {
+      basic: '基础用法',
+      scrollable: '可滚动',
+      customClose: '自定义关闭图标',
+    },
+    'zh-TW': {
+      basic: '基础用法',
+      scrollable: '可滚动',
+      customClose: '自定义关闭图标',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      scrollable: 'Scrollable',
+      customClose: 'Custom Close Icon',
+    },
+  })
+
+  return (
+    <>
+      <div className="demo">
+        <h2>{translated.basic}</h2>
+        <Demo1 />
+
+        <h2>{translated.scrollable}</h2>
+        <Demo2 />
+
+        <h2>{translated.customClose}</h2>
+        <Demo3 />
+      </div>
+    </>
+  )
+}
+
+export default QuickEnterDemo
diff --git a/src/packages/quickenter/demos/h5/demo1.tsx b/src/packages/quickenter/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..c980f1d1b0
--- /dev/null
+++ b/src/packages/quickenter/demos/h5/demo1.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react'
+import { Message, Home, Search, Cart, Edit, Del } from '@nutui/icons-react'
+
+const Demo1 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '订单回收站', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show(`Clicked: ${item.title}`)
+  }
+
+  return (
+    <>
+      <Cell title="点击查看快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/quickenter/demos/h5/demo2.tsx b/src/packages/quickenter/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..98826eb2cc
--- /dev/null
+++ b/src/packages/quickenter/demos/h5/demo2.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Del,
+  Star,
+  Share,
+  Setting,
+  User,
+} from '@nutui/icons-react'
+
+const Demo2 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '订单回收站', icon: <Del /> },
+    { title: '收藏', icon: <Star /> },
+    { title: '店铺', icon: <Share /> },
+    { title: '设置', icon: <Setting /> },
+    { title: '个人中心', icon: <User /> },
+  ]
+
+  return (
+    <>
+      <Cell title="点击查看可滚动的快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/quickenter/demos/h5/demo3.tsx b/src/packages/quickenter/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..88ab25397f
--- /dev/null
+++ b/src/packages/quickenter/demos/h5/demo3.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react'
+
+const Demo3 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="自定义关闭图标" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        style={{
+          '--nutui-quickenter-bg-color': '#fff',
+          '--nutui-quickenter-item-icon-bg-color': '#F5F5F5B3',
+        }}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/quickenter/demos/taro/demo1.tsx b/src/packages/quickenter/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..7925f5d62b
--- /dev/null
+++ b/src/packages/quickenter/demos/taro/demo1.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react-taro'
+import { Message, Home, Search, Cart, Edit, Del } from '@nutui/icons-react-taro'
+
+const Demo1 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '订单回收站', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show('toast', {
+      title: `Clicked: ${item.title}`,
+      icon: 'none',
+    })
+  }
+
+  return (
+    <>
+      <Cell title="点击查看快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+      <Toast id="toast" />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/quickenter/demos/taro/demo2.tsx b/src/packages/quickenter/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..f1a245431c
--- /dev/null
+++ b/src/packages/quickenter/demos/taro/demo2.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react-taro'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Del,
+  Star,
+  Share,
+  Setting,
+  User,
+} from '@nutui/icons-react-taro'
+
+const Demo2 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '订单回收站', icon: <Del /> },
+    { title: '收藏', icon: <Star /> },
+    { title: '店铺', icon: <Share /> },
+    { title: '设置', icon: <Setting /> },
+    { title: '个人中心', icon: <User /> },
+  ]
+
+  return (
+    <>
+      <Cell title="点击查看可滚动的快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/quickenter/demos/taro/demo3.tsx b/src/packages/quickenter/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..2b999d9f6e
--- /dev/null
+++ b/src/packages/quickenter/demos/taro/demo3.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react-taro'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react-taro'
+
+const Demo3 = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="自定义关闭图标" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        style={{
+          '--nutui-quickenter-bg-color': '#fff',
+          '--nutui-quickenter-item-icon-bg-color': '#F5F5F5B3',
+        }}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/quickenter/doc.en-US.md b/src/packages/quickenter/doc.en-US.md
new file mode 100644
index 0000000000..59dea54fae
--- /dev/null
+++ b/src/packages/quickenter/doc.en-US.md
@@ -0,0 +1,187 @@
+# QuickEnter
+
+## Intro
+
+QuickEnter component, a shortcut navigation list popping up from the bottom.
+
+## Install
+
+```tsx
+import { QuickEnter } from '@nutui/nutui-react'
+```
+
+## Demo
+
+### Basic Usage
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+} from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: 'Message', icon: <Message /> },
+    { title: 'Home', icon: <Home /> },
+    { title: 'Search', icon: <Search /> },
+    { title: 'Cart', icon: <Cart /> },
+    { title: 'Feedback', icon: <Edit /> },
+    { title: 'Often Buy', icon: <Shop /> },
+    { title: 'Order Trash', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show(`Clicked: ${item.title}`)
+  }
+
+  return (
+    <>
+      <Cell title="Show QuickEnter" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+### Scrollable
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+  Star,
+  Heart,
+  Location,
+} from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: 'Message', icon: <Message />, badge: 8 },
+    { title: 'Home', icon: <Home /> },
+    { title: 'Search', icon: <Search /> },
+    { title: 'Cart', icon: <Cart /> },
+    { title: 'Feedback', icon: <Edit /> },
+    { title: 'Often Buy', icon: <Shop /> },
+    { title: 'Order Trash', icon: <Del /> },
+    { title: 'Star', icon: <Star /> },
+    { title: 'Heart', icon: <Heart /> },
+    { title: 'Location', icon: <Location /> },
+  ]
+
+  return (
+    <>
+      <Cell title="Scrollable (10 items)" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+### Custom Close Icon
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: 'Message', icon: <Message />, badge: 8 },
+    { title: 'Home', icon: <Home /> },
+    { title: 'Search', icon: <Search /> },
+    { title: 'Cart', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="Custom Close Icon" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        style={{ '--nutui-quickenter-bg-color': '#fff' }}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+## API
+
+### Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| visible | Whether is visible | `boolean` | `false` |
+| title | Title | `ReactNode` | `快捷入口` |
+| options | Option list | `QuickEnterOption[]` | `[]` |
+| closeIcon | Custom close icon | `ReactNode` | `-` |
+| popupProps | Passed to Popup component | `PopupProps` | `{}` |
+| closeOnOverlayClick | Whether to close on overlay click | `boolean` | `true` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| onClose | Emitted when closed | `-` |
+| onChange | Emitted when option is clicked | `item: QuickEnterOption, index: number` |
+
+### QuickEnterOption Data Structure
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Option title | `string` | `-` |
+| icon | Option icon | `ReactNode` | `-` |
+| type | Option type | `string` | `-` |
+| url | Jump url | `string` | `-` |
+
+## Theme Customization
+
+### Style Variables
+
+The component provides the following CSS variables for style customization, please refer to [ConfigProvider component](#/en-US/component/configprovider).
+
+| Name | Default |
+| --- | --- |
+| --nutui-quickenter-bg-color | `$f5f5f5` |
+| --nutui-quickenter-max-height | `256px` |
+| --nutui-quickenter-title-font-size | `$font-size-base` |
+| --nutui-quickenter-title-color | `$color-title` |
+| --nutui-quickenter-item-title-font-size | `$font-size-s` |
+| --nutui-quickenter-item-title-color | `$color-title` |
+| --nutui-quickenter-item-icon-bg-color | `$white` |
+| --nutui-quickenter-item-icon-color | `$color-title` |
+| --nutui-quickenter-close-icon-size | `12px` |
+| --nutui-quickenter-close-icon-color | `#808080` |
+| --nutui-quickenter-box-shadow | `0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset` |
diff --git a/src/packages/quickenter/doc.md b/src/packages/quickenter/doc.md
new file mode 100644
index 0000000000..d60eb6c39a
--- /dev/null
+++ b/src/packages/quickenter/doc.md
@@ -0,0 +1,140 @@
+# QuickEnter 快捷入口
+
+## 介绍
+
+快捷入口组件，底部弹出的快捷导航列表。
+
+## 引入
+
+```tsx
+import { QuickEnter } from '@nutui/nutui-react'
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+} from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message /> },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '我的常购', icon: <Shop /> },
+    { title: '订单回收站', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show(`Clicked: ${item.title}`)
+  }
+
+  return (
+    <>
+      <Cell title="点击查看快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+### 自定义关闭图标
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="自定义关闭图标" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        style={{ '--nutui-quickenter-bg-color': '#fff' }}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+## QuickEnter
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 是否可见 | `boolean` | `false` |
+| title | 标题 | `ReactNode` | `快捷入口` |
+| options | 选项列表 | `QuickEnterOption[]` | `[]` |
+| closeIcon | 自定义关闭图标 | `ReactNode` | `-` |
+| popupProps | 透传给 Popup 组件的属性 | `PopupProps` | `{}` |
+| closeOnOverlayClick | 是否在点击遮罩层后关闭 | `boolean` | `true` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onClose | 关闭时触发 | `-` |
+| onChange | 点击选项时触发 | `item: QuickEnterOption, index: number` |
+
+### QuickEnterOption 数据结构
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 选项标题 | `string` | `-` |
+| icon | 选项图标 | `ReactNode` | `-` |
+| type | 选项类型 | `string` | `-` |
+| url | 跳转链接 | `string` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，详情请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 默认值 |
+| --- | --- |
+| --nutui-quickenter-bg-color | `$f5f5f5` |
+| --nutui-quickenter-max-height | `256px` |
+| --nutui-quickenter-title-font-size | `$font-size-base` |
+| --nutui-quickenter-title-color | `$color-title` |
+| --nutui-quickenter-item-title-font-size | `$font-size-s` |
+| --nutui-quickenter-item-title-color | `$color-title` |
+| --nutui-quickenter-item-icon-bg-color | `$white` |
+| --nutui-quickenter-item-icon-color | `$color-title` |
+| --nutui-quickenter-close-icon-size | `12px` |
+| --nutui-quickenter-close-icon-color | `#808080` |
+| --nutui-quickenter-box-shadow | `0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset` |
diff --git a/src/packages/quickenter/doc.taro.md b/src/packages/quickenter/doc.taro.md
new file mode 100644
index 0000000000..a3a8945960
--- /dev/null
+++ b/src/packages/quickenter/doc.taro.md
@@ -0,0 +1,188 @@
+# QuickEnter 快捷入口
+
+## 介绍
+
+快捷入口组件，底部弹出的快捷导航列表。
+
+## 引入
+
+```tsx
+import { QuickEnter } from '@nutui/nutui-react-taro'
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react-taro'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+} from '@nutui/icons-react-taro'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message /> },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '我的常购', icon: <Shop /> },
+    { title: '订单回收站', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show(`Clicked: ${item.title}`)
+  }
+
+  return (
+    <>
+      <Cell title="点击查看快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+      <Toast id="toast" />
+    </>
+  )
+}
+export default Demo
+```
+
+### 可滚动
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react-taro'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+  Star,
+  Heart,
+  Location,
+} from '@nutui/icons-react-taro'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+    { title: '功能反馈', icon: <Edit /> },
+    { title: '我的常购', icon: <Shop /> },
+    { title: '订单回收站', icon: <Del /> },
+    { title: '收藏', icon: <Star /> },
+    { title: '关注', icon: <Heart /> },
+    { title: '地址', icon: <Location /> },
+  ]
+
+  return (
+    <>
+      <Cell title="可滚动（10条数据）" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+### 自定义关闭图标
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react-taro'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react-taro'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首页', icon: <Home /> },
+    { title: '搜索', icon: <Search /> },
+    { title: '购物车', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="自定义关闭图标" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        style={{ '--nutui-quickenter-bg-color': '#fff' }}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+## QuickEnter
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| visible | 是否可见 | `boolean` | `false` |
+| title | 标题 | `ReactNode` | `快捷入口` |
+| options | 选项列表 | `QuickEnterOption[]` | `[]` |
+| closeIcon | 自定义关闭图标 | `ReactNode` | `-` |
+| popupProps | 透传给 Popup 组件的属性 | `PopupProps` | `{}` |
+| closeOnOverlayClick | 是否在点击遮罩层后关闭 | `boolean` | `true` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onClose | 关闭时触发 | `-` |
+| onChange | 点击选项时触发 | `item: QuickEnterOption, index: number` |
+
+### QuickEnterOption 数据结构
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 选项标题 | `string` | `-` |
+| icon | 选项图标 | `ReactNode` | `-` |
+| type | 选项类型 | `string` | `-` |
+| url | 跳转链接 | `string` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，详情请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 默认值 |
+| --- | --- |
+| --nutui-quickenter-bg-color | `$f5f5f5` |
+| --nutui-quickenter-max-height | `256px` |
+| --nutui-quickenter-title-font-size | `$font-size-base` |
+| --nutui-quickenter-title-color | `$color-title` |
+| --nutui-quickenter-item-title-font-size | `$font-size-s` |
+| --nutui-quickenter-item-title-color | `$color-title` |
+| --nutui-quickenter-item-icon-bg-color | `$white` |
+| --nutui-quickenter-item-icon-color | `$color-title` |
+| --nutui-quickenter-close-icon-size | `12px` |
+| --nutui-quickenter-close-icon-color | `#808080` |
+| --nutui-quickenter-box-shadow | `0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset` |
diff --git a/src/packages/quickenter/doc.zh-TW.md b/src/packages/quickenter/doc.zh-TW.md
new file mode 100644
index 0000000000..9eecea48fe
--- /dev/null
+++ b/src/packages/quickenter/doc.zh-TW.md
@@ -0,0 +1,140 @@
+在這裡輸入要轉換的內容# QuickEnter 快捷入口
+
+## 介紹
+
+快捷入口組件，底部彈出的快捷導航列表。
+
+## 引入
+
+```tsx
+import { QuickEnter } from '@nutui/nutui-react'
+```
+
+## 代碼演示
+
+### 基礎用法
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell, Toast } from '@nutui/nutui-react'
+import {
+  Message,
+  Home,
+  Search,
+  Cart,
+  Edit,
+  Shop,
+  Del,
+} from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message /> },
+    { title: '首頁', icon: <Home /> },
+    { title: '蒐索', icon: <Search /> },
+    { title: '購物車', icon: <Cart /> },
+    { title: '功能反饋', icon: <Edit /> },
+    { title: '我的常購', icon: <Shop /> },
+    { title: '訂單回收站', icon: <Del /> },
+  ]
+
+  const onChange = (item: any) => {
+    Toast.show(`Clicked: ${item.title}`)
+  }
+
+  return (
+    <>
+      <Cell title="點擊查看快捷入口" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        onClose={() => setVisible(false)}
+        onChange={onChange}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+### 自定義關閉圖標
+
+```tsx
+import React, { useState } from 'react'
+import { QuickEnter, Cell } from '@nutui/nutui-react'
+import { Message, Home, Search, Cart, ArrowUp } from '@nutui/icons-react'
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false)
+  const options = [
+    { title: '消息', icon: <Message />, badge: 8 },
+    { title: '首頁', icon: <Home /> },
+    { title: '蒐索', icon: <Search /> },
+    { title: '購物車', icon: <Cart /> },
+  ]
+
+  return (
+    <>
+      <Cell title="自定義關閉圖標" onClick={() => setVisible(true)} />
+      <QuickEnter
+        visible={visible}
+        options={options}
+        style={{ '--nutui-quickenter-bg-color': '#fff' }}
+        closeIcon={<ArrowUp width={12} height={12} />}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  )
+}
+export default Demo
+```
+
+## QuickEnter
+
+### Props
+
+| 屬性 | 説明 | 類型 | 默認值 |
+| --- | --- | --- | --- |
+| visible | 是否可見 | `boolean` | `false` |
+| title | 標題 | `ReactNode` | `快捷入口` |
+| options | 選項列表 | `QuickEnterOption[]` | `[]` |
+| closeIcon | 自定義關閉圖標 | `ReactNode` | `-` |
+| popupProps | 透傳給 Popup 組件的屬性 | `PopupProps` | `{}` |
+| closeOnOverlayClick | 是否在點擊遮罩層後關閉 | `boolean` | `true` |
+
+### Events
+
+| 事件名 | 説明 | 回調參數 |
+| --- | --- | --- |
+| onClose | 關閉時觸髮 | `-` |
+| onChange | 點擊選項時觸髮 | `item: QuickEnterOption, index: number` |
+
+### QuickEnterOption 數據結構
+
+| 參數 | 説明 | 類型 | 默認值 |
+| --- | --- | --- | --- |
+| title | 選項標題 | `string` | `-` |
+| icon | 選項圖標 | `ReactNode` | `-` |
+| type | 選項類型 | `string` | `-` |
+| url | 跳轉鏈接 | `string` | `-` |
+
+## 主題定製
+
+### 樣式變量
+
+組件提供了下列 CSS 變量，可用於自定義樣式，詳情請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
+
+| 名稱 | 默認值 |
+| --- | --- |
+| --nutui-quickenter-bg-color | `$f5f5f5` |
+| --nutui-quickenter-max-height | `256px` |
+| --nutui-quickenter-title-font-size | `$font-size-base` |
+| --nutui-quickenter-title-color | `$color-title` |
+| --nutui-quickenter-item-title-font-size | `$font-size-s` |
+| --nutui-quickenter-item-title-color | `$color-title` |
+| --nutui-quickenter-item-icon-bg-color | `$white` |
+| --nutui-quickenter-item-icon-color | `$color-title` |
+| --nutui-quickenter-close-icon-size | `12px` |
+| --nutui-quickenter-close-icon-color | `#808080` |
+| --nutui-quickenter-box-shadow | `0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset` |
diff --git a/src/packages/quickenter/index.taro.ts b/src/packages/quickenter/index.taro.ts
new file mode 100644
index 0000000000..2f12d58426
--- /dev/null
+++ b/src/packages/quickenter/index.taro.ts
@@ -0,0 +1,4 @@
+import QuickEnter from './quickenter.taro'
+
+export type { TaroQuickEnterProps as QuickEnterProps } from '@/types'
+export default QuickEnter
diff --git a/src/packages/quickenter/index.ts b/src/packages/quickenter/index.ts
new file mode 100644
index 0000000000..6a25c364fb
--- /dev/null
+++ b/src/packages/quickenter/index.ts
@@ -0,0 +1,4 @@
+import QuickEnter from './quickenter'
+
+export type { WebQuickEnterProps as QuickEnterProps } from '@/types'
+export default QuickEnter
diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss
new file mode 100644
index 0000000000..02da8b9257
--- /dev/null
+++ b/src/packages/quickenter/quickenter.scss
@@ -0,0 +1,122 @@
+@import '../popup/popup.scss';
+
+.nut-quickenter {
+  width: 100%;
+  /* 限制弹层最大高度，包含安全区 */
+  max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
+  background: $quickenter-bg-color;
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: $quickenter-box-shadow;
+  // backdrop-filter: $quickenter-backdrop-filter;
+
+  &.safe-area-top {
+    /* 使用 env fallback，确保旧浏览器返回 0 */
+    padding-top: calc(
+      env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1)
+    );
+  }
+
+  &-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 16px 0;
+    box-sizing: border-box;
+  }
+
+  &-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    color: $quickenter-title-color;
+    font-size: $quickenter-title-font-size;
+  }
+
+  &-close-btn {
+    color: $quickenter-close-icon-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg,
+    .nut-icon {
+      width: $quickenter-close-icon-size;
+      height: $quickenter-close-icon-size;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    padding: 10px 28px;
+    overflow-y: hidden; // 始终可滚动，防止内容被遮挡
+    box-sizing: border-box;
+
+    &-scrollable {
+      overflow-y: auto; // Only scroll when > 8 items
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 56px;
+    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    box-sizing: border-box;
+    cursor: pointer;
+
+    // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
+    margin-right: calc((100% - 224px) / 3);
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+
+    &-icon {
+      width: 56px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: $quickenter-item-icon-bg-color;
+      color: $quickenter-item-icon-color;
+      margin-bottom: 8px;
+      flex-shrink: 0;
+
+      svg,
+      .nut-icon {
+        width: 22px;
+        height: 22px;
+      }
+    }
+
+    &-title {
+      font-size: $quickenter-item-title-font-size;
+      color: $quickenter-item-title-color;
+      text-align: center;
+      line-height: 1.4;
+      // Allow multi-line if text is long, preventing truncation
+      white-space: normal;
+      word-wrap: break-word;
+      width: 72px; // Allow text to be slightly wider than icon
+      margin-left: -8px; // Center 72px title over 56px icon
+      margin-right: -8px;
+    }
+  }
+}
diff --git a/src/packages/quickenter/quickenter.taro.tsx b/src/packages/quickenter/quickenter.taro.tsx
new file mode 100644
index 0000000000..1945ac2d1d
--- /dev/null
+++ b/src/packages/quickenter/quickenter.taro.tsx
@@ -0,0 +1,176 @@
+import React, { ForwardRefRenderFunction, useImperativeHandle } from 'react'
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+import { Close } from '@nutui/icons-react-taro'
+import Popup from '@/packages/popup/index.taro'
+import { ComponentDefaults } from '@/utils/typings'
+import { usePropsValue } from '@/hooks/use-props-value'
+import {
+  QuickEnterActions,
+  QuickEnterOption,
+  QuickEnterRef,
+  TaroQuickEnterProps,
+} from '@/types'
+import Badge from '@/packages/badge/index.taro'
+import { useConfig } from '@/packages/configprovider'
+
+const defaultProps = {
+  ...ComponentDefaults,
+  options: [],
+  visible: false,
+  closeOnOverlayClick: true,
+  safeAreaInsetTop: true,
+} as unknown as TaroQuickEnterProps
+
+const InternalQuickEnter: ForwardRefRenderFunction<
+  QuickEnterRef,
+  Partial<TaroQuickEnterProps>
+> = (props, ref) => {
+  const {
+    children,
+    visible,
+    title,
+    options = [],
+    closeOnOverlayClick,
+    popupProps = {},
+    className,
+    style,
+    onClose,
+    onChange,
+    closeIcon,
+    safeAreaInsetTop,
+    ...rest
+  } = { ...defaultProps, ...props }
+  const { locale } = useConfig()
+  const mergedTitle = title || locale.quickenter.title
+
+  const classPrefix = 'nut-quickenter'
+  const classes = classNames(classPrefix, className, {
+    'safe-area-top': safeAreaInsetTop,
+  })
+
+  const [innerVisible, setInnerVisible] = usePropsValue<boolean>({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false,
+    onChange: (v: boolean) => {
+      if (!v) {
+        props.onClose?.()
+      }
+    },
+  })
+
+  const actions: QuickEnterActions = {
+    open: () => {
+      setInnerVisible(true)
+    },
+    close: () => {
+      setInnerVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
+
+  const onCancelEvent = () => {
+    setInnerVisible(false)
+  }
+
+  const handleItemClick = (item: QuickEnterOption, index: number) => {
+    if (item.url) {
+      Taro.navigateTo({ url: item.url })
+    }
+    onChange?.(item, index)
+  }
+
+  const renderTitleBar = () => {
+    return (
+      <View className={`${classPrefix}-control`}>
+        <View className={`${classPrefix}-title`}>{mergedTitle}</View>
+        <View
+          className={`${classPrefix}-close-btn`}
+          onClick={(e: { stopPropagation: () => void }) => {
+            e.stopPropagation()
+            onCancelEvent()
+          }}
+        >
+          {/* @ts-ignore */}
+          {closeIcon || <Close ariaLabel={locale.close} />}
+        </View>
+      </View>
+    )
+  }
+
+  const renderContent = () => {
+    return (
+      <View
+        className={classNames(`${classPrefix}-content`, {
+          [`${classPrefix}-content-scrollable`]: options.length > 8,
+        })}
+      >
+        <View className={`${classPrefix}-list`}>
+          {options.map((item, index) => (
+            <View
+              key={index}
+              className={`${classPrefix}-item`}
+              ariaLabel={`${item.title} ${item.badge ?? item.badgeProps?.value}`}
+              onClick={() => handleItemClick(item, index)}
+            >
+              {/* @ts-ignore */}
+              <View className={`${classPrefix}-item-icon`} ariaHidden>
+                <Badge
+                  {...item.badgeProps}
+                  value={item.badge ?? item.badgeProps?.value}
+                >
+                  {item.icon}
+                </Badge>
+              </View>
+              {/* @ts-ignore */}
+              <View className={`${classPrefix}-item-title`} ariaHidden>
+                {item.title}
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    )
+  }
+
+  const renderQuickEnterElement = () => {
+    return (
+      <View className={classes} style={style} {...rest}>
+        {renderTitleBar()}
+        {children}
+        {renderContent()}
+      </View>
+    )
+  }
+
+  return (
+    <>
+      <Popup
+        style={{
+          background: 'transparent',
+        }}
+        {...popupProps}
+        overlayStyle={{
+          background: 'transparent',
+        }}
+        visible={innerVisible}
+        position="top"
+        onOverlayClick={() => {
+          if (!closeOnOverlayClick) return
+          onCancelEvent()
+        }}
+        onClose={onCancelEvent}
+      >
+        {renderQuickEnterElement()}
+      </Popup>
+    </>
+  )
+}
+
+const QuickEnter = React.forwardRef<
+  QuickEnterRef,
+  Partial<TaroQuickEnterProps>
+>(InternalQuickEnter)
+export default QuickEnter
diff --git a/src/packages/quickenter/quickenter.tsx b/src/packages/quickenter/quickenter.tsx
new file mode 100644
index 0000000000..171b2bd96b
--- /dev/null
+++ b/src/packages/quickenter/quickenter.tsx
@@ -0,0 +1,167 @@
+import React, { ForwardRefRenderFunction, useImperativeHandle } from 'react'
+import classNames from 'classnames'
+import { Close } from '@nutui/icons-react'
+import Popup from '@/packages/popup/index'
+import { ComponentDefaults } from '@/utils/typings'
+import { usePropsValue } from '@/hooks/use-props-value'
+import {
+  QuickEnterActions,
+  QuickEnterOption,
+  QuickEnterRef,
+  WebQuickEnterProps,
+} from '@/types'
+import Badge from '@/packages/badge/index'
+import { useConfig } from '@/packages/configprovider'
+
+const defaultProps = {
+  ...ComponentDefaults,
+  options: [],
+  visible: false,
+  closeOnOverlayClick: true,
+  safeAreaInsetTop: true,
+} as unknown as WebQuickEnterProps
+
+const InternalQuickEnter: ForwardRefRenderFunction<
+  QuickEnterRef,
+  Partial<WebQuickEnterProps>
+> = (props, ref) => {
+  const {
+    children,
+    visible,
+    title,
+    options = [],
+    closeOnOverlayClick,
+    popupProps = {},
+    className,
+    style,
+    onClose,
+    onChange,
+    closeIcon,
+    safeAreaInsetTop,
+    ...rest
+  } = { ...defaultProps, ...props }
+  const { locale } = useConfig()
+  const mergedTitle = title || locale.quickenter.title
+
+  const classPrefix = 'nut-quickenter'
+  const classes = classNames(classPrefix, className, {
+    'safe-area-top': safeAreaInsetTop,
+  })
+
+  const [innerVisible, setInnerVisible] = usePropsValue<boolean>({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false,
+    onChange: (v: boolean) => {
+      if (!v) {
+        props.onClose?.()
+      }
+    },
+  })
+
+  const actions: QuickEnterActions = {
+    open: () => {
+      setInnerVisible(true)
+    },
+    close: () => {
+      setInnerVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
+
+  const onCancelEvent = () => {
+    setInnerVisible(false)
+  }
+
+  const handleItemClick = (item: QuickEnterOption, index: number) => {
+    onChange?.(item, index)
+  }
+
+  const renderTitleBar = () => {
+    return (
+      <div className={`${classPrefix}-control`}>
+        <div className={`${classPrefix}-title`}>{mergedTitle}</div>
+        <div
+          className={`${classPrefix}-close-btn`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onCancelEvent()
+          }}
+        >
+          {closeIcon || <Close aria-label={locale.close} />}
+        </div>
+      </div>
+    )
+  }
+
+  const renderContent = () => {
+    return (
+      <div
+        className={classNames(`${classPrefix}-content`, {
+          [`${classPrefix}-content-scrollable`]: options.length > 8,
+        })}
+      >
+        <div className={`${classPrefix}-list`}>
+          {options.map((item, index) => (
+            <div
+              key={index}
+              className={`${classPrefix}-item`}
+              onClick={() => handleItemClick(item, index)}
+              aria-label={`${item.title} ${item.badge ?? item.badgeProps?.value}`}
+            >
+              <div className={`${classPrefix}-item-icon`} aria-hidden="true">
+                <Badge
+                  {...item.badgeProps}
+                  value={item.badge ?? item.badgeProps?.value}
+                >
+                  {item.icon}
+                </Badge>
+              </div>
+              <div className={`${classPrefix}-item-title`} aria-hidden="true">
+                {item.title}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  const renderQuickEnterElement = () => {
+    return (
+      <div className={classes} style={style} {...rest}>
+        {renderTitleBar()}
+        {children}
+        {renderContent()}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Popup
+        style={{
+          background: 'transparent',
+        }}
+        {...popupProps}
+        overlayStyle={{
+          background: 'transparent',
+        }}
+        visible={innerVisible}
+        position="top"
+        onOverlayClick={() => {
+          if (!closeOnOverlayClick) return
+          onCancelEvent()
+        }}
+        onClose={onCancelEvent}
+      >
+        {renderQuickEnterElement()}
+      </Popup>
+    </>
+  )
+}
+
+const QuickEnter = React.forwardRef<QuickEnterRef, Partial<WebQuickEnterProps>>(
+  InternalQuickEnter
+)
+export default QuickEnter
diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx
index 54a36dcfbf..5e94d1cf3c 100644
--- a/src/packages/range/range.taro.tsx
+++ b/src/packages/range/range.taro.tsx
@@ -2,19 +2,19 @@ import React, {
   FunctionComponent,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { Text, View } from '@tarojs/components'
+import { useReady, nextTick } from '@tarojs/taro'
 import { pxTransform } from '@/utils/taro/px-transform'
 import { useTouch } from '@/hooks/use-touch'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
-import { useRtl } from '../configprovider/index.taro'
+import { useRtl } from '@/packages/configprovider/index.taro'
 import { harmony } from '@/utils/taro/platform'
 import { TaroRangeProps, RangeValue } from '@/types'
 import { mergeProps } from '@/utils/merge-props'
@@ -286,13 +286,17 @@ export const Range: FunctionComponent<
     [innerValue, disabled, isRange, min, scope, updateValue, vertical]
   )
 
-  useLayoutEffect(() => {
-    if (root.current) {
-      getRectInMultiPlatform(root.current).then((rect) => {
+  useReady(() => {
+    const getRootRect = async () => {
+      if (root.current) {
+        const rect = await getRectInMultiPlatform(root.current)
         rootRect.current = rect
-      })
+      }
     }
-  }, [])
+    nextTick(() => {
+      getRootRect()
+    })
+  })
 
   const onTouchStart = useCallback(
     (event: any) => {
diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx
index a6a623a142..0b2fdfc2df 100644
--- a/src/packages/range/range.tsx
+++ b/src/packages/range/range.tsx
@@ -12,7 +12,7 @@ import { useTouch } from '@/hooks/use-touch'
 import { getRect } from '@/utils/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
-import { useRtl } from '../configprovider'
+import { useRtl } from '@/packages/configprovider'
 import { WebRangeProps, RangeValue } from '@/types'
 
 const defaultProps = {
diff --git a/src/packages/safearea/safearea.scss b/src/packages/safearea/safearea.scss
index b04bc6de3a..62b8722282 100644
--- a/src/packages/safearea/safearea.scss
+++ b/src/packages/safearea/safearea.scss
@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );
diff --git a/src/packages/safearea/safearea.taro.tsx b/src/packages/safearea/safearea.taro.tsx
index 9cb42c1336..714cb7a889 100644
--- a/src/packages/safearea/safearea.taro.tsx
+++ b/src/packages/safearea/safearea.taro.tsx
@@ -5,17 +5,12 @@ import { TaroSafeAreaProps } from '@/types'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<TaroSafeAreaProps> = (props) => {
-  const { className, style, position, ...rest } = props
-
   return (
     <View
-      {...rest}
       className={classNames(
         classPrefix,
-        `${classPrefix}-position-${position}`,
-        className
+        `${classPrefix}-position-${props.position}`
       )}
-      style={style}
     />
   )
 }
diff --git a/src/packages/safearea/safearea.tsx b/src/packages/safearea/safearea.tsx
index 2201ab47a1..f50e0969eb 100644
--- a/src/packages/safearea/safearea.tsx
+++ b/src/packages/safearea/safearea.tsx
@@ -4,17 +4,12 @@ import { WebSafeAreaProps } from '@/types'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<WebSafeAreaProps> = (props) => {
-  const { className, style, position, ...rest } = props
-
   return (
     <div
-      {...rest}
       className={classNames(
         classPrefix,
-        `${classPrefix}-position-${position}`,
-        className
+        `${classPrefix}-position-${props.position}`
       )}
-      style={style}
     />
   )
 }
diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index d5f24c9a68..f75711f74f 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -289,7 +289,6 @@ export const SearchBar: FunctionComponent<
           visibility: `${!innerTag && value && clearable ? 'visible' : 'hidden'}`,
         }}
         onClick={clearaVal}
-        aria-label="清除"
       >
         <MaskClose />
       </View>
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index a88e5832e5..bcb7a86589 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -175,6 +175,7 @@ export const SearchBar: FunctionComponent<
     const inputCls = classNames(`${classPrefix}-input`)
     return (
       <input
+        type="search"
         className={inputCls}
         ref={searchInputRef}
         value={value || ''}
@@ -215,7 +216,7 @@ export const SearchBar: FunctionComponent<
         ))}
       </div>
     )
-  }, [value, onItemClick])
+  }, [value, onItemClick, forceFocus])
 
   const renderLeftIn = useCallback(() => {
     if (!leftIn) return null
@@ -261,7 +262,6 @@ export const SearchBar: FunctionComponent<
       <div
         className={`${classPrefix}-clear ${classPrefix}-icon`}
         onClick={clearaVal}
-        aria-label="清除"
       >
         <MaskClose />
       </div>
diff --git a/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap b/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap
new file mode 100644
index 0000000000..57ace4ca5d
--- /dev/null
+++ b/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap
@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should change avatar shape when using avatarShape prop 1`] = `
+<div
+  class="nut-avatar nut-avatar-normal nut-avatar-square nut-avatar nut-skeleton-content-avatar avatar-square"
+  style="width: 50px; height: 50px; background-color: #eee; color: #666;"
+/>
+`;
+
+exports[`should change avatar size when using avatarSize prop 1`] = `
+<div>
+  <div
+    class="nut-skeleton"
+  >
+    <div
+      class="nut-skeleton-content"
+    >
+      <div
+        class="nut-avatar nut-avatar-normal nut-avatar-round nut-avatar-normal-round nut-avatar nut-skeleton-content-avatar avatar-round"
+        style="width: 20px; height: 20px; background-color: #eee; color: #666;"
+      />
+      <div
+        class="nut-skeleton-content-block"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx
index 8d5dc887e7..8ff06cabc1 100644
--- a/src/packages/swipe/swipe.taro.tsx
+++ b/src/packages/swipe/swipe.taro.tsx
@@ -4,15 +4,14 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { BaseEventOrig } from '@tarojs/components/types/common'
+import { createSelectorQuery, nextTick, useReady } from '@tarojs/taro'
 import { useTouch } from '@/hooks/use-touch'
-import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
 import { useRefState } from '@/hooks/use-ref-state'
@@ -20,10 +19,13 @@ import { useUuid } from '@/hooks/use-uuid'
 import { PositionX, SwipeRef, TaroSwipeProps } from '@/types'
 
 function preventDefault(event: any, isStopPropagation?: boolean): void {
-  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+  if (
+    event.preventDefault &&
+    (typeof event.cancelable !== 'boolean' || event.cancelable)
+  ) {
     event.preventDefault()
   }
-  if (isStopPropagation) {
+  if (isStopPropagation && event.stopPropagation) {
     event.stopPropagation()
   }
 }
@@ -52,6 +54,8 @@ export const Swipe = forwardRef<
   const opened = useRef(false)
   const lockClick = useRef(false)
   const startOffset = useRef(0)
+  const leftWrapper = useRef(null)
+  const rightWrapper = useRef(null)
 
   const [state, setState] = useState({
     offset: 0,
@@ -63,65 +67,65 @@ export const Swipe = forwardRef<
     right: 0,
   })
   const setActionWidth = useCallback(
-    (fn: any) => {
-      const res = fn()
-      if (res.left !== undefined) {
-        updateState({
-          ...actionWidth.current,
-          left: res.left,
-        })
-      }
-      if (res.right !== undefined) {
-        updateState({
-          ...actionWidth.current,
-          right: res.right,
-        })
-      }
+    (side: PositionX, width: number) => {
+      if (actionWidth.current[side] === width) return
+      updateState({
+        ...actionWidth.current,
+        [side]: width,
+      })
     },
     [actionWidth, updateState]
   )
 
-  // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-  useLayoutEffect(() => {
-    const getWidth = async () => {
-      if (leftWrapper.current) {
-        const leftRect = await getRectInMultiPlatform(
-          leftWrapper.current,
-          leftId
-        )
-        leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
-      }
-      if (rightWrapper.current) {
-        const rightRect = await getRectInMultiPlatform(
-          rightWrapper.current,
-          rightId
-        )
-        rightRect &&
-          setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+  const getActionRect = (element: any, id: string) => {
+    return new Promise<any>((resolve) => {
+      if (!element) {
+        resolve(null)
+        return
       }
+
+      const query = createSelectorQuery()
+      const scope = element?._scope
+      const scopedQuery = scope ? query.in(scope) : query
+      scopedQuery
+        .select(`#${id}`)
+        .boundingClientRect()
+        .exec((rect = []) => {
+          resolve(rect[0] || null)
+        })
+    })
+  }
+
+  const getWidth = useCallback(async () => {
+    if (props.leftAction) {
+      const leftRect = await getActionRect(leftWrapper.current, leftId)
+      leftRect && setActionWidth('left', leftRect.width)
+    }
+    if (props.rightAction) {
+      const rightRect = await getActionRect(rightWrapper.current, rightId)
+      rightRect && setActionWidth('right', rightRect.width)
     }
+  }, [leftId, props.leftAction, props.rightAction, rightId, setActionWidth])
 
-    getWidth()
-  }, [leftId, rightId, setActionWidth])
+  const getWidthRef = useRef(getWidth)
+  useEffect(() => {
+    getWidthRef.current = getWidth
+  }, [getWidth])
+
+  // 页面 ready 后测量操作区域宽度，宽度未变化时不触发更新。
+  useReady(() => {
+    nextTick(() => {
+      getWidthRef.current()
+    })
+  })
 
   const wrapperStyle = {
     transform: `translate(${state.offset}${!harmony() ? 'px' : ''}, 0)`,
     transitionDuration: state.dragging ? '0s' : '.6s',
   }
   const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
-    if (leftWrapper.current) {
-      const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
-      leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
-    }
-    if (rightWrapper.current) {
-      const rightRect = await getRectInMultiPlatform(
-        rightWrapper.current,
-        rightId
-      )
-      rightRect &&
-        setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
-    }
     if (!props.disabled) {
+      getWidth()
       startOffset.current = state.offset
       touch.start(event)
       props.onTouchStart?.(event)
@@ -203,8 +207,6 @@ export const Swipe = forwardRef<
     return Math.min(Math.max(Number(num), Number(min)), Number(max))
   }
 
-  const leftWrapper = useRef(null)
-  const rightWrapper = useRef(null)
   const renderActionContent = (side: PositionX) => {
     if (props[`${side}Action`]) {
       return (
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index f259c6a6ac..7fcc4dbef1 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -48,6 +48,7 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
   } = { ...defaultProps, ...props }
 
   const uuid = useUuid()
+  const tabsRef = useRef<any>(null)
 
   const [value, setValue] = usePropsValue<string | number>({
     value: outerValue,
@@ -103,7 +104,10 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
 
   const getRect = (selector: string) => {
     return new Promise((resolve) => {
-      createSelectorQuery()
+      const query = createSelectorQuery()
+      const scope = tabsRef.current?._scope
+      const scopedQuery = scope ? query.in(scope) : query
+      scopedQuery
         .select(selector)
         .boundingClientRect()
         .exec((rect = []) => {
@@ -113,7 +117,10 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
   }
   const getAllRect = (selector: string) => {
     return new Promise((resolve) => {
-      createSelectorQuery()
+      const query = createSelectorQuery()
+      const scope = tabsRef.current?._scope
+      const scopedQuery = scope ? query.in(scope) : query
+      scopedQuery
         .selectAll(selector)
         .boundingClientRect()
         .exec((rect = []) => {
@@ -229,7 +236,7 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
   }
 
   return (
-    <View className={classes} {...rest}>
+    <View className={classes} ref={tabsRef} {...rest}>
       <ScrollView
         enableFlex
         scrollX={direction === 'horizontal'}
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index 5d00287a09..27c324b79d 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -30,7 +30,7 @@
   }
 
   &-primary {
-    background: $tag-primary-background-color;
+    background: #fa2c19;
   }
 
   &-info {
diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
index c974254c97..f473cfb4ea 100644
--- a/src/packages/textarea/textarea.tsx
+++ b/src/packages/textarea/textarea.tsx
@@ -48,7 +48,6 @@ export const TextArea = forwardRef(
       style,
       plain,
       status,
-      viewId,
       onChange,
       onBlur,
       onFocus,
@@ -119,7 +118,6 @@ export const TextArea = forwardRef(
     return (
       <>
         <div
-          id={viewId}
           className={classNames(
             classPrefix,
             {
diff --git a/src/packages/uploader/__tests__/uploader.spec.tsx b/src/packages/uploader/__tests__/uploader.spec.tsx
index 3ae2319869..fc085a13b0 100644
--- a/src/packages/uploader/__tests__/uploader.spec.tsx
+++ b/src/packages/uploader/__tests__/uploader.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor, act } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { Uploader } from '../uploader'
@@ -275,12 +275,9 @@ test('simulates single file upload', async () => {
   })
   const input: any = container.querySelector('input')
 
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [file] } })
-  })
-  await waitFor(() => {
-    expect(handleUpload).toHaveBeenCalledTimes(1)
-  })
+  await fireEvent.change(input, { target: { files: [file] } })
+
+  expect(handleUpload).toHaveBeenCalledTimes(1)
   expect(handleUpload).toHaveBeenCalledWith(file)
 })
 test('simulates single file upload fail', async () => {
@@ -295,12 +292,9 @@ test('simulates single file upload fail', async () => {
   })
   const input: any = container.querySelector('input')
 
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [file] } })
-  })
-  await waitFor(() => {
-    expect(handleUpload).toHaveBeenCalledTimes(1)
-  })
+  await fireEvent.change(input, { target: { files: [file] } })
+
+  expect(handleUpload).toHaveBeenCalledTimes(1)
   expect(handleUpload).toHaveBeenCalledWith(file)
   await expect(handleUpload()).rejects.toThrow('Upload failed')
 })
@@ -327,12 +321,9 @@ test('simulates multiple file upload', async () => {
   const files = [file1, file2, file3]
   const input: any = container.querySelector('input')
 
-  await act(async () => {
-    fireEvent.change(input, { target: { files } })
-  })
-  await waitFor(() => {
-    expect(handleUpload).toHaveBeenCalledTimes(2)
-  })
+  await fireEvent.change(input, { target: { files } })
+
+  expect(handleUpload).toHaveBeenCalledTimes(2)
   expect(handleOverCount).toHaveBeenCalledTimes(1)
   expect(handleOverCount).toHaveBeenCalledWith(3)
 })
@@ -359,13 +350,9 @@ test('simulates file upload when autoupload is false', async () => {
   })
   const files = [file1, file2, file3]
   const input: any = container.querySelector('input')
-  await act(async () => {
-    fireEvent.change(input, { target: { files } })
-  })
-  await waitFor(() => {
-    expect(handleOverCount).toHaveBeenCalledTimes(1)
-  })
+  await fireEvent.change(input, { target: { files } })
   expect(handleUpload).toHaveBeenCalledTimes(0)
+  expect(handleOverCount).toHaveBeenCalledTimes(1)
   expect(handleOverCount).toHaveBeenCalledWith(3)
 })
 test('should render button', () => {
@@ -534,30 +521,18 @@ test('should handle beforeUpload function', async () => {
   const input: any = container.querySelector('input')
 
   // 测试单个 PNG 文件上传
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [pngFile] } })
-  })
-  await waitFor(() => {
-    expect(beforeUpload).toHaveBeenCalledTimes(1)
-  })
+  await fireEvent.change(input, { target: { files: [pngFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(1)
   expect(handleUpload).toHaveBeenCalledWith(pngFile)
 
   // 测试单个 JPG 文件被过滤
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [jpgFile] } })
-  })
-  await waitFor(() => {
-    expect(beforeUpload).toHaveBeenCalledTimes(2)
-  })
+  await fireEvent.change(input, { target: { files: [jpgFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(2)
   expect(handleUpload).not.toHaveBeenCalledWith(jpgFile)
 
   // 测试多文件上传时的过滤
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [pngFile, jpgFile] } })
-  })
-  await waitFor(() => {
-    expect(beforeUpload).toHaveBeenCalledTimes(3)
-  })
+  await fireEvent.change(input, { target: { files: [pngFile, jpgFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(3)
   expect(handleUpload).toHaveBeenCalledTimes(2) // 只有 PNG 文件被上传
 })
 
@@ -577,11 +552,8 @@ test('should handle beforeUpload returning empty array', async () => {
   })
 
   const input: any = container.querySelector('input')
-  await act(async () => {
-    fireEvent.change(input, { target: { files: [file] } })
-  })
-  await waitFor(() => {
-    expect(beforeUpload).toHaveBeenCalled()
-  })
+  await fireEvent.change(input, { target: { files: [file] } })
+
+  expect(beforeUpload).toHaveBeenCalled()
   expect(handleUpload).not.toHaveBeenCalled()
 })
diff --git a/src/styles/jd-font.scss b/src/styles/jd-font.scss
index 52a4deb921..099f3285aa 100644
--- a/src/styles/jd-font.scss
+++ b/src/styles/jd-font.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'JDZH-Regular';
-  src: url('data:font/ttf;charset=utf-8;base64,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FxYXByYnLgInARYzMj4BNxcGBCMiJwcnNyYCAS2YAetNUUaFgGA6y64BOcmJcY62lC4oNS6wHDIDCgoE/hVPUlihkymwVP6/0IV5arRue4cCk/7qmAPJGSRWfsR43wFdwisBGVz+3SUxPWFmRD8DCwkE/DUbN4VjZLbQMNFc22cBPgAAAAEAnv97BNUFkQAWAAABFSEVIRUhESMRITUhNSE1IQEzCQEzAQS0/mcBmf5nwf5nAZn+ZwFP/o7TAUkBStH+jwMSrMis/okBd6zIrAJ//ccCOf2BAAIAtgF5BEID+AADAAcAABMhFSERNSEVtgOM/HQDjAP4tv43tLQAAAAAABsBSgABAAAAAAAAADIAZgABAAAAAAABAAUArQABAAAAAAACAAcAwwABAAAAAAADABsBAwABAAAAAAAEAAQBNQABAAAAAAAFACEBfgABAAAAAAAGABABwgABAAAAAAAJAAAB2QABAAAAAAAQAAUB7gABAAAAAAARAAcCBAADAAEECQAAAGQAAAADAAEECQABABIAmQADAAEECQACAA4AswADAAEECQADADYAywADAAEECQAEABQBHwADAAEECQAFAEIBOgADAAEECQAGACABoAADAAEECQAJAAQB0wADAAEECQAQABIB2gADAAEECQARAA4B9AADAAEIBAAAAGQCDAADAAEIBAABABICcgADAAEIBAACAA4ChgADAAEIBAAEABQClgADAAEIBAAHAE4CrAADAAEIBAAQABIC/AADAAEIBAARAA4DEABDAG8AcAB5AHIAaQBnAGgAdAAoAGMAKQAgACAAQgBFAEkASgBJAE4ARwAgAEoASQBOAEcARABPAE4ARwAgAFQARQBDAEgATgBPAEwATwBHAFkAIABDAE8ALgAsACAATABUAEQAAENvcHlyaWdodChjKSAgQkVJSklORyBKSU5HRE9ORyBURUNITk9MT0dZIENPLiwgTFREAE6sThxrY57RACAAVgAyAC4AMwAAIFYyLjMAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAADIALgAwADAAMAA7AFUASwBXAE4AOwBKAEQAWgBIAFYAMgAuADMAXwBSAGUAZwB1AGwAYQByAAAyLjAwMDtVS1dOO0pEWkhWMi4zX1JlZ3VsYXIATqxOHGtjntEAVgAyAC4AM144icQAAFYyLjMAAFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADAAOwBHAGwAeQBwAGgAcwAgADMALgAxAC4AMQAgACgAMwAxADMANQApAABWZXJzaW9uIDIuMDAwO0dseXBocyAzLjEuMSAoMzEzNSkAAEoARABaAEgAVgAyAC4AMwBfAFIAZQBnAHUAbABhAHIAAEpEWkhWMi4zX1JlZ3VsYXIAlnZ0PAAAAE6sThxrY57RACAAVgAyAC4AMwAAIFYyLjMAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEMAbwBwAHkAcgBpAGcAaAB0ACgAYwApACAAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAATqxOHGtjntEAIABWADIALgAzAAAAUgBlAGcAdQBsAGEAcgAATqxOHGtjntEAVgAyAC4AM144icQAAABCAHkAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAATqxOHGtjntEAIABWADIALgAzAAAAUgBlAGcAdQBsAGEAcgAAAAAAAgAAAAAAAP8AAGYAAAAAAAAAAAAAAAAAAAAAAAAAAAArAAAAAQACAAMABAAHAAgACwAMAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAgAIQAhQCWALYAtwC0ALUBAgEDAQQBBQEGAQcBCAEJAQoERXVybwd1bmkzMDEwB3VuaTMwMTEHdW5pNTE0Mwd1bmlGRjA0B3VuaUZGRTAHdW5pRkZFNQlzcGFjZS4wMDEJZXF1YWwuMDAxAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMAKgABAAQAAAACAAAAAAAAAAEAAAAA4p8rRgAAAADksiOUAAAAAOUAJYs=')
+  src: url('data:font/ttf;charset=utf-8;base64,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')
     format('truetype');
   font-weight: 400;
   font-style: normal;
@@ -8,7 +8,7 @@
 }
 @font-face {
   font-family: 'JDZH-Bold';
-  src: url('data:font/ttf;charset=utf-8;base64,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NDc2JDMyFxMfAQMWFxYXByYnJicBFjMyNgGNPToBtCRAn2VjYANY6Fj+s9R0cWntbHyGXF0BSNB1bI4W15EWNTsm5hcaBA7+Sjouk8kCk2e+QwNaCElI4/56hbTLI8131WkBO77isLDDHwEUDG3+5BM1R06FMxwNDvykCoQAAAAAAQCm/3sFiwXjABYAAAEhFSEVIREhESE1ITUhNSEBIQkBIQEhBVz+QgG+/kL+9f5CAb7+QgFG/osBMwFAAT0BNf6JAUgCYoX8/poBZvyF/AKF/dkCJ/17AAIA+AFOBIMEIwADAAcAABMhFSERNSEV+AOL/HUDiwQj+v4l/PwAAAAAABsBSgABAAAAAAAAADIAZgABAAAAAAABAAoAtwABAAAAAAACAAcA0gABAAAAAAADABgBDAABAAAAAAAEAAQBOwABAAAAAAAFACEBhAABAAAAAAAGAA0BwgABAAAAAAAJAAAB1gABAAAAAAAQAAUB6wABAAAAAAARAAQB+wADAAEECQAAAGQAAAADAAEECQABABwAmQADAAEECQACAA4AwgADAAEECQADADAA2gADAAEECQAEABQBJQADAAEECQAFAEIBQAADAAEECQAGABoBpgADAAEECQAJAAQB0AADAAEECQAQABIB1wADAAEECQARAAgB8QADAAEIBAAAAGQCAAADAAEIBAABABwCZgADAAEIBAACAA4ChAADAAEIBAAEABQClAADAAEIBAAHAE4CqgADAAEIBAAQABIC+gADAAEIBAARAAgDDgBDAG8AcAB5AHIAaQBnAGgAdAAoAGMAKQAgACAAQgBFAEkASgBJAE4ARwAgAEoASQBOAEcARABPAE4ARwAgAFQARQBDAEgATgBPAEwATwBHAFkAIABDAE8ALgAsACAATABUAEQAAENvcHlyaWdodChjKSAgQkVJSklORyBKSU5HRE9ORyBURUNITk9MT0dZIENPLiwgTFREAE6sThxrY57RACAAVgAyAC4AMwAgAEIAbwBsAGQAACBWMi4zIEJvbGQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAADIALgAwADAAMAA7AFUASwBXAE4AOwBKAEQAWgBIAFYAMgAuADMAXwBCAG8AbABkAAAyLjAwMDtVS1dOO0pEWkhWMi4zX0JvbGQATqxOHGtjntEAVgAyAC4AM3yXT1MAAFYyLjMAAFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADAAOwBHAGwAeQBwAGgAcwAgADMALgAxAC4AMQAgACgAMwAxADMANQApAABWZXJzaW9uIDIuMDAwO0dseXBocyAzLjEuMSAoMzEzNSkAAEoARABaAEgAVgAyAC4AMwBfAEIAbwBsAGQAAEpEWkhWMi4zX0JvbGQAlnZ0PAAAAE6sThxrY57RACAAVgAyAC4AMwAAIFYyLjMAAEIAbwBsAGQAAEJvbGQAAEMAbwBwAHkAcgBpAGcAaAB0ACgAYwApACAAIABCAEUASQBKAEkATgBHACAASgBJAE4ARwBEAE8ATgBHACAAVABFAEMASABOAE8ATABPAEcAWQAgAEMATwAuACwAIABMAFQARAAATqxOHGtjntEAIABWADIALgAzACAAQgBvAGwAZAAAAFIAZQBnAHUAbABhAHIAAE6sThxrY57RAFYAMgAuADN8l09TAAAAQgB5ACAAQgBFAEkASgBJAE4ARwAgAEoASQBOAEcARABPAE4ARwAgAFQARQBDAEgATgBPAEwATwBHAFkAIABDAE8ALgAsACAATABUAEQAAE6sThxrY57RACAAVgAyAC4AMwAAAEIAbwBsAGQAAAAAAAIAAAAAAAD/NABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAKwAAAAEAAgADAAQABwAIAAsADAAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AIACEAIUAlgC2ALcAtAC1AQIBAwEEAQUBBgEHAQgBCQEKBEV1cm8HdW5pMzAxMAd1bmkzMDExB3VuaTUxNDMHdW5pRkYwNAd1bmlGRkUwB3VuaUZGRTUJc3BhY2UuMDAxCWVxdWFsLjAwMQAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADACoAAQAEAAAAAgAAAAAAAAABAAAAAOKfK0YAAAAA5LIkawAAAADlACWL')
+  src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTaz9XRwAABfoAAAAHEdERUYAKQAxAAAXyAAAAB5PUy8ye0Z5QwAAAVgAAABgY21hcJYMZX8AAAJkAAABumdhc3D//wADAAAXwAAAAAhnbHlmjqz34gAABHgAAA4gaGVhZDHYQQMAAADcAAAANmhoZWER0QcTAAABFAAAACRobXR4tkoSNAAAAbgAAACsbG9jYUQsR+4AAAQgAAAAWG1heHAAcgA/AAABOAAAACBuYW1lWs1uiwAAEpgAAARicG9zdLLEUesAABb8AAAAwQABAAAAAgAAfhfY4V8PPPUACwgAAAAAAOTTNNYAAAAA5g/BvwAv/scHpgaqAAAACAACAAAAAAAAAAEAAAb2/s0DMwgaAAAAAAemAAEAAAAAAAAAAAAAAAAAAAArAAEAAAArADwABQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAABARYArwABQAABTMEzQAAAJoFMwTNAAACzQBmAo8AAAAAAAAAAAAAAAAAAAADCAAAAAAAABAAAAAAVUtXTgDAACD/5Qb2/s0DMwiPATMAAAABAAAAAATNBfYAAAAgAAEERwAAAAAAAAKqAAABmQAAAcgAQgV8AIEGbAAvApcAQwKXADsFfAD4AcgAXgOTAIsBzgBgA5MAQgU3AFgDhQBCBTcAiwU3AIMFNwBGBTcAgwU3AGoFNwCRBTcAWgU3AGoByABeAcgAXgV8APgGTwCDBXwAbwY1AKYByABeAcgAXgOTAHMDkwBxBXwAWARLANUESwD6CBoAXAV8AIEGTwCDBjUApgTMAAAFfAD4AAAAAwAAAAMAAAAcAAEAAAAAALQAAwABAAAAHAAEAJgAAAAiACAABAACACEAJQApADsAPQCgAKMApSAZIB0grDARUUP/BP/g/+X//wAAACAAJAAoACsAPQCgAKIApSAYIBwgrDAQUUP/BP/g/+X////j/+H/3//e/93/Y/95/3jgBuAE33bQE67iASIARwBDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAADBAAABQYAAAcIAAkKCwwNDg8QERITFBUWFxgZABoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGxwAAAAAAAAAAAAAAAAAAAAAHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAICEeHwAAAAAAIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAyAJQA3gECASYBQAFgAW4BiAGYAdgB7AIaAk4CbgKoAuYC+gNEA4QDtAPoA/wEUASIBLQE1AT0BS4FaAWqBcIF2gYaBnwG0Ab8BvwHEAACAEL/ewGIBfYADwAfAAABMjY1EzYmKwEiBhUTFBYzAxQWOwEyNj0BNCYrASIGFQElHSgdASgeux0oHCkdRCkdfR0qKh19HSkBACcbBG4dKSkd+5IbJ/7BHSkpHX4dKSkdAAAAAwCB/scE/gaqAAgAMQA7AAAlPgE1NC8BJicBNBI3NSEVHgEXByYvASYnERYXFhUUAgcVITUuASc3FhcWFxEmJyYnJiUUFxYXFhcRDgEDRE5gRAg+JP0988UBC5LdLOENJhUvQ9BIovTG/vWU3SzbLCgrQ5ZDSh53AQorByYpLU9fnhlkOUE+BiANAhugAQEnwcEfrHaBJCwYLxf+Sj5Fib+h/v8nxMQdrnl/SCUrFgG2MiwwHn2iNy4HFxkSAWQZYgAAAAUAL/97Bj0F9gADAA8AFwAlAC0AAAEhASEDNDYzMhYVFAYjIiY2FBYyNjQmIgE0NiAWFRQHDgEiJicmNhQWMjY0JiIESAEr/LT+1c3CiofFwYuOvuU+Uj8/UgJUwgEUwUEti6SMLUHlPlI/P1IF9vmFBQyZ1tGemtTbyWxPT2xR+9uZ1tWaemFFTk5FYbBsT09sUgABAEP/GQJcBlgADwAABSYKARoBNyEGBw4BAhoBFwEva3AROmdLAS1cWCUpAi94XefRAawBeAF5ATiZlv9s9P7W/tL+rZ8AAAABADv/GQJSBlgADwAABTYaAQoBJyEWFx4BEgoBBwFqaW8QOWVK/tFeVyUpAjB4XefRAawBdgF7ATeamvts8/7V/tP+raAAAAABAPgA8gSDBH0ACwAAAREhESE1IREhESEVA0T+9f6/AUEBCwE/Ajv+twFJ+gFI/rj6AAAAAQBe/uEBaAEKABIAACUUBgcnNjcjIiY9ATQ2OwEyFhUBaFZRVEMpNR0pKR1/HSgvPsNNWEN0KB2QHSgoHQAAAAEAiwI7AwoDNQADAAABFSE1Awr9gQM1+voAAAABAGD/ewFqAIUADwAABTI2PQE0JisBIgYdARQWMwElHSgoHX8dKSkdhSkdfh0pKR1+HSkAAQBC/3sDVAX2AAMAAAEhASECPQEX/gT+6gX2+YUAAAACAFj/ZATfBgoADwApAAABMhcWERAHBiMiJyYREDc2ARQXHgMzMjc2ETQuBSIOBQKchFlaWlmEhlhaWlj+QisWU4G8c+uD1RAnPFx2n76gdV08JxAFAIGD/rz+u4OBgYMBRQFEg4H9uLe5Y6mKTpL0Ac5cqa2SgVk0NFmBkq2qAAEAQv97ArQF9gAGAAATESUhESERQgFiARD+9gPwASff+YUFVgAAAAABAIv/ewS6BgoAGQAAAT4BNzYmIyIGByc2JDMyFxYSFQYHASEVITUC7jVbBw2fcGuTBvQzARmskXd7jQPe/pgCcPvRAsk4nUNqoX1jjqLOSUr/AJje7/5j+pEAAAEAg/9mBMkF9gAdAAABFgAVFAIEIyIkJzceATMyNjU0JiMiBy8BASE1IRUC6dABEJz+9J6j/u1K5SeYXIW2toVmVm1UAbT+FwOJA6oj/s/Lkv8Ak6CHh0pZo3d4pTtsVgHN+sUAAAAAAgBG/3sE3QX2AAIADQAAAREBBTUBIREzFSMRIREDBv6J/rcCfwFcvLz+5QHjAnX9ifXXBDP77/n+jwFxAAAAAAEAg/9kBMsF9gAiAAABMhcWEhUUBwYEIyIkJzceATMyNjU0JiMiBgcvARMhFSEDNgKFn4aGm05O/vOdov7sTOcnmVuAvLeFQ3srBuJeA2v9gydZA8tMS/79mZWEg5ilioZMXKl+faw2LwSDAxP8/rYbAAAAAgBq/2QEzQX2AA0AIwAAJTI2NTQmIyIGBwYVFBYBNDc2NwEhATcyFx4BEAcGBCMiJy4BApx8qa53YJwdDqn+TBklMQG0ATT+ri2UhIKXTEz+/peWgYKYcZ91dp9sVTchbqIBDFpQdlkDAP2sAkhK+v7afX6TSEr2AAAAAAEAkf97BKgF9gAGAAABITUhFQEhA2/9IgQX/eH+5gT6/JL6FwAAAAADAFr/ZATfBgoACgAkAC8AACUyNjQmIyIGFRQWATQ2NyY1ND4BIB4BFRQHHgEVFAYEIyInLgEBFBYzMjY0JiMiBgKch7Kyh4Wztv5Ab2SLh+kBFOqIjGRvnP72nZ6DhpsBUo5iZI2NZGONUKTco6Nuc58BIXjSS4W0ftN6etN+s4ZL0niN9IxGSPMDb1h9fbB7fAAAAgBq/3kE1QYKAA0AJAAAARQWMzI2NzY1NCYjIgYAEDc2JDMyFxYSBwYHBgcBIQEGIyInJgF1qX5hmh0NrHl7rP71TEsBBJebh4aRCgYTGT3+TP7NAVQKI5eCggPscaRrVjIkc5+i/vsBJn19kU5P/veZTzJlavz+AlYCSkkAAAACAF4A3wFoBJEADwAfAAABMjY9ATQmKwEiBh0BFBYzAxQWOwEyNj0BNCYrASIGFQEjHSgoHX0eKisdSCsdfR0oKB19HioDhyoefR0oKB19HSv9nh0pKR1/HSgoHQAAAAACAF7/wQFoBJEAEgAiAAABMhYdARQGByc2NyMiJj0BNDYzAzU0NjsBMhYdARQGKwEiJgEjHShTUlZKIjMeKioeSCoefR0oKB19HSsB6SgdkEPDTVpHbSgdkB0oAeZ9HSgoHX0eKisAAAIA+AFOBIMEIwADAAcAAAEVITURNSEVBIP8dQOLBCP6+v0r/PwAAAACAIP+5QXNBo0ACgAwAAABFBYXASYjIgcOAQU0NzYkMzIXEx8BAxYXFhcHJicmJwEWMzI2NxcGBCMiJwcnNyYCAY09OgG0JECfZWNg/vZcXQFI0HVsjhbXkRY1OybmFxoEDv5KOi6TyTXoWP6z1HRxae1sfIYCk2e+QwNaCElI44bisLDDHwEUDG3+5BM1R06FMxwNDvykCoR1hbTLI8131WkBOwAAAAABAG//cwUOBgcAJAAAFzUzMjY1ESM1MzU0PgE3NhYXFhcHJicmBw4BHQEhFSERFAchFW8CP1pwcI7piXDVVTwu5xkgX3RumQF//oEeAvyN+lo/AQz8wZn+kggHTE45UYUwHFUJCKp1wfz+9FJH+gAAAQCm/3sFiwXjABYAAAEVIRUhESERITUhNSE1IQEhCQEhASEVA54Bvv5C/vX+QgG+/kIBRv6LATMBQAE9ATX+iQFIAmKF/P6aAWb8hfwChf3ZAif9e/wAAAEAXgR/AWgGqgASAAABMhYdARQGKwEiJj0BNDY3FwYHASMdKCgdfR0rWU9WRSkFmikdjR4qKx2NQMxKWj93AAABAF4EfwFoBqoAEgAAARQGByc2NyMiJj0BNDY7ATIWFQFoU1JWSSMzHSsrHX0dKAXVQshMWkNzKR2PHSkpHQAAAgBzBH8DIwaqABIAJQAAATIWHQEUBisBIiY9ATQ2NxcGBwU1NDY3FwYHMzIWHQEUBisBIiYBNR0rKx19HShXT1ZGKQEZVlJTQyk1HSkpHX8dKAWaKR2NHSsqHo0/zEtaQHbTjUDKTFpAdikdjR0rKgAAAAACAHEEfwMjBqoAEgAlAAABFAYHJzY3IyImPQE0NjsBMhYVBTU0NjsBMhYdAQ4BByc2NyMiJgMjWU9WRSk1HSgoHX8dKf1OKB1/HSkGUVFUSyI2HSgF1UDMSlo/dykdjx0pKR2Pjx0pKR2PSsBMWkVxKQAAAAEAWP9mBSUGCgAsAAAlMjcXDgEjIi4DJyM1MyY0NyM1Mz4DMyATByYjIgMhFSEGFBchFSEeAQMrx0nqQfu+YqR4XTwSqpECApGqF1SDwXoBcIrqScfYRQFa/o4CAgFy/qgjlHH+iLbLOGGOpGLNF4IXz3vEmVP+gYf8/t/PEowSzZiKAAEA1f8bA1IGRAAJAAAFJicmEDc2NyERA1KWS0pKSZb9heXA4eMCHuPjwfjXAAAAAAEA+v8ZA3cGQgAJAAATFhcWEAcGByER/JVKSkpNlAJ9BkK+5OP94uPiwQcpAAAAAAIAXP8dB6YGJwADACUAAAE1IRUBFyQ3NhM1IREUMyEyNzYTJwYHBisBIjURITUhFSEVAgcGATsFmPmJaQFZmJwMAUbRAT1rOTsVsgYdFS/hTAIn+RcCBAx1egVqvb36V6R72fABiCX9Ddc/RAFWOfk8L1ICyr29Jf7JxLQAAAAAAwCB/scE/gaqAAgAMQA7AAAlPgE1NC8BJicBNBI3NSEVHgEXByYvASYnERYXFhUUAgcVITUuASc3FhcWFxEmJyYnJiUUFxYXFhcRDgEDRE5gRAg+JP0988UBC5LdLOENJhUvQ9BIovTG/vWU3SzbLCgrQ5ZDSh53AQorByYpLU9fnhlkOUE+BiANAhugAQEnwcEfrHaBJCwYLxf+Sj5Fib+h/v8nxMQdrnl/SCUrFgG2MiwwHn2iNy4HFxkSAWQZYgAAAAIAg/7lBc0GjQAKADAAAAEUFhcBJiMiBw4BBTQ3NiQzMhcTHwEDFhcWFwcmJyYnARYzMjY3FwYEIyInByc3JgIBjT06AbQkQJ9lY2D+9lxdAUjQdWyOFteRFjU7JuYXGgQO/ko6LpPJNehY/rPUdHFp7Wx8hgKTZ75DA1oISUjjhuKwsMMfARQMbf7kEzVHToUzHA0O/KQKhHWFtMsjzXfVaQE7AAAAAAEApv97BYsF4wAWAAABFSEVIREhESE1ITUhNSEBIQkBIQEhFQOeAb7+Qv71/kIBvv5CAUb+iwEzAUABPQE1/okBSAJihfz+mgFm/IX8AoX92QIn/Xv8AAACAPgBTgSDBCMAAwAHAAABFSE1ETUhFQSD/HUDiwQj+vr9K/z8AAAAAAAbAUoAAQAAAAAAAAAyAGYAAQAAAAAAAQAKALcAAQAAAAAAAgAHANIAAQAAAAAAAwAYAQwAAQAAAAAABAAEATsAAQAAAAAABQAhAYQAAQAAAAAABgANAcIAAQAAAAAACQAAAdYAAQAAAAAAEAAFAesAAQAAAAAAEQAEAfsAAwABBAkAAABkAAAAAwABBAkAAQAcAJkAAwABBAkAAgAOAMIAAwABBAkAAwAwANoAAwABBAkABAAUASUAAwABBAkABQBCAUAAAwABBAkABgAaAaYAAwABBAkACQAEAdAAAwABBAkAEAASAdcAAwABBAkAEQAIAfEAAwABCAQAAABkAgAAAwABCAQAAQAcAmYAAwABCAQAAgAOAoQAAwABCAQABAAUApQAAwABCAQABwBOAqoAAwABCAQAEAASAvoAAwABCAQAEQAIAw4AQwBvAHAAeQByAGkAZwBoAHQAKABjACkAIAAgAEIARQBJAEoASQBOAEcAIABKAEkATgBHAEQATwBOAEcAIABUAEUAQwBIAE4ATwBMAE8ARwBZACAAQwBPAC4ALAAgAEwAVABEAABDb3B5cmlnaHQoYykgIEJFSUpJTkcgSklOR0RPTkcgVEVDSE5PTE9HWSBDTy4sIExURABOrE4ca2Oe0QAgAFYAMgAuADMAIABCAG8AbABkAAAgVjIuMyBCb2xkAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAAyAC4AMAAwADAAOwBVAEsAVwBOADsASgBEAFoASABWADIALgAzAF8AQgBvAGwAZAAAMi4wMDA7VUtXTjtKRFpIVjIuM19Cb2xkAE6sThxrY57RAFYAMgAuADN8l09TAABWMi4zAABWAGUAcgBzAGkAbwBuACAAMgAuADAAMAAwADsARwBsAHkAcABoAHMAIAAzAC4AMQAuADEAIAAoADMAMQAzADUAKQAAVmVyc2lvbiAyLjAwMDtHbHlwaHMgMy4xLjEgKDMxMzUpAABKAEQAWgBIAFYAMgAuADMAXwBCAG8AbABkAABKRFpIVjIuM19Cb2xkAJZ2dDwAAABOrE4ca2Oe0QAgAFYAMgAuADMAACBWMi4zAABCAG8AbABkAABCb2xkAABDAG8AcAB5AHIAaQBnAGgAdAAoAGMAKQAgACAAQgBFAEkASgBJAE4ARwAgAEoASQBOAEcARABPAE4ARwAgAFQARQBDAEgATgBPAEwATwBHAFkAIABDAE8ALgAsACAATABUAEQAAE6sThxrY57RACAAVgAyAC4AMwAgAEIAbwBsAGQAAABSAGUAZwB1AGwAYQByAABOrE4ca2Oe0QBWADIALgAzfJdPUwAAAEIAeQAgAEIARQBJAEoASQBOAEcAIABKAEkATgBHAEQATwBOAEcAIABUAEUAQwBIAE4ATwBMAE8ARwBZACAAQwBPAC4ALAAgAEwAVABEAABOrE4ca2Oe0QAgAFYAMgAuADMAAABCAG8AbABkAAAAAAACAAAAAAAA/wAAZgAAAAAAAAAAAAAAAAAAAAAAAAAAACsAAAABAAIAAwAEAAcACAALAAwADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeACAAhACFAJYAtgC3ALQAtQECAQMBBAEFAQYBBwEIAQkBCgRFdXJvB3VuaTMwMTAHdW5pMzAxMQd1bmk1MTQzB3VuaUZGMDQHdW5pRkZFMAd1bmlGRkU1CXNwYWNlLjAwMQllcXVhbC4wMDEAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAqAAEABAAAAAIAAAAAAAAAAQAAAADiGmaGAAAAAOTTNNYAAAAA5g/Bvw==')
     format('truetype');
   font-weight: 700;
   font-style: normal;
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index 74c0b90efa..ad8ff1248f 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -260,8 +260,7 @@ page {
   // 标准内容、名称类关键信息
   --nutui-font-size-base: var(--nutui-font-size-14);
   // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
-  --nutui-font-size-l: var(--nutui-font-size-15);
-  --nutui-font-size-icon: var(--nutui-font-size-16);
+  --nutui-font-size-l: var(--nutui-font-size-16);
   // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
   --nutui-font-size-xl: var(--nutui-font-size-18);
   // 数字：页面级主价格，如商详、收银台
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index fc4776d512..cc8e386609 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2721,3 +2721,44 @@ $resultpage-actions-margin-top: var(
   --nutui-resultpage-actions-margin-top,
   21px
 ) !default;
+
+// quickenter
+$quickenter-bg-color: var(--nutui-quickenter-bg-color, #f5f5f5) !default;
+$quickenter-max-height: var(--nutui-quickenter-max-height, 256px) !default;
+$quickenter-title-font-size: var(
+  --nutui-quickenter-title-font-size,
+  $font-size-base
+) !default;
+$quickenter-title-color: var(
+  --nutui-quickenter-title-color,
+  $color-title
+) !default;
+$quickenter-item-title-font-size: var(
+  --nutui-quickenter-item-title-font-size,
+  $font-size-s
+) !default;
+$quickenter-item-title-color: var(
+  --nutui-quickenter-item-title-color,
+  $color-title
+) !default;
+$quickenter-item-icon-bg-color: var(
+  --nutui-quickenter-item-icon-bg-color,
+  $white
+) !default;
+$quickenter-item-icon-color: var(
+  --nutui-quickenter-item-icon-color,
+  $color-title
+) !default;
+$quickenter-close-icon-size: var(
+  --nutui-quickenter-close-icon-size,
+  12px
+) !default;
+$quickenter-close-icon-color: var(
+  --nutui-quickenter-close-icon-color,
+  #808080
+) !default;
+$quickenter-box-shadow: var(
+  --nutui-quickenter-box-shadow,
+  0px 8px 16px rgba(141, 153, 167, 0.2),
+  0px -0.5px 0px rgba(0, 0, 0, 0.05) inset
+) !default;
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 1a7cf3fc79..8c51b238a3 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2775,3 +2775,44 @@ $resultpage-actions-margin-top: var(
   --nutui-resultpage-actions-margin-top,
   21px
 ) !default;
+
+// quickenter
+$quickenter-bg-color: var(--nutui-quickenter-bg-color, #f5f5f5) !default;
+$quickenter-max-height: var(--nutui-quickenter-max-height, 256px) !default;
+$quickenter-title-font-size: var(
+  --nutui-quickenter-title-font-size,
+  $font-size-base
+) !default;
+$quickenter-title-color: var(
+  --nutui-quickenter-title-color,
+  $color-title
+) !default;
+$quickenter-item-title-font-size: var(
+  --nutui-quickenter-item-title-font-size,
+  $font-size-s
+) !default;
+$quickenter-item-title-color: var(
+  --nutui-quickenter-item-title-color,
+  $color-title
+) !default;
+$quickenter-item-icon-bg-color: var(
+  --nutui-quickenter-item-icon-bg-color,
+  $white
+) !default;
+$quickenter-item-icon-color: var(
+  --nutui-quickenter-item-icon-color,
+  $color-title
+) !default;
+$quickenter-close-icon-size: var(
+  --nutui-quickenter-close-icon-size,
+  12px
+) !default;
+$quickenter-close-icon-color: var(
+  --nutui-quickenter-close-icon-color,
+  #808080
+) !default;
+$quickenter-box-shadow: var(
+  --nutui-quickenter-box-shadow,
+  0px 8px 16px rgba(141, 153, 167, 0.2),
+  0px -0.5px 0px rgba(0, 0, 0, 0.05) inset
+) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 81c738928e..3bb38d962b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1078,7 +1078,7 @@ $overlay-animation-duration: var(
 //popup（✅）
 $popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default;
 $popup-icon-size: var(--nutui-popup-icon-size, 20px) !default;
-$popup-title-padding: var(--nutui-popup-title-padding, 16px) !default;
+$popup-title-padding: var(--nutui-popup-title-padding, 11px) !default;
 $popup-title-font-size: var(
   --nutui-popup-title-font-size,
   $font-size-xl
@@ -2581,3 +2581,48 @@ $resultpage-actions-margin-top: var(
   --nutui-resultpage-actions-margin-top,
   16px
 ) !default;
+
+// quickenter
+$quickenter-bg-color: var(--nutui-quickenter-bg-color, #f5f5f5) !default;
+$quickenter-max-height: var(--nutui-quickenter-max-height, 256px) !default;
+$quickenter-title-font-size: var(
+  --nutui-quickenter-title-font-size,
+  $font-size-base
+) !default;
+$quickenter-title-color: var(
+  --nutui-quickenter-title-color,
+  $color-title
+) !default;
+$quickenter-item-title-font-size: var(
+  --nutui-quickenter-item-title-font-size,
+  $font-size-s
+) !default;
+$quickenter-item-title-color: var(
+  --nutui-quickenter-item-title-color,
+  $color-title
+) !default;
+$quickenter-item-icon-bg-color: var(
+  --nutui-quickenter-item-icon-bg-color,
+  $white
+) !default;
+$quickenter-item-icon-color: var(
+  --nutui-quickenter-item-icon-color,
+  $color-title
+) !default;
+$quickenter-close-icon-size: var(
+  --nutui-quickenter-close-icon-size,
+  12px
+) !default;
+$quickenter-close-icon-color: var(
+  --nutui-quickenter-close-icon-color,
+  #808080
+) !default;
+$quickenter-box-shadow: var(
+  --nutui-quickenter-box-shadow,
+  0px 8px 16px rgba(141, 153, 167, 0.2),
+  0px -0.5px 0px rgba(0, 0, 0, 0.05) inset
+) !default;
+// $quickenter-backdrop-filter: var(
+//   --nutui-quickenter-backdrop-filter,
+//   blur(8px)
+// ) !default;
diff --git a/src/types/index.ts b/src/types/index.ts
index 64f56f1fd5..2a1c2a3908 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -351,3 +351,6 @@ export * from './spec/audio/taro'
 export * from './spec/steps/base'
 export * from './spec/steps/h5'
 export * from './spec/steps/taro'
+export * from './spec/quickenter/base'
+export * from './spec/quickenter/h5'
+export * from './spec/quickenter/taro'
diff --git a/src/types/spec/button/base.ts b/src/types/spec/button/base.ts
index e941e2c245..e19b0b9d4a 100644
--- a/src/types/spec/button/base.ts
+++ b/src/types/spec/button/base.ts
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import type { MouseEvent } from 'react'
 import { BaseProps } from '../../base/props'
 import { UIFill, UIRound, UISize, UIType } from '../../base/atoms'
 
@@ -15,5 +16,5 @@ export interface BaseButton extends BaseProps {
   rightIcon: ReactNode
   id: string
   nativeType: 'submit' | 'reset' | 'button'
-  onClick: (e: any) => void
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void
 }
diff --git a/src/types/spec/button/taro.ts b/src/types/spec/button/taro.ts
index a21a8a7473..4cbbbb232a 100644
--- a/src/types/spec/button/taro.ts
+++ b/src/types/spec/button/taro.ts
@@ -1,3 +1,13 @@
+import { ButtonProps as MiniProgramButtonProps } from '@tarojs/components'
 import { BaseButton } from './base'
 
-export interface TaroButtonProps extends BaseButton {}
+type OmitMiniProgramButtonProps = Omit<
+  MiniProgramButtonProps,
+  'size' | 'type' | 'onClick' | 'style' | 'disabled' | 'loading' | 'id'
+>
+
+export interface TaroButtonProps
+  extends BaseButton,
+    OmitMiniProgramButtonProps {
+  nativeType: 'submit' | 'reset' // | 'button'
+}
diff --git a/src/types/spec/calendarcard/base.ts b/src/types/spec/calendarcard/base.ts
index a3f2e2a823..525fa15778 100644
--- a/src/types/spec/calendarcard/base.ts
+++ b/src/types/spec/calendarcard/base.ts
@@ -30,6 +30,7 @@ export interface BaseCalendarCard extends BaseProps {
   firstDayOfWeek: number // 0-6
   startDate: Date
   endDate: Date
+  weekdays?: string[]
   disableDay: (day: CalendarCardDay) => boolean
   renderDay: (day: CalendarCardDay) => ReactNode
   renderDayTop: (day: CalendarCardDay) => ReactNode
diff --git a/src/types/spec/quickenter/base.ts b/src/types/spec/quickenter/base.ts
new file mode 100644
index 0000000000..da34359a5c
--- /dev/null
+++ b/src/types/spec/quickenter/base.ts
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react'
+import { BaseProps } from '../../base/props'
+
+export type QuickEnterRef = QuickEnterActions
+export type QuickEnterActions = {
+  open: () => void
+  close: () => void
+}
+
+export interface QuickEnterOption extends Record<string, any> {
+  title?: string
+  icon?: ReactNode
+  type?: string
+  url?: string
+  badge?: boolean | ReactNode
+  badgeProps?: any
+}
+
+export interface BaseQuickEnter<POPUP_PROPS = any> extends BaseProps {
+  visible?: boolean
+  title?: ReactNode
+  options?: QuickEnterOption[]
+  popupProps?: POPUP_PROPS
+  closeOnOverlayClick?: boolean
+  closeIcon?: ReactNode
+  safeAreaInsetTop?: boolean
+  onClose?: () => void
+  onChange?: (item: QuickEnterOption, index: number) => void
+  children?: ReactNode
+}
diff --git a/src/types/spec/quickenter/h5.ts b/src/types/spec/quickenter/h5.ts
new file mode 100644
index 0000000000..26b281603c
--- /dev/null
+++ b/src/types/spec/quickenter/h5.ts
@@ -0,0 +1,5 @@
+import { BaseQuickEnter, QuickEnterOption } from './base'
+import { WebPopupProps } from '../popup/h5'
+
+export interface WebQuickEnterProps extends BaseQuickEnter<WebPopupProps> {}
+export type { QuickEnterOption }
diff --git a/src/types/spec/quickenter/taro.ts b/src/types/spec/quickenter/taro.ts
new file mode 100644
index 0000000000..2088fa72cb
--- /dev/null
+++ b/src/types/spec/quickenter/taro.ts
@@ -0,0 +1,5 @@
+import { BaseQuickEnter, QuickEnterOption } from './base'
+import { TaroPopupProps } from '../popup/taro'
+
+export interface TaroQuickEnterProps extends BaseQuickEnter<TaroPopupProps> {}
+export type { QuickEnterOption }
diff --git a/src/utils/should-render-price-raw.ts b/src/utils/should-render-price-raw.ts
new file mode 100644
index 0000000000..7a8d43ea60
--- /dev/null
+++ b/src/utils/should-render-price-raw.ts
@@ -0,0 +1,26 @@
+const CJK = /[\u4E00-\u9FFF]/
+const RE_NUM = /\d+(?:\.\d+)?/g
+
+function hasNoExtractablePrice(s: string) {
+  const t = s.trim()
+  if (!t) return true
+  if (!/\d/.test(t)) return true
+  if (t.replace(/[^\d.]/g, '') === '') return true
+  return false
+}
+
+export function shouldRenderPriceAsRaw(s: string) {
+  if (hasNoExtractablePrice(s)) {
+    return true
+  }
+  const t = s.trim()
+  if (!CJK.test(t)) return false
+  const matches = Array.from(t.matchAll(RE_NUM))
+  if (matches.length < 2) return false
+  const a = matches[0]
+  const b = matches[1]
+  const i0 = a.index!
+  const i1 = b.index!
+  const between = t.slice(i0 + a[0].length, i1)
+  return CJK.test(between)
+}
diff --git a/src/utils/taro/ConfigurableCSSTransition.tsx b/src/utils/taro/ConfigurableCSSTransition.tsx
new file mode 100644
index 0000000000..114f835098
--- /dev/null
+++ b/src/utils/taro/ConfigurableCSSTransition.tsx
@@ -0,0 +1,115 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  cloneElement,
+  useCallback,
+} from 'react'
+
+export type TransitionStatus =
+  | 'entering'
+  | 'entered'
+  | 'exiting'
+  | 'exited'
+  | 'unmounted'
+
+interface CSSTransitionProps {
+  in?: boolean
+  timeout?: number
+  classNames?: string
+  nodeRef?: React.RefObject<any>
+  mountOnEnter?: boolean
+  unmountOnExit?: boolean
+  onEntered?: () => void
+  onExited?: () => void
+  children: React.ReactElement
+}
+
+const ConfigurableCSSTransition: React.FC<CSSTransitionProps> = (props) => {
+  const {
+    in: inPhase,
+    timeout = 300,
+    classNames: baseClassName = '',
+    nodeRef,
+    mountOnEnter,
+    unmountOnExit,
+    onEntered,
+    onExited,
+    children,
+  } = props
+
+  const [status, setStatus] = useState<TransitionStatus>(() => {
+    if (inPhase) return 'entered'
+    return unmountOnExit || mountOnEnter ? 'unmounted' : 'exited'
+  })
+
+  const [classes, setClasses] = useState<string>(() => {
+    if (inPhase) return `${baseClassName}-enter-done`
+    return `${baseClassName}-exit-done`
+  })
+
+  const timerRef = useRef<any>(null)
+  const statusRef = useRef<TransitionStatus>(status)
+  const prevInPhase = useRef<boolean | undefined>(inPhase)
+
+  const updateStatus = useCallback((nextStatus: TransitionStatus) => {
+    statusRef.current = nextStatus
+    setStatus(nextStatus)
+  }, [])
+
+  const enter = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+
+    if (statusRef.current === 'unmounted') {
+      updateStatus('exited')
+    }
+
+    updateStatus('entering')
+    setClasses(`${baseClassName}-enter ${baseClassName}-enter-active`)
+
+    timerRef.current = setTimeout(() => {
+      updateStatus('entered')
+      setClasses(`${baseClassName}-enter-done`)
+      onEntered?.()
+    }, timeout)
+  }, [baseClassName, onEntered, timeout, updateStatus])
+
+  const exit = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+
+    updateStatus('exiting')
+    setClasses(`${baseClassName}-exit ${baseClassName}-exit-active`)
+
+    timerRef.current = setTimeout(() => {
+      updateStatus('exited')
+      setClasses(`${baseClassName}-exit-done`)
+      if (unmountOnExit) {
+        updateStatus('unmounted')
+      }
+      onExited?.()
+    }, timeout)
+  }, [baseClassName, onExited, timeout, unmountOnExit, updateStatus])
+
+  useEffect(() => {
+    if (prevInPhase.current !== inPhase) {
+      if (inPhase) {
+        enter()
+      } else {
+        exit()
+      }
+      prevInPhase.current = inPhase
+    }
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [inPhase, enter, exit])
+
+  if (status === 'unmounted') return null
+
+  return cloneElement(children, {
+    className: `${children.props.className || ''} ${classes}`,
+  })
+}
+
+export default ConfigurableCSSTransition
diff --git a/src/utils/taro/get-rect.ts b/src/utils/taro/get-rect.ts
index 73f55868bf..429fb1fdc0 100644
--- a/src/utils/taro/get-rect.ts
+++ b/src/utils/taro/get-rect.ts
@@ -4,6 +4,11 @@ import { getRect, inBrowser } from '@/utils/get-rect'
 
 const lru = new MiniLru(10)
 
+const createScopedSelectorQuery = (scope?: any) => {
+  const query = createSelectorQuery()
+  return scope ? query.in(scope) : query
+}
+
 export interface Rect {
   dataset: Record<string, any>
   id: string
@@ -40,7 +45,8 @@ export const getRectInMultiPlatform = async (
         resolve(lru.get(element) as Rect)
         return
       }
-      createSelectorQuery()
+      createScopedSelectorQuery(element?._scope)
+        // https://taro.jd.com/docs/reference/config/page/
         .select(`#${harmonyId || element.uid}`)
         .boundingClientRect()
         .exec(([rects]) => {
@@ -64,7 +70,8 @@ export const getRectInMultiPlatformWithoutCache = async (
       return Promise.resolve(getRect(element))
     }
     return new Promise((resolve, reject) => {
-      createSelectorQuery()
+      createScopedSelectorQuery(element?._scope)
+        // https://taro.jd.com/docs/reference/config/page/
         .select(`#${harmonyId || element.uid}`)
         .boundingClientRect()
         .exec(([rects]) => {