feat: add search dropdown

open-isle-cli/src/components/Dropdown.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="dropdown" ref="wrapper">
     <div class="dropdown-display" @click="toggle">
+      <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search">
       <template v-if="multiple">
         <span v-if="selectedLabels.length">
           <template v-for="(label, idx) in selectedLabels" :key="label.id">
@@ -29,8 +30,9 @@
         <span v-else class="placeholder">{{ placeholder }}</span>
       </template>
       <i class="fas fa-caret-down dropdown-caret"></i>
+      </slot>
     </div>
-    <div v-if="open" class="dropdown-menu">
+    <div v-if="open" :class="['dropdown-menu', menuClass]">
       <div class="dropdown-search">
         <i class="fas fa-search search-icon"></i>
         <input type="text" v-model="search" placeholder="搜索" />
@@ -39,13 +41,15 @@
         <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
       <template v-else>
-        <div class="dropdown-option" v-for="o in filteredOptions" :key="o.id" @click="select(o.id)"
+        <div v-for="o in filteredOptions" :key="o.id" @click="select(o.id)"
-          :class="{ 'selected': isSelected(o.id) }">
+          :class="['dropdown-option', optionClass, { 'selected': isSelected(o.id) }]">
-          <template v-if="o.icon">
+          <slot name="option" :option="o" :isSelected="isSelected(o.id)">
-            <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" />
+            <template v-if="o.icon">
-            <i v-else :class="['option-icon', o.icon]"></i>
+              <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" />
-          </template>
+              <i v-else :class="['option-icon', o.icon]"></i>
-          <span>{{ o.name }}</span>
+            </template>
+            <span>{{ o.name }}</span>
+          </slot>
         </div>
       </template>
     </div>
@@ -63,7 +67,10 @@ export default {
     modelValue: { type: [Array, String, Number], default: () => [] },
     placeholder: { type: String, default: '请选择' },
     multiple: { type: Boolean, default: false },
-    fetchOptions: { type: Function, required: true }
+    fetchOptions: { type: Function, required: true },
+    remote: { type: Boolean, default: false },
+    menuClass: { type: String, default: '' },
+    optionClass: { type: String, default: '' }
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
@@ -99,6 +106,7 @@ export default {
     }
 
     const filteredOptions = computed(() => {
+      if (props.remote) return options.value
       if (!search.value) return options.value
       return options.value.filter(o => o.name.toLowerCase().includes(search.value.toLowerCase()))
     })
@@ -109,13 +117,13 @@ export default {
       }
     }
 
-    const loadOptions = async () => {
+    const loadOptions = async (kw = '') => {
-      if (loaded.value) return
+      if (!props.remote && loaded.value) return
       try {
         loading.value = true
-        const res = await props.fetchOptions()
+        const res = await props.fetchOptions(props.remote ? kw : undefined)
         options.value = Array.isArray(res) ? res : []
-        loaded.value = true
+        if (!props.remote) loaded.value = true
       } catch {
         options.value = []
       } finally {
@@ -124,14 +132,26 @@ export default {
     }
 
     watch(open, async val => {
-      if (val && !loaded.value) {
+      if (val) {
-        await loadOptions()
+        if (props.remote) {
+          await loadOptions(search.value)
+        } else if (!loaded.value) {
+          await loadOptions()
+        }
+      }
+    })
+
+    watch(search, async val => {
+      if (props.remote && open.value) {
+        await loadOptions(val)
       }
     })
 
     onMounted(() => {
       document.addEventListener('click', clickOutside)
-      loadOptions()
+      if (!props.remote) {
+        loadOptions()
+      }
     })
 
     onBeforeUnmount(() => {

open-isle-cli/src/components/SearchDropdown.vue

@@ -0,0 +1,92 @@
+<template>
+  <Dropdown
+    v-model="selected"
+    :fetch-options="fetchResults"
+    remote
+    menu-class="search-menu"
+    option-class="search-option"
+  >
+    <template #display="{ toggle, search }">
+      <div class="search-input" @click="toggle">
+        <i class="search-input-icon fas fa-search"></i>
+        <input type="text" v-model="keyword" placeholder="Search" @focus="toggle" @input="search.value = keyword" />
+      </div>
+    </template>
+    <template #option="{ option }">
+      <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
+      <span v-html="highlight(option.text)"></span>
+    </template>
+  </Dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+import Dropdown from './Dropdown.vue'
+import { API_BASE_URL } from '../main'
+
+export default {
+  name: 'SearchDropdown',
+  components: { Dropdown },
+  setup() {
+    const keyword = ref('')
+    const selected = ref(null)
+
+    const fetchResults = async (kw) => {
+      if (!kw) return []
+      const res = await fetch(`${API_BASE_URL}/api/search/global?keyword=${encodeURIComponent(kw)}`)
+      if (!res.ok) return []
+      const data = await res.json()
+      return data.map(r => ({ id: r.id, text: r.text, type: r.type }))
+    }
+
+    const highlight = (text) => {
+      if (!keyword.value) return text
+      const reg = new RegExp(keyword.value, 'gi')
+      return text.replace(reg, m => `<span class="highlight">${m}</span>`)
+    }
+
+    const iconMap = {
+      user: 'fas fa-user',
+      post: 'fas fa-file-alt',
+      comment: 'fas fa-comment'
+    }
+
+    return { keyword, selected, fetchResults, highlight, iconMap }
+  }
+}
+</script>
+
+<style scoped>
+.search-input {
+  display: flex;
+  align-items: center;
+  border: 1px solid lightgray;
+  border-radius: 10px;
+  padding: 10px;
+  width: 100%;
+  max-width: 600px;
+}
+.search-input input {
+  border: none;
+  outline: none;
+  width: 100%;
+  margin-left: 10px;
+  font-size: 16px;
+}
+.search-menu {
+  width: 100%;
+  max-width: 600px;
+}
+.search-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+}
+.highlight {
+  color: var(--primary-color);
+}
+.result-icon {
+  opacity: 0.6;
+}
+</style>

open-isle-cli/src/views/HomePageView.vue

@@ -3,10 +3,7 @@
     <div class="search-container">
       <div class="search-title">Where possible begins</div>
       <div class="search-subtitle">希望你喜欢这里。有问题，请提问，或搜索现有帖子</div>
-      <div class="search-input">
+      <SearchDropdown />
-        <i class="search-input-icon fas fa-search"></i>
-        <input type="text" placeholder="Search">
-      </div>
     </div>
 
 
@@ -92,6 +89,7 @@ import { API_BASE_URL } from '../main'
 import CategorySelect from '../components/CategorySelect.vue'
 import TagSelect from '../components/TagSelect.vue'
 import ArticleTags from '../components/ArticleTags.vue'
+import SearchDropdown from '../components/SearchDropdown.vue'
 import { hatch } from 'ldrs'
 hatch.register()
 
@@ -101,7 +99,8 @@ export default {
   components: {
     CategorySelect,
     TagSelect,
-    ArticleTags
+    ArticleTags,
+    SearchDropdown
   },
   data() {
     return {
@@ -182,26 +181,6 @@ export default {
   font-size: 16px;
 }
 
-.search-input {
-  display: flex;
-  align-items: center;
-
-  border: 1px solid lightgray;
-  border-radius: 10px;
-  padding: 10px;
-
-  width: 100%;
-  max-width: 600px;
-  margin-top: 20px;
-}
-
-.search-input input {
-  border: none;
-  outline: none;
-  font-size: 16px;
-  width: 100%;
-  margin-left: 10px;
-}
 
 .loading-container {
   display: flex;