64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<template>
|
|
<div class="media-page" style="background: var(--nav-bg);">
|
|
<nav class="subtabs" style="display:flex; gap:0; border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface); padding: 0 1rem;">
|
|
<button
|
|
:class="['subtab-btn', { active: tab === 'visuel' }]"
|
|
@click="tab = 'visuel'"
|
|
>
|
|
🌳 RAG visuel
|
|
</button>
|
|
<button
|
|
:class="['subtab-btn', { active: tab === 'backend' }]"
|
|
@click="tab = 'backend'"
|
|
>
|
|
⚙ LightRAG backend
|
|
</button>
|
|
<button
|
|
:class="['subtab-btn', { active: tab === 'projets' }]"
|
|
@click="tab = 'projets'"
|
|
>
|
|
📚 Projets
|
|
</button>
|
|
</nav>
|
|
|
|
<MediaTabVisuel v-if="tab === 'visuel'" />
|
|
<MediaTabBackend v-else-if="tab === 'backend'" />
|
|
<MediaTabProjets v-else-if="tab === 'projets'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const tab = ref<'visuel' | 'backend' | 'projets'>(
|
|
(['visuel', 'backend', 'projets'].includes(route.query.tab as string)
|
|
? route.query.tab as 'visuel' | 'backend' | 'projets'
|
|
: 'visuel')
|
|
)
|
|
|
|
watch(tab, (newTab) => {
|
|
router.replace({ query: { ...route.query, tab: newTab } })
|
|
})
|
|
|
|
useHead({ title: 'AEP - Media' })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.media-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
|
|
.subtabs { display: flex; gap: 0; flex-shrink: 0; }
|
|
.subtab-btn {
|
|
padding: 10px 18px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
color: var(--nav-text-muted);
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
.subtab-btn:hover { color: var(--nav-text); }
|
|
.subtab-btn.active { color: var(--nav-primary-solid); border-bottom-color: var(--nav-primary-solid); font-weight: 600; }
|
|
</style>
|