From a079b0236f1dede3d7ca1cff7503ede51a27edde Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Fri, 17 Nov 2023 00:28:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E7=95=8C=E9=9D=A2=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E6=97=B6=E5=8A=A8=E7=94=BB=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Search/index.vue | 45 ++++++++++++-------------
 src/router/modules/jsx.example.ts       |  2 +-
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/layouts/components/Search/index.vue b/src/layouts/components/Search/index.vue
index 7d266c97..4a87a362 100755
--- a/src/layouts/components/Search/index.vue
+++ b/src/layouts/components/Search/index.vue
@@ -55,7 +55,6 @@ const isShow = ref(false)
 const searchInput = ref('')
 const sourceList = ref<listTypes[]>([])
 const actived = ref(-1)
-const isScrollbarsInit = ref(false)
 
 const searchInputRef = ref()
 const searchResultRef = ref<OverlayScrollbarsComponentRef>()
@@ -262,7 +261,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
 </script>
 
 <template>
-  <TransitionRoot as="template" :show="isShow" @after-leave="isScrollbarsInit = false">
+  <TransitionRoot as="template" :show="isShow">
     <Dialog :initial-focus="searchInputRef" class="fixed inset-0 flex z-2000" @close="isShow && eventBus.emit('global-search-toggle')">
       <TransitionChild as="template" v-bind="overlayTransitionClass">
         <div class="fixed inset-0 transition-opacity bg-stone-200/75 dark:bg-stone-8/75 backdrop-blur-sm" />
@@ -277,29 +276,27 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
                   <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full focus:outline-none border-0 rounded-md placeholder-stone-4 dark:placeholder-stone-5 text-base px-3 bg-transparent text-dark dark:text-white" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
                 </div>
                 <DialogDescription class="relative m-0 of-y-hidden">
-                  <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" class="h-full" @os-initialized="isScrollbarsInit = true">
-                    <template v-if="isScrollbarsInit">
-                      <template v-if="resultList.length > 0">
-                        <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex items-center cursor-pointer" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
-                          <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
-                          <div class="flex-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
-                            <div class="text-base font-bold truncate">{{ item.title ?? '[ 无标题 ]' }}</div>
-                            <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
-                              <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                                {{ bc.title ?? '[ 无标题 ]' }}
-                              </BreadcrumbItem>
-                            </Breadcrumb>
-                          </div>
-                        </a>
-                      </template>
-                      <template v-else>
-                        <div flex="center col" py-6 text-stone-5>
-                          <SvgIcon name="tabler:mood-empty" :size="40" />
-                          <p text-base m-2>
-                            没有找到你想要的
-                          </p>
+                  <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
+                    <template v-if="resultList.length > 0">
+                      <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex items-center cursor-pointer" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+                        <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
+                        <div class="flex-1 flex flex-col gap-1 px-4 py-3 truncate" border-l="~ solid stone-2 dark:stone-7">
+                          <div class="text-base font-bold truncate">{{ item.title ?? '[ 无标题 ]' }}</div>
+                          <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
+                            <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
+                              {{ bc.title ?? '[ 无标题 ]' }}
+                            </BreadcrumbItem>
+                          </Breadcrumb>
                         </div>
-                      </template>
+                      </a>
+                    </template>
+                    <template v-else>
+                      <div flex="center col" py-6 text-stone-5>
+                        <SvgIcon name="tabler:mood-empty" :size="40" />
+                        <p text-base m-2>
+                          没有找到你想要的
+                        </p>
+                      </div>
                     </template>
                   </OverlayScrollbarsComponent>
                 </DialogDescription>
diff --git a/src/router/modules/jsx.example.ts b/src/router/modules/jsx.example.ts
index f8334ee2..1110a1f0 100755
--- a/src/router/modules/jsx.example.ts
+++ b/src/router/modules/jsx.example.ts
@@ -17,7 +17,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'index',
       name: 'jsxExampleIndex',
-      component: () => import('@/views/jsx_example/index.jsx'),
+      component: () => import('@/views/jsx_example/index.tsx'),
       meta: {
         title: 'JSX',
         sidebar: false,