From 40cebc250fa57bec47e70a2cbdf8ee55194fe99b Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 31 Mar 2026 21:27:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=B8=A0=E9=81=93=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=A8=A1=E5=9E=8B=E6=A0=87=E7=AD=BE=E5=92=8C=E6=98=A0?=
 =?UTF-8?q?=E5=B0=84=E8=BE=93=E5=85=A5=E6=A1=86=E6=98=BE=E7=A4=BA=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=E5=AF=B9=E5=BA=94=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PricingEntryCard 折叠态模型 tag 按平台着色
- ModelTagInput 模型标签按平台着色
- 模型映射输入框边框按平台着色
---
 .../admin/channel/ModelTagInput.vue           |  5 +++-
 .../admin/channel/PricingEntryCard.vue        |  7 ++++--
 .../src/components/admin/channel/types.ts     | 24 +++++++++++++++++++
 frontend/src/views/admin/ChannelsView.vue     | 14 +++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/admin/channel/ModelTagInput.vue b/frontend/src/components/admin/channel/ModelTagInput.vue
index d9002748..a1ce4022 100644
--- a/frontend/src/components/admin/channel/ModelTagInput.vue
+++ b/frontend/src/components/admin/channel/ModelTagInput.vue
@@ -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<{
diff --git a/frontend/src/components/admin/channel/PricingEntryCard.vue b/frontend/src/components/admin/channel/PricingEntryCard.vue
index 3448df6f..9cf6a85f 100644
--- a/frontend/src/components/admin/channel/PricingEntryCard.vue
+++ b/frontend/src/components/admin/channel/PricingEntryCard.vue
@@ -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<{
diff --git a/frontend/src/components/admin/channel/types.ts b/frontend/src/components/admin/channel/types.ts
index 3ddc94e7..55de8485 100644
--- a/frontend/src/components/admin/channel/types.ts
+++ b/frontend/src/components/admin/channel/types.ts
@@ -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'
+  }
+}
diff --git a/frontend/src/views/admin/ChannelsView.vue b/frontend/src/views/admin/ChannelsView.vue
index 1f2cd9f5..e8a9bd24 100644
--- a/frontend/src/views/admin/ChannelsView.vue
+++ b/frontend/src/views/admin/ChannelsView.vue
@@ -322,6 +322,7 @@
                     :value="srcModel"
                     type="text"
                     class="input flex-1 text-xs"
+                    :class="getPlatformInputBorder(section.platform)"
                     :placeholder="t('admin.channels.form.mappingSource', 'Source model')"
                     @change="renameMappingKey(sIdx, srcModel, ($event.target as HTMLInputElement).value)"
                   />
@@ -330,6 +331,7 @@
                     :value="section.model_mapping[srcModel]"
                     type="text"
                     class="input flex-1 text-xs"
+                    :class="getPlatformInputBorder(section.platform)"
                     :placeholder="t('admin.channels.form.mappingTarget', 'Target model')"
                     @input="section.model_mapping[srcModel] = ($event.target as HTMLInputElement).value"
                   />
@@ -363,6 +365,7 @@
                   v-for="(entry, idx) in section.model_pricing"
                   :key="idx"
                   :entry="entry"
+                  :platform="section.platform"
                   @update="updatePricingEntry(sIdx, idx, $event)"
                   @remove="removePricingEntry(sIdx, idx)"
                 />
@@ -532,6 +535,17 @@ function getRateBadgeClass(platform: string): string {
   }
 }
 
+function getPlatformInputBorder(platform: string): string {
+  switch (platform) {
+    case 'anthropic': return 'border-orange-300 focus:border-orange-500 dark:border-orange-700'
+    case 'openai': return 'border-emerald-300 focus:border-emerald-500 dark:border-emerald-700'
+    case 'gemini': return 'border-blue-300 focus:border-blue-500 dark:border-blue-700'
+    case 'antigravity': return 'border-purple-300 focus:border-purple-500 dark:border-purple-700'
+    case 'sora': return 'border-rose-300 focus:border-rose-500 dark:border-rose-700'
+    default: return ''
+  }
+}
+
 // ── Helpers ──
 function formatDate(value: string): string {
   if (!value) return '-'