gami-web/app/pages/search.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import SearchSvg from '~/assets/icons/search/search-detail.svg'
import DelSvg from '~/assets/icons/search/del.svg'
import type { PlaymateSearchVo } from '~/types/api'
import { playmateApi } from '~/api/playmate'
import { useApi } from '~/composables/useApi'
import { SEARCH_HISTORY_KEY } from '~/constants'

defineOptions({
  name: 'SearchPage',
})

definePageMeta({
  auth: false,
})

const { t } = useI18n()
const router = useRouter()
const { request } = useApi()

const keyword = ref('')
const list = ref<PlaymateSearchVo[]>([])
const pageSize = 10
const pageCursor = ref<unknown>('')
const listLoading = ref(false)
const listFinished = ref(false)
const searched = ref(false)
const listRef = ref<{ check: () => void } | null>(null)

const MAX_HISTORY = 10
const searchHistory = ref<string[]>([])

function loadSearchHistory() {
  if (import.meta.client) {
    try {
      const raw = localStorage.getItem(SEARCH_HISTORY_KEY)
      const parsed = raw ? JSON.parse(raw) : []
      searchHistory.value = Array.isArray(parsed) ? parsed.slice(0, MAX_HISTORY) : []
    }
    catch {
      searchHistory.value = []
    }
  }
}

function saveSearchHistory(keyword: string) {
  const trimmed = keyword.trim()
  if (!trimmed)
    return
  const next = [trimmed, ...searchHistory.value.filter(k => k !== trimmed)].slice(0, MAX_HISTORY)
  searchHistory.value = next
  if (import.meta.client) {
    try {
      localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(next))
    }
    catch {
      // ignore
    }
  }
}

onMounted(() => {
  loadSearchHistory()
})

const handleBack = () => {
  router.back()
}

const handleClear = () => {
  keyword.value = ''
  resetList()
  searched.value = false
}

const resetList = () => {
  list.value = []
  pageCursor.value = ''
  listFinished.value = false
}

const loadList = async (isLoadMore = false) => {
  const q = keyword.value.trim()
  if (!q && !isLoadMore) {
    list.value = []
    searched.value = true
    listFinished.value = true
    return
  }
  if (isLoadMore) {
    if (!q || listFinished.value) return
  }

  listLoading.value = true
  if (!isLoadMore)
    searched.value = true

  try {
    const res = await request(() =>
      playmateApi.search({
        keyword: q || undefined,
        page: {
          size: pageSize,
          next: isLoadMore ? pageCursor.value ?? '' : '',
        },
      }),
    )
    if (!res) {
      if (!isLoadMore)
        list.value = []
      listFinished.value = true
      return
    }
    if (!isLoadMore)
      list.value = res.list ?? []
    else
      list.value.push(...(res.list ?? []))

    const hasNext = res.next != null && res.next !== ''
    listFinished.value = !hasNext
    pageCursor.value = hasNext ? res.next : ''
  }
  finally {
    listLoading.value = false
    // When content doesn't fill the viewport (e.g. tall phone), infinite scroll won't trigger.
    // Manually trigger List's check so it loads more until the screen is filled or no more data.
    if (list.value.length > 0 && !listFinished.value) {
      nextTick(() => listRef.value?.check())
    }
  }
}

const handleSearch = () => {
  const q = keyword.value.trim()
  if (q)
    saveSearchHistory(q)
  resetList()
  loadList(false)
}

const handleHistoryClick = (item: string) => {
  keyword.value = item
  handleSearch()
}

const handleUserClick = (userNo: string) => {
  router.push(`/user/profile?id=${userNo}`)
}
</script>

<template>
  <div class="search-page min-h-screen bg-white text-[#1d2129]">
    <header class="search-page__bar">
      <button
        type="button"
        class="search-page__back"
        aria-label="back"
        @click="handleBack"
      >
        <van-icon
          name="arrow-left"
          :size="24"
        />
      </button>
      <div class="search-page__input-wrap">
        <SearchSvg class="search-page__input-icon" />
        <input
          v-model="keyword"
          type="text"
          class="search-page__input"
          :placeholder="t('search.placeholder')"
          @keydown.enter.prevent="handleSearch"
        >
        <button
          v-if="keyword"
          type="button"
          class="search-page__clear"
          aria-label="clear"
          @click="handleClear"
        >
          <DelSvg />
        </button>
      </div>
      <button
        type="button"
        class="search-page__btn-search"
        @click="handleSearch"
      >
        {{ t('search.button') }}
      </button>
    </header>

    <section class="search-page__content">
      <!-- History (Figma: 搜索/记录标签) -->
      <div
        v-if="searchHistory.length > 0"
        class="search-page__history"
      >
        <h2 class="search-page__section-title">
          {{ t('search.history') }}
        </h2>
        <div class="search-page__history-tags">
          <button
            v-for="item in searchHistory"
            :key="item"
            type="button"
            class="search-page__history-tag"
            @click="handleHistoryClick(item)"
          >
            {{ item }}
          </button>
        </div>
      </div>

      <!-- Related Contacts -->
      <div class="search-page__related">
        <h2
          v-if="searched"
          class="search-page__section-title"
        >
          {{ t('search.relatedContacts') }}
        </h2>

        <div
          v-if="listLoading && !list.length"
          class="search-page__loading"
        >
          {{ t('common.loading') }}
        </div>
        <div
          v-else-if="searched && !list.length"
          class="search-page__empty"
        >
          {{ t('search.noResult') }}
        </div>
        <van-list
          v-else-if="searched"
          ref="listRef"
          v-model:loading="listLoading"
          :finished="listFinished"
          :finished-text="t('common.noMoreData')"
          :loading-text="t('common.loading')"
          :immediate-check="false"
          @load="loadList(true)"
        >
          <ul class="search-page__list">
            <li
              v-for="item in list"
              :key="item.userNo"
              class="search-page__row"
              @click="handleUserClick(item.userNo)"
            >
              <div class="search-page__row-left">
                <div class="search-page__avatar-wrap">
                  <NuxtImg
                    :src="item.avatar"
                    :alt="item.nickname"
                    class="search-page__avatar"
                    loading="lazy"
                  />
                </div>
                <div class="search-page__info">
                  <div class="search-page__name-row">
                    <span class="search-page__name">{{ item.nickname }}</span>
                    <CommonGender
                      :gender="item.gender"
                      :age="item.age"
                    />
                  </div>
                  <div class="search-page__meta">
                    <span>ID {{ item.userNo }}</span>
                    <!-- <span>{{ t('search.fansCount', { count: item.fansCount ?? 0 }) }}</span> -->
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.search-page {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.search-page__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 9px 16px;
  background: #fff;
}

.search-page__back {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.search-page__input-wrap {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #f2f3f5;
  border-radius: 20px;
}

.search-page__input-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.search-page__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  color: #1d2129;
  outline: none;

  &::placeholder {
    color: #c9cdd4;
  }
}

.search-page__clear {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86909c;
  -webkit-tap-highlight-color: transparent;
}

.search-page__btn-search {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: #1d2129;
  -webkit-tap-highlight-color: transparent;
}

.search-page__content {
  padding: 0 16px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-page__history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-page__history-tag {
  flex-shrink: 0;
  height: 22px;
  padding: 3px 8px;
  border: 1px solid #c9cdd4;
  border-radius: 200px;
  background: transparent;
  font-size: 11px;
  line-height: 14px;
  color: #454a50;
  -webkit-tap-highlight-color: transparent;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-page__section-title {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 10px;
}

.search-page__loading,
.search-page__empty {
  padding: 24px 0;
  font-size: 12px;
  color: #86909c;
  text-align: center;
}

.search-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-page__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
}

.search-page__row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.search-page__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5px solid #fff;
}

.search-page__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-page__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-page__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-page__name {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-page__meta {
  font-size: 11px;
  line-height: 14px;
  color: #86909c;
  display: flex;
  align-items: center;
  gap: 7px;
}
</style>