feat: search

src/components/search/KUNGalgameSearchBox.vue

@@ -1,10 +1,33 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import SearchBox from './SearchBox.vue'
 import SearchHistory from './SearchHistory.vue'
+import SearchResult from './SearchResult.vue'
 
 import { useTempHomeStore } from '@/store/temp/home'
 import { storeToRefs } from 'pinia'
-const { isShowSearch } = storeToRefs(useTempHomeStore())
+
+import { HomeSearchTopic } from '@/api'
+
+const { search, isShowSearch } = storeToRefs(useTempHomeStore())
+
+const topics = ref<HomeSearchTopic[]>([])
+
+const searchTopics = async () => {
+  topics.value = (await useTempHomeStore().searchTopic()).data
+}
+
+watch(
+  () => [
+    search.value.keywords,
+    search.value.category,
+    search.value.sortField,
+    search.value.sortOrder,
+  ],
+  async () => {
+    await searchTopics()
+  }
+)
 </script>
 
 <template>
@@ -14,7 +37,9 @@ const { isShowSearch } = storeToRefs(useTempHomeStore())
         <div class="container" @click.stop>
           <SearchBox />
 
-          <SearchHistory />
+          <SearchHistory v-if="search.keywords" />
+
+          <SearchResult :topics="topics" v-if="topics.length" />
         </div>
       </div>
     </Transition>
@@ -39,8 +64,8 @@ const { isShowSearch } = storeToRefs(useTempHomeStore())
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: start;
+  flex-direction: column;
+  align-items: center;
   white-space: nowrap;
   position: relative;
   color: var(--kungalgame-font-color-3);
@@ -52,6 +77,7 @@ const { isShowSearch } = storeToRefs(useTempHomeStore())
   max-width: 500px;
   min-height: 200px;
   max-height: 600px;
+  overflow-y: scroll;
 }
 
 .search-enter-from {

src/components/search/SearchBox.vue

@@ -52,12 +52,16 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .search-form {
-  width: 40vw;
+  position: sticky;
+  top: 0;
+  width: calc(40vw - 20px);
   max-width: 777px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 17px;
+  background-color: var(--kungalgame-trans-white-2);
+  backdrop-filter: blur(5px);
 }
 
 .input {

src/components/search/SearchHistory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { ref, onBeforeMount, onMounted } from 'vue'
+import { onBeforeMount } from 'vue'
 
 import { usePersistKUNGalgameHomeStore } from '@/store/modules/home'
 import { useTempHomeStore } from '@/store/temp/home'
@@ -9,8 +9,6 @@ import { storeToRefs } from 'pinia'
 const { searchHistory } = storeToRefs(usePersistKUNGalgameHomeStore())
 const { search } = storeToRefs(useTempHomeStore())
 
-const isShowSearchHistory = ref(false)
-
 onBeforeMount(() => {
   search.value.keywords = ''
 })
@@ -26,16 +24,10 @@ const clearSearchHistory = () => {
 const handleDeleteHistory = (historyIndex: number) => {
   searchHistory.value.splice(historyIndex, 1)
 }
-
-onMounted(() => {
-  if (searchHistory.value.length) {
-    isShowSearchHistory.value = true
-  }
-})
 </script>
 
 <template>
-  <div v-if="isShowSearchHistory" class="history">
+  <div class="history">
     <div class="title">
       <span>{{ $tm('mainPage.header.history') }}</span>
       <span @click="clearSearchHistory">

src/components/search/SearchResult.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { HomeSearchTopic } from '@/api'
+
+import { useTempHomeStore } from '@/store/temp/home'
+import { storeToRefs } from 'pinia'
+
+const router = useRouter()
+const { isShowSearch } = storeToRefs(useTempHomeStore())
+
+const props = defineProps<{
+  topics: HomeSearchTopic[]
+}>()
+
+const handleClickTopic = (tid: number) => {
+  router.push(`/topic/${tid}`)
+  isShowSearch.value = false
+}
+</script>
+
+<template>
+  <div class="result">
+    <div
+      v-for="(topic, index) in props.topics"
+      :key="index"
+      :to="`/topic/${topic.tid}`"
+      class="topic"
+      @click="handleClickTopic(topic.tid)"
+    >
+      <span class="title">{{ topic.title }}</span>
+      <span class="content">{{ topic.content }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.result {
+  width: 100%;
+  top: 70px;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+
+  .topic {
+    color: var(--kungalgame-font-color-3);
+    background-color: var(--kungalgame-trans-blue-0);
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 17px;
+    cursor: pointer;
+
+    &:first-child {
+      margin-top: 10px;
+    }
+
+    &:hover {
+      transition: all 0.2s;
+      background-color: var(--kungalgame-white);
+      box-shadow: var(--kungalgame-shadow-1);
+    }
+  }
+
+  span {
+    &:nth-child(1) {
+      color: var(--kungalgame-blue-5);
+    }
+
+    &:nth-child(2) {
+      white-space: wrap;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+</style>

src/store/temp/home.ts

@@ -16,7 +16,7 @@ export const useTempHomeStore = defineStore({
       keywords: '',
       category: ['Galgame'],
       page: 1,
-      limit: 17,
+      limit: 10,
       sortField: 'updated',
       sortOrder: 'desc',
       isLoading: true,

src/views/Home/content/article/components/TopicPart.vue

@@ -146,7 +146,6 @@ const getRepliesCount = computed(() => {
   width: 100%;
   display: flex;
   align-items: center;
-  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;