<script lang="ts" setup>
import { ref } from 'vue';
import { VPageHeader, VTabbar } from '@halo-dev/components';
import DownloadManager from './DownloadManager.vue';
import LinkManager from './LinkManager.vue';

type ResourceTab = 'download' | 'link';

const activeTab = ref<ResourceTab>('download');
</script>

<template>
  <VPageHeader title="资源访问管理" />

  <div class="resource-manager m-4">
    <VTabbar
      v-model:active-id="activeTab"
      :items="[
        { id: 'download', label: '下载资源' },
        { id: 'link', label: '受保护链接' },
      ]"
    />

    <div class="resource-manager__body">
      <DownloadManager v-if="activeTab === 'download'" embedded />
      <LinkManager v-else embedded />
    </div>
  </div>
</template>

<style scoped>
.resource-manager__body {
  margin-top: 12px;
}
</style>
