重构客户端页面并补充前端分页

- 拆分 ClientPage 为多个客户端子组件
- 将媒体播放器显示在当前选中文件下方
- 抽取并复用分页组件
- 为搜索结果补充分页状态和翻页控件
- 保持最近文件逻辑不变

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

@@ -0,0 +1,54 @@
+<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>
+      <a href="/admin" class="admin-link">管理</a>
+    </div>
+  </header>
+</template>