feat(ui): 渠道表单模型标签和映射输入框显示平台对应颜色
- PricingEntryCard 折叠态模型 tag 按平台着色 - ModelTagInput 模型标签按平台着色 - 模型映射输入框边框按平台着色
This commit is contained in:
@@ -5,7 +5,8 @@
|
||||
<span
|
||||
v-for="(model, idx) in models"
|
||||
:key="idx"
|
||||
class="inline-flex items-center gap-1 rounded-md bg-primary-50 px-2 py-0.5 text-sm text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
|
||||
class="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-sm"
|
||||
:class="getPlatformTagClass(props.platform || '')"
|
||||
>
|
||||
{{ model }}
|
||||
<button
|
||||
@@ -38,12 +39,14 @@
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { getPlatformTagClass } from './types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
models: string[]
|
||||
placeholder?: string
|
||||
platform?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
<span
|
||||
v-for="(m, i) in entry.models.slice(0, 3)"
|
||||
:key="i"
|
||||
class="inline-flex shrink-0 rounded bg-gray-200 px-1.5 py-0.5 text-xs text-gray-700 dark:bg-dark-600 dark:text-gray-300"
|
||||
class="inline-flex shrink-0 rounded px-1.5 py-0.5 text-xs"
|
||||
:class="getPlatformTagClass(props.platform || '')"
|
||||
>
|
||||
{{ m }}
|
||||
</span>
|
||||
@@ -74,6 +75,7 @@
|
||||
</label>
|
||||
<ModelTagInput
|
||||
:models="entry.models"
|
||||
:platform="props.platform"
|
||||
@update:models="onModelsUpdate($event)"
|
||||
:placeholder="t('admin.channels.form.modelsPlaceholder', '输入模型名后按回车添加,支持通配符 *')"
|
||||
class="mt-1"
|
||||
@@ -232,7 +234,7 @@ import Icon from '@/components/icons/Icon.vue'
|
||||
import IntervalRow from './IntervalRow.vue'
|
||||
import ModelTagInput from './ModelTagInput.vue'
|
||||
import type { PricingFormEntry, IntervalFormEntry } from './types'
|
||||
import { perTokenToMTok } from './types'
|
||||
import { perTokenToMTok, getPlatformTagClass } from './types'
|
||||
import type { BillingMode } from '@/api/admin/channels'
|
||||
import channelsAPI from '@/api/admin/channels'
|
||||
|
||||
@@ -240,6 +242,7 @@ const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
entry: PricingFormEntry
|
||||
platform?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
||||
@@ -72,3 +72,27 @@ export function formIntervalsToAPI(intervals: IntervalFormEntry[]): PricingInter
|
||||
sort_order: iv.sort_order
|
||||
}))
|
||||
}
|
||||
|
||||
/** 平台对应的模型 tag 样式(背景+文字) */
|
||||
export function getPlatformTagClass(platform: string): string {
|
||||
switch (platform) {
|
||||
case 'anthropic': return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
case 'openai': return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
case 'gemini': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
case 'antigravity': return 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
|
||||
case 'sora': return 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
|
||||
default: return 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
/** 平台对应的输入框边框色 */
|
||||
export function getPlatformBorderClass(platform: string): string {
|
||||
switch (platform) {
|
||||
case 'anthropic': return 'border-orange-300 dark:border-orange-700'
|
||||
case 'openai': return 'border-emerald-300 dark:border-emerald-700'
|
||||
case 'gemini': return 'border-blue-300 dark:border-blue-700'
|
||||
case 'antigravity': return 'border-purple-300 dark:border-purple-700'
|
||||
case 'sora': return 'border-rose-300 dark:border-rose-700'
|
||||
default: return 'border-gray-300 dark:border-dark-600'
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user