104 lines
3.9 KiB
Vue
104 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import GeneralSettings from '~/components/Settings/GeneralSettings.vue';
|
|
import ProviderSettings from '~/components/Settings/ProviderSettings.vue';
|
|
import ProviderSidebar from '~/components/Settings/ProviderSidebar.vue';
|
|
import SystemAssistants from '~/components/Settings/SystemAssistants.vue';
|
|
import AppearanceSettings from '~/components/Settings/AppearanceSettings.vue';
|
|
import AIServiceProvider from '~/components/Settings/AIServiceProvider.vue';
|
|
|
|
const { providers } = useModels();
|
|
|
|
const PAGES_CONFIG = {
|
|
general: {
|
|
label: 'General',
|
|
icon: 'i-mynaui-cog-four',
|
|
component: GeneralSettings
|
|
},
|
|
appearance: {
|
|
label: 'Appearance',
|
|
icon: 'i-tabler-palette',
|
|
component: AppearanceSettings
|
|
},
|
|
providers: {
|
|
label: 'AI Providers',
|
|
icon: 'i-mynaui-api',
|
|
component: ProviderSettings,
|
|
sidebar: ProviderSidebar
|
|
},
|
|
systemAssistants: {
|
|
label: 'System Assistants',
|
|
icon: 'i-mynaui-sparkles',
|
|
component: SystemAssistants
|
|
},
|
|
} as const;
|
|
|
|
const props = defineProps<{
|
|
page: keyof typeof PAGES_CONFIG;
|
|
params?: string;
|
|
}>();
|
|
|
|
const { close, setOptions } = useDialog();
|
|
|
|
const runtimePage = computed(() => {
|
|
// 1. Get the base config (e.g., 'providers' or 'general')
|
|
const config = PAGES_CONFIG[props.page 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 (props.page === 'providers' && props.params) {
|
|
component = AIServiceProvider;
|
|
const providerId = props.params;
|
|
const provider = providers.value!.find(p => p.id === providerId);
|
|
label = provider ? provider.name : 'Unknown Provider';
|
|
}
|
|
|
|
return {
|
|
...config,
|
|
label,
|
|
component,
|
|
params: props.params,
|
|
} as {
|
|
label: string;
|
|
icon: string;
|
|
component: Component;
|
|
sidebar?: Component;
|
|
params: string;
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-2 flex h-[70vh] h-[70dvh] w-[85vw]">
|
|
<nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto">
|
|
<!-- 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="(p: string, params?: string) => setOptions({ page: p, params })" :params="props.params" />
|
|
|
|
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setOptions({ page: id })"
|
|
:class="[page === id ? 'bg-[var(--color-hover)]' : 'hover:bg-[var(--color-hover)]', '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">
|
|
<span :class="['w-5 h-5 text-5', config.icon]"></span>
|
|
{{ config.label }}
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- DYNAMIC CONTENT -->
|
|
<main
|
|
class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-lg border-[var(--color-border)]">
|
|
<header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
|
|
<h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2>
|
|
<button
|
|
class="hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
|
|
@click="close">
|
|
<span class="i-mynaui-x-solid"></span>
|
|
</button>
|
|
</header>
|
|
<component @navigate="(p: string, params?: string) => setOptions({ page: p, params })"
|
|
:is="runtimePage.component" :params="props.params" />
|
|
</main>
|
|
</div>
|
|
</template>
|