mirror of
https://github.com/zyycn/codex-proxy-rs.git
synced 2026-11-06 08:06:19 +00:00
ZyyandCodex
3cbebb5f9b
Unify theme namespaces and plugin theme delivery, improve validation and empty states, and pin UI v0.8.0 plus plugin workbench v0.9.0. Co-authored-by: Codex <noreply@openai.com>
79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
|
||
import { useI18n } from 'vue-i18n'
|
||
import { authenticationIcon, formatAuthenticationLabel, formatProviderLabel, providerIcon } from '@/utils/providers'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
provider?: string | null
|
||
authenticationKind?: string | null
|
||
size?: 'xs' | 'sm' | 'md'
|
||
}>(),
|
||
{
|
||
size: 'md',
|
||
},
|
||
)
|
||
|
||
const { t } = useI18n({ useScope: 'global' })
|
||
|
||
const normalizedProvider = computed(() => (props.provider ?? '').trim().toLowerCase())
|
||
const providerIconComponent = computed(() => normalizedProvider.value
|
||
? providerIcon(normalizedProvider.value)
|
||
: undefined)
|
||
const authenticationIconComponent = computed(() => authenticationIcon(props.authenticationKind))
|
||
const showAuthenticationKind = computed(() => props.authenticationKind !== undefined)
|
||
const groupGapClass = computed(() => {
|
||
if (props.size === 'xs')
|
||
return 'gap-0.75'
|
||
return props.size === 'sm'
|
||
? 'gap-1'
|
||
: 'gap-2'
|
||
})
|
||
const iconContainerClass = computed(() => {
|
||
if (props.size === 'xs')
|
||
return 'size-4.5 rounded-md'
|
||
return props.size === 'sm'
|
||
? 'size-5 rounded-md'
|
||
: 'size-7 rounded-lg'
|
||
})
|
||
const iconClass = computed(() => {
|
||
if (props.size === 'xs')
|
||
return 'size-2.5'
|
||
return props.size === 'sm'
|
||
? 'size-3'
|
||
: 'size-4'
|
||
})
|
||
|
||
const providerLabel = computed(() => formatProviderLabel(props.provider, t('common.providers.unknown')))
|
||
|
||
const authenticationLabel = computed(() => formatAuthenticationLabel(props.authenticationKind))
|
||
</script>
|
||
|
||
<template>
|
||
<span class="inline-flex items-center whitespace-nowrap" :class="groupGapClass">
|
||
<span
|
||
class="inline-flex shrink-0 items-center justify-center bg-z-fill-secondary/80 text-z-text"
|
||
:class="iconContainerClass"
|
||
:title="providerLabel"
|
||
>
|
||
<component :is="providerIconComponent" v-if="providerIconComponent" :class="iconClass" />
|
||
<span v-else class="text-[10px] font-heavy text-z-text-quaternary">?</span>
|
||
</span>
|
||
|
||
<span
|
||
v-if="showAuthenticationKind"
|
||
class="inline-flex shrink-0 items-center justify-center bg-z-fill-secondary/80 text-z-text"
|
||
:class="iconContainerClass"
|
||
:title="authenticationLabel"
|
||
>
|
||
<component :is="authenticationIconComponent" v-if="authenticationIconComponent" :class="iconClass" />
|
||
<span v-else class="text-[10px] font-heavy text-z-text-quaternary">?</span>
|
||
</span>
|
||
|
||
<span class="sr-only">
|
||
{{ providerLabel }}<template v-if="showAuthenticationKind">，{{ authenticationLabel }}</template>
|
||
</span>
|
||
</span>
|
||
</template>
|