126 lines
5.1 KiB
Vue
126 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
import GeneralSettings from './GeneralSettings.vue';
|
|
import ProviderSettings from './ProviderSettings.vue';
|
|
import ProviderSidebar from './ProviderSidebar.vue';
|
|
import AIServiceProvider from './AIServiceProvider.vue';
|
|
|
|
const { providers } = await useModels();
|
|
|
|
const { currentPage, pageParams, open, setPage, close } = useSettings();
|
|
|
|
console.log(providers.value);
|
|
|
|
const PAGES_CONFIG = {
|
|
general: {
|
|
label: 'General',
|
|
icon: 'mynaui:cog-four',
|
|
component: GeneralSettings
|
|
},
|
|
providers: {
|
|
label: 'AI Providers',
|
|
icon: 'mynaui:api',
|
|
component: ProviderSettings,
|
|
sidebar: ProviderSidebar
|
|
},
|
|
} as const;
|
|
|
|
const runtimePage = computed(() => {
|
|
// 1. Get the base config (e.g., 'providers' or 'general')
|
|
const config = PAGES_CONFIG[currentPage.value as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
|
|
|
|
// 2. Determine the actual component to show
|
|
let component = config.component;
|
|
let label = config.label as string;
|
|
|
|
if (currentPage.value === 'providers' && pageParams.value.length > 0) {
|
|
component = AIServiceProvider;
|
|
const providerId = pageParams.value[0];
|
|
console.log("PROVIDERS", providers.value);
|
|
const provider = providers.value!.find(p => p.id === providerId);
|
|
label = provider ? provider.name : 'Unknown Provider';
|
|
}
|
|
|
|
return {
|
|
...config,
|
|
label,
|
|
component,
|
|
params: pageParams.value,
|
|
} as {
|
|
label: string;
|
|
icon: string;
|
|
component: Component;
|
|
sidebar?: Component;
|
|
params: string[];
|
|
};
|
|
});
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
close();
|
|
}
|
|
};
|
|
|
|
watch(open, (value) => {
|
|
if (value) {
|
|
document.body.addEventListener('keydown', handleKeyDown);
|
|
} else {
|
|
document.body.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (open.value) {
|
|
document.body.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
|
|
<div v-if="open" class="fixed inset-0 z-45 bg-black/80 backdrop-blur-md" @click.self="close">
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
|
|
enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
|
|
<div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
|
|
<div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--color-base)] rounded-xl shadow-2xl border border-[var(--color-highlight)]
|
|
overflow-hidden flex max-h-[90vh] p-2">
|
|
<nav class="w-64 flex flex-col gap-1 mr-2">
|
|
<!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
|
|
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="setPage" />
|
|
|
|
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setPage(id)"
|
|
:class="[currentPage === id ? 'bg-[var(--color-highlight)]' : 'hover:bg-[var(--color-highlight)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<Icon :name="config.icon" class="w-5 h-5" />
|
|
{{ config.label }}
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- DYNAMIC CONTENT -->
|
|
<main class="flex-1 flex flex-col overflow-hidden">
|
|
<div
|
|
class="flex-1 p-3 bg-[var(--color-neutral)] overflow-y-auto border rounded-lg border-[var(--color-highlight)]">
|
|
<header class="flex items-center justify-between pl-2 pb-2 ">
|
|
<h2 class="text-lg font-semibold m-0">{{ runtimePage.label }}</h2>
|
|
<button
|
|
class="hover:bg-[var(--color-highlight)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
|
|
@click="close">
|
|
<Icon name="mynaui:x-solid" />
|
|
</button>
|
|
</header>
|
|
<!-- KeepAlive preserves state if the user clicks back/forth between tabs -->
|
|
<KeepAlive>
|
|
<component @navigate="setPage" :is="runtimePage.component" />
|
|
</KeepAlive>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|