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

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleApi, searchApi, tagApi } from '@/api/client'
import type { ArticleListItem, Tag } 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)

const recommendedTags = ref<Tag[]>([])
const popularArticles = ref<ArticleListItem[]>([])

let debounceTimer: ReturnType<typeof setTimeout> | undefined

watch(keyword, () => {
  clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => {
    page.value = 1
    syncRoute()
    doSearch()
  }, 300)
})

watch(
  () => route.query.q,
  (q) => {
    const next = (q as string) ?? ''
    if (next !== keyword.value) keyword.value = next
  }
)

function syncRoute() {
  const q = keyword.value.trim()
  const current = (route.query.q as string) ?? ''
  if ((q || '') !== (current || '')) {
    router.replace({ name: 'Search', query: q ? { q } : {} })
  }
}

async function loadRecommendedTags() {
  try {
    const resp = await tagApi.apiTagsGet()
    const tags = resp.data.data ?? []
    recommendedTags.value = [...tags].sort((a, b) => b.articleCount - a.articleCount).slice(0, 8)
  } catch (e) {
    console.error(e)
    recommendedTags.value = []
  }
}

async function loadPopularArticles() {
  try {
    const resp = await articleApi.apiArticlesPopularGet(5)
    popularArticles.value = (resp.data.data as ArticleListItem[]) ?? []
  } catch (e) {
    console.error(e)
    popularArticles.value = []
  }
}

function goTag(tag: Tag) {
  router.push({ name: 'Home', query: { tag: tag.slug } })
}

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() {
  clearTimeout(debounceTimer)
  page.value = 1
  syncRoute()
  doSearch()
}

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

onMounted(() => {
  loadRecommendedTags()
  loadPopularArticles()
  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>

    <template v-if="!keyword">
      <div v-if="recommendedTags.length" class="search-recommend">
        <span class="section-label">标签推荐</span>
        <div class="tag-chips">
          <button v-for="tag in recommendedTags" :key="tag.id" class="tag-chip" @click="goTag(tag)">
            {{ tag.name }}
          </button>
        </div>
      </div>

      <div v-if="popularArticles.length" class="popular-section">
        <span class="section-label">热门文章</span>
        <div class="popular-list">
          <ArticleCard v-for="article in popularArticles" :key="article.id" :article="article" />
        </div>
      </div>
    </template>

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

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

.search-recommend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.popular-section {
  margin-bottom: 20px;
}

.popular-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.section-label {
  color: var(--ac-text-secondary);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  height: 26px;
  padding: 0 12px;
  background: var(--ac-primary-bg);
  color: var(--ac-primary-ink);
  border: 1px solid var(--ac-primary);
  border-radius: var(--song-radius-s);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--song-dur-1) var(--song-ease);
}

.tag-chip:hover {
  background: var(--ac-active);
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--ac-input-border);
  border-radius: var(--song-radius-l);
  font-size: 14px;
  background: var(--ac-bg-card);
  color: var(--ac-text);
  transition: border-color var(--song-dur-1) var(--song-ease);
}

.search-input:focus {
  border-color: var(--ac-primary);
  outline: none;
}

.search-btn {
  padding: 10px 22px;
  border: none;
  border-radius: var(--song-radius-l);
  background: var(--ac-primary-strong);
  color: var(--ac-primary-text);
  cursor: pointer;
  transition: opacity var(--song-dur-1) var(--song-ease);
}

.search-btn:hover {
  opacity: 0.9;
}

.error-text {
  color: var(--ac-danger);
}

.hint-text {
  color: var(--ac-text-disabled);
}
</style>