feat(NumberKeyboard): improve shuffle algorithm (#10428)

* fix(Tab): add key when render TabsTitle

* fix(Tab): change key

* fix(Tabs): use each TabRef.id as key

README.md

@@ -28,7 +28,7 @@
 ## Features
 
 - 🚀 1KB Component average size (min+gzip)
-- 🚀 65+ High quality components
+- 🚀 70+ High quality components
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos
@@ -38,8 +38,8 @@
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
 - 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
-- 🍭 Support i18n
-- 🌍 Support SSR
+- 🍭 Support SSR
+- 🌍 Support i18n, built-in 20+ languages
 
 ## Install
 

README.zh-CN.md

@@ -25,25 +25,25 @@
 
 ### 介绍
 
-Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
+Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
 
 ## 特性
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
-- 🚀 65+ 个高质量组件，覆盖移动端主流场景
+- 🚀 70+ 个高质量组件，覆盖移动端主流场景
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
-- 📖 提供完善的中英文文档和组件示例
+- 📖 提供丰富的中英文文档和组件示例
 - 📖 提供 Sketch 和 Axure 设计资源
 - 🍭 支持 Vue 2、Vue 3 和微信小程序
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（需要升级至 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider)）
+- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
 - 🍭 支持服务器端渲染
-- 🌍 支持国际化和语言包定制
+- 🌍 支持国际化，内置 20+ 种语言包
 
 ## 安装
 

packages/vant/docs/markdown/design.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-Vant 是基于有赞 [Zan Design System](https://design.youzan.com/) 视觉规范实现的组件库，在这里可以下载 Vant 的设计资源。
+本页面提供 Vant 的设计资源下载。
 
 ## 设计稿
 

packages/vant/docs/markdown/home.en-US.md

@@ -9,7 +9,7 @@
 ### Features
 
 - 🚀 1KB Component average size (min+gzip)
-- 🚀 65+ High quality components
+- 🚀 70+ High quality components
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos
@@ -19,8 +19,8 @@
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
 - 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
-- 🍭 Support i18n
-- 🌍 Support SSR
+- 🍭 Support SSR
+- 🌍 Support i18n, built-in 20+ languages
 
 ### Quickstart
 

packages/vant/docs/markdown/home.zh-CN.md

@@ -8,29 +8,29 @@
 
 ### 介绍
 
-Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
+Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
 
-### 版本提示
-
-你当前浏览的是 **Vant 3.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。
-
 ### 特性
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
-- 🚀 65+ 个高质量组件，覆盖移动端主流场景
+- 🚀 70+ 个高质量组件，覆盖移动端主流场景
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
-- 📖 提供完善的中英文文档和组件示例
+- 📖 提供丰富的中英文文档和组件示例
 - 📖 提供 Sketch 和 Axure 设计资源
 - 🍭 支持 Vue 2、Vue 3 和微信小程序
 - 🍭 支持主题定制，内置 700+ 个主题变量
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
-- 🍭 支持深色模式（需要升级至 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider)）
+- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
 - 🍭 支持服务器端渲染
-- 🌍 支持国际化和语言包定制
+- 🌍 支持国际化，内置 20+ 种语言包
+
+### 版本提示
+
+你当前浏览的是 **Vant 3.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。
 
 ### 快速上手
 

packages/vant/src/composables/use-touch.ts

@@ -41,7 +41,7 @@ export function useTouch() {
   const move = ((event: TouchEvent) => {
     const touch = event.touches[0];
     // safari back will set clientX to negative number
-    deltaX.value = touch.clientX < 0 ? 0 : touch.clientX - startX.value;
+    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
     deltaY.value = touch.clientY - startY.value;
     offsetX.value = Math.abs(deltaX.value);
     offsetY.value = Math.abs(deltaY.value);

packages/vant/src/number-keyboard/NumberKeyboard.tsx

@@ -65,6 +65,16 @@ const numberKeyboardProps = {
 
 export type NumberKeyboardProps = ExtractPropTypes<typeof numberKeyboardProps>;
 
+function shuffle(array: unknown[]) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+  return array;
+}
+
 export default defineComponent({
   name,
 
@@ -89,7 +99,7 @@ export default defineComponent({
         .map((_, i) => ({ text: i + 1 }));
 
       if (props.randomKeyOrder) {
-        keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+        shuffle(keys);
       }
 
       return keys;

packages/vant/src/tabs/Tabs.tsx

@@ -365,6 +365,7 @@ export default defineComponent({
     const renderNav = () =>
       children.map((item, index) => (
         <TabsTitle
+          key={item.id}
           v-slots={{ title: item.$slots.title }}
           id={`${id}-${index}`}
           ref={setTitleRefs(index)}