mach-cms-frontend/src/views/SearchView.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { searchApi } from '@/api/client'
import type { ArticleListItem } from '@/generated/api'
import ArticleCard from '@/components/ArticleCard.vue'
import Pagination from '@/components/Pagination.vue'

const route = useRoute()
const router = useRouter()

const keyword = ref<string>((route.query.q as string) ?? '')
const results = ref<ArticleListItem[]>([])
const page = ref(1)
const size = 10
const totalPages = ref(0)
const loading = ref(false)
const error = ref<string | null>(null)

async function doSearch() {
  const q = keyword.value.trim()
  if (!q) {
    results.value = []
    totalPages.value = 0
    return
  }
  loading.value = true
  error.value = null
  try {
    const resp = await searchApi.apiArticlesSearchGet(q, page.value, size)
    const data = resp.data.data
    results.value = (data?.list as ArticleListItem[]) ?? []
    totalPages.value = data?.totalPages ?? 0
  } catch (e) {
    console.error(e)
    error.value = '搜索失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

function submit() {
  const q = keyword.value.trim()
  page.value = 1
  router.push({ name: 'Search', query: q ? { q } : {} })
  doSearch()
}

function onPageChange(p: number) {
  page.value = p
  doSearch()
}

watch(
  () => route.query.q,
  (q) => {
    keyword.value = (q as string) ?? ''
    page.value = 1
    doSearch()
  }
)

onMounted(() => {
  if (keyword.value) doSearch()
})
</script>

<template>
  <div>
    <form class="search-form" @submit.prevent="submit">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入关键词搜索文章..." />
      <button class="search-btn" type="submit">搜索</button>
    </form>

    <p v-if="error" class="error-text">{{ error }}</p>
    <p v-else-if="loading" class="hint-text">搜索中...</p>
    <template v-else>
      <p v-if="keyword && results.length === 0" class="hint-text">未找到相关文章</p>
      <div v-else-if="results.length > 0">
        <ArticleCard v-for="article in results" :key="article.id" :article="article" />
        <Pagination :page="page" :total-pages="totalPages" @change="onPageChange" />
      </div>
      <p v-else class="hint-text">输入关键词开始搜索</p>
    </template>
  </div>
</template>

<style scoped>
.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  font-size: 14px;
}

.search-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
}

.error-text {
  color: #d33c3c;
}

.hint-text {
  color: #8a93a3;
}
</style>