admin777
6bdcb48c97
前端： - 引入 vue-router，HTML5 History 模式，干净 URL - ClientPage.vue 拆分为 5 个独立路由视图组件 - 提取共享状态到 composables（useLibraryRoots/useMediaPlayer/useViewMode/useModals） - 新增 DefaultLayout 统一布局 - 导航链接改为 router-link - FileCard 网格视图修复删除/压缩按钮 hover 不显示问题 后端： - 压缩密码编码修复：DotNetZip/SharpZipLib 不支持 UTF-8 密码 - 替换为 SharpZipLib + 中文字符替换为 # 的 ASCII 安全密码方案
55 lines
1.9 KiB
Vue
55 lines
1.9 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>
|
|
<router-link to="/admin" class="admin-link">管理</router-link>
|
|
</div>
|
|
</header>
|
|
</template>
|