fix: dropdown settings buttons | fix: improve model selector
I should have split this into two commits, but I found the issue with the settings buttons *after* I changed how the model selector worked, so its all in this single commit.
This commit is contained in:
@@ -32,19 +32,24 @@ const PAGES_CONFIG = {
|
||||
},
|
||||
} as const;
|
||||
|
||||
const { currentPage, pageParams, setPage, close } = useSettings();
|
||||
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[currentPage.value as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.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 (currentPage.value === 'providers' && pageParams.value.length > 0) {
|
||||
if (props.page === 'providers' && props.params) {
|
||||
component = AIServiceProvider;
|
||||
const providerId = pageParams.value[0];
|
||||
const providerId = props.params;
|
||||
const provider = providers.value!.find(p => p.id === providerId);
|
||||
label = provider ? provider.name : 'Unknown Provider';
|
||||
}
|
||||
@@ -53,13 +58,13 @@ const runtimePage = computed(() => {
|
||||
...config,
|
||||
label,
|
||||
component,
|
||||
params: pageParams.value,
|
||||
params: props.params,
|
||||
} as {
|
||||
label: string;
|
||||
icon: string;
|
||||
component: Component;
|
||||
sidebar?: Component;
|
||||
params: string[];
|
||||
params: string;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@@ -68,10 +73,11 @@ const runtimePage = computed(() => {
|
||||
<div class="p-2 flex w-full">
|
||||
<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="setPage" />
|
||||
<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="setPage(id)"
|
||||
:class="[currentPage === 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']">
|
||||
<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">
|
||||
<Icon :name="config.icon" class="w-5 h-5" />
|
||||
{{ config.label }}
|
||||
@@ -90,7 +96,8 @@ const runtimePage = computed(() => {
|
||||
<Icon name="mynaui:x-solid" />
|
||||
</button>
|
||||
</header>
|
||||
<component @navigate="setPage" :is="runtimePage.component" />
|
||||
<component @navigate="(p: string, params?: string) => setOptions({ page: p, params })"
|
||||
:is="runtimePage.component" :params="props.params" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -41,7 +41,7 @@ onUnmounted(() => {
|
||||
<div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
|
||||
overflow-hidden flex max-h-[90vh]">
|
||||
<KeepAlive>
|
||||
<Settings v-if="page === DialogType.Settings" />
|
||||
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
|
||||
|
||||
<Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
|
||||
</KeepAlive>
|
||||
|
||||
Reference in New Issue
Block a user