FileShare/FileShare-Web-VUE/src/components/client/ClientHeader.vue

<script setup lang="ts">
import type { BrowseDirectoryResponse } from '../../api'

defineProps<{
  title: string
  activeTab: 'recent-added' | 'recent-played' | 'libraries'
  recentCount: number
  activeRootsCount: number
  isBrowsingRoots: boolean
  isSearching: boolean
  browseData: BrowseDirectoryResponse | null
  searchQuery: string
}>()

defineEmits<{
  'update:searchQuery': [value: string]
  search: []
  back: []
  exitSearch: []
  openQr: []
}>()
</script>

<template>
  <header class="mobile-header">
    <div>
      <h1>{{ title }}</h1>
      <p>
        <template v-if="activeTab === 'recent-added'">{{ recentCount }} 个文件</template>
        <template v-else-if="activeTab === 'recent-played'">{{ recentCount }} 个文件</template>
        <template v-else-if="isBrowsingRoots">{{ activeRootsCount }} 个目录</template>
        <template v-else-if="browseData">
          {{ browseData.subdirectories.length }} 个文件夹 · {{ browseData.total }} 个文件
        </template>
      </p>
    </div>
    <div class="mobile-header-actions">
      <button v-if="!isBrowsingRoots" type="button" class="back-button" @click="$emit('back')">返回</button>
      <button v-if="isSearching" type="button" class="back-button" @click="$emit('exitSearch')">返回</button>
      <form class="search-form" @submit.prevent="$emit('search')">
        <input
          :value="searchQuery"
          type="search"
          placeholder="搜索文件..."
          class="search-input"
          @input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
        />
        <button type="submit" class="search-submit">搜索</button>
      </form>
      <button type="button" class="qr-button" title="生成二维码" @click="$emit('openQr')">二维码</button>
      <router-link to="/admin" class="admin-link">管理</router-link>
    </div>
  </header>
</template>