From 6e6ceaf7153555e1d2ee218e8ed5c1552625f37e Mon Sep 17 00:00:00 2001
From: MICD <www.728988492@qq.com>
Date: Thu, 14 Oct 2021 15:36:04 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/components/NavBar.vue         |  4 ++
 .../devui-theme/components/NavBarTitle.vue    |  1 +
 .../devui-theme/components/NavSearch.vue      | 39 +++++++++++++++++++
 .../devui-theme/components/SideBarLinks.vue   |  9 +++++
 4 files changed, 53 insertions(+)
 create mode 100644 docs/.vitepress/devui-theme/components/NavSearch.vue

diff --git a/docs/.vitepress/devui-theme/components/NavBar.vue b/docs/.vitepress/devui-theme/components/NavBar.vue
index 2f32a367..c11ad6fd 100644
--- a/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -5,11 +5,13 @@ 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'
 
 const theme = new Theme("light");
 
 const darkMode = ref(false);
 const switchText = ref("浅色");
+const searchText = ref('')
 
 watch(
   () => darkMode.value,
@@ -28,6 +30,8 @@ defineEmits(['toggle'])
 
     <NavBarTitle />
 
+    <NavSearch ref="navSearch"/>
+
     <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 4c54558a..7b1405f3 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 00000000..4b2ca1e5
--- /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 768013e3..49b73176 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { useSideBar } from '../composables/sideBar'
 import { SideBarLink } from './SideBarLink'
 
+const search = ref('')
+addEventListener('setItemEvent', (e) => {
+  search.value = e.newValue
+  console.log(search.value)
+})
+
 const items = useSideBar()
+// const items = useSideBar(search.value)
+
 </script>
 
 <template>
-- 
Gitee


From d93449d26cd95d7fd0d69e773758ff97d136f9b6 Mon Sep 17 00:00:00 2001
From: MICD <728988492@qq.com>
Date: Sat, 16 Oct 2021 13:27:14 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=88=9D=E7=89=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/components/SideBarLinks.vue   | 64 ++++++++++++++++---
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index 49b73176..a23708f3 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,21 +1,67 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { debounce } from 'lodash-es'
 import { useSideBar } from '../composables/sideBar'
 import { SideBarLink } from './SideBarLink'
+import { useRoute } from 'vitepress'
 
-const search = ref('')
-addEventListener('setItemEvent', (e) => {
-  search.value = e.newValue
-  console.log(search.value)
-})
+const search = ref<string>('')
 
 const items = useSideBar()
-// const items = useSideBar(search.value)
+
+const searchArr = computed(() => {
+  if (search.value === '') return items.value
+  // return items.value.filter(cat => {
+    //   cat.children = cat.children?.filter(item => {
+      //     item.text.toLowerCase().includes(search.value.toLowerCase())
+  //   })
+  // })
+})
+
+const isShow = (item, isCat) => {
+  console.log(item)
+  console.log(isCat)
+  return item.text.toLowerCase().includes(search.value.toLowerCase()) || false
+  // 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">
-    <SideBarLink v-for="item of items" :item="item" />
+  <!-- <ul v-if="items.length > 0" class="sidebar-links">
+    <SideBarLink v-show="isShow(item)" v-for="item of items" :item="item" />
+  </ul> -->
+  <ul v-for="item in items" class="sidebar-links">
+    <li v-show="item.link" 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
-- 
Gitee


From 298b94b0f10c2858089e60af9912ef08bf445ae0 Mon Sep 17 00:00:00 2001
From: MICD <728988492@qq.com>
Date: Sat, 16 Oct 2021 13:28:34 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E5=88=9D=E7=89=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/devui-theme/components/SideBarLinks.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index a23708f3..c349dfce 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -19,8 +19,6 @@ const searchArr = computed(() => {
 })
 
 const isShow = (item, isCat) => {
-  console.log(item)
-  console.log(isCat)
   return item.text.toLowerCase().includes(search.value.toLowerCase()) || false
   // return item.text.toLowerCase().includes(search.value.toLowerCase()) || false
 }
-- 
Gitee


From ad84c5d0b9412d33d941a8aba5ce48c51850b0e0 Mon Sep 17 00:00:00 2001
From: MICD <www.728988492@qq.com>
Date: Mon, 18 Oct 2021 14:41:30 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/components/SideBarLinks.vue   | 59 ++++++++++++-------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index c349dfce..9f954567 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,26 +1,29 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, isReadonly } from 'vue'
 import { debounce } from 'lodash-es'
 import { useSideBar } from '../composables/sideBar'
 import { SideBarLink } from './SideBarLink'
-import { useRoute } from 'vitepress'
+import { useRoute, useData } from 'vitepress'
 
-const search = ref<string>('')
+const { site } = useData()
+const sideBarArr = site.value.themeConfig.sidebar
 
+const search = ref<string>('')
 const items = useSideBar()
 
-const searchArr = computed(() => {
-  if (search.value === '') return items.value
-  // return items.value.filter(cat => {
-    //   cat.children = cat.children?.filter(item => {
-      //     item.text.toLowerCase().includes(search.value.toLowerCase())
-  //   })
-  // })
+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
-  // return item.text.toLowerCase().includes(search.value.toLowerCase()) || false
 }
 
 const path = computed(() => useRoute().path)
@@ -38,18 +41,30 @@ onMounted(() => {
 
 <template>
   <!-- <ul v-if="items.length > 0" class="sidebar-links">
-    <SideBarLink v-show="isShow(item)" v-for="item of items" :item="item" />
-  </ul> -->
+    <SideBarLink v-for="item of items" :item="item" />
+  </ul>-->
+  <!-- rewrite dom -->
   <ul v-for="item in items" class="sidebar-links">
-    <li v-show="item.link" class="sidebar-link">
-      <a v-show="isShow(item)" :class="{active: path === item.link}" class="sidebar-link-item" :href="item.link">{{item.text}}</a>
+    <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>
+      <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
+            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>
@@ -57,9 +72,9 @@ onMounted(() => {
   </ul>
 </template>
 <style>
-  @media (min-width: 720px) {
-    .sidebar>.sidebar-links {
-      padding: 0.2rem 0;
-    }
+@media (min-width: 720px) {
+  .sidebar > .sidebar-links {
+    padding: 0.2rem 0;
   }
+}
 </style>
\ No newline at end of file
-- 
Gitee


From 4f09d4dfd12d75b940cbd62596e9a40fe0901704 Mon Sep 17 00:00:00 2001
From: MICD <www.728988492@qq.com>
Date: Mon, 18 Oct 2021 18:41:24 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/devui-theme/components/SideBarLinks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/devui-theme/components/SideBarLinks.vue b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
index 9f954567..2253db2c 100644
--- a/docs/.vitepress/devui-theme/components/SideBarLinks.vue
+++ b/docs/.vitepress/devui-theme/components/SideBarLinks.vue
@@ -1,9 +1,9 @@
 <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'
-import { useRoute, useData } from 'vitepress'
 
 const { site } = useData()
 const sideBarArr = site.value.themeConfig.sidebar
-- 
Gitee


From c5deeeb624dd94cef634077e56b4b01cf2261b48 Mon Sep 17 00:00:00 2001
From: MICD <www.728988492@qq.com>
Date: Tue, 19 Oct 2021 13:49:47 +0800
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AE=98?=
 =?UTF-8?q?=E6=96=B9=E6=9F=A5=E8=AF=A2apolia=EF=BC=88=E6=9A=82=E6=9C=AA?=
 =?UTF-8?q?=E5=BC=95=E5=85=A5key=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config/index.ts                          | 8 +++++++-
 .../devui-theme/components/AlgoliaSearchBox.vue          | 4 +---
 docs/.vitepress/devui-theme/components/NavBar.vue        | 9 +++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
index c2e77e3a..e8a4410a 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 89023a2e..893a4639 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 c11ad6fd..332d85d0 100644
--- a/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -1,22 +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 ? '深色' : '浅色'
   }
 )
@@ -31,6 +35,7 @@ defineEmits(['toggle'])
     <NavBarTitle />
 
     <NavSearch ref="navSearch"/>
+    <AlgoliaSearchBox class="search" :options="theme.agolia"/>
 
     <div class="flex-grow" />
 
-- 
Gitee