做一个网盘搜索引擎

<template>
  <header>
    <div class="title">阿里云盘搜索神器</div>
    <div class="slogan">
      互联网具有天然的资源共享性，本小站不是资源的生产者，不存储任何资源，仅仅只是互联网的搬运工
    </div>
  </header>
  <main>
    <div class="search-input">
      <t-auto-complete
        v-model="searchValue"
        :options="options"
        placeholder="请输入关键词搜索"
        size="large"
        highlight-keyword
        filterable
        class="t-demo-autocomplete__search"
        @change="loadSuggest"
        @enter="searchData"
        @select="searchData"
      >
        <template v-if="searchValue" #suffix>
          <CloseCircleFilledIcon class="t-input__suffix-clear" @click="searchValue = ''" />
        </template>
        <template #suffixIcon>
          <t-button shape="square" size="large" @click="searchData"><SearchIcon /></t-button>
        </template>
      </t-auto-complete>
    </div>
    <t-loading size="small" :loading="loading" show-overlay style="width: 100%; height: 100%">
      <div class="list-container">
        <t-list :split="true">
          <t-list-item v-for="(item, index) in searchResult" :key="index">
            <t-list-item-meta :description="`提取码: ${item.extractCode || '--'}`">
              <template #title>
                <div class="result-title" v-html="item.highlight.title[0]"></div>
              </template>
            </t-list-item-meta>
            <template #action>
              <t-link
                theme="primary"
                hover="#000000"
                style="margin-left: 16px"
                @click="copyCode(item.extractCode)"
              >
                复制提取码
              </t-link>
              <t-link
                theme="primary"
                hover="#000000"
                style="margin-left: 16px"
                @click="openAdDialog(item.pan_url)"
              >
                跳转
              </t-link>
            </template>
          </t-list-item>
        </t-list>
        <div v-if="!searchResult.length" class="empty-container">
          <div class="empty">
            <!-- <WalletIcon size="80px" /> -->
            <img src="@/assets/empty.png" alt="" style="width: 240px; opacity: 0.5" />
            <div class="text">请输入搜索或暂无数据</div>
          </div>
        </div>
      </div>
    </t-loading>
    <div v-if="page.total" class="pagination-container">
      <t-pagination
        v-model="page.NO"
        v-model:pageSize="page.size"
        :total="page.total"
        :showPreviousAndNextBtn="false"
        page-ellipsis-mode="both-ends"
        @page-size-change="onPageSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </main>
  <footer></footer>
  <t-dialog
    v-model:visible="visible"
    header="请认真阅读以下声明"
    confirmBtn="同意声明并跳转"
    @confirm="jumpLink"
    @close="closeAdDialog"
  >
    <p class="content">
      1.
      本站链接为程序自动收集自互联网，不储存、复制、传播、控制编辑任何网盘文件，不提供下载服务，链接跳转至官方网盘，文件的有效性和安全性需要您自行判断。
    </p>
    <p class="content">
      2. 本站坚决杜绝一切违规不良信息，如您发现任何涉嫌违规的网盘信息，请立即向<a
        href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_dingtalk/suit_bu1_dingtalk202103181300_11832.html"
        >网盘官方网站</a
      >举报
    </p>
    <p class="content">
      3. 本站是笔者在线作品演示网站，所有服务仅供学习交流使用，搜索引擎技术细节可以访问笔者的<a
        href="https://justin3go.com"
        >个人博客</a
      >查找。
    </p>
  </t-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue'
import { SearchIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next'
import { MessagePlugin } from 'tdesign-vue-next'
import searchApi from '@/service/apis/search'
import useClipboard from 'vue-clipboard3'

const searchValue = ref('')
const options = ref([])

interface ISearchResultItem {
  title: string
  pan_url: string
  extractCode: string
  highlight: {
    title: string[]
  }
}

const searchResult: Ref<ISearchResultItem[]> = ref([])

const page = reactive({
  total: 0,
  NO: 1,
  size: 10
})

const loading = ref(false)

async function loadData() {
  if (loading.value) return
  loading.value = true
  const data = await searchApi.search({
    pageNo: page.NO,
    pageSize: page.size,
    query: searchValue.value
  })
  searchResult.value = data?.data?.data || []
  page.total = data?.data?.total || 0
  loading.value = false
}

function resetPage() {
  page.total = 0
  page.NO = 1
}

async function searchData() {
  resetPage()
  loadData()
}

const timer = ref()
function loadSuggest() {
  clearTimeout(timer.value)
  timer.value = setTimeout(async () => {
    const data = await searchApi.suggest({
      input: searchValue.value
    })
    const resOptions = data?.data?.suggest[0]?.options
    // eslint-disable-next-line no-control-regex
    options.value = resOptions?.map((item: any) => item.text.replace(/u001f/g, '')) || []
  }, 200)
}

function onPageSizeChange(size: number) {
  page.size = size
  loadData()
}

function onCurrentChange(index: number) {
  page.NO = index
  loadData()
  MessagePlugin.success(`转到第${index}页`)
}

async function copyCode(code: string) {
  if (!code) {
    MessagePlugin.info('无需提取码')
  }
  const { toClipboard } = useClipboard()
  await toClipboard(code)
  MessagePlugin.success('复制成功')
}

const visible = ref(false)
const curPanUrl = ref('')
function openAdDialog(url: string) {
  visible.value = true
  curPanUrl.value = url
}

function closeAdDialog() {
  visible.value = false
}

function jumpLink() {
  let url = curPanUrl.value
  if (!url.startsWith('https://')) url = 'https://' + url
  window.open(url, '_blank')
}
</script>