ci: 初步集成 algolia

example/src/components/LaySearch.vue

@@ -1,124 +1,39 @@
 <template>
-  <select :name="name" lay-verify="required" />
+  <div id="docsearch"></div>
-  <div
-    class="layui-unselect layui-form-select layui-search"
-    :class="[openState ? 'layui-form-selected' : '']"
-    @click="open"
-    style="margin-left: 20px"
-  >
-    <div class="layui-select-title">
-      <input
-        type="text"
-        placeholder="Search"
-        class="layui-input layui-unselect"
-        :value="name"
-        style="
-          background: rgba(255, 255, 255, 0.05);
-          border: none;
-          color: rgba(255, 255, 255, 0.7);
-          width: 196px;
-          height: 34px;
-        "
-        @input="change"
-      /><i class="layui-edge"></i>
-    </div>
-    <dl class="layui-anim layui-anim-upbit" style="">
-      <dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
-      <dd
-        v-for="data in menus"
-        v-else
-        :key="data"
-        :value="name"
-        class="layui-select-tips"
-        @click="jump(data)"
-      >
-        {{ data.title }}
-      </dd>
-    </dl>
-  </div>
 </template>
 
 <script setup name="LaySelect" lang="ts">
-import { ref } from 'vue'
+import docsearch from "@docsearch/js";
-import { useRouter, useRoute } from 'vue-router'
+import { onMounted } from "vue";
-import { Recordable } from '../../../src/types'
+import "@docsearch/css";
 
-const props = defineProps<{
+onMounted(() => {
-  datas?: Recordable[]
+  docsearch({
-}>()
+    container: "#docsearch",
-
+    appId: "R2IYF7ETH7",
-const route = useRoute()
+    apiKey: "599cec31baffa4868cae4e79f180729b",
-const router = useRouter()
+    indexName: "docsearch",
-
+  });
-const openState = ref(false)
+});
-const menus = ref(props.datas)
-const name = ref('')
-
-const open = function () {
-  openState.value = !openState.value
-}
-
-const jump = function (data: any) {
-  name.value = data.title
-  router.push(data.path)
-}
-
-const change = function (e: any) {
-  name.value = e.target.value
-  if (e.target.value === '') {
-    menus.value = props.datas
-  } else {
-    menus.value = searchList(e.target.value, props.datas)
-  }
-}
-
-const searchList = function (str: string, container: any) {
-  var newList = []
-  var startChar = str.charAt(0)
-  var strLen = str.length
-  for (var i = 0; i < container.length; i++) {
-    var obj = container[i]
-    var isMatch = false
-    for (var p in obj) {
-      if (typeof obj[p] == 'function') {
-        obj[p]()
-      } else {
-        var curItem = ''
-        if (obj[p] != null) {
-          curItem = obj[p]
-        }
-        for (var j = 0; j < curItem.length; j++) {
-          if (curItem.charAt(j) == startChar) {
-            if (curItem.substring(j).substring(0, strLen) == str) {
-              isMatch = true
-              break
-            }
-          }
-        }
-      }
-    }
-    if (isMatch) {
-      newList.push(obj)
-    }
-  }
-  return newList
-}
 </script>
 
 <style>
-.layui-search .layui-anim::-webkit-scrollbar {
+
-  width: 6px;
+.DocSearch-Button {
-  height: 6px;
+  outline: none;
+  box-shadow:var(--docsearch-searchbox-shadow)
 }
-.layui-search .layui-anim::-webkit-scrollbar-corner {
+
-  background: #f6f6f6;
+.DocSearch-Button .DocSearch-Search-Icon,
+.DocSearch-Button-Placeholder {
+  color: whitesmoke;
 }
-.layui-search .layui-anim::-webkit-scrollbar-thumb {
+
-  background: #e6e6e6;
+:root {
-  border-radius: 2px;
+
+  --docsearch-primary-color: var(--global-primary-color) ;
+  --docsearch-searchbox-background: transparent;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-logo-color: var(--global-primary-color);
 }
-.layui-search .layui-anim::-webkit-scrollbar-track {
+</style>
-  background: white;
-  border-radius: 2px;
-}
-</style>

example/src/main.ts

@@ -8,6 +8,7 @@ import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
 import LayComment from './components/LayComment.vue'
 import LayAnchor from './components/LayAnchor.vue'
+import InstantSearch from 'vue-instantsearch/vue3/es';
 import './assets/css/index.css'
 
 export function createApp(): {
@@ -21,6 +22,7 @@ export function createApp(): {
   app
     .use(layui)
     .use(router)
+    .use(InstantSearch)
     .component('LayCode', LayCode)
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)

package.json

@@ -36,13 +36,17 @@
     "vue": "^3.2.31"
   },
   "dependencies": {
+    "@docsearch/js": "3",
     "@layui/icons-vue": "^1.0.7",
     "@layui/layer-vue": "^1.3.8",
     "@vueuse/core": "^7.6.2",
+    "algoliasearch": "^4.12.2",
     "async-validator": "^4.0.7",
     "evtd": "^0.2.3",
+    "instantsearch.css": "^7.4.5",
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
+    "vue-instantsearch": "^4.3.3",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {

src/component/backTop/index.vue

@@ -5,14 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import {
+import { ref, shallowRef, withDefaults, computed, onMounted, onBeforeUnmount } from "vue";
-  ref,
-  shallowRef,
-  withDefaults,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-} from "vue";
 import { useThrottle } from "@vueuse/core";
 import LayIcon from "../icon/index";
 import "./index.less";

src/utils/domUtil.ts

@@ -10,7 +10,6 @@ export function getTop(elem: any): any {
 }
 
 /**
- * 随便写的
  * 获取 left 属性值
  * <p>
  * @param elem dom