- 拆分 ClientPage 为多个客户端子组件 - 将媒体播放器显示在当前选中文件下方 - 抽取并复用分页组件 - 为搜索结果补充分页状态和翻页控件 - 保持最近文件逻辑不变
30 lines
748 B
Vue
30 lines
748 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
activeTab: 'recent-added' | 'recent-played' | 'libraries'
|
|
}>()
|
|
|
|
defineEmits<{
|
|
switchTab: [tab: 'recent-added' | 'recent-played' | 'libraries']
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="root-tabs">
|
|
<button
|
|
type="button"
|
|
:class="{ active: activeTab === 'recent-added' }"
|
|
@click="$emit('switchTab', 'recent-added')"
|
|
>最近添加</button>
|
|
<button
|
|
type="button"
|
|
:class="{ active: activeTab === 'recent-played' }"
|
|
@click="$emit('switchTab', 'recent-played')"
|
|
>最近播放</button>
|
|
<button
|
|
type="button"
|
|
:class="{ active: activeTab === 'libraries' }"
|
|
@click="$emit('switchTab', 'libraries')"
|
|
>文件库</button>
|
|
</nav>
|
|
</template>
|