@sugarat/theme 0.1.49 → 0.1.50

package/src/components/BlogSearch.vue

@@ -1,142 +1,16 @@
-<template>
-  <div class="blog-search" v-if="openSearch" data-pagefind-ignore="all">
-    <div class="nav-search-btn-wait" @click="searchModal = true">
-      <svg width="14" height="14" viewBox="0 0 20 20">
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path>
-      </svg>
-      <span v-if="!isMinimized" class="search-tip">{{
-        searchConfig?.btnPlaceholder || '搜索'
-      }}</span>
-      <span v-if="!isMinimized" class="metaKey"> {{ metaKey }} K </span>
-    </div>
-    <Command.Dialog :visible="searchModal" theme="algolia">
-      <template #header>
-        <Command.Input
-          v-model:value="searchWords"
-          :placeholder="searchConfig?.placeholder || '请输入要搜素的内容'"
-        />
-      </template>
-      <template #body>
-        <div class="search-dialog">
-          <Command.List>
-            <Command.Empty v-if="!searchResult.length">{{
-              searchConfig?.emptyText || 'No results found.'
-            }}</Command.Empty>
-            <Command.Group v-else :heading="headingText">
-              <Command.Item
-                v-for="item in searchResult"
-                :data-value="item.route"
-                :key="item.route"
-                @select="handleSelect"
-              >
-                <div class="link">
-                  <div class="title">
-                    <span>{{ item.meta.title }}</span>
-                    <span class="date">
-                      {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span
-                    >
-                  </div>
-                  <div class="des" v-html="item.meta.description"></div>
-                </div>
-              </Command.Item>
-            </Command.Group>
-          </Command.List>
-        </div>
-      </template>
-      <template #footer v-if="searchResult.length">
-        <div class="command-palette-logo">
-          <a
-            v-if="openSearch === 'pagefind'"
-            href="https://github.com/cloudcannon/pagefind"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span class="command-palette-Label">Search by</span>
-            <logo-pagefind style="width: 77px" />
-          </a>
-        </div>
-        <ul class="command-palette-commands">
-          <li>
-            <kbd class="command-palette-commands-key"
-              ><svg width="15" height="15" aria-label="Enter key" role="img">
-                <g
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.2"
-                >
-                  <path
-                    d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
-                  ></path>
-                </g></svg></kbd
-            ><span class="command-palette-Label">to select</span>
-          </li>
-          <li>
-            <kbd class="command-palette-commands-key"
-              ><svg width="15" height="15" aria-label="Arrow down" role="img">
-                <g
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.2"
-                >
-                  <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path>
-                </g></svg></kbd
-            ><kbd class="command-palette-commands-key"
-              ><svg width="15" height="15" aria-label="Arrow up" role="img">
-                <g
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.2"
-                >
-                  <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path>
-                </g></svg></kbd
-            ><span class="command-palette-Label">to navigate</span>
-          </li>
-          <li>
-            <kbd class="command-palette-commands-key"
-              ><svg width="15" height="15" aria-label="Escape key" role="img">
-                <g
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.2"
-                >
-                  <path
-                    d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
-                  ></path>
-                </g></svg></kbd
-            ><span class="command-palette-Label">to close</span>
-          </li>
-        </ul>
-      </template>
-    </Command.Dialog>
-  </div>
-</template>
-
 <script lang="ts" setup>
 // @ts-nocheck
-import { computed, nextTick, ref, watch, onBeforeMount, onMounted } from 'vue'
+import { computed, nextTick, onBeforeMount, onMounted, ref, watch } from 'vue'
 import { Command } from 'vue-command-palette'
 import { useRoute, useRouter, withBase } from 'vitepress'
 import { useMagicKeys, useWindowSize } from '@vueuse/core'
 import { chineseSearchOptimize, formatDate } from '../utils/client'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
-import { Theme } from '../composables/config'
+import type { Theme } from '../composables/config'
 import LogoPagefind from './LogoPagefind.vue'
 
+const searchResult = ref<Theme.PageData[]>([])
+
 const windowSize = useWindowSize()
 
 const isMinimized = computed(() => windowSize.width.value < 760)
@@ -146,9 +20,9 @@ const { search: searchConfig } = useBlogConfig()
 const headingText = computed(() => {
   return searchConfig?.heading
     ? searchConfig.heading.replace(
-        /\{\{searchResult\}\}/,
-        searchResult.value.length
-      )
+      /\{\{searchResult\}\}/,
+      searchResult.value.length
+    )
     : `共: ${searchResult.value.length} 个搜索结果`
 })
 const openSearch = computed(() =>
@@ -157,7 +31,7 @@ const openSearch = computed(() =>
     : searchConfig ?? true
 )
 
-const addInlineScript = () => {
+function addInlineScript() {
   const scriptText = `import('${withBase('/_pagefind/pagefind.js')}')
         .then((module) => {
           window.__pagefind__ = module
@@ -196,7 +70,8 @@ const docsMap = computed(() => {
 const keys = useMagicKeys({
   passive: false,
   onEventFired(e) {
-    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') e.preventDefault()
+    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown')
+      e.preventDefault()
   }
 })
 const CmdK = keys['Meta+K']
@@ -220,14 +95,13 @@ watch(Escape, (v) => {
   }
 })
 
-const searchResult = ref<Theme.PageData[]>([])
-const inlineSearch = () => {
+function inlineSearch() {
   if (!searchWords.value) {
     searchResult.value = []
     return
   }
   searchResult.value = docs.value
-    .filter((v) =>
+    .filter(v =>
       `${v.meta.description}${v.meta.title}`.includes(searchWords.value)
     )
     .map((v) => {
@@ -253,11 +127,12 @@ watch(
   async () => {
     if (openSearch.value === 'pagefind') {
       // dev-server兜底
-      // @ts-ignore
+      // @ts-expect-error
       if (!window?.__pagefind__?.search) {
         inlineSearch()
-      } else {
-        // @ts-ignore
+      }
+      else {
+        // @ts-expect-error
         await window?.__pagefind__
           ?.search?.(chineseSearchOptimize(searchWords.value))
           .then(async (search: any) => {
@@ -287,7 +162,8 @@ watch(
             })
           })
       }
-    } else {
+    }
+    else {
       inlineSearch()
     }
     nextTick(() => {
@@ -299,7 +175,7 @@ watch(
   }
 )
 
-const handleClickMask = (e: any) => {
+function handleClickMask(e: any) {
   if (e.target === e.currentTarget) {
     searchModal.value = false
   }
@@ -313,7 +189,8 @@ watch(
           .querySelector('div[command-dialog-mask]')
           ?.addEventListener('click', handleClickMask)
       })
-    } else {
+    }
+    else {
       document
         .querySelector('div[command-dialog-mask]')
         ?.removeEventListener('click', handleClickMask)
@@ -334,7 +211,7 @@ watch(
 
 const router = useRouter()
 const route = useRoute()
-const handleSelect = (target: any) => {
+function handleSelect(target: any) {
   searchModal.value = false
   if (!route.path.startsWith(target.value)) {
     // searchWords.value = ''
@@ -343,6 +220,127 @@ const handleSelect = (target: any) => {
 }
 </script>
 
+<template>
+  <div v-if="openSearch" class="blog-search" data-pagefind-ignore="all">
+    <div class="nav-search-btn-wait" @click="searchModal = true">
+      <svg width="14" height="14" viewBox="0 0 20 20">
+        <path
+          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+          stroke="currentColor"
+          fill="none"
+          fill-rule="evenodd"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <span v-if="!isMinimized" class="search-tip">{{
+        searchConfig?.btnPlaceholder || '搜索'
+      }}</span>
+      <span v-if="!isMinimized" class="metaKey"> {{ metaKey }} K </span>
+    </div>
+    <Command.Dialog :visible="searchModal" theme="algolia">
+      <template #header>
+        <Command.Input
+          v-model:value="searchWords"
+          :placeholder="searchConfig?.placeholder || '请输入要搜素的内容'"
+        />
+      </template>
+      <template #body>
+        <div class="search-dialog">
+          <Command.List>
+            <Command.Empty v-if="!searchResult.length">
+              {{
+                searchConfig?.emptyText || 'No results found.'
+              }}
+            </Command.Empty>
+            <Command.Group v-else :heading="headingText">
+              <Command.Item
+                v-for="item in searchResult"
+                :key="item.route"
+                :data-value="item.route"
+                @select="handleSelect"
+              >
+                <div class="link">
+                  <div class="title">
+                    <span>{{ item.meta.title }}</span>
+                    <span class="date">
+                      {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span>
+                  </div>
+                  <div class="des" v-html="item.meta.description" />
+                </div>
+              </Command.Item>
+            </Command.Group>
+          </Command.List>
+        </div>
+      </template>
+      <template v-if="searchResult.length" #footer>
+        <div class="command-palette-logo">
+          <a
+            v-if="openSearch === 'pagefind'"
+            href="https://github.com/cloudcannon/pagefind"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="command-palette-Label">Search by</span>
+            <LogoPagefind style="width: 77px" />
+          </a>
+        </div>
+        <ul class="command-palette-commands">
+          <li>
+            <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Enter key" role="img">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.2"
+              >
+                <path
+                  d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
+                />
+              </g></svg></kbd><span class="command-palette-Label">to select</span>
+          </li>
+          <li>
+            <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Arrow down" role="img">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.2"
+              >
+                <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
+              </g></svg></kbd><kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Arrow up" role="img">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.2"
+              >
+                <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
+              </g></svg></kbd><span class="command-palette-Label">to navigate</span>
+          </li>
+          <li>
+            <kbd class="command-palette-commands-key"><svg width="15" height="15" aria-label="Escape key" role="img">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.2"
+              >
+                <path
+                  d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
+                />
+              </g></svg></kbd><span class="command-palette-Label">to close</span>
+          </li>
+        </ul>
+      </template>
+    </Command.Dialog>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .blog-search {
   flex: v-bind(flexValue);