diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
index c2e77e3a902998171a6d79aa2b3935f940a12c14..e8a4410a6ab82344b62d192b5265dbd0fe41a92f 100644
--- a/docs/.vitepress/config/index.ts
+++ b/docs/.vitepress/config/index.ts
@@ -12,7 +12,13 @@ const config = {
     sidebar,
     nav,
     demoblock: lang,
-    logo: '../../assets/logo.svg'
+    logo: '../../assets/logo.svg',
+    // apolia 配置（官方提供的key）
+    agolia: {
+      apiKey: '25626fae796133dc1e734c6bcaaeac3c',
+      appId: 'BH4D9OD16A',
+      indexName: 'docsearch'
+    }
   },
 };
 
diff --git a/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue b/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
index 89023a2eaea277d8fe5373a5354d6e02348dae05..893a46391861a4bb4b967249a02749ac4bf71abe 100644
--- a/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
+++ b/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue
@@ -3,11 +3,10 @@ import '@docsearch/css'
 import docsearch from '@docsearch/js'
 import { useRoute, useRouter, useData } from 'vitepress'
 import { getCurrentInstance, onMounted, watch } from 'vue'
-import type { DefaultTheme } from '../config'
 import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
 
 const props = defineProps<{
-  options: DefaultTheme.AlgoliaSearchOptions
+  options: any
   multilang?: boolean
 }>()
 
@@ -60,7 +59,6 @@ function initialize(userOptions: any) {
   docsearch(
     Object.assign({}, userOptions, {
       container: '#docsearch',
-
       searchParameters: Object.assign({}, userOptions.searchParameters, {
         // pass a custom lang facetFilter to allow multiple language search
         // https://github.com/algolia/docsearch-configs/pull/3942
diff --git a/docs/.vitepress/devui-theme/components/NavBar.vue b/docs/.vitepress/devui-theme/components/NavBar.vue
index 2f32a367925633ba76c8d5ddd52c31dc0cd9cd10..332d85d0a8c62ea3b7227dfabaf41af0026246be 100644
--- a/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -1,20 +1,26 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useData } from 'vitepress'
 import Theme from '@devui/theme/theme'
 import { Switch as DSwitch } from '@devui/switch'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
 import ToggleSideBarButton from './ToggleSideBarButton.vue'
+import NavSearch from './NavSearch.vue'
+import AlgoliaSearchBox from './AlgoliaSearchBox.vue'
 
-const theme = new Theme("light");
+const theme1 = new Theme("light");
 
 const darkMode = ref(false);
 const switchText = ref("浅色");
+const searchText = ref('')
+
+const { theme } = useData()
 
 watch(
   () => darkMode.value,
   (darkMode, prevDarkMode) => {
-    theme.applyTheme(darkMode ? 'dark' : 'light')
+    theme1.applyTheme(darkMode ? 'dark' : 'light')
     switchText.value = darkMode ? '深色' : '浅色'
   }
 )
@@ -28,6 +34,9 @@ defineEmits(['toggle'])
 
     <NavBarTitle />
 
+    <NavSearch ref="navSearch"/>
+    <AlgoliaSearchBox class="search" :options="theme.agolia"/>
+
     <div class="flex-grow" />
 
     <div class="flex">
diff --git a/docs/.vitepress/devui-theme/components/NavBarTitle.vue b/docs/.vitepress/devui-theme/components/NavBarTitle.vue
index 4c54558a1a6253da09f3f4d4d4ff6d3b122ad53a..7b1405f32c723e2e82207dde28b03fb78ee69dbf 100644
--- a/docs/.vitepress/devui-theme/components/NavBarTitle.vue
+++ b/docs/.vitepress/devui-theme/components/NavBarTitle.vue
@@ -26,6 +26,7 @@ const { site, theme, localePath } = useData()
   font-size: 1.3rem;
   font-weight: 600;
   color: $devui-text;
+  margin-right: 40px;
 }
 
 .nav-bar-title:hover {
diff --git a/docs/.vitepress/devui-theme/components/NavSearch.vue b/docs/.vitepress/devui-theme/components/NavSearch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b2ca1e5cb5d4d700627959ca2f86554bdfbd923
--- /dev/null
+++ b/docs/.vitepress/devui-theme/components/NavSearch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { Search as DSearch } from '@devui/Search'
+import { ref, watch } from 'vue'
+
+const { site, theme, localePath } = useData()
+
+const searchText = ref('')
+
+// 目的监听数据Storage变化
+const orignalSetItem = sessionStorage.setItem
+sessionStorage.setItem = function(key,newValue) {
+  let setItemEvent = new Event('setItemEvent')
+  setItemEvent.key = key
+  setItemEvent.newValue = newValue
+  dispatchEvent(setItemEvent)
+  orignalSetItem.apply(this, arguments)
+}
+
+watch(() => {
+  sessionStorage.setItem('search', searchText.value)
+})
+
+</script>
+
+<template>
+  <d-search
+    v-model="searchText"
+    noBorder
+    :delay="500"
+    :placeholder="'请输入你想查找的组件'"
+  >
+  </d-search>
+</template>
+
+<style scoped lang="scss">
+@import '@devui/search/src/search.scss';
+
+</style>
diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index 768013e3bb73fc63c588d9c5256d4ddfad8f9134..2253db2c57c2d6ec91246fb82da3b76154afa209 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,12 +1,80 @@
 <script setup lang="ts">
+import { ref, computed, onMounted, isReadonly } from 'vue'
+import { debounce } from 'lodash-es'
+import { useRoute, useData } from 'vitepress'
 import { useSideBar } from '../composables/sideBar'
 import { SideBarLink } from './SideBarLink'
 
+const { site } = useData()
+const sideBarArr = site.value.themeConfig.sidebar
+
+const search = ref<string>('')
 const items = useSideBar()
+
+const comItems = computed(() => {
+  let arr = [...sideBarArr['/']]
+  if (search.value === '') return sideBarArr['/']
+  arr = arr.filter(cat => {
+    cat.children = cat.children?.filter(item => {
+      return item.text.toLowerCase().includes(search.value.toLowerCase())
+    })
+  })
+  return arr
+})
+
+const isShow = (item, isCat) => {
+  return item.text.toLowerCase().includes(search.value.toLowerCase()) || false
+}
+
+const path = computed(() => useRoute().path)
+
+onMounted(() => {
+  addEventListener(
+    'setItemEvent',
+    debounce((e) => {
+      search.value = e.newValue
+    }, 300)
+  )
+})
+
 </script>
 
 <template>
-  <ul v-if="items.length > 0" class="sidebar-links">
+  <!-- <ul v-if="items.length > 0" class="sidebar-links">
     <SideBarLink v-for="item of items" :item="item" />
+  </ul>-->
+  <!-- rewrite dom -->
+  <ul v-for="item in items" class="sidebar-links">
+    <li v-show="!item.children" class="sidebar-link">
+      <a
+        v-show="isShow(item)"
+        :class="{ active: path === item.link }"
+        class="sidebar-link-item"
+        :href="item.link"
+      >{{ item.text }}</a>
+    </li>
+    <li v-show="item.children" class="sidebar-link">
+      <p class="sidebar-link-item">{{ item.text }}</p>
+      <ul v-for="item1 in item.children" class="sidebar-links">
+        <li v-show="item1.link" class="sidebar-link">
+          <a
+            v-show="isShow(item1)"
+            class="sidebar-link-item"
+            :class="{ active: path === item1.link }"
+            :href="item1.link"
+          >
+            {{ item1.text }}
+            <span class="sidebar-link-status">{{ item1.status }}</span>
+          </a>
+        </li>
+      </ul>
+    </li>
   </ul>
 </template>
+<style>
+@media (min-width: 720px) {
+  .sidebar > .sidebar-links {
+    padding: 0.2rem 0;
+  }
+}
+</style>
\ No newline at end of file