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 type { UserInfoItemVO } from '~/types/api'
import { userApi } from '~/api/user'
import { useApi } from '~/composables/useApi'

defineOptions({
  name: 'SearchPage',
})

definePageMeta({
  auth: false,
})

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

const keyword = ref('')
const list = ref<UserInfoItemVO[]>([])
const searching = ref(false)
const searched = ref(false)

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

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

const doSearch = async () => {
  const q = keyword.value.trim()
  if (!q) {
    list.value = []
    searched.value = true
    return
  }
  searching.value = true
  searched.value = true
  try {
    const res = await request(() => userApi.getUserInfos([q]))
    list.value = res?.list ?? []
  }
  finally {
    searching.value = false
  }
}

const handleSearch = () => {
  doSearch()
}

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

// Follow button is display-only until follow API is available
const toggleFollow = (_item: UserInfoItemVO) => {
  // TODO: call follow/unfollow API when available
}
</script>

<template>
  <div class="search-page min-h-screen bg-white text-[#1d2129]">
    <!-- Search bar: back, input, Search button (Figma 01_搜索页搜索栏) -->
    <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"
        >
          <van-icon
            name="cross"
            :size="16"
          />
        </button>
      </div>
      <button
        type="button"
        class="search-page__btn-search"
        @click="handleSearch"
      >
        {{ t('search.button') }}
      </button>
    </header>

    <!-- Related Contacts -->
    <section class="search-page__content">
      <h2 class="search-page__section-title">
        {{ t('search.relatedContacts') }}
      </h2>

      <div
        v-if="searching"
        class="search-page__loading"
      >
        {{ t('common.loading') }}
      </div>
      <div
        v-else-if="searched && !list.length"
        class="search-page__empty"
      >
        {{ t('search.noResult') }}
      </div>
      <ul
        v-else
        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>
          <button
            type="button"
            class="search-page__follow-btn"
            :class="{ 'search-page__follow-btn--followed': item.follow }"
            @click.stop="toggleFollow(item)"
          >
            {{ item.follow ? t('search.followed') : t('search.follow') }}
          </button>
        </li>
      </ul>
    </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;
}

.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;
}

.search-page__follow-btn {
  flex-shrink: 0;
  height: 22px;
  padding: 0 10px;
  border: none;
  border-radius: 200px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
  background: linear-gradient(90deg, #4ed2ff 0%, #b1ef5d 137.08%);
  -webkit-tap-highlight-color: transparent;

  &--followed {
    color: #c9cdd4;
    background: #f2f3f5;
    font-weight: 400;
    font-size: 11px;
  }
}
</style>