helper-center/packages/web/src/components/header.vue

<template>
  <div class="header grid min-h-sm w-full flex flex-col">
    <div class="w-full h-[100px] flex max-w-screen-xl my-0 mx-auto justify-between items-center">
      <div class="logo">
        <a href="/">
          <img v-if="locale === 'zh'" src="@/assets/img/logo_4dge_cn.png" alt="logo" />
          <img v-if="locale === 'en'" src="@/assets/img/logo_4dge_en.png" alt="logo" />
        </a>
      </div>
      <div class="menu">
        <n-dropdown :options="options" @select="handleSelect">
          <n-button v-if="!browser.isMobile" type="primary" ghost>{{
            locale === 'zh' ? $t('zh') : $t('en')
          }}</n-button>
          <n-text v-else type="primary" ghost>{{ locale === 'zh' ? $t('zh') : $t('en') }}</n-text>
        </n-dropdown>
      </div>
    </div>

    <div class="search-box w-full flex justify-center items-center flex-col">
      <n-h1 class="help-text font-size-[48px] font-500">{{ $t('helperTip') }}</n-h1>

      <n-auto-complete
        v-model:value="keySearch"
        :options="searchOptions"
        class="search-box max-w-[640px]"
        size="large"
        round 
        :placeholder="$t('enter_key')"
        blur-after-select
        @select="(index: number) => handleAutoSelect(index, searchOptions)"
        @keydown.enter="handleSearch"
      >
        <template #prefix>
          <n-icon :component="SearchOutline" />
        </template>
      </n-auto-complete>
    </div>
  </div>
</template>
<script setup lang="ts">
import { NH1, NIcon, NDropdown, NAutoComplete, NButton } from 'naive-ui'
import { SearchOutline } from '@vicons/ionicons5'
import { computedAsync } from '@vueuse/core'
import { getArticleSearch } from '@/api'
import browser from '@/utils/browser'

const { t, locale } = useI18n()

const keySearch = ref('')
const router = useRouter()
const route = useRoute()
const options = ref([
  {
    label: t('zh'),
    key: 'zh',
  },
  {
    label: t('en'),
    key: 'en',
  },
])

const searchOptions = computedAsync(
  async () => {
    if (keySearch.value) {
      const list = await getArticleSearch(keySearch.value)
      console.log('list', list.data)
      return Array.from(list.data || []).map((suffix) => {
        return {
          label: suffix.title,
          value: suffix.id,
        }
      })
    }
  },
  null, // initial state
)

const handleSelect = (key: string) => {
  locale.value = key
  localStorage.setItem('locale', key)

  router.replace({
    name: route.name,
    query: {
      lang: key,
    },
  })
  setTimeout(() => {
    location.reload()
  }, 50)
}
onMounted(() => {
  let localeValue = localStorage.getItem('locale') || 'zh'
  if (route.query.lang) {
    localeValue = String(route.query.lang)
    locale.value = localeValue
    localStorage.setItem('locale', localeValue)
  }

  locale.value = String(localeValue)
  document.title = t('web_title')
  console.log('route', route)
  // route.query.lang = localeValue
  router.replace({
    name: route.name,
    query: {
      lang: localeValue,
    },
  })
})
const handleAutoSelect = (index: number, list: any[]) => {
  const item = list.find((it) => it.value === index)
  // debugger;
  console.log('handleAutoUpdate', item)
  router.push({ path: `/showdoc/${item.value}` })
}
const handleSearch = () => {
  console.log('keySearch', keySearch.value)
  router.push({ path: '/search', query: { key: keySearch.value } })
}
</script>
<style lang="scss" scoped>
.header {
  background-image: url('@/assets/img/banner_bg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.search-box .n-input {
  --n-border-radius: 10px !important;
}

[is-mobile] {
  .header {
    padding: 0 0.4267rem;
    box-sizing: border-box;
    min-height: 1.3333rem;
    width: 100%;
    height: 7.7333rem;
    background-image: url('@/assets/img/mobile/banner_bg1.png');
    .logo {
      img {
        width: 2.2rem;
        height: 0.5867rem;
      }
    }
    .menu {
      n-text {
        font-size: 0.3733rem;
      }
    }
  }
  .search-box {
    height: 1.0667rem;
    border-radius: 0.5333rem;
    .help-text {
      font-weight: bold;
      font-size: 0.5333rem;
      color: #202020;
      line-height: 0.6267rem;
      margin-bottom: 0.76rem;
    }
  }
}
</style>