jono/deep-research-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ConfigManager): make sections collapsible

Browse Source
This commit is contained in:
AnotiaWang
2025-02-25 17:08:37 +08:00
parent 50b7e3380e
commit 4a2b72445e
1 changed files with 197 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/ConfigManager.vue
View File

@ -21,6 +21,19 @@
/** If loading AI models failed, use a plain input to improve UX */
const isLoadAiModelsFailed = ref(false)
const activeSections = ref(['0', '1'])
const settingSections = computed(() => [
{
label: t('settings.ai.provider'),
icon: 'i-lucide-bot',
slot: 'ai',
},
{
label: t('settings.webSearch.provider'),
icon: 'i-lucide-search',
slot: 'web-search',
},
])
const aiProviderOptions = computed(() => [
{
label: t('settings.ai.providers.openaiCompatible.title'),
@ -170,9 +183,15 @@
<UButton icon="i-lucide-settings" />
<template #body>
<div class="flex flex-col gap-y-2">
<UAccordion
v-model="activeSections"
type="multiple"
:items="settingSections"
collapsible
>
<!-- AI provider -->
<h3 class="font-bold">{{ $t('settings.ai.provider') }}</h3>
<template #ai>
<div class="flex flex-col gap-y-2 mb-2">
<UFormField>
<template v-if="selectedAiProvider?.help" #help>
<i18n-t
@ -187,7 +206,9 @@
target="_blank"
variant="link"
>
{{ selectedAiProvider.linkText || selectedAiProvider.link }}
{{
selectedAiProvider.linkText || selectedAiProvider.link
}}
</UButton>
</i18n-t>
</template>
@ -197,8 +218,6 @@
:items="aiProviderOptions"
/>
</UFormField>
<div class="flex flex-col gap-y-2">
<UFormField
:label="$t('settings.ai.apiKey')"
:required="config.ai.provider !== 'ollama'"
@ -248,11 +267,11 @@
tokens
</UFormField>
</div>
<USeparator class="my-2" />
</template>
<!-- Web search -->
<h3 class="font-bold"> {{ $t('settings.webSearch.provider') }} </h3>
<template #web-search>
<div class="flex flex-col gap-y-2">
<UFormField>
<template #help>
<i18n-t
@ -328,14 +347,20 @@
<!-- Tavily-specific settings -->
<template v-if="config.webSearch.provider === 'tavily'">
<UFormField
:label="$t('settings.webSearch.providers.tavily.advancedSearch')"
:help="$t('settings.webSearch.providers.tavily.advancedSearchHelp')"
:label="
$t('settings.webSearch.providers.tavily.advancedSearch')
"
:help="
$t('settings.webSearch.providers.tavily.advancedSearchHelp')
"
>
<USwitch v-model="config.webSearch.tavilyAdvancedSearch" />
</UFormField>
<UFormField
:label="$t('settings.webSearch.providers.tavily.searchTopic')"
:help="$t('settings.webSearch.providers.tavily.searchTopicHelp')"
:help="
$t('settings.webSearch.providers.tavily.searchTopicHelp')
"
>
<USelect
v-model="config.webSearch.tavilySearchTopic"
@ -347,6 +372,9 @@
</template>
</div>
</template>
</UAccordion>
</template>
<template #footer>
<div class="flex items-center justify-between gap-2 w-full">
<p class="text-sm text-gray-500">