diff --git a/src/sites/assets/util/index.ts b/src/sites/assets/util/index.ts
index d18076ff10..814f1e47e5 100644
--- a/src/sites/assets/util/index.ts
+++ b/src/sites/assets/util/index.ts
@@ -10,3 +10,9 @@ const isJDDKH = () => {
   return window.parent.location.href.includes('jddkh');
 };
 export { isMobile, isJDT, isJDB, isJDDKH };
+
+export const reorder = (packages: Array<any>) => {
+  return packages.sort(function (x: any, y: any) {
+    return x['name'].localeCompare(y['name']);
+  });
+};
diff --git a/src/sites/doc/components/Nav.vue b/src/sites/doc/components/Nav.vue
index b93ca759fa..6003dae242 100644
--- a/src/sites/doc/components/Nav.vue
+++ b/src/sites/doc/components/Nav.vue
@@ -3,7 +3,11 @@
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>
-        <template :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
+        <template
+          :class="{ active: isActive(_package.name) }"
+          v-for="_package in reorder(_nav.packages)"
+          :key="_package"
+        >
           <li v-if="_package.show">
             <router-link :to="_package.name.toLowerCase()" :class="{ active: isActive(_package.name) }">
               {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
@@ -18,6 +22,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { RefData } from '@/sites/assets/util/ref';
 import { nav } from '@/config.json';
+import { reorder } from '../../assets/util/index';
 const fixed = ref(false);
 const isActive = computed(() => {
   return function (name: string) {
diff --git a/src/sites/mobile/components/Index.vue b/src/sites/mobile/components/Index.vue
index af21f0af2e..bdb6b715a6 100644
--- a/src/sites/mobile/components/Index.vue
+++ b/src/sites/mobile/components/Index.vue
@@ -11,7 +11,7 @@
       <ol v-for="_nav in nav" :key="_nav.name">
         <li>{{ _nav.name }}</li>
         <ul>
-          <template v-for="_package in _nav.packages" :key="_package">
+          <template v-for="_package in reorder(_nav.packages)" :key="_package">
             <li v-if="_package.show">
               <router-link :to="`/zh-CN/${_package.name.toLowerCase()}`"
                 >{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}
@@ -28,6 +28,7 @@
 <script setup lang="ts">
 import { nav } from '@/config.json';
 import { Right } from '@nutui/icons-vue';
+import { reorder } from '../../assets/util';
 const info = {
   logo: 'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png',
   title: 'NutUI',