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