style(stage-ui): UI minor fixes

This commit is contained in:
Neko Ayaka
2025-04-14 23:26:26 +08:00
parent 221e6eb6ce
commit 284a77cefc
5 changed files with 114 additions and 49 deletions
@@ -10,12 +10,12 @@ const modelValue = defineModel<string>({ required: true })
<input
v-model="modelValue"
:type="props.type || 'text'"
border="focus:primary-100 dark:focus:primary-400/50 2 solid neutral-200 dark:neutral-800"
border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
transition="all duration-200 ease-in-out"
text="disabled:neutral-400 dark:disabled:neutral-600"
cursor="disabled:not-allowed"
w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
shadow="sm"
bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
>
</template>
@@ -19,8 +19,9 @@ import IconItem from './IconItem.vue'
<IconItem
title="Modules"
description="Thinking, vision, speech synthesis, gaming, etc."
icon="i-lucide:blocks"
icon="i-solar:layers-bold-duotone"
to="/settings/modules"
class="font-sans"
/>
</Variant>
@@ -31,9 +32,9 @@ import IconItem from './IconItem.vue'
<IconItem
title="Modules"
description="Thinking, vision, speech synthesis, gaming, etc."
icon="i-lucide:blocks"
icon="i-solar:layers-bold-duotone"
to="/settings/modules"
class="_hover"
class="_hover font-sans"
/>
</Variant>
</Story>
@@ -12,7 +12,7 @@ defineProps<{
<RouterLink
box="border"
flex="~ row"
bg="neutral-50 dark:neutral-800"
bg="neutral-50 dark:neutral-900"
border="neutral-100 dark:neutral-800/25 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
class="menu-icon-item"
@@ -22,6 +22,7 @@ import IconStatusItem from './IconStatusItem.vue'
icon=" i-lucide:ghost"
to="/"
:configured="false"
class="font-sans"
/>
</Variant>
@@ -35,6 +36,7 @@ import IconStatusItem from './IconStatusItem.vue'
icon=" i-lucide:ghost"
to="/"
:configured="true"
class="font-sans"
/>
</Variant>
@@ -48,7 +50,7 @@ import IconStatusItem from './IconStatusItem.vue'
icon=" i-lucide:ghost"
to="/"
:configured="false"
class="_hover"
class="_hover font-sans"
/>
</Variant>
@@ -62,7 +64,7 @@ import IconStatusItem from './IconStatusItem.vue'
icon=" i-lucide:ghost"
to="/"
:configured="true"
class="_hover"
class="_hover font-sans"
/>
</Variant>
</Story>
+103 -41
View File
@@ -62,6 +62,9 @@ export interface ProviderMetadata {
listModels?: (config: Record<string, unknown>) => Promise<ModelInfo[]>
listVoices?: (config: Record<string, unknown>) => Promise<VoiceInfo[]>
}
validators: {
validateProviderConfig: (config: Record<string, unknown>) => Promise<boolean> | boolean
}
}
export interface ModelInfo {
@@ -140,6 +143,11 @@ export const useProvidersStore = defineStore('providers', () => {
return fetchOpenRouterModels(config)
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'ollama': {
id: 'ollama',
@@ -168,6 +176,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.baseUrl
},
},
},
'vllm': {
id: 'vllm',
@@ -225,6 +238,11 @@ export const useProvidersStore = defineStore('providers', () => {
]
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.baseUrl
},
},
},
'openai': {
id: 'openai',
@@ -253,6 +271,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'anthropic': {
id: 'anthropic',
@@ -319,6 +342,11 @@ export const useProvidersStore = defineStore('providers', () => {
] satisfies ModelInfo[]
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'google-generative-ai': {
id: 'google-generative-ai',
@@ -347,6 +375,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'xai': {
id: 'xai',
@@ -372,6 +405,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'deepseek': {
id: 'deepseek',
@@ -397,6 +435,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'elevenlabs': {
id: 'elevenlabs',
@@ -461,6 +504,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'microsoft-speech': {
id: 'microsoft-speech',
@@ -505,6 +553,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'together-ai': {
id: 'together-ai',
@@ -530,6 +583,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'novita-ai': {
id: 'novita-ai',
@@ -555,6 +613,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'fireworks-ai': {
id: 'fireworks-ai',
@@ -580,6 +643,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'featherless-ai': {
id: 'featherless-ai',
@@ -608,6 +676,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'cloudflare-workers-ai': {
id: 'cloudflare-workers-ai',
@@ -622,6 +695,11 @@ export const useProvidersStore = defineStore('providers', () => {
return []
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.accountId
},
},
},
'perplexity-ai': {
id: 'perplexity-ai',
@@ -675,6 +753,11 @@ export const useProvidersStore = defineStore('providers', () => {
]
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'mistral-ai': {
id: 'mistral-ai',
@@ -700,6 +783,11 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
'moonshot-ai': {
id: 'moonshot-ai',
@@ -725,51 +813,25 @@ export const useProvidersStore = defineStore('providers', () => {
})
},
},
validators: {
validateProviderConfig: (config) => {
return !!config.apiKey && !!config.baseUrl
},
},
},
}
// Configuration validation functions
function validateProvider(providerId: string): boolean {
async function validateProvider(providerId: string): Promise<boolean> {
const config = providerCredentials.value[providerId]
if (!config)
return false
switch (providerId) {
case 'openrouter-ai':
return !!config.apiKey && !!config.baseUrl
case 'ollama':
return !!config.baseUrl
case 'vllm':
return !!config.baseUrl
case 'openai':
return !!config.apiKey
case 'anthropic':
return !!config.apiKey
case 'elevenlabs':
return !!config.apiKey
case 'xai':
return !!config.apiKey
case 'deepseek':
return !!config.apiKey
case 'together-ai':
return !!config.apiKey
case 'novita-ai':
return !!config.apiKey
case 'fireworks-ai':
return !!config.apiKey
case 'featherless-ai':
return !!config.apiKey
case 'microsoft-speech':
return !!config.apiKey && !!config.region
case 'cloudflare-workers-ai':
return !!config.apiKey
case 'mistral-ai':
return !!config.apiKey
case 'moonshot-ai':
return !!config.apiKey
default:
return false
}
const metadata = providerMetadata[providerId]
if (!metadata)
return false
return await metadata.validators.validateProviderConfig(config)
}
// Create computed properties for each provider's configuration status
@@ -789,10 +851,10 @@ export const useProvidersStore = defineStore('providers', () => {
Object.keys(providerMetadata).forEach(initializeProvider)
// Update configuration status for all providers
function updateConfigurationStatus() {
Object.keys(providerMetadata).forEach((providerId) => {
configuredProviders.value[providerId] = validateProvider(providerId)
})
async function updateConfigurationStatus() {
await Promise.all(Object.keys(providerMetadata).map(async (providerId) => {
configuredProviders.value[providerId] = await validateProvider(providerId)
}))
}
// Call initially and watch for changes