55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
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>
|
||
|
|
<a href="/admin" class="admin-link">管理</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</template>
|